Skip to content

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

changed style

parent c075025f
Show whitespace changes
Inline Side-by-side
Showing with 224 additions and 151 deletions
src/module/layout.default.js
View file @ 2dd1b800
...@@ -3,135 +3,11 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -3,135 +3,11 @@ KityMinder.registerModule( "LayoutDefault", function () {
var minderWidth = _target.clientWidth; var minderWidth = _target.clientWidth;
var minderHeight = _target.clientHeight; var minderHeight = _target.clientHeight;
var minder = this; var minder = this;
//流程：绘制->计算Y坐标->计算X坐标->translate var hideIcon = kity.createClass( "hideIcon", ( function () {
//绘制node return {
var drawNode = function ( node ) {
var shape = node.getData( "layout" ).shape;
shape.update();
};
//以某个节点为seed对整体高度进行更改计算
var updateLayoutVertical = function ( node, parent, action ) {
var effectSet = [ node ]; //用于返回受影响的节点集
node.getData( "layout" ).y = Math.random() * 400 + 300;
// if ( !parent ) {
// return effectSet;
// }
// var Layout = node.getData( "layout" );
// var marginTop = Layout.margin[ 0 ],
// marginBottom = Layout.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" );
// if ( !childrenLayout1.shape ) break;
// var childBranchHeight = childrenLayout1.branchheight;
// childrenLayout1.y = sY + marginTop + childBranchHeight / 2;
// sY += childBranchHeight;
// }
// }
// return nodeChildren;
// };
// Layout.branchheight = branchheight;
// 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++ ) {
// var childLayout = children[ i ].getData( "layout" );
// if ( childLayout.shape ) sum += childLayout.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 = prt.getParent();
// } while ( prt );
// //遍历
// var _buffer = [ minder.getRoot() ];
// 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 nodeLayout = node.getData( "layout" );
var effectSet = [ node ]; //返回受影响（即需要进行下一步translate的节点）
var parent = node.getParent();
var appendside = nodeLayout.appendside;
var selfWidth = node.getRenderContainer().getWidth();
if ( parent ) {
var parentLayout = parent.getData( "layout" );
var parentWidth = parent.getRenderContainer().getWidth();
if ( parentLayout.align === "center" ) parentWidth = parentWidth / 2;
var parentX = parentLayout.x;
switch ( appendside ) {
case "left":
nodeLayout.x = parentX - parentWidth;
break;
case "right":
nodeLayout.x = parentX + parentWidth;
break;
default:
break;
}
}
return effectSet;
};
//调整node的位置
var translateNode = function ( node ) {
var nodeShape = node.getRenderContainer();
var Layout = node.getData( "layout" );
var align = Layout.align;
var _rectWidth = nodeShape.getWidth();
var _rectHeight = nodeShape.getHeight();
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;
}
return true;
}; };
} )() );
//主分支 //主分支
var MainBranch = kity.createClass( "DefaultMainBranch", ( function () { var MainBranch = kity.createClass( "DefaultMainBranch", ( function () {
return { return {
...@@ -141,27 +17,31 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -141,27 +17,31 @@ KityMinder.registerModule( "LayoutDefault", function () {
var txt = this._txt = new kity.Text(); var txt = this._txt = new kity.Text();
var rect = this._rect = new kity.Rect(); var rect = this._rect = new kity.Rect();
container.addShapes( [ rect, txt ] ); container.addShapes( [ rect, txt ] );
var connect = this._connect = new kity.Bezier(); var connect = this._connect = new kity.Group();
var bezier = connect.bezier = new kity.Bezier();
var circle = connect.circle = new kity.Circle();
connect.addShapes( [ bezier, circle ] );
minder.getRenderContainer().addShape( connect ).bringTop( minder.getRoot().getRenderContainer() );
var Layout = { var Layout = {
radius: 10, radius: 10,
fill: "gray", fill: "gray",
stroke: new kity.Pen( "white", 1 ), stroke: new kity.Pen( "white", 1 ),
strokeWidth: 1, strokeWidth: 1,
color: "black", color: "black",
padding: [ 5.5, 10, 5.5, 10 ], padding: [ 5.5, 20, 5.5, 20 ],
fontSize: 20, fontSize: 20,
margin: [ 0, 10, 10, 50 ], margin: [ 0, 10, 30, 50 ],
shape: this, shape: this,
align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ), align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ),
appendside: node.getData( "layout" ).appendside appendside: node.getData( "layout" ).appendside
}; };
node.setData( "layout", Layout ); node.setData( "layout", Layout );
txt.translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 ); txt.translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 15 );
this.update();
}, },
update: function () { update: function () {
var txt = this._txt; var txt = this._txt;
var rect = this._rect; var rect = this._rect;
var connect = this._connect;
var node = this._node; var node = this._node;
var Layout = node.getData( "layout" ); var Layout = node.getData( "layout" );
txt.setContent( node.getData( "text" ) ).fill( Layout.color ); txt.setContent( node.getData( "text" ) ).fill( Layout.color );
...@@ -170,8 +50,31 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -170,8 +50,31 @@ KityMinder.registerModule( "LayoutDefault", function () {
var _rectWidth = _txtWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ]; var _rectWidth = _txtWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ];
var _rectHeight = _txtHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ]; var _rectHeight = _txtHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ];
rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( Layout.fill ).stroke( node.getData( "highlight" ) ? new kity.Pen( "white", 3 ) : Layout.stroke ).setRadius( Layout.radius ); rect.setWidth( _rectWidth ).setHeight( _rectHeight ).fill( Layout.fill ).stroke( node.getData( "highlight" ) ? new kity.Pen( "white", 3 ) : Layout.stroke ).setRadius( Layout.radius );
var parentShape = node.getParent().getRenderContainer(); this.updateConnect();
var pBox = parentShape.getRenderBox(); },
updateConnect: function () {
var rootX = minder.getRoot().getData( "layout" ).x;
var rootY = minder.getRoot().getData( "layout" ).y;
var connect = this._connect;
var node = this._node;
var Layout = node.getData( "layout" );
var parent = node.getParent();
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, 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, nodeClosurePoints[ 3 ].y + nodeShape.getHeight() / 2 );
}
var sPosV = sPos.getVertex();
var endPosV = endPos.getVertex();
sPos.setVertex( rootX, rootY );
connect.bezier.setPoints( [ sPos, endPos ] ).stroke( "white" );
connect.circle.setCenter( endPosV.x + ( Layout.appendside === "left" ? 5 : -5 ), endPosV.y ).fill( "white" ).stroke( "gray" ).setRadius( 3 );
}, },
clear: function () { clear: function () {
this._node.getRenderContainer().clear(); this._node.getRenderContainer().clear();
...@@ -183,27 +86,68 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -183,27 +86,68 @@ KityMinder.registerModule( "LayoutDefault", function () {
var SubBranch = kity.createClass( "DefaultSubBranch", ( function () { var SubBranch = kity.createClass( "DefaultSubBranch", ( function () {
return { return {
constructor: function ( node ) { constructor: function ( node ) {
this._node = node;
var container = node.getRenderContainer(); var container = node.getRenderContainer();
var txt = this._txt = new kity.Text(); var txt = this._txt = new kity.Text();
var rect = this._rect = new kity.Rect(); var underline = this._underline = new kity.Path();
var connect = this._connect = new kity.Bezier(); var highlightshape = this._highlightshape = new kity.Rect();
container.addShapes( [ highlightshape, underline, txt ] );
minder.getRenderContainer().addShape( connect ).bringTop( minder.getRoot().getRenderContainer() );
var connect = this._connect = new kity.Path();
var Layout = { var Layout = {
radius: 10, radius: 10,
fill: "skyblue", fill: "skyblue",
stroke: "orange", stroke: new kity.Pen( "#333", 2 ),
strokeWidth: 1, strokeWidth: 1,
color: "black", color: "#ccc",
padding: [ 5, 10, 5, 10 ], padding: [ 5, 10, 5, 10 ],
fontSize: 20, fontSize: 12,
margin: [ 0, 10, 10, 50 ] margin: [ 0, 0, 5, 10 ],
shape: this,
align: ( "leftright" ).replace( node.getData( "layout" ).appendside, "" ),
appendside: node.getData( "layout" ).appendside
}; };
node.setData( "layout", Layout ); node.setData( "layout", Layout );
txt.translate( Layout.padding[ 3 ], Layout.padding[ 0 ] + 10 );
highlightshape.setRadius( 5 ).fill( "#333" ).translate( -1, 0 ).stroke( new kity.Pen( "white", 1 ) );
this.update();
}, },
update: function ( node ) { update: function () {
var node = this._node;
var Layout = node.getData( "layout" );
var underline = this._underline;
var highlightshape = this._highlightshape;
var txt = this._txt;
txt.setContent( node.getData( "text" ) ).fill( Layout.color ).setSize( Layout.fontSize );
var _txtWidth = txt.getWidth();
var _txtHeight = txt.getHeight();
var sY = Layout.padding[ 0 ] + _txtHeight / 2;
underline.getDrawer()
.clear()
.moveTo( 0, _txtHeight + Layout.padding[ 2 ] + Layout.padding[ 0 ] )
.lineTo( _txtWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ], _txtHeight + Layout.padding[ 2 ] + Layout.padding[ 0 ] );
underline.stroke( Layout.stroke );
highlightshape
.setWidth( _txtWidth + Layout.padding[ 1 ] + Layout.padding[ 3 ] )
.setHeight( _txtHeight + Layout.padding[ 0 ] + Layout.padding[ 2 ] )
.setOpacity( node.getData( "highlight" ) ? 1 : 0 );
this.updateConnect();
},
updateConnect: function () {
var connect = this._connect;
var node = this._node;
var parentShape = node.getParent().getRenderContainer();
var parentLayout = node.getParent().getData( "layout" );
var sX, sY = parentLayout.y - parentShape.getHeight() / 2;
if ( node.appendside === "left" ) {
} else {
}
}, },
clear: function () { clear: function () {
this._node.getRenderContainer().clear();
this._connect.remove();
} }
}; };
} )() ); } )() );
...@@ -229,7 +173,8 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -229,7 +173,8 @@ KityMinder.registerModule( "LayoutDefault", function () {
fill: "burlywood", fill: "burlywood",
stroke: new kity.Pen( "white", 1 ), stroke: new kity.Pen( "white", 1 ),
padding: [ 10.5, 20, 10.5, 20 ], padding: [ 10.5, 20, 10.5, 20 ],
radius: 15 radius: 15,
margin: [ 0, 0, 0, 0 ]
}; };
node.setData( "layout", Layout ); node.setData( "layout", Layout );
node.setData( "text", "Minder Root" ); node.setData( "text", "Minder Root" );
...@@ -254,6 +199,132 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -254,6 +199,132 @@ KityMinder.registerModule( "LayoutDefault", function () {
} }
}; };
} )() ); } )() );
//流程：绘制->计算Y坐标->计算X坐标->translate
//绘制node
var drawNode = function ( node ) {
var shape = node.getData( "layout" ).shape;
shape.update();
};
//以某个节点为seed对整体高度进行更改计算
var updateLayoutVertical = function ( node, parent, action ) {
var effectSet = [ node ]; //用于返回受影响的节点集
if ( !parent ) {
return effectSet;
}
var Layout = node.getData( "layout" );
var marginTop = Layout.margin[ 0 ],
marginBottom = Layout.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" );
if ( !childrenLayout1.shape ) break;
var childBranchHeight = childrenLayout1.branchheight;
childrenLayout1.y = sY + marginTop + childBranchHeight / 2;
sY += childBranchHeight;
}
}
return nodeChildren;
};
Layout.branchheight = branchheight;
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++ ) {
var childLayout = children[ i ].getData( "layout" );
if ( childLayout.shape ) sum += childLayout.branchheight;
}
return sum;
};
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 + prtLayout.margin[ 0 ] + prtLayout.margin[ 2 ];
} else {
prtLayout[ appendside + "Height" ] = branchH + prtLayout.margin[ 0 ] + prtLayout.margin[ 2 ];
}
prt = prt.getParent();
} while ( prt );
//遍历
var _buffer = [ minder.getRoot() ];
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 nodeLayout = node.getData( "layout" );
var effectSet = [ node ]; //返回受影响（即需要进行下一步translate的节点）
var parent = node.getParent();
var appendside = nodeLayout.appendside;
var selfWidth = node.getRenderContainer().getWidth();
if ( parent ) {
var parentLayout = parent.getData( "layout" );
var parentWidth = parent.getRenderContainer().getWidth();
if ( parentLayout.align === "center" ) parentWidth = parentWidth / 2;
var parentX = parentLayout.x;
switch ( appendside ) {
case "left":
nodeLayout.x = parentX - parentWidth - nodeLayout.margin[ 1 ] - nodeLayout.margin[ 3 ];
break;
case "right":
nodeLayout.x = parentX + parentWidth + nodeLayout.margin[ 1 ] + nodeLayout.margin[ 3 ];
break;
default:
break;
}
}
return effectSet;
};
//调整node的位置
var translateNode = function ( node ) {
var Layout = node.getData( "layout" );
var nodeShape = node.getRenderContainer();
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;
}
if ( Layout.shape && Layout.shape.updateConnect ) {
Layout.shape.updateConnect();
}
};
//求并集 //求并集
var uSet = function ( a, b ) { var uSet = function ( a, b ) {
for ( var i = 0; i < a.length; i++ ) { for ( var i = 0; i < a.length; i++ ) {
...@@ -338,16 +409,18 @@ KityMinder.registerModule( "LayoutDefault", function () { ...@@ -338,16 +409,18 @@ KityMinder.registerModule( "LayoutDefault", function () {
} }
childbranch = new MainBranch( node ); childbranch = new MainBranch( node );
} else { } else {
node.setType( "sub" );
Layout.appendside = parentLayout.appendside;
childbranch = new SubBranch( node ); childbranch = new SubBranch( node );
} }
// var set1 = updateLayoutVertical( node, parent, "append" ); 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(); var box = set[ i ].getRenderContainer().getRenderBox();
// set[ i ].setPoint( box.x, box.y ); set[ i ].setPoint( box.x, box.y );
// } }
}, },
appendSiblingNode: function ( sibling, node ) { appendSiblingNode: function ( sibling, node ) {
var siblingLayout = sibling.getData( "layout" ); var siblingLayout = sibling.getData( "layout" );
......
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