Skip to content

K
kityminder-core
Commit a69442eb authored by techird's avatar techird
Browse files
Options

Merge branch 'dev' of https://github.com/kitygraph/kityminder into dev

parents d7686c1d e2ddc1f1
Show whitespace changes
Inline Side-by-side
Showing with 582 additions and 347 deletions
src/module/layout.bottom.js
View file @ a69442eb
KityMinder.registerModule( "LayoutBottom", function () {
var _target = this.getRenderTarget();
function getMinderSize() {
return {
width: _target.clientWidth,
height: _target.clientHeight
};
}
var minder = this;
//收缩-展开子树的节点
var ShIcon = kity.createClass( "DefaultshIcon", ( function () {
return {
constructor: function ( node ) {
......@@ -8,22 +17,21 @@ KityMinder.registerModule( "LayoutBottom", function () {
var iconShape = this.shape = new kity.Group();
iconShape.class = "shicon";
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();
plus.getDrawer()
.moveTo( 2, 5 )
.lineTo( 8, 5 )
.moveTo( 5, 2 )
.lineTo( 5, 8 );
.moveTo( -3, 0 )
.lineTo( 3, 0 )
.moveTo( 0, -3 )
.lineTo( 0, 3 );
plus.stroke( "gray" );
var dec = this._dec = new kity.Path();
dec.getDrawer()
.moveTo( 2, 5 )
.lineTo( 8, 5 );
.moveTo( -3, 0 )
.lineTo( 3, 0 );
dec.stroke( "gray" );
minder.getRenderContainer().addShape( iconShape );
iconShape.addShapes( [ rect, plus, dec ] );
node.setData( "shicon", this );
iconShape.addShapes( [ circle, plus, dec ] );
this.update();
this.switchState();
},
......@@ -41,10 +49,14 @@ KityMinder.registerModule( "LayoutBottom", function () {
},
update: function () {
var node = this._node;
var Layout = node.getData( "layout" );
var Layout = node.getLayout();
var nodeShape = node.getRenderContainer();
var nodeX = nodeShape.getRenderBox().closurePoints[ 1 ].x + 5;
var nodeY = nodeShape.getRenderBox().closurePoints[ 1 ].y + 1;
var nodeX, nodeY = ( node.getType() === "main" ? Layout.y : ( Layout.y + nodeShape.getHeight() / 2 - 5 ) );
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 ) );
},
remove: function () {
......@@ -52,261 +64,223 @@ KityMinder.registerModule( "LayoutBottom", function () {
}
};
} )() );
//主分支
var MainBranch = kity.createClass( "DefaultMainBranch", ( function () {
return {
constructor: function ( node ) {
this._node = node;
var bgRc = node.getBgRc();
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" );
//求并集
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 );
}
},
updateShIcon: function () {
this._shicon.update();
},
clear: function () {
this._node.getRenderContainer().clear();
this._connect.remove();
this._shicon.remove();
}
return a.concat( b );
};
} )() );
//子分支
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();
//样式的配置（包括颜色、字号等）
var nodeStyles = {
"root": {
color: '#430',
fill: '#e9df98',
fontSize: 24,
padding: [ 15.5, 25.5, 15.5, 25.5 ],
margin: [ 0, 0, 0, 0 ],
radius: 30,
highlight: 'rgb(254, 219, 0)'
},
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();
"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)'
},
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" );
"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)'
}
},
updateShIcon: function () {
this._shicon.update();
},
clear: function () {
this._node.getRenderContainer().clear();
this._connect.remove();
this._shicon.remove();
};
//更新背景
var updateBg = function ( node ) {
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var Layout = node.getLayout();
switch ( node.getType() ) {
case "root":
case "main":
var bg = node.getBgRc().clear();
bg.addShape( Layout.bgShadow = new kity.Rect() );
bg.addShape( Layout.bgRect = new kity.Rect() );
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 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 ]
//初始化样式
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;
}
};
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 updateShapeByCont = function ( node ) {
var contRc = node.getContRc();
var Layout = node.getData( "layout" );
txt.setContent( node.getData( "text" ) ).fill( Layout.color );
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();
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();
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 drawNode = function ( node ) {
var shape = node.getData( "layout" ).shape;
shape.update();
};
//以某个节点为seed对整体高度进行更改计算
var updateLayoutVertical = function ( node ) {
//计算节点在垂直方向的位置
var updateLayoutVertical = function ( node, parent, action ) {
var root = minder.getRoot();
var effectSet = [ node ];
var Layout = node.getData( "layout" );
var parent = node.getParent();
var parentLayout = parent.getData( "layout" );
var parentShape = parent.getRenderContainer();
Layout.y = parentLayout.y + parentShape.getHeight() + parentLayout.margin[ 2 ] + Layout.margin[ 0 ];
return effectSet;
};
//以某个节点为seed对水平方向进行调整(包括调整子树)
var updateLayoutHorizon = function ( node ) {
var effectSet = []; //返回受影响（即需要进行下一步translate的节点）
var nodeLayout = node.getData( "layout" );
var _buffer = [ minder.getRoot() ];
var countBranchWidth = function ( node ) {
var Layout = node.getData( "layout" );
var marginLeft = Layout.margin[ 3 ],
marginRight = Layout.margin[ 1 ];
var nodewidth = node.getRenderContainer().getWidth() + marginLeft + marginRight;
var nodeChildWidth = ( function () {
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 children = node.getChildren();
var children;
if ( !side ) {
children = node.getChildren();
} else {
children = node.getLayout()[ side + "List" ];
}
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;
} )();
Layout.branchwidth = ( nodewidth > nodeChildWidth ? nodewidth : nodeChildWidth );
if ( side ) {
return childHeight;
} else {
return ( selfHeight > childHeight ? selfHeight : childHeight );
}
};
var parent = node;
while ( parent ) {
countBranchWidth( parent );
parent = parent.getParent();
if ( nodeType === "root" ) {
Layout.y = 100;
effectSet.push( node );
} 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 ) {
var prt = _buffer[ 0 ].getParent();
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
var bufferLayout = _buffer[ 0 ].getData( "layout" );
var sX = bufferLayout.x;
var children = _buffer[ 0 ].getChildren();
for ( var i = 0; i < children.length; i++ ) {
countBranchWidth( children[ i ] );
var childrenLayout = children[ i ].getData( "layout" );
childrenLayout.x = sX;
sX += childrenLayout.branchwidth;
if ( !prt ) {
Layout.x = getMinderSize().width / 2;
_buffer.shift();
continue;
}
var parentLayout = prt.getLayout();
var parentWidth = prt.getRenderContainer().getWidth();
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 ] );
_buffer.shift();
......@@ -314,100 +288,346 @@ KityMinder.registerModule( "LayoutBottom", function () {
return effectSet;
};
var translateNode = function ( node ) {
var Layout = node.getData( "layout" );
var Layout = node.getLayout();
var nodeShape = node.getRenderContainer();
nodeShape.setTransform( new kity.Matrix().translate( Layout.x, Layout.y ) );
if ( Layout.shape ) {
if ( Layout.shape.updateConnect ) Layout.shape.updateConnect();
if ( Layout.shape.updateShIcon ) Layout.shape.updateShIcon();
var align = Layout.align;
var _rectHeight = nodeShape.getHeight();
var _rectWidth = nodeShape.getWidth();
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 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 );
var updateConnectAndshIcon = function ( node ) {
var nodeType = node.getType();
var Layout = node.getLayout();
var nodeStyle = nodeStyles[ node.getType() ];
var connect;
//更新连线
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 );
}
}
//更新收放icon
if ( nodeType !== "root" ) {
if ( !Layout.shicon ) {
Layout.shicon = new ShIcon( node );
}
Layout.shicon.update();
}
return a.concat( b );
};
var _style = {
renderNode: function ( node ) {
drawNode( node );
},
initStyle: function () {
var _root = this.getRoot();
minder.handelNodeInsert( _root );
var rc = new RootShape( _root );
translateNode( _root );
highlightNode: function ( node ) {
var highlight = node.isHighlight();
var nodeType = node.getType();
var nodeStyle = nodeStyles[ nodeType ];
var Layout = node.getLayout();
switch ( nodeType ) {
case "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 ) {
drawNode( node );
var set = updateLayoutHorizon( node );
this._fire( new MinderEvent( "beforeRenderNode", {
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++ ) {
translateNode( set[ i ] );
updateConnectAndshIcon( set[ i ] );
}
},
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, index ) {
appendChildNode: function ( parent, node, sibling ) {
minder.handelNodeInsert( node );
var _root = this.getRoot();
var childbranch;
if ( !node.getData( "layout" ) ) node.setData( "layout", {} );
if ( parent.getChildren().indexOf( node ) === -1 ) {
if ( !index ) parent.appendChild( node );
else parent.insertChild( node, index );
}
var parentLayout = parent.getData( "layout" );
var Layout = node.getData( "layout" );
node.clearLayout();
var Layout = node.getLayout();
var parentLayout = parent.getLayout();
if ( sibling ) {
var siblingLayout = sibling.getLayout();
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 );
}
}
//设置分支类型
if ( parent.getType() === "root" ) {
node.setType( "main" );
childbranch = new MainBranch( node );
} else {
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 set = uSet( set1, set2 );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
var box = set[ i ].getRenderContainer().getRenderBox();
set[ i ].setPoint( box.x, box.y );
updateConnectAndshIcon( set[ i ] );
}
},
appendSiblingNode: function ( sibling, node ) {
var parent = sibling.getParent();
this.appendChildNode( parent, node, sibling );
},
removeNode: function ( nodes ) {
var root = this.getRoot();
for ( var i = 0; i < nodes.length; i++ ) {
var parent = nodes[ i ].getParent();
if ( parent ) {
var _buffer = [ nodes[ i ] ];
var parentLayout = parent.getData( "layout" );
while ( nodes.length !== 0 ) {
var parent = nodes[ 0 ].getParent();
if ( !parent ) {
nodes.splice( 0, 1 );
return false;
}
var nodeLayout = nodes[ 0 ].getLayout();
if ( parent.getType() === "root" ) {
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() );
_buffer[ 0 ].getData( "layout" ).shape.clear();
try {
_buffer[ 0 ].getRenderContainer().remove();
var prt = _buffer[ 0 ].getParent();
prt.removeChild( _buffer[ 0 ] );
var Layout = _buffer[ 0 ].getLayout();
Layout.connect.remove();
Layout.shicon.remove();
} catch ( error ) {
console.log( "isRemoved" );
}
//检测当前节点是否在选中的数组中，如果在的话，从选中数组中去除
var idx = nodes.indexOf( _buffer[ 0 ] );
if ( idx !== -1 ) {
nodes.splice( idx, 1 );
}
_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 = updateLayoutHorizon( nodes[ i ], parent, "remove" );
for ( var j = 0; j < set.length; j++ ) {
translateNode( set[ j ] );
},
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 );
......
src/module/layout.default.js
View file @ a69442eb
......@@ -121,7 +121,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
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 ] );
node.getBgRc().clear().addShapes( [ Layout.bgRect = new kity.Rect().setRadius( 4 ), highlightshape, underline ] );
break;
default:
break;
......@@ -170,7 +170,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
Layout.highlightshape
.setWidth( _contWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ] )
.setHeight( _contHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ] );
Layout.bgRect.setWidth(width).setHeight(height);
Layout.bgRect.setWidth( width ).setHeight( height );
break;
default:
break;
......@@ -377,7 +377,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
}
}
//更新收放icon
if ( nodeType !== "root" ) {
if ( nodeType !== "root" && node.getChildren().length !== 0 ) {
if ( !Layout.shicon ) {
Layout.shicon = new ShIcon( node );
}
......@@ -475,6 +475,16 @@ KityMinder.registerModule( "LayoutDefault", function () {
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 );
......@@ -600,7 +610,7 @@ KityMinder.registerModule( "LayoutDefault", function () {
} else {
_buffer[ 0 ].getRenderContainer().remove();
Layout.connect.remove();
Layout.shicon.remove();
if ( Layout.shicon ) Layout.shicon.remove();
}
_buffer = _buffer.concat( _buffer[ 0 ].getChildren() );
_buffer.shift();
......
src/module/layout.js
View file @ a69442eb
......@@ -132,7 +132,11 @@ KityMinder.registerModule( "LayoutModule", function () {
base: Command,
execute: function ( km ) {
var selectedNodes = km.getSelectedNodes();
if ( selectedNodes.length === 0 ) return false;
var _root = km.getRoot();
if ( selectedNodes.length === 0 || ( selectedNodes.length === 1 && !selectedNodes[ 0 ].getParent() ) ) {
km.select( _root );
return false;
}
var _buffer = [];
for ( var i = 0; i < selectedNodes.length; i++ ) {
_buffer.push( selectedNodes[ i ] );
......
themes/default/_css/dialogsize.css
View file @ a69442eb
.kmui-modal-header .kmui-title{
font-size: 14px;
}
.kmui-dialog-markers-body {
padding-bottom: 5px
}
.icon-list{
margin: 0;
padding: 0
}
.icon-list li{
padding: 5px 10px;
margin: 0;
list-style: none;
cursor: pointer;
color: #333
}
.icon-list li:hover,.icon-list li.active{
background: #cfe0f7
}
.icon-list li span.icon{
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin-right: 10px;
}
\ No newline at end of file
themes/default/_css/import.css
View file @ a69442eb
......@@ -11,3 +11,4 @@
@import "tooltip.css";
@import "colorpicker.css";
@import "separator.css";
@import "markers.css";
themes/default/_css/markers.css 0 → 100644
View file @ a69442eb
.kmui-modal-header .kmui-title{
font-size: 14px;
}
.kmui-dialog-markers-body {
padding-bottom: 5px
}
.icon-list{
margin: 0;
padding: 0
}
.icon-list li{
padding: 5px 10px;
margin: 0;
list-style: none;
cursor: pointer;
color: #333
}
.icon-list li:hover,.icon-list li.active{
background: #cfe0f7
}
.icon-list li span.icon{
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin-right: 10px;
}
\ No newline at end of file
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