添加批量渲染的机制

避免因为循环单个渲染时不断读写造成的浏览器性能问题

src/core/render.js

@@ -24,41 +24,123 @@ var Renderer = KityMinder.Renderer = kity.createClass('Renderer', {
     }
 });
 
-kity.extendClass(Minder, {
+kity.extendClass(Minder, (function() {
 
-    _createRendererForNode: function(node) {
-
-        var registered = this._renderers;
+    function createRendererForNode(node, registered) {
         var renderers = [];
 
         ['center', 'left', 'right', 'top', 'bottom', 'outline', 'outside'].forEach(function(section) {
-            if (registered['before' + section]) {
-                renderers = renderers.concat(registered['before' + section]);
+            var before = 'before' + section;
+            var after = 'after' + section;
+
+            if (registered[before]) {
+                renderers = renderers.concat(registered[before]);
             }
             if (registered[section]) {
                 renderers = renderers.concat(registered[section]);
             }
-            if (registered['after' + section]) {
-                renderers = renderers.concat(registered['after' + section]);
+            if (registered[after]) {
+                renderers = renderers.concat(registered[after]);
             }
         });
 
         node._renderers = renderers.map(function(Renderer) {
             return new Renderer(node);
         });
+    }
+
+    return {
+
+        renderNodeBatch: function(nodes) {
+            var rendererClasses = this._rendererClasses;
+            var lastBoxes = [];
+            var rendererCount = 0;
+            var i, j, renderer, node;
+
+            if (!nodes.length) return;
+
+            for (j = 0; j < nodes.length; j++) {
+                node = nodes[j];
+                if (!node._renderers) {
+                    createRendererForNode(node, rendererClasses);
+                }
+                node._contentBox = new kity.Box();
+                this.fire('beforerender', {
+                    node: node
+                });
+            }
+
+            // 所有节点渲染器数量是一致的
+            rendererCount = nodes[0]._renderers.length;
+
+            for (i = 0; i < rendererCount; i++) {
+
+                // 获取延迟盒子数据
+                for (j = 0; j < nodes.length; j++) {
+                    if (typeof(lastBoxes[j]) == 'function') {
+                        lastBoxes[j] = lastBoxes[j]();
+                    }
+                    if (!(lastBoxes[j] instanceof kity.Box)) {
+                        lastBoxes[j] = new kity.Box(lastBoxes[j]);
+                    }
+                }
+
+                for (j = 0; j < nodes.length; j++) {
+                    node = nodes[j];
+                    renderer = node._renderers[i];
+
+                    // 合并盒子
+                    if (lastBoxes[j]) {
+                        node._contentBox = node._contentBox.merge(lastBoxes[j]);
+                    }
+
+                    // 判断当前上下文是否应该渲染
+                    if (renderer.shouldRender(node)) {
+
+                        // 应该渲染，但是渲染图形没创建过，需要创建
+                        if (!renderer.getRenderShape()) {
+                            renderer.setRenderShape(renderer.create(node));
+                            if (renderer.bringToBack) {
+                                node.getRenderContainer().prependShape(renderer.getRenderShape());
+                            } else {
+                                node.getRenderContainer().appendShape(renderer.getRenderShape());
+                            }
+                        }
+
+                        // 强制让渲染图形显示
+                        renderer.getRenderShape().setVisible(true);
+
+                        // 更新渲染图形
+                        lastBoxes[j] = renderer.update(renderer.getRenderShape(), node, node._contentBox);
+                    }
+
+                    // 如果不应该渲染，但是渲染图形创建过了，需要隐藏起来
+                    else if (renderer.getRenderShape()) {
+                        renderer.getRenderShape().setVisible(false);
+                        lastBoxes[j] = null;
+                    }
+                }
+            }
+
+            for (j = 0; j < nodes.length; j++) {
+                this.fire('afterrender', {
+                    node: node
+                });
+            }
         },
 
         renderNode: function(node) {
-
-        var rendererClasses = this._renderers;
+            var rendererClasses = this._rendererClasses;
             var g = KityMinder.Geometry;
             var i, latestBox, renderer;
 
             if (!node._renderers) {
-            this._createRendererForNode(node);
+                createRendererForNode(node, rendererClasses);
             }
 
-        this.fire('beforerender', {node: node});
+            this.fire('beforerender', {
+                node: node
+            });
 
             node._contentBox = g.wrapBox({
                 left: 0,
@@ -88,6 +170,8 @@ kity.extendClass(Minder, {
                     // 更新渲染图形
                     latestBox = renderer.update(renderer.getRenderShape(), node, node._contentBox);
 
+                    if (typeof(latestBox) == 'function') latestBox = latestBox();
+
                     // 合并渲染区域
                     if (latestBox) {
                         node._contentBox = g.mergeBox(node._contentBox, latestBox);
@@ -105,7 +189,8 @@ kity.extendClass(Minder, {
                 node: node
             });
         }
-});
+    };
+})());
 
 kity.extendClass(MinderNode, {
     render: function() {
@@ -113,6 +198,15 @@ kity.extendClass(MinderNode, {
         this.getMinder().renderNode(this);
         return this;
     },
+    renderTree: function() {
+        if (!this.attached) return;
+        var list = [];
+        this.traverse(function(node) {
+            list.push(node);
+        });
+        this.getMinder().renderNodeBatch(list);
+        return this;
+    },
     getRenderer: function(type) {
         var rs = this._renderers;
         for (var i = 0; i < rs.length; i++) {