kritzel-stencil 0.0.140 → 0.0.142

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 (217) hide show
  1. package/dist/cjs/{index-nzUNdMPh.js → index-DcTwXs_q.js} +47 -22
  2. package/dist/cjs/index-DcTwXs_q.js.map +1 -0
  3. package/dist/cjs/index-SaGfCHX3.js +16452 -0
  4. package/dist/cjs/index-SaGfCHX3.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 +134 -96
  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/commands/add-object.command.js +1 -0
  12. package/dist/collection/classes/commands/add-object.command.js.map +1 -1
  13. package/dist/collection/classes/commands/base.command.js +2 -0
  14. package/dist/collection/classes/commands/base.command.js.map +1 -1
  15. package/dist/collection/classes/commands/remove-object.command.js +1 -3
  16. package/dist/collection/classes/commands/remove-object.command.js.map +1 -1
  17. package/dist/collection/classes/commands/update-object.command.js +2 -0
  18. package/dist/collection/classes/commands/update-object.command.js.map +1 -1
  19. package/dist/collection/classes/core/command-manager.class.js +51 -0
  20. package/dist/collection/classes/core/command-manager.class.js.map +1 -0
  21. package/dist/collection/classes/core/core.class.js +30 -14
  22. package/dist/collection/classes/core/core.class.js.map +1 -1
  23. package/dist/collection/classes/core/history.class.js +2 -40
  24. package/dist/collection/classes/core/history.class.js.map +1 -1
  25. package/dist/collection/classes/core/viewport.class.js +16 -5
  26. package/dist/collection/classes/core/viewport.class.js.map +1 -1
  27. package/dist/collection/classes/handlers/context-menu.handler.js +1 -1
  28. package/dist/collection/classes/handlers/context-menu.handler.js.map +1 -1
  29. package/dist/collection/classes/handlers/key.handler.js +2 -2
  30. package/dist/collection/classes/handlers/key.handler.js.map +1 -1
  31. package/dist/collection/classes/handlers/move.handler.js +11 -6
  32. package/dist/collection/classes/handlers/move.handler.js.map +1 -1
  33. package/dist/collection/classes/handlers/resize.handler.js +29 -5
  34. package/dist/collection/classes/handlers/resize.handler.js.map +1 -1
  35. package/dist/collection/classes/handlers/rotation.handler.js +2 -2
  36. package/dist/collection/classes/handlers/rotation.handler.js.map +1 -1
  37. package/dist/collection/classes/handlers/selection.handler.js +4 -4
  38. package/dist/collection/classes/handlers/selection.handler.js.map +1 -1
  39. package/dist/collection/classes/objects/base-object.class.js +15 -14
  40. package/dist/collection/classes/objects/base-object.class.js.map +1 -1
  41. package/dist/collection/classes/objects/custom-element.class.js +7 -1
  42. package/dist/collection/classes/objects/custom-element.class.js.map +1 -1
  43. package/dist/collection/classes/objects/text.class.js +189 -82
  44. package/dist/collection/classes/objects/text.class.js.map +1 -1
  45. package/dist/collection/classes/tools/brush-tool.class.js +2 -2
  46. package/dist/collection/classes/tools/brush-tool.class.js.map +1 -1
  47. package/dist/collection/classes/tools/eraser-tool.class.js +2 -2
  48. package/dist/collection/classes/tools/eraser-tool.class.js.map +1 -1
  49. package/dist/collection/classes/tools/image-tool.class.js +1 -1
  50. package/dist/collection/classes/tools/image-tool.class.js.map +1 -1
  51. package/dist/collection/classes/tools/selection-tool.class.js +2 -2
  52. package/dist/collection/classes/tools/selection-tool.class.js.map +1 -1
  53. package/dist/collection/classes/tools/text-tool.class.js +17 -13
  54. package/dist/collection/classes/tools/text-tool.class.js.map +1 -1
  55. package/dist/collection/collection-manifest.json +2 -2
  56. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +0 -1
  57. package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js.map +1 -1
  58. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +4 -8
  59. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js.map +1 -1
  60. package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +21 -8
  61. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +33 -37
  62. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js.map +1 -1
  63. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js +1 -2
  64. package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js.map +1 -1
  65. package/dist/collection/components/shared/kritzel-color/kritzel-color.js +3 -3
  66. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +3 -4
  67. package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js.map +1 -1
  68. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js +5 -6
  69. package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js.map +1 -1
  70. package/dist/collection/components/shared/kritzel-font/kritzel-font.js +3 -3
  71. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js +2 -3
  72. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js.map +1 -1
  73. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +2 -3
  74. package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js.map +1 -1
  75. package/dist/collection/components/shared/kritzel-icon/kritzel-icon.js +5 -5
  76. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +0 -2
  77. package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js.map +1 -1
  78. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +0 -2
  79. package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js.map +1 -1
  80. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +5 -6
  81. package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js.map +1 -1
  82. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +4 -5
  83. package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js.map +1 -1
  84. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -2
  85. package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js.map +1 -1
  86. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +3 -4
  87. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js.map +1 -1
  88. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js +0 -2
  89. package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js.map +1 -1
  90. package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js +1 -2
  91. package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js.map +1 -1
  92. package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js +1 -2
  93. package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js.map +1 -1
  94. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +1 -3
  95. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map +1 -1
  96. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js +0 -2
  97. package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js.map +1 -1
  98. package/dist/collection/interfaces/object.interface.js.map +1 -1
  99. package/dist/components/index.js +3 -3
  100. package/dist/components/kritzel-brush-style.js +4 -4
  101. package/dist/components/kritzel-color-palette.js +1 -1
  102. package/dist/components/kritzel-color.js +1 -1
  103. package/dist/components/kritzel-context-menu.js +1 -1
  104. package/dist/components/kritzel-control-brush-config.js +1 -1
  105. package/dist/components/kritzel-control-text-config.js +1 -1
  106. package/dist/components/kritzel-controls.js +1 -1
  107. package/dist/components/kritzel-cursor-trail.js +1 -1
  108. package/dist/components/kritzel-dropdown.js +1 -1
  109. package/dist/components/kritzel-editor.js +25 -25
  110. package/dist/components/kritzel-engine.js +1 -1
  111. package/dist/components/kritzel-font-family.js +1 -1
  112. package/dist/components/kritzel-font-size.js +1 -1
  113. package/dist/components/kritzel-font.js +1 -1
  114. package/dist/components/kritzel-icon.js +1 -1
  115. package/dist/components/kritzel-menu-item.js +1 -1
  116. package/dist/components/kritzel-menu.js +1 -1
  117. package/dist/components/kritzel-portal.js +1 -1
  118. package/dist/components/kritzel-split-button.js +1 -1
  119. package/dist/components/kritzel-stroke-size.js +1 -1
  120. package/dist/components/kritzel-tooltip.js +1 -1
  121. package/dist/components/kritzel-utility-panel.js +1 -1
  122. package/dist/components/kritzel-workspace-manager.js +1 -1
  123. package/dist/components/{p-BQJhnpY3.js → p-BEKicPnH.js} +3 -3
  124. package/dist/components/{p-BQJhnpY3.js.map → p-BEKicPnH.js.map} +1 -1
  125. package/dist/components/{p-D6FeQRzi.js → p-BFNwskCY.js} +4 -4
  126. package/dist/components/{p-D6FeQRzi.js.map → p-BFNwskCY.js.map} +1 -1
  127. package/dist/components/{p-sHDCqDbD.js → p-BJbN3vca.js} +6 -6
  128. package/dist/components/{p-sHDCqDbD.js.map → p-BJbN3vca.js.map} +1 -1
  129. package/dist/components/{p-bC64Ng59.js → p-ByAzDzS5.js} +3 -3
  130. package/dist/components/{p-bC64Ng59.js.map → p-ByAzDzS5.js.map} +1 -1
  131. package/dist/components/{p-CE_sOMS2.js → p-BycHaC-9.js} +4 -4
  132. package/dist/components/{p-CE_sOMS2.js.map → p-BycHaC-9.js.map} +1 -1
  133. package/dist/components/{p-SKH0G2nM.js → p-C8calcQF.js} +17 -17
  134. package/dist/components/{p-SKH0G2nM.js.map → p-C8calcQF.js.map} +1 -1
  135. package/dist/components/{p-BYanlgdq.js → p-C9hrbrUN.js} +27 -14
  136. package/dist/components/p-C9hrbrUN.js.map +1 -0
  137. package/dist/components/{p-JYqCBcMd.js → p-CEn1WeG3.js} +8 -8
  138. package/dist/components/{p-JYqCBcMd.js.map → p-CEn1WeG3.js.map} +1 -1
  139. package/dist/components/{p-C7UWRUAy.js → p-CGb-8cK4.js} +3 -3
  140. package/dist/components/{p-C7UWRUAy.js.map → p-CGb-8cK4.js.map} +1 -1
  141. package/dist/components/p-CZk591FE.js +14739 -0
  142. package/dist/components/p-CZk591FE.js.map +1 -0
  143. package/dist/components/{p-BJZudenH.js → p-C_hSH2nN.js} +3 -3
  144. package/dist/components/{p-BJZudenH.js.map → p-C_hSH2nN.js.map} +1 -1
  145. package/dist/components/{p-D2eJXNMx.js → p-CieOx1XL.js} +4 -4
  146. package/dist/components/{p-D2eJXNMx.js.map → p-CieOx1XL.js.map} +1 -1
  147. package/dist/components/{p-BFLXutiB.js → p-Co5lU_7h.js} +10 -10
  148. package/dist/components/{p-BFLXutiB.js.map → p-Co5lU_7h.js.map} +1 -1
  149. package/dist/components/{p-BV5iL9W6.js → p-CziwfEQh.js} +253 -181
  150. package/dist/components/p-CziwfEQh.js.map +1 -0
  151. package/dist/components/{p-sq9jgfX0.js → p-D27d2rKT.js} +3 -3
  152. package/dist/components/{p-sq9jgfX0.js.map → p-D27d2rKT.js.map} +1 -1
  153. package/dist/components/{p-DFO-6kuA.js → p-DPxzgBs0.js} +3 -3
  154. package/dist/components/{p-DFO-6kuA.js.map → p-DPxzgBs0.js.map} +1 -1
  155. package/dist/components/{p-vNnVlsJt.js → p-D_RcVGj0.js} +4 -4
  156. package/dist/components/{p-vNnVlsJt.js.map → p-D_RcVGj0.js.map} +1 -1
  157. package/dist/components/{p-C-ozL_Es.js → p-DqsgZIHC.js} +4 -4
  158. package/dist/components/{p-C-ozL_Es.js.map → p-DqsgZIHC.js.map} +1 -1
  159. package/dist/components/{p-Dh61W3GT.js → p-DzyZA2GT.js} +5 -5
  160. package/dist/components/{p-Dh61W3GT.js.map → p-DzyZA2GT.js.map} +1 -1
  161. package/dist/components/{p-DbmQ5DrU.js → p-dcR2uxM3.js} +5 -5
  162. package/dist/components/{p-DbmQ5DrU.js.map → p-dcR2uxM3.js.map} +1 -1
  163. package/dist/components/{p-BLc8TzcU.js → p-fiFoOjv0.js} +7 -7
  164. package/dist/components/{p-BLc8TzcU.js.map → p-fiFoOjv0.js.map} +1 -1
  165. package/dist/components/{p-IgPm36bH.js → p-gCHmJzc2.js} +4 -4
  166. package/dist/components/{p-IgPm36bH.js.map → p-gCHmJzc2.js.map} +1 -1
  167. package/dist/esm/{index-oCOlsFCN.js → index-Cw77zP6g.js} +47 -22
  168. package/dist/esm/index-Cw77zP6g.js.map +1 -0
  169. package/dist/esm/index-SIM_s7ed.js +16424 -0
  170. package/dist/esm/index-SIM_s7ed.js.map +1 -0
  171. package/dist/esm/index.js +1 -1
  172. package/dist/esm/kritzel-brush-style.entry.js +1 -1
  173. package/dist/esm/kritzel-color_22.entry.js +134 -96
  174. package/dist/esm/loader.js +3 -3
  175. package/dist/esm/stencil.js +4 -4
  176. package/dist/esm/stencil.js.map +1 -1
  177. package/dist/stencil/index.esm.js +1 -1
  178. package/dist/stencil/{p-25d1e040.entry.js → p-8b831c94.entry.js} +2 -2
  179. package/dist/stencil/p-Cw77zP6g.js +3 -0
  180. package/dist/stencil/p-Cw77zP6g.js.map +1 -0
  181. package/dist/stencil/p-SIM_s7ed.js +2 -0
  182. package/dist/stencil/p-SIM_s7ed.js.map +1 -0
  183. package/dist/stencil/p-b697b2c1.entry.js +2 -0
  184. package/dist/stencil/p-b697b2c1.entry.js.map +1 -0
  185. package/dist/stencil/stencil.esm.js +1 -1
  186. package/dist/stencil/stencil.esm.js.map +1 -1
  187. package/dist/types/classes/commands/add-object.command.d.ts +2 -2
  188. package/dist/types/classes/commands/base.command.d.ts +2 -1
  189. package/dist/types/classes/commands/remove-object.command.d.ts +2 -2
  190. package/dist/types/classes/commands/update-object.command.d.ts +2 -2
  191. package/dist/types/classes/core/command-manager.class.d.ts +16 -0
  192. package/dist/types/classes/core/core.class.d.ts +4 -0
  193. package/dist/types/classes/core/history.class.d.ts +0 -8
  194. package/dist/types/classes/core/viewport.class.d.ts +2 -0
  195. package/dist/types/classes/handlers/resize.handler.d.ts +1 -0
  196. package/dist/types/classes/objects/base-object.class.d.ts +6 -4
  197. package/dist/types/classes/objects/text.class.d.ts +33 -12
  198. package/dist/types/interfaces/object.interface.d.ts +1 -3
  199. package/dist/types/stencil-public-runtime.d.ts +36 -12
  200. package/package.json +7 -2
  201. package/dist/cjs/index-Clh2g9JM.js +0 -2850
  202. package/dist/cjs/index-Clh2g9JM.js.map +0 -1
  203. package/dist/cjs/index-nzUNdMPh.js.map +0 -1
  204. package/dist/components/p-BV5iL9W6.js.map +0 -1
  205. package/dist/components/p-BYanlgdq.js.map +0 -1
  206. package/dist/components/p-C5sTCwe3.js +0 -1171
  207. package/dist/components/p-C5sTCwe3.js.map +0 -1
  208. package/dist/esm/index-BAbkwyRx.js +0 -2822
  209. package/dist/esm/index-BAbkwyRx.js.map +0 -1
  210. package/dist/esm/index-oCOlsFCN.js.map +0 -1
  211. package/dist/stencil/p-BAbkwyRx.js +0 -2
  212. package/dist/stencil/p-BAbkwyRx.js.map +0 -1
  213. package/dist/stencil/p-fe465059.entry.js +0 -2
  214. package/dist/stencil/p-fe465059.entry.js.map +0 -1
  215. package/dist/stencil/p-oCOlsFCN.js +0 -3
  216. package/dist/stencil/p-oCOlsFCN.js.map +0 -1
  217. /package/dist/stencil/{p-25d1e040.entry.js.map → p-8b831c94.entry.js.map} +0 -0
@@ -1,2850 +0,0 @@
1
- 'use strict';
2
-
3
- class KritzelBaseCommand {
4
- _core;
5
- initiator;
6
- skipHistory;
7
- constructor(core, initiator, skipHistory = false) {
8
- this._core = core;
9
- this.initiator = initiator?.constructor?.name ?? 'Unknown';
10
- this.skipHistory = skipHistory;
11
- }
12
- execute() {
13
- throw new Error('Method not implemented.');
14
- }
15
- undo() {
16
- throw new Error('Method not implemented.');
17
- }
18
- }
19
-
20
- class UpdateObjectCommand extends KritzelBaseCommand {
21
- object;
22
- updatedProperties;
23
- previousProperties;
24
- constructor(core, initiator, object, updatedProperties, skipHistory = false) {
25
- super(core, initiator, skipHistory);
26
- this.object = object;
27
- this.updatedProperties = updatedProperties;
28
- this.previousProperties = {};
29
- for (const key in updatedProperties) {
30
- if (updatedProperties.hasOwnProperty(key)) {
31
- this.previousProperties[key] = this.object[key];
32
- }
33
- }
34
- }
35
- execute() {
36
- for (const key in this.updatedProperties) {
37
- if (this.updatedProperties.hasOwnProperty(key)) {
38
- this.object[key] = this.updatedProperties[key];
39
- }
40
- }
41
- this._core.store.state.objectsMap.update(this.object);
42
- this._core.updateObjectInDatabase(this.object);
43
- }
44
- undo() {
45
- for (const key in this.previousProperties) {
46
- if (this.previousProperties.hasOwnProperty(key)) {
47
- this.object[key] = this.previousProperties[key];
48
- }
49
- }
50
- this._core.store.state.objectsMap.update(this.object);
51
- this._core.updateObjectInDatabase(this.object);
52
- }
53
- }
54
-
55
- class KritzelToolRegistry {
56
- static registry = {};
57
- static registerTool(toolName, constructor, core) {
58
- const toolInstance = new constructor(core);
59
- toolInstance.name = toolName;
60
- this.registry[toolName] = toolInstance;
61
- return toolInstance;
62
- }
63
- static getTool(toolName) {
64
- const toolInstance = this.registry[toolName];
65
- if (!toolInstance) {
66
- console.warn(`Unknown tool: ${toolName}`);
67
- return null;
68
- }
69
- return toolInstance;
70
- }
71
- }
72
-
73
- class KritzelBaseTool {
74
- __class__ = this.constructor.name;
75
- name = 'base-tool';
76
- _core;
77
- constructor(core) {
78
- this._core = core;
79
- }
80
- onActivate() {
81
- // default implementation
82
- }
83
- onDeactivate() {
84
- // default implementation
85
- }
86
- handlePointerDown(_event) {
87
- // default implementation
88
- }
89
- handlePointerMove(_event) {
90
- // default implementation
91
- }
92
- handlePointerUp(_event) {
93
- // default implementation
94
- }
95
- handleWheel(_event) {
96
- // default implementation
97
- }
98
- serialize() {
99
- return {
100
- __class__: this.__class__,
101
- name: this.name,
102
- };
103
- }
104
- deserialize(object) {
105
- Object.assign(this, object);
106
- return this;
107
- }
108
- }
109
-
110
- class AddObjectCommand extends KritzelBaseCommand {
111
- object;
112
- constructor(core, initiator, object, skipHistory = false) {
113
- super(core, initiator, skipHistory);
114
- this.object = object;
115
- }
116
- execute() {
117
- this._core.store.state.objectsMap.insert(this.object);
118
- this._core.addObjectToDatabase(this.object);
119
- }
120
- undo() {
121
- this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
122
- this._core.deleteObjectFromDatabase(this.object.id);
123
- }
124
- }
125
-
126
- exports.KritzelMouseButton = void 0;
127
- (function (KritzelMouseButton) {
128
- KritzelMouseButton[KritzelMouseButton["Left"] = 0] = "Left";
129
- KritzelMouseButton[KritzelMouseButton["Middle"] = 1] = "Middle";
130
- KritzelMouseButton[KritzelMouseButton["Right"] = 2] = "Right";
131
- })(exports.KritzelMouseButton || (exports.KritzelMouseButton = {}));
132
-
133
- class KritzelEventHelper {
134
- static isRightClick(ev) {
135
- return ev.button === exports.KritzelMouseButton.Right;
136
- }
137
- static isLeftClick(ev) {
138
- return ev.button === exports.KritzelMouseButton.Left;
139
- }
140
- static isMainMouseWheel(event) {
141
- return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
142
- }
143
- static isPointerEventOnContextMenu(event) {
144
- const path = event.composedPath();
145
- const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));
146
- return !!contextMenu;
147
- }
148
- static onLongPress(event, onSuccess, onCancel) {
149
- const longPressTimeout = 400;
150
- const moveThreshold = 10;
151
- const startX = event.clientX;
152
- const startY = event.clientY;
153
- const target = event.target;
154
- const timer = setTimeout(() => {
155
- removeListeners();
156
- onSuccess(event);
157
- }, longPressTimeout);
158
- const cancel = () => {
159
- clearTimeout(timer);
160
- removeListeners();
161
- onCancel?.();
162
- };
163
- const onPointerMove = (e) => {
164
- if (Math.abs(e.clientX - startX) > moveThreshold || Math.abs(e.clientY - startY) > moveThreshold) {
165
- cancel();
166
- }
167
- };
168
- const onPointerUp = () => {
169
- cancel();
170
- };
171
- const onPointerCancel = () => {
172
- cancel();
173
- };
174
- const removeListeners = () => {
175
- target.removeEventListener('pointermove', onPointerMove);
176
- target.removeEventListener('pointerup', onPointerUp);
177
- target.removeEventListener('pointercancel', onPointerCancel);
178
- };
179
- target.addEventListener('pointermove', onPointerMove, { passive: true });
180
- target.addEventListener('pointerup', onPointerUp, { once: true });
181
- target.addEventListener('pointercancel', onPointerCancel, { once: true });
182
- return cancel;
183
- }
184
- }
185
-
186
- class KritzelKeyboardHelper {
187
- static forceHideKeyboard() {
188
- if (document.activeElement instanceof HTMLElement) {
189
- document.activeElement.blur();
190
- }
191
- }
192
- static enableInteractiveWidget() {
193
- const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
194
- if (meta) {
195
- let currentContent = meta.getAttribute('content');
196
- if (!currentContent.includes('interactive-widget=resizes-content')) {
197
- currentContent += ', interactive-widget=resizes-content';
198
- }
199
- meta.setAttribute('content', currentContent);
200
- }
201
- }
202
- static disableInteractiveWidget() {
203
- const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
204
- if (meta) {
205
- let currentContent = meta.getAttribute('content');
206
- let newContent = currentContent.replace(/\s*interactive-widget=resizes-content\s*[,;]?/g, '');
207
- newContent = newContent
208
- .replace(/,(\s*,)+/g, ',')
209
- .replace(/^,/, '')
210
- .replace(/,$/, '')
211
- .trim();
212
- meta.setAttribute('content', newContent);
213
- }
214
- }
215
- static onKeyboardVisibleChanged(callback) {
216
- if ('visualViewport' in window) {
217
- const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75;
218
- const onResize = (event) => {
219
- const target = event.target;
220
- const isOpen = (target.height * target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO;
221
- callback(isOpen);
222
- };
223
- window.visualViewport.addEventListener('resize', onResize);
224
- return () => window.visualViewport.removeEventListener('resize', onResize);
225
- }
226
- else {
227
- // Fallback for older browsers does not provide a reliable event-based mechanism.
228
- console.warn('Listening for keyboard visibility changes is not reliably supported in this browser.');
229
- // Return a no-op cleanup function.
230
- return () => { };
231
- }
232
- }
233
- }
234
-
235
- class KritzelTextTool extends KritzelBaseTool {
236
- fontFamily = 'Arial';
237
- fontSize = 16;
238
- fontColor = '#000000';
239
- palette = [
240
- '#000000',
241
- '#FFFFFF',
242
- '#FF0000',
243
- '#00FF00',
244
- '#0000FF',
245
- '#FFFF00',
246
- '#FF00FF',
247
- '#00FFFF',
248
- '#808080',
249
- '#C0C0C0',
250
- '#800000',
251
- '#008000',
252
- '#000080',
253
- '#808000',
254
- '#800080',
255
- ];
256
- constructor(core) {
257
- super(core);
258
- }
259
- handlePointerDown(event) {
260
- if (event.cancelable) {
261
- event.preventDefault();
262
- }
263
- if (event.pointerType === 'mouse') {
264
- const path = event.composedPath().slice(1);
265
- const objectElement = path.find(element => element.classList && element.classList.contains('object'));
266
- const object = this._core.findObjectById(objectElement?.id);
267
- if (object instanceof KritzelText) {
268
- this._core.store.state.activeText = object;
269
- object.focus();
270
- return;
271
- }
272
- if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
273
- this._core.store.state.activeText = object;
274
- object.focus();
275
- return;
276
- }
277
- if (this._core.store.state.activeText !== null && object instanceof KritzelText === false) {
278
- this._core.resetActiveText();
279
- this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
280
- return;
281
- }
282
- if (KritzelEventHelper.isLeftClick(event) === false) {
283
- return;
284
- }
285
- const clientX = event.clientX - this._core.store.offsetX;
286
- const clientY = event.clientY - this._core.store.offsetY;
287
- const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
288
- text.fontColor = this.fontColor;
289
- text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
290
- text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
291
- text.zIndex = this._core.store.currentZIndex;
292
- this._core.store.state.activeText = text;
293
- this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
294
- }
295
- if (event.pointerType === 'touch') {
296
- const activePointers = Array.from(this._core.store.state.pointers.values());
297
- const path = event.composedPath().slice(1);
298
- const objectElement = path.find(element => element.classList && element.classList.contains('object'));
299
- const object = this._core.findObjectById(objectElement?.id);
300
- if (object instanceof KritzelText) {
301
- this._core.store.state.activeText = object;
302
- object.focus();
303
- return;
304
- }
305
- if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
306
- this._core.store.state.activeText = object;
307
- object.focus();
308
- return;
309
- }
310
- if (this._core.store.state.activeText !== null && object instanceof KritzelText === false) {
311
- this._core.resetActiveText();
312
- this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
313
- return;
314
- }
315
- if (activePointers.length > 1) {
316
- return;
317
- }
318
- KritzelKeyboardHelper.disableInteractiveWidget();
319
- const clientX = Math.round(activePointers[0].clientX - this._core.store.offsetX);
320
- const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
321
- const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
322
- text.fontColor = this.fontColor;
323
- text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
324
- text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
325
- text.zIndex = this._core.store.currentZIndex;
326
- this._core.store.state.activeText = text;
327
- this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
328
- }
329
- }
330
- handlePointerUp(event) {
331
- if (event.cancelable) {
332
- event.preventDefault();
333
- }
334
- if (event.pointerType === 'mouse') {
335
- this._core.store.state.activeText?.updateTextareaDimensions();
336
- this._core.store.state.activeText?.focus();
337
- }
338
- if (event.pointerType === 'touch') {
339
- this._core.store.state.activeText?.updateTextareaDimensions();
340
- this._core.store.state.activeText?.focus();
341
- KritzelKeyboardHelper.enableInteractiveWidget();
342
- }
343
- }
344
- }
345
-
346
- class ObjectHelper {
347
- static generateUUID() {
348
- return Math.random().toString(36).substr(2, 9);
349
- }
350
- static isEmpty(obj) {
351
- if (obj === null || obj === undefined) {
352
- return true;
353
- }
354
- return Object?.keys(obj).length === 0 && obj?.constructor === Object;
355
- }
356
- }
357
-
358
- class KritzelGeometryHelper {
359
- static doPolygonsIntersect(polygon1, polygon2) {
360
- // 1. Convert polygons to array of points for easier processing
361
- const points1 = [polygon1.bottomLeft, polygon1.bottomRight, polygon1.topRight, polygon1.topLeft];
362
- const points2 = [polygon2.bottomLeft, polygon2.bottomRight, polygon2.topRight, polygon2.topLeft];
363
- // 2. Check if any point of polygon1 is inside polygon2
364
- for (const point of points1) {
365
- if (this.isPointInPolygon(point, points2)) {
366
- return true;
367
- }
368
- }
369
- // 3. Check if any point of polygon2 is inside polygon1
370
- for (const point of points2) {
371
- if (this.isPointInPolygon(point, points1)) {
372
- return true;
373
- }
374
- }
375
- // 4. Check for edge intersections (more complex)
376
- for (let i = 0; i < points1.length; i++) {
377
- const p1a = points1[i];
378
- const p1b = points1[(i + 1) % points1.length]; // Wrap around to the first point
379
- for (let j = 0; j < points2.length; j++) {
380
- const p2a = points2[j];
381
- const p2b = points2[(j + 1) % points2.length];
382
- if (this.intersectLines(p1a, p1b, p2a, p2b)) {
383
- return true;
384
- }
385
- }
386
- }
387
- return false; // No intersection found
388
- }
389
- static isPointInPolygon(point, polygon) {
390
- let inside = false;
391
- for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
392
- const xi = polygon[i].x, yi = polygon[i].y;
393
- const xj = polygon[j].x, yj = polygon[j].y;
394
- const intersect = yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
395
- if (intersect)
396
- inside = !inside;
397
- }
398
- return inside;
399
- }
400
- static intersectLines(p1a, p1b, p2a, p2b) {
401
- const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
402
- if (det === 0) {
403
- return false; // Lines are parallel
404
- }
405
- const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
406
- const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
407
- return t >= 0 && t <= 1 && u >= 0 && u <= 1;
408
- }
409
- }
410
-
411
- class KritzelBaseObject {
412
- __class__ = 'KritzelBaseObject';
413
- _core;
414
- _elementRef;
415
- id;
416
- workspaceId;
417
- x;
418
- y;
419
- translateX;
420
- translateY;
421
- height;
422
- width;
423
- backgroundColor;
424
- borderColor;
425
- borderWidth = 0;
426
- opacity = 1;
427
- padding = 0;
428
- scale;
429
- resizing = false;
430
- rotation = 0;
431
- markedForRemoval = false;
432
- zIndex = 0;
433
- isVisible = true;
434
- isSelected = false;
435
- isHovered = false;
436
- isMounted = false;
437
- isEditable = false;
438
- isInteractive = false;
439
- isDebugInfoVisible = false;
440
- get totalWidth() {
441
- return this.width + this.padding * 2;
442
- }
443
- get totalHeight() {
444
- return this.height + this.padding * 2;
445
- }
446
- set elementRef(element) {
447
- this._elementRef = element;
448
- }
449
- get elementRef() {
450
- return this._elementRef;
451
- }
452
- get boundingBox() {
453
- return {
454
- x: this.translateX,
455
- y: this.translateY,
456
- z: this.scale,
457
- width: this.totalWidth / this.scale,
458
- height: this.totalHeight / this.scale,
459
- };
460
- }
461
- get rotatedBoundingBox() {
462
- return {
463
- x: this.minXRotated,
464
- y: this.minYRotated,
465
- z: this.scale,
466
- width: this.maxXRotated - this.minXRotated,
467
- height: this.maxYRotated - this.minYRotated,
468
- };
469
- }
470
- get rotatedPolygon() {
471
- const cx = this.translateX + this.totalWidth / 2 / this.scale;
472
- const cy = this.translateY + this.totalHeight / 2 / this.scale;
473
- const angle = this.rotation;
474
- const adjustedWidth = this.totalWidth / this.scale;
475
- const adjustedHeight = this.totalHeight / this.scale;
476
- const corners = {
477
- topLeft: { x: this.translateX, y: this.translateY },
478
- topRight: { x: this.translateX + adjustedWidth, y: this.translateY },
479
- bottomRight: { x: this.translateX + adjustedWidth, y: this.translateY + adjustedHeight },
480
- bottomLeft: { x: this.translateX, y: this.translateY + adjustedHeight },
481
- };
482
- const rotatedCorners = Object.keys(corners).reduce((acc, key) => {
483
- const corner = corners[key];
484
- const rotatedX = Math.cos(angle) * (corner.x - cx) - Math.sin(angle) * (corner.y - cy) + cx;
485
- const rotatedY = Math.sin(angle) * (corner.x - cx) + Math.cos(angle) * (corner.y - cy) + cy;
486
- acc[key] = { x: rotatedX, y: rotatedY };
487
- return acc;
488
- }, {});
489
- return rotatedCorners;
490
- }
491
- get minXRotated() {
492
- const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
493
- return Math.min(...corners);
494
- }
495
- get minYRotated() {
496
- const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
497
- return Math.min(...corners);
498
- }
499
- get maxXRotated() {
500
- const corners = [this.rotatedPolygon.topLeft.x, this.rotatedPolygon.topRight.x, this.rotatedPolygon.bottomRight.x, this.rotatedPolygon.bottomLeft.x];
501
- return Math.max(...corners);
502
- }
503
- get maxYRotated() {
504
- const corners = [this.rotatedPolygon.topLeft.y, this.rotatedPolygon.topRight.y, this.rotatedPolygon.bottomRight.y, this.rotatedPolygon.bottomLeft.y];
505
- return Math.max(...corners);
506
- }
507
- get transformationMatrix() {
508
- const scale = 1 / this.scale;
509
- const translateX = this.translateX;
510
- const translateY = this.translateY;
511
- return `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
512
- }
513
- get rotationDegrees() {
514
- return this.rotation * (180 / Math.PI);
515
- }
516
- get centerX() {
517
- return this.translateX + this.totalWidth / 2;
518
- }
519
- get centerY() {
520
- return this.translateY + this.totalHeight / 2;
521
- }
522
- constructor() {
523
- this.id = this.generateId();
524
- }
525
- static create(core) {
526
- const object = new KritzelBaseObject();
527
- object._core = core;
528
- object.zIndex = core.store.currentZIndex;
529
- object.workspaceId = core.store.state.activeWorkspace.id;
530
- return object;
531
- }
532
- mount(element) {
533
- if (this.isMounted) {
534
- return;
535
- }
536
- this.elementRef = element;
537
- this.isMounted = true;
538
- }
539
- unmount() {
540
- if (!this.isMounted) {
541
- return;
542
- }
543
- this.isMounted = false;
544
- }
545
- remount() {
546
- if (!this.isMounted) {
547
- return;
548
- }
549
- this.isMounted = false;
550
- }
551
- generateId() {
552
- return ObjectHelper.generateUUID();
553
- }
554
- isInViewport() {
555
- const viewportBounds = {
556
- x: -this._core.store.state.translateX / this._core.store.state.scale,
557
- y: -this._core.store.state.translateY / this._core.store.state.scale,
558
- width: this._core.store.state.viewportWidth / this._core.store.state.scale,
559
- height: this._core.store.state.viewportHeight / this._core.store.state.scale,
560
- };
561
- return (this.rotatedBoundingBox.x < viewportBounds.x + viewportBounds.width &&
562
- this.rotatedBoundingBox.x + this.rotatedBoundingBox.width > viewportBounds.x &&
563
- this.rotatedBoundingBox.y < viewportBounds.y + viewportBounds.height &&
564
- this.rotatedBoundingBox.y + this.rotatedBoundingBox.height > viewportBounds.y);
565
- }
566
- centerInViewport() {
567
- const { viewportWidth, viewportHeight, translateX: viewportTranslateX, translateY: viewportTranslateY, scale: viewportScale } = this._core.store.state;
568
- const { x, y, width, height } = this.rotatedBoundingBox;
569
- const objectCenterX = x + width / 2;
570
- const objectCenterY = y + height / 2;
571
- const targetCenterX = (viewportWidth / 2 - viewportTranslateX) / viewportScale;
572
- const targetCenterY = (viewportHeight / 2 - viewportTranslateY) / viewportScale;
573
- const deltaX = targetCenterX - objectCenterX;
574
- const deltaY = targetCenterY - objectCenterY;
575
- this.updatePosition(this.translateX + deltaX, this.translateY + deltaY);
576
- }
577
- move(startX, startY, endX, endY) {
578
- const deltaX = (startX - endX) / this._core.store.state.scale;
579
- const deltaY = (startY - endY) / this._core.store.state.scale;
580
- this.translateX += deltaX;
581
- this.translateY += deltaY;
582
- }
583
- resize(x, y, width, height) {
584
- if (width <= 1 || height <= 1) {
585
- return;
586
- }
587
- this.width = width;
588
- this.height = height;
589
- this.translateX = x;
590
- this.translateY = y;
591
- }
592
- rotate(value) {
593
- this.rotation = value;
594
- }
595
- clone() {
596
- const clone = new KritzelBaseObject();
597
- Object.assign(clone, this);
598
- return clone;
599
- }
600
- copy() {
601
- const copiedObject = Object.create(Object.getPrototypeOf(this));
602
- Object.assign(copiedObject, this);
603
- copiedObject.id = this.generateId();
604
- copiedObject.isMounted = false;
605
- return copiedObject;
606
- }
607
- onSelectedClick() {
608
- // This method can be overridden by subclasses to handle click events when the object is selected.
609
- }
610
- serialize() {
611
- const { _core, _elementRef, element, totalWidth, totalHeight, ...remainingProps } = this;
612
- const clonedProps = structuredClone(remainingProps);
613
- if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
614
- clonedProps.element = element.cloneNode(true);
615
- }
616
- return clonedProps;
617
- }
618
- deserialize(object) {
619
- Object.assign(this, object);
620
- return this;
621
- }
622
- isClass(className) {
623
- return this.__class__ === className;
624
- }
625
- edit() {
626
- // This method can be overridden by subclasses to handle edit actions.
627
- }
628
- hitTest(_x, _y) {
629
- return true; // Default implementation, can be overridden by subclasses
630
- }
631
- hitTestPolygon(polygon) {
632
- const objectPolygon = this.rotatedPolygon;
633
- return KritzelGeometryHelper.doPolygonsIntersect(objectPolygon, polygon);
634
- }
635
- updatePosition(x, y) {
636
- this.translateX = x;
637
- this.translateY = y;
638
- this._core.store.state.objectsMap.update(this);
639
- }
640
- }
641
-
642
- class KritzelText extends KritzelBaseObject {
643
- __class__ = 'KritzelText';
644
- value = '';
645
- fontFamily = 'Arial';
646
- fontSize = 8;
647
- fontColor = '#000000';
648
- initialWidth = 3;
649
- isNew = true;
650
- isDebugInfoVisible = true;
651
- isEditable = true;
652
- rows = 1;
653
- get isReadonly() {
654
- return !(this._core.store.state.activeTool instanceof KritzelTextTool);
655
- }
656
- constructor(config) {
657
- super();
658
- if (config) {
659
- this.value = config.value || ' ';
660
- this.translateX = config.translateX || 0;
661
- this.translateY = config.translateY || 0;
662
- this.fontSize = config.fontSize || 8;
663
- this.fontFamily = config.fontFamily || 'Arial';
664
- this.fontColor = config.fontColor || '#000000';
665
- this.height = config.height || this.fontSize * 1.2;
666
- this.width = config.width || 0;
667
- this.scale = config.scale || 1;
668
- }
669
- }
670
- static create(core, fontSize, fontFamily) {
671
- const object = new KritzelText();
672
- object._core = core;
673
- object.id = object.generateId();
674
- object.workspaceId = core.store.state.activeWorkspace.id;
675
- object.fontSize = fontSize;
676
- object.fontFamily = fontFamily;
677
- object.translateX = 0;
678
- object.translateY = 0;
679
- object.width = object.initialWidth / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
680
- object.height = (object.fontSize * 1.2) / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
681
- object.padding = 5;
682
- object.backgroundColor = 'transparent';
683
- object.scale = object._core.store.state.scale;
684
- object.value = ' ';
685
- object.zIndex = core.store.currentZIndex;
686
- return object;
687
- }
688
- mount(element) {
689
- if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
690
- return;
691
- }
692
- this.elementRef = element;
693
- this.isMounted = true;
694
- }
695
- resize(x, y, width, height) {
696
- if (width <= 1 || height <= 1) {
697
- return;
698
- }
699
- const scaleFactor = height / this.height;
700
- this.fontSize = this.fontSize * scaleFactor;
701
- this.width = this.width * scaleFactor;
702
- this.height = height;
703
- this.translateX = x;
704
- this.translateY = y;
705
- }
706
- handleKeyDown(event) {
707
- if (this.isReadonly) {
708
- event.preventDefault();
709
- event.stopPropagation();
710
- }
711
- }
712
- handleInput(event) {
713
- const target = event.target;
714
- if (target.value === '') {
715
- this.value = ' ';
716
- target.value = ' ';
717
- target.selectionStart = target.selectionEnd = target.value.length;
718
- }
719
- else {
720
- this.value = target.value.trim();
721
- }
722
- this.updateTextareaDimensions();
723
- }
724
- updateTextareaDimensions() {
725
- if (this.elementRef) {
726
- const span = document.createElement('span');
727
- span.style.position = 'absolute';
728
- span.style.whiteSpace = 'pre-wrap';
729
- span.style.visibility = 'hidden';
730
- span.style.fontSize = window.getComputedStyle(this.elementRef).fontSize;
731
- span.style.fontFamily = window.getComputedStyle(this.elementRef).fontFamily;
732
- span.innerHTML = this.elementRef.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>') + '<br>';
733
- document.body.appendChild(span);
734
- const textWidth = span.offsetWidth;
735
- const textHeight = span.offsetHeight;
736
- document.body.removeChild(span);
737
- this.width = textWidth;
738
- this.height = textHeight;
739
- this._core.history.executeCommand(new UpdateObjectCommand(this._core, this, this, { ...this }));
740
- }
741
- }
742
- focus() {
743
- if (this.elementRef) {
744
- this.elementRef.focus();
745
- }
746
- }
747
- selectAll() {
748
- if (this.elementRef) {
749
- this.elementRef.select();
750
- }
751
- }
752
- insertFromClipboard() {
753
- if (this.elementRef) {
754
- this.elementRef.focus();
755
- try {
756
- navigator.clipboard.readText().then(text => {
757
- const start = this.elementRef.selectionStart;
758
- const end = this.elementRef.selectionEnd;
759
- const value = this.elementRef.value;
760
- this.value = (value.substring(0, start) + text + value.substring(end)).trim();
761
- this.elementRef.value = this.value;
762
- const length = this.elementRef.value.length;
763
- this.elementRef.setSelectionRange(length, length);
764
- this.updateTextareaDimensions();
765
- });
766
- }
767
- catch (err) {
768
- console.error('Failed to read clipboard contents:', err);
769
- }
770
- }
771
- }
772
- edit() {
773
- KritzelKeyboardHelper.disableInteractiveWidget();
774
- this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
775
- this._core.store.state.activeText = this;
776
- this._core.clearSelection();
777
- this.focus();
778
- KritzelKeyboardHelper.enableInteractiveWidget();
779
- }
780
- }
781
-
782
- var cjs = {};
783
-
784
- var hasRequiredCjs;
785
-
786
- function requireCjs () {
787
- if (hasRequiredCjs) return cjs;
788
- hasRequiredCjs = 1;
789
- (function (exports) {
790
- 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;
791
- } (cjs));
792
- return cjs;
793
- }
794
-
795
- var cjsExports = requireCjs();
796
-
797
- class KritzelMathHelper {
798
- static average(a, b) {
799
- return (a + b) / 2;
800
- }
801
- }
802
-
803
- class KritzelPath extends KritzelBaseObject {
804
- __class__ = 'KritzelPath';
805
- points;
806
- d;
807
- stroke = 'none';
808
- strokeWidth;
809
- lineSlack = 0.5;
810
- fill;
811
- x = 0;
812
- y = 0;
813
- height = 0;
814
- width = 0;
815
- scale = 1;
816
- options;
817
- isVisible = true;
818
- isDebugInfoVisible = true;
819
- _adjustedPoints = null;
820
- get viewBox() {
821
- return `${this.x} ${this.y} ${this.width} ${this.height}`;
822
- }
823
- constructor(config) {
824
- super();
825
- this.options = config;
826
- this.points = config?.points ?? [];
827
- this.translateX = config?.translateX ?? 0;
828
- this.translateY = config?.translateY ?? 0;
829
- this.scale = config?.scale ?? 1;
830
- this.strokeWidth = config?.strokeWidth ?? 8;
831
- this.fill = config?.fill ?? '#000000';
832
- this.d = this.generateSvgPath();
833
- this.updateDimensions();
834
- }
835
- static create(core, options) {
836
- const object = new KritzelPath();
837
- object._core = core;
838
- object.id = object.generateId();
839
- object.workspaceId = core.store.state.activeWorkspace.id;
840
- object.options = options;
841
- object.points = options?.points ?? [];
842
- object.translateX = options?.translateX ?? 0;
843
- object.translateY = options?.translateY ?? 0;
844
- object.scale = options?.scale ?? 1;
845
- object.strokeWidth = options?.strokeWidth ?? 8;
846
- object.fill = options?.fill ?? '#000000';
847
- object.zIndex = core.store.currentZIndex;
848
- object.d = object.generateSvgPath();
849
- object.updateDimensions();
850
- return object;
851
- }
852
- resize(x, y, width, height) {
853
- if (width <= 1 || height <= 1) {
854
- return;
855
- }
856
- const scaleX = width / this.width;
857
- const scaleY = height / this.height;
858
- this.width = width;
859
- this.height = height;
860
- this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
861
- this.d = this.generateSvgPath();
862
- this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
863
- this.height = Math.max(...this.points.map(p => p[1])) - Math.min(...this.points.map(p => p[1])) + this.strokeWidth;
864
- this.x = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
865
- this.y = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
866
- this.translateX = x;
867
- this.translateY = y;
868
- this._adjustedPoints = null;
869
- }
870
- rotate(value) {
871
- this.rotation = value;
872
- this._adjustedPoints = null;
873
- }
874
- move(startX, startY, endX, endY) {
875
- const deltaX = (startX - endX) / this._core.store.state.scale;
876
- const deltaY = (startY - endY) / this._core.store.state.scale;
877
- this.translateX += deltaX;
878
- this.translateY += deltaY;
879
- this._adjustedPoints = null;
880
- }
881
- hitTest(x, y) {
882
- const halfStroke = this.strokeWidth / this.scale / 2;
883
- if (this._adjustedPoints === null) {
884
- this._adjustedPoints = this.computeAdjustedPoints();
885
- }
886
- if (this._adjustedPoints.length === 1) {
887
- const p1 = this._adjustedPoints[0];
888
- const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p1[0], p1[1]);
889
- return distance <= halfStroke;
890
- }
891
- for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
892
- const p1 = this._adjustedPoints[i];
893
- const p2 = this._adjustedPoints[i + 1];
894
- const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
895
- if (distance <= halfStroke) {
896
- return true;
897
- }
898
- }
899
- return false;
900
- }
901
- hitTestPolygon(polygon) {
902
- const halfStroke = this.strokeWidth / this.scale / 2;
903
- if (this._adjustedPoints === null) {
904
- this._adjustedPoints = this.computeAdjustedPoints();
905
- }
906
- const polyPoints = [
907
- { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
908
- { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
909
- { x: polygon.topRight.x, y: polygon.topRight.y },
910
- { x: polygon.topLeft.x, y: polygon.topLeft.y },
911
- ];
912
- for (const [px, py] of this._adjustedPoints) {
913
- if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
914
- return true;
915
- }
916
- }
917
- for (const pt of polyPoints) {
918
- if (this.hitTest(pt.x, pt.y)) {
919
- return true;
920
- }
921
- }
922
- for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
923
- const p1 = { x: this._adjustedPoints[i][0], y: this._adjustedPoints[i][1] };
924
- const p2 = { x: this._adjustedPoints[i + 1][0], y: this._adjustedPoints[i + 1][1] };
925
- for (let j = 0; j < polyPoints.length; j++) {
926
- const q1 = polyPoints[j];
927
- const q2 = polyPoints[(j + 1) % polyPoints.length];
928
- if (KritzelGeometryHelper.intersectLines(p1, p2, q1, q2)) {
929
- return true;
930
- }
931
- }
932
- }
933
- for (let i = 0; i < this._adjustedPoints.length - 1; i++) {
934
- const p1 = this._adjustedPoints[i];
935
- const p2 = this._adjustedPoints[i + 1];
936
- for (let j = 0; j < polyPoints.length; j++) {
937
- const q1 = polyPoints[j];
938
- const q2 = polyPoints[(j + 1) % polyPoints.length];
939
- const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, p1[0], p1[1], p2[0], p2[1]);
940
- const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, p1[0], p1[1], p2[0], p2[1]);
941
- const d3 = this.pointToLineSegmentDistance(p1[0], p1[1], q1.x, q1.y, q2.x, q2.y);
942
- const d4 = this.pointToLineSegmentDistance(p2[0], p2[1], q1.x, q1.y, q2.x, q2.y);
943
- const minD = Math.min(d1, d2, d3, d4);
944
- if (minD <= halfStroke) {
945
- return true;
946
- }
947
- }
948
- }
949
- return false;
950
- }
951
- updatePosition(x, y) {
952
- this.translateX = x;
953
- this.translateY = y;
954
- this._adjustedPoints = null;
955
- this._core.store.state.objectsMap.update(this);
956
- }
957
- computeAdjustedPoints() {
958
- if (!this.points?.length) {
959
- return [];
960
- }
961
- const angle = this.rotation;
962
- const cos = Math.cos(angle);
963
- const sin = Math.sin(angle);
964
- const xs = this.points.map(p => p[0]);
965
- const ys = this.points.map(p => p[1]);
966
- const pivot = {
967
- x: (Math.min(...xs) + Math.max(...xs)) / 2,
968
- y: (Math.min(...ys) + Math.max(...ys)) / 2,
969
- };
970
- const { x: cx, y: cy } = pivot;
971
- const rotatedPoints = this.points.map(([x, y]) => {
972
- const dx = x - cx;
973
- const dy = y - cy;
974
- return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
975
- });
976
- return rotatedPoints.map(([px, py]) => [((Math.abs(px - this.x) / this.scale + this.translateX)), ((Math.abs(py - this.y) / this.scale + this.translateY))]);
977
- }
978
- pointToLineSegmentDistance(x, y, x1, y1, x2, y2) {
979
- const A = x - x1;
980
- const B = y - y1;
981
- const C = x2 - x1;
982
- const D = y2 - y1;
983
- const dot = A * C + B * D;
984
- const len_sq = C * C + D * D;
985
- let param = -1;
986
- if (len_sq !== 0) {
987
- // in case of 0 length line
988
- param = dot / len_sq;
989
- }
990
- let xx, yy;
991
- if (param < 0) {
992
- xx = x1;
993
- yy = y1;
994
- }
995
- else if (param > 1) {
996
- xx = x2;
997
- yy = y2;
998
- }
999
- else {
1000
- xx = x1 + param * C;
1001
- yy = y1 + param * D;
1002
- }
1003
- const dx = x - xx;
1004
- const dy = y - yy;
1005
- return Math.sqrt(dx * dx + dy * dy);
1006
- }
1007
- updateDimensions() {
1008
- const rotatedPoints = this.points.map(([x, y]) => {
1009
- const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
1010
- const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
1011
- return [rotatedX, rotatedY];
1012
- });
1013
- const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
1014
- const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
1015
- const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
1016
- const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
1017
- this.width = maxX - minX + this.lineSlack;
1018
- this.height = maxY - minY + this.lineSlack;
1019
- this.x = minX;
1020
- this.y = minY;
1021
- this.translateX = (this.x + this.translateX) / this.scale;
1022
- this.translateY = (this.y + this.translateY) / this.scale;
1023
- }
1024
- generateSvgPath() {
1025
- const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
1026
- return this.getSvgPathFromStroke(stroke);
1027
- }
1028
- getStrokeFromPoints(points, strokeWidth) {
1029
- return cjsExports.getStroke(points, {
1030
- size: strokeWidth,
1031
- thinning: 0.5,
1032
- smoothing: 0.5,
1033
- streamline: 0.5,
1034
- easing: t => t,
1035
- simulatePressure: true,
1036
- last: true,
1037
- start: {
1038
- cap: true,
1039
- taper: 0,
1040
- easing: t => t,
1041
- },
1042
- end: {
1043
- cap: true,
1044
- taper: 0,
1045
- easing: t => t,
1046
- },
1047
- });
1048
- }
1049
- getSvgPathFromStroke(points, closed = true) {
1050
- const len = points.length;
1051
- if (len < 4) {
1052
- return ``;
1053
- }
1054
- let a = points[0];
1055
- let b = points[1];
1056
- const c = points[2];
1057
- 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`;
1058
- for (let i = 2, max = len - 1; i < max; i++) {
1059
- a = points[i];
1060
- b = points[i + 1];
1061
- result += `${KritzelMathHelper.average(a[0], b[0]).toFixed(2)},${KritzelMathHelper.average(a[1], b[1]).toFixed(2)} `;
1062
- }
1063
- if (closed) {
1064
- result += 'Z';
1065
- }
1066
- return result;
1067
- }
1068
- }
1069
-
1070
- class KritzelImage extends KritzelBaseObject {
1071
- __class__ = 'KritzelImage';
1072
- src = '';
1073
- maxWidth = 300;
1074
- maxHeight = 300;
1075
- maxCompressionSize = 300;
1076
- isDebugInfoVisible = true;
1077
- constructor(config) {
1078
- super();
1079
- this.src = config?.src || '';
1080
- this.x = config?.x || 0;
1081
- this.y = config?.y || 0;
1082
- this.translateX = config?.translateX || 0;
1083
- this.translateY = config?.translateY || 0;
1084
- this.scale = config?.scale || 1;
1085
- }
1086
- static create(core) {
1087
- const object = new KritzelImage();
1088
- object._core = core;
1089
- object.id = object.generateId();
1090
- object.workspaceId = core.store.state.activeWorkspace.id;
1091
- object.x = 0;
1092
- object.y = 0;
1093
- object.translateX = 0;
1094
- object.translateY = 0;
1095
- object.scale = object._core.store.state.scale;
1096
- object.zIndex = core.store.currentZIndex;
1097
- return object;
1098
- }
1099
- resize(x, y, width, height) {
1100
- if (width <= 1 || height <= 1) {
1101
- return;
1102
- }
1103
- const scaleFactor = height / this.height;
1104
- this.width = this.width * scaleFactor;
1105
- this.height = this.height * scaleFactor;
1106
- this.translateX = x;
1107
- this.translateY = y;
1108
- }
1109
- calculateScaledDimensions(img) {
1110
- let scaledWidth = img.width;
1111
- let scaledHeight = img.height;
1112
- if (img.width > this.maxWidth || img.height > this.maxHeight) {
1113
- const widthRatio = this.maxWidth / img.width;
1114
- const heightRatio = this.maxHeight / img.height;
1115
- const scaleRatio = Math.min(widthRatio, heightRatio);
1116
- scaledWidth = img.width * scaleRatio;
1117
- scaledHeight = img.height * scaleRatio;
1118
- }
1119
- return { scaledWidth, scaledHeight };
1120
- }
1121
- }
1122
-
1123
- class KritzelBrushTool extends KritzelBaseTool {
1124
- type = 'pen';
1125
- color = '#000000';
1126
- size = 6;
1127
- palettes = {
1128
- pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'],
1129
- highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
1130
- };
1131
- constructor(core) {
1132
- super(core);
1133
- }
1134
- handlePointerDown(event) {
1135
- if (event.cancelable) {
1136
- event.preventDefault();
1137
- }
1138
- if (event.pointerType === 'mouse') {
1139
- if (KritzelEventHelper.isLeftClick(event)) {
1140
- this._core.store.state.isDrawing = true;
1141
- const x = event.clientX - this._core.store.offsetX;
1142
- const y = event.clientY - this._core.store.offsetY;
1143
- this._core.store.state.currentPath = KritzelPath.create(this._core, {
1144
- points: [[x, y]],
1145
- translateX: -this._core.store.state.translateX,
1146
- translateY: -this._core.store.state.translateY,
1147
- scale: this._core.store.state.scale,
1148
- fill: this.color,
1149
- strokeWidth: this.size,
1150
- });
1151
- }
1152
- }
1153
- if (event.pointerType === 'touch') {
1154
- const activePointers = Array.from(this._core.store.state.pointers.values());
1155
- if (activePointers.length === 1) {
1156
- const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
1157
- const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
1158
- this._core.store.state.isDrawing = true;
1159
- this._core.store.state.currentPath = KritzelPath.create(this._core, {
1160
- points: [[x, y]],
1161
- translateX: -this._core.store.state.translateX,
1162
- translateY: -this._core.store.state.translateY,
1163
- scale: this._core.store.state.scale,
1164
- fill: this.color,
1165
- strokeWidth: this.size,
1166
- });
1167
- this._core.rerender();
1168
- }
1169
- }
1170
- }
1171
- handlePointerMove(event) {
1172
- if (event.cancelable) {
1173
- event.preventDefault();
1174
- }
1175
- if (event.pointerType === 'mouse') {
1176
- if (this._core.store.state.isDrawing) {
1177
- const x = event.clientX - this._core.store.offsetX;
1178
- const y = event.clientY - this._core.store.offsetY;
1179
- this._core.store.state.currentPath = KritzelPath.create(this._core, {
1180
- points: [...this._core.store.state.currentPath.points, [x, y]],
1181
- translateX: -this._core.store.state.translateX,
1182
- translateY: -this._core.store.state.translateY,
1183
- scale: this._core.store.state.scale,
1184
- fill: this.color,
1185
- strokeWidth: this.size,
1186
- });
1187
- this._core.rerender();
1188
- }
1189
- }
1190
- if (event.pointerType === 'touch') {
1191
- const activePointers = Array.from(this._core.store.state.pointers.values());
1192
- if (activePointers.length === 1) {
1193
- const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
1194
- const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
1195
- this._core.store.state.currentPath = KritzelPath.create(this._core, {
1196
- points: [...this._core.store.state.currentPath.points, [x, y]],
1197
- translateX: -this._core.store.state.translateX,
1198
- translateY: -this._core.store.state.translateY,
1199
- scale: this._core.store.state.scale,
1200
- fill: this.color,
1201
- strokeWidth: this.size,
1202
- });
1203
- this._core.rerender();
1204
- }
1205
- }
1206
- }
1207
- handlePointerUp(event) {
1208
- if (event.cancelable) {
1209
- event.preventDefault();
1210
- }
1211
- if (event.pointerType === 'mouse') {
1212
- if (this._core.store.state.isDrawing) {
1213
- this._core.store.state.isDrawing = false;
1214
- if (this._core.store.state.currentPath) {
1215
- const currentPath = this._core.store.state.currentPath;
1216
- currentPath.zIndex = this._core.store.currentZIndex;
1217
- this._core.store.state.currentPath = currentPath;
1218
- this._core.history.executeCommand(new AddObjectCommand(this._core, this, this._core.store.state.currentPath));
1219
- }
1220
- this._core.store.state.currentPath = undefined;
1221
- }
1222
- }
1223
- if (event.pointerType === 'touch') {
1224
- if (this._core.store.state.isDrawing) {
1225
- this._core.store.state.isDrawing = false;
1226
- if (this._core.store.state.currentPath) {
1227
- const currentPath = this._core.store.state.currentPath;
1228
- currentPath.zIndex = this._core.store.currentZIndex;
1229
- this._core.store.state.currentPath = currentPath;
1230
- this._core.history.executeCommand(new AddObjectCommand(this._core, this, currentPath));
1231
- }
1232
- this._core.store.state.currentPath = undefined;
1233
- this._core.rerender();
1234
- }
1235
- }
1236
- }
1237
- }
1238
-
1239
- class BatchCommand extends KritzelBaseCommand {
1240
- commands;
1241
- constructor(core, initiator, commands, skipHistory = false) {
1242
- super(core, initiator, skipHistory);
1243
- this.commands = commands;
1244
- }
1245
- execute() {
1246
- this.commands.forEach(command => command.execute());
1247
- }
1248
- undo() {
1249
- this.commands.forEach(command => command.undo());
1250
- }
1251
- }
1252
-
1253
- class KritzelCustomElement extends KritzelBaseObject {
1254
- __class__ = 'KritzelCustomElement';
1255
- element;
1256
- isInteractive = true;
1257
- constructor(config) {
1258
- super();
1259
- if (config) {
1260
- this.translateX = config.translateX || 0;
1261
- this.translateY = config.translateY || 0;
1262
- this.scale = config.scale || 1;
1263
- this.element = config.element;
1264
- this.height = config.height || 0;
1265
- this.width = config.width || 0;
1266
- }
1267
- }
1268
- static create(core, config) {
1269
- const object = new KritzelCustomElement(config);
1270
- object._core = core;
1271
- object.id = object.generateId();
1272
- object.workspaceId = core.store.state.activeWorkspace.id;
1273
- return object;
1274
- }
1275
- mount(element) {
1276
- if (this.isMounted) {
1277
- return;
1278
- }
1279
- this.elementRef = element;
1280
- this.isMounted = true;
1281
- this.elementRef.appendChild(this.element);
1282
- }
1283
- resize(x, y, width, height) {
1284
- if (width <= 1 || height <= 1) {
1285
- return;
1286
- }
1287
- this.width = width;
1288
- this.height = height;
1289
- this.translateX = x;
1290
- this.translateY = y;
1291
- if (this.element) {
1292
- this.element.style.width = `${width}px`;
1293
- this.element.style.height = `${height}px`;
1294
- }
1295
- }
1296
- copy() {
1297
- const copiedObject = Object.create(Object.getPrototypeOf(this));
1298
- Object.assign(copiedObject, this);
1299
- copiedObject.id = this.generateId();
1300
- copiedObject.isMounted = false;
1301
- copiedObject.element = this.element.cloneNode(true);
1302
- return copiedObject;
1303
- }
1304
- }
1305
-
1306
- class RemoveObjectCommand extends KritzelBaseCommand {
1307
- object;
1308
- constructor(core, initiator, object, skipHistory = false) {
1309
- super(core, initiator, skipHistory);
1310
- this.object = object;
1311
- }
1312
- execute() {
1313
- this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
1314
- this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
1315
- this._core.deleteObjectFromDatabase(this.object.id);
1316
- }
1317
- undo() {
1318
- this._core.store.state.objectsMap.insert(this.object);
1319
- this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
1320
- this._core.addObjectToDatabase(this.object);
1321
- }
1322
- }
1323
-
1324
- class KritzelEraserTool extends KritzelBaseTool {
1325
- touchStartTimeout = null;
1326
- constructor(core) {
1327
- super(core);
1328
- }
1329
- handlePointerDown(event) {
1330
- if (event.pointerType === 'mouse') {
1331
- if (KritzelEventHelper.isLeftClick(event)) {
1332
- this._core.store.state.isErasing = true;
1333
- }
1334
- }
1335
- if (event.pointerType === 'touch') {
1336
- this.touchStartTimeout = setTimeout(() => {
1337
- if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling) {
1338
- this._core.store.state.isErasing = true;
1339
- }
1340
- }, 80);
1341
- }
1342
- }
1343
- handlePointerMove(event) {
1344
- if (event.pointerType === 'mouse') {
1345
- if (this._core.store.state.isErasing) {
1346
- const selectedObjects = this._core.getObjectsFromPointerEvent(event, '.object');
1347
- if (selectedObjects.length === 0)
1348
- return;
1349
- const x = this._core.store.state.pointerX;
1350
- const y = this._core.store.state.pointerY;
1351
- selectedObjects.forEach(selectedObject => {
1352
- selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
1353
- });
1354
- this._core.rerender();
1355
- }
1356
- }
1357
- if (event.pointerType === 'touch') {
1358
- if (this._core.store.state.pointers.size === 1 && this._core.store.state.isErasing) {
1359
- const shadowRoot = this._core.store.state.host?.shadowRoot;
1360
- if (!shadowRoot)
1361
- return;
1362
- const selectedObjects = this._core.getObjectsFromPointerEvent(event, '.object');
1363
- if (selectedObjects.length === 0)
1364
- return;
1365
- const x = this._core.store.state.pointerX;
1366
- const y = this._core.store.state.pointerY;
1367
- selectedObjects.forEach(selectedObject => {
1368
- selectedObject.markedForRemoval = selectedObject.hitTest(x, y);
1369
- });
1370
- this._core.rerender();
1371
- }
1372
- }
1373
- }
1374
- handlePointerUp(event) {
1375
- if (event.pointerType === 'mouse') {
1376
- if (this._core.store.state.isErasing) {
1377
- const removeCommands = this._core.store.allObjects.filter(object => object.markedForRemoval).map(object => {
1378
- object.markedForRemoval = false;
1379
- return new RemoveObjectCommand(this._core, this, object);
1380
- });
1381
- if (removeCommands.length > 0) {
1382
- this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
1383
- }
1384
- this._core.store.state.isErasing = false;
1385
- }
1386
- }
1387
- if (event.pointerType === 'touch') {
1388
- clearTimeout(this.touchStartTimeout);
1389
- if (this._core.store.state.isErasing) {
1390
- const removeCommands = this._core.store.allObjects
1391
- .filter(object => object.markedForRemoval)
1392
- .map(object => {
1393
- object.markedForRemoval = false;
1394
- return new RemoveObjectCommand(this._core, this, object);
1395
- });
1396
- if (removeCommands.length > 0) {
1397
- this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
1398
- }
1399
- this._core.store.state.isErasing = false;
1400
- }
1401
- }
1402
- }
1403
- }
1404
-
1405
- class RemoveSelectionGroupCommand extends KritzelBaseCommand {
1406
- previousSelectionGroup;
1407
- constructor(core, initiator, skipHistory = false) {
1408
- super(core, initiator, skipHistory);
1409
- this.previousSelectionGroup = this._core.store.state.selectionGroup;
1410
- }
1411
- execute() {
1412
- this._core.store.state.objectsMap.remove(object => object.id === this.previousSelectionGroup?.id);
1413
- this._core.store.state.selectionGroup = null;
1414
- }
1415
- undo() {
1416
- if (this.previousSelectionGroup) {
1417
- this._core.store.state.objectsMap.insert(this.previousSelectionGroup);
1418
- this._core.store.state.selectionGroup = this.previousSelectionGroup;
1419
- }
1420
- }
1421
- }
1422
-
1423
- class MoveSelectionGroupCommand extends KritzelBaseCommand {
1424
- selectionGroup;
1425
- startX;
1426
- startY;
1427
- endX;
1428
- endY;
1429
- skipExecution;
1430
- constructor(core, initiator, startX, startY, endX, endY, skipFirstExecution = false, skipHistory = false) {
1431
- super(core, initiator, skipHistory);
1432
- this.startX = startX;
1433
- this.startY = startY;
1434
- this.endX = endX;
1435
- this.endY = endY;
1436
- this.skipExecution = skipFirstExecution;
1437
- this.selectionGroup = this._core.store.state.selectionGroup;
1438
- }
1439
- execute() {
1440
- if (this.skipExecution) {
1441
- this.skipExecution = false;
1442
- // Skip execution, but still update objects
1443
- this._core.store.state.selectionGroup.objects.forEach(object => {
1444
- this._core.store.state.objectsMap.update(object);
1445
- this._core.updateObjectInDatabase(object);
1446
- });
1447
- return;
1448
- }
1449
- this._core.store.state.selectionGroup = this.selectionGroup;
1450
- this._core.store.state.selectionGroup.move(this.startX, this.startY, this.endX, this.endY);
1451
- this._core.store.state.selectionGroup.objects.forEach(object => {
1452
- this._core.store.state.objectsMap.update(object);
1453
- this._core.updateObjectInDatabase(object);
1454
- });
1455
- }
1456
- undo() {
1457
- this._core.store.state.selectionGroup = this.selectionGroup;
1458
- this._core.store.state.selectionGroup.move(this.endX, this.endY, this.startX, this.startY);
1459
- this._core.store.state.selectionGroup.objects.forEach(object => {
1460
- this._core.store.state.objectsMap.update(object);
1461
- this._core.updateObjectInDatabase(object);
1462
- });
1463
- }
1464
- }
1465
-
1466
- class KritzelBaseHandler {
1467
- _core;
1468
- constructor(core) {
1469
- this._core = core;
1470
- }
1471
- }
1472
-
1473
- class KritzelMoveHandler extends KritzelBaseHandler {
1474
- dragStartX;
1475
- dragStartY;
1476
- startX;
1477
- startY;
1478
- endX;
1479
- endY;
1480
- hasMoved = false;
1481
- trackedPointerId = null;
1482
- constructor(core) {
1483
- super(core);
1484
- }
1485
- reset() {
1486
- this.dragStartX = 0;
1487
- this.dragStartY = 0;
1488
- this.startX = 0;
1489
- this.startY = 0;
1490
- this.endX = 0;
1491
- this.endY = 0;
1492
- this.hasMoved = false;
1493
- this.trackedPointerId = null;
1494
- }
1495
- cancelPendingDrag() {
1496
- this._core.store.state.isDragging = false;
1497
- this.reset();
1498
- }
1499
- handlePointerDown(event) {
1500
- if (event.pointerType === 'mouse') {
1501
- if (KritzelEventHelper.isLeftClick(event)) {
1502
- if (this._core.store.state.selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
1503
- const clientX = event.clientX - this._core.store.offsetX;
1504
- const clientY = event.clientY - this._core.store.offsetY;
1505
- this._core.store.state.isDragging = true;
1506
- this.dragStartX = clientX;
1507
- this.dragStartY = clientY;
1508
- this.startX = this.dragStartX;
1509
- this.startY = this.dragStartY;
1510
- this.trackedPointerId = event.pointerId;
1511
- }
1512
- else {
1513
- this.trackedPointerId = null;
1514
- }
1515
- }
1516
- else {
1517
- this.trackedPointerId = null;
1518
- }
1519
- }
1520
- if (event.pointerType === 'touch') {
1521
- const activePointers = Array.from(this._core.store.state.pointers.values());
1522
- if (this._core.store.state.pointers.size === 1) {
1523
- if (this._core.store.state.selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected) {
1524
- const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
1525
- const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
1526
- this.dragStartX = x;
1527
- this.dragStartY = y;
1528
- this.startX = x;
1529
- this.startY = y;
1530
- this.trackedPointerId = event.pointerId;
1531
- }
1532
- else {
1533
- this.trackedPointerId = null;
1534
- }
1535
- }
1536
- }
1537
- }
1538
- handlePointerMove(event) {
1539
- if (this.trackedPointerId === null || this.trackedPointerId !== event.pointerId) {
1540
- return;
1541
- }
1542
- if (event.pointerType === 'mouse') {
1543
- if (this._core.store.state.isDragging && this._core.store.state.selectionGroup) {
1544
- const clientX = event.clientX - this._core.store.offsetX;
1545
- const clientY = event.clientY - this._core.store.offsetY;
1546
- this.endX = clientX;
1547
- this.endY = clientY;
1548
- this._core.store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
1549
- this.dragStartX = clientX;
1550
- this.dragStartY = clientY;
1551
- this.hasMoved = true;
1552
- }
1553
- }
1554
- if (event.pointerType === 'touch') {
1555
- const activePointers = Array.from(this._core.store.state.pointers.values());
1556
- if (this._core.store.state.pointers.size === 1 &&
1557
- this._core.store.state.selectionGroup &&
1558
- !this._core.store.state.isResizeHandleSelected &&
1559
- !this._core.store.state.isRotationHandleSelected) {
1560
- const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
1561
- const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
1562
- this._core.store.state.isDragging = true;
1563
- this.endX = x;
1564
- this.endY = y;
1565
- const moveDeltaX = Math.abs(x - this.startX);
1566
- const moveDeltaY = Math.abs(y - this.startY);
1567
- const moveThreshold = 5;
1568
- if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
1569
- clearTimeout(this._core.store.state.longTouchTimeout);
1570
- this._core.store.state.selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
1571
- this.dragStartX = x;
1572
- this.dragStartY = y;
1573
- this.hasMoved = true;
1574
- }
1575
- }
1576
- }
1577
- }
1578
- handlePointerUp(event) {
1579
- if (this.trackedPointerId === null || this.trackedPointerId !== event.pointerId) {
1580
- return;
1581
- }
1582
- if (event.pointerType === 'mouse') {
1583
- if (this._core.store.state.isDragging) {
1584
- this._core.store.state.isDragging = false;
1585
- if (this.hasMoved) {
1586
- this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
1587
- this._core.store.state.hasObjectsChanged = true;
1588
- }
1589
- }
1590
- }
1591
- if (event.pointerType === 'touch') {
1592
- if (this._core.store.state.isDragging) {
1593
- this._core.store.state.isDragging = false;
1594
- if (this.hasMoved) {
1595
- this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
1596
- this._core.store.state.hasObjectsChanged = true;
1597
- }
1598
- }
1599
- }
1600
- this.reset();
1601
- }
1602
- }
1603
-
1604
- var KritzelHandleType;
1605
- (function (KritzelHandleType) {
1606
- KritzelHandleType["TopLeft"] = "top-left";
1607
- KritzelHandleType["TopRight"] = "top-right";
1608
- KritzelHandleType["BottomLeft"] = "bottom-left";
1609
- KritzelHandleType["BottomRight"] = "bottom-right";
1610
- })(KritzelHandleType || (KritzelHandleType = {}));
1611
-
1612
- class ResizeSelectionGroupCommand extends KritzelBaseCommand {
1613
- newSize;
1614
- previousSize;
1615
- selectionGroup;
1616
- constructor(core, initiator, previousSize, newSize, skipHistory = false) {
1617
- super(core, initiator, skipHistory);
1618
- this.previousSize = previousSize;
1619
- this.newSize = newSize;
1620
- this.selectionGroup = this._core.store.state.selectionGroup;
1621
- }
1622
- execute() {
1623
- this._core.store.state.selectionGroup = this.selectionGroup;
1624
- this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
1625
- this._core.store.state.selectionGroup.objects.forEach(object => {
1626
- this._core.store.state.objectsMap.update(object);
1627
- this._core.updateObjectInDatabase(object);
1628
- });
1629
- }
1630
- undo() {
1631
- this._core.store.state.selectionGroup = this.selectionGroup;
1632
- this._core.store.state.selectionGroup.resize(this.previousSize.x, this.previousSize.y, this.previousSize.width, this.previousSize.height);
1633
- this._core.store.state.selectionGroup.objects.forEach(object => {
1634
- this._core.store.state.objectsMap.update(object);
1635
- this._core.updateObjectInDatabase(object);
1636
- });
1637
- }
1638
- }
1639
-
1640
- class KritzelResizeHandler extends KritzelBaseHandler {
1641
- initialMouseX = 0;
1642
- initialMouseY = 0;
1643
- initialSize = { x: 0, y: 0, width: 0, height: 0 };
1644
- newSize = { x: 0, y: 0, width: 0, height: 0 };
1645
- constructor(core) {
1646
- super(core);
1647
- }
1648
- reset() {
1649
- this.initialMouseX = 0;
1650
- this.initialMouseY = 0;
1651
- this.initialSize = { x: 0, y: 0, width: 0, height: 0 };
1652
- this.newSize = { x: 0, y: 0, width: 0, height: 0 };
1653
- }
1654
- handlePointerDown(event) {
1655
- if (event.pointerType === 'mouse') {
1656
- if (KritzelEventHelper.isLeftClick(event)) {
1657
- if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
1658
- const clientX = event.clientX - this._core.store.offsetX;
1659
- const clientY = event.clientY - this._core.store.offsetY;
1660
- this._core.store.state.isResizing = true;
1661
- this.initialMouseX = clientX;
1662
- this.initialMouseY = clientY;
1663
- this.initialSize.width = this._core.store.state.selectionGroup.width;
1664
- this.initialSize.height = this._core.store.state.selectionGroup.height;
1665
- this.initialSize.x = this._core.store.state.selectionGroup.translateX;
1666
- this.initialSize.y = this._core.store.state.selectionGroup.translateY;
1667
- }
1668
- }
1669
- }
1670
- if (event.pointerType === 'touch') {
1671
- const activePointers = Array.from(this._core.store.state.pointers.values());
1672
- const firstTouch = activePointers[0];
1673
- if (!firstTouch) {
1674
- return;
1675
- }
1676
- if (activePointers.length === 1) {
1677
- if (this._core.store.state.selectionGroup && this._core.store.state.isResizeHandleSelected) {
1678
- const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
1679
- const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
1680
- this._core.store.state.isResizing = true;
1681
- this.initialMouseX = clientX;
1682
- this.initialMouseY = clientY;
1683
- this.initialSize.width = this._core.store.state.selectionGroup.width;
1684
- this.initialSize.height = this._core.store.state.selectionGroup.height;
1685
- this.initialSize.x = this._core.store.state.selectionGroup.translateX;
1686
- this.initialSize.y = this._core.store.state.selectionGroup.translateY;
1687
- clearTimeout(this._core.store.state.longTouchTimeout);
1688
- }
1689
- }
1690
- }
1691
- }
1692
- handlePointerMove(event) {
1693
- if (event.pointerType === 'mouse') {
1694
- if (this._core.store.state.isResizing && this._core.store.state.selectionGroup) {
1695
- const clientX = event.clientX - this._core.store.offsetX;
1696
- const clientY = event.clientY - this._core.store.offsetY;
1697
- const dx = clientX - this.initialMouseX;
1698
- const dy = clientY - this.initialMouseY;
1699
- switch (this._core.store.state.resizeHandleType) {
1700
- case KritzelHandleType.TopLeft:
1701
- this.newSize.width = this.initialSize.width - dx;
1702
- this.newSize.height = this.initialSize.height - dy;
1703
- this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
1704
- this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
1705
- break;
1706
- case KritzelHandleType.TopRight:
1707
- this.newSize.width = this.initialSize.width + dx;
1708
- this.newSize.height = this.initialSize.height - dy;
1709
- this.newSize.x = this.initialSize.x;
1710
- this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
1711
- break;
1712
- case KritzelHandleType.BottomLeft:
1713
- this.newSize.width = this.initialSize.width - dx;
1714
- this.newSize.height = this.initialSize.height + dy;
1715
- this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
1716
- this.newSize.y = this.initialSize.y;
1717
- break;
1718
- case KritzelHandleType.BottomRight:
1719
- this.newSize.width = this.initialSize.width + dx;
1720
- this.newSize.height = this.initialSize.height + dy;
1721
- this.newSize.x = this.initialSize.x;
1722
- this.newSize.y = this.initialSize.y;
1723
- break;
1724
- }
1725
- this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
1726
- }
1727
- }
1728
- if (event.pointerType === 'touch') {
1729
- const activePointers = Array.from(this._core.store.state.pointers.values());
1730
- const oneFingerTouch = activePointers[0];
1731
- if (!oneFingerTouch) {
1732
- return;
1733
- }
1734
- if (this._core.store.state.isResizing && this._core.store.state.selectionGroup) {
1735
- const clientX = Math.round(oneFingerTouch.clientX - this._core.store.offsetX);
1736
- const clientY = Math.round(oneFingerTouch.clientY - this._core.store.offsetY);
1737
- const dx = clientX - this.initialMouseX;
1738
- const dy = clientY - this.initialMouseY;
1739
- switch (this._core.store.state.resizeHandleType) {
1740
- case KritzelHandleType.TopLeft:
1741
- this.newSize.width = this.initialSize.width - dx;
1742
- this.newSize.height = this.initialSize.height - dy;
1743
- this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
1744
- this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
1745
- break;
1746
- case KritzelHandleType.TopRight:
1747
- this.newSize.width = this.initialSize.width + dx;
1748
- this.newSize.height = this.initialSize.height - dy;
1749
- this.newSize.x = this.initialSize.x;
1750
- this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
1751
- break;
1752
- case KritzelHandleType.BottomLeft:
1753
- this.newSize.width = this.initialSize.width - dx;
1754
- this.newSize.height = this.initialSize.height + dy;
1755
- this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
1756
- this.newSize.y = this.initialSize.y;
1757
- break;
1758
- case KritzelHandleType.BottomRight:
1759
- this.newSize.width = this.initialSize.width + dx;
1760
- this.newSize.height = this.initialSize.height + dy;
1761
- this.newSize.x = this.initialSize.x;
1762
- this.newSize.y = this.initialSize.y;
1763
- break;
1764
- }
1765
- this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
1766
- clearTimeout(this._core.store.state.longTouchTimeout);
1767
- }
1768
- }
1769
- }
1770
- handlePointerUp(event) {
1771
- if (event.pointerType === 'mouse') {
1772
- if (this._core.store.state.isResizing) {
1773
- this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
1774
- this._core.store.state.isResizing = false;
1775
- this._core.store.state.hasObjectsChanged = true;
1776
- this.reset();
1777
- }
1778
- }
1779
- if (event.pointerType === 'touch') {
1780
- if (this._core.store.state.isResizing) {
1781
- this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
1782
- this._core.store.state.isResizing = false;
1783
- this._core.store.state.hasObjectsChanged = true;
1784
- this.reset();
1785
- clearTimeout(this._core.store.state.longTouchTimeout);
1786
- }
1787
- }
1788
- }
1789
- }
1790
-
1791
- class RotateSelectionGroupCommand extends KritzelBaseCommand {
1792
- rotation;
1793
- initialRotation;
1794
- selectionGroup;
1795
- constructor(core, initiator, rotation, initialRotation, skipHistory = false) {
1796
- super(core, initiator, skipHistory);
1797
- this.rotation = rotation;
1798
- this.initialRotation = initialRotation;
1799
- this.selectionGroup = this._core.store.state.selectionGroup;
1800
- }
1801
- execute() {
1802
- this._core.store.state.selectionGroup = this.selectionGroup;
1803
- this._core.store.state.selectionGroup.rotate(this.rotation);
1804
- this._core.store.state.selectionGroup.objects.forEach(object => {
1805
- this._core.store.state.objectsMap.update(object);
1806
- this._core.updateObjectInDatabase(object);
1807
- });
1808
- }
1809
- undo() {
1810
- this._core.store.state.selectionGroup = this.selectionGroup;
1811
- this._core.store.state.selectionGroup.rotate(this.initialRotation);
1812
- this._core.store.state.selectionGroup.objects.forEach(object => {
1813
- this._core.store.state.objectsMap.update(object);
1814
- this._core.updateObjectInDatabase(object);
1815
- });
1816
- }
1817
- }
1818
-
1819
- class KritzelRotationHandler extends KritzelBaseHandler {
1820
- initialRotation = 0;
1821
- rotation = 0;
1822
- unchangedObjects = [];
1823
- initialSelectionGroupRotation = 0;
1824
- constructor(core) {
1825
- super(core);
1826
- }
1827
- reset() {
1828
- this.initialRotation = 0;
1829
- this.rotation = 0;
1830
- this.unchangedObjects = [];
1831
- }
1832
- handlePointerDown(event) {
1833
- if (event.pointerType === 'mouse') {
1834
- if (KritzelEventHelper.isLeftClick(event)) {
1835
- if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
1836
- const clientX = event.clientX - this._core.store.offsetX;
1837
- const clientY = event.clientY - this._core.store.offsetY;
1838
- this._core.store.state.isRotating = true;
1839
- const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
1840
- const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
1841
- const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
1842
- const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
1843
- this.initialSelectionGroupRotation = this._core.store.state.selectionGroup.rotation;
1844
- this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._core.store.state.selectionGroup.rotation;
1845
- this.unchangedObjects = this._core.store.state.selectionGroup.objects.map(obj => obj.clone());
1846
- }
1847
- }
1848
- }
1849
- if (event.pointerType === 'touch') {
1850
- const activePointers = Array.from(this._core.store.state.pointers.values());
1851
- const firstTouch = activePointers[0];
1852
- if (!firstTouch) {
1853
- return;
1854
- }
1855
- if (activePointers.length === 1) {
1856
- if (this._core.store.state.selectionGroup && this._core.store.state.isRotationHandleSelected) {
1857
- const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
1858
- const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
1859
- this._core.store.state.isRotating = true;
1860
- const centerX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
1861
- const centerY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
1862
- const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
1863
- const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
1864
- this.initialSelectionGroupRotation = this._core.store.state.selectionGroup.rotation;
1865
- this.initialRotation = Math.atan2(centerY - cursorY, centerX - cursorX) - this._core.store.state.selectionGroup.rotation;
1866
- this.unchangedObjects = this._core.store.state.selectionGroup.objects.map(obj => obj.clone());
1867
- clearTimeout(this._core.store.state.longTouchTimeout);
1868
- }
1869
- }
1870
- }
1871
- }
1872
- handlePointerMove(event) {
1873
- if (event.pointerType === 'mouse') {
1874
- if (this._core.store.state.isRotating && this._core.store.state.selectionGroup) {
1875
- const clientX = event.clientX - this._core.store.offsetX;
1876
- const clientY = event.clientY - this._core.store.offsetY;
1877
- const groupCenterX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
1878
- const groupCenterY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
1879
- const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
1880
- const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
1881
- const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
1882
- this.rotation = currentRotation - this.initialRotation;
1883
- this._core.store.state.selectionGroup.rotate(this.rotation);
1884
- }
1885
- }
1886
- if (event.pointerType === 'touch') {
1887
- const activePointers = Array.from(this._core.store.state.pointers.values());
1888
- const firstTouch = activePointers[0];
1889
- if (!firstTouch) {
1890
- return;
1891
- }
1892
- if (this._core.store.state.isRotating && this._core.store.state.selectionGroup) {
1893
- const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
1894
- const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
1895
- const groupCenterX = this._core.store.state.selectionGroup.translateX + this._core.store.state.selectionGroup.width / 2 / this._core.store.state.scale;
1896
- const groupCenterY = this._core.store.state.selectionGroup.translateY + this._core.store.state.selectionGroup.height / 2 / this._core.store.state.scale;
1897
- const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
1898
- const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
1899
- const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
1900
- this.rotation = currentRotation - this.initialRotation;
1901
- this._core.store.state.selectionGroup.rotate(this.rotation);
1902
- clearTimeout(this._core.store.state.longTouchTimeout);
1903
- }
1904
- }
1905
- }
1906
- handlePointerUp(event) {
1907
- if (event.pointerType === 'mouse') {
1908
- if (this._core.store.state.isRotating) {
1909
- this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
1910
- this._core.store.state.isRotating = false;
1911
- this._core.store.state.hasObjectsChanged = true;
1912
- this.reset();
1913
- }
1914
- }
1915
- if (event.pointerType === 'touch') {
1916
- if (this._core.store.state.isRotating) {
1917
- this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
1918
- this._core.store.state.isRotating = false;
1919
- this._core.store.state.hasObjectsChanged = true;
1920
- this.reset();
1921
- clearTimeout(this._core.store.state.longTouchTimeout);
1922
- }
1923
- }
1924
- }
1925
- }
1926
-
1927
- class KrtizelSelectionBox extends KritzelBaseObject {
1928
- __class__ = 'KrtizelSelectionBox';
1929
- objects = [];
1930
- static create(core) {
1931
- const object = new KrtizelSelectionBox();
1932
- object._core = core;
1933
- object.id = object.generateId();
1934
- object.workspaceId = core.store.state.activeWorkspace.id;
1935
- object.scale = core.store.state.scale;
1936
- object.zIndex = 99999;
1937
- object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(0, 122, 255, 0.2))';
1938
- object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(0, 122, 255, 0.5))';
1939
- object.borderWidth = 2;
1940
- object.height = 0;
1941
- object.width = 0;
1942
- return object;
1943
- }
1944
- }
1945
-
1946
- class AddSelectionGroupCommand extends KritzelBaseCommand {
1947
- selectionGroup;
1948
- previousSelectionGroup;
1949
- constructor(core, initiator, selectionGroup, previousSelectionGroup, skipHistory = false) {
1950
- super(core, initiator, skipHistory);
1951
- this.selectionGroup = selectionGroup;
1952
- this.previousSelectionGroup = previousSelectionGroup || null;
1953
- }
1954
- execute() {
1955
- this._core.store.state.objectsMap.remove(object => object instanceof KrtizelSelectionBox || object instanceof KritzelSelectionGroup);
1956
- this._core.store.state.objectsMap.insert(this.selectionGroup);
1957
- this._core.store.state.selectionGroup = this.selectionGroup;
1958
- this._core.store.state.selectionBox = null;
1959
- }
1960
- undo() {
1961
- this._core.store.state.objectsMap.remove(object => object.id === this.selectionGroup.id);
1962
- this._core.store.state.selectionGroup = this.previousSelectionGroup;
1963
- this._core.store.state.selectionBox = null;
1964
- }
1965
- }
1966
-
1967
- class KritzelSelectionHandler extends KritzelBaseHandler {
1968
- startX;
1969
- startY;
1970
- touchStartX = 0;
1971
- touchStartY = 0;
1972
- touchStartTimeout = null;
1973
- get isSelectionClick() {
1974
- return this._core.store.state.selectionBox && this._core.store.state.selectionBox.width === 0 && this._core.store.state.selectionBox.height === 0;
1975
- }
1976
- get isSelectionDrag() {
1977
- return this._core.store.state.selectionBox && (this._core.store.state.selectionBox.width > 0 || this._core.store.state.selectionBox.height > 0);
1978
- }
1979
- constructor(core) {
1980
- super(core);
1981
- }
1982
- handlePointerDown(event) {
1983
- if (event.pointerType === 'mouse') {
1984
- if (KritzelEventHelper.isLeftClick(event) && !this._core.store.state.selectionGroup) {
1985
- this.startMouseSelection(event);
1986
- }
1987
- }
1988
- if (event.pointerType === 'touch') {
1989
- this.touchStartTimeout = setTimeout(() => {
1990
- if (this._core.store.state.pointers.size === 1 && !this._core.store.state.isScaling && !this._core.store.state.selectionGroup) {
1991
- this.startTouchSelection();
1992
- this.updateTouchSelection();
1993
- }
1994
- }, 80);
1995
- }
1996
- }
1997
- handlePointerMove(event) {
1998
- if (event.pointerType === 'mouse') {
1999
- if (this._core.store.state.isSelecting) {
2000
- this.updateMouseSelection(event);
2001
- }
2002
- }
2003
- if (event.pointerType === 'touch') {
2004
- const activePointers = Array.from(this._core.store.state.pointers.values());
2005
- const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
2006
- const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
2007
- const moveDeltaX = Math.abs(x - this.touchStartX);
2008
- const moveDeltaY = Math.abs(y - this.touchStartY);
2009
- const moveThreshold = 5;
2010
- if ((moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) && this._core.store.state.isSelecting) {
2011
- this.updateTouchSelection();
2012
- clearTimeout(this._core.store.state.longTouchTimeout);
2013
- }
2014
- }
2015
- }
2016
- handlePointerUp(event) {
2017
- if (event.pointerType === 'mouse') {
2018
- if (KritzelEventHelper.isLeftClick(event)) {
2019
- const hasObjectsMoved = this._core.store.state.hasObjectsChanged;
2020
- if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
2021
- this._core.store.state.selectionGroup.objects[0].edit();
2022
- }
2023
- this._core.store.state.hasObjectsChanged = false;
2024
- if (this._core.store.state.isSelecting) {
2025
- if (this.isSelectionClick) {
2026
- this.handleSelectionClick(event);
2027
- }
2028
- if (this.isSelectionDrag) {
2029
- this.updateMouseSelection(event);
2030
- this.addSelectedObjectsToSelectionGroup();
2031
- this.removeSelectionBox();
2032
- }
2033
- }
2034
- }
2035
- }
2036
- if (event.pointerType === 'touch') {
2037
- clearTimeout(this.touchStartTimeout);
2038
- const hasObjectsMoved = this._core.store.state.hasObjectsChanged;
2039
- if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
2040
- this._core.store.state.selectionGroup.objects[0].edit();
2041
- }
2042
- this._core.store.state.hasObjectsChanged = false;
2043
- if (this._core.store.state.isSelecting) {
2044
- if (this.isSelectionClick) {
2045
- this.handleSelectionClick(event);
2046
- }
2047
- if (this.isSelectionDrag) {
2048
- this.updateTouchSelection();
2049
- this.addSelectedObjectsToSelectionGroup();
2050
- this.removeSelectionBox();
2051
- }
2052
- this._core.store.state.skipContextMenu = false;
2053
- }
2054
- }
2055
- }
2056
- removeSelectionBox() {
2057
- this._core.store.state.selectionBox = null;
2058
- this._core.store.state.isSelecting = false;
2059
- this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox);
2060
- }
2061
- startMouseSelection(event) {
2062
- let clientX, clientY;
2063
- clientX = event.clientX - this._core.store.offsetX;
2064
- clientY = event.clientY - this._core.store.offsetY;
2065
- const selectionBox = KrtizelSelectionBox.create(this._core);
2066
- this.startX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
2067
- this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
2068
- selectionBox.translateX = this.startX;
2069
- selectionBox.translateY = this.startY;
2070
- this._core.store.state.selectionGroup = null;
2071
- this._core.store.state.selectionBox = selectionBox;
2072
- this._core.store.state.isSelecting = true;
2073
- this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
2074
- this._core.store.state.objectsMap.insert(selectionBox);
2075
- }
2076
- startTouchSelection() {
2077
- const activePointers = Array.from(this._core.store.state.pointers.values());
2078
- const firstTouch = activePointers[0];
2079
- if (!firstTouch) {
2080
- return;
2081
- }
2082
- let clientX, clientY;
2083
- clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
2084
- clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
2085
- this.touchStartX = clientX;
2086
- this.touchStartY = clientY;
2087
- const selectionBox = KrtizelSelectionBox.create(this._core);
2088
- this.startX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
2089
- this.startY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
2090
- selectionBox.translateX = this.startX;
2091
- selectionBox.translateY = this.startY;
2092
- this._core.store.state.selectionGroup = null;
2093
- this._core.store.state.selectionBox = selectionBox;
2094
- this._core.store.state.isSelecting = true;
2095
- this._core.store.state.objectsMap.remove(o => o instanceof KrtizelSelectionBox || o instanceof KritzelSelectionGroup);
2096
- this._core.store.state.objectsMap.insert(selectionBox);
2097
- }
2098
- updateMouseSelection(event) {
2099
- let clientX, clientY;
2100
- clientX = event.clientX - this._core.store.offsetX;
2101
- clientY = event.clientY - this._core.store.offsetY;
2102
- const selectionBox = this._core.store.state.selectionBox;
2103
- if (selectionBox) {
2104
- const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
2105
- const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
2106
- const width = Math.abs(currentX - this.startX) * selectionBox.scale;
2107
- const height = Math.abs(currentY - this.startY) * selectionBox.scale;
2108
- selectionBox.width = width;
2109
- selectionBox.height = height;
2110
- selectionBox.translateX = Math.min(currentX, this.startX);
2111
- selectionBox.translateY = Math.min(currentY, this.startY);
2112
- if (width > 0 || height > 0) {
2113
- this.updateSelectedObjects();
2114
- }
2115
- else {
2116
- this.clearSelectionPreview();
2117
- }
2118
- }
2119
- }
2120
- updateTouchSelection() {
2121
- const activePointers = Array.from(this._core.store.state.pointers.values());
2122
- const firstTouch = activePointers[0];
2123
- if (!firstTouch) {
2124
- return;
2125
- }
2126
- let clientX, clientY;
2127
- clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
2128
- clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
2129
- const selectionBox = this._core.store.state.selectionBox;
2130
- if (selectionBox) {
2131
- const currentX = (clientX - this._core.store.state.translateX) / selectionBox.scale;
2132
- const currentY = (clientY - this._core.store.state.translateY) / selectionBox.scale;
2133
- const width = Math.abs(currentX - this.startX) * selectionBox.scale;
2134
- const height = Math.abs(currentY - this.startY) * selectionBox.scale;
2135
- selectionBox.width = width;
2136
- selectionBox.height = height;
2137
- selectionBox.translateX = Math.min(currentX, this.startX);
2138
- selectionBox.translateY = Math.min(currentY, this.startY);
2139
- if (width > 0 || height > 0) {
2140
- this.updateSelectedObjects();
2141
- }
2142
- else {
2143
- this.clearSelectionPreview();
2144
- }
2145
- }
2146
- }
2147
- updateSelectedObjects() {
2148
- this._core.store.allObjects
2149
- .filter(o => !(o instanceof KrtizelSelectionBox))
2150
- .forEach(object => (object.isSelected = object.hitTestPolygon(this._core.store.state.selectionBox.rotatedPolygon)));
2151
- }
2152
- handleSelectionClick(event) {
2153
- const selectedObject = this.getTopmostHitObject(event);
2154
- this.clearSelectionPreview();
2155
- this.addObjectToSelectionGroup(selectedObject);
2156
- this.removeSelectionBox();
2157
- }
2158
- getTopmostHitObject(event) {
2159
- const pointerX = this._core.store.state.pointerX;
2160
- const pointerY = this._core.store.state.pointerY;
2161
- const overlappingObjects = this._core.getObjectsFromPointerEvent(event, '.object');
2162
- for (const object of overlappingObjects) {
2163
- if (object.hitTest(pointerX, pointerY)) {
2164
- return object;
2165
- }
2166
- }
2167
- return null;
2168
- }
2169
- clearSelectionPreview() {
2170
- this._core.store.allNonSelectionObjects.forEach(object => {
2171
- object.isSelected = false;
2172
- });
2173
- }
2174
- addObjectToSelectionGroup(object) {
2175
- if (!object) {
2176
- return;
2177
- }
2178
- object.isSelected = false;
2179
- const selectionGroup = KritzelSelectionGroup.create(this._core);
2180
- selectionGroup.addOrRemove(object);
2181
- selectionGroup.isSelected = true;
2182
- selectionGroup.rotation = object.rotation;
2183
- this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
2184
- }
2185
- addSelectedObjectsToSelectionGroup() {
2186
- const selectedObjects = this._core.store.selectedObjects;
2187
- if (selectedObjects.length === 0) {
2188
- return;
2189
- }
2190
- this._core.store.state.selectionGroup = KritzelSelectionGroup.create(this._core);
2191
- selectedObjects.forEach(o => {
2192
- this._core.store.state.selectionGroup.addOrRemove(o);
2193
- o.isSelected = false;
2194
- });
2195
- const selectionGroup = this._core.store.state.selectionGroup;
2196
- selectionGroup.isSelected = true;
2197
- if (selectionGroup.length === 1) {
2198
- selectionGroup.rotation = selectionGroup.objects[0].rotation;
2199
- }
2200
- this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
2201
- }
2202
- }
2203
-
2204
- class KritzelHoverHandler extends KritzelBaseHandler {
2205
- constructor(core) {
2206
- super(core);
2207
- }
2208
- handlePointerMove(event) {
2209
- if (event.pointerType === 'mouse') {
2210
- const hoveredObject = this._core.getObjectFromPointerEvent(event, '.object');
2211
- if (!hoveredObject)
2212
- return;
2213
- const x = this._core.store.state.pointerX;
2214
- const y = this._core.store.state.pointerY;
2215
- hoveredObject.isHovered = hoveredObject.hitTest(x, y);
2216
- }
2217
- }
2218
- }
2219
-
2220
- class KritzelSelectionTool extends KritzelBaseTool {
2221
- selectionHandler;
2222
- moveHandler;
2223
- hoverHandler;
2224
- resizeHandler;
2225
- rotationHandler;
2226
- constructor(core) {
2227
- super(core);
2228
- this.selectionHandler = new KritzelSelectionHandler(this._core);
2229
- this.moveHandler = new KritzelMoveHandler(this._core);
2230
- this.hoverHandler = new KritzelHoverHandler(this._core);
2231
- this.resizeHandler = new KritzelResizeHandler(this._core);
2232
- this.rotationHandler = new KritzelRotationHandler(this._core);
2233
- }
2234
- handlePointerDown(event) {
2235
- if (event.cancelable) {
2236
- event.preventDefault();
2237
- }
2238
- if (event.pointerType === 'mouse') {
2239
- if (KritzelEventHelper.isLeftClick(event)) {
2240
- this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
2241
- this._core.store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
2242
- this._core.store.state.resizeHandleType = this.getHandleType(event);
2243
- const selectedObject = this.getSelectedObject(event);
2244
- const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
2245
- if ((selectedObject === null || isDifferentObject) &&
2246
- this._core.store.state.selectionGroup &&
2247
- !this._core.store.state.isResizeHandleSelected &&
2248
- !this._core.store.state.isRotationHandleSelected) {
2249
- this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
2250
- }
2251
- if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1 && selectedObject.objects[0].isInteractive) {
2252
- return;
2253
- }
2254
- }
2255
- this.moveHandler.handlePointerDown(event);
2256
- this.selectionHandler.handlePointerDown(event);
2257
- this.resizeHandler.handlePointerDown(event);
2258
- this.rotationHandler.handlePointerDown(event);
2259
- this._core.rerender();
2260
- }
2261
- if (event.pointerType === 'touch') {
2262
- if (this._core.store.state.isScaling === true) {
2263
- return;
2264
- }
2265
- if (this._core.store.state.pointers.size === 1) {
2266
- this._core.store.state.isResizeHandleSelected = this.isHandleSelected(event);
2267
- this._core.store.state.isRotationHandleSelected = this.isRotationHandleSelected(event);
2268
- this._core.store.state.resizeHandleType = this.getHandleType(event);
2269
- const selectedObject = this.getSelectedObject(event);
2270
- const isDifferentObject = selectedObject && this._core.store.state.selectionGroup && selectedObject.id !== this._core.store.state.selectionGroup.id;
2271
- if (!this._core.store.state.selectionGroup && selectedObject) {
2272
- this._core.store.state.skipContextMenu = true;
2273
- }
2274
- if ((selectedObject === null || isDifferentObject) &&
2275
- this._core.store.state.selectionGroup &&
2276
- !this._core.store.state.isResizeHandleSelected &&
2277
- !this._core.store.state.isRotationHandleSelected) {
2278
- this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
2279
- }
2280
- }
2281
- this.rotationHandler.handlePointerDown(event);
2282
- this.resizeHandler.handlePointerDown(event);
2283
- this.moveHandler.handlePointerDown(event);
2284
- this.selectionHandler.handlePointerDown(event);
2285
- this._core.rerender();
2286
- }
2287
- }
2288
- handlePointerMove(event) {
2289
- if (event.cancelable) {
2290
- event.preventDefault();
2291
- }
2292
- if (event.pointerType === 'mouse') {
2293
- this.moveHandler.handlePointerMove(event);
2294
- this.hoverHandler.handlePointerMove(event);
2295
- this.selectionHandler.handlePointerMove(event);
2296
- this.resizeHandler.handlePointerMove(event);
2297
- this.rotationHandler.handlePointerMove(event);
2298
- this._core.rerender();
2299
- }
2300
- if (event.pointerType === 'touch') {
2301
- if (this._core.store.state.isScaling === true) {
2302
- return;
2303
- }
2304
- this.rotationHandler.handlePointerMove(event);
2305
- this.resizeHandler.handlePointerMove(event);
2306
- this.moveHandler.handlePointerMove(event);
2307
- this.selectionHandler.handlePointerMove(event);
2308
- this._core.rerender();
2309
- }
2310
- }
2311
- handlePointerUp(event) {
2312
- if (event.cancelable) {
2313
- event.preventDefault();
2314
- }
2315
- if (event.pointerType === 'mouse') {
2316
- this.moveHandler.handlePointerUp(event);
2317
- this.resizeHandler.handlePointerUp(event);
2318
- this.rotationHandler.handlePointerUp(event);
2319
- this.selectionHandler.handlePointerUp(event);
2320
- this._core.rerender();
2321
- }
2322
- if (event.pointerType === 'touch') {
2323
- if (this._core.store.state.isScaling === true) {
2324
- return;
2325
- }
2326
- this.rotationHandler.handlePointerUp(event);
2327
- this.resizeHandler.handlePointerUp(event);
2328
- this.moveHandler.handlePointerUp(event);
2329
- this.selectionHandler.handlePointerUp(event);
2330
- this._core.rerender();
2331
- }
2332
- }
2333
- getSelectedObject(event) {
2334
- const path = event.composedPath().slice(1);
2335
- const objectElement = path.find(element => element.classList && element.classList.contains('object'));
2336
- const object = this._core.findObjectById(objectElement?.id);
2337
- if (!object) {
2338
- return null;
2339
- }
2340
- if (object instanceof KritzelSelectionGroup) {
2341
- return object;
2342
- }
2343
- else {
2344
- const group = KritzelSelectionGroup.create(this._core);
2345
- group.translateX = 0;
2346
- group.translateY = 0;
2347
- group.addOrRemove(object);
2348
- return group;
2349
- }
2350
- }
2351
- getHandleType(event) {
2352
- const shadowRoot = this._core.store.state.host?.shadowRoot;
2353
- if (!shadowRoot)
2354
- return;
2355
- const elementAtPoint = shadowRoot.elementFromPoint(event.clientX, event.clientY);
2356
- const handle = elementAtPoint?.closest('.resize-handle-overlay');
2357
- return handle?.classList[1];
2358
- }
2359
- isHandleSelected(event) {
2360
- const shadowRoot = this._core.store.state.host?.shadowRoot;
2361
- if (!shadowRoot)
2362
- return false;
2363
- const elementAtPoint = shadowRoot.elementFromPoint(event.clientX, event.clientY);
2364
- return !!elementAtPoint?.classList.contains('resize-handle-overlay');
2365
- }
2366
- isRotationHandleSelected(event) {
2367
- const path = event.composedPath();
2368
- return !!path.find(element => element.classList && element.classList.contains('rotation-handle-overlay'));
2369
- }
2370
- }
2371
-
2372
- const DEFAULT_BRUSH_CONFIG = {
2373
- type: 'pen',
2374
- color: '#000000',
2375
- size: 16,
2376
- palettes: {
2377
- pen: [
2378
- '#000000',
2379
- '#ff5252',
2380
- '#ffbc00',
2381
- '#00c853',
2382
- '#0000FF',
2383
- '#d500f9',
2384
- '#fafafa',
2385
- '#a52714',
2386
- '#ee8100',
2387
- '#558b2f',
2388
- '#01579b',
2389
- '#8e24aa',
2390
- '#90a4ae',
2391
- '#ff4081',
2392
- '#ff6e40',
2393
- '#aeea00',
2394
- '#304ffe',
2395
- '#7c4dff',
2396
- '#cfd8dc',
2397
- '#f8bbd0',
2398
- '#ffccbc',
2399
- '#f0f4c3',
2400
- '#9fa8da',
2401
- '#d1c4e9',
2402
- ],
2403
- highlighter: [
2404
- '#0000006e',
2405
- '#ff52526e',
2406
- '#ffbb006e',
2407
- '#00c8536e',
2408
- '#0000FF6e',
2409
- '#d500f96e',
2410
- '#fafafa6e',
2411
- '#a527146e',
2412
- '#ee81006e',
2413
- '#558b2f6e',
2414
- '#01579b6e',
2415
- '#8e24aa6e',
2416
- '#90a4ae6e',
2417
- '#ff40816e',
2418
- '#ff6e406e',
2419
- '#aeea006e',
2420
- '#304ffe6e',
2421
- '#7c4dff6e',
2422
- '#cfd8dc6e',
2423
- '#f8bbd06e',
2424
- '#ffccbc6e',
2425
- '#f0f4c36e',
2426
- '#9fa8da6e',
2427
- '#d1c4e96e',
2428
- ],
2429
- },
2430
- };
2431
-
2432
- const DEFAULT_TEXT_CONFIG = {
2433
- color: '#000000',
2434
- size: 8,
2435
- fontFamily: 'Arial',
2436
- palette: [
2437
- '#000000',
2438
- '#ff5252',
2439
- '#ffbc00',
2440
- '#00c853',
2441
- '#0000FF',
2442
- '#d500f9',
2443
- '#fafafa',
2444
- '#a52714',
2445
- '#ee8100',
2446
- '#558b2f',
2447
- '#01579b',
2448
- '#8e24aa',
2449
- '#90a4ae',
2450
- '#ff4081',
2451
- '#ff6e40',
2452
- '#aeea00',
2453
- '#304ffe',
2454
- '#7c4dff',
2455
- '#cfd8dc',
2456
- '#f8bbd0',
2457
- '#ffccbc',
2458
- '#f0f4c3',
2459
- '#9fa8da',
2460
- '#d1c4e9',
2461
- ],
2462
- };
2463
-
2464
- class KritzelWorkspace {
2465
- __class__ = 'KritzelWorkspace';
2466
- id;
2467
- name;
2468
- createdAt;
2469
- updatedAt;
2470
- viewport;
2471
- _core;
2472
- constructor(id, name, viewport = { translateX: 0, translateY: 0, scale: 1 }) {
2473
- this.id = id;
2474
- this.name = name;
2475
- this.createdAt = new Date();
2476
- this.updatedAt = new Date();
2477
- this.viewport = viewport;
2478
- }
2479
- static create(core, obj) {
2480
- const workspace = new KritzelWorkspace(obj.id, obj.name, obj.viewport);
2481
- workspace._core = core;
2482
- Object.assign(workspace, obj);
2483
- return workspace;
2484
- }
2485
- addObject(obj) {
2486
- this._core.engine.addObject(obj);
2487
- }
2488
- serialize() {
2489
- return {
2490
- __class__: this.__class__,
2491
- id: this.id,
2492
- name: this.name,
2493
- createdAt: this.createdAt,
2494
- updatedAt: this.updatedAt,
2495
- viewport: this.viewport,
2496
- };
2497
- }
2498
- deserialize(object) {
2499
- Object.assign(this, object);
2500
- this.createdAt = new Date(object.createdAt);
2501
- this.updatedAt = new Date(object.updatedAt);
2502
- return this;
2503
- }
2504
- }
2505
-
2506
- class KritzelReviver {
2507
- _core;
2508
- constructor(core) {
2509
- this._core = core;
2510
- }
2511
- revive(obj) {
2512
- if (obj && typeof obj === 'object') {
2513
- if (obj.__class__) {
2514
- let revivedObj;
2515
- switch (obj.__class__) {
2516
- case 'KritzelPath':
2517
- revivedObj = KritzelPath.create(this._core).deserialize(obj);
2518
- break;
2519
- case 'KritzelText':
2520
- revivedObj = KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
2521
- break;
2522
- case 'KritzelImage':
2523
- revivedObj = KritzelImage.create(this._core).deserialize(obj);
2524
- break;
2525
- case 'KritzelCustomElement':
2526
- revivedObj = KritzelCustomElement.create(this._core).deserialize(obj);
2527
- break;
2528
- case 'KritzelSelectionGroup':
2529
- revivedObj = KritzelSelectionGroup.create(this._core).deserialize(obj);
2530
- break;
2531
- case 'KritzelWorkspace':
2532
- revivedObj = KritzelWorkspace.create(this._core, obj).deserialize(obj);
2533
- break;
2534
- case 'KritzelBrushTool':
2535
- revivedObj = new KritzelBrushTool(this._core);
2536
- break;
2537
- case 'KritzelEraserTool':
2538
- revivedObj = new KritzelEraserTool(this._core);
2539
- break;
2540
- case 'KritzelImageTool':
2541
- revivedObj = new KritzelImageTool(this._core);
2542
- break;
2543
- case 'KritzelSelectionTool':
2544
- revivedObj = new KritzelSelectionTool(this._core);
2545
- break;
2546
- case 'KritzelTextTool':
2547
- revivedObj = new KritzelTextTool(this._core);
2548
- break;
2549
- default:
2550
- revivedObj = obj;
2551
- }
2552
- return revivedObj;
2553
- }
2554
- const newObj = Array.isArray(obj) ? [] : {};
2555
- for (const key in obj) {
2556
- if (Object.prototype.hasOwnProperty.call(obj, key)) {
2557
- newObj[key] = this.revive(obj[key]);
2558
- }
2559
- }
2560
- return newObj;
2561
- }
2562
- return obj;
2563
- }
2564
- }
2565
-
2566
- class KritzelSelectionGroup extends KritzelBaseObject {
2567
- __class__ = 'KritzelSelectionGroup';
2568
- objects = [];
2569
- unchangedObjects = [];
2570
- minX;
2571
- maxX;
2572
- minY;
2573
- maxY;
2574
- get length() {
2575
- return this.objects.length;
2576
- }
2577
- static create(core) {
2578
- const object = new KritzelSelectionGroup();
2579
- object._core = core;
2580
- object.id = object.generateId();
2581
- object.workspaceId = core.store.state.activeWorkspace.id;
2582
- object.scale = core.store.state.scale;
2583
- object.zIndex = 99999;
2584
- return object;
2585
- }
2586
- addOrRemove(object) {
2587
- const index = this.objects.findIndex(obj => obj.id === object.id);
2588
- if (index === -1) {
2589
- this.objects.push(object);
2590
- }
2591
- else {
2592
- this.objects.splice(index, 1);
2593
- }
2594
- this.unchangedObjects = this.objects.map(obj => obj.clone());
2595
- this.refreshObjectDimensions();
2596
- }
2597
- deselectAllChildren() {
2598
- this.objects.forEach(obj => (obj.isSelected = false));
2599
- }
2600
- updateWorkspaceId(workspaceId) {
2601
- this.workspaceId = workspaceId;
2602
- this.objects.forEach(obj => (obj.workspaceId = workspaceId));
2603
- }
2604
- updateZIndices(startZIndex) {
2605
- this.objects.forEach((obj, i) => {
2606
- obj.zIndex = startZIndex + i;
2607
- });
2608
- }
2609
- updatePosition(x, y) {
2610
- this.objects.forEach(obj => {
2611
- const deltaX = obj.translateX - this.translateX;
2612
- const deltaY = obj.translateY - this.translateY;
2613
- obj.updatePosition(x + deltaX, y + deltaY);
2614
- });
2615
- this.unchangedObjects.forEach(obj => {
2616
- const deltaX = obj.translateX - this.translateX;
2617
- const deltaY = obj.translateY - this.translateY;
2618
- obj.translateX = x + deltaX;
2619
- obj.translateY = y + deltaY;
2620
- });
2621
- this.translateX = x;
2622
- this.translateY = y;
2623
- this._core.store.state.objectsMap.update(this);
2624
- }
2625
- move(startX, startY, endX, endY) {
2626
- const deltaX = (startX - endX) / this._core.store.state.scale;
2627
- const deltaY = (startY - endY) / this._core.store.state.scale;
2628
- this.translateX += deltaX;
2629
- this.translateY += deltaY;
2630
- this._core.store.state.objectsMap.update(this);
2631
- this.objects.forEach(obj => {
2632
- obj.move(startX, startY, endX, endY);
2633
- this._core.store.state.objectsMap.update(obj);
2634
- });
2635
- this.unchangedObjects.forEach(obj => {
2636
- obj.translateX += deltaX;
2637
- obj.translateY += deltaY;
2638
- });
2639
- }
2640
- resize(x, y, width, height) {
2641
- const widthScaleFactor = width / this.width;
2642
- const heightScaleFactor = height / this.height;
2643
- const deltaX = x - this.translateX;
2644
- const deltaY = y - this.translateY;
2645
- this.objects.forEach(child => {
2646
- const updatedWidth = child.width * widthScaleFactor;
2647
- const updatedHeight = child.height * heightScaleFactor;
2648
- const updatedX = child.translateX + deltaX + (child.translateX - this.translateX) * (widthScaleFactor - 1);
2649
- const updatedY = child.translateY + deltaY + (child.translateY - this.translateY) * (heightScaleFactor - 1);
2650
- child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
2651
- this._core.store.state.objectsMap.update(child);
2652
- });
2653
- this.refreshObjectDimensions();
2654
- this.unchangedObjects = this.objects.map(obj => obj.clone());
2655
- }
2656
- rotate(value) {
2657
- this.rotation = value;
2658
- const centerX = this.translateX + this.totalWidth / 2 / this.scale;
2659
- const centerY = this.translateY + this.totalHeight / 2 / this.scale;
2660
- const angle = value;
2661
- const cos = Math.cos(angle);
2662
- const sin = Math.sin(angle);
2663
- this.objects.forEach(child => {
2664
- const unchangedChild = this.getUnchangedObject(child.id);
2665
- const offsetX = this.getOffsetXToCenter(unchangedChild);
2666
- const offsetY = this.getOffsetYToCenter(unchangedChild);
2667
- const rotatedX = cos * offsetX - sin * offsetY;
2668
- const rotatedY = sin * offsetX + cos * offsetY;
2669
- child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
2670
- child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
2671
- child.rotate(this.objects.length === 1 ? value : value + unchangedChild.rotation);
2672
- this._core.store.state.objectsMap.update(child);
2673
- });
2674
- }
2675
- copy() {
2676
- const selectionGroup = KritzelSelectionGroup.create(this._core);
2677
- this.objects
2678
- .sort((a, b) => a.zIndex - b.zIndex)
2679
- .forEach(obj => {
2680
- const copiedObject = obj.copy();
2681
- selectionGroup.addOrRemove(copiedObject);
2682
- });
2683
- selectionGroup.unchangedObjects = selectionGroup.objects.map(obj => obj.clone());
2684
- if (this.objects.length === 1) {
2685
- selectionGroup.rotation = this.objects[0].rotation;
2686
- }
2687
- return selectionGroup;
2688
- }
2689
- refreshObjectDimensions() {
2690
- if (this.objects.length === 1) {
2691
- const obj = this.objects[0];
2692
- this.minX = obj.boundingBox.x / this.scale;
2693
- this.maxX = obj.boundingBox.x / this.scale + obj.boundingBox.width;
2694
- this.minY = obj.boundingBox.y / this.scale;
2695
- this.maxY = obj.boundingBox.y / this.scale + obj.boundingBox.height;
2696
- this.translateX = (this.minX - this.padding) * this.scale;
2697
- this.translateY = (this.minY - this.padding) * this.scale;
2698
- this.width = (this.maxX - this.minX - this.padding) * this.scale;
2699
- this.height = (this.maxY - this.minY - this.padding) * this.scale;
2700
- }
2701
- else {
2702
- this.minX = Math.min(...this.objects.map(obj => obj.minXRotated));
2703
- this.maxX = Math.max(...this.objects.map(obj => obj.maxXRotated));
2704
- this.minY = Math.min(...this.objects.map(obj => obj.minYRotated));
2705
- this.maxY = Math.max(...this.objects.map(obj => obj.maxYRotated));
2706
- this.translateX = this.minX - this.padding;
2707
- this.translateY = this.minY - this.padding;
2708
- this.width = (this.maxX - this.minX - this.padding) * this.scale;
2709
- this.height = (this.maxY - this.minY - this.padding) * this.scale;
2710
- }
2711
- this._core.store.state.objectsMap.update(this);
2712
- }
2713
- getOffsetXToCenter(obj) {
2714
- const objCenterX = obj.translateX + obj.totalWidth / obj.scale / 2;
2715
- const groupCenterX = this.translateX + this.totalWidth / this.scale / 2;
2716
- return objCenterX - groupCenterX;
2717
- }
2718
- getOffsetYToCenter(obj) {
2719
- const objCenterY = obj.translateY + obj.totalHeight / obj.scale / 2;
2720
- const groupCenterY = this.translateY + this.totalHeight / this.scale / 2;
2721
- return objCenterY - groupCenterY;
2722
- }
2723
- getUnchangedObject(objectId) {
2724
- const obj = this.unchangedObjects.find(obj => obj.id === objectId);
2725
- const reviver = new KritzelReviver(this._core);
2726
- return reviver.revive(obj);
2727
- }
2728
- }
2729
-
2730
- /**
2731
- * Browser Image Compression
2732
- * v2.0.2
2733
- * by Donald <donaldcwl@gmail.com>
2734
- * https://github.com/Donaldcwl/browser-image-compression
2735
- */
2736
-
2737
- function _mergeNamespaces$1(e,t){return t.forEach((function(t){t&&"string"!=typeof t&&!Array.isArray(t)&&Object.keys(t).forEach((function(r){if("default"!==r&&!(r in e)){var i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,i.get?i:{enumerable:true,get:function(){return t[r]}});}}));})),Object.freeze(e)}function copyExifWithoutOrientation(e,t){return new Promise((function(r,i){let o;return getApp1Segment(e).then((function(e){try{return o=e,r(new Blob([t.slice(0,2),o,t.slice(2)],{type:"image/jpeg"}))}catch(e){return i(e)}}),i)}))}const getApp1Segment=e=>new Promise(((t,r)=>{const i=new FileReader;i.addEventListener("load",(({target:{result:e}})=>{const i=new DataView(e);let o=0;if(65496!==i.getUint16(o))return r("not a valid JPEG");for(o+=2;;){const a=i.getUint16(o);if(65498===a)break;const s=i.getUint16(o+2);if(65505===a&&1165519206===i.getUint32(o+4)){const a=o+10;let f;switch(i.getUint16(a)){case 18761:f=true;break;case 19789:f=false;break;default:return r("TIFF header contains invalid endian")}if(42!==i.getUint16(a+2,f))return r("TIFF header contains invalid version");const l=i.getUint32(a+4,f),c=a+l+2+12*i.getUint16(a+l,f);for(let e=a+l+2;e<c;e+=12){if(274==i.getUint16(e,f)){if(3!==i.getUint16(e+2,f))return r("Orientation data type is invalid");if(1!==i.getUint32(e+4,f))return r("Orientation data count is invalid");i.setUint16(e+8,1,f);break}}return t(e.slice(o,o+2+s))}o+=2+s;}return t(new Blob)})),i.readAsArrayBuffer(e);}));var e={},t={get exports(){return e},set exports(t){e=t;}};!function(e){var r,i,UZIP={};t.exports=UZIP,UZIP.parse=function(e,t){for(var r=UZIP.bin.readUshort,i=UZIP.bin.readUint,o=0,a={},s=new Uint8Array(e),f=s.length-4;101010256!=i(s,f);)f--;o=f;o+=4;var l=r(s,o+=4);r(s,o+=2);var c=i(s,o+=2),u=i(s,o+=4);o+=4,o=u;for(var h=0;h<l;h++){i(s,o),o+=4,o+=4,o+=4,i(s,o+=4);c=i(s,o+=4);var d=i(s,o+=4),A=r(s,o+=4),g=r(s,o+2),p=r(s,o+4);o+=6;var m=i(s,o+=8);o+=4,o+=A+g+p,UZIP._readLocal(s,m,a,c,d,t);}return a},UZIP._readLocal=function(e,t,r,i,o,a){var s=UZIP.bin.readUshort,f=UZIP.bin.readUint;f(e,t),s(e,t+=4),s(e,t+=2);var l=s(e,t+=2);f(e,t+=2),f(e,t+=4),t+=4;var c=s(e,t+=8),u=s(e,t+=2);t+=2;var h=UZIP.bin.readUTF8(e,t,c);if(t+=c,t+=u,a)r[h]={size:o,csize:i};else {var d=new Uint8Array(e.buffer,t);if(0==l)r[h]=new Uint8Array(d.buffer.slice(t,t+i));else {if(8!=l)throw "unknown compression method: "+l;var A=new Uint8Array(o);UZIP.inflateRaw(d,A),r[h]=A;}}},UZIP.inflateRaw=function(e,t){return UZIP.F.inflate(e,t)},UZIP.inflate=function(e,t){return UZIP.inflateRaw(new Uint8Array(e.buffer,e.byteOffset+2,e.length-6),t)},UZIP.deflate=function(e,t){null==t&&(t={level:6});var r=0,i=new Uint8Array(50+Math.floor(1.1*e.length));i[r]=120,i[r+1]=156,r+=2,r=UZIP.F.deflateRaw(e,i,r,t.level);var o=UZIP.adler(e,0,e.length);return i[r+0]=o>>>24&255,i[r+1]=o>>>16&255,i[r+2]=o>>>8&255,i[r+3]=o>>>0&255,new Uint8Array(i.buffer,0,r+4)},UZIP.deflateRaw=function(e,t){null==t&&(t={level:6});var r=new Uint8Array(50+Math.floor(1.1*e.length)),i=UZIP.F.deflateRaw(e,r,i,t.level);return new Uint8Array(r.buffer,0,i)},UZIP.encode=function(e,t){null==t&&(t=false);var r=0,i=UZIP.bin.writeUint,o=UZIP.bin.writeUshort,a={};for(var s in e){var f=!UZIP._noNeed(s)&&!t,l=e[s],c=UZIP.crc.crc(l,0,l.length);a[s]={cpr:f,usize:l.length,crc:c,file:f?UZIP.deflateRaw(l):l};}for(var s in a)r+=a[s].file.length+30+46+2*UZIP.bin.sizeUTF8(s);r+=22;var u=new Uint8Array(r),h=0,d=[];for(var s in a){var A=a[s];d.push(h),h=UZIP._writeHeader(u,h,s,A,0);}var g=0,p=h;for(var s in a){A=a[s];d.push(h),h=UZIP._writeHeader(u,h,s,A,1,d[g++]);}var m=h-p;return i(u,h,101010256),h+=4,o(u,h+=4,g),o(u,h+=2,g),i(u,h+=2,m),i(u,h+=4,p),h+=4,h+=2,u.buffer},UZIP._noNeed=function(e){var t=e.split(".").pop().toLowerCase();return -1!="png,jpg,jpeg,zip".indexOf(t)},UZIP._writeHeader=function(e,t,r,i,o,a){var s=UZIP.bin.writeUint,f=UZIP.bin.writeUshort,l=i.file;return s(e,t,0==o?67324752:33639248),t+=4,1==o&&(t+=2),f(e,t,20),f(e,t+=2,0),f(e,t+=2,i.cpr?8:0),s(e,t+=2,0),s(e,t+=4,i.crc),s(e,t+=4,l.length),s(e,t+=4,i.usize),f(e,t+=4,UZIP.bin.sizeUTF8(r)),f(e,t+=2,0),t+=2,1==o&&(t+=2,t+=2,s(e,t+=6,a),t+=4),t+=UZIP.bin.writeUTF8(e,t,r),0==o&&(e.set(l,t),t+=l.length),t},UZIP.crc={table:function(){for(var e=new Uint32Array(256),t=0;t<256;t++){for(var r=t,i=0;i<8;i++)1&r?r=3988292384^r>>>1:r>>>=1;e[t]=r;}return e}(),update:function(e,t,r,i){for(var o=0;o<i;o++)e=UZIP.crc.table[255&(e^t[r+o])]^e>>>8;return e},crc:function(e,t,r){return 4294967295^UZIP.crc.update(4294967295,e,t,r)}},UZIP.adler=function(e,t,r){for(var i=1,o=0,a=t,s=t+r;a<s;){for(var f=Math.min(a+5552,s);a<f;)o+=i+=e[a++];i%=65521,o%=65521;}return o<<16|i},UZIP.bin={readUshort:function(e,t){return e[t]|e[t+1]<<8},writeUshort:function(e,t,r){e[t]=255&r,e[t+1]=r>>8&255;},readUint:function(e,t){return 16777216*e[t+3]+(e[t+2]<<16|e[t+1]<<8|e[t])},writeUint:function(e,t,r){e[t]=255&r,e[t+1]=r>>8&255,e[t+2]=r>>16&255,e[t+3]=r>>24&255;},readASCII:function(e,t,r){for(var i="",o=0;o<r;o++)i+=String.fromCharCode(e[t+o]);return i},writeASCII:function(e,t,r){for(var i=0;i<r.length;i++)e[t+i]=r.charCodeAt(i);},pad:function(e){return e.length<2?"0"+e:e},readUTF8:function(e,t,r){for(var i,o="",a=0;a<r;a++)o+="%"+UZIP.bin.pad(e[t+a].toString(16));try{i=decodeURIComponent(o);}catch(i){return UZIP.bin.readASCII(e,t,r)}return i},writeUTF8:function(e,t,r){for(var i=r.length,o=0,a=0;a<i;a++){var s=r.charCodeAt(a);if(0==(4294967168&s))e[t+o]=s,o++;else if(0==(4294965248&s))e[t+o]=192|s>>6,e[t+o+1]=128|s>>0&63,o+=2;else if(0==(4294901760&s))e[t+o]=224|s>>12,e[t+o+1]=128|s>>6&63,e[t+o+2]=128|s>>0&63,o+=3;else {if(0!=(4292870144&s))throw "e";e[t+o]=240|s>>18,e[t+o+1]=128|s>>12&63,e[t+o+2]=128|s>>6&63,e[t+o+3]=128|s>>0&63,o+=4;}}return o},sizeUTF8:function(e){for(var t=e.length,r=0,i=0;i<t;i++){var o=e.charCodeAt(i);if(0==(4294967168&o))r++;else if(0==(4294965248&o))r+=2;else if(0==(4294901760&o))r+=3;else {if(0!=(4292870144&o))throw "e";r+=4;}}return r}},UZIP.F={},UZIP.F.deflateRaw=function(e,t,r,i){var o=[[0,0,0,0,0],[4,4,8,4,0],[4,5,16,8,0],[4,6,16,16,0],[4,10,16,32,0],[8,16,32,32,0],[8,16,128,128,0],[8,32,128,256,0],[32,128,258,1024,1],[32,258,258,4096,1]][i],a=UZIP.F.U,s=UZIP.F._goodIndex;var f=UZIP.F._putsE,l=0,c=r<<3,u=0,h=e.length;if(0==i){for(;l<h;){f(t,c,l+(_=Math.min(65535,h-l))==h?1:0),c=UZIP.F._copyExact(e,l,_,t,c+8),l+=_;}return c>>>3}var d=a.lits,A=a.strt,g=a.prev,p=0,m=0,w=0,v=0,b=0,y=0;for(h>2&&(A[y=UZIP.F._hash(e,0)]=0),l=0;l<h;l++){if(b=y,l+1<h-2){y=UZIP.F._hash(e,l+1);var E=l+1&32767;g[E]=A[y],A[y]=E;}if(u<=l){(p>14e3||m>26697)&&h-l>100&&(u<l&&(d[p]=l-u,p+=2,u=l),c=UZIP.F._writeBlock(l==h-1||u==h?1:0,d,p,v,e,w,l-w,t,c),p=m=v=0,w=l);var F=0;l<h-2&&(F=UZIP.F._bestMatch(e,l,g,b,Math.min(o[2],h-l),o[3]));var _=F>>>16,B=65535&F;if(0!=F){B=65535&F;var U=s(_=F>>>16,a.of0);a.lhst[257+U]++;var C=s(B,a.df0);a.dhst[C]++,v+=a.exb[U]+a.dxb[C],d[p]=_<<23|l-u,d[p+1]=B<<16|U<<8|C,p+=2,u=l+_;}else a.lhst[e[l]]++;m++;}}for(w==l&&0!=e.length||(u<l&&(d[p]=l-u,p+=2,u=l),c=UZIP.F._writeBlock(1,d,p,v,e,w,l-w,t,c),p=0,m=0,p=m=v=0,w=l);0!=(7&c);)c++;return c>>>3},UZIP.F._bestMatch=function(e,t,r,i,o,a){var s=32767&t,f=r[s],l=s-f+32768&32767;if(f==s||i!=UZIP.F._hash(e,t-l))return 0;for(var c=0,u=0,h=Math.min(32767,t);l<=h&&0!=--a&&f!=s;){if(0==c||e[t+c]==e[t+c-l]){var d=UZIP.F._howLong(e,t,l);if(d>c){if(u=l,(c=d)>=o)break;l+2<d&&(d=l+2);for(var A=0,g=0;g<d-2;g++){var p=t-l+g+32768&32767,m=p-r[p]+32768&32767;m>A&&(A=m,f=p);}}}l+=(s=f)-(f=r[s])+32768&32767;}return c<<16|u},UZIP.F._howLong=function(e,t,r){if(e[t]!=e[t-r]||e[t+1]!=e[t+1-r]||e[t+2]!=e[t+2-r])return 0;var i=t,o=Math.min(e.length,t+258);for(t+=3;t<o&&e[t]==e[t-r];)t++;return t-i},UZIP.F._hash=function(e,t){return (e[t]<<8|e[t+1])+(e[t+2]<<4)&65535},UZIP.saved=0,UZIP.F._writeBlock=function(e,t,r,i,o,a,s,f,l){var c,u,h,d,A,g,p,m,w,v=UZIP.F.U,b=UZIP.F._putsF,y=UZIP.F._putsE;v.lhst[256]++,u=(c=UZIP.F.getTrees())[0],h=c[1],d=c[2],A=c[3],g=c[4],p=c[5],m=c[6],w=c[7];var E=32+(0==(l+3&7)?0:8-(l+3&7))+(s<<3),F=i+UZIP.F.contSize(v.fltree,v.lhst)+UZIP.F.contSize(v.fdtree,v.dhst),_=i+UZIP.F.contSize(v.ltree,v.lhst)+UZIP.F.contSize(v.dtree,v.dhst);_+=14+3*p+UZIP.F.contSize(v.itree,v.ihst)+(2*v.ihst[16]+3*v.ihst[17]+7*v.ihst[18]);for(var B=0;B<286;B++)v.lhst[B]=0;for(B=0;B<30;B++)v.dhst[B]=0;for(B=0;B<19;B++)v.ihst[B]=0;var U=E<F&&E<_?0:F<_?1:2;if(b(f,l,e),b(f,l+1,U),l+=3,0==U){for(;0!=(7&l);)l++;l=UZIP.F._copyExact(o,a,s,f,l);}else {var C,I;if(1==U&&(C=v.fltree,I=v.fdtree),2==U){UZIP.F.makeCodes(v.ltree,u),UZIP.F.revCodes(v.ltree,u),UZIP.F.makeCodes(v.dtree,h),UZIP.F.revCodes(v.dtree,h),UZIP.F.makeCodes(v.itree,d),UZIP.F.revCodes(v.itree,d),C=v.ltree,I=v.dtree,y(f,l,A-257),y(f,l+=5,g-1),y(f,l+=5,p-4),l+=4;for(var Q=0;Q<p;Q++)y(f,l+3*Q,v.itree[1+(v.ordr[Q]<<1)]);l+=3*p,l=UZIP.F._codeTiny(m,v.itree,f,l),l=UZIP.F._codeTiny(w,v.itree,f,l);}for(var M=a,x=0;x<r;x+=2){for(var S=t[x],R=S>>>23,T=M+(8388607&S);M<T;)l=UZIP.F._writeLit(o[M++],C,f,l);if(0!=R){var O=t[x+1],P=O>>16,H=O>>8&255,L=255&O;y(f,l=UZIP.F._writeLit(257+H,C,f,l),R-v.of0[H]),l+=v.exb[H],b(f,l=UZIP.F._writeLit(L,I,f,l),P-v.df0[L]),l+=v.dxb[L],M+=R;}}l=UZIP.F._writeLit(256,C,f,l);}return l},UZIP.F._copyExact=function(e,t,r,i,o){var a=o>>>3;return i[a]=r,i[a+1]=r>>>8,i[a+2]=255-i[a],i[a+3]=255-i[a+1],a+=4,i.set(new Uint8Array(e.buffer,t,r),a),o+(r+4<<3)},UZIP.F.getTrees=function(){for(var e=UZIP.F.U,t=UZIP.F._hufTree(e.lhst,e.ltree,15),r=UZIP.F._hufTree(e.dhst,e.dtree,15),i=[],o=UZIP.F._lenCodes(e.ltree,i),a=[],s=UZIP.F._lenCodes(e.dtree,a),f=0;f<i.length;f+=2)e.ihst[i[f]]++;for(f=0;f<a.length;f+=2)e.ihst[a[f]]++;for(var l=UZIP.F._hufTree(e.ihst,e.itree,7),c=19;c>4&&0==e.itree[1+(e.ordr[c-1]<<1)];)c--;return [t,r,l,o,s,c,i,a]},UZIP.F.getSecond=function(e){for(var t=[],r=0;r<e.length;r+=2)t.push(e[r+1]);return t},UZIP.F.nonZero=function(e){for(var t="",r=0;r<e.length;r+=2)0!=e[r+1]&&(t+=(r>>1)+",");return t},UZIP.F.contSize=function(e,t){for(var r=0,i=0;i<t.length;i++)r+=t[i]*e[1+(i<<1)];return r},UZIP.F._codeTiny=function(e,t,r,i){for(var o=0;o<e.length;o+=2){var a=e[o],s=e[o+1];i=UZIP.F._writeLit(a,t,r,i);var f=16==a?2:17==a?3:7;a>15&&(UZIP.F._putsE(r,i,s,f),i+=f);}return i},UZIP.F._lenCodes=function(e,t){for(var r=e.length;2!=r&&0==e[r-1];)r-=2;for(var i=0;i<r;i+=2){var o=e[i+1],a=i+3<r?e[i+3]:-1,s=i+5<r?e[i+5]:-1,f=0==i?-1:e[i-1];if(0==o&&a==o&&s==o){for(var l=i+5;l+2<r&&e[l+2]==o;)l+=2;(c=Math.min(l+1-i>>>1,138))<11?t.push(17,c-3):t.push(18,c-11),i+=2*c-2;}else if(o==f&&a==o&&s==o){for(l=i+5;l+2<r&&e[l+2]==o;)l+=2;var c=Math.min(l+1-i>>>1,6);t.push(16,c-3),i+=2*c-2;}else t.push(o,0);}return r>>>1},UZIP.F._hufTree=function(e,t,r){var i=[],o=e.length,a=t.length,s=0;for(s=0;s<a;s+=2)t[s]=0,t[s+1]=0;for(s=0;s<o;s++)0!=e[s]&&i.push({lit:s,f:e[s]});var f=i.length,l=i.slice(0);if(0==f)return 0;if(1==f){var c=i[0].lit;l=0==c?1:0;return t[1+(c<<1)]=1,t[1+(l<<1)]=1,1}i.sort((function(e,t){return e.f-t.f}));var u=i[0],h=i[1],d=0,A=1,g=2;for(i[0]={lit:-1,f:u.f+h.f,l:u,r:h,d:0};A!=f-1;)u=d!=A&&(g==f||i[d].f<i[g].f)?i[d++]:i[g++],h=d!=A&&(g==f||i[d].f<i[g].f)?i[d++]:i[g++],i[A++]={lit:-1,f:u.f+h.f,l:u,r:h};var p=UZIP.F.setDepth(i[A-1],0);for(p>r&&(UZIP.F.restrictDepth(l,r,p),p=r),s=0;s<f;s++)t[1+(l[s].lit<<1)]=l[s].d;return p},UZIP.F.setDepth=function(e,t){return -1!=e.lit?(e.d=t,t):Math.max(UZIP.F.setDepth(e.l,t+1),UZIP.F.setDepth(e.r,t+1))},UZIP.F.restrictDepth=function(e,t,r){var i=0,o=1<<r-t,a=0;for(e.sort((function(e,t){return t.d==e.d?e.f-t.f:t.d-e.d})),i=0;i<e.length&&e[i].d>t;i++){var s=e[i].d;e[i].d=t,a+=o-(1<<r-s);}for(a>>>=r-t;a>0;){(s=e[i].d)<t?(e[i].d++,a-=1<<t-s-1):i++;}for(;i>=0;i--)e[i].d==t&&a<0&&(e[i].d--,a++);0!=a&&console.log("debt left");},UZIP.F._goodIndex=function(e,t){var r=0;return t[16|r]<=e&&(r|=16),t[8|r]<=e&&(r|=8),t[4|r]<=e&&(r|=4),t[2|r]<=e&&(r|=2),t[1|r]<=e&&(r|=1),r},UZIP.F._writeLit=function(e,t,r,i){return UZIP.F._putsF(r,i,t[e<<1]),i+t[1+(e<<1)]},UZIP.F.inflate=function(e,t){var r=Uint8Array;if(3==e[0]&&0==e[1])return t||new r(0);var i=UZIP.F,o=i._bitsF,a=i._bitsE,s=i._decodeTiny,f=i.makeCodes,l=i.codes2map,c=i._get17,u=i.U,h=null==t;h&&(t=new r(e.length>>>2<<3));for(var d,A,g=0,p=0,m=0,w=0,v=0,b=0,y=0,E=0,F=0;0==g;)if(g=o(e,F,1),p=o(e,F+1,2),F+=3,0!=p){if(h&&(t=UZIP.F._check(t,E+(1<<17))),1==p&&(d=u.flmap,A=u.fdmap,b=511,y=31),2==p){m=a(e,F,5)+257,w=a(e,F+5,5)+1,v=a(e,F+10,4)+4,F+=14;for(var _=0;_<38;_+=2)u.itree[_]=0,u.itree[_+1]=0;var B=1;for(_=0;_<v;_++){var U=a(e,F+3*_,3);u.itree[1+(u.ordr[_]<<1)]=U,U>B&&(B=U);}F+=3*v,f(u.itree,B),l(u.itree,B,u.imap),d=u.lmap,A=u.dmap,F=s(u.imap,(1<<B)-1,m+w,e,F,u.ttree);var C=i._copyOut(u.ttree,0,m,u.ltree);b=(1<<C)-1;var I=i._copyOut(u.ttree,m,w,u.dtree);y=(1<<I)-1,f(u.ltree,C),l(u.ltree,C,d),f(u.dtree,I),l(u.dtree,I,A);}for(;;){var Q=d[c(e,F)&b];F+=15&Q;var M=Q>>>4;if(M>>>8==0)t[E++]=M;else {if(256==M)break;var x=E+M-254;if(M>264){var S=u.ldef[M-257];x=E+(S>>>3)+a(e,F,7&S),F+=7&S;}var R=A[c(e,F)&y];F+=15&R;var T=R>>>4,O=u.ddef[T],P=(O>>>4)+o(e,F,15&O);for(F+=15&O,h&&(t=UZIP.F._check(t,E+(1<<17)));E<x;)t[E]=t[E++-P],t[E]=t[E++-P],t[E]=t[E++-P],t[E]=t[E++-P];E=x;}}}else {0!=(7&F)&&(F+=8-(7&F));var H=4+(F>>>3),L=e[H-4]|e[H-3]<<8;h&&(t=UZIP.F._check(t,E+L)),t.set(new r(e.buffer,e.byteOffset+H,L),E),F=H+L<<3,E+=L;}return t.length==E?t:t.slice(0,E)},UZIP.F._check=function(e,t){var r=e.length;if(t<=r)return e;var i=new Uint8Array(Math.max(r<<1,t));return i.set(e,0),i},UZIP.F._decodeTiny=function(e,t,r,i,o,a){for(var s=UZIP.F._bitsE,f=UZIP.F._get17,l=0;l<r;){var c=e[f(i,o)&t];o+=15&c;var u=c>>>4;if(u<=15)a[l]=u,l++;else {var h=0,d=0;16==u?(d=3+s(i,o,2),o+=2,h=a[l-1]):17==u?(d=3+s(i,o,3),o+=3):18==u&&(d=11+s(i,o,7),o+=7);for(var A=l+d;l<A;)a[l]=h,l++;}}return o},UZIP.F._copyOut=function(e,t,r,i){for(var o=0,a=0,s=i.length>>>1;a<r;){var f=e[a+t];i[a<<1]=0,i[1+(a<<1)]=f,f>o&&(o=f),a++;}for(;a<s;)i[a<<1]=0,i[1+(a<<1)]=0,a++;return o},UZIP.F.makeCodes=function(e,t){for(var r,i,o,a,s=UZIP.F.U,f=e.length,l=s.bl_count,c=0;c<=t;c++)l[c]=0;for(c=1;c<f;c+=2)l[e[c]]++;var u=s.next_code;for(r=0,l[0]=0,i=1;i<=t;i++)r=r+l[i-1]<<1,u[i]=r;for(o=0;o<f;o+=2)0!=(a=e[o+1])&&(e[o]=u[a],u[a]++);},UZIP.F.codes2map=function(e,t,r){for(var i=e.length,o=UZIP.F.U.rev15,a=0;a<i;a+=2)if(0!=e[a+1])for(var s=a>>1,f=e[a+1],l=s<<4|f,c=t-f,u=e[a]<<c,h=u+(1<<c);u!=h;){r[o[u]>>>15-t]=l,u++;}},UZIP.F.revCodes=function(e,t){for(var r=UZIP.F.U.rev15,i=15-t,o=0;o<e.length;o+=2){var a=e[o]<<t-e[o+1];e[o]=r[a]>>>i;}},UZIP.F._putsE=function(e,t,r){r<<=7&t;var i=t>>>3;e[i]|=r,e[i+1]|=r>>>8;},UZIP.F._putsF=function(e,t,r){r<<=7&t;var i=t>>>3;e[i]|=r,e[i+1]|=r>>>8,e[i+2]|=r>>>16;},UZIP.F._bitsE=function(e,t,r){return (e[t>>>3]|e[1+(t>>>3)]<<8)>>>(7&t)&(1<<r)-1},UZIP.F._bitsF=function(e,t,r){return (e[t>>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16)>>>(7&t)&(1<<r)-1},UZIP.F._get17=function(e,t){return (e[t>>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16)>>>(7&t)},UZIP.F._get25=function(e,t){return (e[t>>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16|e[3+(t>>>3)]<<24)>>>(7&t)},UZIP.F.U=(r=Uint16Array,i=Uint32Array,{next_code:new r(16),bl_count:new r(16),ordr:[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],of0:[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,999,999,999],exb:[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0],ldef:new r(32),df0:[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577,65535,65535],dxb:[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0],ddef:new i(32),flmap:new r(512),fltree:[],fdmap:new r(32),fdtree:[],lmap:new r(32768),ltree:[],ttree:[],dmap:new r(32768),dtree:[],imap:new r(512),itree:[],rev15:new r(32768),lhst:new i(286),dhst:new i(30),ihst:new i(19),lits:new i(15e3),strt:new r(65536),prev:new r(32768)}),function(){for(var e=UZIP.F.U,t=0;t<32768;t++){var r=t;r=(4278255360&(r=(4042322160&(r=(3435973836&(r=(2863311530&r)>>>1|(1431655765&r)<<1))>>>2|(858993459&r)<<2))>>>4|(252645135&r)<<4))>>>8|(16711935&r)<<8,e.rev15[t]=(r>>>16|r<<16)>>>17;}function pushV(e,t,r){for(;0!=t--;)e.push(0,r);}for(t=0;t<32;t++)e.ldef[t]=e.of0[t]<<3|e.exb[t],e.ddef[t]=e.df0[t]<<4|e.dxb[t];pushV(e.fltree,144,8),pushV(e.fltree,112,9),pushV(e.fltree,24,7),pushV(e.fltree,8,8),UZIP.F.makeCodes(e.fltree,9),UZIP.F.codes2map(e.fltree,9,e.flmap),UZIP.F.revCodes(e.fltree,9),pushV(e.fdtree,32,5),UZIP.F.makeCodes(e.fdtree,5),UZIP.F.codes2map(e.fdtree,5,e.fdmap),UZIP.F.revCodes(e.fdtree,5),pushV(e.itree,19,0),pushV(e.ltree,286,0),pushV(e.dtree,30,0),pushV(e.ttree,320,0);}();}();var UZIP=_mergeNamespaces$1({__proto__:null,default:e},[e]);const UPNG=function(){var e={nextZero(e,t){for(;0!=e[t];)t++;return t},readUshort:(e,t)=>e[t]<<8|e[t+1],writeUshort(e,t,r){e[t]=r>>8&255,e[t+1]=255&r;},readUint:(e,t)=>16777216*e[t]+(e[t+1]<<16|e[t+2]<<8|e[t+3]),writeUint(e,t,r){e[t]=r>>24&255,e[t+1]=r>>16&255,e[t+2]=r>>8&255,e[t+3]=255&r;},readASCII(e,t,r){let i="";for(let o=0;o<r;o++)i+=String.fromCharCode(e[t+o]);return i},writeASCII(e,t,r){for(let i=0;i<r.length;i++)e[t+i]=r.charCodeAt(i);},readBytes(e,t,r){const i=[];for(let o=0;o<r;o++)i.push(e[t+o]);return i},pad:e=>e.length<2?`0${e}`:e,readUTF8(t,r,i){let o,a="";for(let o=0;o<i;o++)a+=`%${e.pad(t[r+o].toString(16))}`;try{o=decodeURIComponent(a);}catch(o){return e.readASCII(t,r,i)}return o}};function decodeImage(t,r,i,o){const a=r*i,s=_getBPP(o),f=Math.ceil(r*s/8),l=new Uint8Array(4*a),c=new Uint32Array(l.buffer),{ctype:u}=o,{depth:h}=o,d=e.readUshort;if(6==u){const e=a<<2;if(8==h)for(var A=0;A<e;A+=4)l[A]=t[A],l[A+1]=t[A+1],l[A+2]=t[A+2],l[A+3]=t[A+3];if(16==h)for(A=0;A<e;A++)l[A]=t[A<<1];}else if(2==u){const e=o.tabs.tRNS;if(null==e){if(8==h)for(A=0;A<a;A++){var g=3*A;c[A]=255<<24|t[g+2]<<16|t[g+1]<<8|t[g];}if(16==h)for(A=0;A<a;A++){g=6*A;c[A]=255<<24|t[g+4]<<16|t[g+2]<<8|t[g];}}else {var p=e[0];const r=e[1],i=e[2];if(8==h)for(A=0;A<a;A++){var m=A<<2;g=3*A;c[A]=255<<24|t[g+2]<<16|t[g+1]<<8|t[g],t[g]==p&&t[g+1]==r&&t[g+2]==i&&(l[m+3]=0);}if(16==h)for(A=0;A<a;A++){m=A<<2,g=6*A;c[A]=255<<24|t[g+4]<<16|t[g+2]<<8|t[g],d(t,g)==p&&d(t,g+2)==r&&d(t,g+4)==i&&(l[m+3]=0);}}}else if(3==u){const e=o.tabs.PLTE,s=o.tabs.tRNS,c=s?s.length:0;if(1==h)for(var w=0;w<i;w++){var v=w*f,b=w*r;for(A=0;A<r;A++){m=b+A<<2;var y=3*(E=t[v+(A>>3)]>>7-((7&A)<<0)&1);l[m]=e[y],l[m+1]=e[y+1],l[m+2]=e[y+2],l[m+3]=E<c?s[E]:255;}}if(2==h)for(w=0;w<i;w++)for(v=w*f,b=w*r,A=0;A<r;A++){m=b+A<<2,y=3*(E=t[v+(A>>2)]>>6-((3&A)<<1)&3);l[m]=e[y],l[m+1]=e[y+1],l[m+2]=e[y+2],l[m+3]=E<c?s[E]:255;}if(4==h)for(w=0;w<i;w++)for(v=w*f,b=w*r,A=0;A<r;A++){m=b+A<<2,y=3*(E=t[v+(A>>1)]>>4-((1&A)<<2)&15);l[m]=e[y],l[m+1]=e[y+1],l[m+2]=e[y+2],l[m+3]=E<c?s[E]:255;}if(8==h)for(A=0;A<a;A++){var E;m=A<<2,y=3*(E=t[A]);l[m]=e[y],l[m+1]=e[y+1],l[m+2]=e[y+2],l[m+3]=E<c?s[E]:255;}}else if(4==u){if(8==h)for(A=0;A<a;A++){m=A<<2;var F=t[_=A<<1];l[m]=F,l[m+1]=F,l[m+2]=F,l[m+3]=t[_+1];}if(16==h)for(A=0;A<a;A++){var _;m=A<<2,F=t[_=A<<2];l[m]=F,l[m+1]=F,l[m+2]=F,l[m+3]=t[_+2];}}else if(0==u)for(p=o.tabs.tRNS?o.tabs.tRNS:-1,w=0;w<i;w++){const e=w*f,i=w*r;if(1==h)for(var B=0;B<r;B++){var U=(F=255*(t[e+(B>>>3)]>>>7-(7&B)&1))==255*p?0:255;c[i+B]=U<<24|F<<16|F<<8|F;}else if(2==h)for(B=0;B<r;B++){U=(F=85*(t[e+(B>>>2)]>>>6-((3&B)<<1)&3))==85*p?0:255;c[i+B]=U<<24|F<<16|F<<8|F;}else if(4==h)for(B=0;B<r;B++){U=(F=17*(t[e+(B>>>1)]>>>4-((1&B)<<2)&15))==17*p?0:255;c[i+B]=U<<24|F<<16|F<<8|F;}else if(8==h)for(B=0;B<r;B++){U=(F=t[e+B])==p?0:255;c[i+B]=U<<24|F<<16|F<<8|F;}else if(16==h)for(B=0;B<r;B++){F=t[e+(B<<1)],U=d(t,e+(B<<1))==p?0:255;c[i+B]=U<<24|F<<16|F<<8|F;}}return l}function _decompress(e,r,i,o){const a=_getBPP(e),s=Math.ceil(i*a/8),f=new Uint8Array((s+1+e.interlace)*o);return r=e.tabs.CgBI?t(r,f):_inflate(r,f),0==e.interlace?r=_filterZero(r,e,0,i,o):1==e.interlace&&(r=function _readInterlace(e,t){const r=t.width,i=t.height,o=_getBPP(t),a=o>>3,s=Math.ceil(r*o/8),f=new Uint8Array(i*s);let l=0;const c=[0,0,4,0,2,0,1],u=[0,4,0,2,0,1,0],h=[8,8,8,4,4,2,2],d=[8,8,4,4,2,2,1];let A=0;for(;A<7;){const p=h[A],m=d[A];let w=0,v=0,b=c[A];for(;b<i;)b+=p,v++;let y=u[A];for(;y<r;)y+=m,w++;const E=Math.ceil(w*o/8);_filterZero(e,t,l,w,v);let F=0,_=c[A];for(;_<i;){let t=u[A],i=l+F*E<<3;for(;t<r;){var g;if(1==o)g=(g=e[i>>3])>>7-(7&i)&1,f[_*s+(t>>3)]|=g<<7-((7&t)<<0);if(2==o)g=(g=e[i>>3])>>6-(7&i)&3,f[_*s+(t>>2)]|=g<<6-((3&t)<<1);if(4==o)g=(g=e[i>>3])>>4-(7&i)&15,f[_*s+(t>>1)]|=g<<4-((1&t)<<2);if(o>=8){const r=_*s+t*a;for(let t=0;t<a;t++)f[r+t]=e[(i>>3)+t];}i+=o,t+=m;}F++,_+=p;}w*v!=0&&(l+=v*(1+E)),A+=1;}return f}(r,e)),r}function _inflate(e,r){return t(new Uint8Array(e.buffer,2,e.length-6),r)}var t=function(){const e={H:{}};return e.H.N=function(t,r){const i=Uint8Array;let o,a,s=0,f=0,l=0,c=0,u=0,h=0,d=0,A=0,g=0;if(3==t[0]&&0==t[1])return r||new i(0);const p=e.H,m=p.b,w=p.e,v=p.R,b=p.n,y=p.A,E=p.Z,F=p.m,_=null==r;for(_&&(r=new i(t.length>>>2<<5));0==s;)if(s=m(t,g,1),f=m(t,g+1,2),g+=3,0!=f){if(_&&(r=e.H.W(r,A+(1<<17))),1==f&&(o=F.J,a=F.h,h=511,d=31),2==f){l=w(t,g,5)+257,c=w(t,g+5,5)+1,u=w(t,g+10,4)+4,g+=14;let e=1;for(var B=0;B<38;B+=2)F.Q[B]=0,F.Q[B+1]=0;for(B=0;B<u;B++){const r=w(t,g+3*B,3);F.Q[1+(F.X[B]<<1)]=r,r>e&&(e=r);}g+=3*u,b(F.Q,e),y(F.Q,e,F.u),o=F.w,a=F.d,g=v(F.u,(1<<e)-1,l+c,t,g,F.v);const r=p.V(F.v,0,l,F.C);h=(1<<r)-1;const i=p.V(F.v,l,c,F.D);d=(1<<i)-1,b(F.C,r),y(F.C,r,o),b(F.D,i),y(F.D,i,a);}for(;;){const e=o[E(t,g)&h];g+=15&e;const i=e>>>4;if(i>>>8==0)r[A++]=i;else {if(256==i)break;{let e=A+i-254;if(i>264){const r=F.q[i-257];e=A+(r>>>3)+w(t,g,7&r),g+=7&r;}const o=a[E(t,g)&d];g+=15&o;const s=o>>>4,f=F.c[s],l=(f>>>4)+m(t,g,15&f);for(g+=15&f;A<e;)r[A]=r[A++-l],r[A]=r[A++-l],r[A]=r[A++-l],r[A]=r[A++-l];A=e;}}}}else {0!=(7&g)&&(g+=8-(7&g));const o=4+(g>>>3),a=t[o-4]|t[o-3]<<8;_&&(r=e.H.W(r,A+a)),r.set(new i(t.buffer,t.byteOffset+o,a),A),g=o+a<<3,A+=a;}return r.length==A?r:r.slice(0,A)},e.H.W=function(e,t){const r=e.length;if(t<=r)return e;const i=new Uint8Array(r<<1);return i.set(e,0),i},e.H.R=function(t,r,i,o,a,s){const f=e.H.e,l=e.H.Z;let c=0;for(;c<i;){const e=t[l(o,a)&r];a+=15&e;const i=e>>>4;if(i<=15)s[c]=i,c++;else {let e=0,t=0;16==i?(t=3+f(o,a,2),a+=2,e=s[c-1]):17==i?(t=3+f(o,a,3),a+=3):18==i&&(t=11+f(o,a,7),a+=7);const r=c+t;for(;c<r;)s[c]=e,c++;}}return a},e.H.V=function(e,t,r,i){let o=0,a=0;const s=i.length>>>1;for(;a<r;){const r=e[a+t];i[a<<1]=0,i[1+(a<<1)]=r,r>o&&(o=r),a++;}for(;a<s;)i[a<<1]=0,i[1+(a<<1)]=0,a++;return o},e.H.n=function(t,r){const i=e.H.m,o=t.length;let a,s,f;let l;const c=i.j;for(var u=0;u<=r;u++)c[u]=0;for(u=1;u<o;u+=2)c[t[u]]++;const h=i.K;for(a=0,c[0]=0,s=1;s<=r;s++)a=a+c[s-1]<<1,h[s]=a;for(f=0;f<o;f+=2)l=t[f+1],0!=l&&(t[f]=h[l],h[l]++);},e.H.A=function(t,r,i){const o=t.length,a=e.H.m.r;for(let e=0;e<o;e+=2)if(0!=t[e+1]){const o=e>>1,s=t[e+1],f=o<<4|s,l=r-s;let c=t[e]<<l;const u=c+(1<<l);for(;c!=u;){i[a[c]>>>15-r]=f,c++;}}},e.H.l=function(t,r){const i=e.H.m.r,o=15-r;for(let e=0;e<t.length;e+=2){const a=t[e]<<r-t[e+1];t[e]=i[a]>>>o;}},e.H.M=function(e,t,r){r<<=7&t;const i=t>>>3;e[i]|=r,e[i+1]|=r>>>8;},e.H.I=function(e,t,r){r<<=7&t;const i=t>>>3;e[i]|=r,e[i+1]|=r>>>8,e[i+2]|=r>>>16;},e.H.e=function(e,t,r){return (e[t>>>3]|e[1+(t>>>3)]<<8)>>>(7&t)&(1<<r)-1},e.H.b=function(e,t,r){return (e[t>>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16)>>>(7&t)&(1<<r)-1},e.H.Z=function(e,t){return (e[t>>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16)>>>(7&t)},e.H.i=function(e,t){return (e[t>>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16|e[3+(t>>>3)]<<24)>>>(7&t)},e.H.m=function(){const e=Uint16Array,t=Uint32Array;return {K:new e(16),j:new e(16),X:[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],S:[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,999,999,999],T:[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0],q:new e(32),p:[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577,65535,65535],z:[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0],c:new t(32),J:new e(512),_:[],h:new e(32),$:[],w:new e(32768),C:[],v:[],d:new e(32768),D:[],u:new e(512),Q:[],r:new e(32768),s:new t(286),Y:new t(30),a:new t(19),t:new t(15e3),k:new e(65536),g:new e(32768)}}(),function(){const t=e.H.m;for(var r=0;r<32768;r++){let e=r;e=(2863311530&e)>>>1|(1431655765&e)<<1,e=(3435973836&e)>>>2|(858993459&e)<<2,e=(4042322160&e)>>>4|(252645135&e)<<4,e=(4278255360&e)>>>8|(16711935&e)<<8,t.r[r]=(e>>>16|e<<16)>>>17;}function n(e,t,r){for(;0!=t--;)e.push(0,r);}for(r=0;r<32;r++)t.q[r]=t.S[r]<<3|t.T[r],t.c[r]=t.p[r]<<4|t.z[r];n(t._,144,8),n(t._,112,9),n(t._,24,7),n(t._,8,8),e.H.n(t._,9),e.H.A(t._,9,t.J),e.H.l(t._,9),n(t.$,32,5),e.H.n(t.$,5),e.H.A(t.$,5,t.h),e.H.l(t.$,5),n(t.Q,19,0),n(t.C,286,0),n(t.D,30,0),n(t.v,320,0);}(),e.H.N}();function _getBPP(e){return [1,null,3,1,2,null,4][e.ctype]*e.depth}function _filterZero(e,t,r,i,o){let a=_getBPP(t);const s=Math.ceil(i*a/8);let f,l;a=Math.ceil(a/8);let c=e[r],u=0;if(c>1&&(e[r]=[0,0,1][c-2]),3==c)for(u=a;u<s;u++)e[u+1]=e[u+1]+(e[u+1-a]>>>1)&255;for(let t=0;t<o;t++)if(f=r+t*s,l=f+t+1,c=e[l-1],u=0,0==c)for(;u<s;u++)e[f+u]=e[l+u];else if(1==c){for(;u<a;u++)e[f+u]=e[l+u];for(;u<s;u++)e[f+u]=e[l+u]+e[f+u-a];}else if(2==c)for(;u<s;u++)e[f+u]=e[l+u]+e[f+u-s];else if(3==c){for(;u<a;u++)e[f+u]=e[l+u]+(e[f+u-s]>>>1);for(;u<s;u++)e[f+u]=e[l+u]+(e[f+u-s]+e[f+u-a]>>>1);}else {for(;u<a;u++)e[f+u]=e[l+u]+_paeth(0,e[f+u-s],0);for(;u<s;u++)e[f+u]=e[l+u]+_paeth(e[f+u-a],e[f+u-s],e[f+u-a-s]);}return e}function _paeth(e,t,r){const i=e+t-r,o=i-e,a=i-t,s=i-r;return o*o<=a*a&&o*o<=s*s?e:a*a<=s*s?t:r}function _IHDR(t,r,i){i.width=e.readUint(t,r),r+=4,i.height=e.readUint(t,r),r+=4,i.depth=t[r],r++,i.ctype=t[r],r++,i.compress=t[r],r++,i.filter=t[r],r++,i.interlace=t[r],r++;}function _copyTile(e,t,r,i,o,a,s,f,l){const c=Math.min(t,o),u=Math.min(r,a);let h=0,d=0;for(let r=0;r<u;r++)for(let a=0;a<c;a++)if(s>=0&&f>=0?(h=r*t+a<<2,d=(f+r)*o+s+a<<2):(h=(-f+r)*t-s+a<<2,d=r*o+a<<2),0==l)i[d]=e[h],i[d+1]=e[h+1],i[d+2]=e[h+2],i[d+3]=e[h+3];else if(1==l){var A=e[h+3]*(1/255),g=e[h]*A,p=e[h+1]*A,m=e[h+2]*A,w=i[d+3]*(1/255),v=i[d]*w,b=i[d+1]*w,y=i[d+2]*w;const t=1-A,r=A+w*t,o=0==r?0:1/r;i[d+3]=255*r,i[d+0]=(g+v*t)*o,i[d+1]=(p+b*t)*o,i[d+2]=(m+y*t)*o;}else if(2==l){A=e[h+3],g=e[h],p=e[h+1],m=e[h+2],w=i[d+3],v=i[d],b=i[d+1],y=i[d+2];A==w&&g==v&&p==b&&m==y?(i[d]=0,i[d+1]=0,i[d+2]=0,i[d+3]=0):(i[d]=g,i[d+1]=p,i[d+2]=m,i[d+3]=A);}else if(3==l){A=e[h+3],g=e[h],p=e[h+1],m=e[h+2],w=i[d+3],v=i[d],b=i[d+1],y=i[d+2];if(A==w&&g==v&&p==b&&m==y)continue;if(A<220&&w>20)return false}return true}return {decode:function decode(r){const i=new Uint8Array(r);let o=8;const a=e,s=a.readUshort,f=a.readUint,l={tabs:{},frames:[]},c=new Uint8Array(i.length);let u,h=0,d=0;const A=[137,80,78,71,13,10,26,10];for(var g=0;g<8;g++)if(i[g]!=A[g])throw "The input is not a PNG file!";for(;o<i.length;){const e=a.readUint(i,o);o+=4;const r=a.readASCII(i,o,4);if(o+=4,"IHDR"==r)_IHDR(i,o,l);else if("iCCP"==r){for(var p=o;0!=i[p];)p++;a.readASCII(i,o,p-o);const s=i.slice(p+2,o+e);let f=null;try{f=_inflate(s);}catch(e){f=t(s);}l.tabs[r]=f;}else if("CgBI"==r)l.tabs[r]=i.slice(o,o+4);else if("IDAT"==r){for(g=0;g<e;g++)c[h+g]=i[o+g];h+=e;}else if("acTL"==r)l.tabs[r]={num_frames:f(i,o),num_plays:f(i,o+4)},u=new Uint8Array(i.length);else if("fcTL"==r){if(0!=d)(E=l.frames[l.frames.length-1]).data=_decompress(l,u.slice(0,d),E.rect.width,E.rect.height),d=0;const e={x:f(i,o+12),y:f(i,o+16),width:f(i,o+4),height:f(i,o+8)};let t=s(i,o+22);t=s(i,o+20)/(0==t?100:t);const r={rect:e,delay:Math.round(1e3*t),dispose:i[o+24],blend:i[o+25]};l.frames.push(r);}else if("fdAT"==r){for(g=0;g<e-4;g++)u[d+g]=i[o+g+4];d+=e-4;}else if("pHYs"==r)l.tabs[r]=[a.readUint(i,o),a.readUint(i,o+4),i[o+8]];else if("cHRM"==r){l.tabs[r]=[];for(g=0;g<8;g++)l.tabs[r].push(a.readUint(i,o+4*g));}else if("tEXt"==r||"zTXt"==r){null==l.tabs[r]&&(l.tabs[r]={});var m=a.nextZero(i,o),w=a.readASCII(i,o,m-o),v=o+e-m-1;if("tEXt"==r)y=a.readASCII(i,m+1,v);else {var b=_inflate(i.slice(m+2,m+2+v));y=a.readUTF8(b,0,b.length);}l.tabs[r][w]=y;}else if("iTXt"==r){null==l.tabs[r]&&(l.tabs[r]={});m=0,p=o;m=a.nextZero(i,p);w=a.readASCII(i,p,m-p);const t=i[p=m+1];var y;p+=2,m=a.nextZero(i,p),a.readASCII(i,p,m-p),p=m+1,m=a.nextZero(i,p),a.readUTF8(i,p,m-p);v=e-((p=m+1)-o);if(0==t)y=a.readUTF8(i,p,v);else {b=_inflate(i.slice(p,p+v));y=a.readUTF8(b,0,b.length);}l.tabs[r][w]=y;}else if("PLTE"==r)l.tabs[r]=a.readBytes(i,o,e);else if("hIST"==r){const e=l.tabs.PLTE.length/3;l.tabs[r]=[];for(g=0;g<e;g++)l.tabs[r].push(s(i,o+2*g));}else if("tRNS"==r)3==l.ctype?l.tabs[r]=a.readBytes(i,o,e):0==l.ctype?l.tabs[r]=s(i,o):2==l.ctype&&(l.tabs[r]=[s(i,o),s(i,o+2),s(i,o+4)]);else if("gAMA"==r)l.tabs[r]=a.readUint(i,o)/1e5;else if("sRGB"==r)l.tabs[r]=i[o];else if("bKGD"==r)0==l.ctype||4==l.ctype?l.tabs[r]=[s(i,o)]:2==l.ctype||6==l.ctype?l.tabs[r]=[s(i,o),s(i,o+2),s(i,o+4)]:3==l.ctype&&(l.tabs[r]=i[o]);else if("IEND"==r)break;o+=e,a.readUint(i,o),o+=4;}var E;return 0!=d&&((E=l.frames[l.frames.length-1]).data=_decompress(l,u.slice(0,d),E.rect.width,E.rect.height)),l.data=_decompress(l,c,l.width,l.height),delete l.compress,delete l.interlace,delete l.filter,l},toRGBA8:function toRGBA8(e){const t=e.width,r=e.height;if(null==e.tabs.acTL)return [decodeImage(e.data,t,r,e).buffer];const i=[];null==e.frames[0].data&&(e.frames[0].data=e.data);const o=t*r*4,a=new Uint8Array(o),s=new Uint8Array(o),f=new Uint8Array(o);for(let c=0;c<e.frames.length;c++){const u=e.frames[c],h=u.rect.x,d=u.rect.y,A=u.rect.width,g=u.rect.height,p=decodeImage(u.data,A,g,e);if(0!=c)for(var l=0;l<o;l++)f[l]=a[l];if(0==u.blend?_copyTile(p,A,g,a,t,r,h,d,0):1==u.blend&&_copyTile(p,A,g,a,t,r,h,d,1),i.push(a.buffer.slice(0)),0==u.dispose);else if(1==u.dispose)_copyTile(s,A,g,a,t,r,h,d,0);else if(2==u.dispose)for(l=0;l<o;l++)a[l]=f[l];}return i},_paeth:_paeth,_copyTile:_copyTile,_bin:e}}();!function(){const{_copyTile:e}=UPNG,{_bin:t}=UPNG,r=UPNG._paeth;var i={table:function(){const e=new Uint32Array(256);for(let t=0;t<256;t++){let r=t;for(let e=0;e<8;e++)1&r?r=3988292384^r>>>1:r>>>=1;e[t]=r;}return e}(),update(e,t,r,o){for(let a=0;a<o;a++)e=i.table[255&(e^t[r+a])]^e>>>8;return e},crc:(e,t,r)=>4294967295^i.update(4294967295,e,t,r)};function addErr(e,t,r,i){t[r]+=e[0]*i>>4,t[r+1]+=e[1]*i>>4,t[r+2]+=e[2]*i>>4,t[r+3]+=e[3]*i>>4;}function N(e){return Math.max(0,Math.min(255,e))}function D(e,t){const r=e[0]-t[0],i=e[1]-t[1],o=e[2]-t[2],a=e[3]-t[3];return r*r+i*i+o*o+a*a}function dither(e,t,r,i,o,a,s){null==s&&(s=1);const f=i.length,l=[];for(var c=0;c<f;c++){const e=i[c];l.push([e>>>0&255,e>>>8&255,e>>>16&255,e>>>24&255]);}for(c=0;c<f;c++){let e=4294967295;for(var u=0,h=0;h<f;h++){var d=D(l[c],l[h]);h!=c&&d<e&&(e=d,u=h);}}const A=new Uint32Array(o.buffer),g=new Int16Array(t*r*4),p=[0,8,2,10,12,4,14,6,3,11,1,9,15,7,13,5];for(c=0;c<p.length;c++)p[c]=255*((p[c]+.5)/16-.5);for(let o=0;o<r;o++)for(let w=0;w<t;w++){var m;c=4*(o*t+w);if(2!=s)m=[N(e[c]+g[c]),N(e[c+1]+g[c+1]),N(e[c+2]+g[c+2]),N(e[c+3]+g[c+3])];else {d=p[4*(3&o)+(3&w)];m=[N(e[c]+d),N(e[c+1]+d),N(e[c+2]+d),N(e[c+3]+d)];}u=0;let v=16777215;for(h=0;h<f;h++){const e=D(m,l[h]);e<v&&(v=e,u=h);}const b=l[u],y=[m[0]-b[0],m[1]-b[1],m[2]-b[2],m[3]-b[3]];1==s&&(w!=t-1&&addErr(y,g,c+4,7),o!=r-1&&(0!=w&&addErr(y,g,c+4*t-4,3),addErr(y,g,c+4*t,5),w!=t-1&&addErr(y,g,c+4*t+4,1))),a[c>>2]=u,A[c>>2]=i[u];}}function _main(e,r,o,a,s){null==s&&(s={});const{crc:f}=i,l=t.writeUint,c=t.writeUshort,u=t.writeASCII;let h=8;const d=e.frames.length>1;let A,g=false,p=33+(d?20:0);if(null!=s.sRGB&&(p+=13),null!=s.pHYs&&(p+=21),null!=s.iCCP&&(A=pako.deflate(s.iCCP),p+=21+A.length+4),3==e.ctype){for(var m=e.plte.length,w=0;w<m;w++)e.plte[w]>>>24!=255&&(g=true);p+=8+3*m+4+(g?8+1*m+4:0);}for(var v=0;v<e.frames.length;v++){d&&(p+=38),p+=(F=e.frames[v]).cimg.length+12,0!=v&&(p+=4);}p+=12;const b=new Uint8Array(p),y=[137,80,78,71,13,10,26,10];for(w=0;w<8;w++)b[w]=y[w];if(l(b,h,13),h+=4,u(b,h,"IHDR"),h+=4,l(b,h,r),h+=4,l(b,h,o),h+=4,b[h]=e.depth,h++,b[h]=e.ctype,h++,b[h]=0,h++,b[h]=0,h++,b[h]=0,h++,l(b,h,f(b,h-17,17)),h+=4,null!=s.sRGB&&(l(b,h,1),h+=4,u(b,h,"sRGB"),h+=4,b[h]=s.sRGB,h++,l(b,h,f(b,h-5,5)),h+=4),null!=s.iCCP){const e=13+A.length;l(b,h,e),h+=4,u(b,h,"iCCP"),h+=4,u(b,h,"ICC profile"),h+=11,h+=2,b.set(A,h),h+=A.length,l(b,h,f(b,h-(e+4),e+4)),h+=4;}if(null!=s.pHYs&&(l(b,h,9),h+=4,u(b,h,"pHYs"),h+=4,l(b,h,s.pHYs[0]),h+=4,l(b,h,s.pHYs[1]),h+=4,b[h]=s.pHYs[2],h++,l(b,h,f(b,h-13,13)),h+=4),d&&(l(b,h,8),h+=4,u(b,h,"acTL"),h+=4,l(b,h,e.frames.length),h+=4,l(b,h,null!=s.loop?s.loop:0),h+=4,l(b,h,f(b,h-12,12)),h+=4),3==e.ctype){l(b,h,3*(m=e.plte.length)),h+=4,u(b,h,"PLTE"),h+=4;for(w=0;w<m;w++){const t=3*w,r=e.plte[w],i=255&r,o=r>>>8&255,a=r>>>16&255;b[h+t+0]=i,b[h+t+1]=o,b[h+t+2]=a;}if(h+=3*m,l(b,h,f(b,h-3*m-4,3*m+4)),h+=4,g){l(b,h,m),h+=4,u(b,h,"tRNS"),h+=4;for(w=0;w<m;w++)b[h+w]=e.plte[w]>>>24&255;h+=m,l(b,h,f(b,h-m-4,m+4)),h+=4;}}let E=0;for(v=0;v<e.frames.length;v++){var F=e.frames[v];d&&(l(b,h,26),h+=4,u(b,h,"fcTL"),h+=4,l(b,h,E++),h+=4,l(b,h,F.rect.width),h+=4,l(b,h,F.rect.height),h+=4,l(b,h,F.rect.x),h+=4,l(b,h,F.rect.y),h+=4,c(b,h,a[v]),h+=2,c(b,h,1e3),h+=2,b[h]=F.dispose,h++,b[h]=F.blend,h++,l(b,h,f(b,h-30,30)),h+=4);const t=F.cimg;l(b,h,(m=t.length)+(0==v?0:4)),h+=4;const r=h;u(b,h,0==v?"IDAT":"fdAT"),h+=4,0!=v&&(l(b,h,E++),h+=4),b.set(t,h),h+=m,l(b,h,f(b,r,h-r)),h+=4;}return l(b,h,0),h+=4,u(b,h,"IEND"),h+=4,l(b,h,f(b,h-4,4)),h+=4,b.buffer}function compressPNG(e,t,r){for(let i=0;i<e.frames.length;i++){const o=e.frames[i];const a=o.rect.height,s=new Uint8Array(a*o.bpl+a);o.cimg=_filterZero(o.img,a,o.bpp,o.bpl,s,t,r);}}function compress(t,r,i,o,a){const s=a[0],f=a[1],l=a[2],c=a[3],u=a[4],h=a[5];let d=6,A=8,g=255;for(var p=0;p<t.length;p++){const e=new Uint8Array(t[p]);for(var m=e.length,w=0;w<m;w+=4)g&=e[w+3];}const v=255!=g,b=function framize(t,r,i,o,a,s){const f=[];for(var l=0;l<t.length;l++){const h=new Uint8Array(t[l]),A=new Uint32Array(h.buffer);var c;let g=0,p=0,m=r,w=i,v=o?1:0;if(0!=l){const b=s||o||1==l||0!=f[l-2].dispose?1:2;let y=0,E=1e9;for(let e=0;e<b;e++){var u=new Uint8Array(t[l-1-e]);const o=new Uint32Array(t[l-1-e]);let s=r,f=i,c=-1,h=-1;for(let e=0;e<i;e++)for(let t=0;t<r;t++){A[d=e*r+t]!=o[d]&&(t<s&&(s=t),t>c&&(c=t),e<f&&(f=e),e>h&&(h=e));} -1==c&&(s=f=c=h=0),a&&(1==(1&s)&&s--,1==(1&f)&&f--);const v=(c-s+1)*(h-f+1);v<E&&(E=v,y=e,g=s,p=f,m=c-s+1,w=h-f+1);}u=new Uint8Array(t[l-1-y]);1==y&&(f[l-1].dispose=2),c=new Uint8Array(m*w*4),e(u,r,i,c,m,w,-g,-p,0),v=e(h,r,i,c,m,w,-g,-p,3)?1:0,1==v?_prepareDiff(h,r,i,c,{x:g,y:p,width:m,height:w}):e(h,r,i,c,m,w,-g,-p,0);}else c=h.slice(0);f.push({rect:{x:g,y:p,width:m,height:w},img:c,blend:v,dispose:0});}if(o)for(l=0;l<f.length;l++){if(1==(A=f[l]).blend)continue;const e=A.rect,o=f[l-1].rect,s=Math.min(e.x,o.x),c=Math.min(e.y,o.y),u={x:s,y:c,width:Math.max(e.x+e.width,o.x+o.width)-s,height:Math.max(e.y+e.height,o.y+o.height)-c};f[l-1].dispose=1,l-1!=0&&_updateFrame(t,r,i,f,l-1,u,a),_updateFrame(t,r,i,f,l,u,a);}let h=0;if(1!=t.length)for(var d=0;d<f.length;d++){var A;h+=(A=f[d]).rect.width*A.rect.height;}return f}(t,r,i,s,f,l),y={},E=[],F=[];if(0!=o){const e=[];for(w=0;w<b.length;w++)e.push(b[w].img.buffer);const t=function concatRGBA(e){let t=0;for(var r=0;r<e.length;r++)t+=e[r].byteLength;const i=new Uint8Array(t);let o=0;for(r=0;r<e.length;r++){const t=new Uint8Array(e[r]),a=t.length;for(let e=0;e<a;e+=4){let r=t[e],a=t[e+1],s=t[e+2];const f=t[e+3];0==f&&(r=a=s=0),i[o+e]=r,i[o+e+1]=a,i[o+e+2]=s,i[o+e+3]=f;}o+=a;}return i.buffer}(e),r=quantize(t,o);for(w=0;w<r.plte.length;w++)E.push(r.plte[w].est.rgba);let i=0;for(w=0;w<b.length;w++){const e=(B=b[w]).img.length;var _=new Uint8Array(r.inds.buffer,i>>2,e>>2);F.push(_);const t=new Uint8Array(r.abuf,i,e);h&&dither(B.img,B.rect.width,B.rect.height,E,t,_),B.img.set(t),i+=e;}}else for(p=0;p<b.length;p++){var B=b[p];const e=new Uint32Array(B.img.buffer);var U=B.rect.width;m=e.length,_=new Uint8Array(m);F.push(_);for(w=0;w<m;w++){const t=e[w];if(0!=w&&t==e[w-1])_[w]=_[w-1];else if(w>U&&t==e[w-U])_[w]=_[w-U];else {let e=y[t];if(null==e&&(y[t]=e=E.length,E.push(t),E.length>=300))break;_[w]=e;}}}const C=E.length;C<=256&&0==u&&(A=C<=2?1:C<=4?2:C<=16?4:8,A=Math.max(A,c));for(p=0;p<b.length;p++){(B=b[p]).rect.x;U=B.rect.width;const e=B.rect.height;let t=B.img;let r=4*U,i=4;if(C<=256&&0==u){r=Math.ceil(A*U/8);var I=new Uint8Array(r*e);const o=F[p];for(let t=0;t<e;t++){w=t*r;const e=t*U;if(8==A)for(var Q=0;Q<U;Q++)I[w+Q]=o[e+Q];else if(4==A)for(Q=0;Q<U;Q++)I[w+(Q>>1)]|=o[e+Q]<<4-4*(1&Q);else if(2==A)for(Q=0;Q<U;Q++)I[w+(Q>>2)]|=o[e+Q]<<6-2*(3&Q);else if(1==A)for(Q=0;Q<U;Q++)I[w+(Q>>3)]|=o[e+Q]<<7-1*(7&Q);}t=I,d=3,i=1;}else if(0==v&&1==b.length){I=new Uint8Array(U*e*3);const o=U*e;for(w=0;w<o;w++){const e=3*w,r=4*w;I[e]=t[r],I[e+1]=t[r+1],I[e+2]=t[r+2];}t=I,d=2,i=3,r=3*U;}B.img=t,B.bpl=r,B.bpp=i;}return {ctype:d,depth:A,plte:E,frames:b}}function _updateFrame(t,r,i,o,a,s,f){const l=Uint8Array,c=Uint32Array,u=new l(t[a-1]),h=new c(t[a-1]),d=a+1<t.length?new l(t[a+1]):null,A=new l(t[a]),g=new c(A.buffer);let p=r,m=i,w=-1,v=-1;for(let e=0;e<s.height;e++)for(let t=0;t<s.width;t++){const i=s.x+t,f=s.y+e,l=f*r+i,c=g[l];0==c||0==o[a-1].dispose&&h[l]==c&&(null==d||0!=d[4*l+3])||(i<p&&(p=i),i>w&&(w=i),f<m&&(m=f),f>v&&(v=f));} -1==w&&(p=m=w=v=0),f&&(1==(1&p)&&p--,1==(1&m)&&m--),s={x:p,y:m,width:w-p+1,height:v-m+1};const b=o[a];b.rect=s,b.blend=1,b.img=new Uint8Array(s.width*s.height*4),0==o[a-1].dispose?(e(u,r,i,b.img,s.width,s.height,-s.x,-s.y,0),_prepareDiff(A,r,i,b.img,s)):e(A,r,i,b.img,s.width,s.height,-s.x,-s.y,0);}function _prepareDiff(t,r,i,o,a){e(t,r,i,o,a.width,a.height,-a.x,-a.y,2);}function _filterZero(e,t,r,i,o,a,s){const f=[];let l,c=[0,1,2,3,4];-1!=a?c=[a]:(t*i>5e5||1==r)&&(c=[0]),s&&(l={level:0});const u=UZIP;for(var h=0;h<c.length;h++){for(let a=0;a<t;a++)_filterLine(o,e,a,i,r,c[h]);f.push(u.deflate(o,l));}let d,A=1e9;for(h=0;h<f.length;h++)f[h].length<A&&(d=h,A=f[h].length);return f[d]}function _filterLine(e,t,i,o,a,s){const f=i*o;let l=f+i;if(e[l]=s,l++,0==s)if(o<500)for(var c=0;c<o;c++)e[l+c]=t[f+c];else e.set(new Uint8Array(t.buffer,f,o),l);else if(1==s){for(c=0;c<a;c++)e[l+c]=t[f+c];for(c=a;c<o;c++)e[l+c]=t[f+c]-t[f+c-a]+256&255;}else if(0==i){for(c=0;c<a;c++)e[l+c]=t[f+c];if(2==s)for(c=a;c<o;c++)e[l+c]=t[f+c];if(3==s)for(c=a;c<o;c++)e[l+c]=t[f+c]-(t[f+c-a]>>1)+256&255;if(4==s)for(c=a;c<o;c++)e[l+c]=t[f+c]-r(t[f+c-a],0,0)+256&255;}else {if(2==s)for(c=0;c<o;c++)e[l+c]=t[f+c]+256-t[f+c-o]&255;if(3==s){for(c=0;c<a;c++)e[l+c]=t[f+c]+256-(t[f+c-o]>>1)&255;for(c=a;c<o;c++)e[l+c]=t[f+c]+256-(t[f+c-o]+t[f+c-a]>>1)&255;}if(4==s){for(c=0;c<a;c++)e[l+c]=t[f+c]+256-r(0,t[f+c-o],0)&255;for(c=a;c<o;c++)e[l+c]=t[f+c]+256-r(t[f+c-a],t[f+c-o],t[f+c-a-o])&255;}}}function quantize(e,t){const r=new Uint8Array(e),i=r.slice(0),o=new Uint32Array(i.buffer),a=getKDtree(i,t),s=a[0],f=a[1],l=r.length,c=new Uint8Array(l>>2);let u;if(r.length<2e7)for(var h=0;h<l;h+=4){u=getNearest(s,d=r[h]*(1/255),A=r[h+1]*(1/255),g=r[h+2]*(1/255),p=r[h+3]*(1/255)),c[h>>2]=u.ind,o[h>>2]=u.est.rgba;}else for(h=0;h<l;h+=4){var d=r[h]*(1/255),A=r[h+1]*(1/255),g=r[h+2]*(1/255),p=r[h+3]*(1/255);for(u=s;u.left;)u=planeDst(u.est,d,A,g,p)<=0?u.left:u.right;c[h>>2]=u.ind,o[h>>2]=u.est.rgba;}return {abuf:i.buffer,inds:c,plte:f}}function getKDtree(e,t,r){null==r&&(r=1e-4);const i=new Uint32Array(e.buffer),o={i0:0,i1:e.length,bst:null,est:null,tdst:0,left:null,right:null};o.bst=stats(e,o.i0,o.i1),o.est=estats(o.bst);const a=[o];for(;a.length<t;){let t=0,o=0;for(var s=0;s<a.length;s++)a[s].est.L>t&&(t=a[s].est.L,o=s);if(t<r)break;const f=a[o],l=splitPixels(e,i,f.i0,f.i1,f.est.e,f.est.eMq255);if(f.i0>=l||f.i1<=l){f.est.L=0;continue}const c={i0:f.i0,i1:l,bst:null,est:null,tdst:0,left:null,right:null};c.bst=stats(e,c.i0,c.i1),c.est=estats(c.bst);const u={i0:l,i1:f.i1,bst:null,est:null,tdst:0,left:null,right:null};u.bst={R:[],m:[],N:f.bst.N-c.bst.N};for(s=0;s<16;s++)u.bst.R[s]=f.bst.R[s]-c.bst.R[s];for(s=0;s<4;s++)u.bst.m[s]=f.bst.m[s]-c.bst.m[s];u.est=estats(u.bst),f.left=c,f.right=u,a[o]=c,a.push(u);}a.sort(((e,t)=>t.bst.N-e.bst.N));for(s=0;s<a.length;s++)a[s].ind=s;return [o,a]}function getNearest(e,t,r,i,o){if(null==e.left)return e.tdst=function dist(e,t,r,i,o){const a=t-e[0],s=r-e[1],f=i-e[2],l=o-e[3];return a*a+s*s+f*f+l*l}(e.est.q,t,r,i,o),e;const a=planeDst(e.est,t,r,i,o);let s=e.left,f=e.right;a>0&&(s=e.right,f=e.left);const l=getNearest(s,t,r,i,o);if(l.tdst<=a*a)return l;const c=getNearest(f,t,r,i,o);return c.tdst<l.tdst?c:l}function planeDst(e,t,r,i,o){const{e:a}=e;return a[0]*t+a[1]*r+a[2]*i+a[3]*o-e.eMq}function splitPixels(e,t,r,i,o,a){for(i-=4;r<i;){for(;vecDot(e,r,o)<=a;)r+=4;for(;vecDot(e,i,o)>a;)i-=4;if(r>=i)break;const s=t[r>>2];t[r>>2]=t[i>>2],t[i>>2]=s,r+=4,i-=4;}for(;vecDot(e,r,o)>a;)r-=4;return r+4}function vecDot(e,t,r){return e[t]*r[0]+e[t+1]*r[1]+e[t+2]*r[2]+e[t+3]*r[3]}function stats(e,t,r){const i=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],o=[0,0,0,0],a=r-t>>2;for(let a=t;a<r;a+=4){const t=e[a]*(1/255),r=e[a+1]*(1/255),s=e[a+2]*(1/255),f=e[a+3]*(1/255);o[0]+=t,o[1]+=r,o[2]+=s,o[3]+=f,i[0]+=t*t,i[1]+=t*r,i[2]+=t*s,i[3]+=t*f,i[5]+=r*r,i[6]+=r*s,i[7]+=r*f,i[10]+=s*s,i[11]+=s*f,i[15]+=f*f;}return i[4]=i[1],i[8]=i[2],i[9]=i[6],i[12]=i[3],i[13]=i[7],i[14]=i[11],{R:i,m:o,N:a}}function estats(e){const{R:t}=e,{m:r}=e,{N:i}=e,a=r[0],s=r[1],f=r[2],l=r[3],c=0==i?0:1/i,u=[t[0]-a*a*c,t[1]-a*s*c,t[2]-a*f*c,t[3]-a*l*c,t[4]-s*a*c,t[5]-s*s*c,t[6]-s*f*c,t[7]-s*l*c,t[8]-f*a*c,t[9]-f*s*c,t[10]-f*f*c,t[11]-f*l*c,t[12]-l*a*c,t[13]-l*s*c,t[14]-l*f*c,t[15]-l*l*c],h=u,d=o;let A=[Math.random(),Math.random(),Math.random(),Math.random()],g=0,p=0;if(0!=i)for(let e=0;e<16&&(A=d.multVec(h,A),p=Math.sqrt(d.dot(A,A)),A=d.sml(1/p,A),!(0!=e&&Math.abs(p-g)<1e-9));e++)g=p;const m=[a*c,s*c,f*c,l*c];return {Cov:u,q:m,e:A,L:g,eMq255:d.dot(d.sml(255,m),A),eMq:d.dot(A,m),rgba:(Math.round(255*m[3])<<24|Math.round(255*m[2])<<16|Math.round(255*m[1])<<8|Math.round(255*m[0])<<0)>>>0}}var o={multVec:(e,t)=>[e[0]*t[0]+e[1]*t[1]+e[2]*t[2]+e[3]*t[3],e[4]*t[0]+e[5]*t[1]+e[6]*t[2]+e[7]*t[3],e[8]*t[0]+e[9]*t[1]+e[10]*t[2]+e[11]*t[3],e[12]*t[0]+e[13]*t[1]+e[14]*t[2]+e[15]*t[3]],dot:(e,t)=>e[0]*t[0]+e[1]*t[1]+e[2]*t[2]+e[3]*t[3],sml:(e,t)=>[e*t[0],e*t[1],e*t[2],e*t[3]]};UPNG.encode=function encode(e,t,r,i,o,a,s){null==i&&(i=0),null==s&&(s=false);const f=compress(e,t,r,i,[false,false,false,0,s,false]);return compressPNG(f,-1),_main(f,t,r,o,a)},UPNG.encodeLL=function encodeLL(e,t,r,i,o,a,s,f){const l={ctype:0+(1==i?0:2)+(0==o?0:4),depth:a,frames:[]},c=(i+o)*a,u=c*t;for(let i=0;i<e.length;i++)l.frames.push({rect:{x:0,y:0,width:t,height:r},img:new Uint8Array(e[i]),blend:0,dispose:1,bpp:Math.ceil(c/8),bpl:Math.ceil(u/8)});return compressPNG(l,0,true),_main(l,t,r,s,f)},UPNG.encode.compress=compress,UPNG.encode.dither=dither,UPNG.quantize=quantize,UPNG.quantize.getKDtree=getKDtree,UPNG.quantize.getNearest=getNearest;}();const r={toArrayBuffer(e,t){const i=e.width,o=e.height,a=i<<2,s=e.getContext("2d").getImageData(0,0,i,o),f=new Uint32Array(s.data.buffer),l=(32*i+31)/32<<2,c=l*o,u=122+c,h=new ArrayBuffer(u),d=new DataView(h),A=1<<20;let g,p,m,w,v=A,b=0,y=0,E=0;function set16(e){d.setUint16(y,e,true),y+=2;}function set32(e){d.setUint32(y,e,true),y+=4;}function seek(e){y+=e;}set16(19778),set32(u),seek(4),set32(122),set32(108),set32(i),set32(-o>>>0),set16(1),set16(32),set32(3),set32(c),set32(2835),set32(2835),seek(8),set32(16711680),set32(65280),set32(255),set32(4278190080),set32(1466527264),function convert(){for(;b<o&&v>0;){for(w=122+b*l,g=0;g<a;)v--,p=f[E++],m=p>>>24,d.setUint32(w+g,p<<8|m),g+=4;b++;}E<f.length?(v=A,setTimeout(convert,r._dly)):t(h);}();},toBlob(e,t){this.toArrayBuffer(e,(e=>{t(new Blob([e],{type:"image/bmp"}));}));},_dly:9};var i={CHROME:"CHROME",FIREFOX:"FIREFOX",DESKTOP_SAFARI:"DESKTOP_SAFARI",IE:"IE",IOS:"IOS",ETC:"ETC"},o={[i.CHROME]:16384,[i.FIREFOX]:11180,[i.DESKTOP_SAFARI]:16384,[i.IE]:8192,[i.IOS]:4096,[i.ETC]:8192};const a="undefined"!=typeof window,s="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope,f=a&&window.cordova&&window.cordova.require&&window.cordova.require("cordova/modulemapper"),CustomFile=(a||s)&&(f&&f.getOriginalSymbol(window,"File")||"undefined"!=typeof File&&File),CustomFileReader=(a||s)&&(f&&f.getOriginalSymbol(window,"FileReader")||"undefined"!=typeof FileReader&&FileReader);function getFilefromDataUrl(e,t,r=Date.now()){return new Promise((i=>{const o=e.split(","),a=o[0].match(/:(.*?);/)[1],s=globalThis.atob(o[1]);let f=s.length;const l=new Uint8Array(f);for(;f--;)l[f]=s.charCodeAt(f);const c=new Blob([l],{type:a});c.name=t,c.lastModified=r,i(c);}))}function getDataUrlFromFile(e){return new Promise(((t,r)=>{const i=new CustomFileReader;i.onload=()=>t(i.result),i.onerror=e=>r(e),i.readAsDataURL(e);}))}function loadImage(e){return new Promise(((t,r)=>{const i=new Image;i.onload=()=>t(i),i.onerror=e=>r(e),i.src=e;}))}function getBrowserName(){if(void 0!==getBrowserName.cachedResult)return getBrowserName.cachedResult;let e=i.ETC;const{userAgent:t}=navigator;return /Chrom(e|ium)/i.test(t)?e=i.CHROME:/iP(ad|od|hone)/i.test(t)&&/WebKit/i.test(t)?e=i.IOS:/Safari/i.test(t)?e=i.DESKTOP_SAFARI:/Firefox/i.test(t)?e=i.FIREFOX:(/MSIE/i.test(t)||true==!!document.documentMode)&&(e=i.IE),getBrowserName.cachedResult=e,getBrowserName.cachedResult}function approximateBelowMaximumCanvasSizeOfBrowser(e,t){const r=getBrowserName(),i=o[r];let a=e,s=t,f=a*s;const l=a>s?s/a:a/s;for(;f>i*i;){const e=(i+a)/2,t=(i+s)/2;e<t?(s=t,a=t*l):(s=e*l,a=e),f=a*s;}return {width:a,height:s}}function getNewCanvasAndCtx(e,t){let r,i;try{if(r=new OffscreenCanvas(e,t),i=r.getContext("2d"),null===i)throw new Error("getContext of OffscreenCanvas returns null")}catch(e){r=document.createElement("canvas"),i=r.getContext("2d");}return r.width=e,r.height=t,[r,i]}function drawImageInCanvas(e,t){const{width:r,height:i}=approximateBelowMaximumCanvasSizeOfBrowser(e.width,e.height),[o,a]=getNewCanvasAndCtx(r,i);return t&&/jpe?g/.test(t)&&(a.fillStyle="white",a.fillRect(0,0,o.width,o.height)),a.drawImage(e,0,0,o.width,o.height),o}function isIOS(){return void 0!==isIOS.cachedResult||(isIOS.cachedResult=["iPad Simulator","iPhone Simulator","iPod Simulator","iPad","iPhone","iPod"].includes(navigator.platform)||navigator.userAgent.includes("Mac")&&"undefined"!=typeof document&&"ontouchend"in document),isIOS.cachedResult}function drawFileInCanvas(e,t={}){return new Promise((function(r,o){let a,s;var $Try_2_Post=function(){try{return s=drawImageInCanvas(a,t.fileType||e.type),r([a,s])}catch(e){return o(e)}},$Try_2_Catch=function(t){try{var $Try_3_Catch=function(e){try{throw e}catch(e){return o(e)}};try{let t;return getDataUrlFromFile(e).then((function(e){try{return t=e,loadImage(t).then((function(e){try{return a=e,function(){try{return $Try_2_Post()}catch(e){return o(e)}}()}catch(e){return $Try_3_Catch(e)}}),$Try_3_Catch)}catch(e){return $Try_3_Catch(e)}}),$Try_3_Catch)}catch(e){$Try_3_Catch(e);}}catch(e){return o(e)}};try{if(isIOS()||[i.DESKTOP_SAFARI,i.MOBILE_SAFARI].includes(getBrowserName()))throw new Error("Skip createImageBitmap on IOS and Safari");return createImageBitmap(e).then((function(e){try{return a=e,$Try_2_Post()}catch(e){return $Try_2_Catch()}}),$Try_2_Catch)}catch(e){$Try_2_Catch();}}))}function canvasToFile(e,t,i,o,a=1){return new Promise((function(s,f){let l;if("image/png"===t){let c,u,h;return c=e.getContext("2d"),({data:u}=c.getImageData(0,0,e.width,e.height)),h=UPNG.encode([u.buffer],e.width,e.height,4096*a),l=new Blob([h],{type:t}),l.name=i,l.lastModified=o,$If_4.call(this)}{if("image/bmp"===t)return new Promise((t=>r.toBlob(e,t))).then(function(e){try{return l=e,l.name=i,l.lastModified=o,$If_5.call(this)}catch(e){return f(e)}}.bind(this),f);{if("function"==typeof OffscreenCanvas&&e instanceof OffscreenCanvas)return e.convertToBlob({type:t,quality:a}).then(function(e){try{return l=e,l.name=i,l.lastModified=o,$If_6.call(this)}catch(e){return f(e)}}.bind(this),f);{let d;return d=e.toDataURL(t,a),getFilefromDataUrl(d,i,o).then(function(e){try{return l=e,$If_6.call(this)}catch(e){return f(e)}}.bind(this),f)}function $If_6(){return $If_5.call(this)}}function $If_5(){return $If_4.call(this)}}function $If_4(){return s(l)}}))}function cleanupCanvasMemory(e){e.width=0,e.height=0;}function isAutoOrientationInBrowser(){return new Promise((function(e,t){let i,o,a,s;return void 0!==isAutoOrientationInBrowser.cachedResult?e(isAutoOrientationInBrowser.cachedResult):(getFilefromDataUrl("data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/xABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAAAAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==","test.jpg",Date.now()).then((function(r){try{return i=r,drawFileInCanvas(i).then((function(r){try{return o=r[1],canvasToFile(o,i.type,i.name,i.lastModified).then((function(r){try{return a=r,cleanupCanvasMemory(o),drawFileInCanvas(a).then((function(r){try{return s=r[0],isAutoOrientationInBrowser.cachedResult=1===s.width&&2===s.height,e(isAutoOrientationInBrowser.cachedResult)}catch(e){return t(e)}}),t)}catch(e){return t(e)}}),t)}catch(e){return t(e)}}),t)}catch(e){return t(e)}}),t))}))}function getExifOrientation(e){return new Promise(((t,r)=>{const i=new CustomFileReader;i.onload=e=>{const r=new DataView(e.target.result);if(65496!=r.getUint16(0,false))return t(-2);const i=r.byteLength;let o=2;for(;o<i;){if(r.getUint16(o+2,false)<=8)return t(-1);const e=r.getUint16(o,false);if(o+=2,65505==e){if(1165519206!=r.getUint32(o+=2,false))return t(-1);const e=18761==r.getUint16(o+=6,false);o+=r.getUint32(o+4,e);const i=r.getUint16(o,e);o+=2;for(let a=0;a<i;a++)if(274==r.getUint16(o+12*a,e))return t(r.getUint16(o+12*a+8,e))}else {if(65280!=(65280&e))break;o+=r.getUint16(o,false);}}return t(-1)},i.onerror=e=>r(e),i.readAsArrayBuffer(e);}))}function handleMaxWidthOrHeight(e,t){const{width:r}=e,{height:i}=e,{maxWidthOrHeight:o}=t;let a,s=e;return isFinite(o)&&(r>o||i>o)&&([s,a]=getNewCanvasAndCtx(r,i),r>i?(s.width=o,s.height=i/r*o):(s.width=r/i*o,s.height=o),a.drawImage(e,0,0,s.width,s.height),cleanupCanvasMemory(e)),s}function followExifOrientation(e,t){const{width:r}=e,{height:i}=e,[o,a]=getNewCanvasAndCtx(r,i);switch(t>4&&t<9?(o.width=i,o.height=r):(o.width=r,o.height=i),t){case 2:a.transform(-1,0,0,1,r,0);break;case 3:a.transform(-1,0,0,-1,r,i);break;case 4:a.transform(1,0,0,-1,0,i);break;case 5:a.transform(0,1,1,0,0,0);break;case 6:a.transform(0,1,-1,0,i,0);break;case 7:a.transform(0,-1,-1,0,i,r);break;case 8:a.transform(0,-1,1,0,0,r);}return a.drawImage(e,0,0,r,i),cleanupCanvasMemory(e),o}function compress(e,t,r=0){return new Promise((function(i,o){let a,s,f,l,c,u,h,d,A,g,p,m,w,v,b,y,E,F,_,B;function incProgress(e=5){if(t.signal&&t.signal.aborted)throw t.signal.reason;a+=e,t.onProgress(Math.min(a,100));}function setProgress(e){if(t.signal&&t.signal.aborted)throw t.signal.reason;a=Math.min(Math.max(e,a),100),t.onProgress(a);}return a=r,s=t.maxIteration||10,f=1024*t.maxSizeMB*1024,incProgress(),drawFileInCanvas(e,t).then(function(r){try{return [,l]=r,incProgress(),c=handleMaxWidthOrHeight(l,t),incProgress(),new Promise((function(r,i){var o;if(!(o=t.exifOrientation))return getExifOrientation(e).then(function(e){try{return o=e,$If_2.call(this)}catch(e){return i(e)}}.bind(this),i);function $If_2(){return r(o)}return $If_2.call(this)})).then(function(r){try{return u=r,incProgress(),isAutoOrientationInBrowser().then(function(r){try{return h=r?c:followExifOrientation(c,u),incProgress(),d=t.initialQuality||1,A=t.fileType||e.type,canvasToFile(h,A,e.name,e.lastModified,d).then(function(r){try{{if(g=r,incProgress(),p=g.size>f,m=g.size>e.size,!p&&!m)return setProgress(100),i(g);var a;function $Loop_3(){if(s--&&(b>f||b>w)){let t,r;return t=B?.95*_.width:_.width,r=B?.95*_.height:_.height,[E,F]=getNewCanvasAndCtx(t,r),F.drawImage(_,0,0,t,r),d*="image/png"===A?.85:.95,canvasToFile(E,A,e.name,e.lastModified,d).then((function(e){try{return y=e,cleanupCanvasMemory(_),_=E,b=y.size,setProgress(Math.min(99,Math.floor((v-b)/(v-f)*100))),$Loop_3}catch(e){return o(e)}}),o)}return [1]}return w=e.size,v=g.size,b=v,_=h,B=!t.alwaysKeepResolution&&p,(a=function(e){for(;e;){if(e.then)return void e.then(a,o);try{if(e.pop){if(e.length)return e.pop()?$Loop_3_exit.call(this):e;e=$Loop_3;}else e=e.call(this);}catch(e){return o(e)}}}.bind(this))($Loop_3);function $Loop_3_exit(){return cleanupCanvasMemory(_),cleanupCanvasMemory(E),cleanupCanvasMemory(c),cleanupCanvasMemory(h),cleanupCanvasMemory(l),setProgress(100),i(y)}}}catch(u){return o(u)}}.bind(this),o)}catch(e){return o(e)}}.bind(this),o)}catch(e){return o(e)}}.bind(this),o)}catch(e){return o(e)}}.bind(this),o)}))}const l="\nlet scriptImported = false\nself.addEventListener('message', async (e) => {\n const { file, id, imageCompressionLibUrl, options } = e.data\n options.onProgress = (progress) => self.postMessage({ progress, id })\n try {\n if (!scriptImported) {\n // console.log('[worker] importScripts', imageCompressionLibUrl)\n self.importScripts(imageCompressionLibUrl)\n scriptImported = true\n }\n // console.log('[worker] self', self)\n const compressedFile = await imageCompression(file, options)\n self.postMessage({ file: compressedFile, id })\n } catch (e) {\n // console.error('[worker] error', e)\n self.postMessage({ error: e.message + '\\n' + e.stack, id })\n }\n})\n";let c;function compressOnWebWorker(e,t){return new Promise(((r,i)=>{c||(c=function createWorkerScriptURL(e){const t=[];return t.push(e),URL.createObjectURL(new Blob(t))}(l));const o=new Worker(c);o.addEventListener("message",(function handler(e){if(t.signal&&t.signal.aborted)o.terminate();else if(void 0===e.data.progress){if(e.data.error)return i(new Error(e.data.error)),void o.terminate();r(e.data.file),o.terminate();}else t.onProgress(e.data.progress);})),o.addEventListener("error",i),t.signal&&t.signal.addEventListener("abort",(()=>{i(t.signal.reason),o.terminate();})),o.postMessage({file:e,imageCompressionLibUrl:t.libURL,options:{...t,onProgress:void 0,signal:void 0}});}))}function imageCompression(e,t){return new Promise((function(r,i){let o,a,s,f,l,c;if(o={...t},s=0,({onProgress:f}=o),o.maxSizeMB=o.maxSizeMB||Number.POSITIVE_INFINITY,l="boolean"!=typeof o.useWebWorker||o.useWebWorker,delete o.useWebWorker,o.onProgress=e=>{s=e,"function"==typeof f&&f(s);},!(e instanceof Blob||e instanceof CustomFile))return i(new Error("The file given is not an instance of Blob or File"));if(!/^image/.test(e.type))return i(new Error("The file given is not an image"));if(c="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope,!l||"function"!=typeof Worker||c)return compress(e,o).then(function(e){try{return a=e,$If_4.call(this)}catch(e){return i(e)}}.bind(this),i);var u=function(){try{return $If_4.call(this)}catch(e){return i(e)}}.bind(this),$Try_1_Catch=function(t){try{return compress(e,o).then((function(e){try{return a=e,u()}catch(e){return i(e)}}),i)}catch(e){return i(e)}};try{return o.libURL=o.libURL||"https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js",compressOnWebWorker(e,o).then((function(e){try{return a=e,u()}catch(e){return $Try_1_Catch()}}),$Try_1_Catch)}catch(e){$Try_1_Catch();}function $If_4(){try{a.name=e.name,a.lastModified=e.lastModified;}catch(e){}try{o.preserveExif&&"image/jpeg"===e.type&&(!o.fileType||o.fileType&&o.fileType===e.type)&&(a=copyExifWithoutOrientation(e,a));}catch(e){}return r(a)}}))}imageCompression.getDataUrlFromFile=getDataUrlFromFile,imageCompression.getFilefromDataUrl=getFilefromDataUrl,imageCompression.loadImage=loadImage,imageCompression.drawImageInCanvas=drawImageInCanvas,imageCompression.drawFileInCanvas=drawFileInCanvas,imageCompression.canvasToFile=canvasToFile,imageCompression.getExifOrientation=getExifOrientation,imageCompression.handleMaxWidthOrHeight=handleMaxWidthOrHeight,imageCompression.followExifOrientation=followExifOrientation,imageCompression.cleanupCanvasMemory=cleanupCanvasMemory,imageCompression.isAutoOrientationInBrowser=isAutoOrientationInBrowser,imageCompression.approximateBelowMaximumCanvasSizeOfBrowser=approximateBelowMaximumCanvasSizeOfBrowser,imageCompression.copyExifWithoutOrientation=copyExifWithoutOrientation,imageCompression.getBrowserName=getBrowserName,imageCompression.version="2.0.2";
2738
-
2739
- class KritzelImageTool extends KritzelBaseTool {
2740
- fileInput = null;
2741
- maxCompressionSize = 300;
2742
- constructor(core) {
2743
- super(core);
2744
- this.setupFileInput();
2745
- }
2746
- onActivate() {
2747
- this.openFilePicker();
2748
- }
2749
- openFilePicker() {
2750
- if (this._core.store.isDisabled) {
2751
- return;
2752
- }
2753
- this.fileInput.click();
2754
- }
2755
- setupFileInput() {
2756
- this.fileInput = document.createElement('input');
2757
- this.fileInput.type = 'file';
2758
- this.fileInput.accept = 'image/*';
2759
- this.fileInput.style.display = 'none';
2760
- this.fileInput.addEventListener('change', this.handleFileSelect.bind(this));
2761
- this.fileInput.addEventListener('cancel', this.handleCancel.bind(this));
2762
- document.body.appendChild(this.fileInput);
2763
- }
2764
- handleFileSelect(event) {
2765
- const input = event.target;
2766
- if (input.files && input.files[0]) {
2767
- const file = input.files[0];
2768
- imageCompression(file, {
2769
- maxWidthOrHeight: this.maxCompressionSize,
2770
- })
2771
- .then(compressedFile => {
2772
- this.readFile(compressedFile);
2773
- })
2774
- .catch(error => {
2775
- console.error('Error during image compression or processing:', error);
2776
- this.handleCancel();
2777
- });
2778
- }
2779
- else {
2780
- console.info('File selection cancelled by user.');
2781
- this.handleCancel();
2782
- }
2783
- if (input) {
2784
- input.value = '';
2785
- }
2786
- }
2787
- readFile(file) {
2788
- const reader = new FileReader();
2789
- reader.onload = e => {
2790
- const img = new Image();
2791
- img.src = e.target?.result;
2792
- img.onload = () => this.createKritzelImage(img);
2793
- };
2794
- reader.readAsDataURL(file);
2795
- }
2796
- createKritzelImage(img) {
2797
- const image = KritzelImage.create(this._core);
2798
- const { scaledWidth, scaledHeight } = image.calculateScaledDimensions(img);
2799
- image.src = img.src;
2800
- image.width = scaledWidth;
2801
- image.height = scaledHeight;
2802
- image.zIndex = this._core.store.currentZIndex;
2803
- image.centerInViewport();
2804
- this.addImageToStore(image);
2805
- return image;
2806
- }
2807
- addImageToStore(image) {
2808
- const selectionGroup = KritzelSelectionGroup.create(this._core);
2809
- selectionGroup.addOrRemove(image);
2810
- selectionGroup.isSelected = true;
2811
- const addImageCommand = new AddObjectCommand(this._core, this, image);
2812
- const addSelectionGroupCommand = new AddSelectionGroupCommand(this._core, this, selectionGroup);
2813
- this._core.history.executeCommand(new BatchCommand(this._core, this, [addImageCommand, addSelectionGroupCommand]));
2814
- this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
2815
- }
2816
- handleCancel() {
2817
- this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
2818
- }
2819
- }
2820
-
2821
- exports.AddObjectCommand = AddObjectCommand;
2822
- exports.AddSelectionGroupCommand = AddSelectionGroupCommand;
2823
- exports.BatchCommand = BatchCommand;
2824
- exports.DEFAULT_BRUSH_CONFIG = DEFAULT_BRUSH_CONFIG;
2825
- exports.DEFAULT_TEXT_CONFIG = DEFAULT_TEXT_CONFIG;
2826
- exports.KritzelBaseCommand = KritzelBaseCommand;
2827
- exports.KritzelBaseHandler = KritzelBaseHandler;
2828
- exports.KritzelBaseTool = KritzelBaseTool;
2829
- exports.KritzelBrushTool = KritzelBrushTool;
2830
- exports.KritzelEraserTool = KritzelEraserTool;
2831
- exports.KritzelEventHelper = KritzelEventHelper;
2832
- exports.KritzelImage = KritzelImage;
2833
- exports.KritzelImageTool = KritzelImageTool;
2834
- exports.KritzelKeyboardHelper = KritzelKeyboardHelper;
2835
- exports.KritzelPath = KritzelPath;
2836
- exports.KritzelReviver = KritzelReviver;
2837
- exports.KritzelSelectionGroup = KritzelSelectionGroup;
2838
- exports.KritzelSelectionTool = KritzelSelectionTool;
2839
- exports.KritzelText = KritzelText;
2840
- exports.KritzelTextTool = KritzelTextTool;
2841
- exports.KritzelToolRegistry = KritzelToolRegistry;
2842
- exports.KritzelWorkspace = KritzelWorkspace;
2843
- exports.KrtizelSelectionBox = KrtizelSelectionBox;
2844
- exports.ObjectHelper = ObjectHelper;
2845
- exports.RemoveObjectCommand = RemoveObjectCommand;
2846
- exports.RemoveSelectionGroupCommand = RemoveSelectionGroupCommand;
2847
- exports.UpdateObjectCommand = UpdateObjectCommand;
2848
- //# sourceMappingURL=index-Clh2g9JM.js.map
2849
-
2850
- //# sourceMappingURL=index-Clh2g9JM.js.map