Skip to content

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

添加进度和优先级模块

parent 0333a2d9
Hide whitespace changes
Inline Side-by-side
Showing with 340 additions and 75 deletions
import.js
View file @ e8a6e782
...@@ -30,7 +30,8 @@ ...@@ -30,7 +30,8 @@
'module/outline.js', 'module/outline.js',
'module/geometry.js', 'module/geometry.js',
'module/history.js', 'module/history.js',
'module/icon.js', 'module/progress.js',
'module/priority.js',
'module/image.js', 'module/image.js',
'module/resource.js', 'module/resource.js',
'core/minder.select.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, { ...@@ -75,6 +75,15 @@ kity.extendClass(MinderNode, {
return this._layoutTransform || new kity.Matrix(); 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() { getLayoutBox: function() {
var matrix = this._lastLayoutTransform || new kity.Matrix(); var matrix = this._lastLayoutTransform || new kity.Matrix();
return matrix.transformBox(this.getContentBox()); 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) { constructor: function(node) {
this.node = node; this.node = node;
}, },
...@@ -54,7 +54,7 @@ kity.extendClass(Minder, { ...@@ -54,7 +54,7 @@ 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); latestBox = node._renderers[i].update(node, contentBox);
if (latestBox) { if (latestBox) {
node._contentBox = contentBox = g.mergeBox(contentBox, latestBox); node._contentBox = contentBox = g.mergeBox(contentBox, latestBox);
} }
......
src/layout/default.js
View file @ e8a6e782
...@@ -77,9 +77,13 @@ KityMinder.registerLayout('default', kity.createClass({ ...@@ -77,9 +77,13 @@ KityMinder.registerLayout('default', kity.createClass({
if (side == 'right') { if (side == 'right') {
x = nodeContentBox.right - childContentBox.left; x = nodeContentBox.right - childContentBox.left;
x += parent.getStyle('margin-right') + child.getStyle('margin-left'); x += parent.getStyle('margin-right') + child.getStyle('margin-left');
child.setLayoutVector(new kity.Vector(childContentBox.left, childContentBox.cy));
} else { } else {
x = nodeContentBox.left - childContentBox.right; x = nodeContentBox.left - childContentBox.right;
x -= parent.getStyle('margin-left') + child.getStyle('margin-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 */ /* global Renderer: true */
KityMinder.registerModule('Connect', function() { kity.extendClass(Minder, {
return {
events: { createConnect: function(node) {
'nodecreate': function(e) { if (node.isRoot()) return;
var node = e.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); var connection = new kity.Path()
node._connection = connection; .stroke(strokeColor, strokeWidth);
this.getRenderContainer().prependShape(connection);
}, node._connection = 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()) { this.getRenderContainer().prependShape(connection);
},
case 'main': removeConnect: function(node) {
var me = this;
node.traverse(function(node) {
me.getRenderContainer().removeShape(node._connection);
});
},
start = new kity.Point(pBox.cx, pBox.cy); updateConnect: function(node) {
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 connection = node._connection;
var parent = node.parent;
var radius = node.getStyle('connect-radius'); if (!parent) return;
if (side == 'right') {
start = new kity.Point(box.left - node.getStyle('margin-left') / 2, pBox.cy); var box = node.getLayoutBox(),
end = new kity.Point(box.right + node.getStyle('margin-right') / 2, box.bottom); pBox = parent.getLayoutBox();
} else {
start = new kity.Point(box.right + node.getStyle('margin-right') / 2, pBox.cy); var start, end, vector;
end = new kity.Point(box.left - node.getStyle('margin-left') / 2, box.bottom); var abs = Math.abs;
} var pathData = [];
var isTop = parent.children.length > 1 && node.getIndex() === 0;
var side = box.cx > pBox.cx ? 'right' : 'left';
if (parent.isCollapsed()) {
connection.setVisible(false);
return;
}
connection.setVisible(true);
pathData.push('M', start); switch (node.getType()) {
pathData.push('L', start.x, isTop ? (end.y + radius) : (end.y - radius));
var sf = +(side == 'right' && isTop || side == 'left' && !isTop); case 'main':
var ex = side == 'right' ? (start.x + radius) : (start.x - radius);
pathData.push('A', radius, radius, 0, 0, sf, ex, end.y); start = new kity.Point(pBox.cx, pBox.cy);
pathData.push('L', end); 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);
} }
connection.setPathData(pathData); end.y += 1;
}
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);
}
});
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 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', { var PriorityIcon = kity.createClass('PriorityIcon', {
base: kity.Group, base: kity.Group,
constructor: function(value) { constructor: function() {
this.callBase(); this.callBase();
this.setSize(20); this.setSize(20);
this.create(); this.create();
this.setValue(value);
this.setId(KityMinder.uuid('node_priority')); this.setId(KityMinder.uuid('node_priority'));
}, },
...@@ -50,93 +55,13 @@ KityMinder.registerModule('IconModule', function() { ...@@ -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', { var PriorityCommand = kity.createClass('SetPriorityCommand', {
base: Command, base: Command,
execute: function(km, value) { execute: function(km, value) {
var nodes = km.getSelectedNodes(); var nodes = km.getSelectedNodes();
for (var i = 0; i < nodes.length; i++) { for (var i = 0; i < nodes.length; i++) {
nodes[i].setData('PriorityIcon', value).render(); nodes[i].setData(PRIORITY_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('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(); km.layout();
}, },
...@@ -144,7 +69,7 @@ KityMinder.registerModule('IconModule', function() { ...@@ -144,7 +69,7 @@ KityMinder.registerModule('IconModule', function() {
var nodes = km.getSelectedNodes(); var nodes = km.getSelectedNodes();
var val; var val;
for (var i = 0; i < nodes.length; i++) { for (var i = 0; i < nodes.length; i++) {
val = nodes[i].getData('ProgressIcon'); val = nodes[i].getData(PRIORITY_DATA);
if (val) break; if (val) break;
} }
return val; return val;
...@@ -153,22 +78,20 @@ KityMinder.registerModule('IconModule', function() { ...@@ -153,22 +78,20 @@ KityMinder.registerModule('IconModule', function() {
return { return {
'commands': { 'commands': {
'priority': PriorityCommand, 'priority': PriorityCommand,
'progress': ProgressCommand
}, },
'renderers': { 'renderers': {
left: kity.createClass('Icon', { left: kity.createClass('PriorityRenderer', {
base: Renderer, base: KityMinder.Renderer,
create: function(node) { create: function(node) {
this.priority = new PriorityIcon(); this.priority = new PriorityIcon();
node.getRenderContainer().addShape(this.priority); node.getRenderContainer().addShape(this.priority);
}, },
update: function(node) { update: function(node, box) {
var data = node.getData('PriorityIcon'); var data = node.getData(PRIORITY_DATA);
var spaceLeft = node.getStyle('space-left'); var spaceLeft = node.getStyle('space-left');
var icon = this.priority; var icon = this.priority;
var box = node.getContentBox();
var x, y; var x, y;
if (!data) { if (!data) {
...@@ -180,6 +103,7 @@ KityMinder.registerModule('IconModule', function() { ...@@ -180,6 +103,7 @@ KityMinder.registerModule('IconModule', function() {
x = box.left - icon.width - spaceLeft; x = box.left - icon.width - spaceLeft;
y = -icon.height / 2; y = -icon.height / 2;
icon.setTranslate(x, y); icon.setTranslate(x, y);
return { 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', { ...@@ -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': [20, 7], 'main-margin': [30, 6],
'main-radius': 10, 'main-radius': 10,
'main-space': 5, 'main-space': 5,
...@@ -22,7 +22,7 @@ KityMinder.registerTheme('default', { ...@@ -22,7 +22,7 @@ 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, 12], 'sub-margin': [5, 15],
'sub-radius': 5, 'sub-radius': 5,
'sub-space': 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