From de823ebb085e5b12f613d697b1bcec622c6d390e Mon Sep 17 00:00:00 2001 From: liabru Date: Sun, 24 Apr 2016 23:54:38 +0100 Subject: [PATCH] decouple Matter.Render from Matter.Engine --- demo/js/Demo.js | 48 +- demo/js/lib/matter-tools/matter-tools-dev.js | 71 +- demo/js/lib/matter-tools/matter-tools.css | 1032 +++++++++--------- examples/airFriction.js | 2 +- examples/broadphase.js | 2 +- examples/car.js | 2 +- examples/catapult.js | 2 +- examples/collisionFiltering.js | 2 +- examples/compositeManipulation.js | 2 +- examples/compound.js | 2 +- examples/concave.js | 2 +- examples/engine.js | 2 +- examples/events.js | 6 +- examples/friction.js | 2 +- examples/manipulation.js | 2 +- examples/mixedSolid.js | 2 +- examples/newtonsCradle.js | 2 +- examples/raycasting.js | 4 +- examples/restitution.js | 2 +- examples/rounded.js | 2 +- examples/sensors.js | 2 +- examples/slingshot.js | 2 +- examples/softBody.js | 2 +- examples/sprites.js | 2 +- examples/staticFriction.js | 2 +- examples/stress.js | 2 +- examples/stress2.js | 2 +- examples/svg.js | 2 +- examples/terrain.js | 2 +- examples/views.js | 8 +- src/constraint/MouseConstraint.js | 5 +- src/core/Engine.js | 16 +- src/core/Runner.js | 3 +- src/render/Render.js | 153 ++- 34 files changed, 734 insertions(+), 660 deletions(-) diff --git a/demo/js/Demo.js b/demo/js/Demo.js index 9a584679..3aa37554 100644 --- a/demo/js/Demo.js +++ b/demo/js/Demo.js @@ -33,7 +33,8 @@ Events = Matter.Events, Mouse = Matter.Mouse, MouseConstraint = Matter.MouseConstraint, - Runner = Matter.Runner; + Runner = Matter.Runner, + Render = Matter.Render; // MatterTools aliases if (window.MatterTools) { @@ -64,12 +65,24 @@ // run the engine demo.runner = Engine.run(demo.engine); + // create a debug renderer + demo.render = Render.create({ + element: demo.container, + engine: demo.engine + }); + + // run the renderer + Render.run(demo.render); + // add a mouse controlled constraint - demo.mouseConstraint = MouseConstraint.create(demo.engine); + demo.mouseConstraint = MouseConstraint.create(demo.engine, { + element: demo.render.canvas + }); + World.add(demo.engine.world, demo.mouseConstraint); // pass mouse to renderer to enable showMousePosition - demo.engine.render.mouse = demo.mouseConstraint.mouse; + demo.render.mouse = demo.mouseConstraint.mouse; // get the scene function name from hash if (window.location.hash.length !== 0) @@ -108,23 +121,26 @@ // create a Matter.Gui if (!_isMobile && Gui) { - demo.gui = Gui.create(demo.engine, demo.runner); + demo.gui = Gui.create(demo.engine, demo.runner, demo.render); // need to add mouse constraint back in after gui clear or load is pressed Events.on(demo.gui, 'clear load', function() { - demo.mouseConstraint = MouseConstraint.create(demo.engine); + demo.mouseConstraint = MouseConstraint.create(demo.engine, { + element: demo.render.canvas + }); + 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.engine.render.canvas); + Mouse.setElement(demo.mouseConstraint.mouse, demo.render.canvas); }); } // create a Matter.Inspector if (!_isMobile && Inspector && _useInspector) { - demo.inspector = Inspector.create(demo.engine, demo.runner); + demo.inspector = Inspector.create(demo.engine, demo.runner, demo.render); Events.on(demo.inspector, 'import', function() { demo.mouseConstraint = MouseConstraint.create(demo.engine); @@ -150,7 +166,7 @@ var body = document.body; body.className += ' is-mobile'; - demo.engine.render.canvas.addEventListener('touchstart', Demo.fullscreen); + demo.render.canvas.addEventListener('touchstart', Demo.fullscreen); var fullscreenChange = function() { var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled; @@ -248,7 +264,7 @@ }; Demo.fullscreen = function(demo) { - var _fullscreenElement = demo.engine.render.canvas; + var _fullscreenElement = demo.render.canvas; if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { if (_fullscreenElement.requestFullscreen) { @@ -269,10 +285,10 @@ Engine.clear(demo.engine); // clear scene graph (if defined in controller) - if (demo.engine.render) { - var renderController = demo.engine.render.controller; + if (demo.render) { + var renderController = demo.render.controller; if (renderController && renderController.clear) - renderController.clear(demo.engine.render); + renderController.clear(demo.render); } // clear all scene events @@ -296,9 +312,9 @@ Events.off(demo.runner, demo.sceneEvents[i]); } - if (demo.engine.render && demo.engine.render.events) { + if (demo.render && demo.render.events) { for (i = 0; i < demo.sceneEvents.length; i++) - Events.off(demo.engine.render, demo.sceneEvents[i]); + Events.off(demo.render, demo.sceneEvents[i]); } demo.sceneEvents = []; @@ -335,8 +351,8 @@ World.add(world, demo.mouseConstraint); } - if (demo.engine.render) { - var renderOptions = demo.engine.render.options; + if (demo.render) { + var renderOptions = demo.render.options; renderOptions.wireframes = true; renderOptions.hasBounds = false; renderOptions.showDebug = false; diff --git a/demo/js/lib/matter-tools/matter-tools-dev.js b/demo/js/lib/matter-tools/matter-tools-dev.js index d35d9061..35fa5e2f 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 2015-12-05 +* matter-tools-dev.min.js 0.5.0-dev 2016-04-24 * https://github.com/liabru/matter-tools * License: MIT */ @@ -10,7 +10,7 @@ var Gui = {}; (function() { var _isWebkit = "WebkitAppearance" in document.documentElement.style; - Gui.create = function(engine, runner, options) { + Gui.create = function(engine, runner, render, options) { var _datGuiSupported = window.dat && window.localStorage; if (!_datGuiSupported) { console.log("Could not create GUI. Check dat.gui library is loaded first."); @@ -20,6 +20,7 @@ var gui = { engine:engine, runner:runner, + render:render, datGui:datGui, broadphase:"grid", broadphaseCache:{ @@ -116,7 +117,7 @@ Events.trigger(gui, "load"); }, inspect:function() { - if (!Inspector.instance) gui.inspector = Inspector.create(gui.engine, gui.runner); + if (!Inspector.instance) gui.inspector = Inspector.create(gui.engine, gui.runner, gui.render); }, recordGif:function() { if (!gui.isRecording) { @@ -204,35 +205,35 @@ render.add(gui, "renderer", [ "canvas", "webgl" ]).onFinishChange(function(value) { _setRenderer(gui, value); }); - render.add(engine.render.options, "wireframes"); - render.add(engine.render.options, "showDebug"); - render.add(engine.render.options, "showPositions"); - render.add(engine.render.options, "showBroadphase"); - render.add(engine.render.options, "showBounds"); - render.add(engine.render.options, "showVelocity"); - render.add(engine.render.options, "showCollisions"); - render.add(engine.render.options, "showSeparations"); - render.add(engine.render.options, "showAxes"); - render.add(engine.render.options, "showAngleIndicator"); - render.add(engine.render.options, "showSleeping"); - render.add(engine.render.options, "showIds"); - render.add(engine.render.options, "showVertexNumbers"); - render.add(engine.render.options, "showConvexHulls"); - render.add(engine.render.options, "showInternalEdges"); - render.add(engine.render.options, "enabled"); + render.add(gui.render.options, "wireframes"); + render.add(gui.render.options, "showDebug"); + render.add(gui.render.options, "showPositions"); + render.add(gui.render.options, "showBroadphase"); + render.add(gui.render.options, "showBounds"); + render.add(gui.render.options, "showVelocity"); + render.add(gui.render.options, "showCollisions"); + render.add(gui.render.options, "showSeparations"); + render.add(gui.render.options, "showAxes"); + render.add(gui.render.options, "showAngleIndicator"); + render.add(gui.render.options, "showSleeping"); + render.add(gui.render.options, "showIds"); + render.add(gui.render.options, "showVertexNumbers"); + render.add(gui.render.options, "showConvexHulls"); + render.add(gui.render.options, "showInternalEdges"); + 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; - engine.render.element.removeChild(engine.render.canvas); - var options = engine.render.options; - engine.render = controller.create({ - element:engine.render.element, + gui.render.element.removeChild(gui.render.canvas); + var options = gui.render.options; + gui.render = controller.create({ + element:gui.render.element, options:options }); - engine.render.options = options; + gui.render = options; Events.trigger(gui, "setRenderer"); }; var _addBody = function(gui) { @@ -257,8 +258,8 @@ var engine = gui.engine; World.clear(engine.world, true); Engine.clear(engine); - var renderController = engine.render.controller; - if (renderController.clear) renderController.clear(engine.render); + var renderController = gui.render.controller; + if (renderController.clear) renderController.clear(gui.render); Events.trigger(gui, "clear"); }; var _initGif = function(gui) { @@ -268,7 +269,7 @@ var engine = gui.engine, skipFrame = false; Matter.Events.on(gui.runner, "beforeTick", function(event) { if (gui.isRecording && !skipFrame) { - gui.gif.addFrame(engine.render.context, { + gui.gif.addFrame(gui.render.context, { copy:true, delay:25 }); @@ -280,14 +281,15 @@ var Inspector = {}; (function() { var _key, _isWebkit = "WebkitAppearance" in document.documentElement.style, $body; - Inspector.create = function(engine, runner, options) { + Inspector.create = function(engine, runner, render, options) { if (!jQuery || !$.fn.jstree || !window.key) { console.log("Could not create inspector. Check keymaster, jQuery, jsTree libraries are loaded first."); return; } var inspector = { - engine:engine, - runner:runner, + engine:null, + runner:null, + render:null, isPaused:false, selected:[], selectStart:null, @@ -317,7 +319,10 @@ }; inspector = Common.extend(inspector, options); Inspector.instance = inspector; - inspector.mouse = Mouse.create(engine.render.canvas); + inspector.engine = engine; + inspector.runner = runner; + inspector.render = render; + inspector.mouse = Mouse.create(inspector.render.canvas); inspector.mouseConstraint = MouseConstraint.create(engine, { mouse:inspector.mouse }); @@ -670,8 +675,8 @@ _updateSelectedMouseDownOffset(inspector); } }); - Events.on(inspector.engine.render, "afterRender", function() { - var renderController = engine.render.controller, context = engine.render.context; + Events.on(inspector.render, "afterRender", function() { + var renderController = inspector.render.controller, context = inspector.render.context; if (renderController.inspector) renderController.inspector(inspector, context); }); }; diff --git a/demo/js/lib/matter-tools/matter-tools.css b/demo/js/lib/matter-tools/matter-tools.css index b1440165..48d681b2 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/examples/airFriction.js b/examples/airFriction.js index b46f7dd6..268abee8 100644 --- a/examples/airFriction.js +++ b/examples/airFriction.js @@ -23,7 +23,7 @@ if (!_isBrowser) { Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 }) ]); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; renderOptions.showVelocity = true; }; diff --git a/examples/broadphase.js b/examples/broadphase.js index 308e1e02..552b1f0a 100644 --- a/examples/broadphase.js +++ b/examples/broadphase.js @@ -27,7 +27,7 @@ World.add(world, stack); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showBroadphase = true; }; diff --git a/examples/car.js b/examples/car.js index abd12930..12ed2341 100644 --- a/examples/car.js +++ b/examples/car.js @@ -21,7 +21,7 @@ Bodies.rectangle(340, 580, 700, 20, { isStatic: true, angle: Math.PI * 0.04 }) ]); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = true; renderOptions.showCollisions = true; }; diff --git a/examples/catapult.js b/examples/catapult.js index 7ace9fa9..ac60e013 100644 --- a/examples/catapult.js +++ b/examples/catapult.js @@ -24,7 +24,7 @@ Constraint.create({ bodyA: catapult, pointB: { x: 410, y: 580 } }) ]); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showCollisions = true; renderOptions.showVelocity = true; renderOptions.showAngleIndicator = true; diff --git a/examples/collisionFiltering.js b/examples/collisionFiltering.js index 4a7044ac..4f195554 100644 --- a/examples/collisionFiltering.js +++ b/examples/collisionFiltering.js @@ -88,7 +88,7 @@ // red category objects should not be draggable with the mouse mouseConstraint.collisionFilter.mask = defaultCategory | blueCategory | greenCategory; - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.wireframes = false; renderOptions.background = '#222'; renderOptions.showAngleIndicator = false; diff --git a/examples/compositeManipulation.js b/examples/compositeManipulation.js index c8e7025b..b8f0f563 100644 --- a/examples/compositeManipulation.js +++ b/examples/compositeManipulation.js @@ -42,7 +42,7 @@ }) ); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.wireframes = false; renderOptions.showAxes = true; renderOptions.showCollisions = true; diff --git a/examples/compound.js b/examples/compound.js index e02afd55..f01d6e5d 100644 --- a/examples/compound.js +++ b/examples/compound.js @@ -40,7 +40,7 @@ World.add(world, [compoundBodyA, compoundBodyB, constraint]); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAxes = true; renderOptions.showPositions = true; renderOptions.showConvexHulls = true; diff --git a/examples/concave.js b/examples/concave.js index f5f26d09..89be2c69 100644 --- a/examples/concave.js +++ b/examples/concave.js @@ -27,7 +27,7 @@ World.add(world, stack); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; }; diff --git a/examples/engine.js b/examples/engine.js index 3b3419d6..078ec028 100644 --- a/examples/engine.js +++ b/examples/engine.js @@ -11,7 +11,7 @@ metrics: { extended: true } }; - return Engine.create(demo.container, options); + return Engine.create(options); }; })(); \ No newline at end of file diff --git a/examples/events.js b/examples/events.js index 0b20f8f1..262bbc69 100644 --- a/examples/events.js +++ b/examples/events.js @@ -92,7 +92,7 @@ Events.on(mouseConstraint, 'mousedown', function(event) { var mousePosition = event.mouse.position; console.log('mousedown at ' + mousePosition.x + ' ' + mousePosition.y); - engine.render.options.background = 'cornsilk'; + demo.render.options.background = 'cornsilk'; shakeScene(engine); }) @@ -103,7 +103,7 @@ // an example of using mouse events on a mouse Events.on(mouseConstraint, 'mouseup', function(event) { var mousePosition = event.mouse.position; - engine.render.options.background = "white"; + demo.render.options.background = "white"; console.log('mouseup at ' + mousePosition.x + ' ' + mousePosition.y); }) @@ -135,7 +135,7 @@ World.add(world, stack); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.wireframes = false; var shakeScene = function(engine) { diff --git a/examples/friction.js b/examples/friction.js index f925a92f..28097996 100644 --- a/examples/friction.js +++ b/examples/friction.js @@ -22,7 +22,7 @@ Bodies.rectangle(300, 430, 40, 40, { friction: 0 }) ]); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; renderOptions.showVelocity = true; }; diff --git a/examples/manipulation.js b/examples/manipulation.js index 23a2de3a..75f7f865 100644 --- a/examples/manipulation.js +++ b/examples/manipulation.js @@ -73,7 +73,7 @@ }) ); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAxes = true; renderOptions.showCollisions = true; renderOptions.showPositions = true; diff --git a/examples/mixedSolid.js b/examples/mixedSolid.js index 734561b8..7945ce8c 100644 --- a/examples/mixedSolid.js +++ b/examples/mixedSolid.js @@ -27,7 +27,7 @@ World.add(world, stack); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.wireframes = false; renderOptions.showAngleIndicator = false; }; diff --git a/examples/newtonsCradle.js b/examples/newtonsCradle.js index b12c4d1f..b5880210 100644 --- a/examples/newtonsCradle.js +++ b/examples/newtonsCradle.js @@ -16,7 +16,7 @@ World.add(world, cradle); Body.translate(cradle.bodies[0], { x: -140, y: -100 }); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showVelocity = true; }; diff --git a/examples/raycasting.js b/examples/raycasting.js index 06378d1b..5d3f74c7 100644 --- a/examples/raycasting.js +++ b/examples/raycasting.js @@ -38,9 +38,9 @@ World.add(world, [stack, concave]); sceneEvents.push( - Events.on(engine.render, 'afterRender', function() { + Events.on(demo.render, 'afterRender', function() { var mouse = mouseConstraint.mouse, - context = engine.render.context, + context = demo.render.context, bodies = Composite.allBodies(engine.world), startPoint = { x: 400, y: 100 }, endPoint = mouse.position; diff --git a/examples/restitution.js b/examples/restitution.js index f3e3c9f0..ff1a31a9 100644 --- a/examples/restitution.js +++ b/examples/restitution.js @@ -18,7 +18,7 @@ Bodies.rectangle(100 + space * 5, 150, 180, 20, { restitution: rest, angle: -Math.PI * 0.5 }) ]); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showCollisions = true; renderOptions.showVelocity = true; renderOptions.showAngleIndicator = true; diff --git a/examples/rounded.js b/examples/rounded.js index 03356df0..79a085cd 100644 --- a/examples/rounded.js +++ b/examples/rounded.js @@ -41,7 +41,7 @@ }) ]); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAxes = true; renderOptions.showCollisions = true; }; diff --git a/examples/sensors.js b/examples/sensors.js index 542a589b..127ec6a4 100644 --- a/examples/sensors.js +++ b/examples/sensors.js @@ -62,7 +62,7 @@ }) ); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.wireframes = false; renderOptions.background = '#222'; renderOptions.showAngleIndicator = false; diff --git a/examples/slingshot.js b/examples/slingshot.js index f6bffb40..610eedc7 100644 --- a/examples/slingshot.js +++ b/examples/slingshot.js @@ -55,7 +55,7 @@ } }); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.wireframes = false; renderOptions.showAngleIndicator = false; renderOptions.background = './img/background.png'; diff --git a/examples/softBody.js b/examples/softBody.js index df3d7446..7ab95e09 100644 --- a/examples/softBody.js +++ b/examples/softBody.js @@ -19,7 +19,7 @@ Composites.softBody(250, 400, 4, 4, 0, 0, true, 15, particleOptions) ]); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; }; diff --git a/examples/sprites.js b/examples/sprites.js index 317a050d..341332b1 100644 --- a/examples/sprites.js +++ b/examples/sprites.js @@ -53,7 +53,7 @@ World.add(world, stack); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.background = './img/wall-bg.jpg'; renderOptions.showAngleIndicator = false; renderOptions.wireframes = false; diff --git a/examples/staticFriction.js b/examples/staticFriction.js index 1c2106fe..755e0dc0 100644 --- a/examples/staticFriction.js +++ b/examples/staticFriction.js @@ -41,7 +41,7 @@ }) ); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; renderOptions.showVelocity = true; }; diff --git a/examples/stress.js b/examples/stress.js index 56c90122..779a1778 100644 --- a/examples/stress.js +++ b/examples/stress.js @@ -14,7 +14,7 @@ World.add(world, stack); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; }; diff --git a/examples/stress2.js b/examples/stress2.js index 2309be10..5a42e87f 100644 --- a/examples/stress2.js +++ b/examples/stress2.js @@ -14,7 +14,7 @@ World.add(world, stack); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; }; diff --git a/examples/svg.js b/examples/svg.js index 09b6c1f9..dccd921d 100644 --- a/examples/svg.js +++ b/examples/svg.js @@ -54,7 +54,7 @@ }, true)); }); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; }; diff --git a/examples/terrain.js b/examples/terrain.js index d33e8bf5..77f8c279 100644 --- a/examples/terrain.js +++ b/examples/terrain.js @@ -46,7 +46,7 @@ })); }); - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.showAngleIndicator = false; renderOptions.showVelocity = true; }; diff --git a/examples/views.js b/examples/views.js index 59a73e50..72bb7c8e 100644 --- a/examples/views.js +++ b/examples/views.js @@ -36,8 +36,8 @@ // get the centre of the viewport var viewportCentre = { - x: engine.render.options.width * 0.5, - y: engine.render.options.height * 0.5 + x: demo.render.options.width * 0.5, + y: demo.render.options.height * 0.5 }; // make the world bounds a little bigger than the render bounds @@ -58,7 +58,7 @@ Events.on(engine, 'beforeTick', function() { var world = engine.world, mouse = mouseConstraint.mouse, - render = engine.render, + render = demo.render, translate; // mouse wheel controls zoom @@ -128,7 +128,7 @@ ); // must enable renderOptions.hasBounds for views to work - var renderOptions = engine.render.options; + var renderOptions = demo.render.options; renderOptions.hasBounds = true; }; diff --git a/src/constraint/MouseConstraint.js b/src/constraint/MouseConstraint.js index 689784bf..e64a685b 100644 --- a/src/constraint/MouseConstraint.js +++ b/src/constraint/MouseConstraint.js @@ -38,9 +38,11 @@ var Bounds = require('../geometry/Bounds'); if (!mouse) { if (engine && engine.render && engine.render.canvas) { mouse = Mouse.create(engine.render.canvas); + } else if (options && options.element) { + mouse = Mouse.create(options.element); } else { mouse = Mouse.create(); - Common.log('MouseConstraint.create: options.mouse was undefined, engine.render.canvas was undefined, may not function as expected', 'warn'); + Common.log('MouseConstraint.create: options.mouse was undefined, options.element was undefined, may not function as expected', 'warn'); } } @@ -60,6 +62,7 @@ var Bounds = require('../geometry/Bounds'); var defaults = { type: 'mouseConstraint', mouse: mouse, + element: null, body: null, constraint: constraint, collisionFilter: { diff --git a/src/core/Engine.js b/src/core/Engine.js index 5e35d8ff..e86f48d5 100644 --- a/src/core/Engine.js +++ b/src/core/Engine.js @@ -32,7 +32,6 @@ var Body = require('../body/Body'); * All properties have default values, and many are pre-calculated automatically based on other properties. * See the properties section below for detailed information on what you can pass via the `options` object. * @method create - * @param {HTMLElement} [element] * @param {object} [options] * @return {engine} engine */ @@ -40,9 +39,12 @@ var Body = require('../body/Body'); // options may be passed as the first (and only) argument options = Common.isElement(element) ? options : element; element = Common.isElement(element) ? element : null; - options = options || {}; + if (element || options.render) { + Common.log('Engine.create: engine.render is deprecated (see docs)', 'warn'); + } + var defaults = { positionIterations: 6, velocityIterations: 4, @@ -60,6 +62,7 @@ var Body = require('../body/Body'); var engine = Common.extend(defaults, options); + // @deprecated if (element || engine.render) { var renderDefaults = { element: element, @@ -69,10 +72,16 @@ var Body = require('../body/Body'); engine.render = Common.extend(renderDefaults, engine.render); } + // @deprecated if (engine.render && engine.render.controller) { engine.render = engine.render.controller.create(engine.render); } + // @deprecated + if (engine.render) { + engine.render.engine = engine; + } + engine.world = options.world || World.create(engine.world); engine.pairs = Pairs.create(); engine.broadphase = engine.broadphase.controller.create(engine.broadphase); @@ -454,6 +463,8 @@ var Body = require('../body/Body'); */ /** + * __DEPRECATED__ see Demo.js for an example of creating a renderer. + * * An instance of a `Render` controller. The default value is a `Matter.Render` instance created by `Engine.create`. * One may also develop a custom renderer module based on `Matter.Render` and pass an instance of it to `Engine.create` via `options.render`. * @@ -462,6 +473,7 @@ var Body = require('../body/Body'); * * @property render * @type render + * @deprecated see Demo.js for an example of creating a renderer * @default a Matter.Render instance */ diff --git a/src/core/Runner.js b/src/core/Runner.js index 957c4b21..83f5bf0c 100644 --- a/src/core/Runner.js +++ b/src/core/Runner.js @@ -168,11 +168,12 @@ var Common = require('./Common'); Events.trigger(runner, 'afterUpdate', event); // render + // @deprecated if (engine.render && engine.render.controller) { Events.trigger(runner, 'beforeRender', event); Events.trigger(engine, 'beforeRender', event); // @deprecated - engine.render.controller.world(engine); + engine.render.controller.world(engine.render); Events.trigger(runner, 'afterRender', event); Events.trigger(engine, 'afterRender', event); // @deprecated diff --git a/src/render/Render.js b/src/render/Render.js index 5038ab4c..d21b630c 100644 --- a/src/render/Render.js +++ b/src/render/Render.js @@ -23,6 +23,18 @@ var Vector = require('../geometry/Vector'); (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 renderer. The options parameter is an object that specifies any properties you wish to override the defaults. * All properties have default values, and many are pre-calculated automatically based on other properties. @@ -34,9 +46,11 @@ var Vector = require('../geometry/Vector'); Render.create = function(options) { var defaults = { controller: Render, + engine: null, element: null, canvas: null, mouse: null, + frameRequestId: null, options: { width: 800, height: 600, @@ -72,6 +86,8 @@ var Vector = require('../geometry/Vector'); render.canvas.height = render.options.height || render.canvas.height; } + render.mouse = options.mouse; + render.engine = options.engine; render.canvas = render.canvas || _createCanvas(render.options.width, render.options.height); render.context = render.canvas.getContext('2d'); render.textures = {}; @@ -100,6 +116,27 @@ var Vector = require('../geometry/Vector'); return render; }; + /** + * Continuously updates the render canvas on the `requestAnimationFrame` event. + * @method run + * @param {render} render + */ + Render.run = function(render) { + (function loop(time){ + render.frameRequestId = _requestAnimationFrame(loop); + Render.world(render); + })(); + }; + + /** + * Ends execution of `Render.run` on the given `render`, by canceling the animation frame request event loop. + * @method stop + * @param {render} render + */ + Render.stop = function(render) { + _cancelAnimationFrame(render.frameRequestId); + }; + /** * Sets the pixel ratio of the renderer and updates the canvas. * To automatically detect the correct ratio, pass the string `'auto'` for `pixelRatio`. @@ -128,10 +165,10 @@ var Vector = require('../geometry/Vector'); * Renders the given `engine`'s `Matter.World` object. * This is the entry point for all rendering and should be called every time the scene changes. * @method world - * @param {engine} engine + * @param {render} render */ - Render.world = function(engine) { - var render = engine.render, + Render.world = function(render) { + var engine = render.engine, world = engine.world, canvas = render.canvas, context = render.context, @@ -201,49 +238,49 @@ var Vector = require('../geometry/Vector'); if (!options.wireframes || (engine.enableSleeping && options.showSleeping)) { // fully featured rendering of bodies - Render.bodies(engine, bodies, context); + Render.bodies(render, bodies, context); } else { if (options.showConvexHulls) - Render.bodyConvexHulls(engine, bodies, context); + Render.bodyConvexHulls(render, bodies, context); // optimised method for wireframes only - Render.bodyWireframes(engine, bodies, context); + Render.bodyWireframes(render, bodies, context); } if (options.showBounds) - Render.bodyBounds(engine, bodies, context); + Render.bodyBounds(render, bodies, context); if (options.showAxes || options.showAngleIndicator) - Render.bodyAxes(engine, bodies, context); + Render.bodyAxes(render, bodies, context); if (options.showPositions) - Render.bodyPositions(engine, bodies, context); + Render.bodyPositions(render, bodies, context); if (options.showVelocity) - Render.bodyVelocity(engine, bodies, context); + Render.bodyVelocity(render, bodies, context); if (options.showIds) - Render.bodyIds(engine, bodies, context); + Render.bodyIds(render, bodies, context); if (options.showSeparations) - Render.separations(engine, engine.pairs.list, context); + Render.separations(render, engine.pairs.list, context); if (options.showCollisions) - Render.collisions(engine, engine.pairs.list, context); + Render.collisions(render, engine.pairs.list, context); if (options.showVertexNumbers) - Render.vertexNumbers(engine, bodies, context); + Render.vertexNumbers(render, bodies, context); if (options.showMousePosition) - Render.mousePosition(engine, render.mouse, context); + Render.mousePosition(render, render.mouse, context); Render.constraints(constraints, context); if (options.showBroadphase && engine.broadphase.controller === Grid) - Render.grid(engine, engine.broadphase, context); + Render.grid(render, engine.broadphase, context); if (options.showDebug) - Render.debug(engine, context); + Render.debug(render, context); if (options.hasBounds) { // revert view transforms @@ -257,13 +294,13 @@ var Vector = require('../geometry/Vector'); * Description * @private * @method debug - * @param {engine} engine + * @param {render} render * @param {RenderingContext} context */ - Render.debug = function(engine, context) { + Render.debug = function(render, context) { var c = context, + engine = render.engine, world = engine.world, - render = engine.render, metrics = engine.metrics, options = render.options, bodies = Composite.allBodies(world), @@ -362,13 +399,13 @@ var Vector = require('../geometry/Vector'); * Description * @private * @method bodyShadows - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodyShadows = function(engine, bodies, context) { + Render.bodyShadows = function(render, bodies, context) { var c = context, - render = engine.render; + engine = render.engine; for (var i = 0; i < bodies.length; i++) { var body = bodies[i]; @@ -411,13 +448,13 @@ var Vector = require('../geometry/Vector'); * Description * @private * @method bodies - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodies = function(engine, bodies, context) { + Render.bodies = function(render, bodies, context) { var c = context, - render = engine.render, + engine = render.engine, options = render.options, showInternalEdges = options.showInternalEdges || !options.wireframes, body, @@ -510,13 +547,13 @@ var Vector = require('../geometry/Vector'); * Optimised method for drawing body wireframes in one pass * @private * @method bodyWireframes - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodyWireframes = function(engine, bodies, context) { + Render.bodyWireframes = function(render, bodies, context) { var c = context, - showInternalEdges = engine.render.options.showInternalEdges, + showInternalEdges = render.options.showInternalEdges, body, part, i, @@ -563,11 +600,11 @@ var Vector = require('../geometry/Vector'); * Optimised method for drawing body convex hull wireframes in one pass * @private * @method bodyConvexHulls - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodyConvexHulls = function(engine, bodies, context) { + Render.bodyConvexHulls = function(render, bodies, context) { var c = context, body, part, @@ -602,11 +639,11 @@ var Vector = require('../geometry/Vector'); * Renders body vertex numbers. * @private * @method vertexNumbers - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.vertexNumbers = function(engine, bodies, context) { + Render.vertexNumbers = function(render, bodies, context) { var c = context, i, j, @@ -628,11 +665,11 @@ var Vector = require('../geometry/Vector'); * Renders mouse position. * @private * @method mousePosition - * @param {engine} engine + * @param {render} render * @param {mouse} mouse * @param {RenderingContext} context */ - Render.mousePosition = function(engine, mouse, context) { + Render.mousePosition = function(render, mouse, context) { var c = context; c.fillStyle = 'rgba(255,255,255,0.8)'; c.fillText(mouse.position.x + ' ' + mouse.position.y, mouse.position.x + 5, mouse.position.y - 5); @@ -642,13 +679,13 @@ var Vector = require('../geometry/Vector'); * Draws body bounds * @private * @method bodyBounds - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodyBounds = function(engine, bodies, context) { + Render.bodyBounds = function(render, bodies, context) { var c = context, - render = engine.render, + engine = render.engine, options = render.options; c.beginPath(); @@ -679,13 +716,13 @@ var Vector = require('../geometry/Vector'); * Draws body angle indicators and axes * @private * @method bodyAxes - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodyAxes = function(engine, bodies, context) { + Render.bodyAxes = function(render, bodies, context) { var c = context, - render = engine.render, + engine = render.engine, options = render.options, part, i, @@ -740,13 +777,13 @@ var Vector = require('../geometry/Vector'); * Draws body positions * @private * @method bodyPositions - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodyPositions = function(engine, bodies, context) { + Render.bodyPositions = function(render, bodies, context) { var c = context, - render = engine.render, + engine = render.engine, options = render.options, body, part, @@ -796,11 +833,11 @@ var Vector = require('../geometry/Vector'); * Draws body velocity * @private * @method bodyVelocity - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodyVelocity = function(engine, bodies, context) { + Render.bodyVelocity = function(render, bodies, context) { var c = context; c.beginPath(); @@ -824,11 +861,11 @@ var Vector = require('../geometry/Vector'); * Draws body ids * @private * @method bodyIds - * @param {engine} engine + * @param {render} render * @param {body[]} bodies * @param {RenderingContext} context */ - Render.bodyIds = function(engine, bodies, context) { + Render.bodyIds = function(render, bodies, context) { var c = context, i, j; @@ -851,13 +888,13 @@ var Vector = require('../geometry/Vector'); * Description * @private * @method collisions - * @param {engine} engine + * @param {render} render * @param {pair[]} pairs * @param {RenderingContext} context */ - Render.collisions = function(engine, pairs, context) { + Render.collisions = function(render, pairs, context) { var c = context, - options = engine.render.options, + options = render.options, pair, collision, corrected, @@ -934,13 +971,13 @@ var Vector = require('../geometry/Vector'); * Description * @private * @method separations - * @param {engine} engine + * @param {render} render * @param {pair[]} pairs * @param {RenderingContext} context */ - Render.separations = function(engine, pairs, context) { + Render.separations = function(render, pairs, context) { var c = context, - options = engine.render.options, + options = render.options, pair, collision, corrected, @@ -991,13 +1028,13 @@ var Vector = require('../geometry/Vector'); * Description * @private * @method grid - * @param {engine} engine + * @param {render} render * @param {grid} grid * @param {RenderingContext} context */ - Render.grid = function(engine, grid, context) { + Render.grid = function(render, grid, context) { var c = context, - options = engine.render.options; + options = render.options; if (options.wireframes) { c.strokeStyle = 'rgba(255,180,0,0.1)'; @@ -1036,7 +1073,7 @@ var Vector = require('../geometry/Vector'); Render.inspector = function(inspector, context) { var engine = inspector.engine, selected = inspector.selected, - render = engine.render, + render = inspector.render, options = render.options, bounds;