| 2316 |
tom.houday |
1 |
(function($) {
|
|
|
2 |
$.fn.connections = function(options) {
|
|
|
3 |
if (options === 'update') {
|
|
|
4 |
return processConnections(update, this);
|
|
|
5 |
} else if (options === 'remove') {
|
|
|
6 |
return processConnections(destroy, this);
|
|
|
7 |
} else {
|
|
|
8 |
options = $.extend(true, {
|
|
|
9 |
borderClasses: {},
|
|
|
10 |
'class': 'connection',
|
|
|
11 |
css: {},
|
|
|
12 |
from: this,
|
|
|
13 |
tag: 'connection',
|
|
|
14 |
to: this,
|
|
|
15 |
within: ':root'
|
|
|
16 |
}, options);
|
|
|
17 |
connect(options);
|
|
|
18 |
return this;
|
|
|
19 |
}
|
|
|
20 |
};
|
|
|
21 |
|
|
|
22 |
$.event.special.connections = {
|
|
|
23 |
teardown: function(namespaces) {
|
|
|
24 |
processConnections(destroy, $(this));
|
|
|
25 |
}
|
|
|
26 |
}
|
|
|
27 |
|
|
|
28 |
var connect = function(options) {
|
|
|
29 |
var borderClasses = options.borderClasses;
|
|
|
30 |
var tag = options.tag;
|
|
|
31 |
var end1 = $(options.from);
|
|
|
32 |
var end2 = $(options.to);
|
|
|
33 |
var within = $(options.within);
|
|
|
34 |
delete options.borderClasses;
|
|
|
35 |
delete options.tag;
|
|
|
36 |
delete options.from;
|
|
|
37 |
delete options.to;
|
|
|
38 |
delete options.within;
|
|
|
39 |
within.each(function() {
|
|
|
40 |
var container = this;
|
|
|
41 |
var done = new Array();
|
|
|
42 |
end1.each(function() {
|
|
|
43 |
var node = this;
|
|
|
44 |
done.push(this);
|
|
|
45 |
end2.not(done).each(function() {
|
|
|
46 |
createConnection(container, [node, this], tag, borderClasses, options);
|
|
|
47 |
});
|
|
|
48 |
});
|
|
|
49 |
});
|
|
|
50 |
};
|
|
|
51 |
|
|
|
52 |
var createConnection = function(container, nodes, tag, borderClasses, options) {
|
|
|
53 |
var css = $.extend({ position: 'absolute' }, options.css);
|
|
|
54 |
var connection = $('<' + tag + '/>', options).css(css);
|
|
|
55 |
connection.appendTo(container);
|
|
|
56 |
|
|
|
57 |
var border_w = (connection.outerWidth() - connection.innerWidth()) / 2;
|
|
|
58 |
var border_h = (connection.outerHeight() - connection.innerHeight()) / 2;
|
|
|
59 |
|
|
|
60 |
if (border_w <= 0 && border_h <= 0) {
|
|
|
61 |
border_w = border_h = 1;
|
|
|
62 |
}
|
|
|
63 |
|
|
|
64 |
var data = {
|
|
|
65 |
borderClasses: borderClasses,
|
|
|
66 |
border_h: border_h,
|
|
|
67 |
border_w: border_w,
|
|
|
68 |
node_from: $(nodes[0]),
|
|
|
69 |
node_to: $(nodes[1]),
|
|
|
70 |
nodes_dom: nodes,
|
|
|
71 |
css: css
|
|
|
72 |
}
|
|
|
73 |
|
|
|
74 |
if ('none' === connection.css('border-top-style')) {
|
|
|
75 |
data.css.borderStyle = 'solid';
|
|
|
76 |
}
|
|
|
77 |
$.data(connection.get(0), 'connection', data);
|
|
|
78 |
$.data(connection.get(0), 'connections', [connection.get(0)]);
|
|
|
79 |
for (var i = 0; i < 2; i++) {
|
|
|
80 |
var connections = connection.add($.data(nodes[i], 'connections')).get();
|
|
|
81 |
$.data(nodes[i], 'connections', connections);
|
|
|
82 |
if (connections.length == 1) {
|
|
|
83 |
$(nodes[i]).on('connections.connections', false);
|
|
|
84 |
}
|
|
|
85 |
}
|
|
|
86 |
update(connection.get(0));
|
|
|
87 |
};
|
|
|
88 |
|
|
|
89 |
var destroy = function(connection) {
|
|
|
90 |
var nodes = $.data(connection, 'connection').nodes_dom;
|
|
|
91 |
for (var i = 0; i < 2; i++) {
|
|
|
92 |
var connections = $($.data(nodes[i], 'connections')).not(connection).get();
|
|
|
93 |
$.data(nodes[i], 'connections', connections);
|
|
|
94 |
}
|
|
|
95 |
$(connection).remove();
|
|
|
96 |
};
|
|
|
97 |
|
|
|
98 |
var getState = function(data) {
|
|
|
99 |
data.rect_from = data.nodes_dom[0].getBoundingClientRect();
|
|
|
100 |
data.rect_to = data.nodes_dom[1].getBoundingClientRect();
|
|
|
101 |
var cached = data.cache;
|
|
|
102 |
data.cache = [
|
|
|
103 |
data.rect_from.top, data.rect_from.right, data.rect_from.bottom, data.rect_from.left,
|
|
|
104 |
data.rect_to.top, data.rect_to.right, data.rect_to.bottom, data.rect_to.left
|
|
|
105 |
];
|
|
|
106 |
data.hidden = (0 === (data.cache[0] | data.cache[1] | data.cache[2] | data.cache[3])) ||
|
|
|
107 |
(0 === (data.cache[4] | data.cache[5] | data.cache[6] | data.cache[7]));
|
|
|
108 |
data.unmodified = true;
|
|
|
109 |
if (cached === undefined) {
|
|
|
110 |
return data.unmodified = false;
|
|
|
111 |
}
|
|
|
112 |
for (var i = 0; i < 8; i++) {
|
|
|
113 |
if (cached[i] !== data.cache[i]) {
|
|
|
114 |
return data.unmodified = false;
|
|
|
115 |
}
|
|
|
116 |
}
|
|
|
117 |
}
|
|
|
118 |
|
|
|
119 |
var update = function(connection) {
|
|
|
120 |
var data = $.data(connection, 'connection');
|
|
|
121 |
getState(data);
|
|
|
122 |
if (data.unmodified) {
|
|
|
123 |
return;
|
|
|
124 |
}
|
|
|
125 |
var border_h = data.border_h;
|
|
|
126 |
var border_w = data.border_w;
|
|
|
127 |
var from_node = data.node_from;
|
|
|
128 |
var to_node = data.node_to;
|
|
|
129 |
var from = data.rect_from;
|
|
|
130 |
var to = data.rect_to;
|
|
|
131 |
var b = (from.bottom + from.top) / 2;
|
|
|
132 |
var r = (to.left + to.right) / 2;
|
|
|
133 |
var t = (to.bottom + to.top) / 2;
|
|
|
134 |
var l = (from.left + from.right) / 2;
|
|
|
135 |
|
|
|
136 |
var h = ['right', 'left'];
|
|
|
137 |
if (l > r) {
|
|
|
138 |
h = h.reverse();
|
|
|
139 |
var x = Math.max(r - border_w / 2, Math.min(from.right, to.right));
|
|
|
140 |
r = l + border_w / 2;
|
|
|
141 |
l = x;
|
|
|
142 |
} else {
|
|
|
143 |
l -= border_w / 2;
|
|
|
144 |
r = Math.min(r + border_w / 2, Math.max(from.left, to.left));
|
|
|
145 |
}
|
|
|
146 |
var v = ['bottom', 'top'];
|
|
|
147 |
if (t > b) {
|
|
|
148 |
v = v.reverse();
|
|
|
149 |
var x = Math.max(b - border_h / 2, Math.min(from.bottom, to.bottom));
|
|
|
150 |
b = t + border_h / 2;
|
|
|
151 |
t = x;
|
|
|
152 |
} else {
|
|
|
153 |
b = Math.min(b, Math.max(from.top, to.top));
|
|
|
154 |
t -= border_h / 2;
|
|
|
155 |
}
|
|
|
156 |
var width = r - l;
|
|
|
157 |
var height = b - t;
|
|
|
158 |
if (width < border_w) {
|
|
|
159 |
< border_w) { t = Math.max(t, Math.min(from.bottom, to.bottom));
|
|
|
160 |
< border_w) { b = Math.min(b, Math.max(from.top, to.top));
|
|
|
161 |
< border_w) { l = Math.max(from.left, to.left);
|
|
|
162 |
< border_w) { r = Math.min(from.right, to.right);
|
|
|
163 |
< border_w) { r = l = (l + r - border_w) / 2;
|
|
|
164 |
< border_w) { }
|
|
|
165 |
< border_w) { if (height < border_h) {
|
|
|
166 |
< border_w) { l = Math.max(l, Math.min(from.right, to.right));
|
|
|
167 |
< border_w) { r = Math.min(r, Math.max(from.left, to.left));
|
|
|
168 |
< border_w) { t = Math.max(from.top, to.top);
|
|
|
169 |
< border_w) { b = Math.min(from.bottom, to.bottom);
|
|
|
170 |
< border_w) { b = t = (t + b - border_h) / 2;
|
|
|
171 |
< border_w) { }
|
|
|
172 |
< border_w) { width = r - l;
|
|
|
173 |
< border_w) { height = b - t;
|
|
|
174 |
< border_w) { width <= 0 && (border_h = 0);
|
|
|
175 |
< border_w) {<= 0 && (border_h = 0); height <= 0 && (border_w = 0);
|
|
|
176 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0); var style =
|
|
|
177 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0); 'border-' + v[0] + '-' + h[0] + '-radius: 0;' +
|
|
|
178 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0); 'border-' + v[0] + '-' + h[1] + '-radius: 0;' +
|
|
|
179 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0); 'border-' + v[1] + '-' + h[0] + '-radius: 0;';
|
|
|
180 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0); (border_h <= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');
|
|
|
181 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); if (data.hidden) {
|
|
|
182 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); style += 'display: none;';
|
|
|
183 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); } else {
|
|
|
184 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); data.css['border-' + v[0] + '-width'] = 0;
|
|
|
185 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); data.css['border-' + h[0] + '-width'] = 0;
|
|
|
186 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); data.css['border-' + v[1] + '-width'] = border_h;
|
|
|
187 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); data.css['border-' + h[1] + '-width'] = border_w;
|
|
|
188 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); var current_rect = connection.getBoundingClientRect();
|
|
|
189 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); data.css.left = connection.offsetLeft + l - current_rect.left;
|
|
|
190 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); data.css.top = connection.offsetTop + t - current_rect.top;
|
|
|
191 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); data.css.width = width - border_w;
|
|
|
192 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); data.css.height = height - border_h;
|
|
|
193 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); }
|
|
|
194 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); var bc = data.borderClasses;
|
|
|
195 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); $(connection).
|
|
|
196 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); removeClass(bc[v[0]]).removeClass(bc[h[0]]).
|
|
|
197 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); addClass(bc[v[1]]).addClass(bc[h[1]]).
|
|
|
198 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); attr('style', style).
|
|
|
199 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); css(data.css);
|
|
|
200 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); }
|
|
|
201 |
|
|
|
202 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); var processConnections = function(method, elements) {
|
|
|
203 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); return elements.each(function() {
|
|
|
204 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); var connections = $.data(this, 'connections');
|
|
|
205 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); if (connections instanceof Array) {
|
|
|
206 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;'); for (var i = 0, len = connections.length; i < len; i++) {
|
|
|
207 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');< len; i++) { method(connections[i]);
|
|
|
208 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');< len; i++) { }
|
|
|
209 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');< len; i++) { }
|
|
|
210 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');< len; i++) { });
|
|
|
211 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');< len; i++) { };
|
|
|
212 |
< border_w) {<= 0 && (border_h = 0);<= 0 && (border_w = 0);<= 0 || border_w <= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');<= 0) && (style += 'border-' + v[1] + '-' + h[1] + '-radius: 0;');< len; i++) {})(jQuery);
|