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 () {
var iconShape = this.shape = new kity.Group();
iconShape.class = "shicon";
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();
plus.getDrawer()
.moveTo( -3, 0 )
.lineTo( 3, 0 )
.moveTo( 0, -3 )
.lineTo( 0, 3 );
.moveTo( 1, 5 )
.lineTo( 8, 5 )
.moveTo( 5, 1 )
.lineTo( 5, 8 );
plus.stroke( "gray" );
var dec = this._dec = new kity.Path();
dec.getDrawer()
.moveTo( -3, 0 )
.lineTo( 3, 0 );
.moveTo( 1, 5 )
.lineTo( 8, 5 );
dec.stroke( "gray" );
if ( node.getType() === "main" ) minder.getRenderContainer().addShape( iconShape );
else {
node.getLayout().subgroup.addShape( iconShape );
}
iconShape.addShapes( [ circle, plus, dec ] );
iconShape.addShapes( [ rect, plus, dec ] );
this.update();
this.switchState();
},
......@@ -54,7 +54,8 @@ KityMinder.registerModule( "LayoutBottom", function () {
var node = this._node;
var Layout = node.getLayout();
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;
this.shape.setTransform( new kity.Matrix().translate( nodeX, nodeY ) );
},
......@@ -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 = {
"root": {
......@@ -80,8 +71,8 @@ KityMinder.registerModule( "LayoutBottom", function () {
fill: '#e9df98',
fontSize: 24,
padding: [ 15.5, 25.5, 15.5, 25.5 ],
margin: [ 0, 0, 0, 0 ],
radius: 10,
margin: [ 0, 0, 20, 0 ],
radius: 0,
highlight: 'rgb(254, 219, 0)'
},
"main": {
......@@ -90,17 +81,18 @@ KityMinder.registerModule( "LayoutBottom", function () {
color: "#333",
padding: [ 6.5, 20, 6.5, 20 ],
fontSize: 16,
margin: [ 20, 10, 10, 10 ],
radius: 5,
margin: [ 20, 20, 10, 10 ],
radius: 0,
highlight: 'rgb(254, 219, 0)'
},
"sub": {
stroke: new kity.Pen( "white", 2 ).setLineCap( "round" ).setLineJoin( "round" ),
color: "white",
color: "#333",
fontSize: 12,
margin: [ 10, 10, 10, 6 ],
margin: [ 10, 10, 10, 30 ],
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 () {
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 ] );
var bgRc = node.getBgRc().clear();
bgRc.addShape( Layout.bgRect = new kity.Rect() );
Layout.bgRect.fill( nodeStyle.fill );
break;
default:
break;
......@@ -155,18 +147,8 @@ KityMinder.registerModule( "LayoutBottom", function () {
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 ] );
width = _contRCWidth + nodeStyle.padding[ 1 ] + nodeStyle.padding[ 3 ];
height = _contRCHeight + nodeStyle.padding[ 0 ] + nodeStyle.padding[ 2 ];
Layout.bgRect.setWidth( width ).setHeight( height );
break;
default:
......@@ -174,22 +156,35 @@ KityMinder.registerModule( "LayoutBottom", function () {
}
contRc.setTransform( new kity.Matrix().translate( nodeStyle.padding[ 3 ], nodeStyle.padding[ 0 ] + node.getTextShape().getHeight() ) );
};
var updateLayoutAll = function ( node, parent, action ) {
var effectSet = [];
var nodeType = node.getType();
var Layout = node.getLayout();
var updateLayoutMain = function () {
var _root = minder.getRoot();
var mainnodes = _root.getChildren();
var countMainWidth = function ( node ) {
var nLayout = node.getLayout();
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 );
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" ) {
Layout.x = getMinderSize().width / 2;
Layout.y = 100;
......@@ -198,35 +193,23 @@ KityMinder.registerModule( "LayoutBottom", function () {
var children = node.getChildren();
for ( var i = 0; i < children.length; i++ ) {
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 );
} else if ( nodeType === "main" ) {
Layout.align = "center";
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 );
}
Layout.align = "left";
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 {
Layout.align = "left";
var parentLayout = parent.getLayout();
if ( action === "append" ) {
if ( parent.getType() === "main" ) {
Layout.x = 10;
Layout.x = nodeStyles.sub.margin[ 3 ];
} else {
Layout.x = parentLayout.x + 10;
Layout.x = parentLayout.x + nodeStyles.sub.margin[ 3 ];
}
}
if ( action === "append" || action === "change" ) {
......@@ -284,7 +267,7 @@ KityMinder.registerModule( "LayoutBottom", function () {
break;
}
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 );
};
......@@ -293,7 +276,48 @@ KityMinder.registerModule( "LayoutBottom", function () {
var Layout = node.getLayout();
var nodeStyle = nodeStyles[ node.getType() ];
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
if ( nodeType !== "root" ) {
if ( !Layout.shicon ) {
......@@ -311,21 +335,13 @@ KityMinder.registerModule( "LayoutBottom", function () {
switch ( nodeType ) {
case "root":
case "main":
case "sub":
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;
}
......@@ -339,7 +355,7 @@ KityMinder.registerModule( "LayoutBottom", function () {
}, false ) );
updateShapeByCont( node );
var set = updateLayoutAll( node );
var set = updateLayoutAll( node, node.getParent(), "change" );
for ( var i = 0; i < set.length; i++ ) {
translateNode( set[ i ] );
updateConnectAndshIcon( set[ i ] );
......@@ -412,6 +428,13 @@ KityMinder.registerModule( "LayoutBottom", function () {
translateNode( 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 ) {
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