@rnacanvas/draw.svg 3.0.0 → 3.2.0

package/README.md

@@ -0,0 +1,108 @@
+# Installation
+
+With `npm`:
+
+```
+npm install @rnacanvas/draw.svg
+```
+
+# Usage
+
+All exports of this package can be accessed as named imports.
+
+```javascript
+// some example imports
+import { assignUUID } from '@rnacanvas/draw.svg';
+import { bringToFront, sendToBack } from '@rnacanvas/draw.svg';
+```
+
+## `assignUUID()`
+
+Assigns a [universally unique identifier](https://en.wikipedia.org/wiki/Universally_unique_identifier) (UUID)
+to the `id` attribute of the specified SVG element.
+
+Will overwrite any preexisting `id` attribute
+that the SVG element has.
+
+Assigned UUIDs will follow all rules required for HTML/SVG element `id` attributes
+(e.g., will start with a letter).
+
+To ensure that assigned UUIDs always start with a letter,
+this function may prepend some additional characters to assigned UUIDs.
+Thus, assigned UUIDs may be somewhat longer than the standard 36 characters in length.
+
+```javascript
+var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+
+assignUUID(circle);
+
+// a UUID prepended with "uuid-"
+circle.id; // "uuid-33489b65-e606-4d15-af43-558b926ff25a"
+```
+
+## `bringToFront()`
+
+Makes the specified SVG element the last child of its parent node.
+(Has no effect if the specified SVG element is already the last child of its parent node
+or if the specified SVG element has no parent node.)
+
+Note that this function only makes the specified SVG element the last child of its immediate parent node
+(not the root SVG document if the specified SVG element were nested within a `g` element, for instance).
+
+```javascript
+bringToFront(svgElement);
+
+svgElement.parentNode.lastChild === svgElement; // true
+```
+
+## `sendToBack()`
+
+Makes the specified SVG element the first child of its parent node.
+(Has no effect if the specified SVG element is already the first child of its parent node
+or if the specified SVG element has no parent node.)
+
+Note that this function only makes the specified SVG element the first child of its immediate parent node
+(not the root SVG document if the specified SVG element were nested within a `g` element, for instance).
+
+```javascript
+sendToBack(svgElement);
+
+svgElement.parentNode.firstChild === svgElement; // true
+```
+
+## `Scaling`
+
+The `Scaling` class represents the scaling of a target SVG document.
+
+```javascript
+var targetSVGDoc = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+var scaling = new Scaling(targetSVGDoc);
+
+// adjusts the `width` and `height` attributes of the target SVG document
+// to set both its horizontal and vertical scaling factors at once
+scaling.set(2);
+```
+
+## `InnerXML`
+
+The `InnerXML` class represents the inner XML of a target SVG element.
+
+```javascript
+var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+svg.append(circle);
+
+var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+text.textContent = 'A';
+svg.append(text);
+
+var innerXML = new InnerXML(svg);
+
+// returns the value of the `innerHTML` property
+innerXML.toString(); // "<circle></circle><text>A</text>"
+
+// sets the `innerHTML` property of the target SVG element
+innerXML.set('<rect></rect><text>B</text>');
+```

package/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-minimal

package/dist/InnerXML.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Represents the inner XML of a target SVG document.
+ */
+export declare class InnerXML {
+    #private;
+    constructor(targetSVGDoc: SVGSVGElement);
+    /**
+     * Returns the `innerHTML` property of the target SVG document.
+     */
+    toString(): string;
+    /**
+     * Sets the `innerHTML` property of the target SVG document.
+     */
+    set(innerXML: string): void;
+}
+//# sourceMappingURL=InnerXML.d.ts.map

package/dist/InnerXML.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InnerXML.d.ts","sourceRoot":"","sources":["../src/InnerXML.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,QAAQ;;gBAGP,YAAY,EAAE,aAAa;IAIvC;;OAEG;IACH,QAAQ,IAAI,MAAM;IAIlB;;OAEG;IACH,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;CAG5B"}

package/dist/OuterXML.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Represents the outer XML of a target SVG element.
+ */
+export declare class OuterXML {
+    #private;
+    constructor(targetSVGElement: SVGElement);
+    /**
+     * Returns the value of the `outerHTML` property of the target SVG element.
+     */
+    toString(): string;
+    /**
+     * Sets the outer XML of the target SVG element.
+     *
+     * The main difference between this method
+     * and setting the `outerHTML` property of the target SVG element directly
+     * is that this method modifies the target SVG element in place,
+     * as opposed to replacing the target SVG element with a new SVG element in the DOM tree.
+     *
+     * Thus, it is critical that the outer XML passed to this method
+     * encode a single SVG element with the same tag name as the target SVG element.
+     *
+     * This method will throw otherwise.
+     */
+    set(outerXML: string): void | never;
+}
+//# sourceMappingURL=OuterXML.d.ts.map

package/dist/OuterXML.d.ts.map

@@ -0,0 +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

@@ -12,4 +12,8 @@ import { bringToFront } from './bringToFront';
 export { bringToFront };
 import { sendToBack } from './sendToBack';
 export { sendToBack };
+import { InnerXML } from './InnerXML';
+export { InnerXML };
+import { OuterXML } from './OuterXML';
+export { OuterXML };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -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"}
+{"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

@@ -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 n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},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:()=>g,HorizontalClientScaling:()=>u,Scaling:()=>c,VerticalClientScaling:()=>d,assignUUID:()=>l,bringToFront:()=>m,sendToBack:()=>S});const i={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};var n,r=new Uint8Array(16);function o(){if(!n&&!(n="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 n(r)}for(var s=[],a=0;a<256;++a)s.push((a+256).toString(16).slice(1));const h=function(t,e,n){if(i.randomUUID&&!e&&!t)return i.randomUUID();var r=(t=t||{}).random||(t.rng||o)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,e){n=n||0;for(var a=0;a<16;++a)e[n+a]=r[a];return e}return function(t,e=0){return(s[t[e+0]]+s[t[e+1]]+s[t[e+2]]+s[t[e+3]]+"-"+s[t[e+4]]+s[t[e+5]]+"-"+s[t[e+6]]+s[t[e+7]]+"-"+s[t[e+8]]+s[t[e+9]]+"-"+s[t[e+10]]+s[t[e+11]]+s[t[e+12]]+s[t[e+13]]+s[t[e+14]]+s[t[e+15]]).toLowerCase()}(r)};function l(t){t.id="uuid-"+h()}class g{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 c{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 u{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 m(t){let e=t.parentNode;e&&e.appendChild(t)}function S(t){let e=t.parentNode;e&&e.prepend(t)}return e})()));
+!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})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rnacanvas/draw.svg",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "SVG drawing utilities",
   "repository": {
     "type": "git",