添加进度和优先级模块

import.js

@@ -30,7 +30,8 @@
             'module/outline.js',
             'module/geometry.js',
             'module/history.js',
-            'module/icon.js',
+            'module/progress.js',
+            'module/priority.js',
             'module/image.js',
             'module/resource.js',
             'core/minder.select.js',

kity @ 38e17411

-Subproject commit f62ec70beb8198072693e1b7f1748cca46b685fb
+Subproject commit 38e17411060a02d0601985ca1a2553057c3f9e40

src/core/layout.js

@@ -75,6 +75,15 @@ kity.extendClass(MinderNode, {
         return this._layoutTransform || new kity.Matrix();
     },
 
+    setLayoutVector: function(vector) {
+        this._layoutVector = vector;
+        return this;
+    },
+
+    getLayoutVector: function(vector) {
+        return this._layoutVector || new kity.Vector();
+    },
+
     getLayoutBox: function() {
         var matrix = this._lastLayoutTransform || new kity.Matrix();
         return matrix.transformBox(this.getContentBox());

src/core/render.js

-var Renderer = kity.createClass('Renderer', {
+var Renderer = KityMinder.Renderer = kity.createClass('Renderer', {
     constructor: function(node) {
         this.node = node;
     },
@@ -54,7 +54,7 @@ kity.extendClass(Minder, {
         }
 
         for (i = 0; i < node._renderers.length; i++) {
-            latestBox = node._renderers[i].update(node, latestBox);
+            latestBox = node._renderers[i].update(node, contentBox);
             if (latestBox) {
                 node._contentBox = contentBox = g.mergeBox(contentBox, latestBox);
             }

src/layout/default.js

@@ -77,9 +77,13 @@ KityMinder.registerLayout('default', kity.createClass({
             if (side == 'right') {
                 x = nodeContentBox.right - childContentBox.left;
                 x += parent.getStyle('margin-right') + child.getStyle('margin-left');
+
+                child.setLayoutVector(new kity.Vector(childContentBox.left, childContentBox.cy));
             } else {
                 x = nodeContentBox.left - childContentBox.right;
                 x -= parent.getStyle('margin-left') + child.getStyle('margin-right');
+
+                child.setLayoutVector(new kity.Vector(childContentBox.right, childContentBox.cy));
             }
 
             // 竖直方向上的布局

src/module/connect.js

 /* global Renderer: true */
 
-KityMinder.registerModule('Connect', function() {
-    return {
-        events: {
-            'nodecreate': function(e) {
-                var node = e.node;
+kity.extendClass(Minder, {
+
+    createConnect: function(node) {
         if (node.isRoot()) return;
 
+        var strokeColor = node.getStyle('connect-color') || 'white',
+            strokeWidth = node.getStyle('connect-width') || 2;
+
         var connection = new kity.Path()
-                    .stroke(node.getStyle('connect-color') || 'white', node.getStyle('connect-width') || 2);
+            .stroke(strokeColor, strokeWidth);
+
         node._connection = connection;
+
         this.getRenderContainer().prependShape(connection);
     },
-            'noderemove': function(e) {
-                var node = e.node;
+
+    removeConnect: function(node) {
         var me = this;
         node.traverse(function(node) {
             me.getRenderContainer().removeShape(node._connection);
         });
     },
-            'layoutapply noderender': function(e) {
-                var node = e.node;
+
+    updateConnect: function(node) {
+
         var connection = node._connection;
         var parent = node.parent;
 
@@ -57,6 +61,7 @@ KityMinder.registerModule('Connect', function() {
             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);
@@ -64,6 +69,9 @@ KityMinder.registerModule('Connect', function() {
                     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);
@@ -78,6 +86,18 @@ KityMinder.registerModule('Connect', function() {
 
         connection.setPathData(pathData);
     }
+});
+
+KityMinder.registerModule('Connect', {
+    events: {
+        'nodecreate': function(e) {
+            this.createConnect(e.node);
+        },
+        'noderemove': function(e) {
+            this.removeConnect(e.node);
+        },
+        'layoutapply noderender': function(e) {
+            this.updateConnect(e.node);
+        }
     }
-    };
 });
\ No newline at end of file

src/module/icon.js → src/module/priority.js

-KityMinder.registerModule('IconModule', function() {
+KityMinder.registerModule('PriorityModule', function() {
     var minder = this;
 
-    var PRIORITY_COLORS = ['', '#A92E24', '#29A6BD', '#1E8D54', '#eb6100', '#876DDA', '#828282', '#828282', '#828282', '#828282'];
+    // 进度图标使用的颜色
+    var PRIORITY_COLORS = ['', '#A92E24', '#29A6BD',
+        '#1E8D54', '#eb6100', '#876DDA', '#828282',
+        '#828282', '#828282', '#828282'
+    ];
+    var PRIORITY_DATA = 'priority';
 
+    // 进度图标的图形
     var PriorityIcon = kity.createClass('PriorityIcon', {
         base: kity.Group,
 
-        constructor: function(value) {
+        constructor: function() {
             this.callBase();
             this.setSize(20);
             this.create();
-            this.setValue(value);
             this.setId(KityMinder.uuid('node_priority'));
         },
 
@@ -50,93 +55,13 @@ KityMinder.registerModule('IconModule', function() {
         }
     });
 
-    var ProgressIcon = kity.createClass('ProgressIcon', {
-        base: kity.Group,
-
-        constructor: function(value) {
-            this.callBase();
-            this.create();
-        }
-    });
-
-    var renderProgressIcon = function(node, val) {
-        var _rc = new kity.Group();
-        var _contRc = node.getContRc();
-        var _bg = new kity.Circle().setRadius(8).fill('white').stroke(new kity.Pen('#29A6BD', 2));
-        var _percent, d;
-        if (val < 9) {
-            _percent = new kity.Path();
-            d = _percent.getDrawer();
-            d.moveTo(0, 0).lineTo(0, -6);
-        } else _percent = new kity.Group();
-        _rc.addShapes([_bg, _percent]);
-        _contRc.addShape(_rc);
-        //r, laf, sf, x, y
-        //large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。
-        //sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。
-        switch (val) {
-            case 1:
-                break;
-            case 2:
-                d.carcTo(6, 0, 1, 6 * Math.cos(2 * Math.PI / 8), -6 * Math.sin(2 * Math.PI / 8));
-                break;
-            case 3:
-                d.carcTo(6, 0, 1, 6, 0);
-                break;
-            case 4:
-                d.carcTo(6, 0, 1, 6 * Math.cos(2 * Math.PI / 8), 6 * Math.sin(2 * Math.PI / 8));
-                break;
-            case 5:
-                d.carcTo(6, 0, 1, 0, 6);
-                break;
-            case 6:
-                d.carcTo(6, 1, 1, -6 * Math.cos(2 * Math.PI / 8), 6 * Math.sin(2 * Math.PI / 8));
-                break;
-            case 7:
-                d.carcTo(6, 1, 1, -6, 0);
-                break;
-            case 8:
-                d.carcTo(6, 1, 1, -6 * Math.cos(2 * Math.PI / 8), -6 * Math.sin(2 * Math.PI / 8));
-                break;
-            case 9:
-                var check = new kity.Path();
-                _percent.addShapes([new kity.Circle().setRadius(6).fill('#29A6BD'), check]);
-                check.getDrawer().moveTo(-3, 0).lineTo(-1, 3).lineTo(3, -2);
-                check.stroke(new kity.Pen('white', 2).setLineCap('round'));
-                break;
-        }
-        if (val && val < 8) d.close();
-        _percent.fill('#29A6BD');
-        var pre = node.getData('PriorityIcon');
-        var style = minder.getCurrentLayoutStyle()[node.getType()];
-        if (!pre) _rc.setTranslate(_rc.getWidth() / 2, 0);
-        else _rc.setTranslate(_contRc.getWidth() + style.spaceLeft, 0);
-    };
+    // 提供的命令
     var PriorityCommand = kity.createClass('SetPriorityCommand', {
         base: Command,
         execute: function(km, value) {
             var nodes = km.getSelectedNodes();
             for (var i = 0; i < nodes.length; i++) {
-                nodes[i].setData('PriorityIcon', value).render();
-            }
-            km.layout();
-        },
-        queryValue: function(km) {
-            var nodes = km.getSelectedNodes();
-            var val;
-            for (var i = 0; i < nodes.length; i++) {
-                val = nodes[i].getData('PriorityIcon');
-                if (val) break;
-            }
-            return val;
-        }
-    });
-    var ProgressCommand = kity.createClass('SetProgressCommand', {
-        base: Command,
-        execute: function(km, value) {
-            var nodes = km.getSelectedNodes();
-            for (var i = 0; i < nodes.length; i++) {
-                nodes[i].setData('ProgressIcon', value).render();
+                nodes[i].setData(PRIORITY_DATA, value).render();
             }
             km.layout();
         },
@@ -144,7 +69,7 @@ KityMinder.registerModule('IconModule', function() {
             var nodes = km.getSelectedNodes();
             var val;
             for (var i = 0; i < nodes.length; i++) {
-                val = nodes[i].getData('ProgressIcon');
+                val = nodes[i].getData(PRIORITY_DATA);
                 if (val) break;
             }
             return val;
@@ -153,22 +78,20 @@ KityMinder.registerModule('IconModule', function() {
     return {
         'commands': {
             'priority': PriorityCommand,
-            'progress': ProgressCommand
         },
         'renderers': {
-            left: kity.createClass('Icon', {
-                base: Renderer,
+            left: kity.createClass('PriorityRenderer', {
+                base: KityMinder.Renderer,
 
                 create: function(node) {
                     this.priority = new PriorityIcon();
                     node.getRenderContainer().addShape(this.priority);
                 },
 
-                update: function(node) {
-                    var data = node.getData('PriorityIcon');
+                update: function(node, box) {
+                    var data = node.getData(PRIORITY_DATA);
                     var spaceLeft = node.getStyle('space-left');
                     var icon = this.priority;
-                    var box = node.getContentBox();
                     var x, y;
 
                     if (!data) {
@@ -180,6 +103,7 @@ KityMinder.registerModule('IconModule', function() {
 
                     x = box.left - icon.width - spaceLeft;
                     y = -icon.height / 2;
+
                     icon.setTranslate(x, y);
 
                     return {

src/module/progress.js

+KityMinder.registerModule('ProgressModule', function() {
+    var minder = this;
+
+    var PROGRESS_DATA = 'progress';
+
+    // 进度图标的图形
+    var ProgressIcon = kity.createClass('ProgressIcon', {
+        base: kity.Group,
+
+        constructor: function(value) {
+            this.callBase();
+            this.setSize(20);
+            this.create();
+            this.setValue(value);
+            this.setId(KityMinder.uuid('node_progress'));
+        },
+
+        setSize: function(size) {
+            this.width = this.height = size;
+        },
+
+        create: function() {
+
+            var circle = new kity.Circle(8)
+                .stroke('#29A6BD', 2)
+                .fill('white');
+
+            var pie = new kity.Pie(6, 0, -90)
+                .fill('#29A6BD');
+
+            var check = new kity.Path()
+                .getDrawer()
+                    .moveTo(-3, 0)
+                    .lineTo(-1, 3)
+                    .lineTo(3, -2)
+                .getPath()
+                .setVisible(false);
+
+            this.addShapes([circle, pie, check]);
+            this.circle = circle;
+            this.pie = pie;
+            this.check = check;
+        },
+
+        setValue: function(value) {
+            this.pie.setAngle(360 * (value - 1) / 8);
+            this.check.setVisible(value == 9);
+        }
+    });
+
+    var ProgressCommand = kity.createClass('ProgressCommand', {
+        base: Command,
+        execute: function(km, value) {
+            var nodes = km.getSelectedNodes();
+            for (var i = 0; i < nodes.length; i++) {
+                nodes[i].setData(PROGRESS_DATA, value).render();
+            }
+            km.layout();
+        },
+        queryValue: function(km) {
+            var nodes = km.getSelectedNodes();
+            var val;
+            for (var i = 0; i < nodes.length; i++) {
+                val = nodes[i].getData(PROGRESS_DATA);
+                if (val) break;
+            }
+            return val;
+        }
+    });
+
+    return {
+        'commands': {
+            'progress': ProgressCommand
+        },
+        'renderers': {
+            left: kity.createClass('ProgressRenderer', {
+                base: KityMinder.Renderer,
+
+                create: function(node) {
+                    this.progress = new ProgressIcon();
+                    node.getRenderContainer().addShape(this.progress);
+                },
+
+                update: function(node) {
+                    var data = node.getData(PROGRESS_DATA);
+                    var spaceLeft = node.getStyle('space-left');
+                    var icon = this.progress;
+                    var box = node.getContentBox();
+                    var x, y;
+
+                    if (!data) {
+                        icon.setVisible(false);
+                        return null;
+                    }
+
+                    icon.setVisible(true).setValue(data);
+
+                    x = box.left - icon.width - spaceLeft;
+                    y = -icon.height / 2;
+                    icon.setTranslate(x + icon.width / 2, y + icon.height / 2);
+
+                    return {
+                        x: x,
+                        y: y,
+                        width: icon.width,
+                        height: icon.height
+                    };
+                }
+            })
+        }
+    };
+});
\ No newline at end of file

src/theme/default.js

@@ -13,7 +13,7 @@ KityMinder.registerTheme('default', {
     'main-stroke': 'none',
     'main-font-size': 16,
     'main-padding': [6, 20],
-    'main-margin': [20, 7],
+    'main-margin': [30, 6],
     'main-radius': 10,
     'main-space': 5,
 
@@ -22,7 +22,7 @@ KityMinder.registerTheme('default', {
     'sub-stroke': 'white',
     'sub-font-size': 12,
     'sub-padding': [5, 10],
-    'sub-margin': [5, 12],
+    'sub-margin': [5, 15],
     'sub-radius': 5,
     'sub-space': 5,