Merge branch 'fish-bone' into dev

import.js

@@ -60,6 +60,8 @@
         { path: 'src/layout/mind.js',                   pack: 'edit|share|m-share' },
         { path: 'src/layout/filetree.js',               pack: 'edit|share|m-share' },
         { path: 'src/layout/btree.js',                  pack: 'edit|share|m-share' },
+        { path: 'src/layout/fish-bone-master.js',       pack: 'edit|share|m-share' },
+        { path: 'src/layout/fish-bone-slave.js',        pack: 'edit|share|m-share' },
 
         /* 连线 */
         { path: 'src/connect/bezier.js',                pack: 'edit|share|m-share' },
@@ -67,17 +69,21 @@
         { path: 'src/connect/arc.js',                   pack: 'edit|share|m-share' },
         { path: 'src/connect/under.js',                 pack: 'edit|share|m-share' },
         { path: 'src/connect/l.js',                     pack: 'edit|share|m-share' },
+        { path: 'src/connect/fish-bone-master.js',      pack: 'edit|share|m-share' },
 
         /* 皮肤 */
         { path: 'src/theme/default.js',                 pack: 'edit|share|m-share' },
         { path: 'src/theme/snow.js',                    pack: 'edit|share|m-share' },
         { path: 'src/theme/fresh.js',                   pack: 'edit|share|m-share' },
+        { path: 'src/theme/fish.js',                    pack: 'edit|share|m-share' },
+        { path: 'src/theme/wire.js',                    pack: 'edit|share|m-share' },
 
         /* 模板 */
         { path: 'src/template/default.js',              pack: 'edit|share|m-share' },
         { path: 'src/template/structure.js',            pack: 'edit|share|m-share' },
         { path: 'src/template/filetree.js',             pack: 'edit|share|m-share' },
         { path: 'src/template/right.js',                pack: 'edit|share|m-share' },
+        { path: 'src/template/fish-bone.js',            pack: 'edit|share|m-share' },
 
         /* 模块 */
         { path: 'src/module/node.js',                   pack: 'edit|share|m-share' },

lang/zh-cn/zh-cn.js

@@ -3,11 +3,14 @@ KityMinder.LANG['zh-cn'] = {
         'default': '思维导图',
         'structure': '组织结构图',
         'filetree': '目录组织图',
-        'right': '逻辑结构图'
+        'right': '逻辑结构图',
+        'fish-bone': '鱼骨头图'
     },
     'theme': {
         'classic': '脑图经典',
         'snow': '温柔冷光',
+        'fish': '鱼骨图',
+        'wire': '线框',
         'fresh-red': '清新红',
         'fresh-soil': '泥土黄',
         'fresh-green': '文艺绿',

kity @ 36b51b09

-Subproject commit 8f52e73cc57a447f268e71783d44e34ee028f763
+Subproject commit 36b51b090c28d9d362f00e1023fcb3dc6317585d

src/connect/fish-bone-master.js

+/**
+ * @fileOverview
+ *
+ * 鱼骨头主干连线
+ *
+ * @author: techird
+ * @copyright: Baidu FEX, 2014
+ */
+
+KityMinder.registerConnectProvider('fish-bone-master', function(node, parent, connection) {
+
+    var pout = parent.getLayoutVertexOut(),
+        pin = node.getLayoutVertexIn();
+
+    var abs = Math.abs;
+
+    var dy = abs(pout.y - pin.y),
+        dx = abs(pout.x - pin.x);
+
+    var pathData = [];
+
+    pathData.push('M', pout.x, pout.y);
+    pathData.push('h', dx - dy);
+    pathData.push('L', pin.x, pin.y);
+
+    connection.setMarker(null);
+    connection.setPathData(pathData);
+});
\ No newline at end of file

src/core/layout.js

@@ -17,8 +17,8 @@ Utils.extend(KityMinder, {
 
     getLayoutInstance: function(name) {
         var LayoutClass = KityMinder._layout[name];
+        if (!LayoutClass) throw new Error('Missing Layout: ' + name);
         var layout = new LayoutClass();
-        if (!layout) throw new Error('Missing Layout: ' + name);
         return layout;
     }
 });
@@ -239,27 +239,28 @@ kity.extendClass(Minder, {
             node.setLayoutTransform(null);
         });
 
-        function layoutNode(node) {
+        function layoutNode(node, round) {
 
             // layout all children first
             // 剪枝：收起的节点无需计算
             if (node.isExpanded() || true) {
                 node.children.forEach(function(child) {
-                    layoutNode(child);
+                    layoutNode(child, round);
                 });
             }
 
             var layout = node.getLayoutInstance();
-            layout.doLayout(node, node.getChildren().filter(function(child) {
+            var childrenInFlow = node.getChildren().filter(function(child) {
                 return !child.hasLayoutOffset();
-            }));
+            });
+            layout.doLayout(node, childrenInFlow, round);
         }
 
         // 第一轮布局
-        layoutNode(this.getRoot());
+        layoutNode(this.getRoot(), 1);
 
         // 第二轮布局
-        layoutNode(this.getRoot());
+        layoutNode(this.getRoot(), 2);
 
         duration = duration ? 300 : 0;
 

src/layout/filetree.js

 /* global Layout:true */
-KityMinder.registerLayout('filetree', kity.createClass({
-    base: Layout,
-
-    doLayout: function(parent, children) {
-        var pBox = parent.getContentBox();
-        var indent = 20;
-
-        parent.setVertexOut(new kity.Point(pBox.left + indent, pBox.bottom));
-        parent.setLayoutVectorOut(new kity.Vector(0, 1));
-
-        if (!children.length) return;
-
-        children.forEach(function(child) {
-            var cbox = child.getContentBox();
-            child.setLayoutTransform(new kity.Matrix());
-
-            child.setVertexIn(new kity.Point(cbox.left, cbox.cy));
-            child.setLayoutVectorIn(new kity.Vector(1, 0));
-        });
-
-        this.align(children, 'left');
-        this.stack(children, 'y');
-
-        var xAdjust = 0;
-        xAdjust += pBox.left;
-        xAdjust += indent;
-        xAdjust += children[0].getStyle('margin-left');
-        var yAdjust = 0;
-        yAdjust += pBox.bottom;
-        yAdjust += parent.getStyle('margin-bottom');
-        yAdjust += children[0].getStyle('margin-top');
-
-        this.move(children, xAdjust, yAdjust);
-
-    },
-
-    getOrderHint: function(node) {
-        var hint = [];
-        var box = node.getLayoutBox();
-        var offset = node.getLevel() > 1 ? 3 : 5;
-
-        hint.push({
-            type: 'up',
-            node: node,
-            area: {
-                x: box.x,
-                y: box.top - node.getStyle('margin-top') - offset,
-                width: box.width,
-                height: node.getStyle('margin-top')
-            },
-            path: ['M', box.x, box.top - offset, 'L', box.right, box.top - offset]
-        });
-
-        hint.push({
-            type: 'down',
-            node: node,
-            area: {
-                x: box.x,
-                y: box.bottom + offset,
-                width: box.width,
-                height: node.getStyle('margin-bottom')
-            },
-            path: ['M', box.x, box.bottom + offset, 'L', box.right, box.bottom + offset]
-        });
-        return hint;
-    }
-}));
+
+[-1, 1].forEach(function (dir) {
+    var name = 'filetree-' + (dir > 0 ? 'down' : 'up');
+
+    KityMinder.registerLayout(name, kity.createClass({
+        base: Layout,
+
+        doLayout: function(parent, children, round) {
+            var pBox = parent.getContentBox();
+            var indent = 20;
+
+            parent.setVertexOut(new kity.Point(pBox.left + indent, dir > 0 ? pBox.bottom : pBox.top));
+            parent.setLayoutVectorOut(new kity.Vector(0, dir));
+
+            if (!children.length) return;
+
+            children.forEach(function(child) {
+                var cbox = child.getContentBox();
+                child.setLayoutTransform(new kity.Matrix());
+
+                child.setVertexIn(new kity.Point(cbox.left, cbox.cy));
+                child.setLayoutVectorIn(new kity.Vector(1, 0));
+            });
+
+            this.align(children, 'left');
+            this.stack(children, 'y');
+
+            var xAdjust = 0;
+            xAdjust += pBox.left;
+            xAdjust += indent;
+            xAdjust += children[0].getStyle('margin-left');
+
+            var yAdjust = 0;
+
+            if (dir > 0) {
+                yAdjust += pBox.bottom;
+                yAdjust += parent.getStyle('margin-bottom');
+                yAdjust += children[0].getStyle('margin-top');
+            } else {
+                yAdjust -= this.getTreeBox(children).bottom;
+                yAdjust += pBox.top;
+                yAdjust -= parent.getStyle('margin-top');
+                yAdjust -= children[0].getStyle('margin-bottom');
+            }
+
+            this.move(children, xAdjust, yAdjust);
+
+        },
+
+        getOrderHint: function(node) {
+            var hint = [];
+            var box = node.getLayoutBox();
+            var offset = node.getLevel() > 1 ? 3 : 5;
+
+            hint.push({
+                type: 'up',
+                node: node,
+                area: {
+                    x: box.x,
+                    y: box.top - node.getStyle('margin-top') - offset,
+                    width: box.width,
+                    height: node.getStyle('margin-top')
+                },
+                path: ['M', box.x, box.top - offset, 'L', box.right, box.top - offset]
+            });
+
+            hint.push({
\ No newline at end of file
+                type: 'down',
+                node: node,
+                area: {
+                    x: box.x,
+                    y: box.bottom + offset,
+                    width: box.width,
+                    height: node.getStyle('margin-bottom')
+                },
+                path: ['M', box.x, box.bottom + offset, 'L', box.right, box.bottom + offset]
+            });
+            return hint;
+        }
+    }));
+
+});
\ No newline at end of file

src/layout/fish-bone-master.js

+/**
+ * @fileOverview
+ *
+ * 鱼骨图主骨架布局
+ *
+ * @author: techird
+ * @copyright: Baidu FEX, 2014
+ */
+/* global Layout:true */
+KityMinder.registerLayout('fish-bone-master', kity.createClass('FishBoneMasterLayout', {
+    base: Layout,
+
+    doLayout: function(parent, children, round) {
+
+        var upPart = [],
+            downPart = [];
+
+        var child = children[0];
+        var pBox = parent.getContentBox();
+
+        parent.setVertexOut(new kity.Point(pBox.right, pBox.cy));
+        parent.setLayoutVectorOut(new kity.Vector(1, 0));
+
+        if (!child) return;
+
+        var cBox = child.getContentBox();
+        var pMarginRight = parent.getStyle('margin-right');
+        var cMarginLeft = child.getStyle('margin-left');
+        var cMarginTop = child.getStyle('margin-top');
+        var cMarginBottom = child.getStyle('margin-bottom');
+
+        children.forEach(function(child, index) {
+            child.setLayoutTransform(new kity.Matrix());
+            var cBox = child.getContentBox();
+
+            if (index % 2) {
+                downPart.push(child);
+                child.setVertexIn(new kity.Point(cBox.left, cBox.top));
+                child.setLayoutVectorIn(new kity.Vector(1, 1));
+            }
+            else {
+                upPart.push(child);
+                child.setVertexIn(new kity.Point(cBox.left, cBox.bottom));
+                child.setLayoutVectorIn(new kity.Vector(1, -1));
+            }
+
+        });
+
+        this.stack(upPart, 'x');
+        this.stack(downPart, 'x');
+
+        this.align(upPart, 'bottom');
+        this.align(downPart, 'top');
+
+        var xAdjust = pBox.right + pMarginRight + cMarginLeft;
+        var yAdjustUp = pBox.cy - cMarginBottom - parent.getStyle('margin-top');
+        var yAdjustDown = pBox.cy + cMarginTop + parent.getStyle('margin-bottom');
+
+        this.move(upPart, xAdjust, yAdjustUp);
+        this.move(downPart, xAdjust + cMarginLeft, yAdjustDown);
+
+        // children.forEach(function(child, index) {
+        //     var matrix = child.getLayoutTransform();
+        //     var dx, dy;
+        //     dx = matrix.getMatrix().e;
+        //     dy = matrix.getMatrix().f;
+        //     matrix.translate(-dx, -dy);
+        //     matrix.rotate(index % 2 ? 45 : -45);
+        //     matrix.translate(dx, dy);
+        // });
+
+    }
+}));
\ No newline at end of file

src/layout/fish-bone-slave.js

+/**
+ * @fileOverview
+ *
+ * 
+ *
+ * @author: techird
+ * @copyright: Baidu FEX, 2014
+ */
+
+/* global Layout: true */
+KityMinder.registerLayout('fish-bone-slave', kity.createClass('FishBoneSlaveLayout', {
+    base: Layout,
+
+    doLayout: function (parent, children, round) {
+
+        var layout = this;
+        var abs = Math.abs;
+        var GOLD_CUT = 1 - 0.618;
+
+        var pBox = parent.getContentBox();
+        var vi = parent.getLayoutVectorIn();
+
+        parent.setLayoutVectorOut(vi);
+
+        var goldX = pBox.left + pBox.width * GOLD_CUT;
+        var pout = new kity.Point(goldX, vi.y > 0 ? pBox.bottom : pBox.top);
+        parent.setVertexOut(pout);
+
+        var child = children[0];
+        if (!child) return;
+
+        var cBox = child.getContentBox();
+
+        children.forEach(function(child, index) {
+            child.setLayoutTransform(new kity.Matrix());
+            child.setLayoutVectorIn(new kity.Vector(1, 0));
+            child.setVertexIn(new kity.Point(cBox.left, cBox.cy));
+        });
+
+        this.stack(children, 'y');
+        this.align(children, 'left');
+        var xAdjust = 0, yAdjust = 0;
+        
+        xAdjust += pout.x;
+
+        if (parent.getLayoutVectorOut().y < 0) {
+            yAdjust -= this.getTreeBox(children).bottom;
+            yAdjust += parent.getContentBox().top;
+            yAdjust -= parent.getStyle('margin-top');
+            yAdjust -= child.getStyle('margin-bottom');
+        } else {
+            yAdjust += parent.getContentBox().bottom;
+            yAdjust += parent.getStyle('margin-bottom');
+            yAdjust += child.getStyle('margin-top');
+        }
+
+        this.move(children, xAdjust, yAdjust);
+
+        if (round == 2) {
+            children.forEach(function(child) {
+                var m = child.getLayoutTransform();
+                var cbox = child.getContentBox();
+                var pin = m.transformPoint(new kity.Point(cbox.left, 0));
+                layout.move([child], abs(pin.y - pout.y), 0);
+            });
+        }
+    }
+}));
\ No newline at end of file

src/module/outline.js

@@ -62,6 +62,15 @@ var ShadowRenderer = kity.createClass('ShadowRenderer', {
     }
 });
 
+var marker = new kity.Marker();
+
+marker.setWidth(10);
+marker.setHeight(12);
+marker.setRef(0, 0);
+marker.setViewBox(-6, -4, 8, 10);
+
+marker.addShape(new kity.Path().setPathData('M-5-3l5,3,-5,3').stroke('#33ffff'));
+
 var wireframeOption = /wire/.test(window.location.href);
 var WireframeRenderer = kity.createClass('WireframeRenderer', {
     base: Renderer,
@@ -75,7 +84,15 @@ var WireframeRenderer = kity.createClass('WireframeRenderer', {
         var box = this.wireframe = new kity.Rect()
             .stroke('lightgreen');
 
-        return wireframe.addShapes([oxy, box]);
+        var vectorIn = this.vectorIn = new kity.Path()
+            .stroke('#66ffff');
+        var vectorOut = this.vectorOut = new kity.Path()
+            .stroke('#66ffff');
+
+        vectorIn.setMarker(marker, 'end');
+        vectorOut.setMarker(marker, 'end');
+
+        return wireframe.addShapes([oxy, box, vectorIn, vectorOut]);
     },
 
     shouldRender: function() {
@@ -86,11 +103,27 @@ var WireframeRenderer = kity.createClass('WireframeRenderer', {
         this.wireframe
             .setPosition(box.x, box.y)
             .setSize(box.width, box.height);
+        var pin = node.getVertexIn();
+        var pout = node.getVertexOut();
+        var vin = node.getLayoutVectorIn().normalize(30);
+        var vout = node.getLayoutVectorOut().normalize(30);
+        this.vectorIn.setPathData(['M', pin.offset(vin.reverse()), 'L', pin]);
+        this.vectorOut.setPathData(['M', pout, 'l', vout]);
     }
 });
 
 KityMinder.registerModule('OutlineModule', function() {
     return {
+        events: (!wireframeOption ? null : {
+            'ready': function() {
+                this.getPaper().addResource(marker);
+            },
+            'layoutallfinish': function() {
+                this.getRoot().traverse(function(node) {
+                    node.getRenderer('WireframeRenderer').update(null, node, node.getContentBox());
+                });
+            }
+        }),
         renderers: {
             outline: OutlineRenderer,
             outside: [ShadowRenderer, WireframeRenderer]

src/template/filetree.js

@@ -13,7 +13,7 @@ KityMinder.registerTemplate('filetree', {
         if (node.getData('layout')) return node.getData('layout');
         if (node.isRoot()) return 'bottom';
 
-        return 'filetree';
+        return 'filetree-down';
     },
 
     getConnect: function(node) {

src/template/fish-bone.js

+/**
+ * @fileOverview
+ *
+ * 默认模板 - 鱼骨头模板
+ *
+ * @author: techird
+ * @copyright: Baidu FEX, 2014
+ */
+
+KityMinder.registerTemplate('fish-bone', {
+
+    getLayout: function(node) {
+
+        if (node.getData('layout')) return node.getData('layout');
+
+        var level = node.getLevel();
+
+        // 根节点
+        if (level === 0) {
+            return 'fish-bone-master';
+        }
+
+        // 一级节点
+        if (level === 1) {
+            return 'fish-bone-slave';
+        }
+
+        return node.getLayoutPointPreview().y > 0 ? 'filetree-up': 'filetree-down';
+    },
+
+    getConnect: function(node) {
+        switch (node.getLevel()) {
+            case 1: return 'fish-bone-master';
+            case 2: return 'line';
+            default: return 'l';
+        }
+    }
+});
\ No newline at end of file

src/theme/fish.js

+KityMinder.registerTheme('fish', {
+    'background': '#3A4144 url(ui/theme/default/images/grid.png) repeat',
+
+    'root-color': '#430',
+    'root-background': '#e9df98',
+    'root-stroke': '#e9df98',
+    'root-font-size': 24,
+    'root-padding': [35, 35],
+    'root-margin': 30,
+    'root-radius': 100,
+    'root-space': 10,
+    'root-shadow': 'rgba(0, 0, 0, .25)',
+
+    'main-color': '#333',
+    'main-background': '#a4c5c0',
+    'main-stroke': '#a4c5c0',
+    'main-font-size': 16,
+    'main-padding': [6, 20],
+    'main-margin': [20, 20],
+    'main-radius': 5,
+    'main-space': 5,
+    'main-shadow': 'rgba(0, 0, 0, .25)',
+
+    'sub-color': 'black',
+    'sub-background': 'white',
+    'sub-stroke': 'white',
+    'sub-font-size': 12,
+    'sub-padding': [5, 10],
+    'sub-margin': [10],
+    'sub-radius': 5,
+    'sub-space': 5,
+
+    'connect-color': 'white',
+    'connect-width': 3,
+    'main-connect-width': 3,
+    'connect-radius': 5,
+
+    'selected-background': 'rgb(254, 219, 0)',
+    'selected-stroke': 'rgb(254, 219, 0)',
+
+    'marquee-background': 'rgba(255,255,255,.3)',
+    'marquee-stroke': 'white',
+
+    'drop-hint-color': 'yellow',
+    'drop-hint-width': 4,
+
+    'order-hint-area-color': 'rgba(0, 255, 0, .5)',
+    'order-hint-path-color': '#0f0',
+    'order-hint-path-width': 1,
+
+    'text-selection-color': 'rgb(27,171,255)',
+    'line-height':1.5
+});
\ No newline at end of file

src/theme/wire.js

+KityMinder.registerTheme('wire', {
+    'background': 'black',
+
+    'color': '#999',
+    'stroke': 'none',
+    'padding': 10,
+    'margin': 20,
+    'font-size': 14,
+
+    'connect-color': '#999',
+    'connect-width': 1,
+
+    'selected-background': '#999',
+    'selected-color': 'black',
+
+    'marquee-background': 'rgba(255,255,255,.3)',
+    'marquee-stroke': 'white',
+
+    'drop-hint-color': 'yellow',
+    'sub-drop-hint-width': 2,
+    'main-drop-hint-width': 4,
+    'root-drop-hint-width': 4,
+
+    'order-hint-area-color': 'rgba(0, 255, 0, .5)',
+    'order-hint-path-color': '#0f0',
+    'order-hint-path-width': 1,
+
+    'text-selection-color': 'rgb(27,171,255)',
+    'line-height':1.5
+});
\ No newline at end of file

ui/menu/share/share.js

@@ -20,10 +20,6 @@ KityMinder.registerUI('menu/share/share', function(minder) {
 
     var BACKEND_URL = 'http://naotu.baidu.com/share.php';
 
-    if (window.location.host == 'local.host') {
-        BACKEND_URL = 'http://naotu.baidu.com/share_debug.php'; // 测试环境
-    }
-
     var currentShare = null;
     var shareList = [];
 

ui/theme/default/css/_mainmenu.new.less

@@ -57,6 +57,10 @@
             background-position: -300px 0;
         }
         
+        &.fish-bone:after {
+            background-position: -400px 0;
+        }
+        
         &:hover {
             a {
                 color: @main-menu-theme-color;

ui/theme/default/css/_themepanel.less

@@ -60,6 +60,10 @@
     &.right .fui-icon {
         background-position: -150px 0;
     }
+    
+    &.fish-bone .fui-icon {
+        background-position: -200px 0;
+    }
 }
 
 .fui-button.theme {