stash

import.js

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

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,27 @@ 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) {
                 return !child.hasLayoutOffset();
-            }));
+            }), round);
         }
 
         // 第一轮布局
-        layoutNode(this.getRoot());
+        layoutNode(this.getRoot(), 1);
 
         // 第二轮布局
-        layoutNode(this.getRoot());
+        layoutNode(this.getRoot(), 2);
 
         duration = duration ? 300 : 0;
 
@@ -308,7 +308,7 @@ kity.extendClass(Minder, {
         }
 
         function apply(node, pMatrix) {
-            var matrix = node.getLayoutTransform().merge(pMatrix);
+            var matrix = node.getLayoutTransform().merge(new kity.Matrix(1, 0, 0, 1, pMatrix.m.e, pMatrix.m.f));
             var lastMatrix = node.getGlobalLayoutTransform() || new kity.Matrix();
 
             var offset = node.getLayoutOffset();

src/layout/filetree.js

@@ -6,8 +6,10 @@ KityMinder.registerLayout('filetree', kity.createClass({
         var pBox = parent.getContentBox();
         var indent = 20;
 
+        var vectorIn = parent.getLayoutVectorIn();
+
         parent.setVertexOut(new kity.Point(pBox.left + indent, pBox.bottom));
-        parent.setLayoutVectorOut(new kity.Vector(0, 1));
+        parent.setLayoutVectorOut(new kity.Vector(0, vectorIn.y > 0 ? 1 : -1));
 
         if (!children.length) return;
 
@@ -26,10 +28,19 @@ KityMinder.registerLayout('filetree', kity.createClass({
         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');
+
+        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');
+        }
 
         this.move(children, xAdjust, yAdjust);
 

src/layout/fish-bone-master.js

@@ -35,7 +35,7 @@ KityMinder.registerLayout('fish-bone-master', kity.createClass('FishBoneMasterLa
             if (index % 2) {
                 downPart.push(child);
                 child.setVertexIn(new kity.Point(cBox.left, cBox.top));
-                child.setLayoutVectorIn(new kity.Vector(cMarginLeft, cMarginTop));
+                child.setLayoutVectorIn(new kity.Vector(1, 1));
             }
             else {
                 upPart.push(child);
@@ -55,5 +55,15 @@ KityMinder.registerLayout('fish-bone-master', kity.createClass('FishBoneMasterLa
         this.move(upPart, xAdjust, -cBox.bottom - cMarginBottom);
         this.move(downPart, xAdjust + cMarginLeft, -cBox.top + cMarginTop);
 
+        // 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 pBox = parent.getContentBox();
+        parent.setLayoutVectorOut(parent.getLayoutVectorIn());
+
+        var child = children[0];
+        if (!child) return;
+
+        children.forEach(function(child, index) {
+            child.setLayoutTransform(new kity.Matrix());
+            child.setLayoutVectorIn(parent.getLayoutVectorOut());
+        });
+
+        this.stack(children, 'y');
+        this.align(children, 'left');
+
+        var cBox = child.getContentBox();
+        var xAdjust = 0, yAdjust = 0;
+        
+        xAdjust += cBox.left;
+
+        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().getMatrix();
+                layout.move([child], abs(m.f), 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('rgb(0, 220, 255)'));
+
 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.Line()
+            .stroke('rgb(0, 220, 255)');
+        var vectorOut = this.vectorOut = new kity.Line()
+            .stroke('rgb(0, 220, 255)');
+
+        vectorIn.setMarker(marker, 'end');
+        vectorOut.setMarker(marker, 'end');
+
+        return wireframe.addShapes([oxy, box, vectorIn]);
     },
 
     shouldRender: function() {
@@ -86,11 +103,25 @@ 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);
     }
 });
 
 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/fish-bone.js

@@ -22,14 +22,17 @@ KityMinder.registerTemplate('fish-bone', {
 
         // 一级节点
         if (level === 1) {
-            return 'filetree';
+            return 'fish-bone-slave';
         }
 
-        return node.parent.getLayout();
+        return 'right';
     },
 
     getConnect: function(node) {
-        if (node.getLevel() == 1) return 'fish-bone-master';
-        return 'under';
+        switch (node.getLevel()) {
+            case 1: return 'fish-bone-master';
+            case 2: return 'line';
+            default: return 'under';
+        }
     }
 });
\ No newline at end of file