added scale

lib/carena.js

@@ -214,6 +214,11 @@
         /*ctx.fillStyle = "black";
         ctx.fillRect(last.x, last.y, last.w+10, last.h+10);*/
       },
+
+      // TODO: Document
+      // These are used for pre/post render steps
+      preRender : [],
+      postRender : [],
       render : function(renderer) {
         var ctx   = renderer.context,
             color = (obj.style && obj.style.backgroundColor) ?
@@ -560,27 +565,23 @@
 
       // Walks up the tree via parents
       ascend  : function(fn) {
-          fn(obj);
-          if (obj.parent && obj.parent.ascend) {
-            obj.parent.ascend(fn);
-          }
-
-
-/*        if (parentreturn obj.walk(function(node, callback) {
-          if (node && node.parent) {
-            callback(node.parent);
-          }
-        },fn, depth);*/
+        fn(obj);
+        if (obj.parent && obj.parent.ascend) {
+          obj.parent.ascend(fn);
+        }
       },
 
       // Walks the entire tree depth first and in reverse render order
-      descend : function(fn, depth) {
-        return obj.walk(function(node, callback) {
-          var l=node.children.length, i=0, result;
-          for (i; i<l; i++) {
-            callback(node.child(i));
+      descend : function() {
+
+        var l=obj.children.length, i=0, child, res;
+        for (i; i<l; i++) {
+          child = obj.children[i];
+          // the child needs to be a proper node
+          if (child.render) {
+            child.render(renderer);
           }
-        }, fn, depth);
+        }
       },
 
       // Returns an array of nodes containing a point in render order
@@ -717,6 +718,29 @@
     return obj;
   });
 
+  carena.addFeature("carena.Scale", function(obj, options, storage) {
+    carena.require("carena.Renderable", arguments);
+
+    var safe = {
+      scale  : 1,
+      render : obj.render
+    };
+
+    return carena.applyProperties(obj, {
+      set scale(v) {
+        safe.scale = v;
+      },
+      get scale() {
+        return safe.scale;
+      },
+      render : function(renderer) {
+        renderer.context.scale(safe.scale, safe.scale);
+        safe.render(renderer);
+      }
+    });
+
+  });
+
   carena.addFeature("carena.Renderer", function(obj, options, storage) {
     storage = storage || {};
     storage.style = storage.style || obj.style || options.style || {
@@ -726,7 +750,6 @@
     var safe = {
       canvas     : null,
       context    : null,
-      scale      : 1,
       dirty      : true // used for first render, for now.
     };
 
@@ -748,54 +771,39 @@
         storage.style.backgroundColor = value;
         safe.dirty = true;
       },
-      set scale(v) { safe.scale = v; },
-      get scale() { return safe.scale; },
       renderTree : function(root, options) {
         if (!root) { return false; }
-        safe.context.save();
-
-        if (!options || options.scale !== false) {
-          safe.context.scale(safe.scale, safe.scale);
-        }
-
+
+
         var res = root.walk(function(node, callback) {
+          // save the transform matrix
+
           var l=node.children.length, i=0;
           for (i; i<l; i++) {
             callback(node.child(i));
           }
+
+          // restore the transform matrix
         }, function(node, walker) {
           node.clean();
           if (node.clear) {
             node.clear(obj);
           }
 
+          // TODO: Only rendering dirty nodes would be optimal
           if (node.render) {
             node.render(obj);
           } else {
             safe.context.fillStyle = node.color || "white";
             safe.context.fillRect(node.x, node.y, node.width, node.height);
           }
-
-          /*
-          TODO: optimize me.
-          currently, dirty propagates up the tree, but in reality it needs
-          to go down the tree as well for this to be "optimized".  Adding
-          to this problem, we have a trigger on every dirty so things get
-          unweildly.
-
-          if (node.dirty) {
-            if (node.render) {
-              node.render();
-            }
-          } else {
-            return false; // don't continue down this branch
-          }*/
         });
-        safe.context.restore();
         return res;
       },
 
       render : function(root, options) {
+
+
         // TODO: Optimize me! whether its using ImageData or clearing rects
         //       dirty nodes on the camer and under root need to be cleared.
         if (root.dirty || true) {
@@ -900,13 +908,15 @@
       mouseMove(ev);
       ev.preventDefault();
     }, true);
-    
+
     var scale = 1;
     window.addEventListener("mousewheel", function(ev) {
       var amount = ev.wheelDeltaY/5000;
-      options.renderer.scale += amount; 
+      if (safe.target && safe.target.scale) {
+        console.log("applying scale...");
+        safe.target.scale += amount;
+      }
     }, true);
-
 
     // TODO: this might not always be on a dom document *winky wink*
     var lastMouseUp = null;
@@ -1019,7 +1029,7 @@
           // Don't call renderTree on the camera as it has a render method
           // and it will recurse
           for (var i=0; i<obj.children.length; i++) {
-            options.renderer.renderTree(obj.children[i], {scale: false});
+            options.renderer.renderTree(obj.children[i]);
           }
         }
       }

status.json

@@ -1,5 +1,6 @@
 {
   "todo" : [
+    "[REFACTOR] add event capture phase",
     "write tutorial docs",
     "respect z coord",
     "port the clear rects and overlap cache to carena",

test/node.js

@@ -89,10 +89,10 @@ ok(0 === parent.children.length, "remove should update the length");
 
 // Node Tree Traversal
 var traversal1  = nodeFactory(),
-    traversal2  = nodeFactory()
+    traversal2  = nodeFactory(),
     traversal2a = nodeFactory(),
-    traversal3  = nodeFactory()
-    ;
+    traversal3  = nodeFactory();
+
 traversal1.add(traversal2.add(traversal2a)).add(traversal3);
 
 // test tiering dirtyness!
@@ -103,23 +103,11 @@ traversal1.remove(traversal3);
 ok(true === traversal1.dirty, "removing a node should make the parent dirty");
 traversal1.add(traversal3);
 
-var allResult = traversal1.descend();
-ok(allResult.nodesWalked === 4, "walked " + allResult.nodesWalked + " of 4 nodes");
-
-var falseResult = traversal1.descend(function(node) {
-  if (node === traversal2) {
-    return false;
-  }
+var descendNodes = []
+var allResult = traversal1.descend(function(node) {
+  descendNodes.push(node);
 });
-ok(falseResult.nodesWalked === 3, "when a walk callback returns false, stop walking that branch");
-
-var cancelledResult = traversal1.descend(function(node, walker) {
-  if (node === traversal2) {
-    walker.stop();
-  }
-});
-ok(cancelledResult.nodesWalked === 2, "when a walk is cancelled, stop immediately");
-
+ok(descendNodes.length === 4, "walked " + descendNodes.length + " of 4 nodes");
 
 // Node Event Feature
 var eventNodeFactory = carena.design({}, ["carena.Node", "carena.Eventable"]);