@rnacanvas/draw.svg 3.2.0 → 3.4.0

package/README.md

@@ -106,3 +106,32 @@ innerXML.toString(); // "<circle></circle><text>A</text>"
 // sets the `innerHTML` property of the target SVG element
 innerXML.set('<rect></rect><text>B</text>');
 ```
+
+## `OuterXML`
+
+The `OuterXML` class represents the outer XML of a target SVG element.
+
+The critical difference between the behavior of this class
+and the `outerHTML` property of SVG elements
+is that the `set()` method of this class modifies the target SVG element <b>in place</b>,
+as opposed to replacing the target SVG element with newly created SVG element(s) in the DOM tree,
+which is what setting the `outerHTML` property does.
+
+Thus, the `set()` method will throw if the specified outer XML does not encode exactly one SVG element
+or if the specified outer XML encodes an SVG element with a tag name different from that of the target SVG element.
+
+```javascript
+var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+svg.setAttribute('viewBox', '0 0 10 20');
+
+svg.append(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
+svg.append(document.createElementNS('http://www.w3.org/2000/svg', 'rect'));
+svg.append('Some text.');
+
+var outerXML = new OuterXML(svg);
+
+outerXML.toString(); // '<svg viewBox="0 0 10 20"><circle></circle><rect></rect>Some text.</svg>'
+
+outerXML.set('<svg viewBox="0 0 25 25" width="50" height="50>Different text.<path></path></svg>');
+```

package/dist/InnerXML.d.ts

@@ -1,15 +1,15 @@
 /**
- * Represents the inner XML of a target SVG document.
+ * Represents the inner XML of a target SVG element.
  */
 export declare class InnerXML {
     #private;
-    constructor(targetSVGDoc: SVGSVGElement);
+    constructor(targetSVGElement: SVGElement);
     /**
-     * Returns the `innerHTML` property of the target SVG document.
+     * Returns the `innerHTML` property of the target SVG element.
      */
     toString(): string;
     /**
-     * Sets the `innerHTML` property of the target SVG document.
+     * Sets the `innerHTML` property of the target SVG element.
      */
     set(innerXML: string): void;
 }

package/dist/InnerXML.d.ts.map

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

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { setAttributes } from './setAttributes';
+export { setAttributes };
 import { assignUUID } from './assignUUID';
 export { assignUUID };
 import { CoordinateSystem } from './CoordinateSystem';

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,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 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})()));
+!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={};function i(t,e){for(let[i,r]of Object.entries(e))t.setAttribute(i,r)}t.r(e),t.d(e,{CoordinateSystem:()=>u,HorizontalClientScaling:()=>d,InnerXML:()=>y,OuterXML:()=>b,Scaling:()=>g,VerticalClientScaling:()=>f,assignUUID:()=>c,bringToFront:()=>m,sendToBack:()=>w,setAttributes:()=>i});const r={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};var n,o=new Uint8Array(16);function a(){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(o)}for(var s=[],h=0;h<256;++h)s.push((h+256).toString(16).slice(1));const l=function(t,e,i){if(r.randomUUID&&!e&&!t)return r.randomUUID();var n=(t=t||{}).random||(t.rng||a)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,e){i=i||0;for(var o=0;o<16;++o)e[i+o]=n[o];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()}(n)};function c(t){t.id="uuid-"+l()}class u{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 g{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 d{constructor(t){this.targetSVGDoc=t}get(){let t=this.targetSVGDoc.getBoundingClientRect(),e=this.targetSVGDoc.viewBox.baseVal;return t.width/e.width}}class f{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 w(t){let e=t.parentNode;e&&e.prepend(t)}var p,C=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 y{constructor(t){p.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,p,t,"f")}toString(){return C(this,p,"f").innerHTML}set(t){C(this,p,"f").innerHTML=t}}p=new WeakMap;var S,v=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 b{constructor(t){S.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,S,t,"f")}toString(){return v(this,S,"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()!=v(this,S,"f").tagName.toLowerCase())throw new Error("Outer XML must specify an SVG element with the same tag name as the target SVG element.");[...v(this,S,"f").attributes].forEach((t=>v(this,S,"f").removeAttribute(t.name))),[...e.firstElementChild.attributes].forEach((t=>v(this,S,"f").setAttribute(t.name,t.value))),v(this,S,"f").innerHTML=e.firstElementChild.innerHTML,e.remove()}}return S=new WeakMap,e})()));

package/dist/setAttributes.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Set multiple attributes of a target SVG element at once.
+ */
+export declare function setAttributes(targetSVGElement: SVGElement, attributes: {
+    [name: string]: string;
+}): void;
+//# sourceMappingURL=setAttributes.d.ts.map

package/dist/setAttributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setAttributes.d.ts","sourceRoot":"","sources":["../src/setAttributes.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,aAAa,CAAC,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,IAAI,CAIxG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rnacanvas/draw.svg",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "SVG drawing utilities",
   "repository": {
     "type": "git",
@@ -27,6 +27,7 @@
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
+    "@rnacanvas/value-check": "^1.14.1",
     "@svgdotjs/svg.js": "^3.2.0",
     "uuid": "^10.0.0"
   }