@rnacanvas/draw.floating 3.0.0 → 3.1.1

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 CHANGED
@@ -11,10 +11,242 @@ npm install @rnacanvas/draw.floating
11
11
  All exports of this package can be accessed as named imports.
12
12
 
13
13
  ```javascript
14
- // an example import
15
- import { Circle } from '@rnacanvas/draw.floating';
14
+ // some example imports
15
+ import { Text, Circle } from '@rnacanvas/draw.floating';
16
16
  ```
17
17
 
18
+ ## `class Text`
19
+
20
+ A text element.
21
+
22
+ ```javascript
23
+ var text = Text.create('A');
24
+
25
+ text.domNode.textContent; // "A"
26
+
27
+ // set font attributes
28
+ text.domNode.setAttribute('font-family', 'Arial');
29
+ text.domNode.setAttribute('font-size', '9');
30
+
31
+ // set color
32
+ text.domNode.setAttribute('fill', 'black');
33
+
34
+ // set center coordinates
35
+ text.centerX = 10;
36
+ text.centerY = 20;
37
+ ```
38
+
39
+ ### `static create()`
40
+
41
+ Creates a text element with specified content.
42
+
43
+ ```javascript
44
+ var text = Text.create('A');
45
+
46
+ text.domNode.textContent; // "A"
47
+ ```
48
+
49
+ This method will assign created text elements a UUID.
50
+
51
+ ```javascript
52
+ var text = Text.create('A');
53
+
54
+ // text element has a UUID
55
+ text.domNode.id.length >= 36; // true
56
+ ```
57
+
58
+ Text elements can be created with empty text content.
59
+
60
+ ```javascript
61
+ var text = Text.create();
62
+
63
+ text.domNode.textContent; // ""
64
+ ```
65
+
66
+ ### `constructor()`
67
+
68
+ Constructs a text element wrapping the specified SVG text element.
69
+
70
+ ```javascript
71
+ var domNode = document.createElementNS('http://www.w3.org/2000/svg', 'text');
72
+
73
+ var text = new Text(domNode);
74
+
75
+ text.domNode === domNode; // true
76
+ ```
77
+
78
+ The input SVG text element is not modified at all during construction of a text element.
79
+
80
+ This constructor is more meant for internal use
81
+ (e.g., when recreating saved text elements).
82
+
83
+ ### `readonly domNode`
84
+
85
+ The underlying SVG text element corresponding to a text element.
86
+
87
+ ```javascript
88
+ var domNode = document.createElementNS('http://www.w3.org/2000/svg', 'text');
89
+
90
+ var text = new Text(domNode);
91
+
92
+ text.domNode === domNode; // true
93
+ ```
94
+
95
+ ### `readonly id`
96
+
97
+ The ID of the text element.
98
+
99
+ Corresponds to the `id` attribute of the underlying SVG text element.
100
+
101
+ ```javascript
102
+ var text = Text.create('A');
103
+
104
+ text.domNode.setAttribute('id', 'id-12345');
105
+
106
+ text.id; // "id-12345"
107
+ ```
108
+
109
+ ### `readonly bbox`
110
+
111
+ The bounding box of the text element.
112
+
113
+ <b>Note that this method only works correctly if the text element has been added to the document body.</b>
114
+
115
+ Bounding box calculations in general only work when elements are part of the document body.
116
+
117
+ ```javascript
118
+ var text = Text.create('A');
119
+
120
+ var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
121
+
122
+ svg.setAttribute('viewBox', '0 0 100 200');
123
+
124
+ svg.append(text.domNode);
125
+
126
+ document.body.append(svg);
127
+
128
+ text.centerX = 10;
129
+ text.centerY = 20;
130
+
131
+ // leftmost coordinate
132
+ text.bbox.x;
133
+
134
+ // topmost coordinate
135
+ text.bbox.y;
136
+
137
+ text.bbox.width;
138
+ text.bbox.height;
139
+ ```
140
+
141
+ See the [Box](https://pzhaojohnson.github.io/rnacanvas.draw.floating/) class
142
+ for a full list of bounding box methods and properties.
143
+
144
+ ### `centerX`
145
+
146
+ Center X coordinate.
147
+
148
+ <b>This property only works correctly when a text element has been added to the documnt body.</b>
149
+
150
+ ```javascript
151
+ var text = Text.create('A');
152
+
153
+ var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
154
+
155
+ svg.setAttribute('viewBox', '0 0 100 200');
156
+
157
+ svg.append(text.domNode);
158
+
159
+ document.body.append(svg);
160
+
161
+ text.centerX = 25;
162
+
163
+ text.centerX; // 25
164
+ ```
165
+
166
+ ### `centerY`
167
+
168
+ Center Y coordinate.
169
+
170
+ <b>This property only works correctly when a text element has been added to the documnt body.</b>
171
+
172
+ ```javascript
173
+ var text = Text.create('A');
174
+
175
+ var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
176
+
177
+ svg.setAttribute('viewBox', '0 0 100 200');
178
+
179
+ svg.append(text.domNode);
180
+
181
+ document.body.append(svg);
182
+
183
+ text.centerY = 50;
184
+
185
+ text.centerY; // 50
186
+ ```
187
+
188
+ ### `drag()`
189
+
190
+ Shifs a text element by the specified X and Y amounts.
191
+
192
+ ```javascript
193
+ var text = Text.create('A');
194
+
195
+ var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
196
+
197
+ svg.setAttribute('viewBox', '0 0 100 200');
198
+
199
+ svg.append(text.domNode);
200
+
201
+ document.body.append(svg);
202
+
203
+ text.centerX = 10;
204
+ text.centerY = 20;
205
+
206
+ text.drag(70, 90);
207
+
208
+ text.centerX; // 80;
209
+ text.centerY; // 110
210
+ ```
211
+
212
+ ### `serialized()`
213
+
214
+ Returns the serialized form of a strung element,
215
+ which is a JOSN-serializable object.
216
+
217
+ ```javascript
218
+ var text = Text.create('A');
219
+
220
+ var savedText = text.serialized();
221
+ ```
222
+
223
+ ### `static recreate()`
224
+
225
+ Recreates a saved text element given the parent drawing that its DOM node is in.
226
+
227
+ ```javascript
228
+ var text1 = Text.create('A');
229
+
230
+ // an RNAcanvas drawing
231
+ var parentDrawing;
232
+
233
+ // add the text element
234
+ parentDrawing.domNode.append(text1.domNode);
235
+
236
+ var savedText = text1.serialized();
237
+
238
+ var text2 = Text.recreate(savedText, parentDrawing);
239
+
240
+ // same DOM node
241
+ text2.domNode === text1.domNode; // true
242
+
243
+ // different objects
244
+ text2 === text1; // false
245
+ ```
246
+
247
+ <b>All drawing elements in RNAcanvas must have a unique ID for drawings to be savable
248
+ and for undo / redo functionality to work.</b>
249
+
18
250
  ## `class Circle`
19
251
 
20
252
  A circle element.
@@ -49,7 +281,7 @@ circle.id.length >= 36; // has a UUID
49
281
 
50
282
  ### `constructor()`
51
283
 
52
- Creates a circle element wrapping an SVG circle element.
284
+ Constructs a circle element wrapping an SVG circle element.
53
285
 
54
286
  The input SVG circle element is not modified at all during construction of a circle element.
55
287
 
@@ -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;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"}
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"}
@@ -0,0 +1,16 @@
1
+ export declare class RectangleDefinition {
2
+ centerX: number;
3
+ centerY: number;
4
+ /**
5
+ * Have rectangles be upright by default.
6
+ */
7
+ direction: number;
8
+ width: number;
9
+ height: number;
10
+ cornerRadius: number;
11
+ /**
12
+ * Returns an SVG path definition.
13
+ */
14
+ toString(): string;
15
+ }
16
+ //# sourceMappingURL=RectangleDefinition.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RectangleDefinition.d.ts","sourceRoot":"","sources":["../src/RectangleDefinition.ts"],"names":[],"mappings":"AAEA,qBAAa,mBAAmB;IAC9B,OAAO,SAAK;IACZ,OAAO,SAAK;IAEZ;;OAEG;IACH,SAAS,SAAgB;IAEzB,KAAK,SAAK;IACV,MAAM,SAAK;IAEX,YAAY,SAAK;IAEjB;;OAEG;IACH,QAAQ,IAAI,MAAM;CAoEnB"}
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
@@ -1,3 +1,5 @@
1
+ import { Text } from './Text';
2
+ export { Text };
1
3
  import { Circle } from './Circle';
2
4
  export { Circle };
3
5
  //# sourceMappingURL=index.d.ts.map
@@ -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}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.0.0",
3
+ "version": "3.1.1",
4
4
  "description": "Draw floating elements",
5
5
  "repository": {
6
6
  "type": "git",
@@ -29,6 +29,9 @@
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",
34
+ "@rnacanvas/points.oopified": "^2.1.0",
32
35
  "@rnacanvas/value-check": "^1.14.1",
33
36
  "jquery": "^4.0.0"
34
37
  }