Skip to content

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

添加连线随布局变化的机制

parent e8a6e782
Show whitespace changes
Inline Side-by-side
Showing with 187 additions and 29 deletions
dialogs/resource/resource.js
View file @ 64058ae4
(function (utils) {
(function(utils) {
KM.registerWidget('resource', {
tpl:
'<div class="resource-container">' +
tpl: '<div class="resource-container">' +
'<div class="add-resource">' +
'<input type="text" /><button class="button">添加</button>' +
'<ul class="global-resource"></ul>' +
......@@ -9,13 +8,13 @@
'</div>' +
'<div class="no-selected">未选中节点</div>',
initContent: function (km, $w) {
initContent: function(km, $w) {
var lang = km.getLang('dialogs.resource'),
html = $.parseTmpl(this.tpl, lang);
this.root().html(html);
},
initEvent: function (km, $w) {
initEvent: function(km, $w) {
var $container = $w.find('.resource-container');
var $noSelected = $w.find('.no-selected');
var $current = $w.find('.current-resource').hide();
......@@ -43,7 +42,7 @@
$addInput.val(null);
}
$addInput.on('keydown', function (e) {
$addInput.on('keydown', function(e) {
if (e.keyCode == 13) addResource();
});
......@@ -51,19 +50,19 @@
switchDisplay();
$global.delegate('input[type=checkbox]', 'change', function () {
km.execCommand('resource', $global.find('input[type=checkbox]:checked').map(function (index, chk) {
$global.delegate('input[type=checkbox]', 'change', function() {
km.execCommand('resource', $global.find('input[type=checkbox]:checked').map(function(index, chk) {
return $(chk).data('resource');
}).toArray());
});
km.on('interactchange', function (e) {
km.on('interactchange', function(e) {
var resource = this.queryCommandValue("resource");
var used = this.getUsedResource();
switchDisplay();
$global.empty().append(used.map(function (name) {
$global.empty().append(used.map(function(name) {
var $li = $('<li></li>'),
$label = $('<label></label>').appendTo($li),
$chk = $('<input type="checkbox" />')
......
import.js
View file @ 64058ae4
......@@ -15,12 +15,14 @@
'core/minder.module.js',
'core/minder.command.js',
'core/minder.node.js',
'core/minder.select.js',
'core/keymap.js',
'core/minder.lang.js',
'core/minder.defaultoptions.js',
'core/minder.preference.js',
'core/browser.js',
'core/layout.js',
'core/connect.js',
'core/render.js',
'core/theme.js',
'layout/default.js',
......@@ -34,7 +36,6 @@
'module/priority.js',
'module/image.js',
'module/resource.js',
'core/minder.select.js',
'module/view.js',
'module/dragtree.js',
'module/dropfile.js',
......
src/module/connect.js → src/core/connect.js
View file @ 64058ae4
/* global Renderer: true */
utils.extend(KityMinder, {
_connectProviders: {},
_defaultConnectProvider: function(node, parent) {
return [
'M', parent.getLayoutPoint(),
'L', node.getLayoutPoint()
];
},
registerConnectProvider: function(layout, provider) {
KityMinder._connectProviders[layout] = provider;
},
getConnectProvider: function(layout) {
return KityMinder._connectProviders[layout] || KityMinder._defaultConnectProvider;
}
});
kity.extendClass(Minder, {
createConnect: function(node) {
......@@ -30,59 +49,14 @@ kity.extendClass(Minder, {
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);
}
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);
}
var provider = KityMinder.getConnectProvider(node.getLayout());
var pathData = provider(node, parent);
connection.setPathData(pathData);
}
......
src/layout/default.js
View file @ 64058ae4
/* global Layout:true */
window.layoutSwitch = true;
KityMinder.registerLayout('default', kity.createClass({
base: Layout,
......@@ -108,3 +109,55 @@ KityMinder.registerLayout('default', kity.createClass({
}
}
}));
KityMinder.registerConnectProvider('default', function(node, parent) {
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';
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);
}
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);
}
return pathData;
});
src/module/resource.js
View file @ 64058ae4
......@@ -34,7 +34,7 @@ KityMinder.registerModule('Resource', function() {
colorMapping[resource] = nextIndex;
}
// 资源过多，找不到可用索引颜色，统一返回白色åå
// 资源过多，找不到可用索引颜色，统一返回白色
return RESOURCE_COLOR_SERIES[colorMapping[resource]] || RESOURCE_COLOR_OVERFLOW;
},
......@@ -162,27 +162,36 @@ KityMinder.registerModule('Resource', function() {
var ResourceOverlay = kity.createClass('ResourceOverlay', {
base: kity.Group,
constructor: function(container, resourceName, color) {
constructor: function() {
this.callBase();
var text, rect;
rect = this.rect = new kity.Rect();
text = this.text = new kity.Text()
.setFontSize(12)
.setVerticalAlign('middle');
this.addShapes([rect, text]);
},
setValue: function(resourceName, color) {
var paddingX = 8,
paddingY = 4,
borderRadius = 4;
var text, box, rect;
container.addShape(this);
text = new kity.Text()
.setContent(resourceName)
.setFontSize(12)
.setVerticalAlign('middle')
text = this.text
.setX(paddingX)
.setContent(resourceName)
.fill(color.dec('l', 70));
this.addShape(text);
box = text.getBoundaryBox();
rect.setPosition(0, box.y - paddingY);
rect.setSize(box.width + paddingX * 2, box.height + paddingY * 2);
rect = new kity.Rect(
box.width + paddingX * 2,
box.height + paddingY * 2,
......@@ -194,6 +203,21 @@ KityMinder.registerModule('Resource', function() {
this.addShape(rect);
rect.bringRear();
}
});
/**
* @class 资源渲染器
*/
var ResourceRenderer = kity.createClass('ResourceRenderer', {
base: KityMinder.Renderer,
create: function(node) {
this.container = new kity.Group();
this.overlays = [];
},
update: function(node) {
}
});
......@@ -219,6 +243,10 @@ KityMinder.registerModule('Resource', function() {
});
}
}
},
renderers: {
right: ResourceRenderer
}
};
});
\ 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