further work on Matter.Inspector

demo/css/matter-gui.css

@@ -1,104 +0,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 {
-    color: #aaa;
-    text-shadow: none !important;
-}
-
-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 li:not(.folder) {
-    background: #3d3d3d;
-    border-bottom: 0px;
-    padding: 0 0 0 12px;
-}
-
-body .dg .cr.function {
-    border-top: 1px solid #444;
-}
- 
-body .dg li.save-row .button {
-    text-shadow: none !important;
-}
-
-body .dg li.title {
-    padding-left: 22px;
-    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:hover {
-    background: #555;
-}
-
-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;
-}
- 
-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;
-}

demo/css/matter-inspector.css

@@ -1,157 +0,0 @@
-.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: 220px;
-    height: 98%;
-    left: 0;
-    background: #3d3d3d;
-    padding: 1% 20px;
-    font-family: Arial;
-    font-size: 12px;
-    color: #aaa;
-    border-right: 2px solid #3d3d3d;
-}
-
-.ins-world-tree {
-    overflow: auto;
-    position: absolute;
-    left: -17px;
-    right: 0px;
-    top: 92px;
-    bottom: 8px;
-}
-
-.ins-control-group {
-    display: block;
-    clear: both;
-    overflow: hidden;
-}
-
-.ins-button {
-    display: block;
-    float: left;
-    margin: 0 2px;
-    font-size: 11px;
-    padding: 6px 8px;
-    min-width: 50px;
-    text-align: center;
-    background: #333;
-    border: 0;
-    color: #aaa;
-}
-
-.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-open > .jstree-children > .jstree-node > .jstree-anchor:before {
-    content: '';
-    display: block;
-    position: absolute;
-    z-index: -1;
-    left: 0;
-    right: 1px;
-    height: 26px;
-    background: transparent;
-    border-radius: 0;
-    box-shadow: none;
-    border-right: none;
-}
-
-.jstree-default .jstree-anchor.jstree-clicked:before {
-    background: #373737 !important;
-}
-
-.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: -36px -4px;
-}
-.jstree-default .jstree-closed .jstree-ocl {
-  background-position: -4px -4px;
-}
-
-.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;
-}

demo/css/matter-tools.css

@@ -0,0 +1,357 @@
+/*
+*	Matter.Gui
+*/
+
+body .dg.main {
+    box-shadow: 0 0 8px rgba(0,0,0,0.7);
+}
+
+body.gui-auto-hide .dg.ac {
+    right: -233px;
+
+    -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); /* custom */
+
+    -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); /* custom */
+    
+    transition-delay: 3s;
+    -webkit-transition-delay: 3s;
+}
+
+body .dg.ac:hover,
+body.gui-show .dg.ac {
+    right: 0px;
+
+    -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); /* custom */
+
+    -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); /* custom */
+
+    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 .cr.function {
+    border-top: 1px solid #444;
+}
+ 
+body .dg li.save-row .button {
+    text-shadow: none !important;
+}
+
+body .dg li.title {
+    padding-left: 22px;
+    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:hover {
+    background: #555;
+}
+
+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;
+}
+ 
+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: 220px;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    background: #3d3d3d;
+    padding: 1% 20px;
+    font-family: Arial;
+    font-size: 12px;
+    color: #aaa;
+    border-right: 2px solid #3d3d3d;
+    box-shadow: 0 0 8px rgba(0,0,0,0.7);
+}
+
+.ins-auto-hide .ins-container {
+    left: -245px;
+    border-right: 1px dotted #888;
+
+    -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); /* custom */
+
+    -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); /* custom */
+
+    transition-delay: 3s;
+    -webkit-transition-delay: 3s;
+}
+
+.ins-container:hover,
+.ins-show .ins-container {
+    left: 0px;
+    border-right: 0px dotted #888;
+
+    -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); /* custom */
+
+    -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); /* custom */
+
+    transition-delay: 0;
+    -webkit-transition-delay: 0;
+}
+
+.ins-world-tree {
+    overflow: auto;
+    position: absolute;
+    left: -24px;
+    right: 0px;
+    top: 60px;
+    bottom: 8px;
+}
+
+.ins-control-group {
+    display: block;
+    clear: both;
+    overflow: hidden;
+    margin: 8px 0;
+}
+
+.ins-button {
+    display: block;
+    float: left;
+    margin: 0 2px;
+    font-size: 11px;
+    padding: 6px 8px;
+    min-width: 51px;
+    text-align: center;
+    background: #333;
+    border: 0;
+    color: #aaa;
+    border-radius: 2px;
+    border-bottom: 2px solid #2e2e2e;
+}
+
+.ins-button:hover {
+    background: #3a3a3a;
+    border-bottom: 2px solid #2fa1d6;
+}
+
+.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-open > .jstree-children > .jstree-node > .jstree-anchor:before {
+    content: '';
+    display: block;
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    right: 1px;
+    height: 26px;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    border-right: none;
+}
+
+.jstree-default .jstree-anchor.jstree-clicked:before {
+    background: #373737 !important;
+}
+
+.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: -36px -4px;
+}
+.jstree-default .jstree-closed .jstree-ocl {
+  background-position: -4px -4px;
+}
+
+.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;
+}

demo/css/style.css

@@ -42,6 +42,14 @@ h1 {
     padding: 64px 280px 0 280px;
 }
 
+.ins-auto-hide .container {
+    padding-left: 32px;
+}
+
+.gui-auto-hide .container {
+    padding-right: 32px;
+}
+
 .is-mobile .container {
     padding: 6% 6% 0 6%;
 }

demo/dev.html

@@ -7,13 +7,12 @@
         <meta name="robots" content="noindex">
 
         <!-- only required if using Matter.Gui -->
-        <link rel="stylesheet" href="./css/matter-gui.css" type="text/css">
         <script type="text/javascript" src="./js/lib/dat.gui.min.js"></script>
         <script type="text/javascript" src="./js/lib/resurrect.js"></script>
 
         <!-- only required if using Matter.Inspector -->
         <link rel="stylesheet" href="./js/lib/jstree/themes/default/style.css" type="text/css">
-        <link rel="stylesheet" href="./css/matter-inspector.css" type="text/css">
+        <link rel="stylesheet" href="./css/matter-tools.css" type="text/css">
         <script type="text/javascript" src="./js/lib/jquery-1.11.0.min.js"></script>
         <script type="text/javascript" src="./js/lib/jstree/jstree.min.js"></script>
         <script type="text/javascript" src="./js/lib/keymaster.js"></script>

demo/index.html

@@ -16,7 +16,7 @@
     <body>
         <div class="container">
             <h1>Matter.js Physics Engine Demo</h1>
-            <p><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a></p>
+            <p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">&middot;</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">&middot;</span> <a href="https://github.com/liabru/matter-js">GitHub</a></p>
             <div class="controls-container">
                 <select id="demo-select">
                     <option value="mixed">Mixed Shapes</option>

demo/js/Demo.js

@@ -910,6 +910,9 @@
             Events.off(_engine);
         }*/
 
+        // reset id pool
+        Common._nextId = 0;
+
         _engine.enableSleeping = false;
         _engine.world.gravity.y = 1;
 

src/render/Render.js

@@ -688,6 +688,76 @@ var Render = {};
         c.stroke();
     };
 
+    /**
+     * Description
+     * @method inspector
+     * @param {inspector} inspector
+     * @param {RenderingContext} context
+     */
+    Render.inspector = function(inspector, context) {
+        var engine = inspector.engine,
+            mouse = engine.input.mouse,
+            selected = inspector.selected,
+            c = context,
+            options = engine.render.options,
+            bounds;
+
+        for (var i = 0; i < selected.length; i++) {
+            var item = selected[i].data;
+
+            context.translate(0.5, 0.5);
+            context.lineWidth = 1;
+            context.strokeStyle = 'rgba(255,165,0,0.8)';
+
+            switch (item.type) {
+
+            case 'body':
+
+                // render body selections
+                bounds = item.bounds;
+                context.beginPath();
+                context.rect(Math.floor(bounds.min.x - 3), Math.floor(bounds.min.y - 3), 
+                             Math.floor(bounds.max.x - bounds.min.x + 6), Math.floor(bounds.max.y - bounds.min.y + 6));
+                context.closePath();
+                context.stroke();
+
+                break;
+
+            case 'constraint':
+
+                // render constraint selections
+                var point = item.pointA;
+                if (item.bodyA)
+                    point = item.pointB;
+                context.beginPath();
+                context.arc(point.x, point.y, 10, 0, 2 * Math.PI);
+                context.closePath();
+                context.stroke();
+
+                break;
+
+            }
+
+            context.translate(-0.5, -0.5);
+        }
+
+        // render selection region
+        if (inspector.selectStart !== null) {
+            context.translate(0.5, 0.5);
+            context.lineWidth = 1;
+            context.setLineDash([1,2]);
+            context.strokeStyle = 'rgba(255,165,0,0.5)';
+            bounds = inspector.selectBounds;
+            context.beginPath();
+            context.rect(Math.floor(bounds.min.x), Math.floor(bounds.min.y), 
+                         Math.floor(bounds.max.x - bounds.min.x), Math.floor(bounds.max.y - bounds.min.y));
+            context.closePath();
+            context.stroke();
+            context.setLineDash([0]);
+            context.translate(-0.5, -0.5);
+        }
+    };
+
     /**
      * Description
      * @method _createCanvas

src/tools/Inspector.js

@@ -39,6 +39,8 @@ var Inspector = {};
             root: Composite.create()
         };
 
+        inspector = Common.extend(inspector, options);
+
         if (Resurrect) {
             inspector.serializer = new Resurrect({ prefix: '$' });
             inspector.serializer.parse = inspector.serializer.resurrect;
@@ -50,6 +52,8 @@ var Inspector = {};
         _key = window.key || {};
         Inspector.instance = inspector;
 
+        $body.addClass('ins-auto-hide gui-auto-hide');
+
         Composite.add(inspector.root, engine.world);
         engine.world.parent = null;
 
@@ -57,8 +61,7 @@ var Inspector = {};
         _initEngineEvents(inspector);
         _initTree(inspector);
         _initKeybinds(inspector);
-        _setPaused(inspector, true);
+
-        
         return inspector;
     };
 
@@ -70,15 +73,17 @@ var Inspector = {};
             $buttonGroup = $('<div class="ins-control-group">'),
             $importButton = $('<button class="ins-import-button ins-button">Import</button>'),
             $exportButton = $('<button class="ins-export-button ins-button">Export</button>'),
-            $pauseButton = $('<button class="ins-pause-button ins-button">Pause</button>');
+            $pauseButton = $('<button class="ins-pause-button ins-button">Pause</button>'),
+            $helpButton = $('<button class="ins-help-button ins-button">Help</button>');
         
-        $buttonGroup.append($pauseButton, $importButton, $exportButton);
+        $buttonGroup.append($pauseButton, $importButton, $exportButton, $helpButton);
         $inspectorContainer.prepend($buttonGroup);
         $body.prepend($inspectorContainer);
 
         controls.pauseButton = $pauseButton;
         controls.importButton = $importButton;
         controls.exportButton = $exportButton;
+        controls.helpButton = $helpButton;
         controls.container = $inspectorContainer;
 
         controls.pauseButton.click(function() {
@@ -92,6 +97,24 @@ var Inspector = {};
         controls.importButton.click(function() {
             _importFile(inspector);
         });
+
+        controls.helpButton.click(function() {
+            var help = "matter-inspector quick help \n\n";
+
+            help += "drag nodes in the tree to move them between composites \n\n";
+            help += "[shift + space] to pause or play simulation \n";
+            help += "[right click] and drag to select objects \n";
+            help += "[del] or [backspace] to delete selected objects \n";
+            help += "[shift + s] to scale-xy selected objects with mouse \n";
+            help += "[shift + s + d] to scale-x selected objects with mouse \n";
+            help += "[shift + s + f] to scale-y selected objects with mouse \n";
+            help += "[shift + r] to rotate selected objects with mouse \n";
+            help += "[shift + i] to import objects \n";
+            help += "[shift + o] to export selected objects\n";
+            help += "\nnote: inspector will only render if the renderer in use supports it";
+
+            alert(help);
+        });
     };
 
     var _initKeybinds = function(inspector) {
@@ -187,22 +210,15 @@ var Inspector = {};
                         worldObject = Composite.get(engine.world, objectId, objectType);
 
                     switch (objectType) {
-
                     case 'body':
                     case 'constraint':
-
+                    case 'composite':
                         selected.push(worldObject);
-
                         break;
 
-                    case 'composite':
                     case 'composites':
                     case 'bodies':
                     case 'constraints':
-
-                        if (objectType === 'composite')
-                            selected.push(worldObject);
-
                         var node = worldTree.get_node(nodeId),
                             children = worldTree.get_node(nodeId).children;
 
@@ -210,7 +226,6 @@ var Inspector = {};
                             worldTree.select_node(children[j], false);
 
                         break;
-
                     }
                 }
 
@@ -243,6 +258,15 @@ var Inspector = {};
 
                 Composite.move(prevComposite, worldObject, newComposite);
                 node.data.compositeId = newCompositeId;
+
+                /*if (newComposite === engine.world) {
+                    // if moved to the world, remove old tree node
+                    // it will be regenerated automatically
+                    worldTree.set_id(nodeId, nodeId + "-dupe");
+                    //setTimeout(function() {
+                    //    worldTree.delete_node(nodeId);
+                    //}, 1);
+                }*/
             }
         });
 
@@ -450,7 +474,18 @@ var Inspector = {};
                     case 'body':
 
                         var scale = 1 + Common.sign(mouse.position.x - mousePrevPosition.x) * 0.02;
-                        Body.scale(data, scale, scale);
+
+                        if (_key.isPressed('d')) {
+                            scaleX = scale;
+                            scaleY = 1;
+                        } else if (_key.isPressed('f')) {
+                            scaleX = 1;
+                            scaleY = scale;
+                        } else {
+                            scaleX = scaleY = scale;
+                        }
+
+                        Body.scale(data, scaleX, scaleY);
 
                         if (data.circleRadius)
                             data.circleRadius *= scale;
@@ -517,12 +552,13 @@ var Inspector = {};
             }
         });
 
-        // can only render if a render context is exposed
+        // render hook
-        if (engine.render && engine.render.context) {
+        Events.on(engine, 'afterRender', function() {
-            Events.on(engine, 'afterRender', function() {
+            var renderController = engine.render.controller,
-                _render(inspector);
+                context = engine.render.context;
-            });
+            if (renderController.inspector)
-        }
+                renderController.inspector(inspector, context);
+        });
     };
 
     var _setPaused = function(inspector, isPaused) {
@@ -581,69 +617,6 @@ var Inspector = {};
         worldTree.select_node(object.type + '_' + object.id, true);
     };
 
-    var _render = function(inspector) {
-        var engine = inspector.engine,
-            mouse = engine.input.mouse,
-            context = engine.render.context,
-            selected = inspector.selected,
-            bounds;
-
-        for (var i = 0; i < selected.length; i++) {
-            var item = selected[i].data;
-
-            context.translate(0.5, 0.5);
-            context.lineWidth = 1;
-            context.strokeStyle = 'rgba(255,165,0,0.8)';
-
-            switch (item.type) {
-
-            case 'body':
-
-                // render body selections
-                bounds = item.bounds;
-                context.beginPath();
-                context.rect(Math.floor(bounds.min.x - 3), Math.floor(bounds.min.y - 3), 
-                             Math.floor(bounds.max.x - bounds.min.x + 6), Math.floor(bounds.max.y - bounds.min.y + 6));
-                context.closePath();
-                context.stroke();
-
-                break;
-
-            case 'constraint':
-
-                // render constraint selections
-                var point = item.pointA;
-                if (item.bodyA)
-                    point = item.pointB;
-                context.beginPath();
-                context.arc(point.x, point.y, 10, 0, 2 * Math.PI);
-                context.closePath();
-                context.stroke();
-
-                break;
-
-            }
-
-            context.translate(-0.5, -0.5);
-        }
-
-        // render selection region
-        if (inspector.selectStart !== null) {
-            context.translate(0.5, 0.5);
-            context.lineWidth = 1;
-            context.setLineDash([1,2]);
-            context.strokeStyle = 'rgba(255,165,0,0.5)';
-            bounds = inspector.selectBounds;
-            context.beginPath();
-            context.rect(Math.floor(bounds.min.x), Math.floor(bounds.min.y), 
-                         Math.floor(bounds.max.x - bounds.min.x), Math.floor(bounds.max.y - bounds.min.y));
-            context.closePath();
-            context.stroke();
-            context.setLineDash([0]);
-            context.translate(-0.5, -0.5);
-        }
-    };
-
     var _updateTree = function(tree, data) {
         data.state = data.state || { opened: true };
         tree.settings.core.data = tree.settings.core.data || [data];
@@ -768,10 +741,23 @@ var Inspector = {};
             toExport = [];
 
         if (inspector.serializer) {
-            for (var i = 0; i < inspector.selected.length; i++)
+            var exportComposite = Composite.create({
-                toExport.push(inspector.selected[i].data);
+                    label: 'Exported Objects'
+                });
 
-            var json = inspector.serializer.stringify(toExport, function(key, value) {
+            // add everything else
+            for (var i = 0; i < inspector.selected.length; i++) {
+                var object = inspector.selected[i].data;
+
+                // skip if it's already in the composite tree
+                // this means orphans will be added in the root
+                if (Composite.get(exportComposite, object.id, object.type))
+                    continue;
+
+                Composite.add(exportComposite, object);
+            }
+
+            var json = inspector.serializer.stringify(exportComposite, function(key, value) {
                 // skip non-required values
                 if (key === 'path')
                     return undefined;
@@ -809,23 +795,14 @@ var Inspector = {};
                 var reader = new FileReader();
 
                 reader.onload = function(e) {
-                    var importedObjects;
+                    var importedComposite;
 
                     if (inspector.serializer)
-                        importedObjects = inspector.serializer.parse(reader.result);
+                        importedComposite = inspector.serializer.parse(reader.result);
 
-                    if (importedObjects) {
+                    if (importedComposite) {
-                        var importedComposite = Composite.create({
+                        Composite.rebase(importedComposite);
-                            label: 'Imported Objects'
+                        importedComposite.label = 'Imported Objects';
-                        });
-
-                        for (var i = 0; i < importedObjects.length; i++) {
-                            var object = importedObjects[i];
-                            if (object.type === 'body') {
-                                object.id = Body.nextId();
-                                Composite.add(importedComposite, object);
-                            }
-                        }
 
                         var worldTree = inspector.controls.worldTree.data('jstree'),
                             data = _generateCompositeTreeNode(importedComposite),