forked from SVG-Edit/svgedit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
utilities.js
1197 lines (1092 loc) · 37.9 KB
/
utilities.js
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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/**
* Miscellaneous utilities.
* @module utilities
* @license MIT
*
* @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
*/
import { NS } from './namespaces.js'
import { setUnitAttr, getTypeMap } from '../common/units.js'
import {
hasMatrixTransform, transformListToTransform, transformBox
} from './math.js'
import { getClosest, mergeDeep } from '../editor/components/jgraduate/Util.js'
// Much faster than running getBBox() every time
const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use,clipPath'
const visElemsArr = visElems.split(',')
// const hidElems = 'defs,desc,feGaussianBlur,filter,linearGradient,marker,mask,metadata,pattern,radialGradient,stop,switch,symbol,title,textPath';
let svgCanvas = null
let svgroot_ = null
/**
* Object with the following keys/values.
* @typedef {PlainObject} module:utilities.SVGElementJSON
* @property {string} element - Tag name of the SVG element to create
* @property {PlainObject<string, string>} attr - Has key-value attributes to assign to the new element.
* An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementsFromJson} can later re-identify the element for modification or replacement.
* @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first
* @property {module:utilities.SVGElementJSON[]} [children] - Data objects to be added recursively as children
* @property {string} [namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace
*/
/**
* An object that creates SVG elements for the canvas.
*
* @interface module:utilities.EditorContext
* @property {module:path.pathActions} pathActions
*/
/**
* @function module:utilities.EditorContext#getSvgContent
* @returns {SVGSVGElement}
*/
/**
* Create a new SVG element based on the given object keys/values and add it
* to the current layer.
* The element will be run through `cleanupElement` before being returned.
* @function module:utilities.EditorContext#addSVGElementsFromJson
* @param {module:utilities.SVGElementJSON} data
* @returns {Element} The new element
*/
/**
* @function module:utilities.EditorContext#getSelectedElements
* @returns {Element[]} the array with selected DOM elements
*/
/**
* @function module:utilities.EditorContext#getDOMDocument
* @returns {HTMLDocument}
*/
/**
* @function module:utilities.EditorContext#getDOMContainer
* @returns {HTMLElement}
*/
/**
* @function module:utilities.EditorContext#getSvgRoot
* @returns {SVGSVGElement}
*/
/**
* @function module:utilities.EditorContext#getBaseUnit
* @returns {string}
*/
/**
* @function module:utilities.EditorContext#getSnappingStep
* @returns {Float|string}
*/
/**
* @function module:utilities.init
* @param {module:utilities.EditorContext} canvas
* @returns {void}
*/
export const init = (canvas) => {
svgCanvas = canvas
svgroot_ = canvas.getSvgRoot()
}
/**
* Used to prevent the [Billion laughs attack]{@link https://en.wikipedia.org/wiki/Billion_laughs_attack}.
* @function module:utilities.dropXMLInternalSubset
* @param {string} str String to be processed
* @returns {string} The string with entity declarations in the internal subset removed
* @todo This might be needed in other places `parseFromString` is used even without LGTM flagging
*/
export const dropXMLInternalSubset = (str) => {
return str.replace(/(<!DOCTYPE\s+\w*\s*\[).*(\?]>)/, '$1$2')
// return str.replace(/(?<doctypeOpen><!DOCTYPE\s+\w*\s*\[).*(?<doctypeClose>\?\]>)/, '$<doctypeOpen>$<doctypeClose>');
}
/**
* Converts characters in a string to XML-friendly entities.
* @function module:utilities.toXml
* @example `&` becomes `&`
* @param {string} str - The string to be converted
* @returns {string} The converted string
*/
export const toXml = (str) => {
// ' is ok in XML, but not HTML
// > does not normally need escaping, though it can if within a CDATA expression (and preceded by "]]")
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''') // Note: `'` is XML only
}
// This code was written by Tyler Akins and has been placed in the
// public domain. It would be nice if you left this header intact.
// Base64 code from Tyler Akins -- http://rumkin.com
// schiller: Removed string concatenation in favour of Array.join() optimization,
// also precalculate the size of the array needed.
/**
* Converts a string to base64.
* @function module:utilities.encode64
* @param {string} input
* @returns {string} Base64 output
*/
export function encode64 (input) {
// base64 strings are 4/3 larger than the original string
input = encodeUTF8(input) // convert non-ASCII characters
return window.btoa(input) // Use native if available
}
/**
* Converts a string from base64.
* @function module:utilities.decode64
* @param {string} input Base64-encoded input
* @returns {string} Decoded output
*/
export function decode64 (input) {
return decodeUTF8(window.atob(input))
}
/**
* @function module:utilities.decodeUTF8
* @param {string} argString
* @returns {string}
*/
export function decodeUTF8 (argString) {
return decodeURIComponent(escape(argString))
}
// codedread:does not seem to work with webkit-based browsers on OSX // Brettz9: please test again as function upgraded
/**
* @function module:utilities.encodeUTF8
* @param {string} argString
* @returns {string}
*/
export const encodeUTF8 = (argString) => {
return unescape(encodeURIComponent(argString))
}
/**
* Convert dataURL to object URL.
* @function module:utilities.dataURLToObjectURL
* @param {string} dataurl
* @returns {string} object URL or empty string
*/
export const dataURLToObjectURL = (dataurl) => {
if (typeof Uint8Array === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL) {
return ''
}
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
/*
const [prefix, suffix] = dataurl.split(','),
{groups: {mime}} = prefix.match(/:(?<mime>.*?);/),
bstr = atob(suffix);
*/
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
const blob = new Blob([u8arr], { type: mime })
return URL.createObjectURL(blob)
}
/**
* Get object URL for a blob object.
* @function module:utilities.createObjectURL
* @param {Blob} blob A Blob object or File object
* @returns {string} object URL or empty string
*/
export const createObjectURL = (blob) => {
if (!blob || typeof URL === 'undefined' || !URL.createObjectURL) {
return ''
}
return URL.createObjectURL(blob)
}
/**
* @property {string} blankPageObjectURL
*/
export const blankPageObjectURL = (() => {
if (typeof Blob === 'undefined') {
return ''
}
const blob = new Blob(['<html><head><title>SVG-edit</title></head><body> </body></html>'], { type: 'text/html' })
return createObjectURL(blob)
})()
/**
* Converts a string to use XML references (for non-ASCII).
* @function module:utilities.convertToXMLReferences
* @param {string} input
* @returns {string} Decimal numeric character references
*/
export const convertToXMLReferences = (input) => {
let output = '';
[...input].forEach((ch) => {
const c = ch.charCodeAt()
output += (c <= 127) ? ch : `&#${c};`
})
return output
}
/**
* Cross-browser compatible method of converting a string to an XML tree.
* Found this function [here]{@link http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f}.
* @function module:utilities.text2xml
* @param {string} sXML
* @throws {Error}
* @returns {XMLDocument}
*/
export const text2xml = (sXML) => {
if (sXML.includes('<svg:svg')) {
sXML = sXML.replace(/<(\/?)svg:/g, '<$1').replace('xmlns:svg', 'xmlns')
}
let out; let dXML
try {
dXML = new DOMParser()
dXML.async = false
} catch (e) {
throw new Error('XML Parser could not be instantiated')
}
try {
out = dXML.parseFromString(sXML, 'text/xml')
} catch (e2) { throw new Error('Error parsing XML string') }
return out
}
/**
* @typedef {PlainObject} module:utilities.BBoxObject (like `DOMRect`)
* @property {Float} x
* @property {Float} y
* @property {Float} width
* @property {Float} height
*/
/**
* Converts a `SVGRect` into an object.
* @function module:utilities.bboxToObj
* @param {SVGRect} bbox - a SVGRect
* @returns {module:utilities.BBoxObject} An object with properties names x, y, width, height.
*/
export const bboxToObj = ({ x, y, width, height }) => {
return { x, y, width, height }
}
/**
* @callback module:utilities.TreeWalker
* @param {Element} elem - DOM element being traversed
* @returns {void}
*/
/**
* Walks the tree and executes the callback on each element in a top-down fashion.
* @function module:utilities.walkTree
* @param {Element} elem - DOM element to traverse
* @param {module:utilities.TreeWalker} cbFn - Callback function to run on each element
* @returns {void}
*/
export const walkTree = (elem, cbFn) => {
if (elem?.nodeType === 1) {
cbFn(elem)
let i = elem.childNodes.length
while (i--) {
walkTree(elem.childNodes.item(i), cbFn)
}
}
}
/**
* Walks the tree and executes the callback on each element in a depth-first fashion.
* @function module:utilities.walkTreePost
* @todo Shouldn't this be calling walkTreePost?
* @param {Element} elem - DOM element to traverse
* @param {module:utilities.TreeWalker} cbFn - Callback function to run on each element
* @returns {void}
*/
export const walkTreePost = (elem, cbFn) => {
if (elem?.nodeType === 1) {
let i = elem.childNodes.length
while (i--) {
walkTree(elem.childNodes.item(i), cbFn)
}
cbFn(elem)
}
}
/**
* Extracts the URL from the `url(...)` syntax of some attributes.
* Three variants:
* - `<circle fill="url(someFile.svg#foo)" />`
* - `<circle fill="url('someFile.svg#foo')" />`
* - `<circle fill='url("someFile.svg#foo")' />`
* @function module:utilities.getUrlFromAttr
* @param {string} attrVal The attribute value as a string
* @returns {string} String with just the URL, like "someFile.svg#foo"
*/
export const getUrlFromAttr = function (attrVal) {
if (attrVal) {
// url('#somegrad')
if (attrVal.startsWith('url("')) {
return attrVal.substring(5, attrVal.indexOf('"', 6))
}
// url('#somegrad')
if (attrVal.startsWith("url('")) {
return attrVal.substring(5, attrVal.indexOf("'", 6))
}
if (attrVal.startsWith('url(')) {
return attrVal.substring(4, attrVal.indexOf(')'))
}
}
return null
}
/**
* @function module:utilities.getHref
* @param {Element} elem
* @returns {string} The given element's `xlink:href` value
*/
export let getHref = function (elem) {
return elem.getAttributeNS(NS.XLINK, 'href')
}
/**
* Sets the given element's `xlink:href` value.
* @function module:utilities.setHref
* @param {Element} elem
* @param {string} val
* @returns {void}
*/
export let setHref = function (elem, val) {
elem.setAttributeNS(NS.XLINK, 'xlink:href', val)
}
/**
* @function module:utilities.findDefs
* @returns {SVGDefsElement} The document's `<defs>` element, creating it first if necessary
*/
export const findDefs = function () {
const svgElement = svgCanvas.getSvgContent()
let defs = svgElement.getElementsByTagNameNS(NS.SVG, 'defs')
if (defs.length > 0) {
defs = defs[0]
} else {
defs = svgElement.ownerDocument.createElementNS(NS.SVG, 'defs')
if (svgElement.firstChild) {
// first child is a comment, so call nextSibling
svgElement.insertBefore(defs, svgElement.firstChild.nextSibling)
// svgElement.firstChild.nextSibling.before(defs); // Not safe
} else {
svgElement.append(defs)
}
}
return defs
}
// TODO(codedread): Consider moving the next to functions to bbox.js
/**
* Get correct BBox for a path in Webkit.
* Converted from code found [here]{@link http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html}.
* @function module:utilities.getPathBBox
* @param {SVGPathElement} path - The path DOM element to get the BBox for
* @returns {module:utilities.BBoxObject} A BBox-like object
*/
export const getPathBBox = function (path) {
const seglist = path.pathSegList
const tot = seglist.numberOfItems
const bounds = [[], []]
const start = seglist.getItem(0)
let P0 = [start.x, start.y]
const getCalc = function (j, P1, P2, P3) {
return function (t) {
return 1 - t ** 3 * P0[j] +
3 * 1 - t ** 2 * t * P1[j] +
3 * (1 - t) * t ** 2 * P2[j] +
t ** 3 * P3[j]
}
}
for (let i = 0; i < tot; i++) {
const seg = seglist.getItem(i)
if (seg.x === undefined) { continue }
// Add actual points to limits
bounds[0].push(P0[0])
bounds[1].push(P0[1])
if (seg.x1) {
const P1 = [seg.x1, seg.y1]
const P2 = [seg.x2, seg.y2]
const P3 = [seg.x, seg.y]
for (let j = 0; j < 2; j++) {
const calc = getCalc(j, P1, P2, P3)
const b = 6 * P0[j] - 12 * P1[j] + 6 * P2[j]
const a = -3 * P0[j] + 9 * P1[j] - 9 * P2[j] + 3 * P3[j]
const c = 3 * P1[j] - 3 * P0[j]
if (a === 0) {
if (b === 0) { continue }
const t = -c / b
if (t > 0 && t < 1) {
bounds[j].push(calc(t))
}
continue
}
const b2ac = b ** 2 - 4 * c * a
if (b2ac < 0) { continue }
const t1 = (-b + Math.sqrt(b2ac)) / (2 * a)
if (t1 > 0 && t1 < 1) { bounds[j].push(calc(t1)) }
const t2 = (-b - Math.sqrt(b2ac)) / (2 * a)
if (t2 > 0 && t2 < 1) { bounds[j].push(calc(t2)) }
}
P0 = P3
} else {
bounds[0].push(seg.x)
bounds[1].push(seg.y)
}
}
const x = Math.min.apply(null, bounds[0])
const w = Math.max.apply(null, bounds[0]) - x
const y = Math.min.apply(null, bounds[1])
const h = Math.max.apply(null, bounds[1]) - y
return {
x,
y,
width: w,
height: h
}
}
/**
* Get the given/selected element's bounding box object, convert it to be more
* usable when necessary.
* @function module:utilities.getBBox
* @param {Element} elem - Optional DOM element to get the BBox for
* @returns {module:utilities.BBoxObject} Bounding box object
*/
export const getBBox = function (elem) {
const selected = elem || svgCanvas.getSelectedElements()[0]
if (elem.nodeType !== 1) { return null }
const elname = selected.nodeName
let ret = null
switch (elname) {
case 'text':
if (selected.textContent === '') {
selected.textContent = 'a' // Some character needed for the selector to use.
ret = selected.getBBox()
selected.textContent = ''
} else if (selected.getBBox) {
ret = selected.getBBox()
}
break
case 'path':
case 'g':
case 'a':
if (selected.getBBox) {
ret = selected.getBBox()
}
break
default:
if (elname === 'use') {
ret = selected.getBBox() // , true);
} else if (visElemsArr.includes(elname)) {
if (selected) {
try {
ret = selected.getBBox()
} catch (err) {
// tspan (and textPath apparently) have no `getBBox` in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=937268
// Re: Chrome returning bbox for containing text element, see: https://bugs.chromium.org/p/chromium/issues/detail?id=349835
const extent = selected.getExtentOfChar(0) // pos+dimensions of the first glyph
const width = selected.getComputedTextLength() // width of the tspan
ret = {
x: extent.x,
y: extent.y,
width,
height: extent.height
}
}
} else {
// Check if element is child of a foreignObject
const fo = getClosest(selected.parentNode, 'foreignObject')
if (fo.length && fo[0].getBBox) {
ret = fo[0].getBBox()
}
}
}
}
if (ret) {
ret = bboxToObj(ret)
}
// get the bounding box from the DOM (which is in that element's coordinate system)
return ret
}
/**
* @typedef {GenericArray} module:utilities.PathSegmentArray
* @property {Integer} length 2
* @property {"M"|"L"|"C"|"Z"} 0
* @property {Float[]} 1
*/
/**
* Create a path 'd' attribute from path segments.
* Each segment is an array of the form: `[singleChar, [x,y, x,y, ...]]`
* @function module:utilities.getPathDFromSegments
* @param {module:utilities.PathSegmentArray[]} pathSegments - An array of path segments to be converted
* @returns {string} The converted path d attribute.
*/
export const getPathDFromSegments = function (pathSegments) {
let d = ''
pathSegments.forEach(function ([singleChar, pts], _j) {
d += singleChar
for (let i = 0; i < pts.length; i += 2) {
d += (pts[i] + ',' + pts[i + 1]) + ' '
}
})
return d
}
/**
* Make a path 'd' attribute from a simple SVG element shape.
* @function module:utilities.getPathDFromElement
* @param {Element} elem - The element to be converted
* @returns {string} The path d attribute or `undefined` if the element type is unknown.
*/
export const getPathDFromElement = function (elem) {
// Possibly the cubed root of 6, but 1.81 works best
let num = 1.81
let d; let rx; let ry
switch (elem.tagName) {
case 'ellipse':
case 'circle': {
rx = Number(elem.getAttribute('rx'))
ry = Number(elem.getAttribute('ry'))
const cx = Number(elem.getAttribute('cx'))
const cy = Number(elem.getAttribute('cy'))
if (elem.tagName === 'circle' && elem.hasAttribute('r')) {
ry = Number(elem.getAttribute('r'))
rx = ry
}
d = getPathDFromSegments([
['M', [(cx - rx), (cy)]],
['C', [(cx - rx), (cy - ry / num), (cx - rx / num), (cy - ry), (cx), (cy - ry)]],
['C', [(cx + rx / num), (cy - ry), (cx + rx), (cy - ry / num), (cx + rx), (cy)]],
['C', [(cx + rx), (cy + ry / num), (cx + rx / num), (cy + ry), (cx), (cy + ry)]],
['C', [(cx - rx / num), (cy + ry), (cx - rx), (cy + ry / num), (cx - rx), (cy)]],
['Z', []]
])
break
} case 'path':
d = elem.getAttribute('d')
break
case 'line': {
const x1 = elem.getAttribute('x1')
const y1 = elem.getAttribute('y1')
const x2 = elem.getAttribute('x2')
const y2 = elem.getAttribute('y2')
d = 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2
}
break
case 'polyline':
d = 'M' + elem.getAttribute('points')
break
case 'polygon':
d = 'M' + elem.getAttribute('points') + ' Z'
break
case 'rect': {
rx = Number(elem.getAttribute('rx'))
ry = Number(elem.getAttribute('ry'))
const b = elem.getBBox()
const { x, y } = b
const w = b.width
const h = b.height
num = 4 - num // Why? Because!
d = (!rx && !ry)
// Regular rect
? getPathDFromSegments([
['M', [x, y]],
['L', [x + w, y]],
['L', [x + w, y + h]],
['L', [x, y + h]],
['L', [x, y]],
['Z', []]
])
: getPathDFromSegments([
['M', [x, y + ry]],
['C', [x, y + ry / num, x + rx / num, y, x + rx, y]],
['L', [x + w - rx, y]],
['C', [x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry]],
['L', [x + w, y + h - ry]],
['C', [x + w, y + h - ry / num, x + w - rx / num, y + h, x + w - rx, y + h]],
['L', [x + rx, y + h]],
['C', [x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry]],
['L', [x, y + ry]],
['Z', []]
])
break
} default:
break
}
return d
}
/**
* Get a set of attributes from an element that is useful for convertToPath.
* @function module:utilities.getExtraAttributesForConvertToPath
* @param {Element} elem - The element to be probed
* @returns {PlainObject<"marker-start"|"marker-end"|"marker-mid"|"filter"|"clip-path", string>} An object with attributes.
*/
export const getExtraAttributesForConvertToPath = function (elem) {
const attrs = {};
// TODO: make this list global so that we can properly maintain it
// TODO: what about @transform, @clip-rule, @fill-rule, etc?
['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'].forEach(function (item) {
const a = elem.getAttribute(item)
if (a) {
attrs[item] = a
}
})
return attrs
}
/**
* Get the BBox of an element-as-path.
* @function module:utilities.getBBoxOfElementAsPath
* @param {Element} elem - The DOM element to be probed
* @param {module:utilities.EditorContext#addSVGElementsFromJson} addSVGElementsFromJson - Function to add the path element to the current layer. See canvas.addSVGElementsFromJson
* @param {module:path.pathActions} pathActions - If a transform exists, `pathActions.resetOrientation()` is used. See: canvas.pathActions.
* @returns {DOMRect|false} The resulting path's bounding box object.
*/
export const getBBoxOfElementAsPath = function (elem, addSVGElementsFromJson, pathActions) {
const path = addSVGElementsFromJson({
element: 'path',
attr: getExtraAttributesForConvertToPath(elem)
})
const eltrans = elem.getAttribute('transform')
if (eltrans) {
path.setAttribute('transform', eltrans)
}
const { parentNode } = elem
if (elem.nextSibling) {
elem.before(path)
} else {
parentNode.append(path)
}
const d = getPathDFromElement(elem)
if (d) {
path.setAttribute('d', d)
} else {
path.remove()
}
// Get the correct BBox of the new path, then discard it
pathActions.resetOrientation(path)
let bb = false
try {
bb = path.getBBox()
} catch (e) {
// Firefox fails
}
path.remove()
return bb
}
/**
* Convert selected element to a path.
* @function module:utilities.convertToPath
* @param {Element} elem - The DOM element to be converted
* @param {module:utilities.SVGElementJSON} attrs - Apply attributes to new path. see canvas.convertToPath
* @param {module:utilities.EditorContext#addSVGElementsFromJson} addSVGElementsFromJson - Function to add the path element to the current layer. See canvas.addSVGElementsFromJson
* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
* @param {module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection} clearSelection - see [canvas.clearSelection]{@link module:svgcanvas.SvgCanvas#clearSelection}
* @param {module:path.EditorContext#addToSelection} addToSelection - see [canvas.addToSelection]{@link module:svgcanvas.SvgCanvas#addToSelection}
* @param {module:history} hstry - see history module
* @param {module:path.EditorContext#addCommandToHistory|module:draw.DrawCanvasInit#addCommandToHistory} addCommandToHistory - see [canvas.addCommandToHistory]{@link module:svgcanvas~addCommandToHistory}
* @returns {SVGPathElement|null} The converted path element or null if the DOM element was not recognized.
*/
export const convertToPath = (elem, attrs, svgCanvas) => {
const batchCmd = new svgCanvas.history.BatchCommand('Convert element to Path')
// Any attribute on the element not covered by the passed-in attributes
attrs = mergeDeep(attrs, getExtraAttributesForConvertToPath(elem))
const path = svgCanvas.addSVGElementsFromJson({
element: 'path',
attr: attrs
})
const eltrans = elem.getAttribute('transform')
if (eltrans) {
path.setAttribute('transform', eltrans)
}
const { id } = elem
const { parentNode } = elem
if (elem.nextSibling) {
elem.before(path)
} else {
parentNode.append(path)
}
const d = getPathDFromElement(elem)
if (d) {
path.setAttribute('d', d)
// Replace the current element with the converted one
// Reorient if it has a matrix
if (eltrans) {
const tlist = path.transform.baseVal
if (hasMatrixTransform(tlist)) {
svgCanvas.pathActions.resetOrientation(path)
}
}
const { nextSibling } = elem
batchCmd.addSubCommand(new svgCanvas.history.RemoveElementCommand(elem, nextSibling, elem.parentNode))
svgCanvas.clearSelection()
elem.remove() // We need to remove this element otherwise the nextSibling of 'path' won't be null and an exception will be thrown after subsequent undo and redos.
batchCmd.addSubCommand(new svgCanvas.history.InsertElementCommand(path))
path.setAttribute('id', id)
path.removeAttribute('visibility')
svgCanvas.addToSelection([path], true)
svgCanvas.addCommandToHistory(batchCmd)
return path
}
// the elem.tagName was not recognized, so no "d" attribute. Remove it, so we've haven't changed anything.
path.remove()
return null
}
/**
* Can the bbox be optimized over the native getBBox? The optimized bbox is the same as the native getBBox when
* the rotation angle is a multiple of 90 degrees and there are no complex transforms.
* Getting an optimized bbox can be dramatically slower, so we want to make sure it's worth it.
*
* The best example for this is a circle rotate 45 degrees. The circle doesn't get wider or taller when rotated
* about it's center.
*
* The standard, unoptimized technique gets the native bbox of the circle, rotates the box 45 degrees, uses
* that width and height, and applies any transforms to get the final bbox. This means the calculated bbox
* is much wider than the original circle. If the angle had been 0, 90, 180, etc. both techniques render the
* same bbox.
*
* The optimization is not needed if the rotation is a multiple 90 degrees. The default technique is to call
* getBBox then apply the angle and any transforms.
*
* @param {Float} angle - The rotation angle in degrees
* @param {boolean} hasAMatrixTransform - True if there is a matrix transform
* @returns {boolean} True if the bbox can be optimized.
*/
function bBoxCanBeOptimizedOverNativeGetBBox (angle, hasAMatrixTransform) {
const angleModulo90 = angle % 90
const closeTo90 = angleModulo90 < -89.99 || angleModulo90 > 89.99
const closeTo0 = angleModulo90 > -0.001 && angleModulo90 < 0.001
return hasAMatrixTransform || !(closeTo0 || closeTo90)
}
/**
* Get bounding box that includes any transforms.
* @function module:utilities.getBBoxWithTransform
* @param {Element} elem - The DOM element to be converted
* @param {module:utilities.EditorContext#addSVGElementsFromJson} addSVGElementsFromJson - Function to add the path element to the current layer. See canvas.addSVGElementsFromJson
* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
* @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object
*/
export const getBBoxWithTransform = function (elem, addSVGElementsFromJson, pathActions) {
// TODO: Fix issue with rotated groups. Currently they work
// fine in FF, but not in other browsers (same problem mentioned
// in Issue 339 comment #2).
let bb = getBBox(elem)
if (!bb) {
return null
}
const tlist = elem.transform.baseVal
const angle = getRotationAngleFromTransformList(tlist)
const hasMatrixXForm = hasMatrixTransform(tlist)
if (angle || hasMatrixXForm) {
let goodBb = false
if (bBoxCanBeOptimizedOverNativeGetBBox(angle, hasMatrixXForm)) {
// Get the BBox from the raw path for these elements
// TODO: why ellipse and not circle
const elemNames = ['ellipse', 'path', 'line', 'polyline', 'polygon']
if (elemNames.includes(elem.tagName)) {
goodBb = getBBoxOfElementAsPath(elem, addSVGElementsFromJson, pathActions)
bb = goodBb
} else if (elem.tagName === 'rect') {
// Look for radius
const rx = Number(elem.getAttribute('rx'))
const ry = Number(elem.getAttribute('ry'))
if (rx || ry) {
goodBb = getBBoxOfElementAsPath(elem, addSVGElementsFromJson, pathActions)
bb = goodBb
}
}
}
if (!goodBb) {
const { matrix } = transformListToTransform(tlist)
bb = transformBox(bb.x, bb.y, bb.width, bb.height, matrix).aabox
}
}
return bb
}
/**
* @param {Element} elem
* @returns {Float}
* @todo This is problematic with large stroke-width and, for example, a single
* horizontal line. The calculated BBox extends way beyond left and right sides.
*/
const getStrokeOffsetForBBox = (elem) => {
const sw = elem.getAttribute('stroke-width')
return (!isNaN(sw) && elem.getAttribute('stroke') !== 'none') ? sw / 2 : 0
}
/**
* @typedef {PlainObject} BBox
* @property {Integer} x The x value
* @property {Integer} y The y value
* @property {Float} width
* @property {Float} height
*/
/**
* Get the bounding box for one or more stroked and/or transformed elements.
* @function module:utilities.getStrokedBBox
* @param {Element[]} elems - Array with DOM elements to check
* @param {module:utilities.EditorContext#addSVGElementsFromJson} addSVGElementsFromJson - Function to add the path element to the current layer. See canvas.addSVGElementsFromJson
* @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
* @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object
*/
export const getStrokedBBox = (elems, addSVGElementsFromJson, pathActions) => {
if (!elems || !elems.length) { return false }
let fullBb
elems.forEach((elem) => {
if (fullBb) { return }
if (!elem.parentNode) { return }
fullBb = getBBoxWithTransform(elem, addSVGElementsFromJson, pathActions)
})
// This shouldn't ever happen...
if (!fullBb) { return null }
// fullBb doesn't include the stoke, so this does no good!
// if (elems.length == 1) return fullBb;
let maxX = fullBb.x + fullBb.width
let maxY = fullBb.y + fullBb.height
let minX = fullBb.x
let minY = fullBb.y
// If only one elem, don't call the potentially slow getBBoxWithTransform method again.
if (elems.length === 1) {
const offset = getStrokeOffsetForBBox(elems[0])
minX -= offset
minY -= offset
maxX += offset
maxY += offset
} else {
elems.forEach((elem) => {
const curBb = getBBoxWithTransform(elem, addSVGElementsFromJson, pathActions)
if (curBb) {
const offset = getStrokeOffsetForBBox(elem)
minX = Math.min(minX, curBb.x - offset)
minY = Math.min(minY, curBb.y - offset)
// TODO: The old code had this test for max, but not min. I suspect this test should be for both min and max
if (elem.nodeType === 1) {
maxX = Math.max(maxX, curBb.x + curBb.width + offset)
maxY = Math.max(maxY, curBb.y + curBb.height + offset)
}
}
})
}
fullBb.x = minX
fullBb.y = minY
fullBb.width = maxX - minX
fullBb.height = maxY - minY
return fullBb
}
/**
* Get all elements that have a BBox (excludes `<defs>`, `<title>`, etc).
* Note that 0-opacity, off-screen etc elements are still considered "visible"
* for this function.
* @function module:utilities.getVisibleElements
* @param {Element} parentElement - The parent DOM element to search within
* @returns {Element[]} All "visible" elements.
*/
export const getVisibleElements = (parentElement) => {
if (!parentElement) {
const svgContent = svgCanvas.getSvgContent()
parentElement = svgContent.children[0] // Prevent layers from being included
}
const contentElems = []
const children = parentElement.children
// eslint-disable-next-line array-callback-return
Array.from(children, (elem) => {
if (elem.getBBox) {
contentElems.push(elem)
}
})
return contentElems.reverse()
}
/**
* Get the bounding box for one or more stroked and/or transformed elements.
* @function module:utilities.getStrokedBBoxDefaultVisible
* @param {Element[]} elems - Array with DOM elements to check
* @returns {module:utilities.BBoxObject} A single bounding box object
*/
export const getStrokedBBoxDefaultVisible = (elems) => {
if (!elems) { elems = getVisibleElements() }
return getStrokedBBox(
elems,
svgCanvas.addSVGElementsFromJson,
svgCanvas.pathActions
)
}
/**
* Get the rotation angle of the given transform list.
* @function module:utilities.getRotationAngleFromTransformList
* @param {SVGTransformList} tlist - List of transforms
* @param {boolean} toRad - When true returns the value in radians rather than degrees
* @returns {Float} The angle in degrees or radians
*/
export const getRotationAngleFromTransformList = (tlist, toRad) => {
if (!tlist) { return 0 } // <svg> element have no tlist
for (let i = 0; i < tlist.numberOfItems; ++i) {
const xform = tlist.getItem(i)
if (xform.type === 4) {
return toRad ? xform.angle * Math.PI / 180.0 : xform.angle
}
}
return 0.0
}
/**
* Get the rotation angle of the given/selected DOM element.
* @function module:utilities.getRotationAngle
* @param {Element} [elem] - DOM element to get the angle for. Default to first of selected elements.
* @param {boolean} [toRad=false] - When true returns the value in radians rather than degrees
* @returns {Float} The angle in degrees or radians