Skip to content

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

changed layut file

parent c9b61560
Show whitespace changes
Inline Side-by-side
Showing with 48 additions and 632 deletions
demo/dev.html
View file @ e1a9377f
......@@ -14,48 +14,7 @@
<div id="kityminder" style="height:1000px;width:100%"></div>
</body>
<script>
minder = KM.createMinder(kityminder);
var minderWidth = document.body.clientWidth;
var minderHeight = document.body.clientHeight;
var _root = minder.getRoot();
//根节点初始化的数据（考虑整合）
_root.setData("style",{
radius:10,
fill:"orange",
stroke:"orange",
color:"black",
padding:[10,10,10,10],
fontSize:30
});
_root.setData("x",minderWidth/2);
_root.setData("y",minderHeight/2);
_root.setData("layer",0);
_root.setData("align","center");
_root.setData("text","I am the root");
//标记左子树和右子树的元素
_root.setData("layerleft",[[_root]]);
_root.setData("layerright",[[_root]]);
_root.setData("indexList",[0]);
_root.setData("leftHeight",0);
_root.setData("rightHeight",0);
//标记根节点以及添加子树的方向
_root.setData("appendside","right");
minder.renderNode(_root);
minder.execCommand("createchildnode",_root);
//模拟生成一个初始图
// for(var j=0;j<20;j++){
// var appendSide = Math.random()>0.5?"left":"right";
// var layerArray = _root.getData("layer"+appendSide);
// var layer = parseInt(Math.random()*layerArray.length);
// var layerData = layerArray[layer];
// var root = layerData[parseInt(Math.random()*layerData.length)]
// minder.execCommand("createchildnode",root);
// }
minder.execCommand("switchlayout","default");
</script>
</html>
\ No newline at end of file
dist/dev.php
View file @ e1a9377f
......@@ -14,10 +14,11 @@ $dependency = Array(
'src/core/minder.command.js',
'src/core/minder.node.js',
'src/core/minder.select.js',
'src/module/connect.js',
'src/module/history.js',
'src/module/icon.js',
'src/module/layout.js',
'src/module/layout.default.js',
'src/module/layout.green.js',
'src/module/mouse.js',
'src/module/keyboard.js',
'src/module/editor.js',
......
src/core/minder.command.js
View file @ e1a9377f
......@@ -28,7 +28,6 @@ kity.extendClass( Minder, {
cmd, stoped, result, eventParams;
var me = this;
cmd = this._getCommand( name );
console.log( cmdArgs );
eventParams = {
command: cmd,
......
src/core/minder.js
View file @ e1a9377f
......@@ -14,6 +14,7 @@ var MinderDefaultOptions = {};
var Minder = KityMinder.Minder = kity.createClass( "KityMinder", {
constructor: function ( options ) {
this._options = Utils.extend( window.KITYMINDER_CONFIG || {}, MinderDefaultOptions, options );
this._layoutStyles = {};
this._initEvents();
this._initMinder();
this._initSelection();
......@@ -46,6 +47,15 @@ var Minder = KityMinder.Minder = kity.createClass( "KityMinder", {
getPaper: function () {
return this._paper;
},
addLayoutStyle: function ( name, style ) {
this._layoutStyles[ name ] = style;
},
getLayoutStyle: function ( name ) {
return this._layoutStyles[ name ];
},
getRenderTarget: function () {
return this._renderTarget;
}
} );
......
src/core/minder.node.js
View file @ e1a9377f
......@@ -17,74 +17,6 @@ kity.extendClass( Minder, {
rc.removeShape( current.getRenderContainer() );
} );
},
renderNode: function ( node ) {
var km = this;
var MinderNodeShape = kity.createClass( "MinderNodeShape", ( function () {
return {
constructor: function ( container ) {
this.rect = new kity.Rect();
this.text = new kity.Text();
this.shape = new kity.Group();
this.shape.addShapes( [ this.rect, this.text ] );
container.addShape( this.shape, "nodeShape" );
},
highlight: function () {
this.rect.stroke( new kity.Pen( "white", 3 ) );
},
unhighlight: function () {
this.rect.stroke( this.NormalInfo );
}
};
} )() );
var styledefault = {
radius: 10,
fill: "yellow",
stroke: "orange",
color: "black",
padding: [ 5, 10, 5, 10 ],
fontSize: 20
};
var kR = node.getRenderContainer();
var nodeShape = kR.nodeShape = kR.nodeShape || new MinderNodeShape( kR );
var nd = JSON.parse( JSON.stringify( styledefault ) );
var nodeD = Utils.extend( nd, node.getData( "style" ) );
node.setData( "style", nodeD );
var _style = nodeD;
nodeShape.text
.setContent( node.getData( "text" ) || "Node" )
.setSize( nodeD.fontSize )
.fill( nodeD.color );
var txtWidth = nodeShape.text.getWidth();
var txtHeight = nodeShape.text.getHeight();
var _padding = _style.padding;
var _rectWidth = txtWidth + _padding[ 1 ] + _padding[ 3 ];
var _rectHeight = txtHeight + _padding[ 0 ] + _padding[ 2 ];
nodeShape.text
.setX( _padding[ 3 ] ).setY( _padding[ 0 ] + txtHeight );
nodeShape.NormalInfo = new kity.Pen( _style.stroke, _style.strokeWidth );
nodeShape.rect.setWidth( _rectWidth ).setHeight( _rectHeight ).stroke( nodeShape.NormalInfo ).fill( _style.fill ).setRadius( _style.radius );
switch ( node.getData( "align" ) ) {
case "center":
nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth / 2, node.getData( "y" ) - _rectHeight / 2 ) );
break;
case "right":
nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth, node.getData( "y" ) - _rectHeight / 2 ) );
break;
default:
nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ), node.getData( "y" ) - _rectHeight / 2 ) );
break;
}
if ( node.getData( "highlight" ) ) {
nodeShape.highlight();
} else {
nodeShape.unhighlight();
}
},
renderNodes: function ( nodes ) {
var km = this;
if ( nodes instanceof Array ) {
......
src/core/minder.select.js
View file @ e1a9377f
......@@ -28,7 +28,6 @@ kity.extendClass( Minder, {
},
selectSingle: function ( node ) {
this.highlightNode( node );
return this.clearSelect().select( node );
},
......@@ -51,6 +50,9 @@ kity.extendClass( Minder, {
clearSelect: function ( nodes ) {
if ( !nodes ) {
for ( var _i = 0; _i < this._selectedNodes.length; _i++ ) {
this.unhighlightNode( this._selectedNodes[ _i ] );
}
this._selectedNodes = [];
return this;
}
......
src/core/node.js
View file @ e1a9377f
......@@ -122,7 +122,9 @@ var MinderNode = KityMinder.MinderNode = kity.createClass( "MinderNode", {
}
this.data[ name ] = value;
},
clearData: function () {
this.data = {};
},
getRenderContainer: function () {
return this.rc;
}
......
src/module/connect.js deleted 100644 → 0
View file @ c9b61560
var ConnectModule = KityMinder.registerModule( "ConnectModule", function () {
var ConnectBezier = kity.createClass( "ConnectBezier", ( function () {
function mid( a, b ) {
return ( a + b ) / 2;
}
function getSnapPoints( snaper ) {
if ( snaper.getSnapPoints ) {
return snaper.getSnapPoints();
}
var box = snaper.getRenderBox();
var x1 = box.x,
x2 = box.x + box.width,
y1 = box.y,
y2 = box.y + box.height,
xm = mid( x1, x2 ),
ym = mid( y1, y2 );
return [ {
x: xm,
y: y1,
type: 'top'
}, // top
{
x: x2,
y: ym,
type: 'right'
}, // right
{
x: xm,
y: y2,
type: 'bottom'
}, // bottom
{
x: x1,
y: ym,
type: 'left'
} // left
];
}
var DIR_NORMALS = {
top: new kity.Vector( 0, -1 ),
left: new kity.Vector( -1, 0 ),
bottom: new kity.Vector( 0, 1 ),
right: new kity.Vector( 1, 0 )
};
function fillNormal( snapPoint ) {
if ( snapPoint.normal ) {
return;
}
snapPoint.normal = DIR_NORMALS[ snapPoint.type ] || DIR_NORMALS.left;
}
return {
base: kity.Bezier,
constructor: function ( start, end ) {
this.callBase();
this.setStartSnaper( start );
this.setEndSnaper( end );
this.init();
this.updateConnection();
},
init: function () {
this.addPoint( this.startBesierPoint = new kity.BezierPoint() );
this.addPoint( this.endBesierPoint = new kity.BezierPoint() );
},
bindSnaper: function ( snaper ) {
var me = this;
snaper.on( 'shapeupdate', function () {
me.updateConnection();
} );
},
setStartSnaper: function ( snaper ) {
this.start = snaper;
this.bindSnaper( snaper );
},
setEndSnaper: function ( snaper ) {
this.end = snaper;
this.bindSnaper( snaper );
},
isReady: function () {
return !!( this.start && this.end );
},
calcEndPoints: function () {
var startEnds = getSnapPoints( this.start ),
endEnds = getSnapPoints( this.end );
var nearStart, nearEnd, minDistance = Number.MAX_VALUE;
var i, j, startEnd, endEnd, distance;
// 寻找最近的粘附点
// 暴力解法：可优化但不必要，因为点集不会很大
for ( i = 0; i < startEnds.length; i++ ) {
for ( j = 0; j < endEnds.length; j++ ) {
distance = Math.abs( startEnds[ i ].x - endEnds[ j ].x ) + Math.abs( startEnds[ i ].y - endEnds[ j ].y ) * 0.5; //Vector.fromPoints( startEnds[i], endEnds[j] ).length();
if ( distance < minDistance ) {
minDistance = distance;
nearStart = startEnds[ i ];
nearEnd = endEnds[ j ];
}
}
}
return {
start: nearStart,
end: nearEnd
};
},
updateConnection: function () {
if ( !this.isReady() ) {
return false;
}
var endPoints = this.calcEndPoints(),
startEnd = endPoints.start,
endEnd = endPoints.end;
fillNormal( startEnd );
fillNormal( endEnd );
var pointVector = kity.Vector.fromPoints( startEnd, endEnd );
var forward = kity.Vector.projection( pointVector, startEnd.normal );
var backward = kity.Vector.projection( kity.Vector.reverse( pointVector ), endEnd.normal );
forward = kity.Vector.multipy( forward, 0.5 );
forward = kity.Vector.add( startEnd, forward );
backward = kity.Vector.multipy( backward, 0.5 );
backward = kity.Vector.add( endEnd, backward );
this.startBesierPoint.setVertex( startEnd.x, startEnd.y );
this.startBesierPoint.setForward( forward.x, forward.y );
this.endBesierPoint.setVertex( endEnd.x, endEnd.y );
this.endBesierPoint.setBackward( backward.x, backward.y );
}
};
} )() );
return {
"events": {
"command": function ( e ) {
var command = e;
var minder = this;
switch ( command.commandName ) {
case "rendernode":
( function () {
var node = command.commandArgs[ 0 ];
if ( !( node instanceof Array ) ) {
node = [ node ];
}
for ( var i = 0; i < node.length; i++ ) {
var curnode = node[ i ];
if ( !curnode.getParent() ) {
return false;
} else {
var parent = curnode.getParent();
var connectExist = curnode._connect;
if ( connectExist ) {
connectExist.updateConnection();
} else {
var _connect = new ConnectBezier( parent.getRenderContainer(), curnode.getRenderContainer() );
var nodeD = curnode.getData( "style" );
_connect.stroke( new kity.Pen( nodeD.stroke, nodeD.strokeWidth ) );
curnode._connect = _connect;
minder.getRenderContainer().addShape( _connect );
}
}
}
} )();
break;
case "removenode":
( function () {
var nodes = command.commandArgs[ 0 ];
if ( ( nodes instanceof Array ) === false ) {
nodes = [ nodes ];
}
function removeConnect( node ) {
var connect = node._connect;
if ( connect && connect.remove ) {
connect.remove();
}
}
for ( var i = 0; i < nodes.length; i++ ) {
nodes[ i ].traverse( removeConnect );
}
} )();
}
}
}
};
} );
\ No newline at end of file
src/module/keyboard.js
View file @ e1a9377f
......@@ -66,7 +66,6 @@ KityMinder.registerModule( "KeyboardModule", function () {
var node = this.createdNode = km.execCommand( 'create' + type + 'node', referNode );
km.selectSingle( node );
km.execCommand( 'editText', node );
km.execCommand( 'rendernode', referNode );
this.setContentChanged( true );
},
......
src/module/layout.js
View file @ e1a9377f
KityMinder.registerModule( "LayoutModule", function () {
var defaultHeight = 35;
//更新分支的高度信息
var updateBranchHeight = function ( node, appendSide, root, isAdd, oldParent ) {
var siblings = ( function () {
if ( !isAdd ) {
return oldParent.getChildren();
} else if ( parent === root ) {
return root.getData( "layer" + appendSide )[ 1 ];
} else {
return node.getParent().getChildren();
}
} )();
var parent = isAdd ? node.getParent() : oldParent;
node.setData( "branchheight", defaultHeight + 10 );
if ( isAdd ) {
var add = ( ( siblings.length === 1 && node.getParent() !== root ) ? 0 : ( defaultHeight + 10 ) );
while ( parent || ( parent === root ) ) {
var branchheight = parent.getData( appendSide + "Height" ) || parent.getData( "branchheight" ) || 0;
if ( parent === root ) {
parent.setData( appendSide + "Height", branchheight + add );
} else {
parent.setData( "branchheight", branchheight + add );
}
parent = parent.getParent();
}
if ( siblings.length === 1 ) {
return false;
} else {
return true;
}
} else {
var dec = node.getData( "branchheight" );
do {
var branchheight2 = parent.getData( appendSide + "Height" ) || parent.getData( "branchheight" ) || 0;
if ( parent === root ) {
parent.setData( appendSide + "Height", branchheight2 - dec );
} else {
parent.setData( "branchheight", branchheight2 - dec );
}
parent = parent.getParent();
} while ( parent );
return true;
}
};
var reAnalyze = function ( km, layerArray, appendSide ) {
for ( var lv = 0; lv < layerArray.length; lv++ ) {
var lvData = layerArray[ lv ];
for ( var i = 0; i < lvData.length; i++ ) {
var children = ( lv === 0 ? layerArray[ 1 ] : lvData[ i ].getChildren() );
if ( !children || children.length === 0 ) continue;
var branchheight = lvData[ i ].getData( appendSide + "Height" ) || lvData[ i ].getData( "branchheight" );
var sY = lvData[ i ].getData( "y" ) + ( children[ 0 ].getData( "branchheight" ) - branchheight ) / 2;
for ( var j = 0; j < children.length; j++ ) {
children[ j ].setData( "y", sY );
var part1 = ( children[ j ].getData( "branchheight" ) - 10 ) / 2 + 10;
var part2 = ( children[ j + 1 ] ? ( children[ j + 1 ].getData( "branchheight" ) - 10 ) / 2 : 0 );
sY += ( part1 + part2 );
}
km.renderNodes( children );
}
}
};
var setX = function ( node ) {
var parent = node.getParent();
if ( !parent ) return false;
var parentX = parent.getData( "x" );
var parentWidth = parent.getRenderContainer().getWidth();
if ( parent.getData( "align" ) === "center" ) {
parentWidth = parentWidth / 2;
}
var side = node.getData( "appendside" );
if ( side === "left" ) {
node.setData( "x", parentX - parentWidth - 50 );
} else {
node.setData( "x", parentX + parentWidth + 50 );
}
};
var createChildNode = function ( km, parent, index ) {
console.log( km, parent );
var root = km.getRoot();
var appendSide = parent.getData( "appendside" );
var _node = new MinderNode();
_node.setData( "branchheight", 0 );
parent.insertChild( _node, index );
_node.setData( "appendside", appendSide );
var parentX = parent.getData( "x" );
var parentWidth = parent.getRenderContainer().getWidth();
if ( parent.getData( "align" ) === "center" ) parentWidth = parentWidth / 2;
switch ( appendSide ) {
case "left":
_node.setData( "x", parentX - parentWidth - 50 );
_node.setData( "align", "right" );
break;
case "right":
_node.setData( "x", parentX + parentWidth + 50 );
_node.setData( "align", "left" );
break;
default:
break;
}
var layer = parent.getData( "layer" ) + 1;
var layerArray = root.getData( "layer" + appendSide );
layerArray[ layer ] = layerArray[ layer ] || [];
var layerData = layerArray[ layer ];
var insertPos = 0;
_node.setData( "layer", layer );
//遍历层级链
var getIndexList = function ( node ) {
var indexList = [];
var parent = node;
do {
indexList.push( parent.getIndex() );
parent = parent.getParent();
} while ( parent );
return indexList.reverse();
};
//比较两个层级链的大小
var indexLarger = function ( List1, List2 ) {
var larger = true;
for ( var i = 0; i < List1.length; i++ ) {
if ( List1[ i ] == List2[ i ] ) {
continue;
}
if ( List1[ i ] < List2[ i ] ) {
larger = false;
}
break;
}
return larger;
};
//选定合适的位置插入节点
for ( var l = layerData.length - 1; l >= 0; l-- ) {
var nodeIndexList = getIndexList( _node );
if ( !indexLarger( getIndexList( layerData[ l ] ), nodeIndexList ) ) {
insertPos = l + 1;
break;
}
}
layerData.splice( insertPos, 0, _node );
if ( parent === root ) {
var leftCount = parent.getData( "layerleft" );
var rightCount = parent.getData( "layerright" );
leftCount = leftCount[ 1 ] ? leftCount[ 1 ].length : 0;
rightCount = rightCount[ 1 ] ? rightCount[ 1 ].length : 0;
if ( rightCount > leftCount && rightCount > 1 ) {
parent.setData( "appendside", "left" );
} else {
parent.setData( "appendside", "right" );
}
}
var reAnal = updateBranchHeight( _node, appendSide, root, true );
//判断是重绘全部还是只是添加节点
if ( reAnal ) {
reAnalyze( km, layerArray, appendSide );
} else {
_node.setData( "y", _node.getParent().getData( "y" ) );
km.renderNode( _node );
}
return _node;
};
var updateNode = function ( km, node ) {
km.fire( "updatenode", {
node: node,
rerender: true
var SwitchLayoutCommand = kity.createClass( "SwitchLayoutCommand", ( function () {
return {
base: Command,
execute: function ( km, style ) {
var _style = km.getLayoutStyle( style );
if ( !_style ) return false;
km.renderNode = _style.renderNode;
km.initStyle = _style.initStyle;
km.createChildNode = _style.createChildNode;
km.createSiblingNode = _style.createSiblingNode;
km.removeNode = _style.removeNode;
//清空节点上附加的数据
var _root = km.getRoot();
_root.preTraverse( function ( node ) {
node.clearData();
node.getRenderContainer().clear();
} );
return node;
km.initStyle();
return style;
}
};
} )() );
var CreateChildNodeCommand = kity.createClass( "CreateChildNodeCommand", ( function () {
return {
base: Command,
execute: createChildNode
execute: function ( km, parent ) {
return km.createChildNode( parent );
}
};
} )() );
var CreateSiblingNodeCommand = kity.createClass( "CreateSiblingNodeCommand", ( function () {
return {
base: Command,
execute: function ( km, sibling ) {
var root = km.getRoot();
var parent = sibling.getParent();
if ( parent === root ) {
parent.setData( "appendside", sibling.getData( "appendside" ) );
}
var index = sibling.getIndex() + 1;
if ( parent ) {
return createChildNode( km, parent, index );
} else {
return false;
}
return km.createSiblingNode( sibling );
}
};
} )() );
var RemoveNodeCommand = kity.createClass( "RemoveNodeCommand", ( function () {
return {
base: Command,
execute: function ( km, nodes ) {
var root = km.getRoot();
for ( var i = 0; i < nodes.length; i++ ) {
var parent = nodes[ i ].getParent();
if ( parent ) {
var appendSide = nodes[ i ].getData( "appendside" );
var layer = nodes[ i ].getData( "layer" );
parent.removeChild( nodes[ i ] );
var layerArray = root.getData( "layer" + appendSide );
var layerData = layerArray[ layer ];
//移除层结构中的node
for ( var j = 0; j < layerData.length; j++ ) {
if ( layerData[ j ] === nodes[ i ] ) {
layerData.splice( j, 1 );
break;
}
}
var reAnal = updateBranchHeight( nodes[ i ], appendSide, root, false, parent );
if ( reAnal ) {
reAnalyze( km, layerArray, appendSide );
}
}
}
this.setContentChanged( true );
execute: function ( km, node ) {
km.removeNode( node );
}
};
} )() );
return {
"commands": {
"createchildnode": CreateChildNodeCommand,
"createsiblingnode": CreateSiblingNodeCommand,
"removenode": RemoveNodeCommand
},
"events": {
"removenode": RemoveNodeCommand,
"switchlayout": SwitchLayoutCommand
}
};
} );
\ No newline at end of file
src/module/render.js deleted 100644 → 0
View file @ c9b61560
KityMinder.registerModule( "RenderModule", function () {
var RenderNodeCommand = kity.createClass( "RenderNodeCommand", ( function () {
var MinderNodeShape = kity.createClass( "MinderNodeShape", ( function () {
return {
constructor: function ( container ) {
this.rect = new kity.Rect();
this.text = new kity.Text();
this.shape = new kity.Group();
this.shape.addShapes( [ this.rect, this.text ] );
container.addShape( this.shape, "nodeShape" );
},
highlight: function () {
this.rect.stroke( new kity.Pen( "white", 3 ) );
},
unhighlight: function () {
this.rect.stroke( this.NormalInfo );
}
};
} )() );
var renderNode = function ( km, node ) {
var styledefault = {
radius: 10,
fill: "yellow",
stroke: "orange",
color: "black",
padding: [ 5, 10, 5, 10 ],
fontSize: 20,
};
var kR = node.getRenderContainer();
var nodeShape = kR.nodeShape = kR.nodeShape || new MinderNodeShape( kR );
var nd = JSON.parse( JSON.stringify( styledefault ) );
var nodeD = Utils.extend( nd, node.getData( "style" ) );
node.setData( "style", nodeD );
var _style = nodeD;
nodeShape.text
.setContent( node.getData( "text" ) || "Node" )
.setSize( nodeD.fontSize )
.fill( nodeD.color );
var txtWidth = nodeShape.text.getWidth();
var txtHeight = nodeShape.text.getHeight();
var _padding = _style.padding;
var _rectWidth = txtWidth + _padding[ 1 ] + _padding[ 3 ];
var _rectHeight = txtHeight + _padding[ 0 ] + _padding[ 2 ];
nodeShape.text
.setX( _padding[ 3 ] ).setY( _padding[ 0 ] + txtHeight );
nodeShape.NormalInfo = new kity.Pen( _style.stroke, _style.strokeWidth );
nodeShape.rect.setWidth( _rectWidth ).setHeight( _rectHeight ).stroke( nodeShape.NormalInfo ).fill( _style.fill ).setRadius( _style.radius );
switch ( node.getData( "align" ) ) {
case "center":
nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth / 2, node.getData( "y" ) - _rectHeight / 2 ) );
break;
case "right":
nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ) - _rectWidth, node.getData( "y" ) - _rectHeight / 2 ) );
break;
default:
nodeShape.shape.setTransform( new kity.Matrix().translate( node.getData( "x" ), node.getData( "y" ) - _rectHeight / 2 ) );
break;
}
if ( km.isNodeSelected( node ) ) {
nodeShape.highlight();
}
};
var renderNodes = function ( km, node ) {
if ( node instanceof Array ) {
if ( node.length === 0 ) return false;
for ( var i = 0; i < node.length; i++ ) {
renderNode( km, node[ i ] );
}
} else {
renderNode( km, node );
}
};
return {
base: Command,
execute: renderNodes
};
} )() );
return {
"init": function ( config ) {
},
"commands": {
//todo:command字典，name－action 键值对模式编写
"rendernode": RenderNodeCommand,
},
"events": {
//todo:事件响应函数绑定列表,事件名-响应函数 键值对模式编写
"click": function ( e ) {
},
"keydown keyup": function ( e ) {
}
}
};
} );
\ 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