@rnacanvas/draw.floating 2.0.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

@@ -0,0 +1,29 @@
+import type { Drawing } from './Drawing';
+export declare class Circle {
+    readonly domNode: SVGCircleElement;
+    /**
+     * Creates a circle element with a UUID and other default values.
+     */
+    static create(): Circle;
+    constructor(domNode: SVGCircleElement);
+    get id(): string;
+    /**
+     * Center X coordinate.
+     */
+    get centerX(): number;
+    set centerX(centerX: number);
+    /**
+     * Center Y coordinate.
+     */
+    get centerY(): number;
+    set centerY(centerY: number);
+    drag(x: number, y: number): void;
+    serialized(): {
+        id: string;
+    };
+    /**
+     * Recreates a saved circle given the parent drawing that its DOM node is in.
+     */
+    static recreate(savedCircle: unknown, parentDrawing: Drawing): Circle | never;
+}
+//# sourceMappingURL=Circle.d.ts.map

package/dist/Circle.d.ts.map

@@ -0,0 +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,UAAU;;;IAUV;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK;CAqB9E"}

package/dist/Drawing.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The drawing interface used by floating elements.
+ */
+export interface Drawing {
+    readonly domNode: SVGSVGElement;
+}
+//# sourceMappingURL=Drawing.d.ts.map

package/dist/Drawing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawing.d.ts","sourceRoot":"","sources":["../src/Drawing.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC;CACjC"}

package/dist/index.d.ts

@@ -1 +1,3 @@
+import { Circle } from './Circle';
+export { Circle };
 //# 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":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,CAAC"}

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,()=>(()=>{"use strict";return{}})());
+!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.0.0",
+  "version": "3.0.0",
   "description": "Draw floating elements",
   "repository": {
     "type": "git",
@@ -29,6 +29,7 @@
     "webpack-cli": "^7.0.0"
   },
   "dependencies": {
+    "@rnacanvas/value-check": "^1.14.1",
     "jquery": "^4.0.0"
   }
 }