1 | /**
|
---|
2 | * Package: svedit.select
|
---|
3 | *
|
---|
4 | * Licensed under the Apache License, Version 2
|
---|
5 | *
|
---|
6 | * Copyright(c) 2010 Alexis Deveria
|
---|
7 | * Copyright(c) 2010 Jeff Schiller
|
---|
8 | */
|
---|
9 |
|
---|
10 | // Dependencies:
|
---|
11 | // 1) jQuery
|
---|
12 | // 2) browser.js
|
---|
13 | // 3) math.js
|
---|
14 | // 4) svgutils.js
|
---|
15 |
|
---|
16 | var svgedit = svgedit || {};
|
---|
17 |
|
---|
18 | (function() {
|
---|
19 |
|
---|
20 | if (!svgedit.select) {
|
---|
21 | svgedit.select = {};
|
---|
22 | }
|
---|
23 |
|
---|
24 | var svgFactory_;
|
---|
25 | var config_;
|
---|
26 | var selectorManager_; // A Singleton
|
---|
27 |
|
---|
28 | // Class: svgedit.select.Selector
|
---|
29 | // Private class for DOM element selection boxes
|
---|
30 | //
|
---|
31 | // Parameters:
|
---|
32 | // id - integer to internally indentify the selector
|
---|
33 | // elem - DOM element associated with this selector
|
---|
34 | svgedit.select.Selector = function(id, elem) {
|
---|
35 | // this is the selector's unique number
|
---|
36 | this.id = id;
|
---|
37 |
|
---|
38 | // this holds a reference to the element for which this selector is being used
|
---|
39 | this.selectedElement = elem;
|
---|
40 |
|
---|
41 | // this is a flag used internally to track whether the selector is being used or not
|
---|
42 | this.locked = true;
|
---|
43 |
|
---|
44 | // this holds a reference to the <g> element that holds all visual elements of the selector
|
---|
45 | this.selectorGroup = svgFactory_.createSVGElement({
|
---|
46 | 'element': 'g',
|
---|
47 | 'attr': {'id': ('selectorGroup' + this.id)}
|
---|
48 | });
|
---|
49 |
|
---|
50 | // this holds a reference to the path rect
|
---|
51 | this.selectorRect = this.selectorGroup.appendChild(
|
---|
52 | svgFactory_.createSVGElement({
|
---|
53 | 'element': 'path',
|
---|
54 | 'attr': {
|
---|
55 | 'id': ('selectedBox' + this.id),
|
---|
56 | 'fill': 'none',
|
---|
57 | 'stroke': '#4F80FF',
|
---|
58 | 'stroke-width': '1',
|
---|
59 | 'shape-rendering': 'crispEdges',
|
---|
60 | 'style': 'pointer-events:none'
|
---|
61 | }
|
---|
62 | })
|
---|
63 | );
|
---|
64 |
|
---|
65 | if (svgedit.browser.isTouch()) {
|
---|
66 | this.selectorRect.setAttribute("stroke-opacity", 0.3);
|
---|
67 | }
|
---|
68 |
|
---|
69 | // this holds a reference to the grip coordinates for this selector
|
---|
70 | this.gripCoords = {
|
---|
71 | 'nw': null,
|
---|
72 | 'n' : null,
|
---|
73 | 'ne': null,
|
---|
74 | 'e' : null,
|
---|
75 | 'se': null,
|
---|
76 | 's' : null,
|
---|
77 | 'sw': null,
|
---|
78 | 'w' : null
|
---|
79 | };
|
---|
80 |
|
---|
81 | this.reset(this.selectedElement);
|
---|
82 | };
|
---|
83 |
|
---|
84 |
|
---|
85 | // Function: svgedit.select.Selector.reset
|
---|
86 | // Used to reset the id and element that the selector is attached to
|
---|
87 | //
|
---|
88 | // Parameters:
|
---|
89 | // e - DOM element associated with this selector
|
---|
90 | svgedit.select.Selector.prototype.reset = function(e) {
|
---|
91 | this.locked = true;
|
---|
92 | this.selectedElement = e;
|
---|
93 | this.resize();
|
---|
94 | this.selectorGroup.setAttribute('display', 'inline');
|
---|
95 | };
|
---|
96 |
|
---|
97 | // Function: svgedit.select.Selector.updateGripCursors
|
---|
98 | // Updates cursors for corner grips on rotation so arrows point the right way
|
---|
99 | //
|
---|
100 | // Parameters:
|
---|
101 | // angle - Float indicating current rotation angle in degrees
|
---|
102 | svgedit.select.Selector.prototype.updateGripCursors = function(angle) {
|
---|
103 | var dir_arr = [];
|
---|
104 | var steps = Math.round(angle / 45);
|
---|
105 | if(steps < 0) steps += 8;
|
---|
106 | for (var dir in selectorManager_.selectorGrips) {
|
---|
107 | dir_arr.push(dir);
|
---|
108 | }
|
---|
109 | while(steps > 0) {
|
---|
110 | dir_arr.push(dir_arr.shift());
|
---|
111 | steps--;
|
---|
112 | }
|
---|
113 | var i = 0;
|
---|
114 | for (var dir in selectorManager_.selectorGrips) {
|
---|
115 | selectorManager_.selectorGrips[dir].setAttribute('style', ('cursor:' + dir_arr[i] + '-resize'));
|
---|
116 | i++;
|
---|
117 | };
|
---|
118 | };
|
---|
119 |
|
---|
120 | // Function: svgedit.select.Selector.showGrips
|
---|
121 | // Show the resize grips of this selector
|
---|
122 | //
|
---|
123 | // Parameters:
|
---|
124 | // show - boolean indicating whether grips should be shown or not
|
---|
125 | svgedit.select.Selector.prototype.showGrips = function(show) {
|
---|
126 | // TODO: use suspendRedraw() here
|
---|
127 | var bShow = show ? 'inline' : 'none';
|
---|
128 | selectorManager_.selectorGripsGroup.setAttribute('display', bShow);
|
---|
129 | var elem = this.selectedElement;
|
---|
130 | this.hasGrips = show;
|
---|
131 | if(elem && show) {
|
---|
132 | this.selectorGroup.appendChild(selectorManager_.selectorGripsGroup);
|
---|
133 | this.updateGripCursors(svgedit.utilities.getRotationAngle(elem));
|
---|
134 | }
|
---|
135 | };
|
---|
136 |
|
---|
137 | // Function: svgedit.select.Selector.resize
|
---|
138 | // Updates the selector to match the element's size
|
---|
139 | svgedit.select.Selector.prototype.resize = function() {
|
---|
140 | var selectedBox = this.selectorRect,
|
---|
141 | mgr = selectorManager_,
|
---|
142 | selectedGrips = mgr.selectorGrips,
|
---|
143 | selected = this.selectedElement,
|
---|
144 | sw = selected.getAttribute('stroke-width'),
|
---|
145 | current_zoom = svgFactory_.currentZoom();
|
---|
146 | var offset = 1/current_zoom;
|
---|
147 | if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
|
---|
148 | offset += (sw/2);
|
---|
149 | }
|
---|
150 |
|
---|
151 | var tagName = selected.tagName;
|
---|
152 | if (tagName === 'text') {
|
---|
153 | offset += 2/current_zoom;
|
---|
154 | }
|
---|
155 |
|
---|
156 | // loop and transform our bounding box until we reach our first rotation
|
---|
157 | var tlist = svgedit.transformlist.getTransformList(selected);
|
---|
158 | var m = svgedit.math.transformListToTransform(tlist).matrix;
|
---|
159 |
|
---|
160 | // This should probably be handled somewhere else, but for now
|
---|
161 | // it keeps the selection box correctly positioned when zoomed
|
---|
162 | m.e *= current_zoom;
|
---|
163 | m.f *= current_zoom;
|
---|
164 |
|
---|
165 | var bbox = svgedit.utilities.getBBox(selected);
|
---|
166 | if(tagName === 'g' && !$.data(selected, 'gsvg')) {
|
---|
167 | // The bbox for a group does not include stroke vals, so we
|
---|
168 | // get the bbox based on its children.
|
---|
169 | var stroked_bbox = svgFactory_.getStrokedBBox(selected.childNodes);
|
---|
170 | if(stroked_bbox) {
|
---|
171 | bbox = stroked_bbox;
|
---|
172 | }
|
---|
173 | }
|
---|
174 |
|
---|
175 | // apply the transforms
|
---|
176 | var l=bbox.x, t=bbox.y, w=bbox.width, h=bbox.height,
|
---|
177 | bbox = {x:l, y:t, width:w, height:h};
|
---|
178 |
|
---|
179 | // we need to handle temporary transforms too
|
---|
180 | // if skewed, get its transformed box, then find its axis-aligned bbox
|
---|
181 |
|
---|
182 | //*
|
---|
183 | offset *= current_zoom;
|
---|
184 |
|
---|
185 | var nbox = svgedit.math.transformBox(l*current_zoom, t*current_zoom, w*current_zoom, h*current_zoom, m),
|
---|
186 | aabox = nbox.aabox,
|
---|
187 | nbax = aabox.x - offset,
|
---|
188 | nbay = aabox.y - offset,
|
---|
189 | nbaw = aabox.width + (offset * 2),
|
---|
190 | nbah = aabox.height + (offset * 2);
|
---|
191 |
|
---|
192 | // now if the shape is rotated, un-rotate it
|
---|
193 | var cx = nbax + nbaw/2,
|
---|
194 | cy = nbay + nbah/2;
|
---|
195 |
|
---|
196 | var angle = svgedit.utilities.getRotationAngle(selected);
|
---|
197 | if (angle) {
|
---|
198 | var rot = svgFactory_.svgRoot().createSVGTransform();
|
---|
199 | rot.setRotate(-angle,cx,cy);
|
---|
200 | var rotm = rot.matrix;
|
---|
201 | nbox.tl = svgedit.math.transformPoint(nbox.tl.x,nbox.tl.y,rotm);
|
---|
202 | nbox.tr = svgedit.math.transformPoint(nbox.tr.x,nbox.tr.y,rotm);
|
---|
203 | nbox.bl = svgedit.math.transformPoint(nbox.bl.x,nbox.bl.y,rotm);
|
---|
204 | nbox.br = svgedit.math.transformPoint(nbox.br.x,nbox.br.y,rotm);
|
---|
205 |
|
---|
206 | // calculate the axis-aligned bbox
|
---|
207 | var tl = nbox.tl;
|
---|
208 | var minx = tl.x,
|
---|
209 | miny = tl.y,
|
---|
210 | maxx = tl.x,
|
---|
211 | maxy = tl.y;
|
---|
212 |
|
---|
213 | var Min = Math.min, Max = Math.max;
|
---|
214 |
|
---|
215 | minx = Min(minx, Min(nbox.tr.x, Min(nbox.bl.x, nbox.br.x) ) ) - offset;
|
---|
216 | miny = Min(miny, Min(nbox.tr.y, Min(nbox.bl.y, nbox.br.y) ) ) - offset;
|
---|
217 | maxx = Max(maxx, Max(nbox.tr.x, Max(nbox.bl.x, nbox.br.x) ) ) + offset;
|
---|
218 | maxy = Max(maxy, Max(nbox.tr.y, Max(nbox.bl.y, nbox.br.y) ) ) + offset;
|
---|
219 |
|
---|
220 | nbax = minx;
|
---|
221 | nbay = miny;
|
---|
222 | nbaw = (maxx-minx);
|
---|
223 | nbah = (maxy-miny);
|
---|
224 | }
|
---|
225 | var sr_handle = svgFactory_.svgRoot().suspendRedraw(100);
|
---|
226 |
|
---|
227 | var dstr = 'M' + nbax + ',' + nbay
|
---|
228 | + ' L' + (nbax+nbaw) + ',' + nbay
|
---|
229 | + ' ' + (nbax+nbaw) + ',' + (nbay+nbah)
|
---|
230 | + ' ' + nbax + ',' + (nbay+nbah) + 'z';
|
---|
231 | selectedBox.setAttribute('d', dstr);
|
---|
232 |
|
---|
233 | var xform = angle ? 'rotate(' + [angle,cx,cy].join(',') + ')' : '';
|
---|
234 | this.selectorGroup.setAttribute('transform', xform);
|
---|
235 |
|
---|
236 | if(svgedit.browser.isTouch()) {
|
---|
237 | nbax -= 15.75;
|
---|
238 | nbay -= 15.75;
|
---|
239 | }
|
---|
240 | else {
|
---|
241 | nbax -= 4;
|
---|
242 | nbay -= 4;
|
---|
243 | }
|
---|
244 | this.gripCoords = {
|
---|
245 | 'nw': [nbax, nbay].map(Math.round),
|
---|
246 | 'ne': [nbax+nbaw, nbay].map(Math.round),
|
---|
247 | 'sw': [nbax, nbay+nbah].map(Math.round),
|
---|
248 | 'se': [nbax+nbaw, nbay+nbah].map(Math.round),
|
---|
249 | 'n': [nbax + (nbaw)/2, nbay].map(Math.round),
|
---|
250 | 'w': [nbax, nbay + (nbah)/2].map(Math.round),
|
---|
251 | 'e': [nbax + nbaw, nbay + (nbah)/2].map(Math.round),
|
---|
252 | 's': [nbax + (nbaw)/2, nbay + nbah].map(Math.round)
|
---|
253 | };
|
---|
254 |
|
---|
255 | for(var dir in this.gripCoords) {
|
---|
256 | var coords = this.gripCoords[dir];
|
---|
257 | selectedGrips[dir].setAttribute('x', coords[0]);
|
---|
258 | selectedGrips[dir].setAttribute('y', coords[1]);
|
---|
259 | };
|
---|
260 |
|
---|
261 | this.rotateCoords = {
|
---|
262 | 'nw': [nbax, nbay],
|
---|
263 | 'ne': [nbax+nbaw+8, nbay],
|
---|
264 | 'sw': [nbax, nbay+nbah+8],
|
---|
265 | 'se': [nbax+nbaw+8, nbay+nbah+8]
|
---|
266 | };
|
---|
267 |
|
---|
268 | for(var dir in this.rotateCoords) {
|
---|
269 | var coords = this.rotateCoords[dir];
|
---|
270 | mgr.rotateGrips[dir].setAttribute('cx', coords[0]);
|
---|
271 | mgr.rotateGrips[dir].setAttribute('cy', coords[1]);
|
---|
272 | }
|
---|
273 |
|
---|
274 | svgFactory_.svgRoot().unsuspendRedraw(sr_handle);
|
---|
275 | };
|
---|
276 |
|
---|
277 |
|
---|
278 | // Class: svgedit.select.SelectorManager
|
---|
279 | svgedit.select.SelectorManager = function() {
|
---|
280 | // this will hold the <g> element that contains all selector rects/grips
|
---|
281 | this.selectorParentGroup = null;
|
---|
282 |
|
---|
283 | // this is a special rect that is used for multi-select
|
---|
284 | this.rubberBandBox = null;
|
---|
285 |
|
---|
286 | // this will hold objects of type svgedit.select.Selector (see above)
|
---|
287 | this.selectors = [];
|
---|
288 |
|
---|
289 | // this holds a map of SVG elements to their Selector object
|
---|
290 | this.selectorMap = {};
|
---|
291 |
|
---|
292 | // this holds a reference to the grip elements
|
---|
293 | this.selectorGrips = {
|
---|
294 | 'nw': null,
|
---|
295 | 'n' : null,
|
---|
296 | 'ne': null,
|
---|
297 | 'e' : null,
|
---|
298 | 'se': null,
|
---|
299 | 's' : null,
|
---|
300 | 'sw': null,
|
---|
301 | 'w' : null
|
---|
302 | };
|
---|
303 |
|
---|
304 | this.selectorGripsGroup = null;
|
---|
305 | //this.rotateGripConnector = null;
|
---|
306 | this.rotateGrips = {
|
---|
307 | 'nw': null,
|
---|
308 | 'ne': null,
|
---|
309 | 'se': null,
|
---|
310 | 'sw': null
|
---|
311 | };
|
---|
312 |
|
---|
313 | this.initGroup();
|
---|
314 | };
|
---|
315 |
|
---|
316 | // Function: svgedit.select.SelectorManager.initGroup
|
---|
317 | // Resets the parent selector group element
|
---|
318 | svgedit.select.SelectorManager.prototype.initGroup = function() {
|
---|
319 | // remove old selector parent group if it existed
|
---|
320 | if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {
|
---|
321 | this.selectorParentGroup.parentNode.removeChild(this.selectorParentGroup);
|
---|
322 | }
|
---|
323 |
|
---|
324 | // create parent selector group and add it to svgroot
|
---|
325 | this.selectorParentGroup = svgFactory_.createSVGElement({
|
---|
326 | 'element': 'g',
|
---|
327 | 'attr': {'id': 'selectorParentGroup'}
|
---|
328 | });
|
---|
329 | this.selectorGripsGroup = svgFactory_.createSVGElement({
|
---|
330 | 'element': 'g',
|
---|
331 | 'attr': {'display': 'none'}
|
---|
332 | });
|
---|
333 | this.selectorParentGroup.appendChild(this.selectorGripsGroup);
|
---|
334 | svgFactory_.svgRoot().appendChild(this.selectorParentGroup);
|
---|
335 |
|
---|
336 | this.selectorMap = {};
|
---|
337 | this.selectors = [];
|
---|
338 | this.rubberBandBox = null;
|
---|
339 |
|
---|
340 | for (var dir in this.rotateGrips) {
|
---|
341 | var grip = svgFactory_.createSVGElement({
|
---|
342 | 'element': 'circle',
|
---|
343 | 'attr': {
|
---|
344 | 'id': 'selectorGrip_rotate_' + dir,
|
---|
345 | 'fill': '#000',
|
---|
346 | 'r': 8,
|
---|
347 | 'stroke': '#000',
|
---|
348 | "fill-opacity": 0,
|
---|
349 | "stroke-opacity": 0,
|
---|
350 | 'stroke-width': 0,
|
---|
351 | 'style': 'cursor:url(' + config_.imgPath + 'rotate.png) 12 12, auto;'
|
---|
352 | }
|
---|
353 | })
|
---|
354 | $.data(grip, 'dir', dir);
|
---|
355 | $.data(grip, 'type', 'rotate');
|
---|
356 | this.rotateGrips[dir] = this.selectorGripsGroup.appendChild(grip);
|
---|
357 | }
|
---|
358 |
|
---|
359 | // add the corner grips
|
---|
360 | for (var dir in this.selectorGrips) {
|
---|
361 | var grip = svgFactory_.createSVGElement({
|
---|
362 | 'element': 'rect',
|
---|
363 | 'attr': {
|
---|
364 | 'id': ('selectorGrip_resize_' + dir),
|
---|
365 | 'width': 8,
|
---|
366 | 'height': 8,
|
---|
367 | 'fill': "#4F80FF",
|
---|
368 | 'stroke': "rgba(0,0,0,0)",
|
---|
369 | 'stroke-width': 1,
|
---|
370 | 'style': ('cursor:' + dir + '-resize'),
|
---|
371 | 'pointer-events': 'all'
|
---|
372 | }
|
---|
373 | });
|
---|
374 | if (svgedit.browser.isTouch()) {
|
---|
375 |
|
---|
376 | grip.setAttribute("width", 30.5)
|
---|
377 | grip.setAttribute("height", 30.5)
|
---|
378 | grip.setAttribute("fill-opacity", 0.3)
|
---|
379 | }
|
---|
380 |
|
---|
381 | $.data(grip, 'dir', dir);
|
---|
382 | $.data(grip, 'type', 'resize');
|
---|
383 | this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip);
|
---|
384 | }
|
---|
385 |
|
---|
386 | if($('#canvasBackground').length) return;
|
---|
387 |
|
---|
388 | var dims = config_.dimensions;
|
---|
389 | var canvasbg = svgFactory_.createSVGElement({
|
---|
390 | 'element': 'svg',
|
---|
391 | 'attr': {
|
---|
392 | 'id': 'canvasBackground',
|
---|
393 | 'width': dims[0],
|
---|
394 | 'height': dims[1],
|
---|
395 | 'x': 0,
|
---|
396 | 'y': 0,
|
---|
397 | 'overflow': (svgedit.browser.isWebkit() ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out
|
---|
398 | 'style': 'pointer-events:none'
|
---|
399 | }
|
---|
400 | });
|
---|
401 |
|
---|
402 | var defs = svgFactory_.createSVGElement({
|
---|
403 | 'element': 'defs',
|
---|
404 | 'attr': {
|
---|
405 | 'id': 'placeholder_defs'
|
---|
406 | }
|
---|
407 | })
|
---|
408 |
|
---|
409 | var pattern = svgFactory_.createSVGElement({
|
---|
410 | 'element': 'pattern',
|
---|
411 | 'attr': {
|
---|
412 | 'id': 'checkerPattern',
|
---|
413 | 'patternUnits': 'userSpaceOnUse',
|
---|
414 | 'x': 0,
|
---|
415 | 'y': 0,
|
---|
416 | 'width': 20,
|
---|
417 | 'height': 20,
|
---|
418 | 'viewBox': '0 0 10 10'
|
---|
419 | }
|
---|
420 | })
|
---|
421 |
|
---|
422 | var pattern_bg = svgFactory_.createSVGElement({
|
---|
423 | 'element': 'rect',
|
---|
424 | 'attr': {
|
---|
425 | 'x': 0,
|
---|
426 | 'y': 0,
|
---|
427 | 'width': 10,
|
---|
428 | 'height': 10,
|
---|
429 | 'fill': "#fff"
|
---|
430 | }
|
---|
431 | })
|
---|
432 |
|
---|
433 | var pattern_square1 = svgFactory_.createSVGElement({
|
---|
434 | 'element': 'rect',
|
---|
435 | 'attr': {
|
---|
436 | 'x': 0,
|
---|
437 | 'y': 0,
|
---|
438 | 'width': 5,
|
---|
439 | 'height': 5,
|
---|
440 | 'fill': "#eee"
|
---|
441 | }
|
---|
442 | })
|
---|
443 |
|
---|
444 | var pattern_square2 = svgFactory_.createSVGElement({
|
---|
445 | 'element': 'rect',
|
---|
446 | 'attr': {
|
---|
447 | 'x': 5,
|
---|
448 | 'y': 5,
|
---|
449 | 'width': 5,
|
---|
450 | 'height': 5,
|
---|
451 | 'fill': "#eee"
|
---|
452 | }
|
---|
453 | })
|
---|
454 |
|
---|
455 | var rect = svgFactory_.createSVGElement({
|
---|
456 | 'element': 'rect',
|
---|
457 | 'attr': {
|
---|
458 | 'width': '100%',
|
---|
459 | 'height': '100%',
|
---|
460 | 'x': 0,
|
---|
461 | 'y': 0,
|
---|
462 | 'stroke-width': 1,
|
---|
463 | 'stroke': '#000',
|
---|
464 | 'fill': 'url(#checkerPattern)',
|
---|
465 | 'style': 'pointer-events:none'
|
---|
466 | }
|
---|
467 | });
|
---|
468 |
|
---|
469 | // Both Firefox and WebKit are too slow with this filter region (especially at higher
|
---|
470 | // zoom levels) and Opera has at least one bug
|
---|
471 | // if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
|
---|
472 | canvasbg.appendChild(defs);
|
---|
473 | defs.appendChild(pattern);
|
---|
474 | pattern.appendChild(pattern_bg);
|
---|
475 | pattern.appendChild(pattern_square1);
|
---|
476 | pattern.appendChild(pattern_square2);
|
---|
477 | canvasbg.appendChild(rect);
|
---|
478 |
|
---|
479 | svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
|
---|
480 | };
|
---|
481 |
|
---|
482 | // Function: svgedit.select.SelectorManager.requestSelector
|
---|
483 | // Returns the selector based on the given element
|
---|
484 | //
|
---|
485 | // Parameters:
|
---|
486 | // elem - DOM element to get the selector for
|
---|
487 | svgedit.select.SelectorManager.prototype.requestSelector = function(elem) {
|
---|
488 | if (elem == null) return null;
|
---|
489 | var N = this.selectors.length;
|
---|
490 | // If we've already acquired one for this element, return it.
|
---|
491 | if (typeof(this.selectorMap[elem.id]) == 'object') {
|
---|
492 | this.selectorMap[elem.id].locked = true;
|
---|
493 | return this.selectorMap[elem.id];
|
---|
494 | }
|
---|
495 | for (var i = 0; i < N; ++i) {
|
---|
496 | if (this.selectors[i] && !this.selectors[i].locked) {
|
---|
497 | this.selectors[i].locked = true;
|
---|
498 | this.selectors[i].reset(elem);
|
---|
499 | this.selectorMap[elem.id] = this.selectors[i];
|
---|
500 | return this.selectors[i];
|
---|
501 | }
|
---|
502 | }
|
---|
503 | // if we reached here, no available selectors were found, we create one
|
---|
504 | this.selectors[N] = new svgedit.select.Selector(N, elem);
|
---|
505 | this.selectorParentGroup.appendChild(this.selectors[N].selectorGroup);
|
---|
506 | this.selectorMap[elem.id] = this.selectors[N];
|
---|
507 | return this.selectors[N];
|
---|
508 | };
|
---|
509 |
|
---|
510 | // Function: svgedit.select.SelectorManager.releaseSelector
|
---|
511 | // Removes the selector of the given element (hides selection box)
|
---|
512 | //
|
---|
513 | // Parameters:
|
---|
514 | // elem - DOM element to remove the selector for
|
---|
515 | svgedit.select.SelectorManager.prototype.releaseSelector = function(elem) {
|
---|
516 | if (elem == null) return;
|
---|
517 | var N = this.selectors.length,
|
---|
518 | sel = this.selectorMap[elem.id];
|
---|
519 | for (var i = 0; i < N; ++i) {
|
---|
520 | if (this.selectors[i] && this.selectors[i] == sel) {
|
---|
521 | if (sel.locked == false) {
|
---|
522 | // TODO(codedread): Ensure this exists in this module.
|
---|
523 | console.log('WARNING! selector was released but was already unlocked');
|
---|
524 | }
|
---|
525 | delete this.selectorMap[elem.id];
|
---|
526 | sel.locked = false;
|
---|
527 | sel.selectedElement = null;
|
---|
528 | sel.showGrips(false);
|
---|
529 |
|
---|
530 | // remove from DOM and store reference in JS but only if it exists in the DOM
|
---|
531 | try {
|
---|
532 | sel.selectorGroup.setAttribute('display', 'none');
|
---|
533 | } catch(e) { }
|
---|
534 |
|
---|
535 | break;
|
---|
536 | }
|
---|
537 | }
|
---|
538 | };
|
---|
539 |
|
---|
540 | // Function: svgedit.select.SelectorManager.getRubberBandBox
|
---|
541 | // Returns the rubberBandBox DOM element. This is the rectangle drawn by the user for selecting/zooming
|
---|
542 | svgedit.select.SelectorManager.prototype.getRubberBandBox = function() {
|
---|
543 | if (!this.rubberBandBox) {
|
---|
544 | this.rubberBandBox = this.selectorParentGroup.appendChild(
|
---|
545 | svgFactory_.createSVGElement({
|
---|
546 | 'element': 'rect',
|
---|
547 | 'attr': {
|
---|
548 | 'id': 'selectorRubberBand',
|
---|
549 | 'fill': 'none',
|
---|
550 | 'stroke': '#666',
|
---|
551 | 'stroke-width': 1,
|
---|
552 | 'stroke-dasharray': '3,2',
|
---|
553 | 'display': 'none',
|
---|
554 | 'style': 'pointer-events:none'
|
---|
555 | }
|
---|
556 | })
|
---|
557 | );
|
---|
558 | }
|
---|
559 | return this.rubberBandBox;
|
---|
560 | };
|
---|
561 |
|
---|
562 |
|
---|
563 | /**
|
---|
564 | * Interface: svgedit.select.SVGFactory
|
---|
565 | * An object that creates SVG elements for the canvas.
|
---|
566 | *
|
---|
567 | * interface svgedit.select.SVGFactory {
|
---|
568 | * SVGElement createSVGElement(jsonMap);
|
---|
569 | * SVGSVGElement svgRoot();
|
---|
570 | * SVGSVGElement svgContent();
|
---|
571 | *
|
---|
572 | * Number currentZoom();
|
---|
573 | * Object getStrokedBBox(Element[]); // TODO(codedread): Remove when getStrokedBBox() has been put into svgutils.js
|
---|
574 | * }
|
---|
575 | */
|
---|
576 |
|
---|
577 | /**
|
---|
578 | * Function: svgedit.select.init()
|
---|
579 | * Initializes this module.
|
---|
580 | *
|
---|
581 | * Parameters:
|
---|
582 | * config - an object containing configurable parameters (imgPath)
|
---|
583 | * svgFactory - an object implementing the SVGFactory interface (see above).
|
---|
584 | */
|
---|
585 | svgedit.select.init = function(config, svgFactory) {
|
---|
586 | config_ = config;
|
---|
587 | svgFactory_ = svgFactory;
|
---|
588 | selectorManager_ = new svgedit.select.SelectorManager();
|
---|
589 | //for hovering elements
|
---|
590 | svgFactory_.createSVGElement({
|
---|
591 | 'element': 'g',
|
---|
592 | 'attr': {
|
---|
593 | 'id': 'hover_group'
|
---|
594 | }
|
---|
595 | })
|
---|
596 | };
|
---|
597 |
|
---|
598 | /**
|
---|
599 | * Function: svgedit.select.getSelectorManager
|
---|
600 | *
|
---|
601 | * Returns:
|
---|
602 | * The SelectorManager instance.
|
---|
603 | */
|
---|
604 | svgedit.select.getSelectorManager = function() {
|
---|
605 | return selectorManager_;
|
---|
606 | };
|
---|
607 |
|
---|
608 | })(); |
---|