fish-bone layout

import.js

@@ -75,6 +75,8 @@
         { 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' },

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/core/layout.js

@@ -250,9 +250,10 @@ kity.extendClass(Minder, {
             }
 
             var layout = node.getLayoutInstance();
-            layout.doLayout(node, node.getChildren().filter(function(child) {
+            var childrenInFlow = node.getChildren().filter(function(child) {
                 return !child.hasLayoutOffset();
-            }), round);
+            });
+            layout.doLayout(node, childrenInFlow, round);
         }
 
         // 第一轮布局
@@ -308,7 +309,7 @@ kity.extendClass(Minder, {
         }
 
         function apply(node, pMatrix) {
-            var matrix = node.getLayoutTransform().merge(new kity.Matrix(1, 0, 0, 1, pMatrix.m.e, pMatrix.m.f));
+            var matrix = node.getLayoutTransform().merge(pMatrix);
             var lastMatrix = node.getGlobalLayoutTransform() || new kity.Matrix();
 
             var offset = node.getLayoutOffset();

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;
+[-1, 1].forEach(function (dir) {
+    var name = 'filetree-' + (dir > 0 ? 'down' : 'up');
 
-        var vectorIn = parent.getLayoutVectorIn();
+    KityMinder.registerLayout(name, kity.createClass({
+        base: Layout,
 
-        parent.setVertexOut(new kity.Point(pBox.left + indent, pBox.bottom));
-        parent.setLayoutVectorOut(new kity.Vector(0, vectorIn.y > 0 ? 1 : -1));
+        doLayout: function(parent, children, round) {
+            var pBox = parent.getContentBox();
+            var indent = 20;
 
-        if (!children.length) return;
+            parent.setVertexOut(new kity.Point(pBox.left + indent, dir > 0 ? pBox.bottom : pBox.top));
+            parent.setLayoutVectorOut(new kity.Vector(0, dir));
 
-        children.forEach(function(child) {
-            var cbox = child.getContentBox();
-            child.setLayoutTransform(new kity.Matrix());
+            if (!children.length) return;
 
-            child.setVertexIn(new kity.Point(cbox.left, cbox.cy));
-            child.setLayoutVectorIn(new kity.Vector(1, 0));
-        });
+            children.forEach(function(child) {
+                var cbox = child.getContentBox();
+                child.setLayoutTransform(new kity.Matrix());
 
-        this.align(children, 'left');
-        this.stack(children, 'y');
+                child.setVertexIn(new kity.Point(cbox.left, cbox.cy));
+                child.setLayoutVectorIn(new kity.Vector(1, 0));
+            });
 
-        var xAdjust = 0;
-        xAdjust += pBox.left;
-        xAdjust += indent;
-        xAdjust += children[0].getStyle('margin-left');
+            this.align(children, 'left');
+            this.stack(children, 'y');
 
-        var yAdjust = 0;
+            var xAdjust = 0;
+            xAdjust += pBox.left;
+            xAdjust += indent;
+            xAdjust += children[0].getStyle('margin-left');
 
-        if (vectorIn.y > 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');
+            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({
+                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;
         }
+    }));
 
-        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;
-    }
-}));
\ No newline at end of file
+});
\ No newline at end of file

src/layout/fish-bone-master.js

@@ -10,7 +10,8 @@
 KityMinder.registerLayout('fish-bone-master', kity.createClass('FishBoneMasterLayout', {
     base: Layout,
 
-    doLayout: function(parent, children) {
+    doLayout: function(parent, children, round) {
+
         var upPart = [],
             downPart = [];
 
@@ -52,8 +53,11 @@ KityMinder.registerLayout('fish-bone-master', kity.createClass('FishBoneMasterLa
         this.align(downPart, 'top');
 
         var xAdjust = pBox.right + pMarginRight + cMarginLeft;
-        this.move(upPart, xAdjust, -cBox.bottom - cMarginBottom);
-        this.move(downPart, xAdjust + cMarginLeft, -cBox.top + cMarginTop);
+        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();

src/layout/fish-bone-slave.js

@@ -12,27 +12,36 @@ KityMinder.registerLayout('fish-bone-slave', kity.createClass('FishBoneSlaveLayo
     base: Layout,
 
     doLayout: function (parent, children, round) {
+
         var layout = this;
         var abs = Math.abs;
+        var GOLD_CUT = 1 - 0.618;
 
         var pBox = parent.getContentBox();
-        parent.setLayoutVectorOut(parent.getLayoutVectorIn());
+        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(parent.getLayoutVectorOut());
+            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 cBox = child.getContentBox();
         var xAdjust = 0, yAdjust = 0;
         
-        xAdjust += cBox.left;
+        xAdjust += pout.x;
 
         if (parent.getLayoutVectorOut().y < 0) {
             yAdjust -= this.getTreeBox(children).bottom;
@@ -49,8 +58,10 @@ KityMinder.registerLayout('fish-bone-slave', kity.createClass('FishBoneSlaveLayo
 
         if (round == 2) {
             children.forEach(function(child) {
-                var m = child.getLayoutTransform().getMatrix();
-                layout.move([child], abs(m.f), 0);
+                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);
             });
         }
     }

src/module/outline.js

@@ -69,7 +69,7 @@ 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('rgb(0, 220, 255)'));
+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', {
@@ -84,15 +84,15 @@ var WireframeRenderer = kity.createClass('WireframeRenderer', {
         var box = this.wireframe = new kity.Rect()
             .stroke('lightgreen');
 
-        var vectorIn = this.vectorIn = new kity.Line()
-            .stroke('rgb(0, 220, 255)');
-        var vectorOut = this.vectorOut = new kity.Line()
-            .stroke('rgb(0, 220, 255)');
+        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]);
+        return wireframe.addShapes([oxy, box, vectorIn, vectorOut]);
     },
 
     shouldRender: function() {
@@ -103,10 +103,12 @@ var WireframeRenderer = kity.createClass('WireframeRenderer', {
         this.wireframe
             .setPosition(box.x, box.y)
             .setSize(box.width, box.height);
-        var pin = node.getLayoutVectorIn().normalize(50);
-        var pout = node.getLayoutVectorOut().normalize(50);
-        this.vectorIn.setPoint1(-pin.x, -pin.y);
-        this.vectorOut.setPoint2(pout.x, pout.y);
+        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]);
     }
 });
 

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

@@ -25,14 +25,14 @@ KityMinder.registerTemplate('fish-bone', {
             return 'fish-bone-slave';
         }
 
-        return 'right';
+        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 'under';
+            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 {