starting to add layers

compiled/app.js

@@ -104,6 +104,22 @@
     }
   };
 
+  ko.bindingHandlers.componentPath = {
+    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
+      return $(element).data("componentPath", valueAccessor());
+    }
+  };
+
+  _.reverse = function(a) {
+    var ret, x, _i, _len;
+    ret = [];
+    for (_i = 0, _len = a.length; _i < _len; _i++) {
+      x = a[_i];
+      ret.unshift(x);
+    }
+    return ret;
+  };
+
   workspaceCoords = function(e) {
     var canvasPos;
     canvasPos = $("#workspaceCanvas").offset();
@@ -263,7 +279,7 @@
   setSize = function() {
     var aspectRatio;
     aspectRatio = $("#workspace").innerWidth() / $("#workspace").innerHeight();
-    $(".definition").each(function() {
+    $(".mini").each(function() {
       return $(this).height($(this).width() / aspectRatio);
     });
     $("canvas").each(function() {
@@ -283,14 +299,21 @@
 
   render = function() {
     return $("canvas").each(function() {
-      var canvas, ctx, definition;
+      var canvas, componentPath, ctx, definition, t;
       canvas = this;
-      definition = $(this).data("definition");
+      definition = $(canvas).data("definition");
+      componentPath = $(canvas).data("componentPath");
       if (definition) {
         ctx = canvas.getContext("2d");
         ctx.setTransform(1, 0, 0, 1, 0, 0);
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         canvasTopLevelTransform(canvas).set(ctx);
+        if (componentPath) {
+          t = combineComponents(componentPath);
+          t = definition.view.mult(t.mult(_.last(componentPath).definition.view.inverse()));
+          t.app(ctx);
+          definition = _.last(componentPath).definition;
+        }
         return definition.renderer.draw(ctx, ui.mouseOver);
       }
     });

compiled/css/style.css

@@ -47,6 +47,11 @@ button:active {
   background-color: #fff;
   box-shadow: 0px 1px 5px #888;
 }
+.mini {
+  position: relative;
+  border: 1px solid #777;
+  background-color: #fff;
+}
 #sidebar {
   position: absolute;
   top: 16px;
@@ -80,3 +85,22 @@ button:active {
   width: 160px;
   overflow-y: scroll;
 }
+#sidebarRight .component {
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+#sidebarRight .component .disclosure {
+  width: 20px;
+  float: left;
+  color: #666;
+}
+#sidebarRight .component .disclosure.expanded:after {
+  content: "▼";
+}
+#sidebarRight .component .disclosure.collapsed:after {
+  content: "▶";
+}
+#sidebarRight .component .mini {
+  margin-left: 20px;
+  width: 64px;
+}

index.html

@@ -25,7 +25,7 @@
   </div> -->
 
   <div id="definitions" data-bind="foreach: definitions">
-    <div class='definition' data-bind="css: {focused: $data === $root.focus()}">
+    <div class="definition mini" data-bind="css: {focused: $data === $root.focus()}">
       <canvas data-bind="canvas: $data"></canvas>
     </div>
   </div>
@@ -40,6 +40,17 @@
   </div> -->
 </div>
 
+<div id="sidebarRight">
+  <div data-bind="foreach: _.reverse(focus().components())">
+    <div class="component">
+      <div class="disclosure" data-bind="css: {collapsed: !$data.definition.draw}"></div>
+      <div class="mini">
+        <canvas data-bind="canvas: $root.focus(), componentPath: [$data]"></canvas>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script src="vendor/numeric-1.0.2.min.js"></script>
 <script src="vendor/underscore-min.js"></script>
 

src/app.coffee

@@ -48,9 +48,17 @@ ko.bindingHandlers.canvas = {
   update: (element, valueAccessor, allBindingsAccessor, viewModel) ->
     $(element).data("definition", valueAccessor())
 }
+ko.bindingHandlers.componentPath = {
+  update: (element, valueAccessor, allBindingsAccessor, viewModel) ->
+    $(element).data("componentPath", valueAccessor())
+}
 
 
-
+_.reverse = (a) ->
+  ret = []
+  for x in a
+    ret.unshift(x)
+  return ret
 
 
 
@@ -248,7 +256,7 @@ init = () ->
 setSize = () ->
   aspectRatio = $("#workspace").innerWidth() / $("#workspace").innerHeight()
 
-  $(".definition").each () ->
+  $(".mini").each () ->
     $(this).height($(this).width() / aspectRatio)
 
 
@@ -275,7 +283,8 @@ lastRenderTime = Date.now()
 render = () ->
   $("canvas").each () ->
     canvas = this
-    definition = $(this).data("definition")
+    definition = $(canvas).data("definition")
+    componentPath = $(canvas).data("componentPath")
     if definition
       ctx = canvas.getContext("2d")
 
@@ -285,6 +294,18 @@ render = () ->
 
       canvasTopLevelTransform(canvas).set(ctx)
 
+      if componentPath
+        # transform in
+        t = combineComponents(componentPath)
+        t = definition.view.mult(t.mult(_.last(componentPath).definition.view.inverse()))
+        t.app(ctx)
+
+        # adjust mouseOver
+        # TODO
+
+        # adjust definition
+        definition = _.last(componentPath).definition
+
       definition.renderer.draw(ctx, ui.mouseOver)
 
   # if Date.now() - lastRenderTime > require("config").fillInTime

src/style.styl

@@ -57,6 +57,13 @@ button
   shadow()
 
 
+.mini
+  position: relative
+  border: 1px solid #777
+  background-color: #fff
+
+
+
 #sidebar
   position: absolute;
   top: spacing
@@ -88,4 +95,18 @@ button
   right: spacing
   bottom: spacing
   width: sidebarRight
-  overflow-y: scroll
+  overflow-y: scroll
+  .component
+    overflow: hidden
+    margin-bottom: spacing
+    .disclosure
+      width: 20px
+      float: left
+      color: #666
+      &.expanded:after
+        content: "▼"
+      &.collapsed:after
+        content: "▶"
+    .mini
+      margin-left: 20px
+      width: 64px