Skip to content

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

added new layout

parent 6e44b612
Show whitespace changes
Inline Side-by-side
Showing with 101 additions and 78 deletions
src/module/layout.bottom.js
View file @ 04d9a2bb
...@@ -17,24 +17,24 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -17,24 +17,24 @@ 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 circle = this._circle = new kity.Circle().fill( "white" ).stroke( "gray" ).setRadius( 5 ); var rect = this._rect = new kity.Rect().fill( "white" ).stroke( "gray" ).setRadius( 2 ).setWidth( 9 ).setHeight( 9 );
var plus = this._plus = new kity.Path(); var plus = this._plus = new kity.Path();
plus.getDrawer() plus.getDrawer()
.moveTo( -3, 0 ) .moveTo( 1, 5 )
.lineTo( 3, 0 ) .lineTo( 8, 5 )
.moveTo( 0, -3 ) .moveTo( 5, 1 )
.lineTo( 0, 3 ); .lineTo( 5, 8 );
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( -3, 0 ) .moveTo( 1, 5 )
.lineTo( 3, 0 ); .lineTo( 8, 5 );
dec.stroke( "gray" ); dec.stroke( "gray" );
if ( node.getType() === "main" ) minder.getRenderContainer().addShape( iconShape ); if ( node.getType() === "main" ) minder.getRenderContainer().addShape( iconShape );
else { else {
node.getLayout().subgroup.addShape( iconShape ); node.getLayout().subgroup.addShape( iconShape );
} }
iconShape.addShapes( [ circle, plus, dec ] ); iconShape.addShapes( [ rect, plus, dec ] );
this.update(); this.update();
this.switchState(); this.switchState();
}, },
...@@ -54,7 +54,8 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -54,7 +54,8 @@ KityMinder.registerModule( "LayoutBottom", function () {
var node = this._node; var node = this._node;
var Layout = node.getLayout(); var Layout = node.getLayout();
var nodeShape = node.getRenderContainer(); var nodeShape = node.getRenderContainer();
var nodeX = nodeShape.getRenderBox().closurePoints[ 1 ].x + 10; var nodeType = node.getType();
var nodeX = nodeShape.getRenderBox().closurePoints[ 1 ].x + 5;
var nodeY = nodeShape.getRenderBox().closurePoints[ 0 ].y; var nodeY = nodeShape.getRenderBox().closurePoints[ 0 ].y;
this.shape.setTransform( new kity.Matrix().translate( nodeX, nodeY ) ); this.shape.setTransform( new kity.Matrix().translate( nodeX, nodeY ) );
}, },
...@@ -63,16 +64,6 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -63,16 +64,6 @@ KityMinder.registerModule( "LayoutBottom", function () {
} }
}; };
} )() ); } )() );
//求并集
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 );
};
//样式的配置（包括颜色、字号等） //样式的配置（包括颜色、字号等）
var nodeStyles = { var nodeStyles = {
"root": { "root": {
...@@ -80,8 +71,8 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -80,8 +71,8 @@ KityMinder.registerModule( "LayoutBottom", function () {
fill: '#e9df98', fill: '#e9df98',
fontSize: 24, fontSize: 24,
padding: [ 15.5, 25.5, 15.5, 25.5 ], padding: [ 15.5, 25.5, 15.5, 25.5 ],
margin: [ 0, 0, 0, 0 ], margin: [ 0, 0, 20, 0 ],
radius: 10, radius: 0,
highlight: 'rgb(254, 219, 0)' highlight: 'rgb(254, 219, 0)'
}, },
"main": { "main": {
...@@ -90,17 +81,18 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -90,17 +81,18 @@ KityMinder.registerModule( "LayoutBottom", function () {
color: "#333", color: "#333",
padding: [ 6.5, 20, 6.5, 20 ], padding: [ 6.5, 20, 6.5, 20 ],
fontSize: 16, fontSize: 16,
margin: [ 20, 10, 10, 10 ], margin: [ 20, 20, 10, 10 ],
radius: 5, radius: 0,
highlight: 'rgb(254, 219, 0)' highlight: 'rgb(254, 219, 0)'
}, },
"sub": { "sub": {
stroke: new kity.Pen( "white", 2 ).setLineCap( "round" ).setLineJoin( "round" ), stroke: new kity.Pen( "white", 2 ).setLineCap( "round" ).setLineJoin( "round" ),
color: "white", color: "#333",
fontSize: 12, fontSize: 12,
margin: [ 10, 10, 10, 6 ], margin: [ 10, 10, 10, 30 ],
padding: [ 5, 10, 5.5, 10 ], padding: [ 5, 10, 5.5, 10 ],
highlight: 'rgb(254, 219, 0)' highlight: 'rgb(254, 219, 0)',
fill: 'rgb(231, 243, 255)'
} }
}; };
//更新背景 //更新背景
...@@ -118,9 +110,9 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -118,9 +110,9 @@ KityMinder.registerModule( "LayoutBottom", function () {
Layout.bgShadow.fill( 'black' ).setOpacity( 0.2 ).setRadius( nodeStyle.radius ).translate( 3, 5 ); Layout.bgShadow.fill( 'black' ).setOpacity( 0.2 ).setRadius( nodeStyle.radius ).translate( 3, 5 );
break; break;
case "sub": case "sub":
var underline = Layout.underline = new kity.Path(); var bgRc = node.getBgRc().clear();
var highlightshape = Layout.highlightshape = new kity.Rect().setRadius( 4 ); bgRc.addShape( Layout.bgRect = new kity.Rect() );
node.getBgRc().clear().addShapes( [ Layout.bgRect = new kity.Rect().setRadius( 4 ), highlightshape, underline ] ); Layout.bgRect.fill( nodeStyle.fill );
break; break;
default: default:
break; break;
...@@ -155,18 +147,8 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -155,18 +147,8 @@ KityMinder.registerModule( "LayoutBottom", function () {
Layout.bgShadow.setWidth( width ).setHeight( height ); Layout.bgShadow.setWidth( width ).setHeight( height );
break; break;
case "sub": case "sub":
var _contWidth = contRc.getWidth(); width = _contRCWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ];
var _contHeight = contRc.getHeight(); height = _contRCHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ];
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 ); Layout.bgRect.setWidth( width ).setHeight( height );
break; break;
default: default:
...@@ -174,22 +156,35 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -174,22 +156,35 @@ KityMinder.registerModule( "LayoutBottom", function () {
} }
contRc.setTransform( new kity.Matrix().translate( nodeStyle.padding[ 3 ], nodeStyle.padding[ 0 ] + node.getTextShape().getHeight() ) ); contRc.setTransform( new kity.Matrix().translate( nodeStyle.padding[ 3 ], nodeStyle.padding[ 0 ] + node.getTextShape().getHeight() ) );
}; };
var updateLayoutAll = function ( node, parent, action ) { var updateLayoutMain = function () {
var effectSet = [];
var nodeType = node.getType();
var Layout = node.getLayout();
var _root = minder.getRoot(); var _root = minder.getRoot();
var mainnodes = _root.getChildren(); var mainnodes = _root.getChildren();
var countMainWidth = function ( node ) { var countMainWidth = function ( node ) {
var nLayout = node.getLayout(); var nLayout = node.getLayout();
var selfwidth = node.getRenderContainer().getWidth() + nodeStyles.main.margin[ 1 ] + nodeStyles.main.margin[ 3 ]; var selfwidth = node.getRenderContainer().getWidth() + nodeStyles.main.margin[ 1 ] + nodeStyles.main.margin[ 3 ];
var childwidth = Layout.subgroup.getWidth() + nodeStyles.sub.margin[ 3 ]; var childwidth = nLayout.subgroup.getWidth() + nodeStyles.main.margin[ 1 ] + nodeStyles.sub.margin[ 3 ];
var branchwidth = nLayout.branchwidth = ( selfwidth > childwidth ? selfwidth : childwidth ); var branchwidth = nLayout.branchwidth = ( selfwidth > childwidth ? selfwidth : childwidth );
return branchwidth; return branchwidth;
}; };
var updateMain = function ( node ) { var rootLayout = _root.getLayout();
var rootbranchwidth = 0;
for ( var j = 0; j < mainnodes.length; j++ ) {
rootbranchwidth += countMainWidth( mainnodes[ j ] );
}
var sX = rootLayout.x - rootbranchwidth / 2;
for ( var k = 0; k < mainnodes.length; k++ ) {
var mLayout = mainnodes[ k ].getLayout();
mLayout.x = sX;
sX += mLayout.branchwidth;
}
return mainnodes;
}; };
var updateLayoutAll = function ( node, parent, action ) {
var effectSet = [];
var nodeType = node.getType();
var Layout = node.getLayout();
var _root = minder.getRoot();
var rootLayout = _root.getLayout();
if ( nodeType === "root" ) { if ( nodeType === "root" ) {
Layout.x = getMinderSize().width / 2; Layout.x = getMinderSize().width / 2;
Layout.y = 100; Layout.y = 100;
...@@ -198,35 +193,23 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -198,35 +193,23 @@ KityMinder.registerModule( "LayoutBottom", function () {
var children = node.getChildren(); var children = node.getChildren();
for ( var i = 0; i < children.length; i++ ) { for ( var i = 0; i < children.length; i++ ) {
var childLayout = children[ i ].getLayout(); var childLayout = children[ i ].getLayout();
childLayout.y = Layout.y + node.getRenderContainer().getHeight() + nodeStyles.main.margin[ 0 ]; childLayout.y = Layout.y + node.getRenderContainer().getHeight() + nodeStyles.root.margin[ 2 ] + nodeStyles.main.margin[ 0 ];
} }
effectSet = effectSet.concat( children ); effectSet = effectSet.concat( children );
} else if ( nodeType === "main" ) { } else if ( nodeType === "main" ) {
Layout.align = "center"; Layout.align = "left";
var rootLayout = _root.getLayout();
var rootbranchwidth = 0;
for ( var j = 0; j < mainnodes.length; j++ ) {
rootbranchwidth += countMainWidth( mainnodes[ j ] );
}
var sX = rootLayout.x - rootbranchwidth / 2;
for ( var k = 0; k < mainnodes.length; k++ ) {
var mLayout = mainnodes[ k ].getLayout();
var mWidth = mainnodes[ k ].getRenderContainer().getWidth();
mLayout.x = sX + nodeStyles.main.margin[ 3 ] + mWidth / 2;
sX += ( nodeStyles.main.margin[ 1 ] + nodeStyles.main.margin[ 3 ] + mWidth );
}
if ( action === "append" ) { if ( action === "append" ) {
Layout.y = rootLayout.y + _root.getRenderContainer().getHeight() + nodeStyles.main.margin[ 0 ]; Layout.y = rootLayout.y + _root.getRenderContainer().getHeight() + nodeStyles.root.margin[ 2 ] + nodeStyles.main.margin[ 0 ];
} }
effectSet = mainnodes; effectSet = updateLayoutMain();
} else { } else {
Layout.align = "left"; Layout.align = "left";
var parentLayout = parent.getLayout(); var parentLayout = parent.getLayout();
if ( action === "append" ) { if ( action === "append" ) {
if ( parent.getType() === "main" ) { if ( parent.getType() === "main" ) {
Layout.x = 10; Layout.x = nodeStyles.sub.margin[ 3 ];
} else { } else {
Layout.x = parentLayout.x + 10; Layout.x = parentLayout.x + nodeStyles.sub.margin[ 3 ];
} }
} }
if ( action === "append" || action === "change" ) { if ( action === "append" || action === "change" ) {
...@@ -284,7 +267,7 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -284,7 +267,7 @@ KityMinder.registerModule( "LayoutBottom", function () {
break; break;
} }
if ( node.getType() === "main" ) { if ( node.getType() === "main" ) {
Layout.subgroup.setTransform( new kity.Matrix().translate( Layout.x - node.getRenderContainer().getWidth() / 2 + 10, Layout.y + node.getRenderContainer().getHeight() ) ); Layout.subgroup.setTransform( new kity.Matrix().translate( Layout.x, Layout.y + node.getRenderContainer().getHeight() ) );
} }
node.setPoint( Layout.x, Layout.y ); node.setPoint( Layout.x, Layout.y );
}; };
...@@ -293,7 +276,48 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -293,7 +276,48 @@ KityMinder.registerModule( "LayoutBottom", function () {
var Layout = node.getLayout(); var Layout = node.getLayout();
var nodeStyle = nodeStyles[ node.getType() ]; var nodeStyle = nodeStyles[ node.getType() ];
var connect; var connect;
var _root = minder.getRoot();
var _rootLayout = _root.getLayout();
//更新连线 //更新连线
if ( nodeType === "main" ) {
if ( !Layout.connect ) {
connect = Layout.connect = new kity.Path();
minder.getRenderContainer().addShape( connect );
}
connect = Layout.connect;
var sX = _rootLayout.x;
var sY = _rootLayout.y + _root.getRenderContainer().getHeight();
var transX = Layout.x + node.getRenderContainer().getWidth() / 2;
var transY = sY + nodeStyles.root.margin[ 2 ];
connect.getDrawer().clear()
.moveTo( sX, sY )
.lineTo( sX, transY )
.lineTo( transX, transY )
.lineTo( transX, Layout.y );
connect.stroke( nodeStyles.main.stroke );
} else if ( nodeType === "sub" ) {
var parent = node.getParent();
var parentLayout = parent.getLayout();
if ( !Layout.connect ) {
connect = Layout.connect = new kity.Path();
Layout.subgroup.addShape( connect );
}
connect = Layout.connect;
var ssX, ssY;
if ( parent.getType() === "main" ) {
ssX = 10;
ssY = 0;
} else {
ssX = parentLayout.x + 10;
ssY = parentLayout.y + parent.getRenderContainer().getHeight() + 10;
}
var transsY = Layout.y + node.getRenderContainer().getHeight() / 2;
connect.getDrawer().clear()
.moveTo( ssX, ssY )
.lineTo( ssX, transsY )
.lineTo( Layout.x, transsY );
connect.stroke( nodeStyles.sub.stroke );
}
//更新收放icon //更新收放icon
if ( nodeType !== "root" ) { if ( nodeType !== "root" ) {
if ( !Layout.shicon ) { if ( !Layout.shicon ) {
...@@ -311,21 +335,13 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -311,21 +335,13 @@ KityMinder.registerModule( "LayoutBottom", function () {
switch ( nodeType ) { switch ( nodeType ) {
case "root": case "root":
case "main": case "main":
case "sub":
if ( highlight ) { if ( highlight ) {
Layout.bgRect.fill( nodeStyle.highlight ); Layout.bgRect.fill( nodeStyle.highlight );
} else { } else {
Layout.bgRect.fill( nodeStyle.fill ); Layout.bgRect.fill( nodeStyle.fill );
} }
break; 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: default:
break; break;
} }
...@@ -339,7 +355,7 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -339,7 +355,7 @@ KityMinder.registerModule( "LayoutBottom", function () {
}, false ) ); }, false ) );
updateShapeByCont( node ); updateShapeByCont( node );
var set = updateLayoutAll( node ); var set = updateLayoutAll( node, node.getParent(), "change" );
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 ] ); updateConnectAndshIcon( set[ i ] );
...@@ -412,6 +428,13 @@ KityMinder.registerModule( "LayoutBottom", function () { ...@@ -412,6 +428,13 @@ KityMinder.registerModule( "LayoutBottom", function () {
translateNode( set[ i ] ); translateNode( set[ i ] );
updateConnectAndshIcon( set[ i ] ); updateConnectAndshIcon( set[ i ] );
} }
if ( node.getType() === "sub" ) {
var set1 = updateLayoutMain();
for ( var j = 0; j < set1.length; j++ ) {
translateNode( set1[ j ] );
updateConnectAndshIcon( set1[ j ] );
}
}
}, },
appendSiblingNode: function ( sibling, node ) { appendSiblingNode: function ( sibling, node ) {
var parent = sibling.getParent(); var parent = sibling.getParent();
......
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