forked from jsplumb/jsplumb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
todo.txt
230 lines (135 loc) · 8.05 KB
/
todo.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
2.0.0
- no IE8 (vml) support.
- class names changed to "jsplumb-endpoint" syntax rather than "_jsPlumb_endpoint".
- and what else?
1.7.0 (next after 1.6.4)
- Various performance enhancements:
- IE8 labels are centered through some extra code; every other browser uses translate(-50%,-50%), which gives an enormous performance boost.
- events on connections and endpoints and overlays are bound to a single delegate on the container, and no longer
on individual binds on the elements.
- 'reset' method re-work to _not_ call deleteEveryEndpoint, and instead to fast-track deletions. might need to add
reset functions to Mottle and Katavorio to support this.
future
(none of these things are definite. i just like to keep a list of ideas that i've bounced around with various people)
- use a <g> element around everything in the SVG renderer, and then only attach mouse events to that element. this will give us
a fix for the bg/fg mouseenter/leave bug, and also support a path per segment etc. much better.
can i wrap that up with dropping support for vml (ie8?)
- have a toFront and toBack method available on Connection (and on return value from jsPlumb.select method).
would require some notion of what the default zindex was. how best to do that?
- expose "rehomeEndpoint" method on jsPlumb (and 'rehome' on Endpoint); this takes an Endpoint and moves it
to a different parent. should take an optional second method to provide the Container to use.
- text on path (see demo)?
- svg labels (using svg label element) ?
- performance tests:
- single SVG element, many paths (what are mouse interaction/zindex ramifications?)
- single canvas (have to paint nodes).
- VML groups.
- type selector that takes some data and decides which types to apply to a
connection or endpoint.
- assign css classes to elements from params in Connection/Endpoint types
/**
* SVG support for jsPlumb.
*
* things to investigate:
*
* gradients: https://developer.mozilla.org/en/svg_in_html_introduction
* css:http://tutorials.jenkov.com/svg/svg-and-css.html
* text on a path: http://www.w3.org/TR/SVG/text.html#TextOnAPath
* pointer events: https://developer.mozilla.org/en/css/pointer-events
*
* IE9 hover jquery: http://forum.jquery.com/topic/1-6-2-broke-svg-hover-events
*
*/
FIXED in 1.6.3
- drag off a connection and drop it; it detaches. then try to drag a new connection - you get an error. .
- support cssClass in Connection/Endpoint types
FAQ
http://jsfiddle.net/sporritt/S4Fxk/12/ (connect to intermediate endpoint)
http://jsfiddle.net/sporritt/ZUm7p/50/ (connect list items)
Dragging Multiple Nodes:
http://jsfiddle.net/sporritt/ZQcEc/25/
This is actually offered out of the box in the no library version of jsPlumb 1.6.0. but maybe people
will still want to see instructions for jquery.
Extending a Connector:
jsPlumb.Connectors.Flowchart2 = function(params) {
jsPlumb.Connectors.Flowchart.apply(this, arguments);
var _c = this._compute;
this._compute = function(paintInfo, params) {
paintInfo.endStubX += 30;
_c(paintInfo, params);
}
};
---
makeTarget when elements overlap:
https://groups.google.com/forum/?fromgroups#!topic/jsplumb/C9d217E34oo
dropOptions: {
hoverClass: "dragHover",
over: function(event, ui){
$('.w').not(self.$el).droppable("disable");
},
out: function(event, ui){
$('.w').droppable("enable");
}
}
---
CSS to disable drag highlight:
http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting
---------------
Create a new node at the point a connection is dropped and attach a new connection to it:
jsPlumb.bind('connectionDragStop', function (data) {
if (data.target == null) {
var newBlock = createNewBlock(null);
jsPlumb.connect({ source:data.sourceId, target:newBlock.id + "-parent" });
}
});
-------------------------------------------------------------
blog post about connecting svg elements with jsplumb (note all fiddles broken here because of outdated
jsplumb links):
https://groups.google.com/forum/#!topic/jsplumb/l4oRdrclmyc
FIDDLE for 1.6.x : http://jsfiddle.net/RpCv4/37/
-------------------------------------------------
Joining spans (that have the default word wrap )
http://jsfiddle.net/3s07zbnf/7/
the basic idea is to create a helper span that is inserted after the target.
Performance
-----------
What takes most of the time?
- jsBezier
jsBezier load test with 100 000 curves took tens of milliseconds, so we can discount this.
- DOM relayouts
adding individual elements to the DOM, one for each connection/endpoint, causes dom relayouts.
is it possible to batch element creation using document fragments instead?
- getting offsets/size info
are there too many calls to updateOffset/getSize ?
- anchorManager
is the redraw routine in anchor manager optimized?
-
1.3.16
- add "perimeter" anchors: basically helper methods that create a set of dynamic anchors that together approximate the perimeter of some shape. so if you had circles, for instance, it would be straightforward to get a set of anchors that travel around the circumference of each one. or ellipses. whatever. also look into the possibility of jsPlumb interacting directly with SVG/VML elements to determine their perimeter.
- multiple paint styles, referenced by name. a simple case in on example app i saw could be "up", which paints green,
and "down" which paints red. then you could have "fat" and "skinny" for the bandwidth, for example. this would be backed with an API that behaved like classes on DOM elements -
you could have multiple assigned at once and jsPlumb would merge them all together.
(done, implemented as the 'types' concept)
1.3.11
- add jsPlumb.selectEndpoints(...); behaves the same way as .select, but for Endpoints
1.3.9
- do not set jsplumb scope on draggables when it's just some div you are making draggable. (issue 245) DONE
1.3.5
- refactor assigning endpoint styles into a common helper method DONE
- oncontextmenu event bind DONE
1.3.6
- mix of standard anchors on one end and continuous on the other does not paint (done)
- arrow overlay on flowchart sometimes jumps (done)
- random drag log entries (done)
- importDefaults({ some defaults }) method on jsPlumb (like a bulk import) DONE
- draggable by parent issue from google code DONE
possible future enhancements
- beforeDrag interceptor
- straight connector with continuous anchors disappears when horizontal or vertical (fixed?)
- single SVG element/single VML group/single Canvas per page?
- qunit: add helper methods to simulate mousedown and drag. then write some functional tests.
- image overlay?
- make AnchorManager the source of knowledge about connections (remove connections by scope etc)
- z-index: make a highlighted connection or one which is connected to an element that is being dragged come to the top over other connections. have a toFront and toBack method available on Connection (and on return value from jsPlumb.select method)
- jsPlumb should handle scope, dragActive etc. then can support multiple scopes.
- paint style "profiles": labelled paint styles, with inheritance. so hover, as an example, could extend from some normal state, and just override a couple of values. or you might have different "types" of connections, the paint styles for which could extend some default.