@rnacanvas/draw.floating 2.1.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +200 -0
- package/dist/Circle.d.ts +0 -5
- package/dist/Circle.d.ts.map +1 -1
- package/dist/Text.d.ts +25 -0
- package/dist/Text.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +3 -1
package/README.md
ADDED
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
# Installation
|
|
2
|
+
|
|
3
|
+
With `npm`:
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
npm install @rnacanvas/draw.floating
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
# Usage
|
|
10
|
+
|
|
11
|
+
All exports of this package can be accessed as named imports.
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
// an example import
|
|
15
|
+
import { Circle } from '@rnacanvas/draw.floating';
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## `class Circle`
|
|
19
|
+
|
|
20
|
+
A circle element.
|
|
21
|
+
|
|
22
|
+
```javascript
|
|
23
|
+
var circle = Circle.create();
|
|
24
|
+
|
|
25
|
+
// set radius
|
|
26
|
+
circle.domNode.setAttribute('r', '6');
|
|
27
|
+
|
|
28
|
+
// set line color and width
|
|
29
|
+
circle.domNode.setAttribute('stroke', 'black');
|
|
30
|
+
circle.domNode.setAttribute('stroke-width', '1');
|
|
31
|
+
|
|
32
|
+
// set center coordinates
|
|
33
|
+
circle.centerX = 50;
|
|
34
|
+
circle.centerY = 10;
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### `static create()`
|
|
38
|
+
|
|
39
|
+
Creates a circle element from scratch.
|
|
40
|
+
|
|
41
|
+
Circle elements will be created with a UUID
|
|
42
|
+
and some default values (e.g., radius, line color and width, fill color).
|
|
43
|
+
|
|
44
|
+
```javascript
|
|
45
|
+
var circle = Circle.create();
|
|
46
|
+
|
|
47
|
+
circle.id.length >= 36; // has a UUID
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### `constructor()`
|
|
51
|
+
|
|
52
|
+
Creates a circle element wrapping an SVG circle element.
|
|
53
|
+
|
|
54
|
+
The input SVG circle element is not modified at all during construction of a circle element.
|
|
55
|
+
|
|
56
|
+
```javascript
|
|
57
|
+
var domNode = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
|
58
|
+
|
|
59
|
+
var circle = new Circle(domNode);
|
|
60
|
+
|
|
61
|
+
circle.domNode === domNode; // true
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
This constructor is more meant for internal use
|
|
65
|
+
(e.g., when recrating saved circle elements).
|
|
66
|
+
|
|
67
|
+
### `readonly domNode`
|
|
68
|
+
|
|
69
|
+
The underlying SVG circle element corresponding to the circle element.
|
|
70
|
+
|
|
71
|
+
```javascript
|
|
72
|
+
var circle = Circle.create();
|
|
73
|
+
|
|
74
|
+
circle.domNode instanceof SVGCircleElement; // true
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### `readonly id`
|
|
78
|
+
|
|
79
|
+
The ID of the circle element
|
|
80
|
+
(as defined by the `id` attribute of its underlying DOM node).
|
|
81
|
+
|
|
82
|
+
```javascript
|
|
83
|
+
var circle = Circle.create();
|
|
84
|
+
|
|
85
|
+
// the `create()` static method automatically assigns a UUID
|
|
86
|
+
circle.id.length >= 36; // true
|
|
87
|
+
|
|
88
|
+
circle.domNode.getAttribute('id').length >= 36; // true
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
<b>All drawing elements must have a unique ID for RNAcanvas drawings to be savable
|
|
92
|
+
and for undo / redo functionality to work.</b>
|
|
93
|
+
|
|
94
|
+
### `centerX`
|
|
95
|
+
|
|
96
|
+
Center X coordinate.
|
|
97
|
+
|
|
98
|
+
Corresponds to the `cx` attribute of the underlying DOM node.
|
|
99
|
+
|
|
100
|
+
```javascript
|
|
101
|
+
var circle = Circle.create();
|
|
102
|
+
|
|
103
|
+
circle.centerX = 23;
|
|
104
|
+
|
|
105
|
+
circle.domNode.getAttribute('cx'); // "23"
|
|
106
|
+
|
|
107
|
+
circle.domNode.setAttribute('cx', '12');
|
|
108
|
+
|
|
109
|
+
circle.centerX; // 12
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
### `centerY`
|
|
114
|
+
|
|
115
|
+
Center Y coordinate.
|
|
116
|
+
|
|
117
|
+
Corresponds to the `cy` attribute of the underlying DOM node.
|
|
118
|
+
|
|
119
|
+
```javascript
|
|
120
|
+
var circle = Circle.create();
|
|
121
|
+
|
|
122
|
+
circle.centerY = -12;
|
|
123
|
+
|
|
124
|
+
circle.domNode.getAttribute('cy'); // "-12"
|
|
125
|
+
|
|
126
|
+
circle.domNode.setAttribute('cy', '22');
|
|
127
|
+
|
|
128
|
+
circle.centerY; // 22
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### `drag()`
|
|
132
|
+
|
|
133
|
+
Moves the circle element by the specified X and Y amounts.
|
|
134
|
+
|
|
135
|
+
```javascript
|
|
136
|
+
var circle = Circle.create();
|
|
137
|
+
|
|
138
|
+
circle.centerX = 10;
|
|
139
|
+
circle.centerY = 20;
|
|
140
|
+
|
|
141
|
+
circle.drag(100, 200);
|
|
142
|
+
|
|
143
|
+
circle.centerX; // 110
|
|
144
|
+
circle.centerY; // 220
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### `direction`
|
|
148
|
+
|
|
149
|
+
Circle elements don't actually have a direction associated with them.
|
|
150
|
+
|
|
151
|
+
This property is included primarily for compatibilty with other interfaces within RNAcanvas
|
|
152
|
+
(e.g., those involving strung elements).
|
|
153
|
+
|
|
154
|
+
This property will always have a value of 0.
|
|
155
|
+
|
|
156
|
+
```javascript
|
|
157
|
+
var circle = Circle.create();
|
|
158
|
+
|
|
159
|
+
circle.direction; // 0
|
|
160
|
+
|
|
161
|
+
circle.direction = 1;
|
|
162
|
+
|
|
163
|
+
// still zero
|
|
164
|
+
circle.direction; // 0
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### `serialized()`
|
|
168
|
+
|
|
169
|
+
Returns the serialized form of the circle element,
|
|
170
|
+
which is a JSON-serializable object.
|
|
171
|
+
|
|
172
|
+
```javascript
|
|
173
|
+
var circle = Circle.create();
|
|
174
|
+
|
|
175
|
+
var savedCircle = circle.serialized();
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### `static recreate()`
|
|
179
|
+
|
|
180
|
+
Recreates a saved circle element given its JSON-serializable form
|
|
181
|
+
and the parent drawing that its DOM node is in.
|
|
182
|
+
|
|
183
|
+
```javascript
|
|
184
|
+
var circle1 = Circle.create();
|
|
185
|
+
|
|
186
|
+
// an RNAcanvas drawing
|
|
187
|
+
parentDrawing;
|
|
188
|
+
|
|
189
|
+
// add the circle element to the drawing
|
|
190
|
+
parentDrawing.domNode.append(circle1.domNode);
|
|
191
|
+
|
|
192
|
+
var savedCircle = circle1.serialized();
|
|
193
|
+
|
|
194
|
+
// recreate
|
|
195
|
+
var circle2 = Circle.create(savedCircle, parentDrawing);
|
|
196
|
+
|
|
197
|
+
circle2.domNode === circle1.domNode; // true
|
|
198
|
+
|
|
199
|
+
circle2 === circle1 // false
|
|
200
|
+
```
|
package/dist/Circle.d.ts
CHANGED
|
@@ -18,11 +18,6 @@ export declare class Circle {
|
|
|
18
18
|
get centerY(): number;
|
|
19
19
|
set centerY(centerY: number);
|
|
20
20
|
drag(x: number, y: number): void;
|
|
21
|
-
/**
|
|
22
|
-
* Circles don't have a direction (always evaluates to zero).
|
|
23
|
-
*/
|
|
24
|
-
get direction(): number;
|
|
25
|
-
set direction(direction: number);
|
|
26
21
|
serialized(): {
|
|
27
22
|
id: string;
|
|
28
23
|
};
|
package/dist/Circle.d.ts.map
CHANGED
|
@@ -1 +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;
|
|
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;IAwBL,QAAQ,CAAC,OAAO,EAAE,gBAAgB;IAvB9C;;OAEG;IACH,MAAM,CAAC,MAAM;gBAoBQ,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/Text.d.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Box } from '@rnacanvas/boxes';
|
|
2
|
+
import type { Drawing } from './Drawing';
|
|
3
|
+
/**
|
|
4
|
+
* A text element.
|
|
5
|
+
*/
|
|
6
|
+
export declare class Text {
|
|
7
|
+
readonly domNode: SVGTextElement;
|
|
8
|
+
static create(textContent?: string): Text;
|
|
9
|
+
constructor(domNode: SVGTextElement);
|
|
10
|
+
get id(): string;
|
|
11
|
+
get bbox(): Box;
|
|
12
|
+
get centerX(): number;
|
|
13
|
+
set centerX(centerX: number);
|
|
14
|
+
get centerY(): number;
|
|
15
|
+
set centerY(centerY: number);
|
|
16
|
+
drag(x: number, y: number): void;
|
|
17
|
+
serialized(): {
|
|
18
|
+
id: string;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Recreates a saved text element given the parent drawing that its DOM node is in.
|
|
22
|
+
*/
|
|
23
|
+
static recreate(savedText: unknown, parentDrawing: Drawing): Text | never;
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAIvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAMzC;;GAEG;AACH,qBAAa,IAAI;IAoBH,QAAQ,CAAC,OAAO,EAAE,cAAc;IAnB5C,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI;gBAmBpB,OAAO,EAAE,cAAc;IAE5C,IAAI,EAAE,IAAI,MAAM,CAEf;IAED,IAAI,IAAI,IAAI,GAAG,CAEd;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,OAAO,EAJJ,MAII,EAIlB;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,OAAO,EAJJ,MAII,EAIlB;IAED,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAKhC,UAAU;;;IAUV;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI,GAAG,KAAK;CAqB1E"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,CAAC;AAEhB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1 +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})());
|
|
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.floating"]=e():t["draw.floating"]=e()}(this,()=>(()=>{var t={645(t){var e;e=()=>(()=>{var t={986(t){t.exports=(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[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={};function r(t){var e=0;return t.forEach(function(t){return e+=t}),e}function n(t){return r(t)/t.length}function i(t){t.sort(function(t,e){return t-e})}t.r(e),t.d(e,{areWithin:()=>f,average:()=>n,clamp:()=>d,degrees:()=>y,flipAway:()=>v,isBetween:()=>h,isBetweenExclusive:()=>l,isBetweenInclusive:()=>h,max:()=>c,mean:()=>n,median:()=>a,min:()=>u,normalizeAngle:()=>w,radians:()=>g,round:()=>p,sortNumbers:()=>i,sortNumbersAscending:()=>i,sortNumbersDescending:()=>m,sortedNumbers:()=>s,sortedNumbersAscending:()=>s,sortedNumbersDescending:()=>b,sum:()=>r});var o=function(t,e,r){if(r||2===arguments.length)for(var n,i=0,o=e.length;i<o;i++)!n&&i in e||(n||(n=Array.prototype.slice.call(e,0,i)),n[i]=e[i]);return t.concat(n||Array.prototype.slice.call(e))};function s(t){var e=o([],t,!0);return i(e),e}function a(t){if(0==t.length)return NaN;var e=s(t);if(e.length%2!=0)return e[Math.floor(e.length/2)];var r=e.length/2,i=r-1;return n([e[r],e[i]])}function u(t){if(0==t.length)return 1/0;var e=t[0];return t.slice(1).forEach(function(t){e=Math.min(e,t)}),e}function c(t){if(0==t.length)return-1/0;var e=t[0];return t.slice(1).forEach(function(t){e=Math.max(e,t)}),e}function h(t,e,r){return t>=e&&t<=r}function l(t,e,r){return t>e&&t<r}function d(t,e,r){return t<e?e:t>r?r:t}function f(t,e,r){return Math.abs(t-e)<=r}function m(t){i(t),t.reverse()}function b(t){var e=s(t);return e.reverse(),e}function p(t,e){return Number.parseFloat(t.toFixed(null!=e?e:0))}function y(t){return t*(180/Math.PI)}function g(t){return t*(Math.PI/180)}function w(t,e){void 0===e&&(e=-Math.PI);var r=t-e;return e+((r%=2*Math.PI)>=0?r:r+2*Math.PI)}function v(t,e){var r=(e=w(e,t))-t;return(r<Math.PI/2||r>3*Math.PI/2)&&(t+=Math.PI),t}return e})()}},e={};function r(n){var i=e[n];if(void 0!==i)return i.exports;var o=e[n]={exports:{}};return t[n].call(o.exports,o,o.exports,r),o.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{"use strict";r.r(n),r.d(n,{Box:()=>e});var t=r(986);class e{static matching(t){let{x:r,y:n,width:i,height:o}=t;return new e(r,n,i,o)}static bounding(r){let n=[...r];if(0==n.length)throw new Error("An empty collection of boxes doesn't have a bounding box.");let i=n.map(t=>e.matching(t)),o=(0,t.min)(i.map(t=>t.left)),s=(0,t.min)(i.map(t=>t.top)),a=(0,t.max)(i.map(t=>t.right))-o,u=(0,t.max)(i.map(t=>t.bottom))-s;return new e(o,s,a,u)}constructor(t,e,r,n){this.x=t,this.y=e,this.width=r,this.height=n}get centerX(){return this.minX+this.width/2}get centerY(){return this.minY+this.height/2}get minX(){return this.x}get minY(){return this.y}get maxX(){return this.minX+this.width}get maxY(){return this.minY+this.height}get top(){return this.minY}get right(){return this.maxX}get bottom(){return this.maxY}get left(){return this.minX}bounds(t){let r=e.matching(t);return this.minX<=r.minX&&this.minY<=r.minY&&this.maxX>=r.maxX&&this.maxY>=r.maxY}padded(...t){let r="number"==typeof t[0]?t[0]:"factor"in t[0]?t[0].factor*this.width:t[0].percentage/100*this.width,n="number"==typeof t[0]&&"number"==typeof t[1]?t[1]:"number"==typeof t[0]?t[0]:"factor"in t[0]?t[0].factor*this.height:t[0].percentage/100*this.height;return new e(this.x-r,this.y-n,this.width+2*r,this.height+2*n)}get periphery(){return{atAngle:t=>{let e=this.width/2,r=this.height/2,n=Math.pow(Math.pow(e,2)+Math.pow(r,2),.5),i=this.centerX+n*Math.cos(t),o=this.centerY+n*Math.sin(t),s=n;return Math.abs(this.centerX-i)>e&&(s=Math.abs(e/Math.cos(t)),s=Number.isFinite(s)?s:r),Math.abs(this.centerY-o)>r&&(s=Math.abs(r/Math.sin(t)),s=Number.isFinite(s)?s:e),{x:this.centerX+s*Math.cos(t),y:this.centerY+s*Math.sin(t)}}}}}})(),n})(),t.exports=e()},731(t){var e;e=()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[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,{CenterPoint:()=>c});var r,n,i,o,s,a=function(t,e,r,n,i){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?i.call(t,r):i?i.value=r:e.set(t,r),r},u=function(t,e,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(t):n?n.value:e.get(t)};class c{constructor(t){r.add(this),n.set(this,void 0),i.set(this,{move:[]}),o.set(this,void 0),a(this,n,t,"f"),a(this,o,new MutationObserver(()=>u(this,r,"m",s).call(this,"move")),"f"),u(this,o,"f").observe(t,{attributes:!0,childList:!0,characterData:!0,subtree:!0})}get x(){let t=u(this,n,"f").getBBox();return t.x+t.width/2}set x(t){let e=this.x,r=[...u(this,n,"f").x.baseVal].map(t=>t.value);0!=r.length||r.push(0),r=r.map(r=>r+(t-e)),u(this,n,"f").setAttribute("x",r.join(", "))}get y(){let t=u(this,n,"f").getBBox();return t.y+t.height/2}set y(t){let e=this.y,r=[...u(this,n,"f").y.baseVal].map(t=>t.value);0!=r.length||r.push(0),r=r.map(r=>r+(t-e)),u(this,n,"f").setAttribute("y",r.join(", "))}addEventListener(t,e){u(this,i,"f")[t].push(e)}removeEventListener(t,e){u(this,i,"f")[t]=u(this,i,"f")[t].filter(t=>t!==e)}}return n=new WeakMap,i=new WeakMap,o=new WeakMap,r=new WeakSet,s=function(t){u(this,i,"f")[t].forEach(t=>t())},e})(),t.exports=e()},854(t){t.exports=(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[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={};function r(t){return"number"==typeof t}function n(t){return r(t)&&Number.isFinite(t)}function i(t){return r(t)&&!Number.isFinite(t)}function o(t){return n(t)&&t>0}function s(t){return n(t)&&t>=0}function a(t){return"string"==typeof t}function u(t){return null==t}function c(t){return"object"==typeof t&&null!==t}function h(t){return Array.isArray(t)}function l(t){return h(t)&&0==t.length}function d(t){return h(t)&&t.length>0}function f(t){return h(t)&&t.every(r)}function m(t){return f(t)&&t.length>0}function b(t){return h(t)&&t.every(n)}function p(t){return h(t)&&t.every(i)}function y(t){return h(t)&&t.every(a)}function g(t){return y(t)&&t.length>0}return t.r(e),t.d(e,{isArray:()=>h,isEmptyArray:()=>l,isFiniteNumber:()=>n,isFiniteNumbersArray:()=>b,isNonEmptyArray:()=>d,isNonEmptyNumbersArray:()=>m,isNonEmptyStringsArray:()=>g,isNonFiniteNumber:()=>i,isNonFiniteNumbersArray:()=>p,isNonNegativeFiniteNumber:()=>s,isNonNullObject:()=>c,isNullish:()=>u,isNumber:()=>r,isNumbersArray:()=>f,isPositiveFiniteNumber:()=>o,isString:()=>a,isStringsArray:()=>y}),e})()}},e={};function r(n){var i=e[n];if(void 0!==i)return i.exports;var o=e[n]={exports:{}};return t[n].call(o.exports,o,o.exports,r),o.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{"use strict";r.r(n),r.d(n,{Circle:()=>s,Text:()=>o});var t=r(645),e=r(731),i=r(854);class o{static create(t){let e=document.createElementNS("http://www.w3.org/2000/svg","text");return e.id="id-"+self.crypto.randomUUID(),e.textContent=null!=t?t:"",e.setAttribute("font-family","Arial"),e.setAttribute("font-size","9"),e.setAttribute("font-weight","700"),e.setAttribute("font-style","normal"),e.setAttribute("fill","black"),e.setAttribute("fill-opacity","1"),new o(e)}constructor(t){this.domNode=t}get id(){return this.domNode.id}get bbox(){return t.Box.matching(this.domNode.getBBox())}get centerX(){return this.bbox.centerX}set centerX(t){new e.CenterPoint(this.domNode).x=t}get centerY(){return this.bbox.centerY}set centerY(t){new e.CenterPoint(this.domNode).y=t}drag(t,e){this.centerX+=t,this.centerY+=e}serialized(){if(!this.id)throw new Error("Text element ID is falsy.");return{id:this.id}}static recreate(t,e){if(!(0,i.isNonNullObject)(t))throw new Error(`Saved text element is not an object: ${t}.`);if(!t.id)throw new Error("Saved text element ID is falsy.");if(!(0,i.isString)(t.id))throw new Error(`Saved text element ID is not a string: ${t.id}.`);let r=e.domNode.querySelector("#"+t.id);if(!r)throw new Error("Unable to find text element DOM node in parent drawing by ID.");if(!(r instanceof SVGTextElement))throw new Error(`Text element DOM node is not an SVG text element: ${r}.`);return new o(r)}}class s{static create(){let t=document.createElementNS("http://www.w3.org/2000/svg","circle");return t.id="id-"+self.crypto.randomUUID(),t.setAttribute("r","6"),t.setAttribute("stroke","black"),t.setAttribute("stroke-width","1"),t.setAttribute("stroke-opacity","1"),t.setAttribute("stroke-dasharray",""),t.setAttribute("stroke-linecap",""),t.setAttribute("fill","white"),t.setAttribute("fill-opacity","1"),new s(t)}constructor(t){this.domNode=t}get id(){return this.domNode.id}get centerX(){return this.domNode.cx.baseVal.value}set centerX(t){this.domNode.setAttribute("cx",`${t}`)}get centerY(){return this.domNode.cy.baseVal.value}set centerY(t){this.domNode.setAttribute("cy",`${t}`)}drag(t,e){this.centerX+=t,this.centerY+=e}serialized(){if(!this.id)throw new Error("Circle ID is falsy.");return{id:this.id}}static recreate(t,e){if(!(0,i.isNonNullObject)(t))throw new Error(`Saved circle must be an object: ${t}.`);if(!t.id)throw new Error("Saved circle ID is falsy.");if(!(0,i.isString)(t.id))throw new Error(`Saved circle ID must be a string: ${t.id}.`);let r=e.domNode.querySelector("#"+t.id);if(!r)throw new Error("Unable to find circle element DOM node by ID.");if(!(r instanceof SVGCircleElement))throw new Error(`Circle element DOM node is not an SVG circle element: ${r}.`);return new s(r)}}})(),n})());
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rnacanvas/draw.floating",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Draw floating elements",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
"webpack-cli": "^7.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
+
"@rnacanvas/boxes": "^5.0.1",
|
|
33
|
+
"@rnacanvas/draw.svg.text": "^1.3.0",
|
|
32
34
|
"@rnacanvas/value-check": "^1.14.1",
|
|
33
35
|
"jquery": "^4.0.0"
|
|
34
36
|
}
|