Skip to content

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

重构基本完成

parent 730566aa
Hide whitespace changes
Inline Side-by-side
Showing with 728 additions and 461 deletions
import.js
View file @ c007c290
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
'module/nodetext.js', 'module/nodetext.js',
'module/hyperlink.js', 'module/hyperlink.js',
'module/expand.js', 'module/expand.js',
'module/connect.js',
'ui/jquery-ui-1.10.4.custom.min.js', 'ui/jquery-ui-1.10.4.custom.min.js',
'ui/widget.js', 'ui/widget.js',
'ui/button.js', 'ui/button.js',
......
kity @ f62ec70b
Subproject commit 62a846c829a0306ba7493885b44c38d68cd3d232 Subproject commit f62ec70beb8198072693e1b7f1748cca46b685fb
kityminder.config.js
View file @ c007c290
(function () { (function() {
function getKMBasePath(docUrl, confUrl) { function getKMBasePath(docUrl, confUrl) {
return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath()); return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath());
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
'KITYMINDER_HOME_URL': getKMBasePath(), 'KITYMINDER_HOME_URL': getKMBasePath(),
//定义工具栏 //定义工具栏
toolbars: [ toolbars: [
'hand | zoom-in zoom zoom-out | collapsenode expandnode | undo redo | bold italic | fontfamily fontsize forecolor | saveto | switchlayout | hyperlink unhyperlink image removeimage | markers resource | node | help' 'hand | zoom-in zoom zoom-out | collapsenode expandnode | undo redo | bold italic | fontfamily fontsize forecolor | saveto | hyperlink unhyperlink image removeimage | markers resource | node | help'
] ]
//只读模式，默认是false //只读模式，默认是false
//readOnly: true //readOnly: true
......
src/adapter/node.js
View file @ c007c290
KM.registerToolbarUI( 'node', function ( name ) { KM.registerToolbarUI('node', function(name) {
var shortcutKeys = { var shortcutKeys = {
"appendsiblingnode": "enter", 'appendsiblingnode': 'enter',
"appendchildnode": "tab", 'appendchildnode': 'tab',
"removenode": "del|backspace", 'removenode': 'del|backspace',
"editnode": "F2" 'editnode': 'F2'
}; };
var me = this, var me = this,
msg = me.getLang( 'node' ), msg = me.getLang('node'),
label = me.getLang( 'tooltips.' + name ), label = me.getLang('tooltips.' + name),
options = { options = {
label: label, label: label,
title: label, title: label,
comboboxName: name, comboboxName: name,
items: me.getOptions( name ) || [], items: {
'appendsiblingnode': 'appendsiblingnode',
'appendchildnode': 'appendchildnode',
'editnode': 'editnode',
'removenode': 'removenode'
},
itemStyles: [], itemStyles: [],
value: [], value: [],
autowidthitem: [], autowidthitem: [],
...@@ -21,62 +26,63 @@ KM.registerToolbarUI( 'node', function ( name ) { ...@@ -21,62 +26,63 @@ KM.registerToolbarUI( 'node', function ( name ) {
enabledSelected: false enabledSelected: false
}, },
$combox = null; $combox = null;
if ( options.items.length == 0 ) {
if (options.items.length === 0) {
return null; return null;
} }
//实例化 //实例化
$combox = $.kmuibuttoncombobox( transForInserttopic( options ) ).css( 'zIndex', me.getOptions( 'zIndex' ) + 1 ); $combox = $.kmuibuttoncombobox(transForInserttopic(options)).css('zIndex', me.getOptions('zIndex') + 1);
var comboboxWidget = $combox.kmui(); var comboboxWidget = $combox.kmui();
comboboxWidget.on( 'comboboxselect', function ( evt, res ) { comboboxWidget.on('comboboxselect', function(evt, res) {
me.execCommand( res.value, new MinderNode( me.getLang().topic ), true ); me.execCommand(res.value, me.getLang().topic);
} ).on( "beforeshow", function () { }).on('beforeshow', function() {
if ( $combox.parent().length === 0 ) { if ($combox.parent().length === 0) {
$combox.appendTo( me.$container.find( '.kmui-dialog-container' ) ); $combox.appendTo(me.$container.find('.kmui-dialog-container'));
} }
var combox = $combox.kmui(); var combox = $combox.kmui();
combox.traverseItems( function ( label, value ) { combox.traverseItems(function(label, value) {
if ( me.queryCommandState( value ) == -1 ) { if (me.queryCommandState(value) == -1) {
combox.disableItemByLabel( label ) combox.disableItemByLabel(label);
} else { } else {
combox.enableItemByLabel( label ) combox.enableItemByLabel(label);
} }
} ) });
} ); });
//状态反射 //状态反射
me.on( 'interactchange', function () { me.on('interactchange', function() {
var state = 0; var state = 0;
utils.each( shortcutKeys, function ( k ) { utils.each(shortcutKeys, function(k) {
state = me.queryCommandState( k ); state = me.queryCommandState(k);
if ( state != -1 ) { if (state != -1) {
return false; return false;
} }
} ); });
//设置按钮状态 //设置按钮状态
comboboxWidget.button().kmui().disabled( state == -1 ).active( state == 1 ); comboboxWidget.button().kmui().disabled(state == -1).active(state == 1);
} ); });
//comboboxWidget.button().kmui().disabled(-1); //comboboxWidget.button().kmui().disabled(-1);
return comboboxWidget.button().addClass( 'kmui-combobox' ); return comboboxWidget.button().addClass('kmui-combobox');
function transForInserttopic( options ) { function transForInserttopic(options) {
var tempItems = []; var tempItems = [];
utils.each( options.items, function ( k, v ) { utils.each(options.items, function(k, v) {
options.value.push( v ); options.value.push(v);
tempItems.push( ( msg[ k ] || k ) + '(' + shortcutKeys[ v ].toUpperCase() + ')' ); tempItems.push((msg[k] || k) + '(' + shortcutKeys[v].toUpperCase() + ')');
options.autowidthitem.push( $.wordCountAdaptive( tempItems[ tempItems.length - 1 ] ) ); options.autowidthitem.push($.wordCountAdaptive(tempItems[tempItems.length - 1]));
} ); });
options.items = tempItems; options.items = tempItems;
return options; return options;
} }
} ); });
\ No newline at end of file \ No newline at end of file
src/core/layout.js
View file @ c007c290
...@@ -75,6 +75,29 @@ kity.extendClass(MinderNode, { ...@@ -75,6 +75,29 @@ kity.extendClass(MinderNode, {
return this._layoutTransform || new kity.Matrix(); return this._layoutTransform || new kity.Matrix();
}, },
getLayoutBox: function() {
var matrix = this._lastLayoutTransform || new kity.Matrix();
return matrix.transformBox(this.getContentBox());
},
getLayoutPoint: function() {
var matrix = this._lastLayoutTransform || new kity.Matrix();
return matrix.transformPoint(new kity.Point());
},
getLayoutOffset: function() {
var data = this.getData('layoutOffset');
if (data) return new kity.Point(data.x, data.y);
return new kity.Point();
},
setLayoutOffset: function(p) {
this.setData('layoutOffset', {
x: p.x,
y: p.y
});
},
getLayoutRoot: function() { getLayoutRoot: function() {
if (this.isLayoutRoot()) { if (this.isLayoutRoot()) {
return this; return this;
...@@ -129,12 +152,13 @@ kity.extendClass(Minder, { ...@@ -129,12 +152,13 @@ kity.extendClass(Minder, {
applyLayoutResult: function(duration) { applyLayoutResult: function(duration) {
var root = this.getRoot(); var root = this.getRoot();
var me = this;
function apply(node, pMatrix) { function apply(node, pMatrix) {
var matrix = node.getLayoutTransform().merge(pMatrix); var matrix = node.getLayoutTransform().merge(pMatrix);
var lastMatrix = node._lastLayoutTransform || new kity.Matrix(); var lastMatrix = node._lastLayoutTransform || new kity.Matrix();
if (!matrix.equals(lastMatrix)) { if (!matrix.equals(lastMatrix) || true) {
// 如果当前有动画，停止动画 // 如果当前有动画，停止动画
if (node._layoutTimeline) { if (node._layoutTimeline) {
...@@ -144,15 +168,23 @@ kity.extendClass(Minder, { ...@@ -144,15 +168,23 @@ kity.extendClass(Minder, {
// 如果要求以动画形式来更新，创建动画 // 如果要求以动画形式来更新，创建动画
if (duration > 0) { if (duration > 0) {
node._layoutTimeline = new kity.Animator(lastMatrix, matrix, function(rc, value) { node._layoutTimeline = new kity.Animator(lastMatrix, matrix, function(node, value) {
rc.setMatrix(node._lastLayoutTransform = value); node.getRenderContainer().setMatrix(node._lastLayoutTransform = value);
}).start(node.getRenderContainer(), duration, 'ease'); me.fire('layoutapply', {
node: node,
matrix: value
});
}).start(node, duration, 'ease');
} }
// 否则直接更新 // 否则直接更新
else { else {
node.getRenderContainer().setMatrix(matrix); node.getRenderContainer().setMatrix(matrix);
node._lastLayoutTransform = matrix; node._lastLayoutTransform = matrix;
me.fire('layoutapply', {
node: node,
matrix: matrix
});
} }
} }
...@@ -162,6 +194,7 @@ kity.extendClass(Minder, { ...@@ -162,6 +194,7 @@ kity.extendClass(Minder, {
} }
apply(root, new kity.Matrix()); apply(root, new kity.Matrix());
this.fire('layout');
return this; return this;
}, },
}); });
\ No newline at end of file
src/core/minder.data.js
View file @ c007c290
...@@ -43,12 +43,10 @@ function importNode(node, json, km) { ...@@ -43,12 +43,10 @@ function importNode(node, json, km) {
} }
node.setData('text', data.text || km.getLang(DEFAULT_TEXT[node.getType()])); node.setData('text', data.text || km.getLang(DEFAULT_TEXT[node.getType()]));
node.render();
var childrenTreeData = json.children; var childrenTreeData = json.children || [];
if (!childrenTreeData) return;
for (var i = 0; i < childrenTreeData.length; i++) { for (var i = 0; i < childrenTreeData.length; i++) {
var childNode = km.createNode(); var childNode = km.createNode(null, node);
node.appendChild(childNode);
importNode(childNode, childrenTreeData[i], km); importNode(childNode, childrenTreeData[i], km);
} }
return node; return node;
...@@ -126,6 +124,9 @@ kity.extendClass(Minder, { ...@@ -126,6 +124,9 @@ kity.extendClass(Minder, {
} }
importNode(this._root, json, this); importNode(this._root, json, this);
this._root.preTraverse(function(node) {
node.render();
});
this._root.layout(); this._root.layout();
this.fire('beforeimport', params); this.fire('beforeimport', params);
......
src/core/minder.module.js
View file @ c007c290
...@@ -13,7 +13,8 @@ kity.extendClass(Minder, { ...@@ -13,7 +13,8 @@ kity.extendClass(Minder, {
right: [], right: [],
top: [], top: [],
bottom: [], bottom: [],
outline: [] outline: [],
outside: []
}; };
var i, name, type, module, moduleDeals, var i, name, type, module, moduleDeals,
......
src/core/minder.node.js
View file @ c007c290
...@@ -9,9 +9,14 @@ kity.extendClass(Minder, { ...@@ -9,9 +9,14 @@ kity.extendClass(Minder, {
root.minder = this; root.minder = this;
}, },
createNode: function(unknown) { createNode: function(unknown, parent, index) {
var node = new MinderNode(unknown); var node = new MinderNode(unknown);
if (parent) parent.insertChild(node, index);
this.handelNodeCreate(node); this.handelNodeCreate(node);
this.fire('nodecreate', {
node: node
});
return node; return node;
}, },
...@@ -19,6 +24,9 @@ kity.extendClass(Minder, { ...@@ -19,6 +24,9 @@ kity.extendClass(Minder, {
if (node.parent) { if (node.parent) {
node.parent.removeChild(node); node.parent.removeChild(node);
this.handelNodeRemove(node); this.handelNodeRemove(node);
this.fire('noderemove', {
node: node
});
} }
}, },
......
src/core/node.js
View file @ c007c290
...@@ -68,9 +68,6 @@ var MinderNode = KityMinder.MinderNode = kity.createClass('MinderNode', { ...@@ -68,9 +68,6 @@ var MinderNode = KityMinder.MinderNode = kity.createClass('MinderNode', {
* 获得节点的类型（root|main|sub） * 获得节点的类型（root|main|sub）
*/ */
getType: function(type) { getType: function(type) {
if (this.type) {
return this.type;
}
this.type = ['root', 'main', 'sub'][Math.min(this.getLevel(), 2)]; this.type = ['root', 'main', 'sub'][Math.min(this.getLevel(), 2)];
return this.type; return this.type;
}, },
......
src/core/render.js
View file @ c007c290
var Renderer = kity.createClass('Renderer', { var Renderer = kity.createClass('Renderer', {
create: function(node) { constructor: function(node) {
this.node = node;
},
create: function() {
throw new Error('Not implement: Renderer.create()'); throw new Error('Not implement: Renderer.create()');
}, },
update: function(node) { update: function() {
throw new Error('Not implement: Renderer.update()'); throw new Error('Not implement: Renderer.update()');
} }
}); });
...@@ -25,9 +29,10 @@ kity.extendClass(Minder, { ...@@ -25,9 +29,10 @@ kity.extendClass(Minder, {
renderers = renderers.concat(registered.top); renderers = renderers.concat(registered.top);
renderers = renderers.concat(registered.bottom); renderers = renderers.concat(registered.bottom);
renderers = renderers.concat(registered.outline); renderers = renderers.concat(registered.outline);
renderers = renderers.concat(registered.outside);
node._renderers = renderers.map(function(Renderer) { node._renderers = renderers.map(function(Renderer) {
var renderer = new Renderer(); var renderer = new Renderer(node);
renderer.create(node); renderer.create(node);
return renderer; return renderer;
}); });
...@@ -49,11 +54,15 @@ kity.extendClass(Minder, { ...@@ -49,11 +54,15 @@ kity.extendClass(Minder, {
} }
for (i = 0; i < node._renderers.length; i++) { for (i = 0; i < node._renderers.length; i++) {
latestBox = node._renderers[i].update(node); latestBox = node._renderers[i].update(node, latestBox);
if (latestBox) { if (latestBox) {
node._contentBox = contentBox = g.mergeBox(contentBox, latestBox); node._contentBox = contentBox = g.mergeBox(contentBox, latestBox);
} }
} }
this.fire('noderender', {
node: node
});
} }
}); });
...@@ -62,7 +71,25 @@ kity.extendClass(MinderNode, { ...@@ -62,7 +71,25 @@ kity.extendClass(MinderNode, {
this.getMinder().renderNode(this); this.getMinder().renderNode(this);
return this; return this;
}, },
getRenderer: function(type) {
var rs = this._renderers;
for (var i = 0; i < rs.length; i++) {
if (rs[i] instanceof type) return rs[i];
}
return null;
},
getContentBox: function() { getContentBox: function() {
return this._contentBox; return this.parent && this.parent.isCollapsed() ? {
x: 0,
y: 0,
width: 0,
height: 0,
left: 0,
top: 0,
bottom: 0,
right: 0,
cx: 0,
cy: 0
} : this._contentBox;
} }
}); });
\ No newline at end of file
src/layout/default.js
View file @ c007c290
/* global Layout:true */ /* global Layout:true */
window.layoutSwitch = true;
KityMinder.registerLayout('default', kity.createClass({ KityMinder.registerLayout('default', kity.createClass({
base: Layout, base: Layout,
doLayout: function(node) {
var layout = this;
if (node.isLayoutRoot()) {
this.doLayoutRoot(node);
} else {
this.arrange(node, node.children, layout.getSide(node));
}
},
getSide: function(node) { getSide: function(node) {
while (!node.parent.isLayoutRoot()) { while (!node.parent.isLayoutRoot()) {
node = node.parent; node = node.parent;
...@@ -16,76 +26,85 @@ KityMinder.registerLayout('default', kity.createClass({ ...@@ -16,76 +26,85 @@ KityMinder.registerLayout('default', kity.createClass({
}[mainIndex] || (mainIndex % 2 ? 'right' : 'left'); }[mainIndex] || (mainIndex % 2 ? 'right' : 'left');
}, },
doLayout: function(node) { doLayoutRoot: function(root) {
var layout = this; var mains = root.getChildren();
var group = {
left: [],
right: []
};
var _this = this;
function arrange(node, children, side) { mains.forEach(function(main) {
//if (!children.length) return; group[_this.getSide(main)].push(main);
});
var height = 0; this.arrange(root, group.left, 'left');
this.arrange(root, group.right, 'right');
},
var childBoxes = children.map(function(node, index, children) { arrange: function(parent, children, side) {
var box = layout.getTreeBox([node]); if (!children.length) return;
height += box.height; var _this = this;
if (index > 0) {
height += children[index - 1].getStyle('margin-bottom');
height += node.getStyle('margin-top');
}
return box;
});
var contentBox = node.getContentBox(); // children 所占的总树高
var x, y = -height / 2; var totalTreeHeight = 0;
for (var i = 0; i < children.length; i++) { // 计算每个 child 的树所占的矩形区域
var childTreeBoxes = children.map(function(node, index, children) {
var box = _this.getTreeBox([node]);
if (side == 'right') { // 计算总树高，需要把竖直方向上的 margin 加入计算
x = contentBox.x + contentBox.width - children[i].getContentBox().x; totalTreeHeight += box.height;
x += node.getStyle('margin-right') + node.children[i].getStyle('margin-left');
} else {
x = contentBox.x - children[i].getContentBox().width - children[i].getContentBox().x;
x -= node.getStyle('margin-left') + node.children[i].getStyle('margin-right');
}
y += childBoxes[i].height / 2; if (index > 0) {
totalTreeHeight += children[index - 1].getStyle('margin-bottom');
totalTreeHeight += node.getStyle('margin-top');
}
if (i > 0) { return box;
y += children[i].getStyle('margin-top'); });
}
children[i].setLayoutTransform(new kity.Matrix().translate(x, y)); var nodeContentBox = parent.getContentBox();
var i, x, y, child, childTreeBox, childContentBox;
var transform = new kity.Matrix();
y += childBoxes[i].height / 2 + children[i].getStyle('margin-bottom'); y = -totalTreeHeight / 2;
}
var branchBox = layout.getBranchBox(children); for (i = 0; i < children.length; i++) {
var dy = (branchBox.y + branchBox.height / 2) - (contentBox.y + contentBox.height / 2); child = children[i];
childTreeBox = childTreeBoxes[i];
childContentBox = child.getContentBox();
for (i = 0; i < children.length; i++) { if (!childContentBox.height) continue;
children[i].getLayoutTransform().translate(0, -dy);
// 水平方向上的布局
if (side == 'right') {
x = nodeContentBox.right - childContentBox.left;
x += parent.getStyle('margin-right') + child.getStyle('margin-left');
} else {
x = nodeContentBox.left - childContentBox.right;
x -= parent.getStyle('margin-left') + child.getStyle('margin-right');
} }
} // 竖直方向上的布局
y += childTreeBox.height / 2;
function layoutRoot(node) { if (i > 0) {
var mains = node.getChildren(); y += children[i].getStyle('margin-top');
var group = { }
left: [],
right: []
};
mains.forEach(function(main) { children[i].setLayoutTransform(new kity.Matrix().translate(x, y));
group[layout.getSide(main)].push(main);
});
arrange(node, group.left, 'left'); y += childTreeBox.height / 2 + children[i].getStyle('margin-bottom');
arrange(node, group.right, 'right');
} }
if (node.isLayoutRoot()) { if (parent.isRoot()) {
layoutRoot(node); var branchBox = this.getBranchBox(children);
} else { var dy = branchBox.cy - nodeContentBox.cy;
arrange(node, node.children, layout.getSide(node));
children.forEach(function(child) {
child.getLayoutTransform().translate(0, -dy);
});
} }
} }
})); }));
\ No newline at end of file
src/module/connect.js 0 → 100644
View file @ c007c290
/* global Renderer: true */
KityMinder.registerModule('Connect', function() {
return {
events: {
'nodecreate': function(e) {
var node = e.node;
if (node.isRoot()) return;
var connection = new kity.Path()
.stroke(node.getStyle('connect-color') || 'white', node.getStyle('connect-width') || 2);
node._connection = connection;
this.getRenderContainer().prependShape(connection);
},
'noderemove': function(e) {
var node = e.node;
var me = this;
node.traverse(function(node) {
me.getRenderContainer().removeShape(node._connection);
});
},
'layoutapply noderender': function(e) {
var node = e.node;
var connection = node._connection;
var parent = node.parent;
if (!parent) return;
var box = node.getLayoutBox(),
pBox = parent.getLayoutBox();
var start, end, vector;
var abs = Math.abs;
var pathData = [];
var side = box.cx > pBox.cx ? 'right' : 'left';
if (parent.isCollapsed()) {
connection.setVisible(false);
return;
}
connection.setVisible(true);
switch (node.getType()) {
case 'main':
start = new kity.Point(pBox.cx, pBox.cy);
end = side == 'left' ?
new kity.Point(box.right, box.cy) :
new kity.Point(box.left, box.cy);
vector = kity.Vector.fromPoints(start, end);
pathData.push('M', start);
pathData.push('A', abs(vector.x), abs(vector.y), 0, 0, (vector.x * vector.y > 0 ? 0 : 1), end);
break;
case 'sub':
var radius = node.getStyle('connect-radius');
if (side == 'right') {
start = new kity.Point(box.left - node.getStyle('margin-left') / 2, pBox.cy);
end = new kity.Point(box.right + node.getStyle('margin-right') / 2, box.bottom);
} else {
start = new kity.Point(box.right + node.getStyle('margin-right') / 2, pBox.cy);
end = new kity.Point(box.left - node.getStyle('margin-left') / 2, box.bottom);
}
var isTop = parent.children.length > 1 && node.getIndex() === 0;
pathData.push('M', start);
pathData.push('L', start.x, isTop ? (end.y + radius) : (end.y - radius));
var sf = +(side == 'right' && isTop || side == 'left' && !isTop);
var ex = side == 'right' ? (start.x + radius) : (start.x - radius);
pathData.push('A', radius, radius, 0, 0, sf, ex, end.y);
pathData.push('L', end);
}
connection.setPathData(pathData);
}
}
};
});
\ No newline at end of file
src/module/dragtree.js
View file @ c007c290
var GM = KityMinder.Geometry; var GM = KityMinder.Geometry;
// 矩形的变形动画定义 // 矩形的变形动画定义
var AreaAnimator = kity.createClass("AreaAnimator", { var AreaAnimator = kity.createClass('AreaAnimator', {
base: kity.Animator, base: kity.Animator,
constructor: function(startArea, endArea) { constructor: function(startArea, endArea) {
startArea.opacity = 0; startArea.opacity = 0;
...@@ -18,26 +18,22 @@ var MoveToParentCommand = kity.createClass('MoveToParentCommand', { ...@@ -18,26 +18,22 @@ var MoveToParentCommand = kity.createClass('MoveToParentCommand', {
base: Command, base: Command,
execute: function(minder, nodes, parent) { execute: function(minder, nodes, parent) {
var node; var node;
if ((!parent.isExpanded()) && (parent.getChildren().length > 0) && (parent.getType() !== 'root')) {
minder.expandNode(parent);
}
for (var i = nodes.length - 1; i >= 0; i--) { for (var i = nodes.length - 1; i >= 0; i--) {
node = nodes[i]; node = nodes[i];
if (node.getParent()) { if (node.parent) {
minder.removeNode([node]); node.parent.removeChild(node);
minder.appendChildNode(parent, node); parent.appendChild(node);
if (node.isExpanded() && node.getChildren().length !== 0) { node.render();
minder.expandNode(node);
}
} }
} }
parent.expand();
minder.select(nodes, true); minder.select(nodes, true);
} }
}); });
function boxMapper(node) { function boxMapper(node) {
return node.getRenderContainer().getRenderBox('top'); return node.getLayoutBox();
} }
// 对拖动对象的一个替代盒子，控制整个拖放的逻辑，包括： // 对拖动对象的一个替代盒子，控制整个拖放的逻辑，包括：
...@@ -138,7 +134,7 @@ var DragBox = kity.createClass('DragBox', { ...@@ -138,7 +134,7 @@ var DragBox = kity.createClass('DragBox', {
_drawForDragMode: function() { _drawForDragMode: function() {
this._text.setContent(this._dragSources.length + ' items'); this._text.setContent(this._dragSources.length + ' items');
this._text.setPosition(this._startPosition.x, this._startPosition.y + 5); this._text.setPosition(this._startPosition.x, this._startPosition.y + 5);
this._minder.getPaper().addShape(this); this._minder.getRenderContainer().addShape(this);
}, },
_shrink: function() { _shrink: function() {
// 合并所有拖放源图形的矩形即可 // 合并所有拖放源图形的矩形即可
...@@ -238,6 +234,11 @@ var DragBox = kity.createClass('DragBox', { ...@@ -238,6 +234,11 @@ var DragBox = kity.createClass('DragBox', {
} }
var movement = kity.Vector.fromPoints(this._startPosition, this._dragPosition); var movement = kity.Vector.fromPoints(this._startPosition, this._dragPosition);
// var minder = this._minder;
// this._dragSources.forEach(function(source) {
// source.setLayoutOffset(movement);
// minder.layout();
// });
this.setTranslate(movement); this.setTranslate(movement);
...@@ -258,7 +259,7 @@ var DragBox = kity.createClass('DragBox', { ...@@ -258,7 +259,7 @@ var DragBox = kity.createClass('DragBox', {
}); });
KityMinder.registerModule("DragTree", function() { KityMinder.registerModule('DragTree', function() {
var dragStartPosition, dragBox, dragTargets, dropTargets, dragTargetBoxes, dropTarget; var dragStartPosition, dragBox, dragTargets, dropTargets, dragTargetBoxes, dropTarget;
return { return {
...@@ -269,11 +270,11 @@ KityMinder.registerModule("DragTree", function() { ...@@ -269,11 +270,11 @@ KityMinder.registerModule("DragTree", function() {
mousedown: function(e) { mousedown: function(e) {
// 单选中根节点也不触发拖拽 // 单选中根节点也不触发拖拽
if (e.getTargetNode() && e.getTargetNode() != this.getRoot()) { if (e.getTargetNode() && e.getTargetNode() != this.getRoot()) {
this._dragBox.dragStart(e.getPosition()); this._dragBox.dragStart(e.getPosition(this.getRenderContainer()));
} }
}, },
'mousemove': function(e) { 'mousemove': function(e) {
this._dragBox.dragMove(e.getPosition()); this._dragBox.dragMove(e.getPosition(this.getRenderContainer()));
}, },
'mouseup': function(e) { 'mouseup': function(e) {
this._dragBox.dragEnd(); this._dragBox.dragEnd();
......
src/module/expand.js
View file @ c007c290
/* global Renderer: true */
KityMinder.registerModule('Expand', function() { KityMinder.registerModule('Expand', function() {
var minder = this; var minder = this;
var EXPAND_STATE_DATA = 'expandState', var EXPAND_STATE_DATA = 'expandState',
STATE_EXPAND = 'expand', STATE_EXPAND = 'expand',
STATE_COLLAPSE = 'collapse'; STATE_COLLAPSE = 'collapse';
var layerTravel = function(root, fn) {
var _buffer = [root];
while (_buffer.length !== 0) {
fn(_buffer[0]);
_buffer = _buffer.concat(_buffer[0].getChildren());
_buffer.shift();
}
};
//获取选中的最上层节点
var filterDuplicate = function(nodes) {
var _buffer = ([]).concat(nodes);
var resultSet = [];
for (var i = 0; i < _buffer.length; i++) {
var parent = _buffer[i].getParent();
if (!parent) {
resultSet = [_buffer[i]];
break;
} else {
//筛选
while (parent) {
if (_buffer.indexOf(parent) !== -1) {
_buffer[i] = null;
break;
}
parent = parent.getParent();
}
if (_buffer[i]) resultSet.push(_buffer[i]);
}
}
return resultSet;
};
var expandAll = function(km, deal) {
var selectedNodes = km.getSelectedNodes();
var topNodes = filterDuplicate(selectedNodes);
if (selectedNodes.length === 0 || selectedNodes[0].getType() === 'root' || topNodes[0].getType() === 'root') {
layerTravel(km.getRoot(), function(n) {
if (deal === 'expand') n.expand();
else n.collapse();
});
km.initStyle();
} else {
for (var i = 0; i < topNodes.length; i++) {
var node = topNodes[i];
var children = node.getChildren();
if (children.length === 0) {
continue;
} else {
layerTravel(node, function(n) {
if (n !== node) {
if (deal === 'expand') n.expand();
else n.collapse();
}
});
var judge_val;
if (deal === 'expand') {
judge_val = !node.isExpanded();
} else {
judge_val = node.isExpanded();
}
if (judge_val) {
km.expandNode(node);
} else {
km.expandNode(node);
km.expandNode(node);
}
}
}
}
for (var j = 0; j < selectedNodes.length; j++) {
km.highlightNode(selectedNodes[j]);
}
}
// var setOptionValue = function ( root, layer, sub ) {
// var cur_layer = 1;
// var _buffer = root.getChildren();
// while ( cur_layer < layer ) {
// var layer_len = _buffer.length;
// for ( var i = 0; i < layer_len; i++ ) {
// var c = _buffer[ i ].getChildren();
// if ( c.length < sub || ( !sub ) ) {
// _buffer[ i ].expand();
// _buffer = _buffer.concat( c );
// }
// }
// _buffer.splice( 0, layer_len );
// cur_layer++;
// }
// }
/** /**
* 该函数返回一个策略，表示递归到节点指定的层数 * 该函数返回一个策略，表示递归到节点指定的层数
* *
...@@ -158,6 +69,15 @@ KityMinder.registerModule('Expand', function() { ...@@ -158,6 +69,15 @@ KityMinder.registerModule('Expand', function() {
DEEP_TO_LEAF: generateDeepPolicy(Number.MAX_VALUE) DEEP_TO_LEAF: generateDeepPolicy(Number.MAX_VALUE)
}; };
function setExpandState(node, state, policy) {
policy = policy || EXPAND_POLICY.KEEP_STATE;
policy(node, state, policy);
node.traverse(function(node) {
node.render();
});
node.layout(null, 200);
}
// 将展开的操作和状态读取接口拓展到 MinderNode 上 // 将展开的操作和状态读取接口拓展到 MinderNode 上
kity.extendClass(MinderNode, { kity.extendClass(MinderNode, {
...@@ -166,8 +86,7 @@ KityMinder.registerModule('Expand', function() { ...@@ -166,8 +86,7 @@ KityMinder.registerModule('Expand', function() {
* @param {Policy} policy 展开的策略，默认为 KEEP_STATE * @param {Policy} policy 展开的策略，默认为 KEEP_STATE
*/ */
expand: function(policy) { expand: function(policy) {
policy = policy || EXPAND_POLICY.KEEP_STATE; setExpandState(this, STATE_EXPAND, policy);
policy(this, STATE_EXPAND, policy);
return this; return this;
}, },
...@@ -176,8 +95,7 @@ KityMinder.registerModule('Expand', function() { ...@@ -176,8 +95,7 @@ KityMinder.registerModule('Expand', function() {
* @param {Policy} policy 展开的策略，默认为 KEEP_STATE * @param {Policy} policy 展开的策略，默认为 KEEP_STATE
*/ */
collapse: function(policy) { collapse: function(policy) {
policy = policy || EXPAND_POLICY.KEEP_STATE; setExpandState(this, STATE_COLLAPSE, policy);
policy(this, STATE_COLLAPSE, policy);
return this; return this;
}, },
...@@ -185,48 +103,131 @@ KityMinder.registerModule('Expand', function() { ...@@ -185,48 +103,131 @@ KityMinder.registerModule('Expand', function() {
* 判断节点当前的状态是否为展开 * 判断节点当前的状态是否为展开
*/ */
isExpanded: function() { isExpanded: function() {
return this.getData(EXPAND_STATE_DATA) === STATE_EXPAND; var expanded = this.getData(EXPAND_STATE_DATA) !== STATE_COLLAPSE;
return expanded && (this.isRoot() || this.parent.isExpanded());
},
/**
* 判断节点当前的状态是否为收起
*/
isCollapsed: function() {
return !this.isExpanded();
} }
}); });
var ExpandNodeCommand = kity.createClass("ExpandNodeCommand", (function() { var ExpandNodeCommand = kity.createClass('ExpandNodeCommand', {
return { base: Command,
base: Command, execute: function(km) {
execute: function(km) { var nodes = km.getSelectedNodes();
expandAll(km, 'expand'); nodes.forEach(function(node) {
}, node.expand(EXPAND_POLICY.DEEP_TO_LEAF);
queryState: function(km) { });
return 0; },
} queryState: function(km) {
}; return 0;
})()); }
var CollapseNodeCommand = kity.createClass("CollapseNodeCommand", (function() { });
return { var CollapseNodeCommand = kity.createClass('CollapseNodeCommand', {
base: Command, base: Command,
execute: function(km) { execute: function(km) {
expandAll(km, 'collapse'); var nodes = km.getSelectedNodes();
}, nodes.forEach(function(node) {
queryState: function(km) { node.collapse(EXPAND_POLICY.DEEP_TO_LEAF);
return 0; });
},
queryState: function(km) {
return 0;
}
});
var Expander = kity.createClass('Expander', {
base: kity.Group,
constructor: function(node) {
this.callBase();
this.radius = 5;
this.outline = new kity.Circle(this.radius).stroke('gray').fill('white');
this.sign = new kity.Path().stroke('black');
this.addShapes([this.outline, this.sign]);
this.initEvent(node);
this.setId(KityMinder.uuid('node_expander'));
},
initEvent: function(node) {
this.on('click', function(e) {
if (node.isExpanded()) {
node.collapse();
} else {
node.expand();
}
e.stopPropagation();
e.preventDefault();
});
},
setState: function(state) {
if (state == 'hide') {
this.setVisible(false);
return;
} }
}; this.setVisible(true);
})()); var pathData = ['M', 1.5 - this.radius, 0, 'L', this.radius - 1.5, 0];
return { if (state == STATE_COLLAPSE) {
'events': { pathData.push(['M', 0, 1.5 - this.radius, 'L', 0, this.radius - 1.5]);
'beforeimport': function(e) {
// var _root = this.getRoot();
// var options = this.getOptions();
// var defaultExpand = options.defaultExpand;
//setOptionValue( _root, defaultExpand.defaultLayer, defaultExpand.defaultSubShow );
} }
this.sign.setPathData(pathData);
}
});
var ExpanderRenderer = kity.createClass('Expander', {
base: Renderer,
create: function(node) {
if (node.isRoot()) return;
this.expander = new Expander(node);
node.getRenderContainer().addShape(this.expander);
node.expanderRenderer = this;
this.node = node;
}, },
'addShortcutKeys': {
"ExpandNode": "ctrl+/", //expand update: function(node) {
"CollapseNode": "ctrl+." //collapse if (!node.parent) return;
var visible = node.parent.isExpanded();
node.getRenderContainer().setVisible(visible);
this.expander.setState(visible && node.children.length ? node.getData(EXPAND_STATE_DATA) : 'hide');
var x, y;
var right = node.getLayoutPoint().x > node.parent.getLayoutPoint().x;
x = right ?
node.getContentBox().right + node.getStyle('margin-right') :
node.getContentBox().left - node.getStyle('margin-left');
y = node.getType() == 'main' ?
node.getContentBox().cy :
node.getContentBox().bottom;
this.expander.setTranslate(x, y);
}
});
return {
addShortcutKeys: {
'ExpandNode': 'ctrl+/', //expand
'CollapseNode': 'ctrl+.' //collapse
}, },
'commands': { commands: {
'ExpandNode': ExpandNodeCommand, 'ExpandNode': ExpandNodeCommand,
'CollapseNode': CollapseNodeCommand 'CollapseNode': CollapseNodeCommand
},
events: {
'layoutapply': function(e) {
var r = e.node.getRenderer(ExpanderRenderer);
r.update(e.node);
}
},
renderers: {
outside: ExpanderRenderer
} }
}; };
}); });
\ No newline at end of file
src/module/geometry.js
View file @ c007c290
...@@ -18,6 +18,8 @@ KityMinder.Geometry = (function() { ...@@ -18,6 +18,8 @@ KityMinder.Geometry = (function() {
box.height = box.bottom - box.top; box.height = box.bottom - box.top;
box.x = box.left; box.x = box.left;
box.y = box.top; box.y = box.top;
box.cx = box.x + box.width / 2;
box.cy = box.y + box.height / 2;
return box; return box;
} }
......
src/module/history.js
View file @ c007c290
KityMinder.registerModule("HistoryModule", function () { KityMinder.registerModule("HistoryModule", function() {
var km = this; var km = this;
var Scene = kity.createClass('Scene', { var Scene = kity.createClass('Scene', {
constructor: function (root) { constructor: function(root) {
this.data = root.clone(); this.data = root.clone();
}, },
getData: function () { getData: function() {
return this.data; return this.data;
}, },
cloneData: function () { cloneData: function() {
return this.getData().clone(); return this.getData().clone();
}, },
equals: function (scene) { equals: function(scene) {
return this.getData().equals(scene.getData()) return this.getData().equals(scene.getData())
} }
}); });
var HistoryManager = kity.createClass('HistoryManager', { var HistoryManager = kity.createClass('HistoryManager', {
constructor: function (km) { constructor: function(km) {
this.list = []; this.list = [];
this.index = 0; this.index = 0;
this.hasUndo = false; this.hasUndo = false;
this.hasRedo = false; this.hasRedo = false;
this.km = km; this.km = km;
}, },
undo: function () { undo: function() {
if (this.hasUndo) { if (this.hasUndo) {
// if(this.km.getStatus() == 'textedit'){ // if(this.km.getStatus() == 'textedit'){
// return this.restore(this.index); // return this.restore(this.index);
...@@ -42,7 +42,7 @@ KityMinder.registerModule("HistoryModule", function () { ...@@ -42,7 +42,7 @@ KityMinder.registerModule("HistoryModule", function () {
this.restore(--this.index); this.restore(--this.index);
} }
}, },
redo: function () { redo: function() {
if (this.hasRedo) { if (this.hasRedo) {
while (this.list[this.index].equals(this.list[this.index + 1])) { while (this.list[this.index].equals(this.list[this.index + 1])) {
this.index++; this.index++;
...@@ -53,7 +53,7 @@ KityMinder.registerModule("HistoryModule", function () { ...@@ -53,7 +53,7 @@ KityMinder.registerModule("HistoryModule", function () {
this.restore(++this.index); this.restore(++this.index);
} }
}, },
partialRenewal: function (target) { partialRenewal: function(target) {
function compareNode(source, target) { function compareNode(source, target) {
if (source.getText() != target.getText()) { if (source.getText() != target.getText()) {
return false; return false;
...@@ -68,54 +68,55 @@ KityMinder.registerModule("HistoryModule", function () { ...@@ -68,54 +68,55 @@ KityMinder.registerModule("HistoryModule", function () {
} }
function appendChildNode(parent, child) { function appendChildNode(parent, child) {
km.appendChildNode(parent, child); parent.appendChild(child);
for (var i = 0, ci; ci = child.children[i++];) { for (var i = 0, ci; ci = child.children[i++];) {
appendChildNode(child, ci) appendChildNode(child, ci);
} }
} }
function traverseNode(srcNode, tagNode) { function traverseNode(srcNode, tagNode) {
if (compareNode(srcNode, tagNode) === false) { if (compareNode(srcNode, tagNode) === false) {
km.updateLayout(srcNode.setValue(tagNode)); srcNode.setValue(tagNode);
if (srcNode.isSelected()) { if (srcNode.isSelected()) {
km.select(srcNode) km.select(srcNode);
} else { } else {
km.removeSelectedNodes(srcNode) km.removeSelectedNodes(srcNode);
} }
} }
for (var i = 0, j = 0, si, tj; for (var i = 0, j = 0, si, tj;
(si = srcNode.children[i], tj = tagNode.children[j], si || tj); i++, j++) { (si = srcNode.children[i], tj = tagNode.children[j], si || tj); i++, j++) {
if (si && !tj) { if (si && !tj) {
i--; i--;
km.removeNode(si) km.removeNode(si);
} else if (!si && tj) { } else if (!si && tj) {
j--; j--;
appendChildNode(srcNode, tj) appendChildNode(srcNode, tj);
} else { } else {
traverseNode(si, tj) traverseNode(si, tj);
} }
} }
} }
traverseNode(km.getRoot(), target) traverseNode(km.getRoot(), target);
km.layout();
}, },
restore: function () { restore: function() {
var scene = this.list[this.index]; var scene = this.list[this.index];
this.partialRenewal(scene.cloneData()); this.partialRenewal(scene.cloneData());
this.update(); this.update();
this.km.fire('restoreScene'); this.km.fire('restoreScene');
this.km.fire('contentChange'); this.km.fire('contentChange');
}, },
getScene: function () { getScene: function() {
return new Scene(this.km.getRoot()) return new Scene(this.km.getRoot());
}, },
saveScene: function () { saveScene: function() {
var currentScene = this.getScene(); var currentScene = this.getScene();
var lastScene = this.list[this.index]; var lastScene = this.list[this.index];
if (lastScene && lastScene.equals(currentScene)) { if (lastScene && lastScene.equals(currentScene)) {
return return;
} }
this.list = this.list.slice(0, this.index + 1); this.list = this.list.slice(0, this.index + 1);
this.list.push(currentScene); this.list.push(currentScene);
...@@ -127,11 +128,11 @@ KityMinder.registerModule("HistoryModule", function () { ...@@ -127,11 +128,11 @@ KityMinder.registerModule("HistoryModule", function () {
//跟新undo/redo状态 //跟新undo/redo状态
this.update(); this.update();
}, },
update: function () { update: function() {
this.hasRedo = !!this.list[this.index + 1]; this.hasRedo = !!this.list[this.index + 1];
this.hasUndo = !!this.list[this.index - 1] //|| this.km.getStatus() == 'textedit'; this.hasUndo = !!this.list[this.index - 1]; //|| this.km.getStatus() == 'textedit';
}, },
reset: function () { reset: function() {
this.list = []; this.list = [];
this.index = 0; this.index = 0;
this.hasUndo = false; this.hasUndo = false;
...@@ -167,29 +168,29 @@ KityMinder.registerModule("HistoryModule", function () { ...@@ -167,29 +168,29 @@ KityMinder.registerModule("HistoryModule", function () {
"undo": kity.createClass("UndoCommand", { "undo": kity.createClass("UndoCommand", {
base: Command, base: Command,
execute: function (km) { execute: function(km) {
km.historyManager.undo() km.historyManager.undo()
}, },
queryState: function (km) { queryState: function(km) {
return km.historyManager.hasUndo ? 0 : -1; return km.historyManager.hasUndo ? 0 : -1;
}, },
isNeedUndo: function () { isNeedUndo: function() {
return false; return false;
} }
}), }),
"redo": kity.createClass("RedoCommand", { "redo": kity.createClass("RedoCommand", {
base: Command, base: Command,
execute: function (km) { execute: function(km) {
km.historyManager.redo() km.historyManager.redo()
}, },
queryState: function (km) { queryState: function(km) {
return km.historyManager.hasRedo ? 0 : -1; return km.historyManager.hasRedo ? 0 : -1;
}, },
isNeedUndo: function () { isNeedUndo: function() {
return false; return false;
} }
}) })
...@@ -199,10 +200,10 @@ KityMinder.registerModule("HistoryModule", function () { ...@@ -199,10 +200,10 @@ KityMinder.registerModule("HistoryModule", function () {
"Redo": "ctrl+y" //redo "Redo": "ctrl+y" //redo
}, },
"events": { "events": {
"saveScene": function (e) { "saveScene": function(e) {
this.historyManager.saveScene(); this.historyManager.saveScene();
}, },
'renderNode': function (e) { 'renderNode': function(e) {
var node = e.node; var node = e.node;
if (node.isSelected()) { if (node.isSelected()) {
this.select(node) this.select(node)
...@@ -230,7 +231,7 @@ KityMinder.registerModule("HistoryModule", function () { ...@@ -230,7 +231,7 @@ KityMinder.registerModule("HistoryModule", function () {
// } // }
// } // }
// }, // },
"import": function () { "import": function() {
this.historyManager.reset() this.historyManager.reset()
} }
} }
......
src/module/icon.js
View file @ c007c290
KityMinder.registerModule("IconModule", function () { KityMinder.registerModule('IconModule', function() {
var minder = this; var minder = this;
var renderPriorityIcon = function (node, val) {
var colors = ["", "#A92E24", "#29A6BD", "#1E8D54", "#eb6100", "#876DDA", "#828282", "#828282", "#828282", "#828282"]; var PRIORITY_COLORS = ['', '#A92E24', '#29A6BD', '#1E8D54', '#eb6100', '#876DDA', '#828282', '#828282', '#828282', '#828282'];
var bgcolor = colors[val];
var _bg = new kity.Rect().fill(colors[val]).setRadius(3).setWidth(20).setHeight(20); var PriorityIcon = kity.createClass('PriorityIcon', {
var _number = new kity.Text().setContent(val).fill("white").setSize(12); base: kity.Group,
var _rc = new kity.Group();
_rc.addShapes([_bg, _number]); constructor: function(value) {
node.getContRc().addShape(_rc); this.callBase();
_number.setTranslate(6, 15); this.setSize(20);
var rcHeight = _rc.getHeight(); this.create();
_rc.setTranslate(0, -rcHeight / 2); this.setValue(value);
}; this.setId(KityMinder.uuid('node_priority'));
},
var renderProgressIcon = function (node, val) {
var _rc = new kity.Group(); setSize: function(size) {
var _contRc = node.getContRc(); this.width = this.height = size;
var _bg = new kity.Circle().setRadius(8).fill("white").stroke(new kity.Pen("#29A6BD", 2)); },
var _percent, d;
if (val < 9) { create: function() {
_percent = new kity.Path(); var bg, number;
d = _percent.getDrawer();
d.moveTo(0, 0).lineTo(0, -6); bg = new kity.Rect()
} else _percent = new kity.Group(); .setRadius(3)
_rc.addShapes([_bg, _percent]); .setPosition(0, 0)
_contRc.addShape(_rc); .setSize(this.width, this.height);
//r, laf, sf, x, y
//large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。 number = new kity.Text()
//sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。 .setX(this.width / 2 + 0.5).setY(this.height / 2 + 0.5)
switch (val) { .setTextAnchor('middle')
case 1: .setVerticalAlign('middle')
break; .setFontSize(12)
case 2: .fill('white');
d.carcTo(6, 0, 1, 6 * Math.cos(2 * Math.PI / 8), -6 * Math.sin(2 * Math.PI / 8)); number.mark = 'hello';
break;
case 3: this.addShapes([bg, number]);
d.carcTo(6, 0, 1, 6, 0); this.bg = bg;
break; this.number = number;
case 4: },
d.carcTo(6, 0, 1, 6 * Math.cos(2 * Math.PI / 8), 6 * Math.sin(2 * Math.PI / 8));
break; setValue: function(value) {
case 5: var bg = this.bg,
d.carcTo(6, 0, 1, 0, 6); number = this.number;
break;
case 6: if (PRIORITY_COLORS[value]) {
d.carcTo(6, 1, 1, -6 * Math.cos(2 * Math.PI / 8), 6 * Math.sin(2 * Math.PI / 8)); bg.fill(PRIORITY_COLORS[value]);
break; number.setContent(value);
case 7: }
d.carcTo(6, 1, 1, -6, 0); }
break; });
case 8:
d.carcTo(6, 1, 1, -6 * Math.cos(2 * Math.PI / 8), -6 * Math.sin(2 * Math.PI / 8)); var ProgressIcon = kity.createClass('ProgressIcon', {
break; base: kity.Group,
case 9:
var check = new kity.Path(); constructor: function(value) {
_percent.addShapes([new kity.Circle().setRadius(6).fill("#29A6BD"), check]); this.callBase();
check.getDrawer().moveTo(-3, 0).lineTo(-1, 3).lineTo(3, -2); this.create();
check.stroke(new kity.Pen("white", 2).setLineCap("round")); }
break; });
}
if (val && val < 8) d.close(); var renderProgressIcon = function(node, val) {
_percent.fill("#29A6BD"); var _rc = new kity.Group();
var pre = node.getData("PriorityIcon"); var _contRc = node.getContRc();
var style = minder.getCurrentLayoutStyle()[node.getType()]; var _bg = new kity.Circle().setRadius(8).fill('white').stroke(new kity.Pen('#29A6BD', 2));
if (!pre) _rc.setTranslate(_rc.getWidth() / 2, 0); var _percent, d;
else _rc.setTranslate(_contRc.getWidth() + style.spaceLeft, 0); if (val < 9) {
}; _percent = new kity.Path();
var setPriorityCommand = kity.createClass("SetPriorityCommand", (function () { d = _percent.getDrawer();
return { d.moveTo(0, 0).lineTo(0, -6);
base: Command, } else _percent = new kity.Group();
execute: function (km, value) { _rc.addShapes([_bg, _percent]);
var nodes = km.getSelectedNodes(); _contRc.addShape(_rc);
for (var i = 0; i < nodes.length; i++) { //r, laf, sf, x, y
nodes[i].setData("PriorityIcon", value); //large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。
km.updateLayout(nodes[i]); //sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。
} switch (val) {
}, case 1:
queryValue: function (km) { break;
var nodes = km.getSelectedNodes(); case 2:
var val; d.carcTo(6, 0, 1, 6 * Math.cos(2 * Math.PI / 8), -6 * Math.sin(2 * Math.PI / 8));
for (var i = 0; i < nodes.length; i++) { break;
val = nodes[i].getData("PriorityIcon"); case 3:
if (val) break; d.carcTo(6, 0, 1, 6, 0);
} break;
return val; case 4:
} d.carcTo(6, 0, 1, 6 * Math.cos(2 * Math.PI / 8), 6 * Math.sin(2 * Math.PI / 8));
}; break;
})()); case 5:
var setProgressCommand = kity.createClass("SetProgressCommand", (function () { d.carcTo(6, 0, 1, 0, 6);
return { break;
base: Command, case 6:
execute: function (km, value) { d.carcTo(6, 1, 1, -6 * Math.cos(2 * Math.PI / 8), 6 * Math.sin(2 * Math.PI / 8));
var nodes = km.getSelectedNodes(); break;
for (var i = 0; i < nodes.length; i++) { case 7:
nodes[i].setData("ProgressIcon", value); d.carcTo(6, 1, 1, -6, 0);
km.updateLayout(nodes[i]); break;
} case 8:
}, d.carcTo(6, 1, 1, -6 * Math.cos(2 * Math.PI / 8), -6 * Math.sin(2 * Math.PI / 8));
queryValue: function (km) { break;
var nodes = km.getSelectedNodes(); case 9:
var val; var check = new kity.Path();
for (var i = 0; i < nodes.length; i++) { _percent.addShapes([new kity.Circle().setRadius(6).fill('#29A6BD'), check]);
val = nodes[i].getData("ProgressIcon"); check.getDrawer().moveTo(-3, 0).lineTo(-1, 3).lineTo(3, -2);
if (val) break; check.stroke(new kity.Pen('white', 2).setLineCap('round'));
} break;
return val; }
} if (val && val < 8) d.close();
}; _percent.fill('#29A6BD');
})()); var pre = node.getData('PriorityIcon');
return { var style = minder.getCurrentLayoutStyle()[node.getType()];
"commands": { if (!pre) _rc.setTranslate(_rc.getWidth() / 2, 0);
"priority": setPriorityCommand, else _rc.setTranslate(_contRc.getWidth() + style.spaceLeft, 0);
"progress": setProgressCommand };
}, var PriorityCommand = kity.createClass('SetPriorityCommand', {
"events": { base: Command,
"RenderNodeLeft": function (e) { execute: function(km, value) {
var node = e.node; var nodes = km.getSelectedNodes();
var PriorityIconVal = node.getData("PriorityIcon"); for (var i = 0; i < nodes.length; i++) {
var ProgressIconVal = node.getData("ProgressIcon"); nodes[i].setData('PriorityIcon', value).render();
var contRc = node.getContRc(); }
if (PriorityIconVal) { km.layout();
renderPriorityIcon(node, PriorityIconVal); },
} queryValue: function(km) {
if (ProgressIconVal) { var nodes = km.getSelectedNodes();
renderProgressIcon(node, ProgressIconVal); var val;
} for (var i = 0; i < nodes.length; i++) {
} val = nodes[i].getData('PriorityIcon');
} if (val) break;
}; }
return val;
}
});
var ProgressCommand = kity.createClass('SetProgressCommand', {
base: Command,
execute: function(km, value) {
var nodes = km.getSelectedNodes();
for (var i = 0; i < nodes.length; i++) {
nodes[i].setData('ProgressIcon', value).render();
}
km.layout();
},
queryValue: function(km) {
var nodes = km.getSelectedNodes();
var val;
for (var i = 0; i < nodes.length; i++) {
val = nodes[i].getData('ProgressIcon');
if (val) break;
}
return val;
}
});
return {
'commands': {
'priority': PriorityCommand,
'progress': ProgressCommand
},
'renderers': {
left: kity.createClass('Icon', {
base: Renderer,
create: function(node) {
this.priority = new PriorityIcon();
node.getRenderContainer().addShape(this.priority);
},
update: function(node) {
var data = node.getData('PriorityIcon');
var spaceLeft = node.getStyle('space-left');
var icon = this.priority;
var box = node.getContentBox();
var x, y;
if (!data) {
icon.setVisible(false);
return null;
}
icon.setVisible(true).setValue(data);
x = box.left - icon.width - spaceLeft;
y = -icon.height / 2;
icon.setTranslate(x, y);
return {
x: x,
y: y,
width: icon.width,
height: icon.height
};
}
})
}
};
}); });
\ No newline at end of file
src/module/node.js
View file @ c007c290
kity.extendClass(Minder, {
appendChildNode: function(parent, node, index) {
},
appendSiblingNode: function(sibling, node) {
var curStyle = this.getCurrentStyle();
this.getLayoutStyle(curStyle).appendSiblingNode.call(this, sibling, node);
},
});
var AppendChildCommand = kity.createClass('AppendChildCommand', { var AppendChildCommand = kity.createClass('AppendChildCommand', {
base: Command, base: Command,
execute: function(km, text) { execute: function(km, text) {
var parent = km.getSelectedNode(); var parent = km.getSelectedNode();
var node = km.createNode(text);
if (!parent) { if (!parent) {
return null; return null;
} }
//parent.expand(); parent.expand();
parent.appendChild(node); var node = km.createNode(text, parent);
km.select(node, true); km.select(node, true);
node.render(); node.render();
node._lastLayoutTransform = parent._lastLayoutTransform;
km.layout(300); km.layout(300);
}, },
queryState: function(km) { queryState: function(km) {
...@@ -33,13 +23,13 @@ var AppendSiblingCommand = kity.createClass('AppendSiblingCommand', { ...@@ -33,13 +23,13 @@ var AppendSiblingCommand = kity.createClass('AppendSiblingCommand', {
execute: function(km, text) { execute: function(km, text) {
var sibling = km.getSelectedNode(); var sibling = km.getSelectedNode();
var parent = sibling.parent; var parent = sibling.parent;
var node = km.createNode(text);
if (!parent) { if (!parent) {
return null; return null;
} }
parent.insertChild(node, sibling.getIndex() + 1); var node = km.createNode(text, parent, sibling.getIndex() + 1);
km.select(node, true); km.select(node, true);
node.render(); node.render();
node._lastLayoutTransform = sibling._lastLayoutTransform;
km.layout(300); km.layout(300);
}, },
queryState: function(km) { queryState: function(km) {
......
src/module/outline.js
View file @ c007c290
/* global Renderer: true */ /* global Renderer: true */
var wireframe = true; var wireframe = /wire/.test(window.location.href);
KityMinder.registerModule('OutlineModule', function() { KityMinder.registerModule('OutlineModule', function() {
return { return {
...@@ -9,12 +9,27 @@ KityMinder.registerModule('OutlineModule', function() { ...@@ -9,12 +9,27 @@ KityMinder.registerModule('OutlineModule', function() {
base: Renderer, base: Renderer,
create: function(node) { create: function(node) {
var outline = this.outline = new kity.Rect().setId(KityMinder.uuid('node_outline'));
node.getRenderContainer().prependShape(outline); var outline = this.outline = new kity.Rect()
.setId(KityMinder.uuid('node_outline'));
var bg = this.bg = new kity.Rect()
.setId(KityMinder.uuid('node_shadow'))
.fill('black')
.setOpacity(0.2);
node.getRenderContainer()
.prependShape(outline)
.prependShape(bg);
if (wireframe) { if (wireframe) {
var oxy = this.oxy = new kity.Path().stroke('white').setPathData('M0,-50L0,50M-50,0L50,0').setOpacity(0.5); var oxy = this.oxy = new kity.Path()
var box = this.wireframe = new kity.Rect().stroke('lightgreen'); .stroke('#f6f')
.setPathData('M0,-50L0,50M-50,0L50,0');
var box = this.wireframe = new kity.Rect()
.stroke('lightgreen');
node.getRenderContainer().addShapes([oxy, box]); node.getRenderContainer().addShapes([oxy, box]);
} }
}, },
...@@ -39,8 +54,20 @@ KityMinder.registerModule('OutlineModule', function() { ...@@ -39,8 +54,20 @@ KityMinder.registerModule('OutlineModule', function() {
node.getStyle('selected-background') : node.getStyle('selected-background') :
node.getStyle('background')); node.getStyle('background'));
if (node.getLevel() < 2) {
this.bg
.setVisible(true)
.setPosition(outlineBox.x + 3, outlineBox.y + 4)
.setSize(outlineBox.width, outlineBox.height)
.setRadius(node.getStyle('radius'));
} else {
this.bg.setVisible(false);
}
if (wireframe) { if (wireframe) {
this.wireframe.setPosition(outlineBox.x, outlineBox.y).setSize(outlineBox.width, outlineBox.height); this.wireframe
.setPosition(outlineBox.x, outlineBox.y)
.setSize(outlineBox.width, outlineBox.height);
} }
return outlineBox; return outlineBox;
} }
......
src/module/resource.js
View file @ c007c290
KityMinder.registerModule('Resource', function () { KityMinder.registerModule('Resource', function() {
/** /**
* 自动使用的颜色序列 * 自动使用的颜色序列
*/ */
var RESOURCE_COLOR_SERIES = [200, 51, 303, 75, 157, 0, 26, 254].map(function (h) { var RESOURCE_COLOR_SERIES = [200, 51, 303, 75, 157, 0, 26, 254].map(function(h) {
return kity.Color.createHSL(h, 100, 85); return kity.Color.createHSL(h, 100, 85);
}); });
...@@ -24,7 +24,7 @@ KityMinder.registerModule('Resource', function () { ...@@ -24,7 +24,7 @@ KityMinder.registerModule('Resource', function () {
* @param {String} resource 资源名称 * @param {String} resource 资源名称
* @return {Color} * @return {Color}
*/ */
getResourceColor: function (resource) { getResourceColor: function(resource) {
var colorMapping = this._getResourceColorIndexMapping(); var colorMapping = this._getResourceColorIndexMapping();
var nextIndex; var nextIndex;
...@@ -43,7 +43,7 @@ KityMinder.registerModule('Resource', function () { ...@@ -43,7 +43,7 @@ KityMinder.registerModule('Resource', function () {
* *
* @return {Array} * @return {Array}
*/ */
getUsedResource: function () { getUsedResource: function() {
var mapping = this._getResourceColorIndexMapping(); var mapping = this._getResourceColorIndexMapping();
var used = [], var used = [],
resource; resource;
...@@ -62,7 +62,7 @@ KityMinder.registerModule('Resource', function () { ...@@ -62,7 +62,7 @@ KityMinder.registerModule('Resource', function () {
* *
* @return {int} * @return {int}
*/ */
_getNextResourceColorIndex: function () { _getNextResourceColorIndex: function() {
// 获取现有颜色映射 // 获取现有颜色映射
// resource => color_index // resource => color_index
var colorMapping = this._getResourceColorIndexMapping(); var colorMapping = this._getResourceColorIndexMapping();
...@@ -89,7 +89,7 @@ KityMinder.registerModule('Resource', function () { ...@@ -89,7 +89,7 @@ KityMinder.registerModule('Resource', function () {
// 获取现有颜色映射 // 获取现有颜色映射
// resource => color_index // resource => color_index
_getResourceColorIndexMapping: function () { _getResourceColorIndexMapping: function() {
return this._resourceColorMapping || (this._resourceColorMapping = {}); return this._resourceColorMapping || (this._resourceColorMapping = {});
} }
...@@ -116,29 +116,30 @@ KityMinder.registerModule('Resource', function () { ...@@ -116,29 +116,30 @@ KityMinder.registerModule('Resource', function () {
base: Command, base: Command,
execute: function (minder, resource) { execute: function(minder, resource) {
var nodes = minder.getSelectedNodes(); var nodes = minder.getSelectedNodes();
if (typeof (resource) == 'string') { if (typeof(resource) == 'string') {
resource = [resource]; resource = [resource];
} }
nodes.forEach(function (node) { nodes.forEach(function(node) {
node.setData('resource', resource); node.setData('resource', resource).render();
minder.updateLayout(node);
}); });
minder.layout(200);
}, },
queryValue: function (minder) { queryValue: function(minder) {
var nodes = minder.getSelectedNodes(); var nodes = minder.getSelectedNodes();
var resource = []; var resource = [];
nodes.forEach(function (node) { nodes.forEach(function(node) {
var nodeResource = node.getData('resource'); var nodeResource = node.getData('resource');
if (!nodeResource) return; if (!nodeResource) return;
nodeResource.forEach(function (name) { nodeResource.forEach(function(name) {
if (!~resource.indexOf(name)) { if (!~resource.indexOf(name)) {
resource.push(name); resource.push(name);
} }
...@@ -148,7 +149,7 @@ KityMinder.registerModule('Resource', function () { ...@@ -148,7 +149,7 @@ KityMinder.registerModule('Resource', function () {
return resource; return resource;
}, },
queryState: function () { queryState: function() {
return 0; return 0;
} }
}); });
...@@ -161,7 +162,7 @@ KityMinder.registerModule('Resource', function () { ...@@ -161,7 +162,7 @@ KityMinder.registerModule('Resource', function () {
var ResourceOverlay = kity.createClass('ResourceOverlay', { var ResourceOverlay = kity.createClass('ResourceOverlay', {
base: kity.Group, base: kity.Group,
constructor: function (container, resourceName, color) { constructor: function(container, resourceName, color) {
this.callBase(); this.callBase();
var paddingX = 8, var paddingX = 8,
...@@ -203,7 +204,7 @@ KityMinder.registerModule('Resource', function () { ...@@ -203,7 +204,7 @@ KityMinder.registerModule('Resource', function () {
}, },
events: { events: {
'RenderNodeRight': function (e) { 'RenderNodeRight': function(e) {
var node = e.node; var node = e.node;
var resource = node.getData('resource'); var resource = node.getData('resource');
var content = node.getContRc(); var content = node.getContRc();
...@@ -211,7 +212,7 @@ KityMinder.registerModule('Resource', function () { ...@@ -211,7 +212,7 @@ KityMinder.registerModule('Resource', function () {
var minder = this; var minder = this;
if (resource && resource.length) { if (resource && resource.length) {
resource.forEach(function (name) { resource.forEach(function(name) {
var overlay = new ResourceOverlay(content, name, minder.getResourceColor(name)); var overlay = new ResourceOverlay(content, name, minder.getResourceColor(name));
var box = content.getBoundaryBox(); var box = content.getBoundaryBox();
overlay.setTranslate(box.width + margin, 0); overlay.setTranslate(box.width + margin, 0);
......
src/theme/default.js
View file @ c007c290
...@@ -4,7 +4,7 @@ KityMinder.registerTheme('default', { ...@@ -4,7 +4,7 @@ KityMinder.registerTheme('default', {
'root-stroke': 'none', 'root-stroke': 'none',
'root-font-size': 24, 'root-font-size': 24,
'root-padding': [15, 25], 'root-padding': [15, 25],
'root-margin': 30, 'root-margin': 100,
'root-radius': 30, 'root-radius': 30,
'root-space': 10, 'root-space': 10,
...@@ -13,7 +13,7 @@ KityMinder.registerTheme('default', { ...@@ -13,7 +13,7 @@ KityMinder.registerTheme('default', {
'main-stroke': 'none', 'main-stroke': 'none',
'main-font-size': 16, 'main-font-size': 16,
'main-padding': [6, 20], 'main-padding': [6, 20],
'main-margin': [15, 10], 'main-margin': [20, 7],
'main-radius': 10, 'main-radius': 10,
'main-space': 5, 'main-space': 5,
...@@ -22,9 +22,13 @@ KityMinder.registerTheme('default', { ...@@ -22,9 +22,13 @@ KityMinder.registerTheme('default', {
'sub-stroke': 'white', 'sub-stroke': 'white',
'sub-font-size': 12, 'sub-font-size': 12,
'sub-padding': [5, 10], 'sub-padding': [5, 10],
'sub-margin': [5, 10], 'sub-margin': [5, 12],
'sub-radius': 5, 'sub-radius': 5,
'sub-space': 5, 'sub-space': 5,
'connect-color': 'white',
'connect-width': 2,
'connect-radius': 5,
'selected-background': 'rgb(254, 219, 0)' 'selected-background': 'rgb(254, 219, 0)'
}); });
\ 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