Skip to content

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

updated icon

parent 0c1f2f04
Hide whitespace changes
Inline Side-by-side
Showing with 537 additions and 317 deletions
src/module/layout.bottom.js
View file @ e2ddc1f1
KityMinder.registerModule( "LayoutBottom", function () { KityMinder.registerModule( "LayoutBottom", function () {
var _target = this.getRenderTarget();
function getMinderSize() {
return {
width: _target.clientWidth,
height: _target.clientHeight
};
}
var minder = this; var minder = this;
//收缩-展开子树的节点
var ShIcon = kity.createClass( "DefaultshIcon", ( function () { var ShIcon = kity.createClass( "DefaultshIcon", ( function () {
return { return {
constructor: function ( node ) { constructor: function ( node ) {
...@@ -8,22 +17,21 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -8,22 +17,21 @@ KityMinder.registerModule( "LayoutBottom", function () {
var iconShape = this.shape = new kity.Group(); var iconShape = this.shape = new kity.Group();
iconShape.class = "shicon"; iconShape.class = "shicon";
iconShape.icon = this; iconShape.icon = this;
var rect = this._rect = new kity.Rect().fill( "white" ).stroke( "gray" ).setWidth( 10 ).setHeight( 10 ).setRadius( 2 ); var circle = this._circle = new kity.Circle().fill( "white" ).stroke( "gray" ).setRadius( 5 );
var plus = this._plus = new kity.Path(); var plus = this._plus = new kity.Path();
plus.getDrawer() plus.getDrawer()
.moveTo( 2, 5 ) .moveTo( -3, 0 )
.lineTo( 8, 5 ) .lineTo( 3, 0 )
.moveTo( 5, 2 ) .moveTo( 0, -3 )
.lineTo( 5, 8 ); .lineTo( 0, 3 );
plus.stroke( "gray" ); plus.stroke( "gray" );
var dec = this._dec = new kity.Path(); var dec = this._dec = new kity.Path();
dec.getDrawer() dec.getDrawer()
.moveTo( 2, 5 ) .moveTo( -3, 0 )
.lineTo( 8, 5 ); .lineTo( 3, 0 );
dec.stroke( "gray" ); dec.stroke( "gray" );
minder.getRenderContainer().addShape( iconShape ); minder.getRenderContainer().addShape( iconShape );
iconShape.addShapes( [ rect, plus, dec ] ); iconShape.addShapes( [ circle, plus, dec ] );
node.setData( "shicon", this );
this.update(); this.update();
this.switchState(); this.switchState();
}, },
...@@ -41,10 +49,14 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -41,10 +49,14 @@ KityMinder.registerModule( "LayoutBottom", function () {
}, },
update: function () { update: function () {
var node = this._node; var node = this._node;
var Layout = node.getData( "layout" ); var Layout = node.getLayout();
var nodeShape = node.getRenderContainer(); var nodeShape = node.getRenderContainer();
var nodeX = nodeShape.getRenderBox().closurePoints[ 1 ].x + 5; var nodeX, nodeY = ( node.getType() === "main" ? Layout.y : ( Layout.y + nodeShape.getHeight() / 2 - 5 ) );
var nodeY = nodeShape.getRenderBox().closurePoints[ 1 ].y + 1; if ( Layout.appendside === "left" ) {
nodeX = nodeShape.getRenderBox().closurePoints[ 1 ].x - 6;
} else {
nodeX = nodeShape.getRenderBox().closurePoints[ 0 ].x + 6;
}
this.shape.setTransform( new kity.Matrix().translate( nodeX, nodeY ) ); this.shape.setTransform( new kity.Matrix().translate( nodeX, nodeY ) );
}, },
remove: function () { remove: function () {
...@@ -52,261 +64,223 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -52,261 +64,223 @@ KityMinder.registerModule( "LayoutBottom", function () {
} }
}; };
} )() ); } )() );
//主分支 //求并集
var MainBranch = kity.createClass( "DefaultMainBranch", ( function () { var uSet = function ( a, b ) {
return { for ( var i = 0; i < a.length; i++ ) {
constructor: function ( node ) { var idx = b.indexOf( a[ i ] );
this._node = node; if ( idx !== -1 ) {
var bgRc = node.getBgRc(); b.splice( idx, 1 );
var contRc = node.getContRc();
var txt = this._txt = new kity.Text();
var rect = this._rect = new kity.Rect();
var shicon = this._shicon = new ShIcon( node );
bgRc.addShape( rect );
var connect = this._connect = new kity.Group();
var path = connect.path = new kity.Path();
var circle = connect.circle = new kity.Circle();
connect.addShapes( [ path, circle ] );
minder.getRenderContainer().addShape( connect );
var Layout = {
radius: 0,
fill: "white",
color: "black",
padding: [ 5.5, 20, 5.5, 20 ],
fontSize: 20,
margin: [ 10, 10, 30, 50 ],
shape: this,
align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ),
appendside: node.getData( "layout" ).appendside
};
node.setData( "layout", Layout );
contRc.setTransform( new kity.Matrix().translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 ) );
this.update();
},
update: function () {
var rect = this._rect;
var node = this._node;
var contRc = node.getContRc();
var txt = node.getTextShape();
var Layout = node.getData( "layout" );
txt.setContent( node.getData( "text" ) ).fill( Layout.color );
var _contWidth = contRc.getWidth();
var _contHeight = contRc.getHeight();
var _rectWidth = _contWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ];
var _rectHeight = _contHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ];
rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( node.getData( "highlight" ) ? "chocolate" : Layout.fill ).setRadius( Layout.radius );
this.updateConnect();
this.updateShIcon();
},
updateConnect: function () {
var node = this._node;
var Layout = node.getData( "layout" );
if ( Layout.x && Layout.y ) {
var connect = this._connect;
connect.circle.setCenter( Layout.x + 10, Layout.y - 3 ).fill( "white" ).stroke( "gray" ).setRadius( 2 );
var parent = node.getParent();
var parentLayout = parent.getData( "layout" );
var sX = parentLayout.x + 10.5,
pY = parentLayout.y + parent.getRenderContainer().getHeight() + 0.5,
sY = parentLayout.y + parent.getRenderContainer().getHeight() + parentLayout.margin[ 2 ] + 0.5;
connect.path.getDrawer()
.clear()
.moveTo( sX, pY )
.lineTo( sX, sY )
.lineTo( Layout.x + 10.5, sY )
.lineTo( Layout.x + 10.5, Layout.y );
connect.path.stroke( "white" );
}
},
updateShIcon: function () {
this._shicon.update();
},
clear: function () {
this._node.getRenderContainer().clear();
this._connect.remove();
this._shicon.remove();
}
};
} )() );
//子分支
var SubBranch = kity.createClass( "DefaultSubBranch", ( function () {
return {
constructor: function ( node ) {
this._node = node;
var bgRc = node.getBgRc();
var contRc = node.getContRc();
var underline = this._underline = new kity.Path();
var shicon = this._shicon = new ShIcon( node );
var highlightshape = this._highlightshape = new kity.Rect();
bgRc.addShapes( [ highlightshape, underline ] );
var connect = this._connect = new kity.Path();
minder.getRenderContainer().addShape( connect );
var Layout = {
stroke: new kity.Pen( "white", 1 ).setLineCap( "round" ).setLineJoin( "round" ),
color: "white",
padding: [ 5, 10, 5.5, 10 ],
fontSize: 12,
margin: [ 0, 10, 20, 5 ],
shape: this,
align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ),
appendside: node.getData( "layout" ).appendside
};
node.setData( "layout", Layout );
contRc.setTransform( new kity.Matrix().translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 10 ) );
highlightshape.fill( "chocolate" ).translate( -1, 0 );
this.update();
},
update: function () {
var node = this._node;
var contRc = node.getContRc();
var Layout = node.getData( "layout" );
var underline = this._underline;
var highlightshape = this._highlightshape;
var txt = node.getTextShape();
txt.setContent( node.getData( "text" ) ).fill( Layout.color ).setSize( Layout.fontSize );
var _contWidth = contRc.getWidth();
var _contHeight = contRc.getHeight();
var sY = Layout.padding[ 0 ] + _contHeight / 2;
underline.getDrawer()
.clear()
.moveTo( 0, _contHeight + Layout.padding[ 2 ] + Layout.padding[ 0 ] )
.lineTo( _contWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ], _contHeight + Layout.padding[ 2 ] + Layout.padding[ 0 ] );
underline.stroke( Layout.stroke );
highlightshape
.setWidth( _contWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ] )
.setHeight( _contHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ] )
.setOpacity( node.getData( "highlight" ) ? 1 : 0 );
this.updateConnect();
this.updateShIcon();
},
updateConnect: function () {
var node = this._node;
var Layout = node.getData( "layout" );
if ( Layout.x && Layout.y ) {
var connect = this._connect;
var parent = node.getParent();
var parentLayout = parent.getData( "layout" );
var sX = parentLayout.x + 10.5,
pY = parentLayout.y + parent.getRenderContainer().getHeight() + 10.5,
sY = Layout.y + 0.5;
connect.getDrawer()
.clear()
.moveTo( sX, pY )
.lineTo( sX, sY )
.lineTo( Layout.x + 0.5, sY )
.lineTo( Layout.x + 0.5, Layout.y + node.getRenderContainer().getHeight() );
connect.stroke( "white" );
}
},
updateShIcon: function () {
this._shicon.update();
},
clear: function () {
this._node.getRenderContainer().clear();
this._connect.remove();
this._shicon.remove();
}
};
} )() );
//根节点
var RootShape = kity.createClass( "DefaultRootShape", ( function () {
return {
constructor: function ( node ) {
var bgRc = node.getBgRc();
var contRc = node.getContRc();
var rect = this._rect = new kity.Rect();
bgRc.addShape( rect );
this._node = node;
var Layout = {
shape: this,
x: 100,
y: 50,
align: "center",
appendside: node.getData( "layout" ).appendside || "right",
leftList: [],
rightList: [],
color: "white",
fontSize: 20,
fill: "#00a6d8",
stroke: null,
padding: [ 10.5, 10, 10.5, 10 ],
margin: [ 0, 0, 20, 0 ]
};
node.setData( "layout", Layout );
node.setData( "text", "Minder Root" );
contRc.setTransform( new kity.Matrix().translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 ) );
this.update();
},
update: function () {
var rect = this._rect;
var connect = this._connect;
var node = this._node;
var txt = node.getTextShape();
var contRc = node.getContRc();
var Layout = node.getData( "layout" );
txt.setContent( node.getData( "text" ) ).fill( Layout.color );
var _contWidth = contRc.getWidth();
var _contHeight = contRc.getHeight();
var _rectWidth = _contWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ];
var _rectHeight = _contHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ];
rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( node.getData( "highlight" ) ? "chocolate" : Layout.fill );
},
clear: function () {
this._node.getRenderContainer().clear();
} }
}; }
} )() ); return a.concat( b );
var drawNode = function ( node ) {
var shape = node.getData( "layout" ).shape;
shape.update();
}; };
//以某个节点为seed对整体高度进行更改计算 //样式的配置（包括颜色、字号等）
var updateLayoutVertical = function ( node ) { var nodeStyles = {
var effectSet = [ node ]; "root": {
var Layout = node.getData( "layout" ); color: '#430',
var parent = node.getParent(); fill: '#e9df98',
var parentLayout = parent.getData( "layout" ); fontSize: 24,
var parentShape = parent.getRenderContainer(); padding: [ 15.5, 25.5, 15.5, 25.5 ],
Layout.y = parentLayout.y + parentShape.getHeight() + parentLayout.margin[ 2 ] + Layout.margin[ 0 ]; margin: [ 0, 0, 0, 0 ],
return effectSet; radius: 30,
highlight: 'rgb(254, 219, 0)'
},
"main": {
stroke: new kity.Pen( "white", 2 ).setLineCap( "round" ).setLineJoin( "round" ),
fill: '#A4c5c0',
color: "#333",
padding: [ 6.5, 20, 6.5, 20 ],
fontSize: 16,
margin: [ 0, 10, 30, 50 ],
radius: 10,
highlight: 'rgb(254, 219, 0)'
},
"sub": {
stroke: new kity.Pen( "white", 2 ).setLineCap( "round" ).setLineJoin( "round" ),
color: "white",
fontSize: 12,
margin: [ 0, 10, 20, 6 ],
padding: [ 5, 10, 5.5, 10 ],
highlight: 'rgb(254, 219, 0)'
}
}; };
//更新背景
//以某个节点为seed对水平方向进行调整(包括调整子树) var updateBg = function ( node ) {
var updateLayoutHorizon = function ( node ) { var nodeType = node.getType();
var effectSet = []; //返回受影响（即需要进行下一步translate的节点） var nodeStyle = nodeStyles[ nodeType ];
var nodeLayout = node.getData( "layout" ); var Layout = node.getLayout();
var _buffer = [ minder.getRoot() ]; switch ( node.getType() ) {
var countBranchWidth = function ( node ) { case "root":
var Layout = node.getData( "layout" ); case "main":
var marginLeft = Layout.margin[ 3 ], var bg = node.getBgRc().clear();
marginRight = Layout.margin[ 1 ]; bg.addShape( Layout.bgShadow = new kity.Rect() );
var nodewidth = node.getRenderContainer().getWidth() + marginLeft + marginRight; bg.addShape( Layout.bgRect = new kity.Rect() );
var nodeChildWidth = ( function () { Layout.bgRect.fill( nodeStyle.fill ).setRadius( nodeStyle.radius );
Layout.bgShadow.fill( 'black' ).setOpacity( 0.2 ).setRadius( nodeStyle.radius ).translate( 3, 5 );
break;
case "sub":
var underline = Layout.underline = new kity.Path();
var highlightshape = Layout.highlightshape = new kity.Rect().setRadius( 4 );
node.getBgRc().clear().addShapes( [ Layout.bgRect = new kity.Rect().setRadius( 4 ), highlightshape, underline ] );
break;
default:
break;
}
};
//初始化样式
var initLayout = function ( node ) {
var Layout = node.getLayout();
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var txtShape = node.getTextShape();
txtShape.fill( nodeStyle.color ).setSize( nodeStyle.fontSize ).setY( -3 );
if ( nodeType === "root" ) {
Layout.leftList = [];
Layout.rightList = [];
Layout.leftHeight = 0;
Layout.rightHeight = 0;
}
};
//根据内容调整节点尺寸
var updateShapeByCont = function ( node ) {
var contRc = node.getContRc();
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var _contRCWidth = contRc.getWidth();
var _contRCHeight = contRc.getHeight();
var Layout = node.getLayout();
switch ( nodeType ) {
case "root":
case "main":
var width = _contRCWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ],
height = _contRCHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ];
Layout.bgRect.setWidth( width ).setHeight( height );
Layout.bgShadow.setWidth( width ).setHeight( height );
break;
case "sub":
var _contWidth = contRc.getWidth();
var _contHeight = contRc.getHeight();
width = _contWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ];
height = _contHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ];
Layout.underline.getDrawer()
.clear()
.moveTo( 0, _contHeight + nodeStyle.padding[ 2 ] + nodeStyle.padding[ 0 ] )
.lineTo( _contWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ], _contHeight + nodeStyle.padding[ 2 ] + nodeStyle.padding[ 0 ] );
Layout.underline.stroke( nodeStyle.stroke );
Layout.highlightshape
.setWidth( _contWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ] )
.setHeight( _contHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ] );
Layout.bgRect.setWidth( width ).setHeight( height );
break;
default:
break;
}
contRc.setTransform( new kity.Matrix().translate( nodeStyle.padding[ 3 ], nodeStyle.padding[ 0 ] + node.getTextShape().getHeight() ) );
};
//计算节点在垂直方向的位置
var updateLayoutVertical = function ( node, parent, action ) {
var root = minder.getRoot();
var effectSet = [ node ];
if ( action === "remove" ) {
effectSet = [];
}
var Layout = node.getLayout();
var nodeShape = node.getRenderContainer();
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var appendside = Layout.appendside;
var countBranchHeight = function ( node, side ) {
var nodeStyle = nodeStyles[ node.getType() ];
var selfHeight = node.getRenderContainer().getHeight() + nodeStyle.margin[ 0 ] + nodeStyle.margin[ 2 ];
var childHeight = ( function () {
var sum = 0; var sum = 0;
var children = node.getChildren(); var children;
if ( !side ) {
children = node.getChildren();
} else {
children = node.getLayout()[ side + "List" ];
}
for ( var i = 0; i < children.length; i++ ) { for ( var i = 0; i < children.length; i++ ) {
sum += children[ i ].getData( "layout" ).branchwidth; var childLayout = children[ i ].getLayout();
if ( children[ i ].getRenderContainer().getHeight() !== 0 )
sum += childLayout.branchheight;
} }
return sum; return sum;
} )(); } )();
Layout.branchwidth = ( nodewidth > nodeChildWidth ? nodewidth : nodeChildWidth ); if ( side ) {
return childHeight;
} else {
return ( selfHeight > childHeight ? selfHeight : childHeight );
}
}; };
var parent = node; if ( nodeType === "root" ) {
while ( parent ) { Layout.y = 100;
countBranchWidth( parent ); effectSet.push( node );
parent = parent.getParent(); } else {
if ( action === "append" || action === "contract" ) {
Layout.branchheight = node.getRenderContainer().getHeight() + nodeStyle.margin[ 0 ] + nodeStyle.margin[ 2 ];
} else if ( action === "change" ) { //展开
Layout.branchheight = countBranchHeight( node );
}
var parentLayout = parent.getLayout();
var parentShape = parent.getRenderContainer();
var prt = node.getParent() || parent;
//自底向上更新祖先元素的branchheight值
while ( prt ) {
var prtLayout = prt.getLayout();
if ( prt.getType() === "root" ) {
prtLayout[ appendside + "Height" ] = countBranchHeight( prt, appendside );
} else {
prtLayout.branchheight = countBranchHeight( prt );
}
prt = prt.getParent();
}
//自顶向下更新受影响一侧的y值
var sideList = root.getLayout()[ appendside + "List" ];
var _buffer = [ root ];
while ( _buffer.length > 0 ) {
var _buffer0Layout = _buffer[ 0 ].getLayout();
var children = _buffer0Layout[ appendside + "List" ] || _buffer[ 0 ].getChildren();
_buffer = _buffer.concat( children );
var sY = _buffer0Layout.y - ( _buffer0Layout[ appendside + "Height" ] || _buffer0Layout.branchheight ) / 2;
for ( var i = 0; i < children.length; i++ ) {
var childLayout = children[ i ].getLayout();
childLayout.y = sY + childLayout.branchheight / 2;
sY += childLayout.branchheight;
}
effectSet.push( _buffer[ 0 ] );
_buffer.shift();
}
} }
return effectSet;
};
//计算节点在水平方向的位置
var updateLayoutHorizon = function ( node ) {
var nodeType = node.getType();
var parent = node.getParent();
var effectSet = [ node ];
var Layout = node.getLayout();
var _buffer = [ node ];
while ( _buffer.length !== 0 ) { while ( _buffer.length !== 0 ) {
var prt = _buffer[ 0 ].getParent();
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() ); _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
var bufferLayout = _buffer[ 0 ].getData( "layout" ); if ( !prt ) {
var sX = bufferLayout.x; Layout.x = getMinderSize().width / 2;
var children = _buffer[ 0 ].getChildren(); _buffer.shift();
for ( var i = 0; i < children.length; i++ ) { continue;
countBranchWidth( children[ i ] ); }
var childrenLayout = children[ i ].getData( "layout" ); var parentLayout = prt.getLayout();
childrenLayout.x = sX; var parentWidth = prt.getRenderContainer().getWidth();
sX += childrenLayout.branchwidth; var parentStyle = nodeStyles[ prt.getType() ];
var childLayout = _buffer[ 0 ].getLayout();
var childStyle = nodeStyles[ _buffer[ 0 ].getType() ];
if ( parentLayout.align === "center" ) {
parentWidth = parentWidth / 2;
}
if ( childLayout.appendside === "left" ) {
childLayout.x = parentLayout.x - parentWidth - parentStyle.margin[ 1 ] - childStyle.margin[ 3 ];
} else {
childLayout.x = parentLayout.x + parentWidth + parentStyle.margin[ 1 ] + childStyle.margin[ 3 ];
} }
effectSet.push( _buffer[ 0 ] ); effectSet.push( _buffer[ 0 ] );
_buffer.shift(); _buffer.shift();
...@@ -314,100 +288,346 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -314,100 +288,346 @@ KityMinder.registerModule( "LayoutBottom", function () {
return effectSet; return effectSet;
}; };
var translateNode = function ( node ) { var translateNode = function ( node ) {
var Layout = node.getData( "layout" ); var Layout = node.getLayout();
var nodeShape = node.getRenderContainer(); var nodeShape = node.getRenderContainer();
nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y ) ); var align = Layout.align;
if ( Layout.shape ) { var _rectHeight = nodeShape.getHeight();
if ( Layout.shape.updateConnect ) Layout.shape.updateConnect(); var _rectWidth = nodeShape.getWidth();
if ( Layout.shape.updateShIcon ) Layout.shape.updateShIcon(); switch ( align ) {
case "right":
nodeShape.setTransform( new kity.Matrix().translate( Layout.x - _rectWidth, Layout.y - _rectHeight / 2 ) );
break;
case "center":
nodeShape.setTransform( new kity.Matrix().translate( Layout.x - _rectWidth / 2, Layout.y - _rectHeight / 2 ) );
break;
default:
nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y - _rectHeight / 2 ) );
break;
} }
node.setPoint( Layout.x, Layout.y );
}; };
//求并集 var updateConnectAndshIcon = function ( node ) {
var uSet = function ( a, b ) { var nodeType = node.getType();
for ( var i = 0; i < a.length; i++ ) { var Layout = node.getLayout();
var idx = b.indexOf( a[ i ] ); var nodeStyle = nodeStyles[ node.getType() ];
if ( idx !== -1 ) { var connect;
b.splice( idx, 1 ); //更新连线
if ( nodeType === "main" ) {
if ( !Layout.connect ) {
connect = Layout.connect = new kity.Group();
var bezier = Layout.connect.bezier = new kity.Bezier();
var circle = Layout.connect.circle = new kity.Circle();
connect.addShapes( [ bezier, circle ] );
minder.getRenderContainer().addShape( connect );
minder.getRoot().getRenderContainer().bringTop();
}
var parent = minder.getRoot();
var rootX = parent.getLayout().x;
var rootY = parent.getLayout().y;
connect = Layout.connect;
var nodeShape = node.getRenderContainer();
var nodeClosurePoints = nodeShape.getRenderBox().closurePoints;
var sPos;
var endPos;
if ( Layout.appendside === "left" ) {
sPos = new kity.BezierPoint( rootX - 30, nodeClosurePoints[ 2 ].y + nodeShape.getHeight() / 2 );
endPos = new kity.BezierPoint( nodeClosurePoints[ 2 ].x + 3, nodeClosurePoints[ 2 ].y + nodeShape.getHeight() / 2 );
} else {
sPos = new kity.BezierPoint( rootX + 30, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
endPos = new kity.BezierPoint( nodeClosurePoints[ 3 ].x - 3, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
}
var sPosV = sPos.getVertex();
var endPosV = endPos.getVertex();
sPos.setVertex( rootX, rootY );
connect.bezier.setPoints( [ sPos, endPos ] ).stroke( nodeStyle.stroke );
connect.circle.setCenter( endPosV.x + ( Layout.appendside === "left" ? 1 : -1.5 ), endPosV.y ).fill( "white" ).setRadius( 4 );
} else if ( nodeType === "sub" ) {
if ( !Layout.connect ) {
connect = Layout.connect = new kity.Path();
minder.getRenderContainer().addShape( connect );
}
connect = Layout.connect;
var parentShape = node.getParent().getRenderContainer();
var parentBox = parentShape.getRenderBox();
var parentLayout = node.getParent().getLayout();
var parentStyle = nodeStyles[ node.getParent().getType() ];
var Shape = node.getRenderContainer();
var sX, sY = parentLayout.y;
var nodeX, nodeY = Shape.getRenderBox().closurePoints[ 1 ].y;
if ( Layout.appendside === "left" ) {
sX = parentBox.closurePoints[ 1 ].x - parentStyle.margin[ 1 ];
nodeX = Shape.getRenderBox().closurePoints[ 0 ].x;
connect.getDrawer()
.clear()
.moveTo( sX, sY )
.lineTo( sX, nodeY > sY ? ( nodeY - nodeStyle.margin[ 3 ] ) : ( nodeY + nodeStyle.margin[ 3 ] ) );
if ( nodeY > sY ) connect.getDrawer().carcTo( nodeStyle.margin[ 3 ], nodeX, nodeY, 0, 1 );
else connect.getDrawer().carcTo( nodeStyle.margin[ 3 ], nodeX, nodeY );
connect.stroke( nodeStyle.stroke );
} else {
sX = parentBox.closurePoints[ 0 ].x + parentStyle.margin[ 1 ];
nodeX = Shape.getRenderBox().closurePoints[ 1 ].x + 1;
connect.getDrawer()
.clear()
.moveTo( sX, sY )
.lineTo( sX, nodeY > sY ? ( nodeY - nodeStyle.margin[ 3 ] ) : ( nodeY + nodeStyle.margin[ 3 ] ) );
if ( nodeY > sY ) connect.getDrawer().carcTo( nodeStyle.margin[ 3 ], nodeX, nodeY );
else connect.getDrawer().carcTo( nodeStyle.margin[ 3 ], nodeX, nodeY, 0, 1 );
connect.stroke( nodeStyle.stroke );
} }
} }
return a.concat( b ); //更新收放icon
if ( nodeType !== "root" ) {
if ( !Layout.shicon ) {
Layout.shicon = new ShIcon( node );
}
Layout.shicon.update();
}
}; };
var _style = { var _style = {
renderNode: function ( node ) { highlightNode: function ( node ) {
drawNode( node ); var highlight = node.isHighlight();
}, var nodeType = node.getType();
initStyle: function () { var nodeStyle = nodeStyles[ nodeType ];
var _root = this.getRoot(); var Layout = node.getLayout();
minder.handelNodeInsert( _root ); switch ( nodeType ) {
var rc = new RootShape( _root ); case "root":
translateNode( _root ); case "main":
if ( highlight ) {
Layout.bgRect.fill( nodeStyle.highlight );
} else {
Layout.bgRect.fill( nodeStyle.fill );
}
break;
case "sub":
if ( highlight ) {
Layout.highlightshape.fill( nodeStyle.highlight ).setOpacity( 1 );
node.getTextShape().fill( 'black' );
} else {
Layout.highlightshape.setOpacity( 0 );
node.getTextShape().fill( 'white' );
}
break;
default:
break;
}
}, },
updateLayout: function ( node ) { updateLayout: function ( node ) {
drawNode( node ); this._fire( new MinderEvent( "beforeRenderNode", {
var set = updateLayoutHorizon( node ); node: node
}, false ) );
this._fire( new MinderEvent( "RenderNode", {
node: node
}, false ) );
updateShapeByCont( node );
var set1 = updateLayoutHorizon( node );
var set2 = updateLayoutVertical( node, node.getParent(), "change" );
var set = uSet( set1, set2 );
for ( var i = 0; i < set.length; i++ ) { for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] ); translateNode( set[ i ] );
updateConnectAndshIcon( set[ i ] );
} }
}, },
appendChildNode: function ( parent, node, index ) { initStyle: function () {
var _root = minder.getRoot();
minder.handelNodeInsert( _root );
//设置root的align
_root.getLayout().align = "center";
updateBg( _root );
initLayout( _root );
this._fire( new MinderEvent( "beforeRenderNode", {
node: _root
}, false ) );
this._fire( new MinderEvent( "RenderNode", {
node: _root
}, false ) );
updateShapeByCont( _root );
updateLayoutHorizon( _root );
updateLayoutVertical( _root );
translateNode( _root );
var _buffer = [ _root ];
var _cleanbuffer = [];
//打散结构
while ( _buffer.length !== 0 ) {
var children = _buffer[ 0 ].getChildren();
_buffer = _buffer.concat( children );
for ( var i = 0; i < children.length; i++ ) {
children[ i ].getLayout().parent = _buffer[ 0 ];
}
_buffer[ 0 ].clearChildren();
if ( _buffer[ 0 ] !== _root ) _cleanbuffer.push( _buffer[ 0 ] );
_buffer.shift();
}
//重组结构
for ( var j = 0; j < _cleanbuffer.length; j++ ) {
this.appendChildNode( _cleanbuffer[ j ].getLayout().parent, _cleanbuffer[ j ] );
}
},
appendChildNode: function ( parent, node, sibling ) {
minder.handelNodeInsert( node ); minder.handelNodeInsert( node );
var _root = this.getRoot(); node.clearLayout();
var childbranch; var Layout = node.getLayout();
if ( !node.getData( "layout" ) ) node.setData( "layout", {} ); var parentLayout = parent.getLayout();
if ( parent.getChildren().indexOf( node ) === -1 ) { if ( sibling ) {
if ( !index ) parent.appendChild( node ); var siblingLayout = sibling.getLayout();
else parent.insertChild( node, index ); Layout.appendside = siblingLayout.appendside;
Layout.align = siblingLayout.align;
parent.insertChild( node, sibling.getIndex() + 1 );
if ( parent.getType() === "root" ) {
var len = parent.getChildren().length;
if ( len < 7 ) {
if ( len % 2 ) {
Layout.appendside = "right";
Layout.align = "left";
} else {
Layout.appendside = "left";
Layout.align = "right";
}
}
var sideList = parentLayout[ Layout.appendside + "List" ];
var idx = sideList.indexOf( sibling );
sideList.splice( idx + 1, 0, node );
}
} else {
if ( parent.getType() !== "root" ) {
var prtLayout = parent.getLayout();
Layout.appendside = prtLayout.appendside;
Layout.align = prtLayout.align;
parent.appendChild( node );
} else {
var nodeP = node.getPoint();
if ( nodeP && nodeP.x && nodeP.y ) {
if ( nodeP.x > parentLayout.x ) {
Layout.appendside = "right";
Layout.align = "left";
} else {
Layout.appendside = "left";
Layout.align = "right";
}
} else {
if ( parentLayout.rightList.length > 1 && parentLayout.rightList.length > parentLayout.leftList.length ) {
Layout.appendside = "left";
Layout.align = "right";
} else {
Layout.appendside = "right";
Layout.align = "left";
}
}
var sideList1 = parentLayout[ Layout.appendside + "List" ];
sideList1.push( node );
var idx1;
if ( Layout.appendside === "right" ) {
idx1 = sideList1.length;
} else {
idx1 = parent.getChildren().length;
}
parent.insertChild( node, idx1 );
}
} }
var parentLayout = parent.getData( "layout" ); //设置分支类型
var Layout = node.getData( "layout" );
if ( parent.getType() === "root" ) { if ( parent.getType() === "root" ) {
node.setType( "main" ); node.setType( "main" );
childbranch = new MainBranch( node );
} else { } else {
node.setType( "sub" ); node.setType( "sub" );
childbranch = new SubBranch( node );
} }
var set1 = updateLayoutVertical( node ); //计算位置等流程
updateBg( node );
initLayout( node );
this._fire( new MinderEvent( "beforeRenderNode", {
node: node
}, false ) );
this._fire( new MinderEvent( "RenderNode", {
node: node
}, false ) );
updateShapeByCont( node );
var set1 = updateLayoutVertical( node, parent, "append" );
var set2 = updateLayoutHorizon( node ); var set2 = updateLayoutHorizon( node );
var set = uSet( set1, set2 ); var set = uSet( set1, set2 );
for ( var i = 0; i < set.length; i++ ) { for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] ); translateNode( set[ i ] );
var box = set[ i ].getRenderContainer().getRenderBox(); updateConnectAndshIcon( set[ i ] );
set[ i ].setPoint( box.x, box.y );
} }
}, },
appendSiblingNode: function ( sibling, node ) { appendSiblingNode: function ( sibling, node ) {
var parent = sibling.getParent();
this.appendChildNode( parent, node, sibling );
}, },
removeNode: function ( nodes ) { removeNode: function ( nodes ) {
var root = this.getRoot(); while ( nodes.length !== 0 ) {
for ( var i = 0; i < nodes.length; i++ ) { var parent = nodes[ 0 ].getParent();
var parent = nodes[ i ].getParent(); if ( !parent ) {
if ( parent ) { nodes.splice( 0, 1 );
var _buffer = [ nodes[ i ] ]; return false;
var parentLayout = parent.getData( "layout" ); }
while ( _buffer.length !== 0 ) { var nodeLayout = nodes[ 0 ].getLayout();
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() ); if ( parent.getType() === "root" ) {
_buffer[ 0 ].getData( "layout" ).shape.clear(); var sideList = parent.getLayout()[ nodeLayout.appendside + "List" ];
var index = sideList.indexOf( nodes[ 0 ] );
sideList.splice( index, 1 );
}
parent.removeChild( nodes[ 0 ] );
var set = updateLayoutVertical( nodes[ 0 ], parent, "remove" );
for ( var j = 0; j < set.length; j++ ) {
translateNode( set[ j ] );
updateConnectAndshIcon( set[ j ] );
}
var _buffer = [ nodes[ 0 ] ];
while ( _buffer.length !== 0 ) {
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
try {
_buffer[ 0 ].getRenderContainer().remove(); _buffer[ 0 ].getRenderContainer().remove();
var prt = _buffer[ 0 ].getParent(); var Layout = _buffer[ 0 ].getLayout();
prt.removeChild( _buffer[ 0 ] ); Layout.connect.remove();
_buffer.shift(); Layout.shicon.remove();
} catch ( error ) {
console.log( "isRemoved" );
} }
if ( parent === root ) { //检测当前节点是否在选中的数组中，如果在的话，从选中数组中去除
var Layout = nodes[ i ].getData( "layout" ); var idx = nodes.indexOf( _buffer[ 0 ] );
var appendside = Layout.appendside; if ( idx !== -1 ) {
var sideList = parentLayout[ appendside + "List" ]; nodes.splice( idx, 1 );
var idx = sideList.indexOf( nodes[ i ] );
sideList.splice( idx, 1 );
}
parent.removeChild( nodes[ i ] );
var set = updateLayoutHorizon( nodes[ i ], parent, "remove" );
for ( var j = 0; j < set.length; j++ ) {
translateNode( set[ j ] );
} }
_buffer.shift();
} }
} }
},
expandNode: function ( ico ) {
var isExpand = ico.icon.switchState();
var node = ico.icon._node;
var _buffer = node.getChildren();
var _cleanbuffer = [];
while ( _buffer.length !== 0 ) {
var Layout = _buffer[ 0 ].getLayout();
if ( isExpand ) {
var parent = _buffer[ 0 ].getParent();
Layout.parent = parent;
_cleanbuffer.push( _buffer[ 0 ] );
//minder.appendChildNode( parent, _buffer[ 0 ] );
Layout.connect = null;
Layout.shicon = null;
} else {
_buffer[ 0 ].getRenderContainer().remove();
Layout.connect.remove();
Layout.shicon.remove();
}
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer.shift();
}
if ( isExpand ) {
node.clearChildren();
for ( var j = 0; j < _cleanbuffer.length; j++ ) {
_cleanbuffer[ j ].clearChildren();
minder.appendChildNode( _cleanbuffer[ j ].getLayout().parent, _cleanbuffer[ j ] );
}
}
var set = [];
if ( !isExpand ) set = updateLayoutVertical( node, node.getParent(), "contract" );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
updateConnectAndshIcon( set[ i ] );
}
} }
}; };
this.addLayoutStyle( "bottom", _style ); this.addLayoutStyle( "bottom", _style );
......
src/module/layout.default.js
View file @ e2ddc1f1
...@@ -377,7 +377,7 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -377,7 +377,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
} }
} }
//更新收放icon //更新收放icon
if ( nodeType !== "root" ) { if ( nodeType !== "root" && node.getChildren().length !== 0 ) {
if ( !Layout.shicon ) { if ( !Layout.shicon ) {
Layout.shicon = new ShIcon( node ); Layout.shicon = new ShIcon( node );
} }
...@@ -610,7 +610,7 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -610,7 +610,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
} else { } else {
_buffer[ 0 ].getRenderContainer().remove(); _buffer[ 0 ].getRenderContainer().remove();
Layout.connect.remove(); Layout.connect.remove();
Layout.shicon.remove(); if ( Layout.shicon ) Layout.shicon.remove();
} }
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() ); _buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer.shift(); _buffer.shift();
......
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