添加连线随布局变化的机制

dialogs/resource/resource.js

-(function (utils) {
+(function(utils) {
     KM.registerWidget('resource', {
-        tpl: 
-            '<div class="resource-container">' +
-                '<div class="add-resource">' +
-                    '<input type="text" /><button class="button">添加</button>' +
-                    '<ul class="global-resource"></ul>' +
-                '</div>' +
+        tpl: '<div class="resource-container">' +
+            '<div class="add-resource">' +
+            '<input type="text" /><button class="button">添加</button>' +
+            '<ul class="global-resource"></ul>' +
+            '</div>' +
             '</div>' +
             '<div class="no-selected">未选中节点</div>',
 
-        initContent: function (km, $w) {
+        initContent: function(km, $w) {
             var lang = km.getLang('dialogs.resource'),
                 html = $.parseTmpl(this.tpl, lang);
             this.root().html(html);
         },
 
-        initEvent: function (km, $w) {
+        initEvent: function(km, $w) {
             var $container = $w.find('.resource-container');
             var $noSelected = $w.find('.no-selected');
             var $current = $w.find('.current-resource').hide();
@@ -43,7 +42,7 @@
                 $addInput.val(null);
             }
 
-            $addInput.on('keydown', function (e) {
+            $addInput.on('keydown', function(e) {
                 if (e.keyCode == 13) addResource();
             });
 
@@ -51,25 +50,25 @@
 
             switchDisplay();
 
-            $global.delegate('input[type=checkbox]', 'change', function () {
-                km.execCommand('resource', $global.find('input[type=checkbox]:checked').map(function (index, chk) {
+            $global.delegate('input[type=checkbox]', 'change', function() {
+                km.execCommand('resource', $global.find('input[type=checkbox]:checked').map(function(index, chk) {
                     return $(chk).data('resource');
                 }).toArray());
             });
 
-            km.on('interactchange', function (e) {
+            km.on('interactchange', function(e) {
                 var resource = this.queryCommandValue("resource");
                 var used = this.getUsedResource();
 
                 switchDisplay();
 
-                $global.empty().append(used.map(function (name) {
+                $global.empty().append(used.map(function(name) {
                     var $li = $('<li></li>'),
                         $label = $('<label></label>').appendTo($li),
                         $chk = $('<input type="checkbox" />')
-                            .data('resource', name)
-                            .prop('checked', ~resource.indexOf(name))
-                            .appendTo($label);
+                        .data('resource', name)
+                        .prop('checked', ~resource.indexOf(name))
+                        .appendTo($label);
                     $label.append(name);
                     var color = km.getResourceColor(name);
                     return $li.css({

import.js

@@ -15,12 +15,14 @@
             'core/minder.module.js',
             'core/minder.command.js',
             'core/minder.node.js',
+            'core/minder.select.js',
             'core/keymap.js',
             'core/minder.lang.js',
             'core/minder.defaultoptions.js',
             'core/minder.preference.js',
             'core/browser.js',
             'core/layout.js',
+            'core/connect.js',
             'core/render.js',
             'core/theme.js',
             'layout/default.js',
@@ -34,7 +36,6 @@
             'module/priority.js',
             'module/image.js',
             'module/resource.js',
-            'core/minder.select.js',
             'module/view.js',
             'module/dragtree.js',
             'module/dropfile.js',

src/module/connect.js → src/core/connect.js

 /* global Renderer: true */
 
+utils.extend(KityMinder, {
+    _connectProviders: {},
+
+    _defaultConnectProvider: function(node, parent) {
+        return [
+            'M', parent.getLayoutPoint(),
+            'L', node.getLayoutPoint()
+        ];
+    },
+
+    registerConnectProvider: function(layout, provider) {
+        KityMinder._connectProviders[layout] = provider;
+    },
+
+    getConnectProvider: function(layout) {
+        return KityMinder._connectProviders[layout] || KityMinder._defaultConnectProvider;
+    }
+});
+
 kity.extendClass(Minder, {
 
     createConnect: function(node) {
@@ -30,59 +49,14 @@ kity.extendClass(Minder, {
 
         if (!parent) return;
 
-        var box = node.getLayoutBox(),
-            pBox = parent.getLayoutBox();
-
-        var start, end, vector;
-        var abs = Math.abs;
-        var pathData = [];
-
-        var side = box.cx > pBox.cx ? 'right' : 'left';
-
         if (parent.isCollapsed()) {
             connection.setVisible(false);
             return;
         }
         connection.setVisible(true);
 
-        switch (node.getType()) {
-
-            case 'main':
-
-                start = new kity.Point(pBox.cx, pBox.cy);
-                end = side == 'left' ?
-                    new kity.Point(box.right, box.cy) :
-                    new kity.Point(box.left, box.cy);
-                vector = kity.Vector.fromPoints(start, end);
-                pathData.push('M', start);
-                pathData.push('A', abs(vector.x), abs(vector.y), 0, 0, (vector.x * vector.y > 0 ? 0 : 1), end);
-                break;
-
-            case 'sub':
-
-                var radius = node.getStyle('connect-radius');
-
-                if (side == 'right') {
-                    start = new kity.Point(box.left - node.getStyle('margin-left') / 2, pBox.cy);
-                    end = new kity.Point(box.right + node.getStyle('margin-right') / 2, box.bottom);
-                } else {
-                    start = new kity.Point(box.right + node.getStyle('margin-right') / 2, pBox.cy);
-                    end = new kity.Point(box.left - node.getStyle('margin-left') / 2, box.bottom);
-                }
-
-                end.y += 1;
-
-                var isTop = parent.children.length > 1 && node.getIndex() === 0;
-
-                pathData.push('M', start);
-                pathData.push('L', start.x, isTop ? (end.y + radius) : (end.y - radius));
-
-                var sf = +(side == 'right' && isTop || side == 'left' && !isTop);
-                var ex = side == 'right' ? (start.x + radius) : (start.x - radius);
-
-                pathData.push('A', radius, radius, 0, 0, sf, ex, end.y);
-                pathData.push('L', end);
-        }
+        var provider = KityMinder.getConnectProvider(node.getLayout());
+        var pathData = provider(node, parent);
 
         connection.setPathData(pathData);
     }

src/layout/default.js

 /* global Layout:true */
 window.layoutSwitch = true;
+
 KityMinder.registerLayout('default', kity.createClass({
     base: Layout,
 
@@ -107,4 +108,56 @@ KityMinder.registerLayout('default', kity.createClass({
             });
         }
     }
-}));
+}));
\ No newline at end of file
+
+KityMinder.registerConnectProvider('default', function(node, parent) {
+
+    var box = node.getLayoutBox(),
+        pBox = parent.getLayoutBox();
+
+    var start, end, vector;
+    var abs = Math.abs;
+    var pathData = [];
+    var side = box.cx > pBox.cx ? 'right' : 'left';
+
+    switch (node.getType()) {
+
+        case 'main':
+
+            start = new kity.Point(pBox.cx, pBox.cy);
+            end = side == 'left' ?
+                new kity.Point(box.right, box.cy) :
+                new kity.Point(box.left, box.cy);
+            vector = kity.Vector.fromPoints(start, end);
+            pathData.push('M', start);
+            pathData.push('A', abs(vector.x), abs(vector.y), 0, 0, (vector.x * vector.y > 0 ? 0 : 1), end);
+            break;
+
+        case 'sub':
+
+            var radius = node.getStyle('connect-radius');
+
+            if (side == 'right') {
+                start = new kity.Point(box.left - node.getStyle('margin-left') / 2, pBox.cy);
+                end = new kity.Point(box.right + node.getStyle('margin-right') / 2, box.bottom);
+            } else {
+                start = new kity.Point(box.right + node.getStyle('margin-right') / 2, pBox.cy);
+                end = new kity.Point(box.left - node.getStyle('margin-left') / 2, box.bottom);
+            }
+
+            end.y += 1;
+
+            var isTop = parent.children.length > 1 && node.getIndex() === 0;
+
+            pathData.push('M', start);
+            pathData.push('L', start.x, isTop ? (end.y + radius) : (end.y - radius));
+
+            var sf = +(side == 'right' && isTop || side == 'left' && !isTop);
+            var ex = side == 'right' ? (start.x + radius) : (start.x - radius);
+
+            pathData.push('A', radius, radius, 0, 0, sf, ex, end.y);
+            pathData.push('L', end);
+    }
+
+    return pathData;
+});

src/module/resource.js

@@ -34,7 +34,7 @@ KityMinder.registerModule('Resource', function() {
                 colorMapping[resource] = nextIndex;
             }
 
-            // 资源过多，找不到可用索引颜色，统一返回白色åå
+            // 资源过多，找不到可用索引颜色，统一返回白色
             return RESOURCE_COLOR_SERIES[colorMapping[resource]] || RESOURCE_COLOR_OVERFLOW;
         },
 
@@ -162,27 +162,36 @@ KityMinder.registerModule('Resource', function() {
     var ResourceOverlay = kity.createClass('ResourceOverlay', {
         base: kity.Group,
 
-        constructor: function(container, resourceName, color) {
+        constructor: function() {
             this.callBase();
 
+            var text, rect;
+
+            rect = this.rect = new kity.Rect();
+
+            text = this.text = new kity.Text()
+                .setFontSize(12)
+                .setVerticalAlign('middle');
+
+            this.addShapes([rect, text]);
+        },
+
+        setValue: function(resourceName, color) {
             var paddingX = 8,
                 paddingY = 4,
                 borderRadius = 4;
             var text, box, rect;
 
-            container.addShape(this);
-
-            text = new kity.Text()
-                .setContent(resourceName)
-                .setFontSize(12)
-                .setVerticalAlign('middle')
+            text = this.text
                 .setX(paddingX)
+                .setContent(resourceName)
                 .fill(color.dec('l', 70));
 
-            this.addShape(text);
-
             box = text.getBoundaryBox();
 
+            rect.setPosition(0, box.y - paddingY);
+            rect.setSize(box.width + paddingX * 2, box.height + paddingY * 2);
+
             rect = new kity.Rect(
                 box.width + paddingX * 2,
                 box.height + paddingY * 2,
@@ -194,6 +203,21 @@ KityMinder.registerModule('Resource', function() {
 
             this.addShape(rect);
             rect.bringRear();
+        }
+    });
+
+    /**
+     * @class 资源渲染器
+     */
+    var ResourceRenderer = kity.createClass('ResourceRenderer', {
+        base: KityMinder.Renderer,
+
+        create: function(node) {
+            this.container = new kity.Group();
+            this.overlays = [];
+        },
+
+        update: function(node) {
 
         }
     });
@@ -219,6 +243,10 @@ KityMinder.registerModule('Resource', function() {
                     });
                 }
             }
+        },
+
+        renderers: {
+            right: ResourceRenderer
         }
     };
 });
\ No newline at end of file