kritzel-stencil 0.0.140 → 0.0.141

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.
Files changed (169) hide show
  1. package/dist/cjs/index-BKstgWru.js +16981 -0
  2. package/dist/cjs/index-BKstgWru.js.map +1 -0
  3. package/dist/cjs/{index-nzUNdMPh.js → index-DcTwXs_q.js} +47 -22
  4. package/dist/cjs/index-DcTwXs_q.js.map +1 -0
  5. package/dist/cjs/index.cjs.js +1 -1
  6. package/dist/cjs/kritzel-brush-style.cjs.entry.js +1 -1
  7. package/dist/cjs/kritzel-color_22.cjs.entry.js +29 -28
  8. package/dist/cjs/loader.cjs.js +2 -2
  9. package/dist/cjs/stencil.cjs.js +3 -3
  10. package/dist/cjs/stencil.cjs.js.map +1 -1
  11. package/dist/collection/classes/core/core.class.js +9 -2
  12. package/dist/collection/classes/core/core.class.js.map +1 -1
  13. package/dist/collection/classes/handlers/key.handler.js +2 -2
  14. package/dist/collection/classes/handlers/key.handler.js.map +1 -1
  15. package/dist/collection/classes/objects/text.class.js +123 -76
  16. package/dist/collection/classes/objects/text.class.js.map +1 -1
  17. package/dist/collection/classes/tools/text-tool.class.js +2 -4
  18. package/dist/collection/classes/tools/text-tool.class.js.map +1 -1
  19. package/dist/collection/collection-manifest.json +2 -2
  20. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +0 -1
  21. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js.map +1 -1
  22. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +4 -8
  23. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js.map +1 -1
  24. package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +21 -8
  25. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +17 -27
  26. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js.map +1 -1
  27. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js +1 -2
  28. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js.map +1 -1
  29. package/dist/collection/components/shared/kritzel-color/kritzel-color.js +3 -3
  30. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +3 -4
  31. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js.map +1 -1
  32. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js +5 -6
  33. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js.map +1 -1
  34. package/dist/collection/components/shared/kritzel-font/kritzel-font.js +3 -3
  35. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js +2 -3
  36. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js.map +1 -1
  37. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +2 -3
  38. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js.map +1 -1
  39. package/dist/collection/components/shared/kritzel-icon/kritzel-icon.js +5 -5
  40. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +0 -2
  41. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js.map +1 -1
  42. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +0 -2
  43. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js.map +1 -1
  44. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +5 -6
  45. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js.map +1 -1
  46. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +4 -5
  47. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js.map +1 -1
  48. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -2
  49. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js.map +1 -1
  50. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +3 -4
  51. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js.map +1 -1
  52. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js +0 -2
  53. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js.map +1 -1
  54. package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js +1 -2
  55. package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js.map +1 -1
  56. package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js +1 -2
  57. package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js.map +1 -1
  58. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +1 -3
  59. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map +1 -1
  60. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js +0 -2
  61. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js.map +1 -1
  62. package/dist/components/index.js +3 -3
  63. package/dist/components/kritzel-brush-style.js +4 -4
  64. package/dist/components/kritzel-color-palette.js +1 -1
  65. package/dist/components/kritzel-color.js +1 -1
  66. package/dist/components/kritzel-context-menu.js +1 -1
  67. package/dist/components/kritzel-control-brush-config.js +1 -1
  68. package/dist/components/kritzel-control-text-config.js +1 -1
  69. package/dist/components/kritzel-controls.js +1 -1
  70. package/dist/components/kritzel-cursor-trail.js +1 -1
  71. package/dist/components/kritzel-dropdown.js +1 -1
  72. package/dist/components/kritzel-editor.js +25 -25
  73. package/dist/components/kritzel-engine.js +1 -1
  74. package/dist/components/kritzel-font-family.js +1 -1
  75. package/dist/components/kritzel-font-size.js +1 -1
  76. package/dist/components/kritzel-font.js +1 -1
  77. package/dist/components/kritzel-icon.js +1 -1
  78. package/dist/components/kritzel-menu-item.js +1 -1
  79. package/dist/components/kritzel-menu.js +1 -1
  80. package/dist/components/kritzel-portal.js +1 -1
  81. package/dist/components/kritzel-split-button.js +1 -1
  82. package/dist/components/kritzel-stroke-size.js +1 -1
  83. package/dist/components/kritzel-tooltip.js +1 -1
  84. package/dist/components/kritzel-utility-panel.js +1 -1
  85. package/dist/components/kritzel-workspace-manager.js +1 -1
  86. package/dist/components/{p-BQJhnpY3.js → p-BEKicPnH.js} +3 -3
  87. package/dist/components/{p-BQJhnpY3.js.map → p-BEKicPnH.js.map} +1 -1
  88. package/dist/components/{p-D6FeQRzi.js → p-BFNwskCY.js} +4 -4
  89. package/dist/components/{p-D6FeQRzi.js.map → p-BFNwskCY.js.map} +1 -1
  90. package/dist/components/{p-sHDCqDbD.js → p-BJbN3vca.js} +6 -6
  91. package/dist/components/{p-sHDCqDbD.js.map → p-BJbN3vca.js.map} +1 -1
  92. package/dist/components/p-BuDVaqTF.js +15302 -0
  93. package/dist/components/p-BuDVaqTF.js.map +1 -0
  94. package/dist/components/{p-bC64Ng59.js → p-ByAzDzS5.js} +3 -3
  95. package/dist/components/{p-bC64Ng59.js.map → p-ByAzDzS5.js.map} +1 -1
  96. package/dist/components/{p-CE_sOMS2.js → p-BycHaC-9.js} +4 -4
  97. package/dist/components/{p-CE_sOMS2.js.map → p-BycHaC-9.js.map} +1 -1
  98. package/dist/components/{p-BV5iL9W6.js → p-C4nj29RW.js} +37 -36
  99. package/dist/components/p-C4nj29RW.js.map +1 -0
  100. package/dist/components/{p-BYanlgdq.js → p-C9hrbrUN.js} +27 -14
  101. package/dist/components/p-C9hrbrUN.js.map +1 -0
  102. package/dist/components/{p-JYqCBcMd.js → p-CEn1WeG3.js} +8 -8
  103. package/dist/components/{p-JYqCBcMd.js.map → p-CEn1WeG3.js.map} +1 -1
  104. package/dist/components/{p-C7UWRUAy.js → p-CGb-8cK4.js} +3 -3
  105. package/dist/components/{p-C7UWRUAy.js.map → p-CGb-8cK4.js.map} +1 -1
  106. package/dist/components/{p-BJZudenH.js → p-C_hSH2nN.js} +3 -3
  107. package/dist/components/{p-BJZudenH.js.map → p-C_hSH2nN.js.map} +1 -1
  108. package/dist/components/{p-SKH0G2nM.js → p-ChLi4Ufe.js} +17 -17
  109. package/dist/components/{p-SKH0G2nM.js.map → p-ChLi4Ufe.js.map} +1 -1
  110. package/dist/components/{p-D2eJXNMx.js → p-CieOx1XL.js} +4 -4
  111. package/dist/components/{p-D2eJXNMx.js.map → p-CieOx1XL.js.map} +1 -1
  112. package/dist/components/{p-BFLXutiB.js → p-Co5lU_7h.js} +10 -10
  113. package/dist/components/{p-BFLXutiB.js.map → p-Co5lU_7h.js.map} +1 -1
  114. package/dist/components/{p-sq9jgfX0.js → p-D27d2rKT.js} +3 -3
  115. package/dist/components/{p-sq9jgfX0.js.map → p-D27d2rKT.js.map} +1 -1
  116. package/dist/components/{p-DFO-6kuA.js → p-DPxzgBs0.js} +3 -3
  117. package/dist/components/{p-DFO-6kuA.js.map → p-DPxzgBs0.js.map} +1 -1
  118. package/dist/components/{p-vNnVlsJt.js → p-D_RcVGj0.js} +4 -4
  119. package/dist/components/{p-vNnVlsJt.js.map → p-D_RcVGj0.js.map} +1 -1
  120. package/dist/components/{p-C-ozL_Es.js → p-DqsgZIHC.js} +4 -4
  121. package/dist/components/{p-C-ozL_Es.js.map → p-DqsgZIHC.js.map} +1 -1
  122. package/dist/components/{p-Dh61W3GT.js → p-DzyZA2GT.js} +5 -5
  123. package/dist/components/{p-Dh61W3GT.js.map → p-DzyZA2GT.js.map} +1 -1
  124. package/dist/components/{p-DbmQ5DrU.js → p-dcR2uxM3.js} +5 -5
  125. package/dist/components/{p-DbmQ5DrU.js.map → p-dcR2uxM3.js.map} +1 -1
  126. package/dist/components/{p-BLc8TzcU.js → p-fiFoOjv0.js} +7 -7
  127. package/dist/components/{p-BLc8TzcU.js.map → p-fiFoOjv0.js.map} +1 -1
  128. package/dist/components/{p-IgPm36bH.js → p-gCHmJzc2.js} +4 -4
  129. package/dist/components/{p-IgPm36bH.js.map → p-gCHmJzc2.js.map} +1 -1
  130. package/dist/esm/{index-oCOlsFCN.js → index-Cw77zP6g.js} +47 -22
  131. package/dist/esm/index-Cw77zP6g.js.map +1 -0
  132. package/dist/esm/index-D0Q2MKPn.js +16953 -0
  133. package/dist/esm/index-D0Q2MKPn.js.map +1 -0
  134. package/dist/esm/index.js +1 -1
  135. package/dist/esm/kritzel-brush-style.entry.js +1 -1
  136. package/dist/esm/kritzel-color_22.entry.js +29 -28
  137. package/dist/esm/loader.js +3 -3
  138. package/dist/esm/stencil.js +4 -4
  139. package/dist/esm/stencil.js.map +1 -1
  140. package/dist/stencil/index.esm.js +1 -1
  141. package/dist/stencil/p-73784709.entry.js +2 -0
  142. package/dist/stencil/p-73784709.entry.js.map +1 -0
  143. package/dist/stencil/{p-25d1e040.entry.js → p-8b831c94.entry.js} +2 -2
  144. package/dist/stencil/p-Cw77zP6g.js +3 -0
  145. package/dist/stencil/p-Cw77zP6g.js.map +1 -0
  146. package/dist/stencil/p-D0Q2MKPn.js +2 -0
  147. package/dist/stencil/p-D0Q2MKPn.js.map +1 -0
  148. package/dist/stencil/stencil.esm.js +1 -1
  149. package/dist/stencil/stencil.esm.js.map +1 -1
  150. package/dist/types/classes/objects/text.class.d.ts +20 -10
  151. package/dist/types/stencil-public-runtime.d.ts +36 -12
  152. package/package.json +7 -2
  153. package/dist/cjs/index-Clh2g9JM.js +0 -2850
  154. package/dist/cjs/index-Clh2g9JM.js.map +0 -1
  155. package/dist/cjs/index-nzUNdMPh.js.map +0 -1
  156. package/dist/components/p-BV5iL9W6.js.map +0 -1
  157. package/dist/components/p-BYanlgdq.js.map +0 -1
  158. package/dist/components/p-C5sTCwe3.js +0 -1171
  159. package/dist/components/p-C5sTCwe3.js.map +0 -1
  160. package/dist/esm/index-BAbkwyRx.js +0 -2822
  161. package/dist/esm/index-BAbkwyRx.js.map +0 -1
  162. package/dist/esm/index-oCOlsFCN.js.map +0 -1
  163. package/dist/stencil/p-BAbkwyRx.js +0 -2
  164. package/dist/stencil/p-BAbkwyRx.js.map +0 -1
  165. package/dist/stencil/p-fe465059.entry.js +0 -2
  166. package/dist/stencil/p-fe465059.entry.js.map +0 -1
  167. package/dist/stencil/p-oCOlsFCN.js +0 -3
  168. package/dist/stencil/p-oCOlsFCN.js.map +0 -1
  169. /package/dist/stencil/{p-25d1e040.entry.js.map → p-8b831c94.entry.js.map} +0 -0
@@ -1,1171 +0,0 @@
1
- import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
2
- import { O as ObjectHelper } from './p-B0kd2rUI.js';
3
-
4
- class KritzelBaseCommand {
5
- _core;
6
- initiator;
7
- skipHistory;
8
- constructor(core, initiator, skipHistory = false) {
9
- this._core = core;
10
- this.initiator = initiator?.constructor?.name ?? 'Unknown';
11
- this.skipHistory = skipHistory;
12
- }
13
- execute() {
14
- throw new Error('Method not implemented.');
15
- }
16
- undo() {
17
- throw new Error('Method not implemented.');
18
- }
19
- }
20
-
21
- class UpdateObjectCommand extends KritzelBaseCommand {
22
- object;
23
- updatedProperties;
24
- previousProperties;
25
- constructor(core, initiator, object, updatedProperties, skipHistory = false) {
26
- super(core, initiator, skipHistory);
27
- this.object = object;
28
- this.updatedProperties = updatedProperties;
29
- this.previousProperties = {};
30
- for (const key in updatedProperties) {
31
- if (updatedProperties.hasOwnProperty(key)) {
32
- this.previousProperties[key] = this.object[key];
33
- }
34
- }
35
- }
36
- execute() {
37
- for (const key in this.updatedProperties) {
38
- if (this.updatedProperties.hasOwnProperty(key)) {
39
- this.object[key] = this.updatedProperties[key];
40
- }
41
- }
42
- this._core.store.state.objectsMap.update(this.object);
43
- this._core.updateObjectInDatabase(this.object);
44
- }
45
- undo() {
46
- for (const key in this.previousProperties) {
47
- if (this.previousProperties.hasOwnProperty(key)) {
48
- this.object[key] = this.previousProperties[key];
49
- }
50
- }
51
- this._core.store.state.objectsMap.update(this.object);
52
- this._core.updateObjectInDatabase(this.object);
53
- }
54
- }
55
-
56
- class KritzelToolRegistry {
57
- static registry = {};
58
- static registerTool(toolName, constructor, core) {
59
- const toolInstance = new constructor(core);
60
- toolInstance.name = toolName;
61
- this.registry[toolName] = toolInstance;
62
- return toolInstance;
63
- }
64
- static getTool(toolName) {
65
- const toolInstance = this.registry[toolName];
66
- if (!toolInstance) {
67
- console.warn(`Unknown tool: ${toolName}`);
68
- return null;
69
- }
70
- return toolInstance;
71
- }
72
- }
73
-
74
- class KritzelBaseTool {
75
- __class__ = this.constructor.name;
76
- name = 'base-tool';
77
- _core;
78
- constructor(core) {
79
- this._core = core;
80
- }
81
- onActivate() {
82
- // default implementation
83
- }
84
- onDeactivate() {
85
- // default implementation
86
- }
87
- handlePointerDown(_event) {
88
- // default implementation
89
- }
90
- handlePointerMove(_event) {
91
- // default implementation
92
- }
93
- handlePointerUp(_event) {
94
- // default implementation
95
- }
96
- handleWheel(_event) {
97
- // default implementation
98
- }
99
- serialize() {
100
- return {
101
- __class__: this.__class__,
102
- name: this.name,
103
- };
104
- }
105
- deserialize(object) {
106
- Object.assign(this, object);
107
- return this;
108
- }
109
- }
110
-
111
- class AddObjectCommand extends KritzelBaseCommand {
112
- object;
113
- constructor(core, initiator, object, skipHistory = false) {
114
- super(core, initiator, skipHistory);
115
- this.object = object;
116
- }
117
- execute() {
118
- this._core.store.state.objectsMap.insert(this.object);
119
- this._core.addObjectToDatabase(this.object);
120
- }
121
- undo() {
122
- this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
123
- this._core.deleteObjectFromDatabase(this.object.id);
124
- }
125
- }
126
-
127
- class KritzelEventHelper {
128
- static isRightClick(ev) {
129
- return ev.button === KritzelMouseButton.Right;
130
- }
131
- static isLeftClick(ev) {
132
- return ev.button === KritzelMouseButton.Left;
133
- }
134
- static isMainMouseWheel(event) {
135
- return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
136
- }
137
- static isPointerEventOnContextMenu(event) {
138
- const path = event.composedPath();
139
- const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));
140
- return !!contextMenu;
141
- }
142
- static onLongPress(event, onSuccess, onCancel) {
143
- const longPressTimeout = 400;
144
- const moveThreshold = 10;
145
- const startX = event.clientX;
146
- const startY = event.clientY;
147
- const target = event.target;
148
- const timer = setTimeout(() => {
149
- removeListeners();
150
- onSuccess(event);
151
- }, longPressTimeout);
152
- const cancel = () => {
153
- clearTimeout(timer);
154
- removeListeners();
155
- onCancel?.();
156
- };
157
- const onPointerMove = (e) => {
158
- if (Math.abs(e.clientX - startX) > moveThreshold || Math.abs(e.clientY - startY) > moveThreshold) {
159
- cancel();
160
- }
161
- };
162
- const onPointerUp = () => {
163
- cancel();
164
- };
165
- const onPointerCancel = () => {
166
- cancel();
167
- };
168
- const removeListeners = () => {
169
- target.removeEventListener('pointermove', onPointerMove);
170
- target.removeEventListener('pointerup', onPointerUp);
171
- target.removeEventListener('pointercancel', onPointerCancel);
172
- };
173
- target.addEventListener('pointermove', onPointerMove, { passive: true });
174
- target.addEventListener('pointerup', onPointerUp, { once: true });
175
- target.addEventListener('pointercancel', onPointerCancel, { once: true });
176
- return cancel;
177
- }
178
- }
179
-
180
- class KritzelKeyboardHelper {
181
- static forceHideKeyboard() {
182
- if (document.activeElement instanceof HTMLElement) {
183
- document.activeElement.blur();
184
- }
185
- }
186
- static enableInteractiveWidget() {
187
- const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
188
- if (meta) {
189
- let currentContent = meta.getAttribute('content');
190
- if (!currentContent.includes('interactive-widget=resizes-content')) {
191
- currentContent += ', interactive-widget=resizes-content';
192
- }
193
- meta.setAttribute('content', currentContent);
194
- }
195
- }
196
- static disableInteractiveWidget() {
197
- const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
198
- if (meta) {
199
- let currentContent = meta.getAttribute('content');
200
- let newContent = currentContent.replace(/\s*interactive-widget=resizes-content\s*[,;]?/g, '');
201
- newContent = newContent
202
- .replace(/,(\s*,)+/g, ',')
203
- .replace(/^,/, '')
204
- .replace(/,$/, '')
205
- .trim();
206
- meta.setAttribute('content', newContent);
207
- }
208
- }
209
- static onKeyboardVisibleChanged(callback) {
210
- if ('visualViewport' in window) {
211
- const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75;
212
- const onResize = (event) => {
213
- const target = event.target;
214
- const isOpen = (target.height * target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO;
215
- callback(isOpen);
216
- };
217
- window.visualViewport.addEventListener('resize', onResize);
218
- return () => window.visualViewport.removeEventListener('resize', onResize);
219
- }
220
- else {
221
- // Fallback for older browsers does not provide a reliable event-based mechanism.
222
- console.warn('Listening for keyboard visibility changes is not reliably supported in this browser.');
223
- // Return a no-op cleanup function.
224
- return () => { };
225
- }
226
- }
227
- }
228
-
229
- class KritzelTextTool extends KritzelBaseTool {
230
- fontFamily = 'Arial';
231
- fontSize = 16;
232
- fontColor = '#000000';
233
- palette = [
234
- '#000000',
235
- '#FFFFFF',
236
- '#FF0000',
237
- '#00FF00',
238
- '#0000FF',
239
- '#FFFF00',
240
- '#FF00FF',
241
- '#00FFFF',
242
- '#808080',
243
- '#C0C0C0',
244
- '#800000',
245
- '#008000',
246
- '#000080',
247
- '#808000',
248
- '#800080',
249
- ];
250
- constructor(core) {
251
- super(core);
252
- }
253
- handlePointerDown(event) {
254
- if (event.cancelable) {
255
- event.preventDefault();
256
- }
257
- if (event.pointerType === 'mouse') {
258
- const path = event.composedPath().slice(1);
259
- const objectElement = path.find(element => element.classList && element.classList.contains('object'));
260
- const object = this._core.findObjectById(objectElement?.id);
261
- if (object instanceof KritzelText) {
262
- this._core.store.state.activeText = object;
263
- object.focus();
264
- return;
265
- }
266
- if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
267
- this._core.store.state.activeText = object;
268
- object.focus();
269
- return;
270
- }
271
- if (this._core.store.state.activeText !== null && object instanceof KritzelText === false) {
272
- this._core.resetActiveText();
273
- this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
274
- return;
275
- }
276
- if (KritzelEventHelper.isLeftClick(event) === false) {
277
- return;
278
- }
279
- const clientX = event.clientX - this._core.store.offsetX;
280
- const clientY = event.clientY - this._core.store.offsetY;
281
- const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
282
- text.fontColor = this.fontColor;
283
- text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
284
- text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
285
- text.zIndex = this._core.store.currentZIndex;
286
- this._core.store.state.activeText = text;
287
- this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
288
- }
289
- if (event.pointerType === 'touch') {
290
- const activePointers = Array.from(this._core.store.state.pointers.values());
291
- const path = event.composedPath().slice(1);
292
- const objectElement = path.find(element => element.classList && element.classList.contains('object'));
293
- const object = this._core.findObjectById(objectElement?.id);
294
- if (object instanceof KritzelText) {
295
- this._core.store.state.activeText = object;
296
- object.focus();
297
- return;
298
- }
299
- if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
300
- this._core.store.state.activeText = object;
301
- object.focus();
302
- return;
303
- }
304
- if (this._core.store.state.activeText !== null && object instanceof KritzelText === false) {
305
- this._core.resetActiveText();
306
- this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
307
- return;
308
- }
309
- if (activePointers.length > 1) {
310
- return;
311
- }
312
- KritzelKeyboardHelper.disableInteractiveWidget();
313
- const clientX = Math.round(activePointers[0].clientX - this._core.store.offsetX);
314
- const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
315
- const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
316
- text.fontColor = this.fontColor;
317
- text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
318
- text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
319
- text.zIndex = this._core.store.currentZIndex;
320
- this._core.store.state.activeText = text;
321
- this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
322
- }
323
- }
324
- handlePointerUp(event) {
325
- if (event.cancelable) {
326
- event.preventDefault();
327
- }
328
- if (event.pointerType === 'mouse') {
329
- this._core.store.state.activeText?.updateTextareaDimensions();
330
- this._core.store.state.activeText?.focus();
331
- }
332
- if (event.pointerType === 'touch') {
333
- this._core.store.state.activeText?.updateTextareaDimensions();
334
- this._core.store.state.activeText?.focus();
335
- KritzelKeyboardHelper.enableInteractiveWidget();
336
- }
337
- }
338
- }
339
-
340
- class KritzelGeometryHelper {
341
- static doPolygonsIntersect(polygon1, polygon2) {
342
- // 1. Convert polygons to array of points for easier processing
343
- const points1 = [polygon1.bottomLeft, polygon1.bottomRight, polygon1.topRight, polygon1.topLeft];
344
- const points2 = [polygon2.bottomLeft, polygon2.bottomRight, polygon2.topRight, polygon2.topLeft];
345
- // 2. Check if any point of polygon1 is inside polygon2
346
- for (const point of points1) {
347
- if (this.isPointInPolygon(point, points2)) {
348
- return true;
349
- }
350
- }
351
- // 3. Check if any point of polygon2 is inside polygon1
352
- for (const point of points2) {
353
- if (this.isPointInPolygon(point, points1)) {
354
- return true;
355
- }
356
- }
357
- // 4. Check for edge intersections (more complex)
358
- for (let i = 0; i < points1.length; i++) {
359
- const p1a = points1[i];
360
- const p1b = points1[(i + 1) % points1.length]; // Wrap around to the first point
361
- for (let j = 0; j < points2.length; j++) {
362
- const p2a = points2[j];
363
- const p2b = points2[(j + 1) % points2.length];
364
- if (this.intersectLines(p1a, p1b, p2a, p2b)) {
365
- return true;
366
- }
367
- }
368
- }
369
- return false; // No intersection found
370
- }
371
- static isPointInPolygon(point, polygon) {
372
- let inside = false;
373
- for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
374
- const xi = polygon[i].x, yi = polygon[i].y;
375
- const xj = polygon[j].x, yj = polygon[j].y;
376
- const intersect = yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
377
- if (intersect)
378
- inside = !inside;
379
- }
380
- return inside;
381
- }
382
- static intersectLines(p1a, p1b, p2a, p2b) {
383
- const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
384
- if (det === 0) {
385
- return false; // Lines are parallel
386
- }
387
- const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
388
- const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
389
- return t >= 0 && t <= 1 && u >= 0 && u <= 1;
390
- }
391
- }
392
-
393
- class KritzelBaseObject {
394
- __class__ = 'KritzelBaseObject';
395
- _core;
396
- _elementRef;
397
- id;
398
- workspaceId;
399
- x;
400
- y;
401
- translateX;
402
- translateY;
403
- height;
404
- width;
405
- backgroundColor;
406
- borderColor;
407
- borderWidth = 0;
408
- opacity = 1;
409
- padding = 0;
410
- scale;
411
- resizing = false;
412
- rotation = 0;
413
- markedForRemoval = false;
414
- zIndex = 0;
415
- isVisible = true;
416
- isSelected = false;
417
- isHovered = false;
418
- isMounted = false;
419
- isEditable = false;
420
- isInteractive = false;
421
- isDebugInfoVisible = false;
422
- get totalWidth() {
423
- return this.width + this.padding * 2;
424
- }
425
- get totalHeight() {
426
- return this.height + this.padding * 2;
427
- }
428
- set elementRef(element) {
429
- this._elementRef = element;
430
- }
431
- get elementRef() {
432
- return this._elementRef;
433
- }
434
- get boundingBox() {
435
- return {
436
- x: this.translateX,
437
- y: this.translateY,
438
- z: this.scale,
439
- width: this.totalWidth / this.scale,
440
- height: this.totalHeight / this.scale,
441
- };
442
- }
443
- get rotatedBoundingBox() {
444
- return {
445
- x: this.minXRotated,
446
- y: this.minYRotated,
447
- z: this.scale,
448
- width: this.maxXRotated - this.minXRotated,
449
- height: this.maxYRotated - this.minYRotated,
450
- };
451
- }
452
- get rotatedPolygon() {
453
- const cx = this.translateX + this.totalWidth / 2 / this.scale;
454
- const cy = this.translateY + this.totalHeight / 2 / this.scale;
455
- const angle = this.rotation;
456
- const adjustedWidth = this.totalWidth / this.scale;
457
- const adjustedHeight = this.totalHeight / this.scale;
458
- const corners = {
459
- topLeft: { x: this.translateX, y: this.translateY },
460
- topRight: { x: this.translateX + adjustedWidth, y: this.translateY },
461
- bottomRight: { x: this.translateX + adjustedWidth, y: this.translateY + adjustedHeight },
462
- bottomLeft: { x: this.translateX, y: this.translateY + adjustedHeight },
463
- };
464
- const rotatedCorners = Object.keys(corners).reduce((acc, key) => {
465
- const corner = corners[key];
466
- const rotatedX = Math.cos(angle) * (corner.x - cx) - Math.sin(angle) * (corner.y - cy) + cx;
467
- const rotatedY = Math.sin(angle) * (corner.x - cx) + Math.cos(angle) * (corner.y - cy) + cy;
468
- acc[key] = { x: rotatedX, y: rotatedY };
469
- return acc;
470
- }, {});
471
- return rotatedCorners;
472
- }
473
- get minXRotated() {
474
- const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
475
- return Math.min(...corners);
476
- }
477
- get minYRotated() {
478
- const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
479
- return Math.min(...corners);
480
- }
481
- get maxXRotated() {
482
- const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
483
- return Math.max(...corners);
484
- }
485
- get maxYRotated() {
486
- const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
487
- return Math.max(...corners);
488
- }
489
- get transformationMatrix() {
490
- const scale = 1 / this.scale;
491
- const translateX = this.translateX;
492
- const translateY = this.translateY;
493
- return `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
494
- }
495
- get rotationDegrees() {
496
- return this.rotation * (180 / Math.PI);
497
- }
498
- get centerX() {
499
- return this.translateX + this.totalWidth / 2;
500
- }
501
- get centerY() {
502
- return this.translateY + this.totalHeight / 2;
503
- }
504
- constructor() {
505
- this.id = this.generateId();
506
- }
507
- static create(core) {
508
- const object = new KritzelBaseObject();
509
- object._core = core;
510
- object.zIndex = core.store.currentZIndex;
511
- object.workspaceId = core.store.state.activeWorkspace.id;
512
- return object;
513
- }
514
- mount(element) {
515
- if (this.isMounted) {
516
- return;
517
- }
518
- this.elementRef = element;
519
- this.isMounted = true;
520
- }
521
- unmount() {
522
- if (!this.isMounted) {
523
- return;
524
- }
525
- this.isMounted = false;
526
- }
527
- remount() {
528
- if (!this.isMounted) {
529
- return;
530
- }
531
- this.isMounted = false;
532
- }
533
- generateId() {
534
- return ObjectHelper.generateUUID();
535
- }
536
- isInViewport() {
537
- const viewportBounds = {
538
- x: -this._core.store.state.translateX / this._core.store.state.scale,
539
- y: -this._core.store.state.translateY / this._core.store.state.scale,
540
- width: this._core.store.state.viewportWidth / this._core.store.state.scale,
541
- height: this._core.store.state.viewportHeight / this._core.store.state.scale,
542
- };
543
- return (this.rotatedBoundingBox.x < viewportBounds.x + viewportBounds.width &&
544
- this.rotatedBoundingBox.x + this.rotatedBoundingBox.width > viewportBounds.x &&
545
- this.rotatedBoundingBox.y < viewportBounds.y + viewportBounds.height &&
546
- this.rotatedBoundingBox.y + this.rotatedBoundingBox.height > viewportBounds.y);
547
- }
548
- centerInViewport() {
549
- const { viewportWidth, viewportHeight, translateX: viewportTranslateX, translateY: viewportTranslateY, scale: viewportScale } = this._core.store.state;
550
- const { x, y, width, height } = this.rotatedBoundingBox;
551
- const objectCenterX = x + width / 2;
552
- const objectCenterY = y + height / 2;
553
- const targetCenterX = (viewportWidth / 2 - viewportTranslateX) / viewportScale;
554
- const targetCenterY = (viewportHeight / 2 - viewportTranslateY) / viewportScale;
555
- const deltaX = targetCenterX - objectCenterX;
556
- const deltaY = targetCenterY - objectCenterY;
557
- this.updatePosition(this.translateX + deltaX, this.translateY + deltaY);
558
- }
559
- move(startX, startY, endX, endY) {
560
- const deltaX = (startX - endX) / this._core.store.state.scale;
561
- const deltaY = (startY - endY) / this._core.store.state.scale;
562
- this.translateX += deltaX;
563
- this.translateY += deltaY;
564
- }
565
- resize(x, y, width, height) {
566
- if (width <= 1 || height <= 1) {
567
- return;
568
- }
569
- this.width = width;
570
- this.height = height;
571
- this.translateX = x;
572
- this.translateY = y;
573
- }
574
- rotate(value) {
575
- this.rotation = value;
576
- }
577
- clone() {
578
- const clone = new KritzelBaseObject();
579
- Object.assign(clone, this);
580
- return clone;
581
- }
582
- copy() {
583
- const copiedObject = Object.create(Object.getPrototypeOf(this));
584
- Object.assign(copiedObject, this);
585
- copiedObject.id = this.generateId();
586
- copiedObject.isMounted = false;
587
- return copiedObject;
588
- }
589
- onSelectedClick() {
590
- // This method can be overridden by subclasses to handle click events when the object is selected.
591
- }
592
- serialize() {
593
- const { _core, _elementRef, element, totalWidth, totalHeight, ...remainingProps } = this;
594
- const clonedProps = structuredClone(remainingProps);
595
- if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
596
- clonedProps.element = element.cloneNode(true);
597
- }
598
- return clonedProps;
599
- }
600
- deserialize(object) {
601
- Object.assign(this, object);
602
- return this;
603
- }
604
- isClass(className) {
605
- return this.__class__ === className;
606
- }
607
- edit() {
608
- // This method can be overridden by subclasses to handle edit actions.
609
- }
610
- hitTest(_x, _y) {
611
- return true; // Default implementation, can be overridden by subclasses
612
- }
613
- hitTestPolygon(polygon) {
614
- const objectPolygon = this.rotatedPolygon;
615
- return KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, polygon);
616
- }
617
- updatePosition(x, y) {
618
- this.translateX = x;
619
- this.translateY = y;
620
- this._core.store.state.objectsMap.update(this);
621
- }
622
- }
623
-
624
- class KritzelText extends KritzelBaseObject {
625
- __class__ = 'KritzelText';
626
- value = '';
627
- fontFamily = 'Arial';
628
- fontSize = 8;
629
- fontColor = '#000000';
630
- initialWidth = 3;
631
- isNew = true;
632
- isDebugInfoVisible = true;
633
- isEditable = true;
634
- rows = 1;
635
- get isReadonly() {
636
- return !(this._core.store.state.activeTool instanceof KritzelTextTool);
637
- }
638
- constructor(config) {
639
- super();
640
- if (config) {
641
- this.value = config.value || ' ';
642
- this.translateX = config.translateX || 0;
643
- this.translateY = config.translateY || 0;
644
- this.fontSize = config.fontSize || 8;
645
- this.fontFamily = config.fontFamily || 'Arial';
646
- this.fontColor = config.fontColor || '#000000';
647
- this.height = config.height || this.fontSize * 1.2;
648
- this.width = config.width || 0;
649
- this.scale = config.scale || 1;
650
- }
651
- }
652
- static create(core, fontSize, fontFamily) {
653
- const object = new KritzelText();
654
- object._core = core;
655
- object.id = object.generateId();
656
- object.workspaceId = core.store.state.activeWorkspace.id;
657
- object.fontSize = fontSize;
658
- object.fontFamily = fontFamily;
659
- object.translateX = 0;
660
- object.translateY = 0;
661
- object.width = object.initialWidth / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
662
- object.height = (object.fontSize * 1.2) / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
663
- object.padding = 5;
664
- object.backgroundColor = 'transparent';
665
- object.scale = object._core.store.state.scale;
666
- object.value = ' ';
667
- object.zIndex = core.store.currentZIndex;
668
- return object;
669
- }
670
- mount(element) {
671
- if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
672
- return;
673
- }
674
- this.elementRef = element;
675
- this.isMounted = true;
676
- }
677
- resize(x, y, width, height) {
678
- if (width <= 1 || height <= 1) {
679
- return;
680
- }
681
- const scaleFactor = height / this.height;
682
- this.fontSize = this.fontSize * scaleFactor;
683
- this.width = this.width * scaleFactor;
684
- this.height = height;
685
- this.translateX = x;
686
- this.translateY = y;
687
- }
688
- handleKeyDown(event) {
689
- if (this.isReadonly) {
690
- event.preventDefault();
691
- event.stopPropagation();
692
- }
693
- }
694
- handleInput(event) {
695
- const target = event.target;
696
- if (target.value === '') {
697
- this.value = ' ';
698
- target.value = ' ';
699
- target.selectionStart = target.selectionEnd = target.value.length;
700
- }
701
- else {
702
- this.value = target.value.trim();
703
- }
704
- this.updateTextareaDimensions();
705
- }
706
- updateTextareaDimensions() {
707
- if (this.elementRef) {
708
- const span = document.createElement('span');
709
- span.style.position = 'absolute';
710
- span.style.whiteSpace = 'pre-wrap';
711
- span.style.visibility = 'hidden';
712
- span.style.fontSize = window.getComputedStyle(this.elementRef).fontSize;
713
- span.style.fontFamily = window.getComputedStyle(this.elementRef).fontFamily;
714
- span.innerHTML = this.elementRef.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>') + '<br>';
715
- document.body.appendChild(span);
716
- const textWidth = span.offsetWidth;
717
- const textHeight = span.offsetHeight;
718
- document.body.removeChild(span);
719
- this.width = textWidth;
720
- this.height = textHeight;
721
- this._core.history.executeCommand(new UpdateObjectCommand(this._core, this, this, { ...this }));
722
- }
723
- }
724
- focus() {
725
- if (this.elementRef) {
726
- this.elementRef.focus();
727
- }
728
- }
729
- selectAll() {
730
- if (this.elementRef) {
731
- this.elementRef.select();
732
- }
733
- }
734
- insertFromClipboard() {
735
- if (this.elementRef) {
736
- this.elementRef.focus();
737
- try {
738
- navigator.clipboard.readText().then(text => {
739
- const start = this.elementRef.selectionStart;
740
- const end = this.elementRef.selectionEnd;
741
- const value = this.elementRef.value;
742
- this.value = (value.substring(0, start) + text + value.substring(end)).trim();
743
- this.elementRef.value = this.value;
744
- const length = this.elementRef.value.length;
745
- this.elementRef.setSelectionRange(length, length);
746
- this.updateTextareaDimensions();
747
- });
748
- }
749
- catch (err) {
750
- console.error('Failed to read clipboard contents:', err);
751
- }
752
- }
753
- }
754
- edit() {
755
- KritzelKeyboardHelper.disableInteractiveWidget();
756
- this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
757
- this._core.store.state.activeText = this;
758
- this._core.clearSelection();
759
- this.focus();
760
- KritzelKeyboardHelper.enableInteractiveWidget();
761
- }
762
- }
763
-
764
- var cjs = {};
765
-
766
- var hasRequiredCjs;
767
-
768
- function requireCjs () {
769
- if (hasRequiredCjs) return cjs;
770
- hasRequiredCjs = 1;
771
- (function (exports) {
772
- var pe=Object.defineProperty;var ge=e=>pe(e,"__esModule",{value:true});var de=(e,t)=>{ge(e);for(var s in t)pe(e,s,{get:t[s],enumerable:true});};de(exports,{default:()=>ve,getStroke:()=>ne,getStrokeOutlinePoints:()=>te,getStrokePoints:()=>re});function $(e,t,s,x=h=>h){return e*x(.5-t*(.5-s))}function ce(e){return [-e[0],-e[1]]}function l(e,t){return [e[0]+t[0],e[1]+t[1]]}function a(e,t){return [e[0]-t[0],e[1]-t[1]]}function b(e,t){return [e[0]*t,e[1]*t]}function xe(e,t){return [e[0]/t,e[1]/t]}function R(e){return [e[1],-e[0]]}function B(e,t){return e[0]*t[0]+e[1]*t[1]}function me(e,t){return e[0]===t[0]&&e[1]===t[1]}function Se(e){return Math.hypot(e[0],e[1])}function Pe(e){return e[0]*e[0]+e[1]*e[1]}function A(e,t){return Pe(a(e,t))}function G(e){return xe(e,Se(e))}function ae(e,t){return Math.hypot(e[1]-t[1],e[0]-t[0])}function L(e,t,s){let x=Math.sin(s),h=Math.cos(s),y=e[0]-t[0],n=e[1]-t[1],f=y*h-n*x,d=y*x+n*h;return [f+t[0],d+t[1]]}function K(e,t,s){return l(e,b(a(t,e),s))}function ee(e,t,s){return l(e,b(t,s))}var{min:C,PI:ke}=Math,le=.275,V=ke+1e-4;function te(e,t={}){let{size:s=16,smoothing:x=.5,thinning:h=.5,simulatePressure:y=true,easing:n=r=>r,start:f={},end:d={},last:D=false}=t,{cap:S=true,easing:j=r=>r*(2-r)}=f,{cap:q=true,easing:c=r=>--r*r*r+1}=d;if(e.length===0||s<=0)return [];let p=e[e.length-1].runningLength,g=f.taper===false?0:f.taper===true?Math.max(s,p):f.taper,T=d.taper===false?0:d.taper===true?Math.max(s,p):d.taper,oe=Math.pow(s*x,2),_=[],M=[],H=e.slice(0,10).reduce((r,i)=>{let o=i.pressure;if(y){let u=C(1,i.distance/s),W=C(1,1-u);o=C(1,r+(W-r)*(u*le));}return (r+o)/2},e[0].pressure),m=$(s,h,e[e.length-1].pressure,n),U,X=e[0].vector,z=e[0].point,F=z,O=z,E=F,J=false;for(let r=0;r<e.length;r++){let{pressure:i}=e[r],{point:o,vector:u,distance:W,runningLength:I}=e[r];if(r<e.length-1&&p-I<3)continue;if(h){if(y){let v=C(1,W/s),Z=C(1,1-v);i=C(1,H+(Z-H)*(v*le));}m=$(s,h,i,n);}else m=s/2;U===void 0&&(U=m);let fe=I<g?j(I/g):1,be=p-I<T?c((p-I)/T):1;m=Math.max(.01,m*Math.min(fe,be));let se=(r<e.length-1?e[r+1]:e[r]).vector,Y=r<e.length-1?B(u,se):1,he=B(u,X)<0&&!J,ue=Y!==null&&Y<0;if(he||ue){let v=b(R(X),m);for(let Z=1/13,w=0;w<=1;w+=Z)O=L(a(o,v),o,V*w),_.push(O),E=L(l(o,v),o,V*-w),M.push(E);z=O,F=E,ue&&(J=true);continue}if(J=false,r===e.length-1){let v=b(R(u),m);_.push(a(o,v)),M.push(l(o,v));continue}let ie=b(R(K(se,u,Y)),m);O=a(o,ie),(r<=1||A(z,O)>oe)&&(_.push(O),z=O),E=l(o,ie),(r<=1||A(F,E)>oe)&&(M.push(E),F=E),H=i,X=u;}let P=e[0].point.slice(0,2),k=e.length>1?e[e.length-1].point.slice(0,2):l(e[0].point,[1,1]),Q=[],N=[];if(e.length===1){if(!(g||T)||D){let r=ee(P,G(R(a(P,k))),-(U||m)),i=[];for(let o=1/13,u=o;u<=1;u+=o)i.push(L(r,P,V*2*u));return i}}else {if(!(g||T&&e.length===1))if(S)for(let i=1/13,o=i;o<=1;o+=i){let u=L(M[0],P,V*o);Q.push(u);}else {let i=a(_[0],M[0]),o=b(i,.5),u=b(i,.51);Q.push(a(P,o),a(P,u),l(P,u),l(P,o));}let r=R(ce(e[e.length-1].vector));if(T||g&&e.length===1)N.push(k);else if(q){let i=ee(k,r,m);for(let o=1/29,u=o;u<1;u+=o)N.push(L(i,k,V*3*u));}else N.push(l(k,b(r,m)),l(k,b(r,m*.99)),a(k,b(r,m*.99)),a(k,b(r,m)));}return _.concat(N,M.reverse(),Q)}function re(e,t={}){var q;let{streamline:s=.5,size:x=16,last:h=false}=t;if(e.length===0)return [];let y=.15+(1-s)*.85,n=Array.isArray(e[0])?e:e.map(({x:c,y:p,pressure:g=.5})=>[c,p,g]);if(n.length===2){let c=n[1];n=n.slice(0,-1);for(let p=1;p<5;p++)n.push(K(n[0],c,p/4));}n.length===1&&(n=[...n,[...l(n[0],[1,1]),...n[0].slice(2)]]);let f=[{point:[n[0][0],n[0][1]],pressure:n[0][2]>=0?n[0][2]:.25,vector:[1,1],distance:0,runningLength:0}],d=false,D=0,S=f[0],j=n.length-1;for(let c=1;c<n.length;c++){let p=h&&c===j?n[c].slice(0,2):K(S.point,n[c],y);if(me(S.point,p))continue;let g=ae(p,S.point);if(D+=g,c<j&&!d){if(D<x)continue;d=true;}S={point:p,pressure:n[c][2]>=0?n[c][2]:.5,vector:G(a(S.point,p)),distance:g,runningLength:D},f.push(S);}return f[0].vector=((q=f[1])==null?void 0:q.vector)||[0,0],f}function ne(e,t={}){return te(re(e,t),t)}var ve=ne;
773
- } (cjs));
774
- return cjs;
775
- }
776
-
777
- var cjsExports = requireCjs();
778
-
779
- class KritzelMathHelper {
780
- static average(a, b) {
781
- return (a + b) / 2;
782
- }
783
- }
784
-
785
- class KritzelPath extends KritzelBaseObject {
786
- __class__ = 'KritzelPath';
787
- points;
788
- d;
789
- stroke = 'none';
790
- strokeWidth;
791
- lineSlack = 0.5;
792
- fill;
793
- x = 0;
794
- y = 0;
795
- height = 0;
796
- width = 0;
797
- scale = 1;
798
- options;
799
- isVisible = true;
800
- isDebugInfoVisible = true;
801
- _adjustedPoints = null;
802
- get viewBox() {
803
- return `${this.x} ${this.y} ${this.width} ${this.height}`;
804
- }
805
- constructor(config) {
806
- super();
807
- this.options = config;
808
- this.points = config?.points ?? [];
809
- this.translateX = config?.translateX ?? 0;
810
- this.translateY = config?.translateY ?? 0;
811
- this.scale = config?.scale ?? 1;
812
- this.strokeWidth = config?.strokeWidth ?? 8;
813
- this.fill = config?.fill ?? '#000000';
814
- this.d = this.generateSvgPath();
815
- this.updateDimensions();
816
- }
817
- static create(core, options) {
818
- const object = new KritzelPath();
819
- object._core = core;
820
- object.id = object.generateId();
821
- object.workspaceId = core.store.state.activeWorkspace.id;
822
- object.options = options;
823
- object.points = options?.points ?? [];
824
- object.translateX = options?.translateX ?? 0;
825
- object.translateY = options?.translateY ?? 0;
826
- object.scale = options?.scale ?? 1;
827
- object.strokeWidth = options?.strokeWidth ?? 8;
828
- object.fill = options?.fill ?? '#000000';
829
- object.zIndex = core.store.currentZIndex;
830
- object.d = object.generateSvgPath();
831
- object.updateDimensions();
832
- return object;
833
- }
834
- resize(x, y, width, height) {
835
- if (width <= 1 || height <= 1) {
836
- return;
837
- }
838
- const scaleX = width / this.width;
839
- const scaleY = height / this.height;
840
- this.width = width;
841
- this.height = height;
842
- this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
843
- this.d = this.generateSvgPath();
844
- this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
845
- this.height = Math.max(...this.points.map(p => p[1])) - Math.min(...this.points.map(p => p[1])) + this.strokeWidth;
846
- this.x = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
847
- this.y = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
848
- this.translateX = x;
849
- this.translateY = y;
850
- this._adjustedPoints = null;
851
- }
852
- rotate(value) {
853
- this.rotation = value;
854
- this._adjustedPoints = null;
855
- }
856
- move(startX, startY, endX, endY) {
857
- const deltaX = (startX - endX) / this._core.store.state.scale;
858
- const deltaY = (startY - endY) / this._core.store.state.scale;
859
- this.translateX += deltaX;
860
- this.translateY += deltaY;
861
- this._adjustedPoints = null;
862
- }
863
- hitTest(x, y) {
864
- const halfStroke = this.strokeWidth / this.scale / 2;
865
- if (this._adjustedPoints === null) {
866
- this._adjustedPoints = this.computeAdjustedPoints();
867
- }
868
- if (this._adjustedPoints.length === 1) {
869
- const p1 = this._adjustedPoints[0];
870
- const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p1[0], p1[1]);
871
- return distance <= halfStroke;
872
- }
873
- for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
874
- const p1 = this._adjustedPoints[i];
875
- const p2 = this._adjustedPoints[i + 1];
876
- const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
877
- if (distance <= halfStroke) {
878
- return true;
879
- }
880
- }
881
- return false;
882
- }
883
- hitTestPolygon(polygon) {
884
- const halfStroke = this.strokeWidth / this.scale / 2;
885
- if (this._adjustedPoints === null) {
886
- this._adjustedPoints = this.computeAdjustedPoints();
887
- }
888
- const polyPoints = [
889
- { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
890
- { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
891
- { x: polygon.topRight.x, y: polygon.topRight.y },
892
- { x: polygon.topLeft.x, y: polygon.topLeft.y },
893
- ];
894
- for (const [px, py] of this._adjustedPoints) {
895
- if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
896
- return true;
897
- }
898
- }
899
- for (const pt of polyPoints) {
900
- if (this.hitTest(pt.x, pt.y)) {
901
- return true;
902
- }
903
- }
904
- for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
905
- const p1 = { x: this._adjustedPoints[i][0], y: this._adjustedPoints[i][1] };
906
- const p2 = { x: this._adjustedPoints[i + 1][0], y: this._adjustedPoints[i + 1][1] };
907
- for (let j = 0; j < polyPoints.length; j++) {
908
- const q1 = polyPoints[j];
909
- const q2 = polyPoints[(j + 1) % polyPoints.length];
910
- if (KritzelGeometryHelper.intersectLines(p1, p2, q1, q2)) {
911
- return true;
912
- }
913
- }
914
- }
915
- for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
916
- const p1 = this._adjustedPoints[i];
917
- const p2 = this._adjustedPoints[i + 1];
918
- for (let j = 0; j < polyPoints.length; j++) {
919
- const q1 = polyPoints[j];
920
- const q2 = polyPoints[(j + 1) % polyPoints.length];
921
- const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, p1[0], p1[1], p2[0], p2[1]);
922
- const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, p1[0], p1[1], p2[0], p2[1]);
923
- const d3 = this.pointToLineSegmentDistance(p1[0], p1[1], q1.x, q1.y, q2.x, q2.y);
924
- const d4 = this.pointToLineSegmentDistance(p2[0], p2[1], q1.x, q1.y, q2.x, q2.y);
925
- const minD = Math.min(d1, d2, d3, d4);
926
- if (minD <= halfStroke) {
927
- return true;
928
- }
929
- }
930
- }
931
- return false;
932
- }
933
- updatePosition(x, y) {
934
- this.translateX = x;
935
- this.translateY = y;
936
- this._adjustedPoints = null;
937
- this._core.store.state.objectsMap.update(this);
938
- }
939
- computeAdjustedPoints() {
940
- if (!this.points?.length) {
941
- return [];
942
- }
943
- const angle = this.rotation;
944
- const cos = Math.cos(angle);
945
- const sin = Math.sin(angle);
946
- const xs = this.points.map(p => p[0]);
947
- const ys = this.points.map(p => p[1]);
948
- const pivot = {
949
- x: (Math.min(...xs) + Math.max(...xs)) / 2,
950
- y: (Math.min(...ys) + Math.max(...ys)) / 2,
951
- };
952
- const { x: cx, y: cy } = pivot;
953
- const rotatedPoints = this.points.map(([x, y]) => {
954
- const dx = x - cx;
955
- const dy = y - cy;
956
- return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
957
- });
958
- return rotatedPoints.map(([px, py]) => [((Math.abs(px - this.x) / this.scale + this.translateX)), ((Math.abs(py - this.y) / this.scale + this.translateY))]);
959
- }
960
- pointToLineSegmentDistance(x, y, x1, y1, x2, y2) {
961
- const A = x - x1;
962
- const B = y - y1;
963
- const C = x2 - x1;
964
- const D = y2 - y1;
965
- const dot = A * C + B * D;
966
- const len_sq = C * C + D * D;
967
- let param = -1;
968
- if (len_sq !== 0) {
969
- // in case of 0 length line
970
- param = dot / len_sq;
971
- }
972
- let xx, yy;
973
- if (param < 0) {
974
- xx = x1;
975
- yy = y1;
976
- }
977
- else if (param > 1) {
978
- xx = x2;
979
- yy = y2;
980
- }
981
- else {
982
- xx = x1 + param * C;
983
- yy = y1 + param * D;
984
- }
985
- const dx = x - xx;
986
- const dy = y - yy;
987
- return Math.sqrt(dx * dx + dy * dy);
988
- }
989
- updateDimensions() {
990
- const rotatedPoints = this.points.map(([x, y]) => {
991
- const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
992
- const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
993
- return [rotatedX, rotatedY];
994
- });
995
- const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
996
- const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
997
- const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
998
- const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
999
- this.width = maxX - minX + this.lineSlack;
1000
- this.height = maxY - minY + this.lineSlack;
1001
- this.x = minX;
1002
- this.y = minY;
1003
- this.translateX = (this.x + this.translateX) / this.scale;
1004
- this.translateY = (this.y + this.translateY) / this.scale;
1005
- }
1006
- generateSvgPath() {
1007
- const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
1008
- return this.getSvgPathFromStroke(stroke);
1009
- }
1010
- getStrokeFromPoints(points, strokeWidth) {
1011
- return cjsExports.getStroke(points, {
1012
- size: strokeWidth,
1013
- thinning: 0.5,
1014
- smoothing: 0.5,
1015
- streamline: 0.5,
1016
- easing: t => t,
1017
- simulatePressure: true,
1018
- last: true,
1019
- start: {
1020
- cap: true,
1021
- taper: 0,
1022
- easing: t => t,
1023
- },
1024
- end: {
1025
- cap: true,
1026
- taper: 0,
1027
- easing: t => t,
1028
- },
1029
- });
1030
- }
1031
- getSvgPathFromStroke(points, closed = true) {
1032
- const len = points.length;
1033
- if (len < 4) {
1034
- return ``;
1035
- }
1036
- let a = points[0];
1037
- let b = points[1];
1038
- const c = points[2];
1039
- let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${KritzelMathHelper.average(b[0], c[0]).toFixed(2)},${KritzelMathHelper.average(b[1], c[1]).toFixed(2)} T`;
1040
- for (let i = 2, max = len - 1; i < max; i++) {
1041
- a = points[i];
1042
- b = points[i + 1];
1043
- result += `${KritzelMathHelper.average(a[0], b[0]).toFixed(2)},${KritzelMathHelper.average(a[1], b[1]).toFixed(2)} `;
1044
- }
1045
- if (closed) {
1046
- result += 'Z';
1047
- }
1048
- return result;
1049
- }
1050
- }
1051
-
1052
- class KritzelBrushTool extends KritzelBaseTool {
1053
- type = 'pen';
1054
- color = '#000000';
1055
- size = 6;
1056
- palettes = {
1057
- pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'],
1058
- highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
1059
- };
1060
- constructor(core) {
1061
- super(core);
1062
- }
1063
- handlePointerDown(event) {
1064
- if (event.cancelable) {
1065
- event.preventDefault();
1066
- }
1067
- if (event.pointerType === 'mouse') {
1068
- if (KritzelEventHelper.isLeftClick(event)) {
1069
- this._core.store.state.isDrawing = true;
1070
- const x = event.clientX - this._core.store.offsetX;
1071
- const y = event.clientY - this._core.store.offsetY;
1072
- this._core.store.state.currentPath = KritzelPath.create(this._core, {
1073
- points: [[x, y]],
1074
- translateX: -this._core.store.state.translateX,
1075
- translateY: -this._core.store.state.translateY,
1076
- scale: this._core.store.state.scale,
1077
- fill: this.color,
1078
- strokeWidth: this.size,
1079
- });
1080
- }
1081
- }
1082
- if (event.pointerType === 'touch') {
1083
- const activePointers = Array.from(this._core.store.state.pointers.values());
1084
- if (activePointers.length === 1) {
1085
- const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
1086
- const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
1087
- this._core.store.state.isDrawing = true;
1088
- this._core.store.state.currentPath = KritzelPath.create(this._core, {
1089
- points: [[x, y]],
1090
- translateX: -this._core.store.state.translateX,
1091
- translateY: -this._core.store.state.translateY,
1092
- scale: this._core.store.state.scale,
1093
- fill: this.color,
1094
- strokeWidth: this.size,
1095
- });
1096
- this._core.rerender();
1097
- }
1098
- }
1099
- }
1100
- handlePointerMove(event) {
1101
- if (event.cancelable) {
1102
- event.preventDefault();
1103
- }
1104
- if (event.pointerType === 'mouse') {
1105
- if (this._core.store.state.isDrawing) {
1106
- const x = event.clientX - this._core.store.offsetX;
1107
- const y = event.clientY - this._core.store.offsetY;
1108
- this._core.store.state.currentPath = KritzelPath.create(this._core, {
1109
- points: [...this._core.store.state.currentPath.points, [x, y]],
1110
- translateX: -this._core.store.state.translateX,
1111
- translateY: -this._core.store.state.translateY,
1112
- scale: this._core.store.state.scale,
1113
- fill: this.color,
1114
- strokeWidth: this.size,
1115
- });
1116
- this._core.rerender();
1117
- }
1118
- }
1119
- if (event.pointerType === 'touch') {
1120
- const activePointers = Array.from(this._core.store.state.pointers.values());
1121
- if (activePointers.length === 1) {
1122
- const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
1123
- const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
1124
- this._core.store.state.currentPath = KritzelPath.create(this._core, {
1125
- points: [...this._core.store.state.currentPath.points, [x, y]],
1126
- translateX: -this._core.store.state.translateX,
1127
- translateY: -this._core.store.state.translateY,
1128
- scale: this._core.store.state.scale,
1129
- fill: this.color,
1130
- strokeWidth: this.size,
1131
- });
1132
- this._core.rerender();
1133
- }
1134
- }
1135
- }
1136
- handlePointerUp(event) {
1137
- if (event.cancelable) {
1138
- event.preventDefault();
1139
- }
1140
- if (event.pointerType === 'mouse') {
1141
- if (this._core.store.state.isDrawing) {
1142
- this._core.store.state.isDrawing = false;
1143
- if (this._core.store.state.currentPath) {
1144
- const currentPath = this._core.store.state.currentPath;
1145
- currentPath.zIndex = this._core.store.currentZIndex;
1146
- this._core.store.state.currentPath = currentPath;
1147
- this._core.history.executeCommand(new AddObjectCommand(this._core, this, this._core.store.state.currentPath));
1148
- }
1149
- this._core.store.state.currentPath = undefined;
1150
- }
1151
- }
1152
- if (event.pointerType === 'touch') {
1153
- if (this._core.store.state.isDrawing) {
1154
- this._core.store.state.isDrawing = false;
1155
- if (this._core.store.state.currentPath) {
1156
- const currentPath = this._core.store.state.currentPath;
1157
- currentPath.zIndex = this._core.store.currentZIndex;
1158
- this._core.store.state.currentPath = currentPath;
1159
- this._core.history.executeCommand(new AddObjectCommand(this._core, this, currentPath));
1160
- }
1161
- this._core.store.state.currentPath = undefined;
1162
- this._core.rerender();
1163
- }
1164
- }
1165
- }
1166
- }
1167
-
1168
- export { AddObjectCommand as A, KritzelText as K, UpdateObjectCommand as U, KritzelPath as a, KritzelBrushTool as b, KritzelTextTool as c, KritzelKeyboardHelper as d, KritzelBaseObject as e, KritzelBaseCommand as f, KritzelBaseTool as g, KritzelEventHelper as h, KritzelToolRegistry as i };
1169
- //# sourceMappingURL=p-C5sTCwe3.js.map
1170
-
1171
- //# sourceMappingURL=p-C5sTCwe3.js.map