Skip to content

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

添加进度和优先级模块

parent 0333a2d9
Show whitespace changes
Inline Side-by-side
Showing with 340 additions and 75 deletions
import.js
View file @ e8a6e782
......@@ -30,7 +30,8 @@
'module/outline.js',
'module/geometry.js',
'module/history.js',
'module/icon.js',
'module/progress.js',
'module/priority.js',
'module/image.js',
'module/resource.js',
'core/minder.select.js',
......
kity @ 38e17411
Subproject commit f62ec70beb8198072693e1b7f1748cca46b685fb
Subproject commit 38e17411060a02d0601985ca1a2553057c3f9e40
src/core/layout.js
View file @ e8a6e782
......@@ -75,6 +75,15 @@ kity.extendClass(MinderNode, {
return this._layoutTransform || new kity.Matrix();
},
setLayoutVector: function(vector) {
this._layoutVector = vector;
return this;
},
getLayoutVector: function(vector) {
return this._layoutVector || new kity.Vector();
},
getLayoutBox: function() {
var matrix = this._lastLayoutTransform || new kity.Matrix();
return matrix.transformBox(this.getContentBox());
......
src/core/render.js
View file @ e8a6e782
var Renderer = kity.createClass('Renderer', {
var Renderer = KityMinder.Renderer = kity.createClass('Renderer', {
constructor: function(node) {
this.node = node;
},
......@@ -54,7 +54,7 @@ kity.extendClass(Minder, {
}
for (i = 0; i < node._renderers.length; i++) {
latestBox = node._renderers[i].update(node, latestBox);
latestBox = node._renderers[i].update(node, contentBox);
if (latestBox) {
node._contentBox = contentBox = g.mergeBox(contentBox, latestBox);
}
......
src/layout/default.js
View file @ e8a6e782
......@@ -77,9 +77,13 @@ KityMinder.registerLayout('default', kity.createClass({
if (side == 'right') {
x = nodeContentBox.right - childContentBox.left;
x += parent.getStyle('margin-right') + child.getStyle('margin-left');
child.setLayoutVector(new kity.Vector(childContentBox.left, childContentBox.cy));
} else {
x = nodeContentBox.left - childContentBox.right;
x -= parent.getStyle('margin-left') + child.getStyle('margin-right');
child.setLayoutVector(new kity.Vector(childContentBox.right, childContentBox.cy));
}
// 竖直方向上的布局
......
src/module/connect.js
View file @ e8a6e782
/* global Renderer: true */
KityMinder.registerModule('Connect', function() {
return {
events: {
'nodecreate': function(e) {
var node = e.node;
kity.extendClass(Minder, {
createConnect: function(node) {
if (node.isRoot()) return;
var strokeColor = node.getStyle('connect-color') || 'white',
strokeWidth = node.getStyle('connect-width') || 2;
var connection = new kity.Path()
.stroke(node.getStyle('connect-color') || 'white', node.getStyle('connect-width') || 2);
.stroke(strokeColor, strokeWidth);
node._connection = connection;
this.getRenderContainer().prependShape(connection);
},
'noderemove': function(e) {
var node = e.node;
removeConnect: function(node) {
var me = this;
node.traverse(function(node) {
me.getRenderContainer().removeShape(node._connection);
});
},
'layoutapply noderender': function(e) {
var node = e.node;
updateConnect: function(node) {
var connection = node._connection;
var parent = node.parent;
......@@ -57,6 +61,7 @@ KityMinder.registerModule('Connect', function() {
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);
......@@ -64,6 +69,9 @@ KityMinder.registerModule('Connect', function() {
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);
}
end.y += 1;
var isTop = parent.children.length > 1 && node.getIndex() === 0;
pathData.push('M', start);
......@@ -78,6 +86,18 @@ KityMinder.registerModule('Connect', function() {
connection.setPathData(pathData);
}
});
KityMinder.registerModule('Connect', {
events: {
'nodecreate': function(e) {
this.createConnect(e.node);
},
'noderemove': function(e) {
this.removeConnect(e.node);
},
'layoutapply noderender': function(e) {
this.updateConnect(e.node);
}
}
};
});
\ No newline at end of file
src/module/icon.js → src/module/priority.js
View file @ e8a6e782
KityMinder.registerModule('IconModule', function() {
KityMinder.registerModule('PriorityModule', function() {
var minder = this;
var PRIORITY_COLORS = ['', '#A92E24', '#29A6BD', '#1E8D54', '#eb6100', '#876DDA', '#828282', '#828282', '#828282', '#828282'];
// 进度图标使用的颜色
var PRIORITY_COLORS = ['', '#A92E24', '#29A6BD',
'#1E8D54', '#eb6100', '#876DDA', '#828282',
'#828282', '#828282', '#828282'
];
var PRIORITY_DATA = 'priority';
// 进度图标的图形
var PriorityIcon = kity.createClass('PriorityIcon', {
base: kity.Group,
constructor: function(value) {
constructor: function() {
this.callBase();
this.setSize(20);
this.create();
this.setValue(value);
this.setId(KityMinder.uuid('node_priority'));
},
......@@ -50,93 +55,13 @@ KityMinder.registerModule('IconModule', function() {
}
});
var ProgressIcon = kity.createClass('ProgressIcon', {
base: kity.Group,
constructor: function(value) {
this.callBase();
this.create();
}
});
var renderProgressIcon = function(node, val) {
var _rc = new kity.Group();
var _contRc = node.getContRc();
var _bg = new kity.Circle().setRadius(8).fill('white').stroke(new kity.Pen('#29A6BD', 2));
var _percent, d;
if (val < 9) {
_percent = new kity.Path();
d = _percent.getDrawer();
d.moveTo(0, 0).lineTo(0, -6);
} else _percent = new kity.Group();
_rc.addShapes([_bg, _percent]);
_contRc.addShape(_rc);
//r, laf, sf, x, y
//large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。
//sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。
switch (val) {
case 1:
break;
case 2:
d.carcTo(6, 0, 1, 6 * Math.cos(2 * Math.PI / 8), -6 * Math.sin(2 * Math.PI / 8));
break;
case 3:
d.carcTo(6, 0, 1, 6, 0);
break;
case 4:
d.carcTo(6, 0, 1, 6 * Math.cos(2 * Math.PI / 8), 6 * Math.sin(2 * Math.PI / 8));
break;
case 5:
d.carcTo(6, 0, 1, 0, 6);
break;
case 6:
d.carcTo(6, 1, 1, -6 * Math.cos(2 * Math.PI / 8), 6 * Math.sin(2 * Math.PI / 8));
break;
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));
break;
case 9:
var check = new kity.Path();
_percent.addShapes([new kity.Circle().setRadius(6).fill('#29A6BD'), check]);
check.getDrawer().moveTo(-3, 0).lineTo(-1, 3).lineTo(3, -2);
check.stroke(new kity.Pen('white', 2).setLineCap('round'));
break;
}
if (val && val < 8) d.close();
_percent.fill('#29A6BD');
var pre = node.getData('PriorityIcon');
var style = minder.getCurrentLayoutStyle()[node.getType()];
if (!pre) _rc.setTranslate(_rc.getWidth() / 2, 0);
else _rc.setTranslate(_contRc.getWidth() + style.spaceLeft, 0);
};
// 提供的命令
var PriorityCommand = kity.createClass('SetPriorityCommand', {
base: Command,
execute: function(km, value) {
var nodes = km.getSelectedNodes();
for (var i = 0; i < nodes.length; i++) {
nodes[i].setData('PriorityIcon', 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('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();
nodes[i].setData(PRIORITY_DATA, value).render();
}
km.layout();
},
......@@ -144,7 +69,7 @@ KityMinder.registerModule('IconModule', function() {
var nodes = km.getSelectedNodes();
var val;
for (var i = 0; i < nodes.length; i++) {
val = nodes[i].getData('ProgressIcon');
val = nodes[i].getData(PRIORITY_DATA);
if (val) break;
}
return val;
......@@ -153,22 +78,20 @@ KityMinder.registerModule('IconModule', function() {
return {
'commands': {
'priority': PriorityCommand,
'progress': ProgressCommand
},
'renderers': {
left: kity.createClass('Icon', {
base: Renderer,
left: kity.createClass('PriorityRenderer', {
base: KityMinder.Renderer,
create: function(node) {
this.priority = new PriorityIcon();
node.getRenderContainer().addShape(this.priority);
},
update: function(node) {
var data = node.getData('PriorityIcon');
update: function(node, box) {
var data = node.getData(PRIORITY_DATA);
var spaceLeft = node.getStyle('space-left');
var icon = this.priority;
var box = node.getContentBox();
var x, y;
if (!data) {
......@@ -180,6 +103,7 @@ KityMinder.registerModule('IconModule', function() {
x = box.left - icon.width - spaceLeft;
y = -icon.height / 2;
icon.setTranslate(x, y);
return {
......
src/module/progress.js 0 → 100644
View file @ e8a6e782
KityMinder.registerModule('ProgressModule', function() {
var minder = this;
var PROGRESS_DATA = 'progress';
// 进度图标的图形
var ProgressIcon = kity.createClass('ProgressIcon', {
base: kity.Group,
constructor: function(value) {
this.callBase();
this.setSize(20);
this.create();
this.setValue(value);
this.setId(KityMinder.uuid('node_progress'));
},
setSize: function(size) {
this.width = this.height = size;
},
create: function() {
var circle = new kity.Circle(8)
.stroke('#29A6BD', 2)
.fill('white');
var pie = new kity.Pie(6, 0, -90)
.fill('#29A6BD');
var check = new kity.Path()
.getDrawer()
.moveTo(-3, 0)
.lineTo(-1, 3)
.lineTo(3, -2)
.getPath()
.setVisible(false);
this.addShapes([circle, pie, check]);
this.circle = circle;
this.pie = pie;
this.check = check;
},
setValue: function(value) {
this.pie.setAngle(360 * (value - 1) / 8);
this.check.setVisible(value == 9);
}
});
var ProgressCommand = kity.createClass('ProgressCommand', {
base: Command,
execute: function(km, value) {
var nodes = km.getSelectedNodes();
for (var i = 0; i < nodes.length; i++) {
nodes[i].setData(PROGRESS_DATA, 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(PROGRESS_DATA);
if (val) break;
}
return val;
}
});
return {
'commands': {
'progress': ProgressCommand
},
'renderers': {
left: kity.createClass('ProgressRenderer', {
base: KityMinder.Renderer,
create: function(node) {
this.progress = new ProgressIcon();
node.getRenderContainer().addShape(this.progress);
},
update: function(node) {
var data = node.getData(PROGRESS_DATA);
var spaceLeft = node.getStyle('space-left');
var icon = this.progress;
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 + icon.width / 2, y + icon.height / 2);
return {
x: x,
y: y,
width: icon.width,
height: icon.height
};
}
})
}
};
});
\ No newline at end of file
src/theme/default.js
View file @ e8a6e782
......@@ -13,7 +13,7 @@ KityMinder.registerTheme('default', {
'main-stroke': 'none',
'main-font-size': 16,
'main-padding': [6, 20],
'main-margin': [20, 7],
'main-margin': [30, 6],
'main-radius': 10,
'main-space': 5,
......@@ -22,7 +22,7 @@ KityMinder.registerTheme('default', {
'sub-stroke': 'white',
'sub-font-size': 12,
'sub-padding': [5, 10],
'sub-margin': [5, 12],
'sub-margin': [5, 15],
'sub-radius': 5,
'sub-space': 5,
......
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