代码整理

src/core/connect.js

@@ -32,13 +32,18 @@ kity.extendClass(Minder, {
 
         node._connection = connection;
 
-        this.getRenderContainer().prependShape(connection);
+        if (!this._connectContainer) {
+            this._connectContainer = new kity.Group().setId(KityMinder.uuid('minder_connect_group'));
+            this.getRenderContainer().prependShape(this._connectContainer);
+        }
+
+        this._connectContainer.addShape(connection);
     },
 
     removeConnect: function(node) {
         var me = this;
         node.traverse(function(node) {
-            me.getRenderContainer().removeShape(node._connection);
+            me._connectContainer.removeShape(node._connection);
         });
     },
 

src/module/outline.js

@@ -2,81 +2,83 @@
 
 var wireframe = /wire/.test(window.location.href);
 
+var OutlineRenderer = kity.createClass('OutlineRenderer', {
+    base: Renderer,
+
+    create: function(node) {
+        var group = new kity.Group();
+
+        var outline = this.outline = new kity.Rect()
+            .setId(KityMinder.uuid('node_outline'));
+
+        var shadow = this.shadow = new kity.Rect()
+            .setId(KityMinder.uuid('node_shadow'))
+            .fill('black')
+            .setOpacity(0.25);
+
+        group.addShapes([shadow, outline]);
+
+        if (wireframe) {
+            var oxy = this.oxy = new kity.Path()
+                .stroke('#f6f')
+                .setPathData('M0,-50L0,50M-50,0L50,0');
+
+            var box = this.wireframe = new kity.Rect()
+                .stroke('lightgreen');
+
+            group.addShapes([oxy, box]);
+        }
+
+        this.bringToBack = true;
+        return group;
+    },
+
+    update: function(created, node) {
+        var contentBox = node.getContentBox();
+
+        var paddingLeft = node.getStyle('padding-left'),
+            paddingRight = node.getStyle('padding-right'),
+            paddingTop = node.getStyle('padding-top'),
+            paddingBottom = node.getStyle('padding-bottom');
+
+        var outlineBox = {
+            x: contentBox.x - paddingLeft,
+            y: contentBox.y - paddingTop,
+            width: contentBox.width + paddingLeft + paddingRight,
+            height: contentBox.height + paddingTop + paddingBottom
+        };
+
+        this.outline
+            .setPosition(outlineBox.x, outlineBox.y)
+            .setSize(outlineBox.width, outlineBox.height)
+            .setRadius(node.getStyle('radius'))
+            .fill(node.isSelected() ?
+                node.getStyle('selected-background') :
+                node.getStyle('background'));
+
+        if (node.getLevel() < 2) {
+            this.shadow
+                .setVisible(true)
+                .setPosition(outlineBox.x + 4, outlineBox.y + 5)
+                .setSize(outlineBox.width, outlineBox.height)
+                .setRadius(node.getStyle('radius'));
+        } else {
+            this.shadow.setVisible(false);
+        }
+
+        if (wireframe) {
+            this.wireframe
+                .setPosition(outlineBox.x, outlineBox.y)
+                .setSize(outlineBox.width, outlineBox.height);
+        }
+        return outlineBox;
+    }
+});
+
 KityMinder.registerModule('OutlineModule', function() {
     return {
         renderers: {
-            outline: kity.createClass('OutlineRenderer', {
-                base: Renderer,
-
-                create: function(node) {
-                    var group = new kity.Group();
-
-                    var outline = this.outline = new kity.Rect()
-                        .setId(KityMinder.uuid('node_outline'));
-
-                    var shadow = this.shadow = new kity.Rect()
-                        .setId(KityMinder.uuid('node_shadow'))
-                        .fill('black')
-                        .setOpacity(0.25);
-
-                    group.addShapes([shadow, outline]);
-
-                    if (wireframe) {
-                        var oxy = this.oxy = new kity.Path()
-                            .stroke('#f6f')
-                            .setPathData('M0,-50L0,50M-50,0L50,0');
-
-                        var box = this.wireframe = new kity.Rect()
-                            .stroke('lightgreen');
-
-                        group.addShapes([oxy, box]);
-                    }
-
-                    this.bringToBack = true;
-                    return group;
-                },
-
-                update: function(created, node) {
-                    var contentBox = node.getContentBox();
-
-                    var paddingLeft = node.getStyle('padding-left'),
-                        paddingRight = node.getStyle('padding-right'),
-                        paddingTop = node.getStyle('padding-top'),
-                        paddingBottom = node.getStyle('padding-bottom');
-
-                    var outlineBox = {
-                        x: contentBox.x - paddingLeft,
-                        y: contentBox.y - paddingTop,
-                        width: contentBox.width + paddingLeft + paddingRight,
-                        height: contentBox.height + paddingTop + paddingBottom
-                    };
-
-                    this.outline
-                        .setPosition(outlineBox.x, outlineBox.y)
-                        .setSize(outlineBox.width, outlineBox.height)
-                        .setRadius(node.getStyle('radius'))
-                        .fill(node.isSelected() ?
-                            node.getStyle('selected-background') :
-                            node.getStyle('background'));
-
-                    if (node.getLevel() < 2) {
-                        this.shadow
-                            .setVisible(true)
-                            .setPosition(outlineBox.x + 4, outlineBox.y + 5)
-                            .setSize(outlineBox.width, outlineBox.height)
-                            .setRadius(node.getStyle('radius'));
-                    } else {
-                        this.shadow.setVisible(false);
-                    }
-
-                    if (wireframe) {
-                        this.wireframe
-                            .setPosition(outlineBox.x, outlineBox.y)
-                            .setSize(outlineBox.width, outlineBox.height);
-                    }
-                    return outlineBox;
-                }
-            })
+            outline: OutlineRenderer
         }
     };
 });
\ No newline at end of file