@rnacanvas/draw.floating 2.1.0 → 3.0.0

package/README.md

@@ -0,0 +1,200 @@
+# Installation
+
+With `npm`:
+
+```
+npm install @rnacanvas/draw.floating
+```
+
+# Usage
+
+All exports of this package can be accessed as named imports.
+
+```javascript
+// an example import
+import { Circle } from '@rnacanvas/draw.floating';
+```
+
+## `class Circle`
+
+A circle element.
+
+```javascript
+var circle = Circle.create();
+
+// set radius
+circle.domNode.setAttribute('r', '6');
+
+// set line color and width
+circle.domNode.setAttribute('stroke', 'black');
+circle.domNode.setAttribute('stroke-width', '1');
+
+// set center coordinates
+circle.centerX = 50;
+circle.centerY = 10;
+```
+
+### `static create()`
+
+Creates a circle element from scratch.
+
+Circle elements will be created with a UUID
+and some default values (e.g., radius, line color and width, fill color).
+
+```javascript
+var circle = Circle.create();
+
+circle.id.length >= 36; // has a UUID
+```
+
+### `constructor()`
+
+Creates a circle element wrapping an SVG circle element.
+
+The input SVG circle element is not modified at all during construction of a circle element.
+
+```javascript
+var domNode = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+
+var circle = new Circle(domNode);
+
+circle.domNode === domNode; // true
+```
+
+This constructor is more meant for internal use
+(e.g., when recrating saved circle elements).
+
+### `readonly domNode`
+
+The underlying SVG circle element corresponding to the circle element.
+
+```javascript
+var circle = Circle.create();
+
+circle.domNode instanceof SVGCircleElement; // true
+```
+
+### `readonly id`
+
+The ID of the circle element
+(as defined by the `id` attribute of its underlying DOM node).
+
+```javascript
+var circle = Circle.create();
+
+// the `create()` static method automatically assigns a UUID
+circle.id.length >= 36; // true
+
+circle.domNode.getAttribute('id').length >= 36; // true
+```
+
+<b>All drawing elements must have a unique ID for RNAcanvas drawings to be savable
+and for undo / redo functionality to work.</b>
+
+### `centerX`
+
+Center X coordinate.
+
+Corresponds to the `cx` attribute of the underlying DOM node.
+
+```javascript
+var circle = Circle.create();
+
+circle.centerX = 23;
+
+circle.domNode.getAttribute('cx'); // "23"
+
+circle.domNode.setAttribute('cx', '12');
+
+circle.centerX; // 12
+```
+
+
+### `centerY`
+
+Center Y coordinate.
+
+Corresponds to the `cy` attribute of the underlying DOM node.
+
+```javascript
+var circle = Circle.create();
+
+circle.centerY = -12;
+
+circle.domNode.getAttribute('cy'); // "-12"
+
+circle.domNode.setAttribute('cy', '22');
+
+circle.centerY; // 22
+```
+
+### `drag()`
+
+Moves the circle element by the specified X and Y amounts.
+
+```javascript
+var circle = Circle.create();
+
+circle.centerX = 10;
+circle.centerY = 20;
+
+circle.drag(100, 200);
+
+circle.centerX; // 110
+circle.centerY; // 220
+```
+
+### `direction`
+
+Circle elements don't actually have a direction associated with them.
+
+This property is included primarily for compatibilty with other interfaces within RNAcanvas
+(e.g., those involving strung elements).
+
+This property will always have a value of 0.
+
+```javascript
+var circle = Circle.create();
+
+circle.direction; // 0
+
+circle.direction = 1;
+
+// still zero
+circle.direction; // 0
+```
+
+### `serialized()`
+
+Returns the serialized form of the circle element,
+which is a JSON-serializable object.
+
+```javascript
+var circle = Circle.create();
+
+var savedCircle = circle.serialized();
+```
+
+### `static recreate()`
+
+Recreates a saved circle element given its JSON-serializable form
+and the parent drawing that its DOM node is in.
+
+```javascript
+var circle1 = Circle.create();
+
+// an RNAcanvas drawing
+parentDrawing;
+
+// add the circle element to the drawing
+parentDrawing.domNode.append(circle1.domNode);
+
+var savedCircle = circle1.serialized();
+
+// recreate
+var circle2 = Circle.create(savedCircle, parentDrawing);
+
+circle2.domNode === circle1.domNode; // true
+
+circle2 === circle1 // false
+```

package/dist/Circle.d.ts

@@ -18,11 +18,6 @@ export declare class Circle {
     get centerY(): number;
     set centerY(centerY: number);
     drag(x: number, y: number): void;
-    /**
-     * Circles don't have a direction (always evaluates to zero).
-     */
-    get direction(): number;
-    set direction(direction: number);
     serialized(): {
         id: string;
     };

package/dist/Circle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../src/Circle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAMzC,qBAAa,MAAM;IAuBL,QAAQ,CAAC,OAAO,EAAE,gBAAgB;IAtB9C;;OAEG;IACH,MAAM,CAAC,MAAM;gBAmBQ,OAAO,EAAE,gBAAgB;IAE9C,IAAI,EAAE,IAAI,MAAM,CAEf;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,OAAO,EAJJ,MAII,EAElB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,OAAO,EAJJ,MAII,EAElB;IAED,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAKhC;;OAEG;IACH,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,SAAS,CAAC,SAAS,EAJN,MAIM,EAEtB;IAED,UAAU;;;IAUV;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK;CAqB9E"}
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../src/Circle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAMzC,qBAAa,MAAM;IAuBL,QAAQ,CAAC,OAAO,EAAE,gBAAgB;IAtB9C;;OAEG;IACH,MAAM,CAAC,MAAM;gBAmBQ,OAAO,EAAE,gBAAgB;IAE9C,IAAI,EAAE,IAAI,MAAM,CAEf;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,OAAO,EAJJ,MAII,EAElB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,OAAO,EAJJ,MAII,EAElB;IAED,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU;;;IAUV;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK;CAqB9E"}

package/dist/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["draw.floating"]=t():e["draw.floating"]=t()}(this,()=>(()=>{var e={854(e){e.exports=(()=>{"use strict";var e={d:(t,r)=>{for(var i in r)e.o(r,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:r[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function r(e){return"number"==typeof e}function i(e){return r(e)&&Number.isFinite(e)}function n(e){return r(e)&&!Number.isFinite(e)}function o(e){return i(e)&&e>0}function s(e){return i(e)&&e>=0}function u(e){return"string"==typeof e}function c(e){return null==e}function l(e){return"object"==typeof e&&null!==e}function a(e){return Array.isArray(e)}function d(e){return a(e)&&0==e.length}function f(e){return a(e)&&e.length>0}function y(e){return a(e)&&e.every(r)}function b(e){return y(e)&&e.length>0}function m(e){return a(e)&&e.every(i)}function p(e){return a(e)&&e.every(n)}function N(e){return a(e)&&e.every(u)}function g(e){return N(e)&&e.length>0}return e.r(t),e.d(t,{isArray:()=>a,isEmptyArray:()=>d,isFiniteNumber:()=>i,isFiniteNumbersArray:()=>m,isNonEmptyArray:()=>f,isNonEmptyNumbersArray:()=>b,isNonEmptyStringsArray:()=>g,isNonFiniteNumber:()=>n,isNonFiniteNumbersArray:()=>p,isNonNegativeFiniteNumber:()=>s,isNonNullObject:()=>l,isNullish:()=>c,isNumber:()=>r,isNumbersArray:()=>y,isPositiveFiniteNumber:()=>o,isString:()=>u,isStringsArray:()=>N}),t})()}},t={};function r(i){var n=t[i];if(void 0!==n)return n.exports;var o=t[i]={exports:{}};return e[i].call(o.exports,o,o.exports,r),o.exports}r.d=(e,t)=>{for(var i in t)r.o(t,i)&&!r.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{"use strict";r.r(i),r.d(i,{Circle:()=>t});var e=r(854);class t{static create(){let e=document.createElementNS("http://www.w3.org/2000/svg","circle");return e.id="id-"+self.crypto.randomUUID(),e.setAttribute("r","6"),e.setAttribute("stroke","black"),e.setAttribute("stroke-width","1"),e.setAttribute("stroke-opacity","1"),e.setAttribute("stroke-dasharray",""),e.setAttribute("stroke-linecap",""),e.setAttribute("fill","white"),e.setAttribute("fill-opacity","1"),new t(e)}constructor(e){this.domNode=e}get id(){return this.domNode.id}get centerX(){return this.domNode.cx.baseVal.value}set centerX(e){this.domNode.setAttribute("cx",`${e}`)}get centerY(){return this.domNode.cy.baseVal.value}set centerY(e){this.domNode.setAttribute("cy",`${e}`)}drag(e,t){this.centerX+=e,this.centerY+=t}get direction(){return 0}set direction(e){}serialized(){if(!this.id)throw new Error("Circle ID is falsy.");return{id:this.id}}static recreate(r,i){if(!(0,e.isNonNullObject)(r))throw new Error(`Saved circle must be an object: ${r}.`);if(!r.id)throw new Error("Saved circle ID is falsy.");if(!(0,e.isString)(r.id))throw new Error(`Saved circle ID must be a string: ${r.id}.`);let n=i.domNode.querySelector("#"+r.id);if(!n)throw new Error("Unable to find circle element DOM node by ID.");if(!(n instanceof SVGCircleElement))throw new Error(`Circle element DOM node is not an SVG circle element: ${n}.`);return new t(n)}}})(),i})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["draw.floating"]=t():e["draw.floating"]=t()}(this,()=>(()=>{var e={854(e){e.exports=(()=>{"use strict";var e={d:(t,r)=>{for(var i in r)e.o(r,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:r[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function r(e){return"number"==typeof e}function i(e){return r(e)&&Number.isFinite(e)}function n(e){return r(e)&&!Number.isFinite(e)}function o(e){return i(e)&&e>0}function s(e){return i(e)&&e>=0}function u(e){return"string"==typeof e}function c(e){return null==e}function l(e){return"object"==typeof e&&null!==e}function a(e){return Array.isArray(e)}function d(e){return a(e)&&0==e.length}function f(e){return a(e)&&e.length>0}function y(e){return a(e)&&e.every(r)}function b(e){return y(e)&&e.length>0}function m(e){return a(e)&&e.every(i)}function p(e){return a(e)&&e.every(n)}function N(e){return a(e)&&e.every(u)}function g(e){return N(e)&&e.length>0}return e.r(t),e.d(t,{isArray:()=>a,isEmptyArray:()=>d,isFiniteNumber:()=>i,isFiniteNumbersArray:()=>m,isNonEmptyArray:()=>f,isNonEmptyNumbersArray:()=>b,isNonEmptyStringsArray:()=>g,isNonFiniteNumber:()=>n,isNonFiniteNumbersArray:()=>p,isNonNegativeFiniteNumber:()=>s,isNonNullObject:()=>l,isNullish:()=>c,isNumber:()=>r,isNumbersArray:()=>y,isPositiveFiniteNumber:()=>o,isString:()=>u,isStringsArray:()=>N}),t})()}},t={};function r(i){var n=t[i];if(void 0!==n)return n.exports;var o=t[i]={exports:{}};return e[i].call(o.exports,o,o.exports,r),o.exports}r.d=(e,t)=>{for(var i in t)r.o(t,i)&&!r.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{"use strict";r.r(i),r.d(i,{Circle:()=>t});var e=r(854);class t{static create(){let e=document.createElementNS("http://www.w3.org/2000/svg","circle");return e.id="id-"+self.crypto.randomUUID(),e.setAttribute("r","6"),e.setAttribute("stroke","black"),e.setAttribute("stroke-width","1"),e.setAttribute("stroke-opacity","1"),e.setAttribute("stroke-dasharray",""),e.setAttribute("stroke-linecap",""),e.setAttribute("fill","white"),e.setAttribute("fill-opacity","1"),new t(e)}constructor(e){this.domNode=e}get id(){return this.domNode.id}get centerX(){return this.domNode.cx.baseVal.value}set centerX(e){this.domNode.setAttribute("cx",`${e}`)}get centerY(){return this.domNode.cy.baseVal.value}set centerY(e){this.domNode.setAttribute("cy",`${e}`)}drag(e,t){this.centerX+=e,this.centerY+=t}serialized(){if(!this.id)throw new Error("Circle ID is falsy.");return{id:this.id}}static recreate(r,i){if(!(0,e.isNonNullObject)(r))throw new Error(`Saved circle must be an object: ${r}.`);if(!r.id)throw new Error("Saved circle ID is falsy.");if(!(0,e.isString)(r.id))throw new Error(`Saved circle ID must be a string: ${r.id}.`);let n=i.domNode.querySelector("#"+r.id);if(!n)throw new Error("Unable to find circle element DOM node by ID.");if(!(n instanceof SVGCircleElement))throw new Error(`Circle element DOM node is not an SVG circle element: ${n}.`);return new t(n)}}})(),i})());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rnacanvas/draw.floating",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Draw floating elements",
   "repository": {
     "type": "git",