From 72f90b99dd55c9001b61651fb54ff7e4039c06f1 Mon Sep 17 00:00:00 2001 From: liabru Date: Tue, 26 Apr 2016 20:48:13 +0100 Subject: [PATCH] decouple Matter.RenderPixi --- demo/js/Demo.js | 5 - demo/js/lib/matter-tools/matter-tools-dev.js | 18 +- demo/js/lib/matter-tools/matter-tools.css | 1032 +++++++++--------- src/render/RenderPixi.js | 53 +- 4 files changed, 562 insertions(+), 546 deletions(-) diff --git a/demo/js/Demo.js b/demo/js/Demo.js index 3aa3755..e31db07 100644 --- a/demo/js/Demo.js +++ b/demo/js/Demo.js @@ -131,11 +131,6 @@ World.add(demo.engine.world, demo.mouseConstraint); }); - - // need to rebind mouse on render change - Events.on(demo.gui, 'setRenderer', function() { - Mouse.setElement(demo.mouseConstraint.mouse, demo.render.canvas); - }); } // create a Matter.Inspector diff --git a/demo/js/lib/matter-tools/matter-tools-dev.js b/demo/js/lib/matter-tools/matter-tools-dev.js index 35fa5e2..e6e4c8b 100644 --- a/demo/js/lib/matter-tools/matter-tools-dev.js +++ b/demo/js/lib/matter-tools/matter-tools-dev.js @@ -1,5 +1,5 @@ /** -* matter-tools-dev.min.js 0.5.0-dev 2016-04-24 +* matter-tools-dev.min.js 0.5.0-dev 2016-04-26 * https://github.com/liabru/matter-tools * License: MIT */ @@ -202,9 +202,6 @@ physics.add(runner, "enabled"); physics.open(); var render = datGui.addFolder("Render"); - render.add(gui, "renderer", [ "canvas", "webgl" ]).onFinishChange(function(value) { - _setRenderer(gui, value); - }); render.add(gui.render.options, "wireframes"); render.add(gui.render.options, "showDebug"); render.add(gui.render.options, "showPositions"); @@ -223,19 +220,6 @@ render.add(gui.render.options, "enabled"); render.open(); }; - var _setRenderer = function(gui, rendererName) { - var engine = gui.engine, controller; - if (rendererName === "canvas") controller = Render; - if (rendererName === "webgl") controller = RenderPixi; - gui.render.element.removeChild(gui.render.canvas); - var options = gui.render.options; - gui.render = controller.create({ - element:gui.render.element, - options:options - }); - gui.render = options; - Events.trigger(gui, "setRenderer"); - }; var _addBody = function(gui) { var engine = gui.engine; var options = { diff --git a/demo/js/lib/matter-tools/matter-tools.css b/demo/js/lib/matter-tools/matter-tools.css index 48d681b..b144016 100644 --- a/demo/js/lib/matter-tools/matter-tools.css +++ b/demo/js/lib/matter-tools/matter-tools.css @@ -1,518 +1,518 @@ .jstree-node,.jstree-children,.jstree-container-ul{display:block;margin:0;padding:0;list-style-type:none;list-style-image:none}.jstree-node{white-space:nowrap}.jstree-anchor{display:inline-block;color:#000;white-space:nowrap;padding:0 4px 0 1px;margin:0;vertical-align:top}.jstree-anchor:focus{outline:0}.jstree-anchor,.jstree-anchor:link,.jstree-anchor:visited,.jstree-anchor:hover,.jstree-anchor:active{text-decoration:none;color:inherit}.jstree-icon{display:inline-block;text-decoration:none;margin:0;padding:0;vertical-align:top;text-align:center}.jstree-icon:empty{display:inline-block;text-decoration:none;margin:0;padding:0;vertical-align:top;text-align:center}.jstree-ocl{cursor:pointer}.jstree-leaf>.jstree-ocl{cursor:default}.jstree .jstree-open>.jstree-children{display:block}.jstree .jstree-closed>.jstree-children,.jstree .jstree-leaf>.jstree-children{display:none}.jstree-anchor>.jstree-themeicon{margin-right:2px}.jstree-no-icons .jstree-themeicon,.jstree-anchor>.jstree-themeicon-hidden{display:none}.jstree-rtl .jstree-anchor{padding:0 1px 0 4px}.jstree-rtl .jstree-anchor>.jstree-themeicon{margin-left:2px;margin-right:0}.jstree-rtl .jstree-node{margin-left:0}.jstree-rtl .jstree-container-ul>.jstree-node{margin-right:0}.jstree-wholerow-ul{position:relative;display:inline-block;min-width:100%}.jstree-wholerow-ul .jstree-leaf>.jstree-ocl{cursor:pointer}.jstree-wholerow-ul .jstree-anchor,.jstree-wholerow-ul .jstree-icon{position:relative}.jstree-wholerow-ul .jstree-wholerow{width:100%;cursor:pointer;position:absolute;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vakata-context{display:none}.vakata-context,.vakata-context ul{margin:0;padding:2px;position:absolute;background:#f5f5f5;border:1px solid #979797;-moz-box-shadow:5px 5px 4px -4px #666;-webkit-box-shadow:2px 2px 2px #999;box-shadow:2px 2px 2px #999}.vakata-context ul{list-style:none;left:100%;margin-top:-2.7em;margin-left:-4px}.vakata-context .vakata-context-right ul{left:auto;right:100%;margin-left:auto;margin-right:-4px}.vakata-context li{list-style:none;display:inline}.vakata-context li>a{display:block;padding:0 2em;text-decoration:none;width:auto;color:#000;white-space:nowrap;line-height:2.4em;-moz-text-shadow:1px 1px 0 #fff;-webkit-text-shadow:1px 1px 0 #fff;text-shadow:1px 1px 0 #fff;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}.vakata-context li>a:hover{position:relative;background-color:#e8eff7;-moz-box-shadow:0 0 2px #0a6aa1;-webkit-box-shadow:0 0 2px #0a6aa1;box-shadow:0 0 2px #0a6aa1}.vakata-context li>a.vakata-context-parent{background-image:url(data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==);background-position:right center;background-repeat:no-repeat}.vakata-context li>a:focus{outline:0}.vakata-context .vakata-context-hover>a{position:relative;background-color:#e8eff7;-moz-box-shadow:0 0 2px #0a6aa1;-webkit-box-shadow:0 0 2px #0a6aa1;box-shadow:0 0 2px #0a6aa1}.vakata-context .vakata-context-separator a,.vakata-context .vakata-context-separator a:hover{background:#fff;border:0;border-top:1px solid #e2e3e3;height:1px;min-height:1px;max-height:1px;padding:0;margin:0 0 0 2.4em;border-left:1px solid #e0e0e0;-moz-text-shadow:0 0 0 transparent;-webkit-text-shadow:0 0 0 transparent;text-shadow:0 0 0 transparent;-moz-box-shadow:0 0 0 transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0}.vakata-context .vakata-contextmenu-disabled a,.vakata-context .vakata-contextmenu-disabled a:hover{color:silver;background-color:transparent;border:0;box-shadow:0 0 0}.vakata-context li>a>i{text-decoration:none;display:inline-block;width:2.4em;height:2.4em;background:0 0;margin:0 0 0 -2em;vertical-align:top;text-align:center;line-height:2.4em}.vakata-context li>a>i:empty{width:2.4em;line-height:2.4em}.vakata-context li>a .vakata-contextmenu-sep{display:inline-block;width:1px;height:2.4em;background:#fff;margin:0 .5em 0 0;border-left:1px solid #e2e3e3}.vakata-context .vakata-contextmenu-shortcut{font-size:.8em;color:silver;opacity:.5;display:none}.vakata-context-rtl ul{left:auto;right:100%;margin-left:auto;margin-right:-4px}.vakata-context-rtl li>a.vakata-context-parent{background-image:url(data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7);background-position:left center;background-repeat:no-repeat}.vakata-context-rtl .vakata-context-separator>a{margin:0 2.4em 0 0;border-left:0;border-right:1px solid #e2e3e3}.vakata-context-rtl .vakata-context-left ul{right:auto;left:100%;margin-left:-4px;margin-right:auto}.vakata-context-rtl li>a>i{margin:0 -2em 0 0}.vakata-context-rtl li>a .vakata-contextmenu-sep{margin:0 0 0 .5em;border-left-color:#fff;background:#e2e3e3}#jstree-marker{position:absolute;top:0;left:0;margin:0;padding:0;border-right:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid;width:0;height:0;font-size:0;line-height:0}#jstree-dnd{line-height:16px;margin:0;padding:4px}#jstree-dnd .jstree-icon,#jstree-dnd .jstree-copy{display:inline-block;text-decoration:none;margin:0 2px 0 0;padding:0;width:16px;height:16px}#jstree-dnd .jstree-ok{background:green}#jstree-dnd .jstree-er{background:red}#jstree-dnd .jstree-copy{margin:0 2px}.jstree-default .jstree-node,.jstree-default .jstree-icon{background-repeat:no-repeat;background-color:transparent}.jstree-default .jstree-anchor,.jstree-default .jstree-wholerow{transition:background-color .15s,box-shadow .15s}.jstree-default .jstree-hovered{background:#e7f4f9;border-radius:2px;box-shadow:inset 0 0 1px #ccc}.jstree-default .jstree-clicked{background:#beebff;border-radius:2px;box-shadow:inset 0 0 1px #999}.jstree-default .jstree-no-icons .jstree-anchor>.jstree-themeicon{display:none}.jstree-default .jstree-disabled{background:0 0;color:#666}.jstree-default .jstree-disabled.jstree-hovered{background:0 0;box-shadow:none}.jstree-default .jstree-disabled.jstree-clicked{background:#efefef}.jstree-default .jstree-disabled>.jstree-icon{opacity:.8;filter:url("data:image/svg+xml;utf8,#jstree-grayscale");filter:gray;-webkit-filter:grayscale(100%)}.jstree-default .jstree-search{font-style:italic;color:#8b0000;font-weight:700}.jstree-default .jstree-no-checkboxes .jstree-checkbox{display:none!important}.jstree-default.jstree-checkbox-no-clicked .jstree-clicked{background:0 0;box-shadow:none}.jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered{background:#e7f4f9}.jstree-default.jstree-checkbox-no-clicked>.jstree-wholerow-ul .jstree-wholerow-clicked{background:0 0}.jstree-default.jstree-checkbox-no-clicked>.jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered{background:#e7f4f9}#jstree-dnd.jstree-default .jstree-ok,#jstree-dnd.jstree-default .jstree-er{background-image:url(32px.png);background-repeat:no-repeat;background-color:transparent}#jstree-dnd.jstree-default i{background:0 0;width:16px;height:16px}#jstree-dnd.jstree-default .jstree-ok{background-position:-9px -71px}#jstree-dnd.jstree-default .jstree-er{background-position:-39px -71px}.jstree-default>.jstree-striped{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==) left top repeat}.jstree-default>.jstree-wholerow-ul .jstree-hovered,.jstree-default>.jstree-wholerow-ul .jstree-clicked{background:0 0;box-shadow:none;border-radius:0}.jstree-default .jstree-wholerow{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.jstree-default .jstree-wholerow-hovered{background:#e7f4f9}.jstree-default .jstree-wholerow-clicked{background:#beebff;background:-moz-linear-gradient(top,#beebff 0,#a8e4ff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#beebff),color-stop(100%,#a8e4ff));background:-webkit-linear-gradient(top,#beebff 0,#a8e4ff 100%);background:-o-linear-gradient(top,#beebff 0,#a8e4ff 100%);background:-ms-linear-gradient(top,#beebff 0,#a8e4ff 100%);background:linear-gradient(to bottom,#beebff 0,#a8e4ff 100%)}.jstree-default .jstree-node{min-height:24px;line-height:24px;margin-left:24px;min-width:24px}.jstree-default .jstree-anchor{line-height:24px;height:24px}.jstree-default .jstree-icon{width:24px;height:24px;line-height:24px}.jstree-default .jstree-icon:empty{width:24px;height:24px;line-height:24px}.jstree-default.jstree-rtl .jstree-node{margin-right:24px}.jstree-default .jstree-wholerow{height:24px}.jstree-default .jstree-node,.jstree-default .jstree-icon{background-image:url(32px.png)}.jstree-default .jstree-node{background-position:-292px -4px;background-repeat:repeat-y}.jstree-default .jstree-last{background:0 0}.jstree-default .jstree-open>.jstree-ocl{background-position:-132px -4px}.jstree-default .jstree-closed>.jstree-ocl{background-position:-100px -4px}.jstree-default .jstree-leaf>.jstree-ocl{background-position:-68px -4px}.jstree-default .jstree-themeicon{background-position:-260px -4px}.jstree-default>.jstree-no-dots .jstree-node,.jstree-default>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-default>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-36px -4px}.jstree-default>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-4px -4px}.jstree-default .jstree-disabled{background:0 0}.jstree-default .jstree-disabled.jstree-hovered{background:0 0}.jstree-default .jstree-disabled.jstree-clicked{background:#efefef}.jstree-default .jstree-checkbox{background-position:-164px -4px}.jstree-default .jstree-checkbox:hover{background-position:-164px -36px}.jstree-default .jstree-clicked>.jstree-checkbox{background-position:-228px -4px}.jstree-default .jstree-clicked>.jstree-checkbox:hover{background-position:-228px -36px}.jstree-default .jstree-anchor>.jstree-undetermined{background-position:-196px -4px}.jstree-default .jstree-anchor>.jstree-undetermined:hover{background-position:-196px -36px}.jstree-default>.jstree-striped{background-size:auto 48px}.jstree-default.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);background-position:100% 1px;background-repeat:repeat-y}.jstree-default.jstree-rtl .jstree-last{background:0 0}.jstree-default.jstree-rtl .jstree-open>.jstree-ocl{background-position:-132px -36px}.jstree-default.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-100px -36px}.jstree-default.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-68px -36px}.jstree-default.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-default.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-default.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-36px -36px}.jstree-default.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-4px -36px}.jstree-default .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-default>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url(throbber.gif) center center no-repeat}.jstree-default .jstree-file{background:url(32px.png) -100px -68px no-repeat}.jstree-default .jstree-folder{background:url(32px.png) -260px -4px no-repeat}.jstree-default.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==)}.jstree-default.jstree-rtl .jstree-last{background:0 0}.jstree-default-small .jstree-node{min-height:18px;line-height:18px;margin-left:18px;min-width:18px}.jstree-default-small .jstree-anchor{line-height:18px;height:18px}.jstree-default-small .jstree-icon{width:18px;height:18px;line-height:18px}.jstree-default-small .jstree-icon:empty{width:18px;height:18px;line-height:18px}.jstree-default-small.jstree-rtl .jstree-node{margin-right:18px}.jstree-default-small .jstree-wholerow{height:18px}.jstree-default-small .jstree-node,.jstree-default-small .jstree-icon{background-image:url(32px.png)}.jstree-default-small .jstree-node{background-position:-295px -7px;background-repeat:repeat-y}.jstree-default-small .jstree-last{background:0 0}.jstree-default-small .jstree-open>.jstree-ocl{background-position:-135px -7px}.jstree-default-small .jstree-closed>.jstree-ocl{background-position:-103px -7px}.jstree-default-small .jstree-leaf>.jstree-ocl{background-position:-71px -7px}.jstree-default-small .jstree-themeicon{background-position:-263px -7px}.jstree-default-small>.jstree-no-dots .jstree-node,.jstree-default-small>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-default-small>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-39px -7px}.jstree-default-small>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-7px -7px}.jstree-default-small .jstree-disabled{background:0 0}.jstree-default-small .jstree-disabled.jstree-hovered{background:0 0}.jstree-default-small .jstree-disabled.jstree-clicked{background:#efefef}.jstree-default-small .jstree-checkbox{background-position:-167px -7px}.jstree-default-small .jstree-checkbox:hover{background-position:-167px -39px}.jstree-default-small .jstree-clicked>.jstree-checkbox{background-position:-231px -7px}.jstree-default-small .jstree-clicked>.jstree-checkbox:hover{background-position:-231px -39px}.jstree-default-small .jstree-anchor>.jstree-undetermined{background-position:-199px -7px}.jstree-default-small .jstree-anchor>.jstree-undetermined:hover{background-position:-199px -39px}.jstree-default-small>.jstree-striped{background-size:auto 36px}.jstree-default-small.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);background-position:100% 1px;background-repeat:repeat-y}.jstree-default-small.jstree-rtl .jstree-last{background:0 0}.jstree-default-small.jstree-rtl .jstree-open>.jstree-ocl{background-position:-135px -39px}.jstree-default-small.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-103px -39px}.jstree-default-small.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-71px -39px}.jstree-default-small.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-default-small.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-default-small.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-39px -39px}.jstree-default-small.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-7px -39px}.jstree-default-small .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-default-small>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url(throbber.gif) center center no-repeat}.jstree-default-small .jstree-file{background:url(32px.png) -103px -71px no-repeat}.jstree-default-small .jstree-folder{background:url(32px.png) -263px -7px no-repeat}.jstree-default-small.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==)}.jstree-default-small.jstree-rtl .jstree-last{background:0 0}.jstree-default-large .jstree-node{min-height:32px;line-height:32px;margin-left:32px;min-width:32px}.jstree-default-large .jstree-anchor{line-height:32px;height:32px}.jstree-default-large .jstree-icon{width:32px;height:32px;line-height:32px}.jstree-default-large .jstree-icon:empty{width:32px;height:32px;line-height:32px}.jstree-default-large.jstree-rtl .jstree-node{margin-right:32px}.jstree-default-large .jstree-wholerow{height:32px}.jstree-default-large .jstree-node,.jstree-default-large .jstree-icon{background-image:url(32px.png)}.jstree-default-large .jstree-node{background-position:-288px 0;background-repeat:repeat-y}.jstree-default-large .jstree-last{background:0 0}.jstree-default-large .jstree-open>.jstree-ocl{background-position:-128px 0}.jstree-default-large .jstree-closed>.jstree-ocl{background-position:-96px 0}.jstree-default-large .jstree-leaf>.jstree-ocl{background-position:-64px 0}.jstree-default-large .jstree-themeicon{background-position:-256px 0}.jstree-default-large>.jstree-no-dots .jstree-node,.jstree-default-large>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-default-large>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-32px 0}.jstree-default-large>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:0 0}.jstree-default-large .jstree-disabled{background:0 0}.jstree-default-large .jstree-disabled.jstree-hovered{background:0 0}.jstree-default-large .jstree-disabled.jstree-clicked{background:#efefef}.jstree-default-large .jstree-checkbox{background-position:-160px 0}.jstree-default-large .jstree-checkbox:hover{background-position:-160px -32px}.jstree-default-large .jstree-clicked>.jstree-checkbox{background-position:-224px 0}.jstree-default-large .jstree-clicked>.jstree-checkbox:hover{background-position:-224px -32px}.jstree-default-large .jstree-anchor>.jstree-undetermined{background-position:-192px 0}.jstree-default-large .jstree-anchor>.jstree-undetermined:hover{background-position:-192px -32px}.jstree-default-large>.jstree-striped{background-size:auto 64px}.jstree-default-large.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==);background-position:100% 1px;background-repeat:repeat-y}.jstree-default-large.jstree-rtl .jstree-last{background:0 0}.jstree-default-large.jstree-rtl .jstree-open>.jstree-ocl{background-position:-128px -32px}.jstree-default-large.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-96px -32px}.jstree-default-large.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-64px -32px}.jstree-default-large.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-default-large.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:0 0}.jstree-default-large.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-32px -32px}.jstree-default-large.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:0 -32px}.jstree-default-large .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-default-large>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url(throbber.gif) center center no-repeat}.jstree-default-large .jstree-file{background:url(32px.png) -96px -64px no-repeat}.jstree-default-large .jstree-folder{background:url(32px.png) -256px 0 no-repeat}.jstree-default-large.jstree-rtl .jstree-node{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==)}.jstree-default-large.jstree-rtl .jstree-last{background:0 0}@media (max-width:768px){.jstree-default-responsive .jstree-icon{background-image:url(40px.png)}.jstree-default-responsive .jstree-node,.jstree-default-responsive .jstree-leaf>.jstree-ocl{background:0 0}.jstree-default-responsive .jstree-node{min-height:40px;line-height:40px;margin-left:40px;min-width:40px;white-space:nowrap}.jstree-default-responsive .jstree-anchor{line-height:40px;height:40px}.jstree-default-responsive .jstree-icon,.jstree-default-responsive .jstree-icon:empty{width:40px;height:40px;line-height:40px}.jstree-default-responsive>.jstree-container-ul>.jstree-node{margin-left:0}.jstree-default-responsive.jstree-rtl .jstree-node{margin-left:0;margin-right:40px}.jstree-default-responsive.jstree-rtl .jstree-container-ul>.jstree-node{margin-right:0}.jstree-default-responsive .jstree-ocl,.jstree-default-responsive .jstree-themeicon,.jstree-default-responsive .jstree-checkbox{background-size:120px 200px}.jstree-default-responsive .jstree-leaf>.jstree-ocl{background:0 0}.jstree-default-responsive .jstree-open>.jstree-ocl{background-position:0 0!important}.jstree-default-responsive .jstree-closed>.jstree-ocl{background-position:0 -40px!important}.jstree-default-responsive.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-40px 0!important}.jstree-default-responsive .jstree-themeicon{background-position:-40px -40px}.jstree-default-responsive .jstree-checkbox,.jstree-default-responsive .jstree-checkbox:hover{background-position:-40px -80px}.jstree-default-responsive .jstree-clicked>.jstree-checkbox,.jstree-default-responsive .jstree-clicked>.jstree-checkbox:hover{background-position:0 -80px}.jstree-default-responsive .jstree-anchor>.jstree-undetermined,.jstree-default-responsive .jstree-anchor>.jstree-undetermined:hover{background-position:0 -120px}.jstree-default-responsive .jstree-anchor{font-weight:700;font-size:1.1em;text-shadow:1px 1px #fff}.jstree-default-responsive>.jstree-striped{background:0 0}.jstree-default-responsive .jstree-wholerow{border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(64,64,64,.2);background:#ebebeb;height:40px}.jstree-default-responsive .jstree-wholerow-hovered{background:#e7f4f9}.jstree-default-responsive .jstree-wholerow-clicked{background:#beebff}.jstree-default-responsive .jstree-children .jstree-last>.jstree-wholerow{box-shadow:inset 0 -6px 3px -5px #666}.jstree-default-responsive .jstree-children .jstree-open>.jstree-wholerow{box-shadow:inset 0 6px 3px -5px #666;border-top:0}.jstree-default-responsive .jstree-children .jstree-open+.jstree-open{box-shadow:none}.jstree-default-responsive .jstree-node,.jstree-default-responsive .jstree-icon,.jstree-default-responsive .jstree-node>.jstree-ocl,.jstree-default-responsive .jstree-themeicon,.jstree-default-responsive .jstree-checkbox{background-image:url(40px.png);background-size:120px 200px}.jstree-default-responsive .jstree-node{background-position:-80px 0;background-repeat:repeat-y}.jstree-default-responsive .jstree-last{background:0 0}.jstree-default-responsive .jstree-leaf>.jstree-ocl{background-position:-40px -120px}.jstree-default-responsive .jstree-last>.jstree-ocl{background-position:-40px -160px}.jstree-default-responsive .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-default-responsive .jstree-file{background:url(40px.png) 0 -160px no-repeat;background-size:120px 200px}.jstree-default-responsive .jstree-folder{background:url(40px.png) -40px -40px no-repeat;background-size:120px 200px}}.jstree-default>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0} -/* -* Shared -*/ - -.ins-container, -.jstree, -body .dg .c, -body .dg .cr.function, -body .dg .c select, -body .dg .property-name, -body .dg .title { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* -* Matter.Gui -*/ - -body .dg.main { - box-shadow: 0 0 8px rgba(0,0,0,0.7); -} - -@media only screen and (max-width : 1350px) { - body.gui-auto-hide .dg.ac { - right: -233px; - } - - body .dg.ac:hover, - body.gui-show .dg.ac { - right: 0px; - } - - body.gui-auto-hide.gui-transitions .dg.ac { - -webkit-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); - -moz-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); - -o-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); - transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); - - -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); - -moz-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); - -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); - transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); - - transition-delay: 3s; - -webkit-transition-delay: 3s; - } - - body.gui-transitions .dg.ac:hover, - body.gui-show.gui-transitions .dg.ac { - -webkit-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); - -moz-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); - -o-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); - transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); - - -webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); - -moz-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); - -o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); - transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); - - transition-delay: 0; - -webkit-transition-delay: 0; - } -} - -body .dg.main.taller-than-window .close-button { - border-top: 1px solid #444; - border-right: 4px solid #444; -} - -body .dg.main .close-button { - background-color: #444; -} - -body .dg.main .close-button:hover { - background-color: #555; -} - -body .dg.main::-webkit-scrollbar { - background: #3d3d3d; - width: 9px; -} - -body .dg.main::-webkit-scrollbar-thumb { - background: transparent; - width: 5px; - border-left: 5px solid #3d3d3d; - border-right: 6px solid rgba(0,0,0,0.2); - border-radius: 0; -} - -body .dg { - color: #aaa; - text-shadow: none !important; -} - -body .dg li:not(.folder) { - background: #3d3d3d; - border-bottom: 0px; - padding: 0 0 0 12px; -} - -body .dg li.save-row .button { - text-shadow: none !important; -} - -body .dg li.title { - padding-left: 22px; - border-bottom: 1px solid #555; - background: #444 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 10px 10px no-repeat; -} - -body .dg .cr.boolean:hover { - background: #3d3d3d; -} - -body .dg .cr.function { - border-top: 1px solid #444; - background: #333; - color: #aaa; - border-bottom: 1px solid #333; -} - -body .dg .cr.function:hover { - background: #3a3a3a; - border-bottom: 1px solid #2fa1d6; -} - -body .dg .cr.function:active { - border-top: 2px solid #444; - border-bottom: 0; - background: #2e2e2e; -} - -body .dg .c select { - margin-top: 2px; - margin-left: -5px; - padding: 3px 5px; -} - -body .dg .c select, -body .dg .c input[type=text], -body .dg .cr.number input[type=text] { - background: #333; - color: #999; - border: 0; - font-size: 10px; -} - -body .dg .c select, -body .dg .c select:focus { - width: 88px; - outline: 0; -} - -body .dg .c input[type=text]:hover { - background: #444; -} - -body .dg .c input[type=text]:focus { - background: #444; - color: #fff; -} - -body .dg .c .slider { - background: #555; -} - -body .dg .c .slider:hover { - background: #666; -} - -body .dg .c .slider-fg { - background: #777; -} - -body .dg .c .slider:hover .slider-fg { - background: #999; -} - -body .dg li.folder { - border-left: 0; -} - -body .dg.a { - border-right:4px solid #3d3d3d; -} - -/* -* Matter.Inspector -*/ - -.ins-cursor-move canvas { - cursor: move !important; -} - -.ins-cursor-rotate canvas { - cursor: ew-resize !important; -} - -.ins-cursor-scale canvas { - cursor: nwse-resize !important; -} - -.ins-container { - position: fixed; - overflow: auto; - width: 260px; - bottom: 0; - top: 0; - left: 0; - background: #3d3d3d; - padding: 0; - font-family: Arial; - font-size: 12px; - color: #aaa; - border-right: 2px solid #3d3d3d; - box-shadow: 0 0 8px rgba(0,0,0,0.7); -} - -@media only screen and (max-width : 1350px) { - .ins-auto-hide .ins-container { - left: -245px; - border-right: 1px dotted #888; - } - - .ins-container:hover, - .ins-show .ins-container { - left: 0px; - border-right: 0px dotted #888; - } - - .ins-transitions .ins-container { - -webkit-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); - -moz-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); - -o-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); - transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); - - -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); - -moz-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); - -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); - transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); - - transition-delay: 3s; - -webkit-transition-delay: 3s; - } - - .ins-transitions .ins-container:hover, - .ins-transitions.ins-show .ins-container { - -webkit-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); - -moz-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); - -o-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); - transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); - - -webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); - -moz-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); - -o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); - transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); - - transition-delay: 0; - -webkit-transition-delay: 0; - } -} - -.ins-add-button.ins-button { - float: right; - width: auto; - height: auto; - padding: 2px 5px; - margin: 2px 29px; - min-width: 0; - position: relative; - z-index: 100; -} - -.ins-search-box { - margin: 14px 23px; - border: 0; - padding: 7px 8px; - font-size: 12px; - width: 80%; - box-sizing: border-box; - border-radius: 3px; - background: #444; - border: 1px solid #444; - color: #999; -} - -.ins-search-box:focus { - background: #484848; - color: #aaa; - border: 1px solid rgba(255,255,255,0.1); - outline: 0; -} - -.ins-search-box::-webkit-search-cancel-button { - -webkit-appearance: none; - height: 15px; - width: 8px; - cursor: pointer; -} - -.ins-search-box::-webkit-search-cancel-button:before { - height: 10px; - width: 10px; - content: 'x'; - font-family: Arial; - line-height: 0; - font-size: 13px; - color: #999; - font-weight: bold; - cursor: pointer; -} - -.ins-search-box::-webkit-input-placeholder { - color: #777; -} - -.ins-search-box:-moz-placeholder { - color: #777; -} - -.ins-search-box::-moz-placeholder { - color: #777; -} - -.ins-search-box:-ms-input-placeholder { - color: #777; -} - -.ins-world-tree { - overflow: auto; - position: absolute; - left: 0; - right: 0; - top: 110px; - bottom: 8px; -} - -.ins-control-group { - display: block; - clear: both; - overflow: hidden; - padding: 14px 20px 12px 20px; - background: #444; - border-bottom: 1px solid #555; -} - -.ins-button { - display: block; - float: left; - margin: 0 2px; - font-size: 11px; - line-height: 1; - padding: 6px 8px; - min-width: 49px; - text-align: center; - background: #333; - border: 0; - color: #aaa; - border-radius: 2px; - border-bottom: 2px solid #2e2e2e; - box-sizing: border-box; - outline: none; -} - -.ins-button:hover { - background: #3a3a3a; - border-bottom: 2px solid #2fa1d6; -} - -.ins-button:active { - border-top: 2px solid #444; - border-bottom: 0; - background: #2e2e2e; -} - -.jstree-default .jstree-search { - font-style: italic; - color: #aaa; - font-weight: normal; -} - -.jstree-default .jstree-wholerow-hovered, -.jstree-default .jstree-hovered { - background: transparent; - border-radius: 0; - box-shadow: none; -} - -.jstree-default .jstree-wholerow { - height: 26px; -} - -.jstree-default .jstree-wholerow-clicked, -.jstree-default .jstree-clicked { - background: transparent; - border-radius: 0; - box-shadow: none; - transition: none; -} - -.jstree-default .jstree-leaf .jstree-clicked { - color: #bbb !important; - - -webkit-transition: color 100ms linear; - -moz-transition: color 100ms linear; - -o-transition: color 100ms linear; - transition: color 100ms linear; -} - -.jstree-default .jstree-anchor { - line-height: 27px; -} - -.jstree-default .jstree-container-ul> .jstree-node > .jstree-anchor:before, -.jstree-default .jstree-open > .jstree-children > .jstree-node > .jstree-anchor:before { - content: ''; - display: block; - position: absolute; - left: 0; - right: 1px; - height: 26px; - background: transparent; - border-radius: 0; - box-shadow: none; - border-right: none; - pointer-events: none; - background: rgba(0,0,0,0); - - -webkit-transition: background 100ms linear; - -moz-transition: background 100ms linear; - -o-transition: background 100ms linear; - transition: background 100ms linear; -} - -.jstree-default .jstree-anchor.jstree-clicked:before { - background: rgba(0,0,0,0.1) !important; - - -webkit-transition: background 100ms linear; - -moz-transition: background 100ms linear; - -o-transition: background 100ms linear; - transition: background 100ms linear; -} - -.jstree-default .jstree-node-type-body > .jstree-anchor:before { - border-right: 3px solid #e1115f !important; -} - -.jstree-default .jstree-node-type-constraint > .jstree-anchor:before { - border-right: 3px solid #1ed36f !important; -} - -.jstree-default .jstree-node-type-composite > .jstree-anchor:before { - border-right: 3px solid #2fa1d6 !important; -} - -.jstree-default .jstree-node, -.jstree-default .jstree-leaf .jstree-ocl { - background: transparent; -} - -.jstree-default .jstree-open .jstree-ocl { - background-position: -38px -1px; -} - -.jstree-default .jstree-closed .jstree-ocl { - background-position: -4px -2px; -} - -.jstree-anchor { - padding: 1px 0; - transition: none; -} - -.jstree-anchor .jstree-icon { - display: none; -} - -.jstree-node-type-bodies > .jstree-anchor, -.jstree-node-type-constraints > .jstree-anchor, -.jstree-node-type-composites > .jstree-anchor { - color: #888; - font-weight: bold; -} - -.ins-container *::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -.ins-container *::-webkit-scrollbar-thumb:vertical { - border-left: 3px solid #3d3d3d; - background: rgba(0,0,0,0.2); - width: 10px; -} - -.ins-container *::-webkit-scrollbar-thumb:horizontal { - border-top: 3px solid #3d3d3d; - background: rgba(0,0,0,0.2); - height: 10px; -} - -.ins-container *::-webkit-scrollbar-track, -.ins-container *::-webkit-scrollbar-corner { - background: transparent; -} - -#vakata-dnd { - font-family: Arial; - font-size: 12px; - color: #aaa; +/* +* Shared +*/ + +.ins-container, +.jstree, +body .dg .c, +body .dg .cr.function, +body .dg .c select, +body .dg .property-name, +body .dg .title { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* +* Matter.Gui +*/ + +body .dg.main { + box-shadow: 0 0 8px rgba(0,0,0,0.7); +} + +@media only screen and (max-width : 1350px) { + body.gui-auto-hide .dg.ac { + right: -233px; + } + + body .dg.ac:hover, + body.gui-show .dg.ac { + right: 0px; + } + + body.gui-auto-hide.gui-transitions .dg.ac { + -webkit-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); + -moz-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); + -o-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); + transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); + + -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); + -moz-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); + -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); + transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); + + transition-delay: 3s; + -webkit-transition-delay: 3s; + } + + body.gui-transitions .dg.ac:hover, + body.gui-show.gui-transitions .dg.ac { + -webkit-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); + -moz-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); + -o-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); + transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); + + -webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); + -moz-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); + -o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); + transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); + + transition-delay: 0; + -webkit-transition-delay: 0; + } +} + +body .dg.main.taller-than-window .close-button { + border-top: 1px solid #444; + border-right: 4px solid #444; +} + +body .dg.main .close-button { + background-color: #444; +} + +body .dg.main .close-button:hover { + background-color: #555; +} + +body .dg.main::-webkit-scrollbar { + background: #3d3d3d; + width: 9px; +} + +body .dg.main::-webkit-scrollbar-thumb { + background: transparent; + width: 5px; + border-left: 5px solid #3d3d3d; + border-right: 6px solid rgba(0,0,0,0.2); + border-radius: 0; +} + +body .dg { + color: #aaa; + text-shadow: none !important; +} + +body .dg li:not(.folder) { + background: #3d3d3d; + border-bottom: 0px; + padding: 0 0 0 12px; +} + +body .dg li.save-row .button { + text-shadow: none !important; +} + +body .dg li.title { + padding-left: 22px; + border-bottom: 1px solid #555; + background: #444 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 10px 10px no-repeat; +} + +body .dg .cr.boolean:hover { + background: #3d3d3d; +} + +body .dg .cr.function { + border-top: 1px solid #444; + background: #333; + color: #aaa; + border-bottom: 1px solid #333; +} + +body .dg .cr.function:hover { + background: #3a3a3a; + border-bottom: 1px solid #2fa1d6; +} + +body .dg .cr.function:active { + border-top: 2px solid #444; + border-bottom: 0; + background: #2e2e2e; +} + +body .dg .c select { + margin-top: 2px; + margin-left: -5px; + padding: 3px 5px; +} + +body .dg .c select, +body .dg .c input[type=text], +body .dg .cr.number input[type=text] { + background: #333; + color: #999; + border: 0; + font-size: 10px; +} + +body .dg .c select, +body .dg .c select:focus { + width: 88px; + outline: 0; +} + +body .dg .c input[type=text]:hover { + background: #444; +} + +body .dg .c input[type=text]:focus { + background: #444; + color: #fff; +} + +body .dg .c .slider { + background: #555; +} + +body .dg .c .slider:hover { + background: #666; +} + +body .dg .c .slider-fg { + background: #777; +} + +body .dg .c .slider:hover .slider-fg { + background: #999; +} + +body .dg li.folder { + border-left: 0; +} + +body .dg.a { + border-right:4px solid #3d3d3d; +} + +/* +* Matter.Inspector +*/ + +.ins-cursor-move canvas { + cursor: move !important; +} + +.ins-cursor-rotate canvas { + cursor: ew-resize !important; +} + +.ins-cursor-scale canvas { + cursor: nwse-resize !important; +} + +.ins-container { + position: fixed; + overflow: auto; + width: 260px; + bottom: 0; + top: 0; + left: 0; + background: #3d3d3d; + padding: 0; + font-family: Arial; + font-size: 12px; + color: #aaa; + border-right: 2px solid #3d3d3d; + box-shadow: 0 0 8px rgba(0,0,0,0.7); +} + +@media only screen and (max-width : 1350px) { + .ins-auto-hide .ins-container { + left: -245px; + border-right: 1px dotted #888; + } + + .ins-container:hover, + .ins-show .ins-container { + left: 0px; + border-right: 0px dotted #888; + } + + .ins-transitions .ins-container { + -webkit-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); + -moz-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); + -o-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); + transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); + + -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); + -moz-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); + -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); + transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); + + transition-delay: 3s; + -webkit-transition-delay: 3s; + } + + .ins-transitions .ins-container:hover, + .ins-transitions.ins-show .ins-container { + -webkit-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); + -moz-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); + -o-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); + transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); + + -webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); + -moz-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); + -o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); + transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); + + transition-delay: 0; + -webkit-transition-delay: 0; + } +} + +.ins-add-button.ins-button { + float: right; + width: auto; + height: auto; + padding: 2px 5px; + margin: 2px 29px; + min-width: 0; + position: relative; + z-index: 100; +} + +.ins-search-box { + margin: 14px 23px; + border: 0; + padding: 7px 8px; + font-size: 12px; + width: 80%; + box-sizing: border-box; + border-radius: 3px; + background: #444; + border: 1px solid #444; + color: #999; +} + +.ins-search-box:focus { + background: #484848; + color: #aaa; + border: 1px solid rgba(255,255,255,0.1); + outline: 0; +} + +.ins-search-box::-webkit-search-cancel-button { + -webkit-appearance: none; + height: 15px; + width: 8px; + cursor: pointer; +} + +.ins-search-box::-webkit-search-cancel-button:before { + height: 10px; + width: 10px; + content: 'x'; + font-family: Arial; + line-height: 0; + font-size: 13px; + color: #999; + font-weight: bold; + cursor: pointer; +} + +.ins-search-box::-webkit-input-placeholder { + color: #777; +} + +.ins-search-box:-moz-placeholder { + color: #777; +} + +.ins-search-box::-moz-placeholder { + color: #777; +} + +.ins-search-box:-ms-input-placeholder { + color: #777; +} + +.ins-world-tree { + overflow: auto; + position: absolute; + left: 0; + right: 0; + top: 110px; + bottom: 8px; +} + +.ins-control-group { + display: block; + clear: both; + overflow: hidden; + padding: 14px 20px 12px 20px; + background: #444; + border-bottom: 1px solid #555; +} + +.ins-button { + display: block; + float: left; + margin: 0 2px; + font-size: 11px; + line-height: 1; + padding: 6px 8px; + min-width: 49px; + text-align: center; + background: #333; + border: 0; + color: #aaa; + border-radius: 2px; + border-bottom: 2px solid #2e2e2e; + box-sizing: border-box; + outline: none; +} + +.ins-button:hover { + background: #3a3a3a; + border-bottom: 2px solid #2fa1d6; +} + +.ins-button:active { + border-top: 2px solid #444; + border-bottom: 0; + background: #2e2e2e; +} + +.jstree-default .jstree-search { + font-style: italic; + color: #aaa; + font-weight: normal; +} + +.jstree-default .jstree-wholerow-hovered, +.jstree-default .jstree-hovered { + background: transparent; + border-radius: 0; + box-shadow: none; +} + +.jstree-default .jstree-wholerow { + height: 26px; +} + +.jstree-default .jstree-wholerow-clicked, +.jstree-default .jstree-clicked { + background: transparent; + border-radius: 0; + box-shadow: none; + transition: none; +} + +.jstree-default .jstree-leaf .jstree-clicked { + color: #bbb !important; + + -webkit-transition: color 100ms linear; + -moz-transition: color 100ms linear; + -o-transition: color 100ms linear; + transition: color 100ms linear; +} + +.jstree-default .jstree-anchor { + line-height: 27px; +} + +.jstree-default .jstree-container-ul> .jstree-node > .jstree-anchor:before, +.jstree-default .jstree-open > .jstree-children > .jstree-node > .jstree-anchor:before { + content: ''; + display: block; + position: absolute; + left: 0; + right: 1px; + height: 26px; + background: transparent; + border-radius: 0; + box-shadow: none; + border-right: none; + pointer-events: none; + background: rgba(0,0,0,0); + + -webkit-transition: background 100ms linear; + -moz-transition: background 100ms linear; + -o-transition: background 100ms linear; + transition: background 100ms linear; +} + +.jstree-default .jstree-anchor.jstree-clicked:before { + background: rgba(0,0,0,0.1) !important; + + -webkit-transition: background 100ms linear; + -moz-transition: background 100ms linear; + -o-transition: background 100ms linear; + transition: background 100ms linear; +} + +.jstree-default .jstree-node-type-body > .jstree-anchor:before { + border-right: 3px solid #e1115f !important; +} + +.jstree-default .jstree-node-type-constraint > .jstree-anchor:before { + border-right: 3px solid #1ed36f !important; +} + +.jstree-default .jstree-node-type-composite > .jstree-anchor:before { + border-right: 3px solid #2fa1d6 !important; +} + +.jstree-default .jstree-node, +.jstree-default .jstree-leaf .jstree-ocl { + background: transparent; +} + +.jstree-default .jstree-open .jstree-ocl { + background-position: -38px -1px; +} + +.jstree-default .jstree-closed .jstree-ocl { + background-position: -4px -2px; +} + +.jstree-anchor { + padding: 1px 0; + transition: none; +} + +.jstree-anchor .jstree-icon { + display: none; +} + +.jstree-node-type-bodies > .jstree-anchor, +.jstree-node-type-constraints > .jstree-anchor, +.jstree-node-type-composites > .jstree-anchor { + color: #888; + font-weight: bold; +} + +.ins-container *::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +.ins-container *::-webkit-scrollbar-thumb:vertical { + border-left: 3px solid #3d3d3d; + background: rgba(0,0,0,0.2); + width: 10px; +} + +.ins-container *::-webkit-scrollbar-thumb:horizontal { + border-top: 3px solid #3d3d3d; + background: rgba(0,0,0,0.2); + height: 10px; +} + +.ins-container *::-webkit-scrollbar-track, +.ins-container *::-webkit-scrollbar-corner { + background: transparent; +} + +#vakata-dnd { + font-family: Arial; + font-size: 12px; + color: #aaa; } \ No newline at end of file diff --git a/src/render/RenderPixi.js b/src/render/RenderPixi.js index 8556740..499c8dd 100644 --- a/src/render/RenderPixi.js +++ b/src/render/RenderPixi.js @@ -13,6 +13,18 @@ var Composite = require('../body/Composite'); var Common = require('../core/Common'); (function() { + + var _requestAnimationFrame, + _cancelAnimationFrame; + + if (typeof window !== 'undefined') { + _requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame + || window.mozRequestAnimationFrame || window.msRequestAnimationFrame + || function(callback){ window.setTimeout(function() { callback(Common.now()); }, 1000 / 60); }; + + _cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame + || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame; + } /** * Creates a new Pixi.js WebGL renderer @@ -23,7 +35,9 @@ var Common = require('../core/Common'); RenderPixi.create = function(options) { var defaults = { controller: RenderPixi, + engine: null, element: null, + frameRequestId: null, canvas: null, renderer: null, container: null, @@ -62,6 +76,8 @@ var Common = require('../core/Common'); backgroundColor: options.background }; + render.mouse = options.mouse; + render.engine = options.engine; render.renderer = render.renderer || new PIXI.WebGLRenderer(render.options.width, render.options.height, render.pixiOptions); render.container = render.container || new PIXI.Container(); render.spriteContainer = render.spriteContainer || new PIXI.Container(); @@ -99,6 +115,27 @@ var Common = require('../core/Common'); return render; }; + /** + * Continuously updates the render canvas on the `requestAnimationFrame` event. + * @method run + * @param {render} render + */ + RenderPixi.run = function(render) { + (function loop(time){ + render.frameRequestId = _requestAnimationFrame(loop); + RenderPixi.world(render); + })(); + }; + + /** + * Ends execution of `Render.run` on the given `render`, by canceling the animation frame request event loop. + * @method stop + * @param {render} render + */ + RenderPixi.stop = function(render) { + _cancelAnimationFrame(render.frameRequestId); + }; + /** * Clears the scene graph * @method clear @@ -181,8 +218,8 @@ var Common = require('../core/Common'); * @method world * @param {engine} engine */ - RenderPixi.world = function(engine) { - var render = engine.render, + RenderPixi.world = function(render) { + var engine = render.engine, world = engine.world, renderer = render.renderer, container = render.container, @@ -237,10 +274,10 @@ var Common = require('../core/Common'); } for (i = 0; i < bodies.length; i++) - RenderPixi.body(engine, bodies[i]); + RenderPixi.body(render, bodies[i]); for (i = 0; i < constraints.length; i++) - RenderPixi.constraint(engine, constraints[i]); + RenderPixi.constraint(render, constraints[i]); renderer.render(container); }; @@ -252,8 +289,8 @@ var Common = require('../core/Common'); * @param {engine} engine * @param {constraint} constraint */ - RenderPixi.constraint = function(engine, constraint) { - var render = engine.render, + RenderPixi.constraint = function(render, constraint) { + var engine = render.engine, bodyA = constraint.bodyA, bodyB = constraint.bodyB, pointA = constraint.pointA, @@ -303,8 +340,8 @@ var Common = require('../core/Common'); * @param {engine} engine * @param {body} body */ - RenderPixi.body = function(engine, body) { - var render = engine.render, + RenderPixi.body = function(render, body) { + var engine = render.engine, bodyRender = body.render; if (!bodyRender.visible)