@rnacanvas/draw.svg 3.1.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +137 -0
- package/_config.yml +1 -0
- package/dist/InnerXML.d.ts +4 -4
- package/dist/InnerXML.d.ts.map +1 -1
- package/dist/OuterXML.d.ts +26 -0
- package/dist/OuterXML.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# Installation
|
|
2
|
+
|
|
3
|
+
With `npm`:
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
npm install @rnacanvas/draw.svg
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
# Usage
|
|
10
|
+
|
|
11
|
+
All exports of this package can be accessed as named imports.
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
// some example imports
|
|
15
|
+
import { assignUUID } from '@rnacanvas/draw.svg';
|
|
16
|
+
import { bringToFront, sendToBack } from '@rnacanvas/draw.svg';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## `assignUUID()`
|
|
20
|
+
|
|
21
|
+
Assigns a [universally unique identifier](https://en.wikipedia.org/wiki/Universally_unique_identifier) (UUID)
|
|
22
|
+
to the `id` attribute of the specified SVG element.
|
|
23
|
+
|
|
24
|
+
Will overwrite any preexisting `id` attribute
|
|
25
|
+
that the SVG element has.
|
|
26
|
+
|
|
27
|
+
Assigned UUIDs will follow all rules required for HTML/SVG element `id` attributes
|
|
28
|
+
(e.g., will start with a letter).
|
|
29
|
+
|
|
30
|
+
To ensure that assigned UUIDs always start with a letter,
|
|
31
|
+
this function may prepend some additional characters to assigned UUIDs.
|
|
32
|
+
Thus, assigned UUIDs may be somewhat longer than the standard 36 characters in length.
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
36
|
+
|
|
37
|
+
assignUUID(circle);
|
|
38
|
+
|
|
39
|
+
// a UUID prepended with "uuid-"
|
|
40
|
+
circle.id; // "uuid-33489b65-e606-4d15-af43-558b926ff25a"
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## `bringToFront()`
|
|
44
|
+
|
|
45
|
+
Makes the specified SVG element the last child of its parent node.
|
|
46
|
+
(Has no effect if the specified SVG element is already the last child of its parent node
|
|
47
|
+
or if the specified SVG element has no parent node.)
|
|
48
|
+
|
|
49
|
+
Note that this function only makes the specified SVG element the last child of its immediate parent node
|
|
50
|
+
(not the root SVG document if the specified SVG element were nested within a `g` element, for instance).
|
|
51
|
+
|
|
52
|
+
```javascript
|
|
53
|
+
bringToFront(svgElement);
|
|
54
|
+
|
|
55
|
+
svgElement.parentNode.lastChild === svgElement; // true
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## `sendToBack()`
|
|
59
|
+
|
|
60
|
+
Makes the specified SVG element the first child of its parent node.
|
|
61
|
+
(Has no effect if the specified SVG element is already the first child of its parent node
|
|
62
|
+
or if the specified SVG element has no parent node.)
|
|
63
|
+
|
|
64
|
+
Note that this function only makes the specified SVG element the first child of its immediate parent node
|
|
65
|
+
(not the root SVG document if the specified SVG element were nested within a `g` element, for instance).
|
|
66
|
+
|
|
67
|
+
```javascript
|
|
68
|
+
sendToBack(svgElement);
|
|
69
|
+
|
|
70
|
+
svgElement.parentNode.firstChild === svgElement; // true
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## `Scaling`
|
|
74
|
+
|
|
75
|
+
The `Scaling` class represents the scaling of a target SVG document.
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
var targetSVGDoc = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
79
|
+
|
|
80
|
+
var scaling = new Scaling(targetSVGDoc);
|
|
81
|
+
|
|
82
|
+
// adjusts the `width` and `height` attributes of the target SVG document
|
|
83
|
+
// to set both its horizontal and vertical scaling factors at once
|
|
84
|
+
scaling.set(2);
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## `InnerXML`
|
|
88
|
+
|
|
89
|
+
The `InnerXML` class represents the inner XML of a target SVG element.
|
|
90
|
+
|
|
91
|
+
```javascript
|
|
92
|
+
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
93
|
+
|
|
94
|
+
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
95
|
+
svg.append(circle);
|
|
96
|
+
|
|
97
|
+
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
98
|
+
text.textContent = 'A';
|
|
99
|
+
svg.append(text);
|
|
100
|
+
|
|
101
|
+
var innerXML = new InnerXML(svg);
|
|
102
|
+
|
|
103
|
+
// returns the value of the `innerHTML` property
|
|
104
|
+
innerXML.toString(); // "<circle></circle><text>A</text>"
|
|
105
|
+
|
|
106
|
+
// sets the `innerHTML` property of the target SVG element
|
|
107
|
+
innerXML.set('<rect></rect><text>B</text>');
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## `OuterXML`
|
|
111
|
+
|
|
112
|
+
The `OuterXML` class represents the outer XML of a target SVG element.
|
|
113
|
+
|
|
114
|
+
The critical difference between the behavior of this class
|
|
115
|
+
and the `outerHTML` property of SVG elements
|
|
116
|
+
is that the `set()` method of this class modifies the target SVG element <b>in place</b>,
|
|
117
|
+
as opposed to replacing the target SVG element with newly created SVG element(s) in the DOM tree,
|
|
118
|
+
which is what setting the `outerHTML` property does.
|
|
119
|
+
|
|
120
|
+
Thus, the `set()` method will throw if the specified outer XML does not encode exactly one SVG element
|
|
121
|
+
or if the specified outer XML encodes an SVG element with a tag name different from that of the target SVG element.
|
|
122
|
+
|
|
123
|
+
```javascript
|
|
124
|
+
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
125
|
+
|
|
126
|
+
svg.setAttribute('viewBox', '0 0 10 20');
|
|
127
|
+
|
|
128
|
+
svg.append(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
|
|
129
|
+
svg.append(document.createElementNS('http://www.w3.org/2000/svg', 'rect'));
|
|
130
|
+
svg.append('Some text.');
|
|
131
|
+
|
|
132
|
+
var outerXML = new OuterXML(svg);
|
|
133
|
+
|
|
134
|
+
outerXML.toString(); // '<svg viewBox="0 0 10 20"><circle></circle><rect></rect>Some text.</svg>'
|
|
135
|
+
|
|
136
|
+
outerXML.set('<svg viewBox="0 0 25 25" width="50" height="50>Different text.<path></path></svg>');
|
|
137
|
+
```
|
package/_config.yml
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
theme: jekyll-theme-minimal
|
package/dist/InnerXML.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Represents the inner XML of a target SVG
|
|
2
|
+
* Represents the inner XML of a target SVG element.
|
|
3
3
|
*/
|
|
4
4
|
export declare class InnerXML {
|
|
5
5
|
#private;
|
|
6
|
-
constructor(
|
|
6
|
+
constructor(targetSVGElement: SVGElement);
|
|
7
7
|
/**
|
|
8
|
-
* Returns the `innerHTML` property of the target SVG
|
|
8
|
+
* Returns the `innerHTML` property of the target SVG element.
|
|
9
9
|
*/
|
|
10
10
|
toString(): string;
|
|
11
11
|
/**
|
|
12
|
-
* Sets the `innerHTML` property of the target SVG
|
|
12
|
+
* Sets the `innerHTML` property of the target SVG element.
|
|
13
13
|
*/
|
|
14
14
|
set(innerXML: string): void;
|
|
15
15
|
}
|
package/dist/InnerXML.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InnerXML.d.ts","sourceRoot":"","sources":["../src/InnerXML.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,QAAQ;;gBAGP,
|
|
1
|
+
{"version":3,"file":"InnerXML.d.ts","sourceRoot":"","sources":["../src/InnerXML.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,QAAQ;;gBAGP,gBAAgB,EAAE,UAAU;IAIxC;;OAEG;IACH,QAAQ,IAAI,MAAM;IAIlB;;OAEG;IACH,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;CAG5B"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Represents the outer XML of a target SVG element.
|
|
3
|
+
*/
|
|
4
|
+
export declare class OuterXML {
|
|
5
|
+
#private;
|
|
6
|
+
constructor(targetSVGElement: SVGElement);
|
|
7
|
+
/**
|
|
8
|
+
* Returns the value of the `outerHTML` property of the target SVG element.
|
|
9
|
+
*/
|
|
10
|
+
toString(): string;
|
|
11
|
+
/**
|
|
12
|
+
* Sets the outer XML of the target SVG element.
|
|
13
|
+
*
|
|
14
|
+
* The main difference between this method
|
|
15
|
+
* and setting the `outerHTML` property of the target SVG element directly
|
|
16
|
+
* is that this method modifies the target SVG element in place,
|
|
17
|
+
* as opposed to replacing the target SVG element with a new SVG element in the DOM tree.
|
|
18
|
+
*
|
|
19
|
+
* Thus, it is critical that the outer XML passed to this method
|
|
20
|
+
* encode a single SVG element with the same tag name as the target SVG element.
|
|
21
|
+
*
|
|
22
|
+
* This method will throw otherwise.
|
|
23
|
+
*/
|
|
24
|
+
set(outerXML: string): void | never;
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=OuterXML.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OuterXML.d.ts","sourceRoot":"","sources":["../src/OuterXML.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,QAAQ;;gBAGP,gBAAgB,EAAE,UAAU;IAIxC;;OAEG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;;;;;;;;;;OAYG;IACH,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK;CAkCpC"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,CAAC;AAEnB,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,CAAC;AAEnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,CAAC;AAEnB,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,CAAC;AAEnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["draw.svg"]=e():t["draw.svg"]=e()}(this,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var r in i)t.o(i,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:i[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{CoordinateSystem:()=>
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["draw.svg"]=e():t["draw.svg"]=e()}(this,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var r in i)t.o(i,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:i[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{CoordinateSystem:()=>c,HorizontalClientScaling:()=>g,InnerXML:()=>C,OuterXML:()=>v,Scaling:()=>u,VerticalClientScaling:()=>d,assignUUID:()=>l,bringToFront:()=>f,sendToBack:()=>m});const i={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};var r,n=new Uint8Array(16);function o(){if(!r&&!(r="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return r(n)}for(var a=[],s=0;s<256;++s)a.push((s+256).toString(16).slice(1));const h=function(t,e,r){if(i.randomUUID&&!e&&!t)return i.randomUUID();var n=(t=t||{}).random||(t.rng||o)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,e){r=r||0;for(var s=0;s<16;++s)e[r+s]=n[s];return e}return function(t,e=0){return(a[t[e+0]]+a[t[e+1]]+a[t[e+2]]+a[t[e+3]]+"-"+a[t[e+4]]+a[t[e+5]]+"-"+a[t[e+6]]+a[t[e+7]]+"-"+a[t[e+8]]+a[t[e+9]]+"-"+a[t[e+10]]+a[t[e+11]]+a[t[e+12]]+a[t[e+13]]+a[t[e+14]]+a[t[e+15]]).toLowerCase()}(n)};function l(t){t.id="uuid-"+h()}class c{constructor(t){this.targetSVGDoc=t}get width(){return this.targetSVGDoc.viewBox.baseVal.width}get height(){return this.targetSVGDoc.viewBox.baseVal.height}get minX(){return this.targetSVGDoc.viewBox.baseVal.x}get maxX(){return this.minX+this.width}get minY(){return this.targetSVGDoc.viewBox.baseVal.y}get maxY(){return this.minY+this.height}get horizontalScaling(){return this.targetSVGDoc.width.baseVal.value/this.width}get verticalScaling(){return this.targetSVGDoc.height.baseVal.value/this.height}setScaling(t){this.targetSVGDoc.setAttribute("width",""+t*this.width),this.targetSVGDoc.setAttribute("height",""+t*this.height)}get clientWidth(){return this.targetSVGDoc.getBoundingClientRect().width}get clientHeight(){return this.targetSVGDoc.getBoundingClientRect().height}get horizontalClientScaling(){return this.clientWidth/this.width}get verticalClientScaling(){return this.clientHeight/this.height}get minClientX(){return this.targetSVGDoc.getBoundingClientRect().x}get minClientY(){return this.targetSVGDoc.getBoundingClientRect().y}fromClientX(t){return this.minX+(t-this.minClientX)/this.horizontalClientScaling}fromClientY(t){return this.minY+(t-this.minClientY)/this.verticalClientScaling}fromClientCoordinates(t,e){return[this.fromClientX(t),this.fromClientY(e)]}fromClientPoint(t){return{x:this.fromClientX(t.x),y:this.fromClientY(t.y)}}toClientX(t){return this.minClientX+this.horizontalClientScaling*(t-this.minX)}toClientY(t){return this.minClientY+this.verticalClientScaling*(t-this.minY)}toClientCoordinates(t,e){return[this.toClientX(t),this.toClientY(e)]}toClientPoint(t){return{x:this.toClientX(t.x),y:this.toClientY(t.y)}}}class u{constructor(t){this.targetSVGDoc=t}set(t){let e=this.targetSVGDoc.viewBox.baseVal;this.targetSVGDoc.setAttribute("width",t*e.width+"px"),this.targetSVGDoc.setAttribute("height",t*e.height+"px")}}class g{constructor(t){this.targetSVGDoc=t}get(){let t=this.targetSVGDoc.getBoundingClientRect(),e=this.targetSVGDoc.viewBox.baseVal;return t.width/e.width}}class d{constructor(t){this.targetSVGDoc=t}get(){let t=this.targetSVGDoc.getBoundingClientRect(),e=this.targetSVGDoc.viewBox.baseVal;return t.height/e.height}}function f(t){let e=t.parentNode;e&&e.appendChild(t)}function m(t){let e=t.parentNode;e&&e.prepend(t)}var w,p=function(t,e,i,r){if("a"===i&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?r:"a"===i?r.call(t):r?r.value:e.get(t)};class C{constructor(t){w.set(this,void 0),function(t,e,i,r,n){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===r?n.call(t,i):n?n.value=i:e.set(t,i)}(this,w,t,"f")}toString(){return p(this,w,"f").innerHTML}set(t){p(this,w,"f").innerHTML=t}}w=new WeakMap;var y,S=function(t,e,i,r){if("a"===i&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?r:"a"===i?r.call(t):r?r.value:e.get(t)};class v{constructor(t){y.set(this,void 0),function(t,e,i,r,n){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===r?n.call(t,i):n?n.value=i:e.set(t,i)}(this,y,t,"f")}toString(){return S(this,y,"f").outerHTML}set(t){let e=document.createElementNS("http://www.w3.org/2000/svg","svg");if(e.style.height="0px",document.body.append(e),e.innerHTML=t,!e.firstElementChild)throw new Error("Outer XML must encode an SVG element.");if(e.childNodes.length>1)throw new Error("Outer XML cannot encode multiple DOM nodes.");if(e.firstElementChild.tagName.toLowerCase()!=S(this,y,"f").tagName.toLowerCase())throw new Error("Outer XML must specify an SVG element with the same tag name as the target SVG element.");[...S(this,y,"f").attributes].forEach((t=>S(this,y,"f").removeAttribute(t.name))),[...e.firstElementChild.attributes].forEach((t=>S(this,y,"f").setAttribute(t.name,t.value))),S(this,y,"f").innerHTML=e.firstElementChild.innerHTML,e.remove()}}return y=new WeakMap,e})()));
|