@rnacanvas/draw.svg 2.2.0 → 2.5.0

package/dist/CoordinateSystem.d.ts

@@ -1,3 +1,7 @@
+type Point = {
+    x: number;
+    y: number;
+};
 /**
  * Represents the coordinate system of a target SVG document.
  */
@@ -30,5 +34,115 @@ export declare class CoordinateSystem {
      * The maximum Y coordinate of the view box of the target SVG document.
      */
     get maxY(): number;
+    /**
+     * The horizontal scaling factor of the target SVG document
+     * (as defined by the width of its view box and its `width` attribute).
+     */
+    get horizontalScaling(): number;
+    /**
+     * The vertical scaling factor of the target SVG document
+     * (as defined by the height of its view box and its `height` attribute).
+     */
+    get verticalScaling(): number;
+    /**
+     * Sets both the horizontal and vertical scalings of the target SVG document
+     * to the provided scaling factor at once.
+     *
+     * Does so by modifying the `width` and `height` attributes of the target SVG document.
+     *
+     * Does not modify the view box of the target SVG document.
+     */
+    setScaling(scaling: number): void;
+    /**
+     * The width of the bounding client rect for the target SVG document.
+     */
+    get clientWidth(): number;
+    /**
+     * The height of the bounding client rect for the target SVG document.
+     */
+    get clientHeight(): number;
+    /**
+     * The horizontal scaling factor going from the coordinate system of the target SVG document
+     * (i.e., as defined by its view box)
+     * to the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`).
+     */
+    get horizontalClientScaling(): number;
+    /**
+     * The vertical scaling factor going from the coordinate system of the target SVG document
+     * (i.e., as defined by its view box)
+     * to the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`).
+     */
+    get verticalClientScaling(): number;
+    /**
+     * The minimum X coordinate of the bounding client rect for the target SVG document.
+     */
+    get minClientX(): number;
+    /**
+     * The minimum Y coordinate of the bounding client rect for the target SVG document.
+     */
+    get minClientY(): number;
+    /**
+     * Converts an X coordinate in the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`)
+     * to the coordinate system of the target SVG document
+     * (i.e., as defined by its view box).
+     */
+    fromClientX(clientX: number): number;
+    /**
+     * Converts a Y coordinate in the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`)
+     * to the coordinate system of the target SVG document
+     * (i.e., as defined by its view box).
+     */
+    fromClientY(clientY: number): number;
+    /**
+     * Converts a pair of X and Y coordinates in the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`)
+     * to the coordinate system of the target SVG document
+     * (i.e., as defined by its view box).
+     *
+     * @returns A tuple of X and Y coordinates.
+     */
+    fromClientCoordinates(clientX: number, clientY: number): [number, number];
+    /**
+     * Converts a point in the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`)
+     * to the coordinate system of the target SVG document
+     * (i.e., as defined by its view box).
+     */
+    fromClientPoint(clientPoint: Point): Point;
+    /**
+     * Converts an X coordinate in the coordinate system of the target SVG document
+     * (i.e., as defined by its view box)
+     * to the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`).
+     */
+    toClientX(x: number): number;
+    /**
+     * Converts a Y coordinate in the coordinate system of the target SVG document
+     * (i.e., as defined by its view box)
+     * to the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`).
+     */
+    toClientY(y: number): number;
+    /**
+     * Converts a pair of X and Y coordinates in the coordinate system of the target SVG document
+     * (i.e., as defined by its view box)
+     * to the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`).
+     *
+     * @returns A tuple of client X and Y coordinates.
+     */
+    toClientCoordinates(x: number, y: number): [number, number];
+    /**
+     * Converts a point in the coordinate system of the target SVG document
+     * (i.e., as defined by its view box)
+     * to the client coordinate system
+     * (i.e., the coordinate system used by methods such as `getBoundingClientRect`).
+     */
+    toClientPoint(point: Point): Point;
 }
+export {};
 //# sourceMappingURL=CoordinateSystem.d.ts.map

package/dist/CoordinateSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoordinateSystem.d.ts","sourceRoot":"","sources":["../src/CoordinateSystem.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAgB;IACf,OAAO,CAAC,YAAY;gBAAZ,YAAY,EAAE,aAAa;IAE/C;;;OAGG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;OAGG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;CACF"}
+{"version":3,"file":"CoordinateSystem.d.ts","sourceRoot":"","sources":["../src/CoordinateSystem.ts"],"names":[],"mappings":"AAAA,KAAK,KAAK,GAAG;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF;;GAEG;AACH,qBAAa,gBAAgB;IACf,OAAO,CAAC,YAAY;gBAAZ,YAAY,EAAE,aAAa;IAE/C;;;OAGG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;OAGG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED;;;OAGG;IACH,IAAI,iBAAiB,IAAI,MAAM,CAI9B;IAED;;;OAGG;IACH,IAAI,eAAe,IAAI,MAAM,CAI5B;IAED;;;;;;;OAOG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKjC;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED;;;;;OAKG;IACH,IAAI,uBAAuB,IAAI,MAAM,CAEpC;IAED;;;;;OAKG;IACH,IAAI,qBAAqB,IAAI,MAAM,CAElC;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED;;;;;OAKG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;IAIpC;;;;;OAKG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM;IAIpC;;;;;;;OAOG;IACH,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAOzE;;;;;OAKG;IACH,eAAe,CAAC,WAAW,EAAE,KAAK,GAAG,KAAK;IAO1C;;;;;OAKG;IACH,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAI5B;;;;;OAKG;IACH,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAI5B;;;;;;;OAOG;IACH,mBAAmB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAO3D;;;;;OAKG;IACH,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;CAMnC"}

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,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[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:()=>p,HorizontalClientScaling:()=>f,Scaling:()=>d,VerticalClientScaling:()=>g,assignUUID:()=>u,bringToFront:()=>s,sendToBack:()=>l});const o={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};let n;const r=new Uint8Array(16);function i(){if(!n&&(n="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!n))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return n(r)}const a=[];for(let t=0;t<256;++t)a.push((t+256).toString(16).slice(1));const c=function(t,e,n){if(o.randomUUID&&!e&&!t)return o.randomUUID();const r=(t=t||{}).random||(t.rng||i)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,e){n=n||0;for(let t=0;t<16;++t)e[n+t]=r[t];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]]}(r)};function u(t){t.id="uuid-"+c()}var p=function(){function t(t){this.targetSVGDoc=t}return Object.defineProperty(t.prototype,"width",{get:function(){return this.targetSVGDoc.viewBox.baseVal.width},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"height",{get:function(){return this.targetSVGDoc.viewBox.baseVal.height},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"minX",{get:function(){return this.targetSVGDoc.viewBox.baseVal.x},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxX",{get:function(){return this.minX+this.width},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"minY",{get:function(){return this.targetSVGDoc.viewBox.baseVal.y},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxY",{get:function(){return this.minY+this.height},enumerable:!1,configurable:!0}),t}(),d=function(){function t(t){this.targetSVGDoc=t}return t.prototype.set=function(t){var e=this.targetSVGDoc.viewBox.baseVal;this.targetSVGDoc.setAttribute("width",t*e.width+"px"),this.targetSVGDoc.setAttribute("height",t*e.height+"px")},t}(),f=function(){function t(t){this.targetSVGDoc=t}return t.prototype.get=function(){var t=this.targetSVGDoc.getBoundingClientRect(),e=this.targetSVGDoc.viewBox.baseVal;return t.width/e.width},t}(),g=function(){function t(t){this.targetSVGDoc=t}return t.prototype.get=function(){var t=this.targetSVGDoc.getBoundingClientRect(),e=this.targetSVGDoc.viewBox.baseVal;return t.height/e.height},t}();function s(t){var e=t.parentNode;e&&e.appendChild(t)}function l(t){var 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,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},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:()=>l,HorizontalClientScaling:()=>p,Scaling:()=>g,VerticalClientScaling:()=>h,assignUUID:()=>a,bringToFront:()=>f,sendToBack:()=>s});const n={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};let i;const o=new Uint8Array(16);function r(){if(!i&&(i="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!i))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return i(o)}const c=[];for(let t=0;t<256;++t)c.push((t+256).toString(16).slice(1));const u=function(t,e,i){if(n.randomUUID&&!e&&!t)return n.randomUUID();const o=(t=t||{}).random||(t.rng||r)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,e){i=i||0;for(let t=0;t<16;++t)e[i+t]=o[t];return e}return function(t,e=0){return c[t[e+0]]+c[t[e+1]]+c[t[e+2]]+c[t[e+3]]+"-"+c[t[e+4]]+c[t[e+5]]+"-"+c[t[e+6]]+c[t[e+7]]+"-"+c[t[e+8]]+c[t[e+9]]+"-"+c[t[e+10]]+c[t[e+11]]+c[t[e+12]]+c[t[e+13]]+c[t[e+14]]+c[t[e+15]]}(o)};function a(t){t.id="uuid-"+u()}var l=function(){function t(t){this.targetSVGDoc=t}return Object.defineProperty(t.prototype,"width",{get:function(){return this.targetSVGDoc.viewBox.baseVal.width},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"height",{get:function(){return this.targetSVGDoc.viewBox.baseVal.height},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"minX",{get:function(){return this.targetSVGDoc.viewBox.baseVal.x},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxX",{get:function(){return this.minX+this.width},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"minY",{get:function(){return this.targetSVGDoc.viewBox.baseVal.y},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"maxY",{get:function(){return this.minY+this.height},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"horizontalScaling",{get:function(){return this.targetSVGDoc.width.baseVal.value/this.width},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"verticalScaling",{get:function(){return this.targetSVGDoc.height.baseVal.value/this.height},enumerable:!1,configurable:!0}),t.prototype.setScaling=function(t){this.targetSVGDoc.setAttribute("width","".concat(t*this.width)),this.targetSVGDoc.setAttribute("height","".concat(t*this.height))},Object.defineProperty(t.prototype,"clientWidth",{get:function(){return this.targetSVGDoc.getBoundingClientRect().width},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"clientHeight",{get:function(){return this.targetSVGDoc.getBoundingClientRect().height},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"horizontalClientScaling",{get:function(){return this.clientWidth/this.width},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"verticalClientScaling",{get:function(){return this.clientHeight/this.height},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"minClientX",{get:function(){return this.targetSVGDoc.getBoundingClientRect().x},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"minClientY",{get:function(){return this.targetSVGDoc.getBoundingClientRect().y},enumerable:!1,configurable:!0}),t.prototype.fromClientX=function(t){return(t-this.minClientX)/this.horizontalClientScaling},t.prototype.fromClientY=function(t){return(t-this.minClientY)/this.verticalClientScaling},t.prototype.fromClientCoordinates=function(t,e){return[this.fromClientX(t),this.fromClientY(e)]},t.prototype.fromClientPoint=function(t){return{x:this.fromClientX(t.x),y:this.fromClientY(t.y)}},t.prototype.toClientX=function(t){return this.horizontalClientScaling*(t-this.minX)},t.prototype.toClientY=function(t){return this.verticalClientScaling*(t-this.minY)},t.prototype.toClientCoordinates=function(t,e){return[this.toClientX(t),this.toClientY(e)]},t.prototype.toClientPoint=function(t){return{x:this.toClientX(t.x),y:this.toClientY(t.y)}},t}(),g=function(){function t(t){this.targetSVGDoc=t}return t.prototype.set=function(t){var e=this.targetSVGDoc.viewBox.baseVal;this.targetSVGDoc.setAttribute("width",t*e.width+"px"),this.targetSVGDoc.setAttribute("height",t*e.height+"px")},t}(),p=function(){function t(t){this.targetSVGDoc=t}return t.prototype.get=function(){var t=this.targetSVGDoc.getBoundingClientRect(),e=this.targetSVGDoc.viewBox.baseVal;return t.width/e.width},t}(),h=function(){function t(t){this.targetSVGDoc=t}return t.prototype.get=function(){var t=this.targetSVGDoc.getBoundingClientRect(),e=this.targetSVGDoc.viewBox.baseVal;return t.height/e.height},t}();function f(t){var e=t.parentNode;e&&e.appendChild(t)}function s(t){var e=t.parentNode;e&&e.prepend(t)}return e})()));

package/package.json

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