Skip to content

K
kityminder-core
Commit ac919779 authored by Akikonata's avatar Akikonata
Browse files
Options

修改了layout相关的字段，样式切换的时候统一清空“layout字段”

parent 14fba533
Show whitespace changes
Inline Side-by-side
Showing with 684 additions and 140 deletions
src/module/layout.default.js
View file @ ac919779
......@@ -154,10 +154,11 @@ KityMinder.registerModule( "LayoutDefault", function () {
this._node = node;
var container = node.getRenderContainer();
container.addShapes( [ rect, txt ] );
node.setData( "shape", this );
var Layout = node.getData( "layout" );
Layout.shape = this;
var ND = JSON.parse( JSON.stringify( nodeDefautStyle ) );
node.setData( "style", Utils.extend( ND, node.getData( "style" ) ) );
var _style = node.getData( "style" );
Layout.style = Utils.extend( ND, Layout.style );
var _style = Layout.style;
txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
var _txtHeight = txt.getHeight();
txt.translate( _style.padding[ 3 ], _txtHeight + _style.padding[ 0 ] );
......@@ -167,7 +168,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
var node = this._node;
var txt = this._txt;
var rect = this._rect;
var _style = node.getData( "style" );
var _style = node.getData( "layout" ).style;
txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
var _txtHeight = txt.getHeight();
var _rectWidth = _style.padding[ 1 ] + _style.padding[ 3 ] + txt.getWidth();
......@@ -184,18 +185,19 @@ KityMinder.registerModule( "LayoutDefault", function () {
var root = this.getRoot();
//更新连线
var updateConnect = function ( minder, node, action ) {
var _style = node.getData( "style" );
var Layout = node.getData( "layout" );
var _style = Layout.style;
if ( !node.getParent() ) return false;
var start = node.getParent().getRenderContainer();
var end = node.getRenderContainer();
var _connect = node.getData( "connect" );
var _connect = Layout.connect;
if ( action === "remove" ) {
_connect.remove();
} else {
if ( _connect ) _connect.updateConnection();
else {
_connect = new ConnectBezier( start, end );
node.setData( "connect", _connect );
Layout.connect = _connect;
minder.getRenderContainer().addShape( _connect );
_connect.stroke( _style.stroke );
}
......@@ -215,7 +217,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
//绘制node
var drawNode = function ( node ) {
var container = node.getRenderContainer();
var shape = node.getData( "shape" );
var shape = node.getData( "layout" ).shape;
if ( !shape ) new MinderNodeShape( node );
else shape.update();
updateConnect( minder, node );
......@@ -227,34 +229,41 @@ KityMinder.registerModule( "LayoutDefault", function () {
if ( !parent ) {
return effectSet;
}
var _style = node.getData( "style" );
var Layout = node.getData( "layout" );
var _style = Layout.style;
var marginTop = _style.margin[ 0 ],
marginBottom = _style.margin[ 2 ];
var appendside = node.getData( "appendside" );
var branchheight = node.getData( "branchheight" ) || node.getRenderContainer().getHeight() + marginTop + marginBottom;
var appendside = Layout.appendside;
var branchheight = Layout.branchheight || node.getRenderContainer().getHeight() + marginTop + marginBottom;
var countY = function ( node, appendside ) {
var centerY = node.getData( "y" );
var nodeBranchHeight = node.getData( appendside + "Height" ) || node.getData( "branchheight" );
var nodeChildren = node.getData( appendside + "List" ) || node.getChildren();
var nodeLayout = node.getData( "layout" );
var centerY = nodeLayout.y;
var nodeBranchHeight = nodeLayout[ appendside + "Height" ] || nodeLayout.branchheight;
var nodeChildren = nodeLayout[ appendside + "List" ] || node.getChildren();
var sY = centerY - nodeBranchHeight / 2;
if ( nodeChildren.length === 1 ) {
nodeChildren[ 0 ].setData( "y", centerY );
var childrenLayout = nodeChildren[ 0 ].getData( "layout" );
childrenLayout.y = centerY;
} else {
for ( var i = 0; i < nodeChildren.length; i++ ) {
var childBranchHeight = nodeChildren[ i ].getData( "branchheight" );
nodeChildren[ i ].setData( "y", sY + marginTop + childBranchHeight / 2 );
var childrenLayout1 = nodeChildren[ i ].getData( "layout" );
var childBranchHeight = childrenLayout1.branchheight;
childrenLayout1.y = sY + marginTop + childBranchHeight / 2;
sY += childBranchHeight;
}
}
return nodeChildren;
};
node.setData( "branchheight", branchheight );
var siblings = parent.getData( appendside + "List" ) || parent.getChildren();
Layout.branchheight = branchheight;
var parentLayout = parent.getData( "layout" );
var siblings = parentLayout[ appendside + "List" ] || parent.getChildren();
var getChildHeight = function ( node, appendside ) {
var sum = 0;
var children = node.getData( appendside + "List" ) || node.getChildren();
var nodeLayout = node.getData( "layout" );
var children = nodeLayout[ appendside + "List" ] || node.getChildren();
for ( var i = 0; i < children.length; i++ ) {
sum += children[ i ].getData( "branchheight" );
sum += children[ i ].getData( "layout" ).branchheight;
}
return sum;
};
......@@ -267,11 +276,12 @@ KityMinder.registerModule( "LayoutDefault", function () {
var minH = prt.getRenderContainer().getHeight() + marginTop + marginBottom;
var childH = getChildHeight( prt, appendside );
var branchH = ( minH > childH ? minH : childH );
var prtLayout = prt.getData( "layout" );
if ( prt.getParent() ) {
prt.setData( "branchheight", branchH );
prtLayout.branchheight = branchH;
} else {
prt.setData( appendside + "Height", branchH );
prtLayout[ appendside + "Height" ] = branchH;
}
prt = prt.getParent();
} while ( prt );
......@@ -295,21 +305,23 @@ KityMinder.registerModule( "LayoutDefault", function () {
var selfWidth = node.getRenderContainer().getWidth();
var countX = function ( n ) {
var nLayout = n.getData( "layout" );
var prt = n.getParent();
var parentX = prt.getData( "x" );
var prtLayout = prt.getData( "layout" );
var parentX = prtLayout.x;
var parentWidth = prt.getRenderContainer().getWidth();
var parentAlign = prt.getData( "align" );
var selfAppendSide = n.getData( "appendside" );
var parentAlign = prtLayout.align;
var selfAppendSide = nLayout.appendside;
if ( parentAlign === "center" ) parentWidth = parentWidth / 2;
var _style = node.getData( "style" );
var _style = nLayout.style;
var marginLeft = _style.margin[ 3 ];
var marginRight = _style.margin[ 1 ];
switch ( selfAppendSide ) {
case "left":
n.setData( "x", parentX - parentWidth - marginLeft - marginRight );
nLayout.x = parentX - parentWidth - marginLeft - marginRight;
break;
case "right":
n.setData( "x", parentX + parentWidth + marginLeft + marginRight );
nLayout.x = parentX + parentWidth + marginLeft + marginRight;
break;
default:
break;
......@@ -333,19 +345,20 @@ KityMinder.registerModule( "LayoutDefault", function () {
//调整node的位置
var translateNode = function ( node ) {
var Layout = node.getData( "layout" );
var nodeShape = node.getRenderContainer();
var align = node.getData( "align" );
var align = Layout.align;
var _rectHeight = nodeShape.getHeight();
var _rectWidth = nodeShape.getWidth();
switch ( align ) {
case "right":
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth, node.getData( "y" ) - _rectHeight / 2 ) );
nodeShape.setTransform( new kity.Matrix().translate( Layout.x - _rectWidth, Layout.y - _rectHeight / 2 ) );
break;
case "center":
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth / 2, node.getData( "y" ) - _rectHeight / 2 ) );
nodeShape.setTransform( new kity.Matrix().translate( Layout.x - _rectWidth / 2, Layout.y - _rectHeight / 2 ) );
break;
default:
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ), node.getData( "y" ) - _rectHeight / 2 ) );
nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y - _rectHeight / 2 ) );
break;
}
updateConnect( minder, node );
......@@ -357,7 +370,8 @@ KityMinder.registerModule( "LayoutDefault", function () {
initStyle: function () {
var _root = this.getRoot();
var minder = this;
_root.setData( "style", {
var Layout = _root.getData( "layout" );
Layout.style = {
radius: 10,
fill: "orange",
stroke: "orange",
......@@ -365,23 +379,21 @@ KityMinder.registerModule( "LayoutDefault", function () {
padding: [ 10, 10, 10, 10 ],
fontSize: 30,
margin: [ 0, 0, 0, 0 ]
} );
_root.setData( "x", minderWidth / 2 );
_root.setData( "y", minderHeight / 2 );
_root.setData( "align", "center" );
};
Layout.x = minderWidth / 2;
Layout.y = minderHeight / 2;
Layout.align = "center";
if ( !_root.getData( "text" ) ) _root.setData( "text", "I am the root" );
_root.setData( "appendside", "right" );
_root.setData( "leftList", [] );
_root.setData( "rightList", [] );
Layout.appendside = "right";
Layout.leftList = [];
Layout.rightList = [];
var _rootRenderContainer = _root.getRenderContainer();
_root.setData( "leftHeight", _rootRenderContainer.getHeight() );
_root.setData( "rightHeight", _rootRenderContainer.getHeight() );
var rootHeight = _rootRenderContainer.getHeight();
Layout.leftHeight = Layout.rightHeight = rootHeight;
drawNode( _root );
translateNode( _root );
//如果是从其他style切过来的，需要重新布局
var _buffer = _root.getChildren();
while ( _buffer.length !== 0 ) {
......@@ -392,6 +404,9 @@ KityMinder.registerModule( "LayoutDefault", function () {
}
},
appendChildNode: function ( parent, node, index ) {
if ( !node.getData( "layout" ) ) node.setData( "layout", {} );
var Layout = node.getData( "layout" );
var parentLayout = parent.getData( "layout" );
var minder = this;
if ( parent.getChildren().indexOf( node ) === -1 ) {
if ( !index ) parent.appendChild( node );
......@@ -399,28 +414,28 @@ KityMinder.registerModule( "LayoutDefault", function () {
minder.handelNodeInsert( node );
}
if ( parent === root ) {
var leftList = parent.getData( "leftList" );
var rightList = parent.getData( "rightList" );
var leftList = parentLayout.leftList;
var rightList = parentLayout.rightList;
var sibling = parent.getChildren();
var aside = node.getData( "appendside" );
var aside = Layout.appendside;
if ( !aside ) {
if ( sibling.length > 2 && rightList.length > leftList.length ) {
aside = "left";
} else {
aside = "right";
}
node.setData( "appendside", aside );
Layout.appendside = aside;
}
parent.setData( "appendside", aside );
parent.getData( aside + "List" ).push( node );
parentLayout.appendside = aside;
parentLayout[ aside + "List" ].push( node );
}
var appendside = parent.getData( "appendside" );
node.setData( "appendside", appendside );
var appendside = parentLayout.appendside;
Layout.appendside = appendside;
if ( appendside === "left" ) {
node.setData( "align", "right" );
Layout.align = "right";
} else {
node.setData( "align", "left" );
Layout.align = "left";
}
drawNode( node );
var set1 = updateLayoutVertical( node, parent, "append" );
......@@ -430,11 +445,19 @@ KityMinder.registerModule( "LayoutDefault", function () {
translateNode( set[ i ] );
}
},
updateLayout: function ( node ) {
var prt = node;
prt.preTraverse( function ( n ) {
} );
},
appendSiblingNode: function ( sibling, node ) {
var siblingLayout = sibling.getData( "layout" );
var Layout = node.getData( "layout" );
var parent = sibling.getParent();
var index = sibling.getIndex() + 1;
var appendside = sibling.getData( "appendside" );
node.setData( "appendside", appendside );
var appendside = siblingLayout.appendside;
Layout.appendside = appendside;
this.appendChildNode( parent, node, index );
},
removeNode: function ( nodes ) {
......@@ -444,6 +467,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
var parent = nodes[ i ].getParent();
if ( parent ) {
var _buffer = [ nodes[ i ] ];
var parentLayout = parent.getData( "layout" );
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer[ 0 ].getRenderContainer().remove();
......@@ -451,8 +475,9 @@ KityMinder.registerModule( "LayoutDefault", function () {
_buffer.shift();
}
if ( parent === root ) {
var appendside = nodes[ i ].getData( "appendside" );
var sideList = parent.getData( appendside + "List" );
var Layout = nodes[ i ].getData( "layout" );
var appendside = Layout.appendside;
var sideList = parentLayout[ appendside + "List" ];
var idx = sideList.indexOf( nodes[ i ] );
sideList.splice( idx, 1 );
}
......
src/module/layout.green.backup.js 0 → 100644
View file @ ac919779
KityMinder.registerModule( "LayoutGreen", function () {
var _target = this.getRenderTarget();
var minderWidth = _target.clientWidth;
var minderHeight = _target.clientHeight;
var minder = this;
var ConnectBezier = kity.createClass( "ConnectBezier", ( function () {
function mid( a, b ) {
return ( a + b ) / 2;
}
function getSnapPoints( snaper ) {
if ( snaper.getSnapPoints ) {
return snaper.getSnapPoints();
}
var box = snaper.getRenderBox();
var x1 = box.x,
x2 = box.x + box.width,
y1 = box.y,
y2 = box.y + box.height,
xm = mid( x1, x2 ),
ym = mid( y1, y2 );
return [ {
x: xm,
y: y1,
type: 'top'
}, // top
{
x: x2,
y: ym,
type: 'right'
}, // right
{
x: xm,
y: y2,
type: 'bottom'
}, // bottom
{
x: x1,
y: ym,
type: 'left'
} // left
];
}
var DIR_NORMALS = {
top: new kity.Vector( 0, -1 ),
left: new kity.Vector( -1, 0 ),
bottom: new kity.Vector( 0, 1 ),
right: new kity.Vector( 1, 0 )
};
function fillNormal( snapPoint ) {
if ( snapPoint.normal ) {
return;
}
snapPoint.normal = DIR_NORMALS[ snapPoint.type ] || DIR_NORMALS.left;
}
return {
base: kity.Bezier,
constructor: function ( start, end ) {
this.callBase();
this.setStartSnaper( start );
this.setEndSnaper( end );
this.init();
this.updateConnection();
},
init: function () {
this.addPoint( this.startBesierPoint = new kity.BezierPoint() );
this.addPoint( this.endBesierPoint = new kity.BezierPoint() );
},
bindSnaper: function ( snaper ) {
var me = this;
snaper.on( 'shapeupdate', function () {
me.updateConnection();
} );
},
setStartSnaper: function ( snaper ) {
this.start = snaper;
this.bindSnaper( snaper );
},
setEndSnaper: function ( snaper ) {
this.end = snaper;
this.bindSnaper( snaper );
},
isReady: function () {
return !!( this.start && this.end );
},
calcEndPoints: function () {
var startEnds = getSnapPoints( this.start ),
endEnds = getSnapPoints( this.end );
var nearStart, nearEnd, minDistance = Number.MAX_VALUE;
var i, j, startEnd, endEnd, distance;
// 寻找最近的粘附点
// 暴力解法：可优化但不必要，因为点集不会很大
for ( i = 0; i < startEnds.length; i++ ) {
for ( j = 0; j < endEnds.length; j++ ) {
distance = Math.abs( startEnds[ i ].x - endEnds[ j ].x ) + Math.abs( startEnds[ i ].y - endEnds[ j ].y ) * 0.5; //Vector.fromPoints( startEnds[i], endEnds[j] ).length();
if ( distance < minDistance ) {
minDistance = distance;
nearStart = startEnds[ i ];
nearEnd = endEnds[ j ];
}
}
}
return {
start: nearStart,
end: nearEnd
};
},
updateConnection: function () {
if ( !this.isReady() ) {
return false;
}
var endPoints = this.calcEndPoints(),
startEnd = endPoints.start,
endEnd = endPoints.end;
fillNormal( startEnd );
fillNormal( endEnd );
var pointVector = kity.Vector.fromPoints( startEnd, endEnd );
var forward = kity.Vector.projection( pointVector, startEnd.normal );
var backward = kity.Vector.projection( kity.Vector.reverse( pointVector ), endEnd.normal );
forward = kity.Vector.multipy( forward, 0.5 );
forward = kity.Vector.add( startEnd, forward );
backward = kity.Vector.multipy( backward, 0.5 );
backward = kity.Vector.add( endEnd, backward );
this.startBesierPoint.setVertex( startEnd.x, startEnd.y );
this.startBesierPoint.setForward( forward.x, forward.y );
this.endBesierPoint.setVertex( endEnd.x, endEnd.y );
this.endBesierPoint.setBackward( backward.x, backward.y );
}
};
} )() );
var nodeDefautStyle = {
radius: 10,
fill: "beige",
stroke: "orange",
strokeWidth: 1,
color: "black",
padding: [ 5, 10, 5, 10 ],
fontSize: 20,
margin: [ 50, 5, 0, 5 ]
};
var MinderNodeShape = kity.createClass( "MinderNodeShape", ( function () {
return {
constructor: function ( node ) {
var txt = this._txt = new kity.Text();
var rect = this._rect = new kity.Rect();
this._node = node;
var container = node.getRenderContainer();
container.addShapes( [ rect, txt ] );
node.setData( "shape", this );
var ND = JSON.parse( JSON.stringify( nodeDefautStyle ) );
node.setData( "style", Utils.extend( ND, node.getData( "style" ) ) );
var _style = node.getData( "style" );
txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
var _txtHeight = txt.getHeight();
txt.translate( _style.padding[ 3 ], _txtHeight + _style.padding[ 0 ] );
this.update();
},
update: function () {
var node = this._node;
var txt = this._txt;
var rect = this._rect;
var _style = node.getData( "style" );
txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
var _txtHeight = txt.getHeight();
var _rectWidth = _style.padding[ 1 ] + _style.padding[ 3 ] + txt.getWidth();
var _rectHeight = _style.padding[ 0 ] + _style.padding[ 2 ] + _txtHeight;
rect.fill( _style.fill ).stroke( _style.stroke ).setRadius( _style.radius ).setWidth( _rectWidth ).setHeight( _rectHeight );
if ( node.getData( "highlight" ) ) {
rect.stroke( new kity.Pen( "white", 3 ) );
} else {
rect.stroke( new kity.Pen( _style.stroke, _style.strokeWidth ) );
}
}
};
} )() );
var root = this.getRoot();
//更新连线
var updateConnect = function ( minder, node, action ) {
var _style = node.getData( "style" );
if ( !node.getParent() ) return false;
var start = node.getParent().getRenderContainer();
var end = node.getRenderContainer();
var _connect = node.getData( "connect" );
if ( action === "remove" ) {
_connect.remove();
} else {
if ( _connect ) _connect.updateConnection();
else {
_connect = new ConnectBezier( start, end );
node.setData( "connect", _connect );
minder.getRenderContainer().addShape( _connect );
_connect.stroke( _style.stroke );
}
}
};
//求并集
var uSet = function ( a, b ) {
for ( var i = 0; i < a.length; i++ ) {
var idx = b.indexOf( a[ i ] );
if ( idx !== -1 ) {
b.splice( idx, 1 );
}
}
return a.concat( b );
};
//流程：绘制->计算Y坐标->计算X坐标->translate
//绘制node
var drawNode = function ( node ) {
var container = node.getRenderContainer();
var shape = node.getData( "shape" );
if ( !shape ) new MinderNodeShape( node );
else shape.update();
updateConnect( minder, node );
};
//以某个节点为seed对整体高度进行更改计算
var updateLayoutVertical = function ( node ) {
var parent = node.getParent();
var effectSet = [];
var parentHeight = parent.getRenderContainer().getHeight();
var _style = node.getData( "style" );
var parentY = parent.getData( "y" );
var marginTop = _style.margin[ 0 ];
var marginBottom = _style.margin[ 2 ];
node.setData( "y", parentY + parentHeight / 2 + marginTop + marginBottom );
effectSet.push( node );
return effectSet;
};
//以某个节点为seed对水平方向进行调整
var updateLayoutHorizon = function ( node, parent ) {
var effectSet = [];
var _style = node.getData( "style" );
var marginLeft = _style.margin[ 3 ];
var marginRight = _style.margin[ 1 ];
var nodeWidth = node.getRenderContainer().getWidth();
node.setData( "branchwidth", nodeWidth + marginLeft + marginRight );
var prt = parent;
while ( prt ) {
var children = prt.getChildren();
var parentWidth = prt.getRenderContainer().getWidth();
var sum = 0;
for ( var i = 0; i < children.length; i++ ) {
sum += children[ i ].getData( "branchwidth" );
}
prt.setData( "branchwidth", ( sum > parentWidth ? sum : parentWidth ) );
prt.setData( "childrenwidth", sum );
prt = prt.getParent();
}
var _buffer = [ root ];
while ( _buffer.length !== 0 ) {
var childrenC = _buffer[ 0 ].getChildren();
var parentX = _buffer[ 0 ].getData( "x" );
var parentChildrenWidth = _buffer[ 0 ].getData( "childrenwidth" );
var sX = parentX - parentChildrenWidth / 2;
for ( var j = 0; j < childrenC.length; j++ ) {
childrenC[ j ].setData( "x", sX + childrenC[ j ].getData( "branchwidth" ) / 2 );
sX += ( childrenC[ j ].getData( "branchwidth" ) + marginLeft + marginRight );
}
_buffer = _buffer.concat( childrenC );
effectSet.push( _buffer[ 0 ] );
_buffer.shift();
}
return effectSet;
};
//调整node的位置
var translateNode = function ( node ) {
var _style = node.getData( "style" );
var nodeShape = node.getRenderContainer();
var align = node.getData( "align" );
var _rectHeight = nodeShape.getHeight();
var _rectWidth = nodeShape.getWidth();
switch ( align ) {
case "right":
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth, node.getData( "y" ) - _rectHeight / 2 ) );
break;
case "center":
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth / 2, node.getData( "y" ) - _rectHeight / 2 ) );
break;
default:
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ), node.getData( "y" ) - _rectHeight / 2 ) );
break;
}
updateConnect( minder, node );
};
var _style = {
renderNode: function ( node ) {
drawNode( node );
},
initStyle: function () {
var _root = this.getRoot();
var minder = this;
_root.setData( "style", {
radius: 20,
fill: "darkgreen",
stroke: "orange",
color: "black",
padding: [ 10, 10, 10, 10 ],
fontSize: 30,
margin: [ 0, 5, 0, 5 ]
} );
_root.setData( "x", minderWidth / 2 );
_root.setData( "y", 50 );
_root.setData( "align", "center" );
_root.setData( "text", "I am the root" );
var _rootRenderContainer = _root.getRenderContainer();
_root.setData( "leftHeight", _rootRenderContainer.getHeight() );
_root.setData( "rightHeight", _rootRenderContainer.getHeight() );
drawNode( _root );
translateNode( _root );
//如果是从其他style切过来的，需要重新布局
var _buffer = _root.getChildren();
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
var prt = _buffer[ 0 ].getParent();
this.appendChildNode( prt, _buffer[ 0 ] );
_buffer.shift();
}
},
appendChildNode: function ( parent, node, index ) {
var minder = this;
if ( parent.getChildren().indexOf( node ) === -1 ) {
if ( !index ) parent.appendChild( node );
else parent.insertChild( node, index );
minder.handelNodeInsert( node );
}
drawNode( node );
node.setData( "align", "center" );
//调整影响到的节点位置
var set1 = updateLayoutVertical( node );
var set2 = updateLayoutHorizon( node, parent );
var set = uSet( set1, set2 );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
}
},
appendSiblingNode: function ( sibling, node ) {
var parent = sibling.getParent();
var index = sibling.getIndex() + 1;
var appendside = sibling.getData( "appendside" );
node.setData( "appendside", appendside );
this.appendChildNode( parent, node, index );
},
removeNode: function ( nodes ) {
var root = this.getRoot();
var minder = this;
for ( var i = 0; i < nodes.length; i++ ) {
var parent = nodes[ i ].getParent();
if ( parent ) {
nodes[ i ].getRenderContainer().remove();
updateConnect( minder, nodes[ i ], "remove" );
parent.removeChild( nodes[ i ] );
}
}
},
updateLayout: function ( node ) {
}
};
this.addLayoutStyle( "green", _style );
return {};
} );
\ No newline at end of file
src/module/layout.green.js
View file @ ac919779
......@@ -138,13 +138,13 @@ KityMinder.registerModule( "LayoutGreen", function () {
} )() );
var nodeDefautStyle = {
radius: 10,
fill: "beige",
fill: "green",
stroke: "orange",
strokeWidth: 1,
color: "black",
padding: [ 5, 10, 5, 10 ],
fontSize: 20,
margin: [ 50, 5, 0, 5 ]
margin: [ 0, 10, 10, 50 ]
};
var MinderNodeShape = kity.createClass( "MinderNodeShape", ( function () {
return {
......@@ -154,10 +154,11 @@ KityMinder.registerModule( "LayoutGreen", function () {
this._node = node;
var container = node.getRenderContainer();
container.addShapes( [ rect, txt ] );
node.setData( "shape", this );
var Layout = node.getData( "layout" );
Layout.shape = this;
var ND = JSON.parse( JSON.stringify( nodeDefautStyle ) );
node.setData( "style", Utils.extend( ND, node.getData( "style" ) ) );
var _style = node.getData( "style" );
Layout.style = Utils.extend( ND, Layout.style );
var _style = Layout.style;
txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
var _txtHeight = txt.getHeight();
txt.translate( _style.padding[ 3 ], _txtHeight + _style.padding[ 0 ] );
......@@ -167,7 +168,7 @@ KityMinder.registerModule( "LayoutGreen", function () {
var node = this._node;
var txt = this._txt;
var rect = this._rect;
var _style = node.getData( "style" );
var _style = node.getData( "layout" ).style;
txt.setContent( node.getData( "text" ) || "新建节点" ).setSize( _style.fontSize ).fill( _style.color );
var _txtHeight = txt.getHeight();
var _rectWidth = _style.padding[ 1 ] + _style.padding[ 3 ] + txt.getWidth();
......@@ -184,18 +185,19 @@ KityMinder.registerModule( "LayoutGreen", function () {
var root = this.getRoot();
//更新连线
var updateConnect = function ( minder, node, action ) {
var _style = node.getData( "style" );
var Layout = node.getData( "layout" );
var _style = Layout.style;
if ( !node.getParent() ) return false;
var start = node.getParent().getRenderContainer();
var end = node.getRenderContainer();
var _connect = node.getData( "connect" );
var _connect = Layout.connect;
if ( action === "remove" ) {
_connect.remove();
} else {
if ( _connect ) _connect.updateConnection();
else {
_connect = new ConnectBezier( start, end );
node.setData( "connect", _connect );
Layout.connect = _connect;
minder.getRenderContainer().addShape( _connect );
_connect.stroke( _style.stroke );
}
......@@ -215,79 +217,148 @@ KityMinder.registerModule( "LayoutGreen", function () {
//绘制node
var drawNode = function ( node ) {
var container = node.getRenderContainer();
var shape = node.getData( "shape" );
var shape = node.getData( "layout" ).shape;
if ( !shape ) new MinderNodeShape( node );
else shape.update();
updateConnect( minder, node );
};
//以某个节点为seed对整体高度进行更改计算
var updateLayoutVertical = function ( node ) {
var parent = node.getParent();
var effectSet = [];
var parentHeight = parent.getRenderContainer().getHeight();
var _style = node.getData( "style" );
var parentY = parent.getData( "y" );
var marginTop = _style.margin[ 0 ];
var marginBottom = _style.margin[ 2 ];
node.setData( "y", parentY + parentHeight / 2 + marginTop + marginBottom );
effectSet.push( node );
var updateLayoutVertical = function ( node, parent, action ) {
var effectSet = [ node ]; //用于返回受影响的节点集
if ( !parent ) {
return effectSet;
}
var Layout = node.getData( "layout" );
var _style = Layout.style;
var marginTop = _style.margin[ 0 ],
marginBottom = _style.margin[ 2 ];
var appendside = Layout.appendside;
var branchheight = Layout.branchheight || node.getRenderContainer().getHeight() + marginTop + marginBottom;
var countY = function ( node, appendside ) {
var nodeLayout = node.getData( "layout" );
var centerY = nodeLayout.y;
var nodeBranchHeight = nodeLayout[ appendside + "Height" ] || nodeLayout.branchheight;
var nodeChildren = nodeLayout[ appendside + "List" ] || node.getChildren();
var sY = centerY - nodeBranchHeight / 2;
if ( nodeChildren.length === 1 ) {
var childrenLayout = nodeChildren[ 0 ].getData( "layout" );
childrenLayout.y = centerY;
} else {
for ( var i = 0; i < nodeChildren.length; i++ ) {
var childrenLayout1 = nodeChildren[ i ].getData( "layout" );
var childBranchHeight = childrenLayout1.branchheight;
childrenLayout1.y = sY + marginTop + childBranchHeight / 2;
sY += childBranchHeight;
}
}
return nodeChildren;
};
Layout.branchheight = branchheight;
//以某个节点为seed对水平方向进行调整
var updateLayoutHorizon = function ( node, parent ) {
var effectSet = [];
var _style = node.getData( "style" );
var marginLeft = _style.margin[ 3 ];
var marginRight = _style.margin[ 1 ];
var nodeWidth = node.getRenderContainer().getWidth();
node.setData( "branchwidth", nodeWidth + marginLeft + marginRight );
var prt = parent;
while ( prt ) {
var children = prt.getChildren();
var parentWidth = prt.getRenderContainer().getWidth();
var parentLayout = parent.getData( "layout" );
var siblings = parentLayout[ appendside + "List" ] || parent.getChildren();
var getChildHeight = function ( node, appendside ) {
var sum = 0;
var nodeLayout = node.getData( "layout" );
var children = nodeLayout[ appendside + "List" ] || node.getChildren();
for ( var i = 0; i < children.length; i++ ) {
sum += children[ i ].getData( "branchwidth" );
sum += children[ i ].getData( "layout" ).branchheight;
}
return sum;
};
//方案：
//增加节点时：1.节点和大于1
//删除节点时：1.剩余节点和大于等于1
//更新branchheight
var prt = parent;
do {
var minH = prt.getRenderContainer().getHeight() + marginTop + marginBottom;
var childH = getChildHeight( prt, appendside );
var branchH = ( minH > childH ? minH : childH );
var prtLayout = prt.getData( "layout" );
if ( prt.getParent() ) {
prtLayout.branchheight = branchH;
} else {
prtLayout[ appendside + "Height" ] = branchH;
}
prt.setData( "branchwidth", ( sum > parentWidth ? sum : parentWidth ) );
prt.setData( "childrenwidth", sum );
prt = prt.getParent();
} while ( prt );
//遍历
var effectRange = [ root ];
var _buffer = effectRange;
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( countY( _buffer[ 0 ], appendside ) );
effectSet.push( _buffer[ 0 ] );
_buffer.shift();
}
return effectSet;
};
//以某个节点为seed对水平方向进行调整(包括调整子树)
var updateLayoutHorizon = function ( node ) {
var effectSet = [ node ]; //返回受影响（即需要进行下一步translate的节点）
var parent = node.getParent();
var appendside = node.getData( "appendside" );
var selfWidth = node.getRenderContainer().getWidth();
var countX = function ( n ) {
var nLayout = n.getData( "layout" );
var prt = n.getParent();
var prtLayout = prt.getData( "layout" );
var parentX = prtLayout.x;
var parentWidth = prt.getRenderContainer().getWidth();
var parentAlign = prtLayout.align;
var selfAppendSide = nLayout.appendside;
if ( parentAlign === "center" ) parentWidth = parentWidth / 2;
var _style = nLayout.style;
var marginLeft = _style.margin[ 3 ];
var marginRight = _style.margin[ 1 ];
switch ( selfAppendSide ) {
case "left":
nLayout.x = parentX - parentWidth - marginLeft - marginRight;
break;
case "right":
nLayout.x = parentX + parentWidth + marginLeft + marginRight;
break;
default:
break;
}
};
//判断根据父节点位置定位还是自身已经带有位置属性
if ( parent ) {
countX( node );
}
var _buffer = [ root ];
//判断是否存在已绘制的孩子并对孩子位置进行调整(用于外部调用renderNode，如文本编时)
var _buffer = node.getChildren();
while ( _buffer.length !== 0 ) {
var childrenC = _buffer[ 0 ].getChildren();
var parentX = _buffer[ 0 ].getData( "x" );
var parentChildrenWidth = _buffer[ 0 ].getData( "childrenwidth" );
var sX = parentX - parentChildrenWidth / 2;
for ( var j = 0; j < childrenC.length; j++ ) {
childrenC[ j ].setData( "x", sX + childrenC[ j ].getData( "branchwidth" ) / 2 );
sX += ( childrenC[ j ].getData( "branchwidth" ) + marginLeft + marginRight );
console.log( childrenC[ j ].getData( "branchwidth" ) + marginLeft + marginRight );
}
_buffer = _buffer.concat( childrenC );
countX( _buffer[ 0 ] );
effectSet.push( _buffer[ 0 ] );
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer.shift();
}
return effectSet;
};
//调整node的位置
var translateNode = function ( node ) {
var _style = node.getData( "style" );
var Layout = node.getData( "layout" );
var nodeShape = node.getRenderContainer();
var align = node.getData( "align" );
var align = Layout.align;
var _rectHeight = nodeShape.getHeight();
var _rectWidth = nodeShape.getWidth();
switch ( align ) {
case "right":
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth, node.getData( "y" ) - _rectHeight / 2 ) );
nodeShape.setTransform( new kity.Matrix().translate( Layout.x - _rectWidth, Layout.y - _rectHeight / 2 ) );
break;
case "center":
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth / 2, node.getData( "y" ) - _rectHeight / 2 ) );
nodeShape.setTransform( new kity.Matrix().translate( Layout.x - _rectWidth / 2, Layout.y - _rectHeight / 2 ) );
break;
default:
nodeShape.setTransform( new kity.Matrix().translate( node.getData( "x" ), node.getData( "y" ) - _rectHeight / 2 ) );
nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y - _rectHeight / 2 ) );
break;
}
updateConnect( minder, node );
......@@ -299,30 +370,32 @@ KityMinder.registerModule( "LayoutGreen", function () {
initStyle: function () {
var _root = this.getRoot();
var minder = this;
_root.setData( "style", {
radius: 20,
fill: "darkgreen",
var Layout = _root.getData( "layout" );
Layout.style = {
radius: 10,
fill: "orange",
stroke: "orange",
color: "black",
padding: [ 10, 10, 10, 10 ],
fontSize: 30,
margin: [ 0, 5, 0, 5 ]
} );
_root.setData( "x", minderWidth / 2 );
_root.setData( "y", 50 );
_root.setData( "align", "center" );
_root.setData( "text", "I am the root" );
margin: [ 0, 0, 0, 0 ]
};
Layout.x = minderWidth / 2;
Layout.y = minderHeight / 2;
Layout.align = "center";
if ( !_root.getData( "text" ) ) _root.setData( "text", "I am the root" );
Layout.appendside = "right";
Layout.leftList = [];
Layout.rightList = [];
var _rootRenderContainer = _root.getRenderContainer();
_root.setData( "leftHeight", _rootRenderContainer.getHeight() );
_root.setData( "rightHeight", _rootRenderContainer.getHeight() );
var rootHeight = _rootRenderContainer.getHeight();
Layout.leftHeight = Layout.rightHeight = rootHeight;
drawNode( _root );
translateNode( _root );
//如果是从其他style切过来的，需要重新布局
var _buffer = _root.getChildren();
console.log( _buffer );
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
var prt = _buffer[ 0 ].getParent();
......@@ -331,28 +404,60 @@ KityMinder.registerModule( "LayoutGreen", function () {
}
},
appendChildNode: function ( parent, node, index ) {
if ( !node.getData( "layout" ) ) node.setData( "layout", {} );
var Layout = node.getData( "layout" );
var parentLayout = parent.getData( "layout" );
var minder = this;
if ( parent.getChildren().indexOf( node ) === -1 ) {
if ( !index ) parent.appendChild( node );
else parent.insertChild( node, index );
minder.handelNodeInsert( node );
}
if ( parent === root ) {
var leftList = parentLayout.leftList;
var rightList = parentLayout.rightList;
var sibling = parent.getChildren();
var aside = Layout.appendside;
if ( !aside ) {
if ( sibling.length > 2 && rightList.length > leftList.length ) {
aside = "left";
} else {
aside = "right";
}
Layout.appendside = aside;
}
parentLayout.appendside = aside;
parentLayout[ aside + "List" ].push( node );
}
var appendside = parentLayout.appendside;
Layout.appendside = appendside;
if ( appendside === "left" ) {
Layout.align = "right";
} else {
Layout.align = "left";
}
drawNode( node );
node.setData( "align", "center" );
//调整影响到的节点位置
var set1 = updateLayoutVertical( node );
var set2 = updateLayoutHorizon( node, parent );
var set1 = updateLayoutVertical( node, parent, "append" );
var set2 = updateLayoutHorizon( node );
var set = uSet( set1, set2 );
console.log( set );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
}
},
updateLayout: function ( node ) {
var prt = node;
prt.preTraverse( function ( n ) {
} );
},
appendSiblingNode: function ( sibling, node ) {
var siblingLayout = sibling.getData( "layout" );
var Layout = node.getData( "layout" );
var parent = sibling.getParent();
var index = sibling.getIndex() + 1;
var appendside = sibling.getData( "appendside" );
node.setData( "appendside", appendside );
var appendside = siblingLayout.appendside;
Layout.appendside = appendside;
this.appendChildNode( parent, node, index );
},
removeNode: function ( nodes ) {
......@@ -361,10 +466,28 @@ KityMinder.registerModule( "LayoutGreen", function () {
for ( var i = 0; i < nodes.length; i++ ) {
var parent = nodes[ i ].getParent();
if ( parent ) {
nodes[ i ].getRenderContainer().remove();
updateConnect( minder, nodes[ i ], "remove" );
var _buffer = [ nodes[ i ] ];
var parentLayout = parent.getData( "layout" );
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer[ 0 ].getRenderContainer().remove();
updateConnect( minder, _buffer[ 0 ], "remove" );
_buffer.shift();
}
if ( parent === root ) {
var Layout = nodes[ i ].getData( "layout" );
var appendside = Layout.appendside;
var sideList = parentLayout[ appendside + "List" ];
var idx = sideList.indexOf( nodes[ i ] );
sideList.splice( idx, 1 );
}
parent.removeChild( nodes[ i ] );
var set = updateLayoutVertical( nodes[ i ], parent, "remove" );
for ( var j = 0; j < set.length; j++ ) {
translateNode( set[ j ] );
}
}
minder.select( parent );
}
}
};
......
src/module/layout.js
View file @ ac919779
KityMinder.registerModule( "LayoutModule", function () {
kity.extendClass( MinderNode, {
setLayout: function ( k, v ) {
if ( this.setData( 'layout' ) === undefined ) {
this.setData( 'layout', {} );
}
var _pros = this.getLayout();
Utils.extend( _pros, {
k: v
} );
this.setData( 'layout', _pros );
},
getLayout: function ( k ) {
if ( k === undefined ) {
return this.getData( 'layout' );
}
return this.getData( 'layout' )[ k ];
},
clearLayout: function () {
this.setData( 'layout', {} );
this.getRenderContainer().clear();
},
updateLayout: function ( km ) {
km.updateLayout( this );
}
} );
var switchLayout = function ( km, style ) {
var _style = km.getLayoutStyle( style );
if ( !_style ) return false;
......@@ -7,13 +32,11 @@ KityMinder.registerModule( "LayoutModule", function () {
km.appendChildNode = _style.appendChildNode;
km.appendSiblingNode = _style.appendSiblingNode;
km.removeNode = _style.removeNode;
km.updateLayout = _style.updateLayout;
//清空节点上附加的数据
var _root = km.getRoot();
_root.preTraverse( function ( node ) {
node.setData( "style", {} );
node.setData( "shape", null );
node.getRenderContainer().clear();
node.clearLayout();
} );
km.initStyle();
return style;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment