kritzel-stencil 0.1.21 → 0.1.23

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 (43) hide show
  1. package/dist/cjs/{default-line-tool.config-Bva9deYM.js → default-line-tool.config-Ba74O1gD.js} +31 -9
  2. package/dist/cjs/index.cjs.js +1 -1
  3. package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js +127 -114
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/stencil.cjs.js +1 -1
  6. package/dist/collection/classes/objects/shape.class.js +9 -3
  7. package/dist/collection/classes/objects/text.class.js +19 -3
  8. package/dist/collection/classes/tools/text-tool.class.js +3 -3
  9. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +20 -34
  10. package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +171 -15
  11. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +29 -72
  12. package/dist/collection/constants/version.js +1 -1
  13. package/dist/components/index.js +1 -1
  14. package/dist/components/kritzel-controls.js +1 -1
  15. package/dist/components/kritzel-editor.js +1 -1
  16. package/dist/components/kritzel-engine.js +1 -1
  17. package/dist/components/kritzel-settings.js +1 -1
  18. package/dist/components/kritzel-tool-config.js +1 -1
  19. package/dist/components/kritzel-tooltip.js +1 -1
  20. package/dist/components/p-0YNMEgri.js +1 -0
  21. package/dist/components/p-B1qfRBi0.js +1 -0
  22. package/dist/components/{p-Dmy0R-7y.js → p-DAPeFBqC.js} +1 -1
  23. package/dist/components/{p-CYX7RMRZ.js → p-DYAnRoi2.js} +1 -1
  24. package/dist/components/{p-BsvZ2juR.js → p-IGA64WxD.js} +1 -1
  25. package/dist/components/{p-BbHELXEC.js → p-mPdux0tA.js} +2 -2
  26. package/dist/esm/{default-line-tool.config-DDIFE6oX.js → default-line-tool.config-BW07ZETV.js} +31 -9
  27. package/dist/esm/index.js +2 -2
  28. package/dist/esm/kritzel-back-to-content_32.entry.js +127 -114
  29. package/dist/esm/loader.js +1 -1
  30. package/dist/esm/stencil.js +1 -1
  31. package/dist/stencil/index.esm.js +1 -1
  32. package/dist/stencil/p-55409078.entry.js +9 -0
  33. package/dist/stencil/p-BW07ZETV.js +1 -0
  34. package/dist/stencil/stencil.esm.js +1 -1
  35. package/dist/types/components/shared/kritzel-tooltip/kritzel-tooltip.d.ts +11 -1
  36. package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts +3 -11
  37. package/dist/types/components.d.ts +7 -0
  38. package/dist/types/constants/version.d.ts +1 -1
  39. package/package.json +1 -1
  40. package/dist/components/p-BNT9uvII.js +0 -1
  41. package/dist/components/p-DqtvAhfs.js +0 -1
  42. package/dist/stencil/p-3fc743ee.entry.js +0 -9
  43. package/dist/stencil/p-DDIFE6oX.js +0 -1
@@ -16,37 +16,16 @@ export class KritzelControls {
16
16
  theme;
17
17
  isControlsReady;
18
18
  firstConfig = null;
19
- isTooltipVisible = false;
20
19
  isTouchDevice = KritzelDevicesHelper.isTouchDevice();
21
20
  selectedSubOptions = new Map();
22
- openSubMenuControl = null;
23
21
  canScrollLeft = false;
24
22
  canScrollRight = false;
25
23
  needsScrolling = false;
26
24
  displayValues = null;
27
- handleDocumentClick(event) {
28
- if (!this.kritzelEngine) {
29
- return;
30
- }
31
- // Use composedPath to check if click is inside tooltip (works across shadow DOM boundaries)
32
- const path = event.composedPath();
33
- const isInsideTooltip = path.some(el => {
34
- const element = el;
35
- if (element.tagName) {
36
- return element.tagName.toLowerCase() === 'kritzel-tooltip' || element.classList?.contains('kritzel-tooltip');
37
- }
38
- return false;
39
- });
40
- if (isInsideTooltip) {
41
- return;
42
- }
43
- this.isTooltipVisible = false;
44
- }
45
25
  handleKeyDown(event) {
46
26
  if (event.key === 'Escape') {
47
27
  event.preventDefault();
48
28
  this.closeTooltip();
49
- this.openSubMenuControl = null;
50
29
  this.kritzelEngine?.enable();
51
30
  }
52
31
  }
@@ -55,8 +34,7 @@ export class KritzelControls {
55
34
  if (this.activeControl?.tool) {
56
35
  this.updateDisplayValues(this.activeControl.tool);
57
36
  }
58
- this.isTooltipVisible = false;
59
- this.openSubMenuControl = null;
37
+ this.closeTooltip();
60
38
  }
61
39
  handleSelectionChange() {
62
40
  if (this.activeControl?.tool instanceof KritzelSelectionTool) {
@@ -69,11 +47,11 @@ export class KritzelControls {
69
47
  }
70
48
  }
71
49
  async closeTooltip() {
72
- this.isTooltipVisible = false;
50
+ document.dispatchEvent(new CustomEvent('kritzelTooltipCloseAll'));
73
51
  }
74
52
  kritzelEngine = null;
75
- tooltipRef = null;
76
53
  toolsScrollRef = null;
54
+ configTriggerRef = null;
77
55
  get activeToolAsTextTool() {
78
56
  return this.activeControl?.tool;
79
57
  }
@@ -129,14 +107,23 @@ export class KritzelControls {
129
107
  componentDidLoad() {
130
108
  this.updateScrollIndicators();
131
109
  }
110
+ componentDidRender() {
111
+ this.updateScrollIndicators();
112
+ }
132
113
  updateScrollIndicators() {
133
114
  if (!this.toolsScrollRef)
134
115
  return;
135
116
  const { scrollLeft, scrollWidth, clientWidth } = this.toolsScrollRef;
136
117
  const threshold = 2; // Small threshold to account for rounding
137
- this.canScrollLeft = scrollLeft > threshold;
138
- this.canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
139
- this.needsScrolling = scrollWidth > clientWidth;
118
+ const canScrollLeft = scrollLeft > threshold;
119
+ const canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
120
+ const needsScrolling = scrollWidth > clientWidth;
121
+ if (this.canScrollLeft !== canScrollLeft)
122
+ this.canScrollLeft = canScrollLeft;
123
+ if (this.canScrollRight !== canScrollRight)
124
+ this.canScrollRight = canScrollRight;
125
+ if (this.needsScrolling !== needsScrolling)
126
+ this.needsScrolling = needsScrolling;
140
127
  }
141
128
  handleToolsScroll = () => {
142
129
  this.updateScrollIndicators();
@@ -175,20 +162,10 @@ export class KritzelControls {
175
162
  await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
176
163
  }
177
164
  }
178
- handleConfigClick(event) {
179
- event.stopPropagation();
180
- this.isTooltipVisible = !this.isTooltipVisible;
181
- setTimeout(() => {
182
- this.tooltipRef?.focusContent();
183
- }, 100);
184
- }
185
165
  async handleToolChange(event) {
186
166
  this.activeControl = { ...this.activeControl, tool: event.detail };
187
167
  await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
188
168
  }
189
- handleTooltipClosed() {
190
- this.isTooltipVisible = false;
191
- }
192
169
  /**
193
170
  * Get the currently selected sub-option for a control.
194
171
  * Returns the first sub-option as default if none is selected.
@@ -198,18 +175,6 @@ export class KritzelControls {
198
175
  return undefined;
199
176
  return this.selectedSubOptions.get(control.name) || control.subOptions[0];
200
177
  }
201
- /**
202
- * Toggle the submenu for a split-button control
203
- */
204
- toggleSubMenu(event, control) {
205
- event.stopPropagation();
206
- if (this.openSubMenuControl?.name === control.name) {
207
- this.openSubMenuControl = null;
208
- }
209
- else {
210
- this.openSubMenuControl = control;
211
- }
212
- }
213
178
  /**
214
179
  * Select a sub-option and update the tool property
215
180
  */
@@ -223,7 +188,7 @@ export class KritzelControls {
223
188
  control.tool[option.toolProperty] = option.value;
224
189
  }
225
190
  // Close the submenu
226
- this.openSubMenuControl = null;
191
+ this.closeTooltip();
227
192
  // Activate this control
228
193
  await this.handleControlClick(control);
229
194
  }
@@ -236,23 +201,17 @@ export class KritzelControls {
236
201
  // Separate tool controls from config control
237
202
  const toolControls = this.controls.filter(c => c.type === 'tool');
238
203
  const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
239
- return (h(Host, { key: 'cb713bc59241300837519145031c1d15109e28c3', class: {
204
+ return (h(Host, { key: '0cb024600ea4730de6f70731ba481f4a1b397335', class: {
240
205
  mobile: this.isTouchDevice,
241
- } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '62cb00da2676739aa472d69e8e453501bd78e408', style: {
206
+ } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'e1e3f51d18f8431b55ad03fc4ee571006a8b99a3', style: {
242
207
  position: 'absolute',
243
208
  bottom: '56px',
244
209
  left: '12px',
245
- }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '0376615eb976d961cb17ba02aab36f4127343899', class: "kritzel-controls" }, h("div", { key: 'c72373afc1eb04fb39868d107cb0a35c846097fe', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '1aa1ece36dda200a4c62529c08f1787d8bd4b534', class: "kritzel-tools-scroll", ref: el => {
246
- this.toolsScrollRef = el;
247
- // Update indicators when ref is set
248
- if (el)
249
- this.updateScrollIndicators();
250
- }, onScroll: this.handleToolsScroll }, toolControls.map(control => {
210
+ }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '3b3dc23abaf8aa0087ad9df10c2fdc150c7f9aa1', class: "kritzel-controls" }, h("div", { key: 'cf8cbd5042ec9f261eb76af29cceb375fbfcc658', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '1ebb0c83e09df88e6c53fee7ecf151688d847f2a', class: "kritzel-tools-scroll", ref: el => this.toolsScrollRef = el, onScroll: this.handleToolsScroll }, toolControls.map(control => {
251
211
  // Check if this control has sub-options (split-button)
252
212
  if (control.subOptions?.length) {
253
213
  const selectedSubOption = this.getSelectedSubOption(control);
254
214
  const isActive = this.activeControl?.name === control.name;
255
- const isSubMenuOpen = this.openSubMenuControl?.name === control.name;
256
215
  return (h("div", { class: {
257
216
  'kritzel-control-split': true,
258
217
  'selected': isActive,
@@ -262,7 +221,10 @@ export class KritzelControls {
262
221
  } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
263
222
  'kritzel-control-dropdown': true,
264
223
  'visible': isActive,
265
- }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
224
+ }, ref: el => {
225
+ if (el)
226
+ control._triggerRef = el;
227
+ }, "aria-label": "Select shape type", tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { anchorElement: control._anchorRef, triggerElement: control._triggerRef }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
266
228
  'kritzel-submenu-item': true,
267
229
  'active': option.id === selectedSubOption?.id,
268
230
  }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
@@ -272,12 +234,15 @@ export class KritzelControls {
272
234
  'kritzel-control': true,
273
235
  'selected': this.activeControl?.name === control?.name,
274
236
  }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
275
- })), h("div", { key: 'a3129881a9c992b6fbd94b66a6325d46072dba60', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
237
+ })), h("div", { key: '725c36b2e36168e5a9a97a3fceded3f110c499d6', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
276
238
  'kritzel-config-container': true,
277
239
  'visible': hasConfigUI,
278
- }, key: configControl.name }, h("div", { key: '57de6641291894b0e507e90987ea94a9103c25ca', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '182317753d162abe9c804a4757ed19505bb3b487', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("kritzel-tool-config", { key: '13ecc34147d44b2bb12eb0008eec179db55f5840', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'bc4053cf9feb69c2962fe5a86cd7cf811b03e971', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
240
+ }, key: configControl.name }, h("div", { key: '2bfdb194ee2044529427b5806dd2d1b2bf6a32b5', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'bc64cf1a330b9620536f1b044559c3f45756ab23', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'd991a450027ec60fa8a46c2f877dc92e5bf1e73a', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '09883ce02e94993849e89bd284c65ea7af59261f', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", ref: el => {
241
+ if (el)
242
+ this.configTriggerRef = el;
243
+ }, onKeyDown: event => {
279
244
  if (event.key === 'Enter') {
280
- this.handleConfigClick?.(event);
245
+ event.target.click();
281
246
  }
282
247
  }, style: {
283
248
  cursor: 'pointer',
@@ -427,10 +392,8 @@ export class KritzelControls {
427
392
  static get states() {
428
393
  return {
429
394
  "firstConfig": {},
430
- "isTooltipVisible": {},
431
395
  "isTouchDevice": {},
432
396
  "selectedSubOptions": {},
433
- "openSubMenuControl": {},
434
397
  "canScrollLeft": {},
435
398
  "canScrollRight": {},
436
399
  "needsScrolling": {},
@@ -485,12 +448,6 @@ export class KritzelControls {
485
448
  }
486
449
  static get listeners() {
487
450
  return [{
488
- "name": "click",
489
- "method": "handleDocumentClick",
490
- "target": "document",
491
- "capture": false,
492
- "passive": false
493
- }, {
494
451
  "name": "keydown",
495
452
  "method": "handleKeyDown",
496
453
  "target": "window",
@@ -3,4 +3,4 @@
3
3
  * This file is auto-generated by the version bump scripts.
4
4
  * Do not modify manually.
5
5
  */
6
- export const KRITZEL_VERSION = '0.1.21';
6
+ export const KRITZEL_VERSION = '0.1.23';
@@ -1 +1 @@
1
- export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-Cj-I2_Og.js";export{e as KritzelBrushTool,d as KritzelGroup,b as KritzelImage,c as KritzelLine,f as KritzelLineTool,a as KritzelPath,h as KritzelSelectionTool,K as KritzelText,g as KritzelTextTool}from"./p-Dmy0R-7y.js";import{w as t,a as i,t as o,r as n,b as u,e as m,c as p,d as z,f as C,g as k,s as y,h as x,i as S,v as j,j as T,o as w,k as v,l as B,m as M,O as P,n as W,p as U,q as H,u as L,x as A,y as O,z as N,A as _,B as $,C as R,H as X,D as Y}from"./p-BbHELXEC.js";export{I as IndexedDBSyncProvider,J as KritzelAnchorManager,G as KritzelAppStateMap,F as KritzelCursorHelper,K as KritzelEraserTool,E as KritzelImageTool}from"./p-BbHELXEC.js";export{K as KritzelWorkspace}from"./p-n789Y3S-.js";export{D as DEFAULT_BRUSH_CONFIG,b as DEFAULT_LINE_TOOL_CONFIG,a as DEFAULT_TEXT_CONFIG,KritzelEditor,defineCustomElement as defineCustomElementKritzelEditor}from"./kritzel-editor.js";export{K as KritzelThemeManager,d as darkTheme,l as lightTheme}from"./p-BX4JyoOd.js";export{KritzelBackToContent,defineCustomElement as defineCustomElementKritzelBackToContent}from"./kritzel-back-to-content.js";export{KritzelBrushStyle,defineCustomElement as defineCustomElementKritzelBrushStyle}from"./kritzel-brush-style.js";export{KritzelColor,defineCustomElement as defineCustomElementKritzelColor}from"./kritzel-color.js";export{KritzelColorPalette,defineCustomElement as defineCustomElementKritzelColorPalette}from"./kritzel-color-palette.js";export{KritzelContextMenu,defineCustomElement as defineCustomElementKritzelContextMenu}from"./kritzel-context-menu.js";export{KritzelControls,defineCustomElement as defineCustomElementKritzelControls}from"./kritzel-controls.js";export{KritzelCursorTrail,defineCustomElement as defineCustomElementKritzelCursorTrail}from"./kritzel-cursor-trail.js";export{KritzelDialog,defineCustomElement as defineCustomElementKritzelDialog}from"./kritzel-dialog.js";export{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.js";export{KritzelExport,defineCustomElement as defineCustomElementKritzelExport}from"./kritzel-export.js";export{KritzelFont,defineCustomElement as defineCustomElementKritzelFont}from"./kritzel-font.js";export{KritzelFontFamily,defineCustomElement as defineCustomElementKritzelFontFamily}from"./kritzel-font-family.js";export{KritzelFontSize,defineCustomElement as defineCustomElementKritzelFontSize}from"./kritzel-font-size.js";export{KritzelIcon,defineCustomElement as defineCustomElementKritzelIcon}from"./kritzel-icon.js";export{KritzelLineEndings,defineCustomElement as defineCustomElementKritzelLineEndings}from"./kritzel-line-endings.js";export{KritzelMasterDetail,defineCustomElement as defineCustomElementKritzelMasterDetail}from"./kritzel-master-detail.js";export{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelMoreMenu,defineCustomElement as defineCustomElementKritzelMoreMenu}from"./kritzel-more-menu.js";export{KritzelNumericInput,defineCustomElement as defineCustomElementKritzelNumericInput}from"./kritzel-numeric-input.js";export{KritzelOpacitySlider,defineCustomElement as defineCustomElementKritzelOpacitySlider}from"./kritzel-opacity-slider.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelSettings,defineCustomElement as defineCustomElementKritzelSettings}from"./kritzel-settings.js";export{KritzelShapeFill,defineCustomElement as defineCustomElementKritzelShapeFill}from"./kritzel-shape-fill.js";export{KritzelSlideToggle,defineCustomElement as defineCustomElementKritzelSlideToggle}from"./kritzel-slide-toggle.js";export{KritzelSplitButton,defineCustomElement as defineCustomElementKritzelSplitButton}from"./kritzel-split-button.js";export{KritzelStrokeSize,defineCustomElement as defineCustomElementKritzelStrokeSize}from"./kritzel-stroke-size.js";export{KritzelToolConfig,defineCustomElement as defineCustomElementKritzelToolConfig}from"./kritzel-tool-config.js";export{KritzelTooltip,defineCustomElement as defineCustomElementKritzelTooltip}from"./kritzel-tooltip.js";export{KritzelUtilityPanel,defineCustomElement as defineCustomElementKritzelUtilityPanel}from"./kritzel-utility-panel.js";export{KritzelWorkspaceManager,defineCustomElement as defineCustomElementKritzelWorkspaceManager}from"./kritzel-workspace-manager.js";class q{doc;channel;_synced=!1;constructor(e,t,s){this.doc=t,this.channel=new BroadcastChannel(e),this.channel.onmessage=e=>{this.handleMessage(e.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+e)}handleDocUpdate=(e,s)=>{if(s!==this){const s=C();t(s,0),i(s,e),this.channel.postMessage(o(s))}};handleMessage(e){const s=k(new Uint8Array(e));switch(n(s)){case 0:const e=u(s);p(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=u(s),r=m(this.doc,n);if(r.length>0){const e=C();t(e,0),i(e,r),this.channel.postMessage(o(e))}}}broadcastSync(){const e=C();t(e,2),i(e,z(this.doc)),this.channel.postMessage(o(e))}async connect(){if(!this._synced)return new Promise((e=>{const t=()=>{this._synced?e():setTimeout(t,50)};t()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const Q=new Map,V="undefined"==typeof BroadcastChannel?class{constructor(e){this.room=e,this.onmessage=null,this._onChange=t=>t.key===e&&null!==this.onmessage&&this.onmessage({data:S(t.newValue||"")}),w(this._onChange)}postMessage(e){j.setItem(this.room,T(v(e)))}close(){B(this._onChange)}}:BroadcastChannel,Z=e=>y(Q,e,(()=>{const t=x(),s=new V(e);return s.onmessage=e=>t.forEach((t=>t(e.data,"broadcastchannel"))),{bc:s,subs:t}})),ee=(e,t,s=null)=>{const i=Z(e);i.bc.postMessage(t),i.subs.forEach((e=>e(t,s)))},te=(e,s)=>{t(e,0);const o=z(s);i(e,o)},se=(e,s,o)=>{t(e,1),i(e,m(s,o))},ie=(e,t,s,i)=>{try{p(t,u(e),s)}catch(e){null!=i&&i(e),console.error("Caught error while handling a Yjs update",e)}},oe=ie;class ne extends P{constructor(e){super(),this.doc=e,this.clientID=e.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const e=U();null!==this.getLocalState()&&15e3<=e-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const t=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=e-s.lastUpdated&&this.states.has(i)&&t.push(i)})),t.length>0&&re(this,t,"timeout")}),W(3e3)),e.on("destroy",(()=>{this.destroy()})),this.setLocalState({})}destroy(){this.emit("destroy",[this]),this.setLocalState(null),super.destroy(),clearInterval(this._checkInterval)}getLocalState(){return this.states.get(this.clientID)||null}setLocalState(e){const t=this.clientID,s=this.meta.get(t),i=void 0===s?0:s.clock+1,o=this.states.get(t);null===e?this.states.delete(t):this.states.set(t,e),this.meta.set(t,{clock:i,lastUpdated:U()});const n=[],r=[],l=[],a=[];null===e?a.push(t):null==o?null!=e&&n.push(t):(r.push(t),H(o,e)||l.push(t)),(n.length>0||l.length>0||a.length>0)&&this.emit("change",[{added:n,updated:l,removed:a},"local"]),this.emit("update",[{added:n,updated:r,removed:a},"local"])}setLocalStateField(e,t){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[e]:t})}getStates(){return this.states}}const re=(e,t,s)=>{const i=[];for(let s=0;s<t.length;s++){const o=t[s];if(e.states.has(o)){if(e.states.delete(o),o===e.clientID){const t=e.meta.get(o);e.meta.set(o,{clock:t.clock+1,lastUpdated:U()})}i.push(o)}}i.length>0&&(e.emit("change",[{added:[],updated:[],removed:i},s]),e.emit("update",[{added:[],updated:[],removed:i},s]))},le=(e,s,i=e.states)=>{const n=s.length,r=C();t(r,n);for(let o=0;o<n;o++){const n=s[o],l=i.get(n)||null,a=e.meta.get(n).clock;t(r,n),t(r,a),L(r,JSON.stringify(l))}return o(r)},ae=[];ae[0]=(e,s,i,o)=>{t(e,0);const r=((e,t,s,i,o)=>{const r=n(e);switch(r){case 0:((e,t,s)=>{se(t,s,u(e))})(e,t,s);break;case 1:ie(e,s,i,o);break;case 2:oe(e,s,i,o);break;default:throw Error("Unknown message type")}return r})(s,e,i.doc,i);o&&1===r&&!i.synced&&(i.synced=!0)},ae[3]=(e,s,o)=>{t(e,1),i(e,le(o.awareness,Array.from(o.awareness.getStates().keys())))},ae[1]=(e,t,s)=>{((e,t,s)=>{const i=k(t),o=U(),r=[],l=[],a=[],c=[],d=n(i);for(let t=0;t<d;t++){const t=n(i);let s=n(i);const d=JSON.parse(M(i)),h=e.meta.get(t),u=e.states.get(t),m=void 0===h?0:h.clock;(m<s||m===s&&null===d&&e.states.has(t))&&(null===d?t===e.clientID&&null!=e.getLocalState()?s++:e.states.delete(t):e.states.set(t,d),e.meta.set(t,{clock:s,lastUpdated:o}),void 0===h&&null!==d?r.push(t):void 0!==h&&null===d?c.push(t):null!==d&&(H(d,u)||a.push(t),l.push(t)))}(r.length>0||a.length>0||c.length>0)&&e.emit("change",[{added:r,updated:a,removed:c},s]),(r.length>0||l.length>0||c.length>0)&&e.emit("update",[{added:r,updated:l,removed:c},s])})(s.awareness,u(t),s)},ae[2]=(e,t,s)=>{((e,t,s)=>{0===n(e)&&s(0,M(e))})(t,0,((e,t)=>ce(s,t)))};const ce=(e,t)=>console.warn(`Permission denied to access ${e.url}.\n${t}`),de=(e,t,s)=>{const i=k(t),o=C(),r=n(i),l=e.messageHandlers[r];return l?l(o,i,e,s,r):console.error("Unable to compute message"),o},he=(e,t,s)=>{t===e.ws&&(e.emit("connection-close",[s,e]),e.ws=null,t.close(),e.wsconnecting=!1,e.wsconnected?(e.wsconnected=!1,e.synced=!1,re(e.awareness,Array.from(e.awareness.getStates().keys()).filter((t=>t!==e.doc.clientID)),e),e.emit("status",[{status:"disconnected"}])):e.wsUnsuccessfulReconnects++,setTimeout(ue,$(100*R(2,e.wsUnsuccessfulReconnects),e.maxBackoffTime),e))},ue=e=>{if(e.shouldConnect&&null===e.ws){const s=new e._WS(e.url,e.protocols);s.binaryType="arraybuffer",e.ws=s,e.wsconnecting=!0,e.wsconnected=!1,e.synced=!1,s.onmessage=t=>{e.wsLastMessageReceived=U();const i=de(e,new Uint8Array(t.data),!0);N(i)>1&&s.send(o(i))},s.onerror=t=>{e.emit("connection-error",[t,e])},s.onclose=t=>{he(e,s,t)},s.onopen=()=>{e.wsLastMessageReceived=U(),e.wsconnecting=!1,e.wsconnected=!0,e.wsUnsuccessfulReconnects=0,e.emit("status",[{status:"connected"}]);const n=C();if(t(n,0),te(n,e.doc),s.send(o(n)),null!==e.awareness.getLocalState()){const n=C();t(n,1),i(n,le(e.awareness,[e.doc.clientID])),s.send(o(n))}},e.emit("status",[{status:"connecting"}])}},me=(e,t)=>{const s=e.ws;e.wsconnected&&s&&s.readyState===s.OPEN&&s.send(t),e.bcconnected&&ee(e.bcChannel,t,e)};class fe extends O{constructor(e,s,n,{connect:r=!0,awareness:l=new ne(n),params:a={},protocols:c=[],WebSocketPolyfill:d=WebSocket,resyncInterval:h=-1,maxBackoffTime:u=2500,disableBc:m=!1}={}){for(super();"/"===e[e.length-1];)e=e.slice(0,e.length-1);this.serverUrl=e,this.bcChannel=e+"/"+s,this.maxBackoffTime=u,this.params=a,this.protocols=c,this.roomname=s,this.doc=n,this._WS=d,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=ae.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=r,this._resyncInterval=0,h>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const e=C();t(e,0),te(e,n),this.ws.send(o(e))}}),h)),this._bcSubscriber=(e,t)=>{if(t!==this){const t=de(this,new Uint8Array(e),!1);N(t)>1&&ee(this.bcChannel,o(t),this)}},this._updateHandler=(e,s)=>{if(s!==this){const s=C();t(s,0),((e,s)=>{t(e,2),i(e,s)})(s,e),me(this,o(s))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:e,updated:s,removed:n})=>{const r=e.concat(s).concat(n),a=C();t(a,1),i(a,le(l,r)),me(this,o(a))},this._exitHandler=()=>{re(this.awareness,[n.clientID],"app closed")},_&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),l.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<U()-this.wsLastMessageReceived&&he(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const e=(()=>A(this.params,((e,t)=>`${encodeURIComponent(t)}=${encodeURIComponent(e)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===e.length?"":"?"+e)}get synced(){return this._synced}set synced(e){this._synced!==e&&(this._synced=e,this.emit("synced",[e]),this.emit("sync",[e]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),_&&"undefined"!=typeof process&&process.off("exit",this._exitHandler),this.awareness.off("update",this._awarenessUpdateHandler),this.doc.off("update",this._updateHandler),super.destroy()}connectBc(){if(this.disableBc)return;this.bcconnected||(((e,t)=>{Z(this.bcChannel).subs.add(t)})(0,this._bcSubscriber),this.bcconnected=!0);const e=C();t(e,0),te(e,this.doc),ee(this.bcChannel,o(e),this);const s=C();t(s,0),se(s,this.doc),ee(this.bcChannel,o(s),this);const n=C();t(n,3),ee(this.bcChannel,o(n),this);const r=C();t(r,1),i(r,le(this.awareness,[this.doc.clientID])),ee(this.bcChannel,o(r),this)}disconnectBc(){const e=C();t(e,1),i(e,le(this.awareness,[this.doc.clientID],new Map)),me(this,o(e)),this.bcconnected&&(((e,t)=>{const s=Z(e);s.subs.delete(t)&&0===s.subs.size&&(s.bc.close(),Q.delete(e))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&he(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(ue(this),this.connectBc())}}class pe{provider;isConnected=!1;constructor(e,t,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||e;this.provider=new fe(i,o,t,{params:s?.params,protocols:s?.protocols,WebSocketPolyfill:s?.WebSocketPolyfill,awareness:s?.awareness,maxBackoffTime:s?.maxBackoffTime,disableBc:!0}),this.setupEventListeners(),console.info(`WebSocket Provider initialized: ${i}/${o}`)}static with(e){return{create:(t,s)=>new pe(t,s,e)}}setupEventListeners(){this.provider.on("status",(({status:e})=>{"connected"===e?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===e&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(e=>{e&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((e,t)=>{const s=setTimeout((()=>{t(Error("WebSocket connection timeout"))}),1e4),i=({status:t})=>{"connected"===t&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,e())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,e())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class ze{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(e,t,s){const i=s?.name||e,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||ze.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const e={websocketProvider:n,name:i,document:t,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(e.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(e.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(e.onStatus=s.onStatus),this.provider=new X(e),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const e={url:o,name:i,document:t,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(e.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(e.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(e.onStatus=s.onStatus),s?.WebSocketPolyfill&&(e.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new X(e),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(e){if(ze.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),ze.sharedWebSocketProvider;const t={url:e.url};return e.WebSocketPolyfill&&(t.WebSocketPolyfill=e.WebSocketPolyfill),e.onConnect&&(t.onConnect=e.onConnect),e.onDisconnect&&(t.onDisconnect=e.onDisconnect),e.onStatus&&(t.onStatus=e.onStatus),ze.sharedWebSocketProvider=new Y(t),console.info("Shared Hocuspocus WebSocket created: "+e.url),ze.sharedWebSocketProvider}static destroySharedWebSocket(){ze.sharedWebSocketProvider&&(ze.sharedWebSocketProvider.destroy(),ze.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return ze.sharedWebSocketProvider}static with(e){return{create:(t,s)=>new ze(t,s,e)}}async connect(){if(!this.isSynced)return new Promise(((e,t)=>{const s=setTimeout((()=>{t(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),e()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void e();this.isConnected||this.usesSharedSocket||this.provider.connect()}))}disconnect(){this.provider&&(this.usesSharedSocket?this.provider.detach():this.provider.disconnect()),this.isConnected=!1,this.isSynced=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1,this.isSynced=!1}}export{q as BroadcastSyncProvider,ze as HocuspocusSyncProvider,pe as WebSocketSyncProvider}
1
+ export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-Cj-I2_Og.js";export{e as KritzelBrushTool,d as KritzelGroup,b as KritzelImage,c as KritzelLine,f as KritzelLineTool,a as KritzelPath,h as KritzelSelectionTool,K as KritzelText,g as KritzelTextTool}from"./p-DAPeFBqC.js";import{w as t,a as i,t as o,r as n,b as u,e as m,c as p,d as z,f as C,g as k,s as x,h as y,i as S,v as j,j as T,o as w,k as v,l as P,m as M,O as B,n as W,p as U,q as A,u as H,x as L,y as O,z as N,A as _,B as $,C as R,H as q,D as X}from"./p-mPdux0tA.js";export{I as IndexedDBSyncProvider,J as KritzelAnchorManager,G as KritzelAppStateMap,F as KritzelCursorHelper,K as KritzelEraserTool,E as KritzelImageTool}from"./p-mPdux0tA.js";export{K as KritzelWorkspace}from"./p-n789Y3S-.js";export{D as DEFAULT_BRUSH_CONFIG,b as DEFAULT_LINE_TOOL_CONFIG,a as DEFAULT_TEXT_CONFIG,KritzelEditor,defineCustomElement as defineCustomElementKritzelEditor}from"./kritzel-editor.js";export{K as KritzelThemeManager,d as darkTheme,l as lightTheme}from"./p-BX4JyoOd.js";export{KritzelBackToContent,defineCustomElement as defineCustomElementKritzelBackToContent}from"./kritzel-back-to-content.js";export{KritzelBrushStyle,defineCustomElement as defineCustomElementKritzelBrushStyle}from"./kritzel-brush-style.js";export{KritzelColor,defineCustomElement as defineCustomElementKritzelColor}from"./kritzel-color.js";export{KritzelColorPalette,defineCustomElement as defineCustomElementKritzelColorPalette}from"./kritzel-color-palette.js";export{KritzelContextMenu,defineCustomElement as defineCustomElementKritzelContextMenu}from"./kritzel-context-menu.js";export{KritzelControls,defineCustomElement as defineCustomElementKritzelControls}from"./kritzel-controls.js";export{KritzelCursorTrail,defineCustomElement as defineCustomElementKritzelCursorTrail}from"./kritzel-cursor-trail.js";export{KritzelDialog,defineCustomElement as defineCustomElementKritzelDialog}from"./kritzel-dialog.js";export{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.js";export{KritzelExport,defineCustomElement as defineCustomElementKritzelExport}from"./kritzel-export.js";export{KritzelFont,defineCustomElement as defineCustomElementKritzelFont}from"./kritzel-font.js";export{KritzelFontFamily,defineCustomElement as defineCustomElementKritzelFontFamily}from"./kritzel-font-family.js";export{KritzelFontSize,defineCustomElement as defineCustomElementKritzelFontSize}from"./kritzel-font-size.js";export{KritzelIcon,defineCustomElement as defineCustomElementKritzelIcon}from"./kritzel-icon.js";export{KritzelLineEndings,defineCustomElement as defineCustomElementKritzelLineEndings}from"./kritzel-line-endings.js";export{KritzelMasterDetail,defineCustomElement as defineCustomElementKritzelMasterDetail}from"./kritzel-master-detail.js";export{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelMoreMenu,defineCustomElement as defineCustomElementKritzelMoreMenu}from"./kritzel-more-menu.js";export{KritzelNumericInput,defineCustomElement as defineCustomElementKritzelNumericInput}from"./kritzel-numeric-input.js";export{KritzelOpacitySlider,defineCustomElement as defineCustomElementKritzelOpacitySlider}from"./kritzel-opacity-slider.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelSettings,defineCustomElement as defineCustomElementKritzelSettings}from"./kritzel-settings.js";export{KritzelShapeFill,defineCustomElement as defineCustomElementKritzelShapeFill}from"./kritzel-shape-fill.js";export{KritzelSlideToggle,defineCustomElement as defineCustomElementKritzelSlideToggle}from"./kritzel-slide-toggle.js";export{KritzelSplitButton,defineCustomElement as defineCustomElementKritzelSplitButton}from"./kritzel-split-button.js";export{KritzelStrokeSize,defineCustomElement as defineCustomElementKritzelStrokeSize}from"./kritzel-stroke-size.js";export{KritzelToolConfig,defineCustomElement as defineCustomElementKritzelToolConfig}from"./kritzel-tool-config.js";export{KritzelTooltip,defineCustomElement as defineCustomElementKritzelTooltip}from"./kritzel-tooltip.js";export{KritzelUtilityPanel,defineCustomElement as defineCustomElementKritzelUtilityPanel}from"./kritzel-utility-panel.js";export{KritzelWorkspaceManager,defineCustomElement as defineCustomElementKritzelWorkspaceManager}from"./kritzel-workspace-manager.js";class Y{doc;channel;_synced=!1;constructor(e,t,s){this.doc=t,this.channel=new BroadcastChannel(e),this.channel.onmessage=e=>{this.handleMessage(e.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+e)}handleDocUpdate=(e,s)=>{if(s!==this){const s=C();t(s,0),i(s,e),this.channel.postMessage(o(s))}};handleMessage(e){const s=k(new Uint8Array(e));switch(n(s)){case 0:const e=u(s);p(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=u(s),r=m(this.doc,n);if(r.length>0){const e=C();t(e,0),i(e,r),this.channel.postMessage(o(e))}}}broadcastSync(){const e=C();t(e,2),i(e,z(this.doc)),this.channel.postMessage(o(e))}async connect(){if(!this._synced)return new Promise((e=>{const t=()=>{this._synced?e():setTimeout(t,50)};t()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const Q=new Map,V="undefined"==typeof BroadcastChannel?class{constructor(e){this.room=e,this.onmessage=null,this._onChange=t=>t.key===e&&null!==this.onmessage&&this.onmessage({data:S(t.newValue||"")}),w(this._onChange)}postMessage(e){j.setItem(this.room,T(v(e)))}close(){P(this._onChange)}}:BroadcastChannel,Z=e=>x(Q,e,(()=>{const t=y(),s=new V(e);return s.onmessage=e=>t.forEach((t=>t(e.data,"broadcastchannel"))),{bc:s,subs:t}})),ee=(e,t,s=null)=>{const i=Z(e);i.bc.postMessage(t),i.subs.forEach((e=>e(t,s)))},te=(e,s)=>{t(e,0);const o=z(s);i(e,o)},se=(e,s,o)=>{t(e,1),i(e,m(s,o))},ie=(e,t,s,i)=>{try{p(t,u(e),s)}catch(e){null!=i&&i(e),console.error("Caught error while handling a Yjs update",e)}},oe=ie;class ne extends B{constructor(e){super(),this.doc=e,this.clientID=e.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const e=U();null!==this.getLocalState()&&15e3<=e-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const t=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=e-s.lastUpdated&&this.states.has(i)&&t.push(i)})),t.length>0&&re(this,t,"timeout")}),W(3e3)),e.on("destroy",(()=>{this.destroy()})),this.setLocalState({})}destroy(){this.emit("destroy",[this]),this.setLocalState(null),super.destroy(),clearInterval(this._checkInterval)}getLocalState(){return this.states.get(this.clientID)||null}setLocalState(e){const t=this.clientID,s=this.meta.get(t),i=void 0===s?0:s.clock+1,o=this.states.get(t);null===e?this.states.delete(t):this.states.set(t,e),this.meta.set(t,{clock:i,lastUpdated:U()});const n=[],r=[],l=[],a=[];null===e?a.push(t):null==o?null!=e&&n.push(t):(r.push(t),A(o,e)||l.push(t)),(n.length>0||l.length>0||a.length>0)&&this.emit("change",[{added:n,updated:l,removed:a},"local"]),this.emit("update",[{added:n,updated:r,removed:a},"local"])}setLocalStateField(e,t){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[e]:t})}getStates(){return this.states}}const re=(e,t,s)=>{const i=[];for(let s=0;s<t.length;s++){const o=t[s];if(e.states.has(o)){if(e.states.delete(o),o===e.clientID){const t=e.meta.get(o);e.meta.set(o,{clock:t.clock+1,lastUpdated:U()})}i.push(o)}}i.length>0&&(e.emit("change",[{added:[],updated:[],removed:i},s]),e.emit("update",[{added:[],updated:[],removed:i},s]))},le=(e,s,i=e.states)=>{const n=s.length,r=C();t(r,n);for(let o=0;o<n;o++){const n=s[o],l=i.get(n)||null,a=e.meta.get(n).clock;t(r,n),t(r,a),H(r,JSON.stringify(l))}return o(r)},ae=[];ae[0]=(e,s,i,o)=>{t(e,0);const r=((e,t,s,i,o)=>{const r=n(e);switch(r){case 0:((e,t,s)=>{se(t,s,u(e))})(e,t,s);break;case 1:ie(e,s,i,o);break;case 2:oe(e,s,i,o);break;default:throw Error("Unknown message type")}return r})(s,e,i.doc,i);o&&1===r&&!i.synced&&(i.synced=!0)},ae[3]=(e,s,o)=>{t(e,1),i(e,le(o.awareness,Array.from(o.awareness.getStates().keys())))},ae[1]=(e,t,s)=>{((e,t,s)=>{const i=k(t),o=U(),r=[],l=[],a=[],c=[],d=n(i);for(let t=0;t<d;t++){const t=n(i);let s=n(i);const d=JSON.parse(M(i)),h=e.meta.get(t),u=e.states.get(t),m=void 0===h?0:h.clock;(m<s||m===s&&null===d&&e.states.has(t))&&(null===d?t===e.clientID&&null!=e.getLocalState()?s++:e.states.delete(t):e.states.set(t,d),e.meta.set(t,{clock:s,lastUpdated:o}),void 0===h&&null!==d?r.push(t):void 0!==h&&null===d?c.push(t):null!==d&&(A(d,u)||a.push(t),l.push(t)))}(r.length>0||a.length>0||c.length>0)&&e.emit("change",[{added:r,updated:a,removed:c},s]),(r.length>0||l.length>0||c.length>0)&&e.emit("update",[{added:r,updated:l,removed:c},s])})(s.awareness,u(t),s)},ae[2]=(e,t,s)=>{((e,t,s)=>{0===n(e)&&s(0,M(e))})(t,0,((e,t)=>ce(s,t)))};const ce=(e,t)=>console.warn(`Permission denied to access ${e.url}.\n${t}`),de=(e,t,s)=>{const i=k(t),o=C(),r=n(i),l=e.messageHandlers[r];return l?l(o,i,e,s,r):console.error("Unable to compute message"),o},he=(e,t,s)=>{t===e.ws&&(e.emit("connection-close",[s,e]),e.ws=null,t.close(),e.wsconnecting=!1,e.wsconnected?(e.wsconnected=!1,e.synced=!1,re(e.awareness,Array.from(e.awareness.getStates().keys()).filter((t=>t!==e.doc.clientID)),e),e.emit("status",[{status:"disconnected"}])):e.wsUnsuccessfulReconnects++,setTimeout(ue,$(100*R(2,e.wsUnsuccessfulReconnects),e.maxBackoffTime),e))},ue=e=>{if(e.shouldConnect&&null===e.ws){const s=new e._WS(e.url,e.protocols);s.binaryType="arraybuffer",e.ws=s,e.wsconnecting=!0,e.wsconnected=!1,e.synced=!1,s.onmessage=t=>{e.wsLastMessageReceived=U();const i=de(e,new Uint8Array(t.data),!0);N(i)>1&&s.send(o(i))},s.onerror=t=>{e.emit("connection-error",[t,e])},s.onclose=t=>{he(e,s,t)},s.onopen=()=>{e.wsLastMessageReceived=U(),e.wsconnecting=!1,e.wsconnected=!0,e.wsUnsuccessfulReconnects=0,e.emit("status",[{status:"connected"}]);const n=C();if(t(n,0),te(n,e.doc),s.send(o(n)),null!==e.awareness.getLocalState()){const n=C();t(n,1),i(n,le(e.awareness,[e.doc.clientID])),s.send(o(n))}},e.emit("status",[{status:"connecting"}])}},me=(e,t)=>{const s=e.ws;e.wsconnected&&s&&s.readyState===s.OPEN&&s.send(t),e.bcconnected&&ee(e.bcChannel,t,e)};class fe extends O{constructor(e,s,n,{connect:r=!0,awareness:l=new ne(n),params:a={},protocols:c=[],WebSocketPolyfill:d=WebSocket,resyncInterval:h=-1,maxBackoffTime:u=2500,disableBc:m=!1}={}){for(super();"/"===e[e.length-1];)e=e.slice(0,e.length-1);this.serverUrl=e,this.bcChannel=e+"/"+s,this.maxBackoffTime=u,this.params=a,this.protocols=c,this.roomname=s,this.doc=n,this._WS=d,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=ae.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=r,this._resyncInterval=0,h>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const e=C();t(e,0),te(e,n),this.ws.send(o(e))}}),h)),this._bcSubscriber=(e,t)=>{if(t!==this){const t=de(this,new Uint8Array(e),!1);N(t)>1&&ee(this.bcChannel,o(t),this)}},this._updateHandler=(e,s)=>{if(s!==this){const s=C();t(s,0),((e,s)=>{t(e,2),i(e,s)})(s,e),me(this,o(s))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:e,updated:s,removed:n})=>{const r=e.concat(s).concat(n),a=C();t(a,1),i(a,le(l,r)),me(this,o(a))},this._exitHandler=()=>{re(this.awareness,[n.clientID],"app closed")},_&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),l.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<U()-this.wsLastMessageReceived&&he(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const e=(()=>L(this.params,((e,t)=>`${encodeURIComponent(t)}=${encodeURIComponent(e)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===e.length?"":"?"+e)}get synced(){return this._synced}set synced(e){this._synced!==e&&(this._synced=e,this.emit("synced",[e]),this.emit("sync",[e]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),_&&"undefined"!=typeof process&&process.off("exit",this._exitHandler),this.awareness.off("update",this._awarenessUpdateHandler),this.doc.off("update",this._updateHandler),super.destroy()}connectBc(){if(this.disableBc)return;this.bcconnected||(((e,t)=>{Z(this.bcChannel).subs.add(t)})(0,this._bcSubscriber),this.bcconnected=!0);const e=C();t(e,0),te(e,this.doc),ee(this.bcChannel,o(e),this);const s=C();t(s,0),se(s,this.doc),ee(this.bcChannel,o(s),this);const n=C();t(n,3),ee(this.bcChannel,o(n),this);const r=C();t(r,1),i(r,le(this.awareness,[this.doc.clientID])),ee(this.bcChannel,o(r),this)}disconnectBc(){const e=C();t(e,1),i(e,le(this.awareness,[this.doc.clientID],new Map)),me(this,o(e)),this.bcconnected&&(((e,t)=>{const s=Z(e);s.subs.delete(t)&&0===s.subs.size&&(s.bc.close(),Q.delete(e))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&he(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(ue(this),this.connectBc())}}class pe{provider;isConnected=!1;constructor(e,t,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||e;this.provider=new fe(i,o,t,{params:s?.params,protocols:s?.protocols,WebSocketPolyfill:s?.WebSocketPolyfill,awareness:s?.awareness,maxBackoffTime:s?.maxBackoffTime,disableBc:!0}),this.setupEventListeners(),console.info(`WebSocket Provider initialized: ${i}/${o}`)}static with(e){return{create:(t,s)=>new pe(t,s,e)}}setupEventListeners(){this.provider.on("status",(({status:e})=>{"connected"===e?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===e&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(e=>{e&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((e,t)=>{const s=setTimeout((()=>{t(Error("WebSocket connection timeout"))}),1e4),i=({status:t})=>{"connected"===t&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,e())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,e())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class ze{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(e,t,s){const i=s?.name||e,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||ze.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const e={websocketProvider:n,name:i,document:t,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(e.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(e.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(e.onStatus=s.onStatus),this.provider=new q(e),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const e={url:o,name:i,document:t,token:s?.token||null,onConnect:()=>{this.isConnected=!0,s?.quiet||console.info("Hocuspocus connected: "+i),s?.onConnect&&s.onConnect()},onDisconnect:()=>{this.isConnected=!1,this.isSynced=!1,s?.quiet||console.info("Hocuspocus disconnected: "+i),s?.onDisconnect&&s.onDisconnect()},onSynced:()=>{this.isSynced=!0,s?.quiet||console.info("Hocuspocus synced: "+i),s?.onSynced&&s.onSynced()}};void 0!==s?.forceSyncInterval&&(e.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(e.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(e.onStatus=s.onStatus),s?.WebSocketPolyfill&&(e.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new q(e),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(e){if(ze.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),ze.sharedWebSocketProvider;const t={url:e.url};return e.WebSocketPolyfill&&(t.WebSocketPolyfill=e.WebSocketPolyfill),e.onConnect&&(t.onConnect=e.onConnect),e.onDisconnect&&(t.onDisconnect=e.onDisconnect),e.onStatus&&(t.onStatus=e.onStatus),ze.sharedWebSocketProvider=new X(t),console.info("Shared Hocuspocus WebSocket created: "+e.url),ze.sharedWebSocketProvider}static destroySharedWebSocket(){ze.sharedWebSocketProvider&&(ze.sharedWebSocketProvider.destroy(),ze.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return ze.sharedWebSocketProvider}static with(e){return{create:(t,s)=>new ze(t,s,e)}}async connect(){if(!this.isSynced)return new Promise(((e,t)=>{const s=setTimeout((()=>{t(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),e()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void e();this.isConnected||this.usesSharedSocket||this.provider.connect()}))}disconnect(){this.provider&&(this.usesSharedSocket?this.provider.detach():this.provider.disconnect()),this.isConnected=!1,this.isSynced=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1,this.isSynced=!1}}export{Y as BroadcastSyncProvider,ze as HocuspocusSyncProvider,pe as WebSocketSyncProvider}
@@ -1 +1 @@
1
- import{K as s,d as o}from"./p-DqtvAhfs.js";const t=s,p=o;export{t as KritzelControls,p as defineCustomElement}
1
+ import{K as o,d as r}from"./p-0YNMEgri.js";const s=o,p=r;export{s as KritzelControls,p as defineCustomElement}
@@ -1 +1 @@
1
- import{p as e,H as t,c as s,h as o,d as i,t as r}from"./p-Cj-I2_Og.js";import{K as a,d as n}from"./p-Cpb-fnoO.js";import{S as l,h as c,e as p,f as m,g as k,i as h,j as d}from"./p-Dmy0R-7y.js";import{L as b,M as u,K as f,E as g,N as z}from"./p-BbHELXEC.js";import{D as y}from"./p-BX4JyoOd.js";import{K as j}from"./p-n789Y3S-.js";import{K as C}from"./p-l10It7Nm.js";import{d as x}from"./p-yWjTje8m.js";import{d as E}from"./p-BxK5ew4S.js";import{d as w}from"./p-WnxGQWr6.js";import{d as v}from"./p-BGwkUUZk.js";import{d as S}from"./p-DqtvAhfs.js";import{d as R}from"./p-JdxbP-1P.js";import{d as I}from"./p-CTQmvTXG.js";import{d as O}from"./p-DKDoQ9nc.js";import{d as W}from"./p-DoE6WkDw.js";import{d as T}from"./p-BNYfuHT_.js";import{d as B}from"./p-CwP7yBQP.js";import{d as D}from"./p-6USF_L1F.js";import{d as M}from"./p-DnB4Srvo.js";import{d as V}from"./p-DKNtjoqf.js";import{d as K,a as P}from"./p-CbRaWk0G.js";import{d as U}from"./p-CBs9GnLk.js";import{d as A}from"./p-n0XDtwWP.js";import{d as F}from"./p-8uzm1dKV.js";import{d as G}from"./p-CDZUyTsg.js";import{d as N}from"./p-BsvZ2juR.js";import{d as L}from"./p-CJTKpwmi.js";import{d as X}from"./p-RU06uu0S.js";import{d as Y}from"./p-BBx_5XKc.js";import{d as Q}from"./p-D_gY5jie.js";import{d as _}from"./p-CYX7RMRZ.js";import{d as J}from"./p-BNT9uvII.js";import{d as Z}from"./p-GeVIjnFi.js";import{d as q}from"./p-rBxQNDS2.js";const H={type:"pen",color:y[0],size:16,palettes:{pen:[...y]}},$={color:y[0],size:8,fontFamily:"Arial",palette:[...y]},ee={color:y[0],size:4,palette:[...y],arrows:{end:{enabled:!0,style:"triangle"}}},te={shapeType:l.Rectangle,fillColor:{light:"transparent",dark:"transparent"},strokeColor:y[0],strokeWidth:4,fontColor:y[0],fontSize:16,fontFamily:"Arial",palette:[...y]},se=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange"),this.themeChange=s(this,"themeChange")}get host(){return this}scaleMax=b;scaleMin=u;lockDrawingScale=!0;controls=[{name:"selection",type:"tool",isDefault:!0,tool:c,icon:"cursor"},{name:"brush",type:"tool",tool:p,icon:"pen",config:H},{name:"line",type:"tool",tool:m,icon:"arrow",config:ee},{name:"eraser",type:"tool",tool:f,icon:"eraser"},{name:"text",type:"tool",tool:k,icon:"type",config:$},{name:"shape",type:"tool",tool:h,icon:"shape-rectangle",config:te,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:l.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:l.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:l.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:g,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((e=>"KritzelGroup"===e.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;themeChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;isBackToContentButtonVisible=!1;currentTheme="light";onIsEngineReady(e){e&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(e){e&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(e){if(this.activeWorkspace){const t=e.find((e=>e.id===this.activeWorkspace.id));t&&t!==this.activeWorkspace&&(this.activeWorkspace=t)}}onCurrentThemeChange(){setTimeout((()=>this.setOsSpecificCssVariables()),0)}onTouchStart(e){e.cancelable&&e.preventDefault()}async getObjectById(e){return this.engineRef.getObjectById(e)}async addObject(e){return this.engineRef.addObject(e)}async updateObject(e,t){return this.engineRef.updateObject(e,t)}async removeObject(e){return this.engineRef.removeObject(e)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(e){return this.engineRef.selectObjects(e)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(e){return this.engineRef.centerObjectInViewport(e)}async backToContent(){return this.engineRef.backToContent()}async createWorkspace(e,t){const s=new j("workspace-"+Date.now(),e,t);return this.engineRef.createWorkspace(s)}async updateWorkspace(e){return this.engineRef.updateWorkspace(e)}async deleteWorkspace(e){return this.engineRef.deleteWorkspace(e)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;settingsRef;exportRef;splitButtonRef;componentWillLoad(){this.loadSettingsFromStorage()}componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}loadSettingsFromStorage(){const e=localStorage.getItem("kritzel-settings");if(e)try{const t=JSON.parse(e);"number"==typeof t.scaleMin&&(this.scaleMin=t.scaleMin),"number"==typeof t.scaleMax&&(this.scaleMax=t.scaleMax),"boolean"==typeof t.lockDrawingScale&&(this.lockDrawingScale=t.lockDrawingScale),"light"!==t.theme&&"dark"!==t.theme||(this.currentTheme=t.theme)}catch{}}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(e){this.isEngineReady=!0,this.activeWorkspace=e.detail.activeWorkspace,this.workspaces=e.detail.workspaces}handleWorkspacesChange(e){this.workspaces=e.detail}handleObjectsChange(e){this.objectsChange.emit(e.detail)}handleUndoStateChange(e){this.undoStateChange.emit(e.detail),this.undoState=e.detail}handleObjectsInViewportChange(e){this.isBackToContentButtonVisible=!(e.detail.length>0)}handleSettingsChange(e){this.scaleMin=e.detail.scaleMin,this.scaleMax=e.detail.scaleMax,this.lockDrawingScale=e.detail.lockDrawingScale,this.currentTheme=e.detail.theme,this.themeChange.emit(e.detail.theme)}async handleMoreMenuItemSelect(e){const{item:t}=e.detail;if("settings"===t.id&&this.settingsRef.open(),"export"===t.id){const e=await this.engineRef.getScreenshot("png");this.exportRef.open(e)}}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))a.register(e,t)}listenForMobileKeyboard(){d.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(C.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(i,{key:"8abd16c01cedfeb14a955c035527de9c888674b9"},o("div",{key:"6bef3409a2b41de3aaf09c993662ba956578bc6a",class:"top-left-buttons"},o("kritzel-workspace-manager",{key:"ab4bcb8af52faa2b91380ea1591ecd5e59e3e18e",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-back-to-content",{key:"953502a6f1e6e8dd8478d57e3613c97e138aae63",visible:this.isBackToContentButtonVisible,onBackToContent:()=>this.backToContent()})),o("kritzel-engine",{key:"fcea81bc67cdb078a9ebbfa63211e34766512ef0",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,scaleMin:this.scaleMin,theme:this.currentTheme,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:e=>this.onEngineReady(e),onWorkspacesChange:e=>this.handleWorkspacesChange(e),onObjectsChange:e=>this.handleObjectsChange(e),onUndoStateChange:e=>this.handleUndoStateChange(e),onObjectsInViewportChange:e=>this.handleObjectsInViewportChange(e)}),o("kritzel-controls",{key:"da63adcab7cbd5a349f7ad6027789b3efffed9ac",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:e=>this.controlsRef=e,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,theme:this.currentTheme,onIsControlsReady:()=>this.isControlsReady=!0}),o("div",{key:"baf7dedb8f514dba4aac7bcc44c0ba5c02cc0cf8",class:"top-right-buttons"},o("kritzel-settings",{key:"8f283f3a7138a4f84a2ca8165beb4310cedb939c",ref:e=>this.settingsRef=e,onSettingsChange:e=>this.handleSettingsChange(e)}),o("kritzel-export",{key:"8f89c247b842f5d56ef3754e17330edfe1a6e3c2",ref:e=>this.exportRef=e,onExportPng:()=>this.engineRef.exportViewportAsPng(),onExportSvg:()=>this.engineRef.exportViewportAsSvg()}),o("kritzel-more-menu",{key:"053e9de589cad9a05ead53c2cbcbdd8a15527a9c",onItemSelect:e=>this.handleMoreMenuItemSelect(e)})))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}}static get style(){return"kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}"}},[512,"kritzel-editor",{scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],lockDrawingScale:[1028,"lock-drawing-scale"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],isBackToContentButtonVisible:[32],currentTheme:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],backToContent:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}]),oe=se,ie=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-back-to-content","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-controls","kritzel-cursor-trail","kritzel-dialog","kritzel-dropdown","kritzel-engine","kritzel-export","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-master-detail","kritzel-menu","kritzel-menu-item","kritzel-more-menu","kritzel-numeric-input","kritzel-opacity-slider","kritzel-portal","kritzel-settings","kritzel-shape-fill","kritzel-slide-toggle","kritzel-split-button","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(r(e))||customElements.define(r(e),se);break;case"kritzel-back-to-content":customElements.get(r(e))||x();break;case"kritzel-color":customElements.get(r(e))||E();break;case"kritzel-color-palette":customElements.get(r(e))||w();break;case"kritzel-context-menu":customElements.get(r(e))||v();break;case"kritzel-controls":customElements.get(r(e))||S();break;case"kritzel-cursor-trail":customElements.get(r(e))||R();break;case"kritzel-dialog":customElements.get(r(e))||I();break;case"kritzel-dropdown":customElements.get(r(e))||O();break;case"kritzel-engine":customElements.get(r(e))||z();break;case"kritzel-export":customElements.get(r(e))||W();break;case"kritzel-font":customElements.get(r(e))||T();break;case"kritzel-font-family":customElements.get(r(e))||B();break;case"kritzel-font-size":customElements.get(r(e))||D();break;case"kritzel-icon":customElements.get(r(e))||n();break;case"kritzel-line-endings":customElements.get(r(e))||M();break;case"kritzel-master-detail":customElements.get(r(e))||V();break;case"kritzel-menu":customElements.get(r(e))||P();break;case"kritzel-menu-item":customElements.get(r(e))||K();break;case"kritzel-more-menu":customElements.get(r(e))||U();break;case"kritzel-numeric-input":customElements.get(r(e))||A();break;case"kritzel-opacity-slider":customElements.get(r(e))||F();break;case"kritzel-portal":customElements.get(r(e))||G();break;case"kritzel-settings":customElements.get(r(e))||N();break;case"kritzel-shape-fill":customElements.get(r(e))||L();break;case"kritzel-slide-toggle":customElements.get(r(e))||X();break;case"kritzel-split-button":customElements.get(r(e))||Y();break;case"kritzel-stroke-size":customElements.get(r(e))||Q();break;case"kritzel-tool-config":customElements.get(r(e))||_();break;case"kritzel-tooltip":customElements.get(r(e))||J();break;case"kritzel-utility-panel":customElements.get(r(e))||Z();break;case"kritzel-workspace-manager":customElements.get(r(e))||q()}}))};export{H as D,oe as KritzelEditor,$ as a,ee as b,ie as defineCustomElement}
1
+ import{p as e,H as t,c as s,h as o,d as i,t as r}from"./p-Cj-I2_Og.js";import{K as a,d as n}from"./p-Cpb-fnoO.js";import{S as l,h as c,e as p,f as m,g as k,i as d,j as h}from"./p-DAPeFBqC.js";import{L as b,M as u,K as g,E as f,N as z}from"./p-mPdux0tA.js";import{D as y}from"./p-BX4JyoOd.js";import{K as j}from"./p-n789Y3S-.js";import{K as C}from"./p-l10It7Nm.js";import{d as x}from"./p-yWjTje8m.js";import{d as w}from"./p-BxK5ew4S.js";import{d as E}from"./p-WnxGQWr6.js";import{d as S}from"./p-BGwkUUZk.js";import{d as v}from"./p-0YNMEgri.js";import{d as I}from"./p-JdxbP-1P.js";import{d as R}from"./p-CTQmvTXG.js";import{d as W}from"./p-DKDoQ9nc.js";import{d as O}from"./p-DoE6WkDw.js";import{d as T}from"./p-BNYfuHT_.js";import{d as B}from"./p-CwP7yBQP.js";import{d as D}from"./p-6USF_L1F.js";import{d as M}from"./p-DnB4Srvo.js";import{d as V}from"./p-DKNtjoqf.js";import{d as P,a as K}from"./p-CbRaWk0G.js";import{d as A}from"./p-CBs9GnLk.js";import{d as U}from"./p-n0XDtwWP.js";import{d as F}from"./p-8uzm1dKV.js";import{d as G}from"./p-CDZUyTsg.js";import{d as N}from"./p-IGA64WxD.js";import{d as Y}from"./p-CJTKpwmi.js";import{d as L}from"./p-RU06uu0S.js";import{d as Q}from"./p-BBx_5XKc.js";import{d as _}from"./p-D_gY5jie.js";import{d as J}from"./p-DYAnRoi2.js";import{d as X}from"./p-B1qfRBi0.js";import{d as q}from"./p-GeVIjnFi.js";import{d as Z}from"./p-rBxQNDS2.js";const H={type:"pen",color:y[0],size:16,palettes:{pen:[...y]}},$={color:y[0],size:8,fontFamily:"Arial",palette:[...y]},ee={color:y[0],size:4,palette:[...y],arrows:{end:{enabled:!0,style:"triangle"}}},te={shapeType:l.Rectangle,fillColor:{light:"transparent",dark:"transparent"},strokeColor:y[0],strokeWidth:4,fontColor:y[0],fontSize:16,fontFamily:"Arial",palette:[...y]},se=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.isReady=s(this,"isReady"),this.objectsChange=s(this,"objectsChange"),this.undoStateChange=s(this,"undoStateChange"),this.themeChange=s(this,"themeChange")}get host(){return this}scaleMax=b;scaleMin=u;lockDrawingScale=!0;controls=[{name:"selection",type:"tool",isDefault:!0,tool:c,icon:"cursor"},{name:"brush",type:"tool",tool:p,icon:"pen",config:H},{name:"line",type:"tool",tool:m,icon:"arrow",config:ee},{name:"eraser",type:"tool",tool:g,icon:"eraser"},{name:"text",type:"tool",tool:k,icon:"type",config:$},{name:"shape",type:"tool",tool:d,icon:"shape-rectangle",config:te,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:l.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:l.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:l.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:f,icon:"image"},{name:"config",type:"config"}];globalContextMenuItems=[{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Select All",icon:"select-all",action:()=>this.selectAllObjectsInViewport()}];objectContextMenuItems=[{label:"Copy",icon:"copy",action:()=>this.engineRef.copy()},{label:"Paste",icon:"paste",disabled:async()=>0===(await this.engineRef.getCopiedObjects()).length,action:e=>this.engineRef.paste(e.x,e.y)},{label:"Delete",icon:"delete",action:()=>this.engineRef.delete()},{label:"Bring to Front",icon:"bring-to-front",action:()=>this.engineRef.bringToFront()},{label:"Send to Back",icon:"send-to-back",action:()=>this.engineRef.sendToBack()},{label:"Group",icon:"group",disabled:async()=>(await this.engineRef.getSelectedObjects()).length<2,action:()=>this.engineRef.group()},{label:"Ungroup",icon:"ungroup",disabled:async()=>!(await this.engineRef.getSelectedObjects()).some((e=>"KritzelGroup"===e.__class__)),action:()=>this.engineRef.ungroup()}];customSvgIcons={};isControlsVisible=!0;isUtilityPanelVisible=!0;syncConfig;isReady;objectsChange;undoStateChange;themeChange;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;isBackToContentButtonVisible=!1;currentTheme="light";onIsEngineReady(e){e&&this.isControlsReady&&this.checkIsReady()}onIsControlsReady(e){e&&this.isEngineReady&&this.checkIsReady()}onWorkspacesChange(e){if(this.activeWorkspace){const t=e.find((e=>e.id===this.activeWorkspace.id));t&&t!==this.activeWorkspace&&(this.activeWorkspace=t)}}onCurrentThemeChange(){setTimeout((()=>this.setOsSpecificCssVariables()),0)}onTouchStart(e){e.cancelable&&e.preventDefault()}async getObjectById(e){return this.engineRef.getObjectById(e)}async addObject(e){return this.engineRef.addObject(e)}async updateObject(e,t){return this.engineRef.updateObject(e,t)}async removeObject(e){return this.engineRef.removeObject(e)}async getSelectedObjects(){return this.engineRef.getSelectedObjects()}async selectObjects(e){return this.engineRef.selectObjects(e)}async selectAllObjectsInViewport(){return this.engineRef.selectAllObjectsInViewport()}async clearSelection(){this.engineRef.clearSelection()}async centerObjectInViewport(e){return this.engineRef.centerObjectInViewport(e)}async backToContent(){return this.engineRef.backToContent()}async createWorkspace(e,t){const s=new j("workspace-"+Date.now(),e,t);return this.engineRef.createWorkspace(s)}async updateWorkspace(e){return this.engineRef.updateWorkspace(e)}async deleteWorkspace(e){return this.engineRef.deleteWorkspace(e)}async getWorkspaces(){return this.engineRef.getWorkspaces()}async getActiveWorkspace(){return this.engineRef.getActiveWorkspace()}engineRef;controlsRef;settingsRef;exportRef;splitButtonRef;componentWillLoad(){this.loadSettingsFromStorage()}componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}loadSettingsFromStorage(){const e=localStorage.getItem("kritzel-settings");if(e)try{const t=JSON.parse(e);"number"==typeof t.scaleMin&&(this.scaleMin=t.scaleMin),"number"==typeof t.scaleMax&&(this.scaleMax=t.scaleMax),"boolean"==typeof t.lockDrawingScale&&(this.lockDrawingScale=t.lockDrawingScale),"light"!==t.theme&&"dark"!==t.theme||(this.currentTheme=t.theme)}catch{}}async checkIsReady(){await customElements.whenDefined("kritzel-editor"),await customElements.whenDefined("kritzel-workspace-manager"),await customElements.whenDefined("kritzel-controls"),await customElements.whenDefined("kritzel-engine"),this.isEngineReady&&this.isControlsReady&&this.isWorkspaceManagerReady&&this.isReady.emit(this.host)}onEngineReady(e){this.isEngineReady=!0,this.activeWorkspace=e.detail.activeWorkspace,this.workspaces=e.detail.workspaces}handleWorkspacesChange(e){this.workspaces=e.detail}handleObjectsChange(e){this.objectsChange.emit(e.detail)}handleUndoStateChange(e){this.undoStateChange.emit(e.detail),this.undoState=e.detail}handleObjectsInViewportChange(e){this.isBackToContentButtonVisible=!(e.detail.length>0)}handleSettingsChange(e){this.scaleMin=e.detail.scaleMin,this.scaleMax=e.detail.scaleMax,this.lockDrawingScale=e.detail.lockDrawingScale,this.currentTheme=e.detail.theme,this.themeChange.emit(e.detail.theme)}async handleMoreMenuItemSelect(e){const{item:t}=e.detail;if("settings"===t.id&&this.settingsRef.open(),"export"===t.id){const e=await this.engineRef.getScreenshot("png");this.exportRef.open(e)}}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))a.register(e,t)}listenForMobileKeyboard(){h.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(C.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px"),this.host.style.setProperty("--kritzel-editor-controls-transition","cubic-bezier(0.25, 0.1, 0.25, 1.0)"),this.host.style.setProperty("--kritzel-editor-controls-transform","translateY(200%)"),this.host.style.setProperty("--kritzel-editor-controls-transition-duration","0.25s");break;case"Android":this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-top-left-buttons-top","14px"),this.host.style.setProperty("--kritzel-editor-top-left-buttons-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(i,{key:"8abd16c01cedfeb14a955c035527de9c888674b9"},o("div",{key:"6bef3409a2b41de3aaf09c993662ba956578bc6a",class:"top-left-buttons"},o("kritzel-workspace-manager",{key:"ab4bcb8af52faa2b91380ea1591ecd5e59e3e18e",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-back-to-content",{key:"953502a6f1e6e8dd8478d57e3613c97e138aae63",visible:this.isBackToContentButtonVisible,onBackToContent:()=>this.backToContent()})),o("kritzel-engine",{key:"fcea81bc67cdb078a9ebbfa63211e34766512ef0",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,scaleMin:this.scaleMin,theme:this.currentTheme,globalContextMenuItems:this.globalContextMenuItems,objectContextMenuItems:this.objectContextMenuItems,onIsEngineReady:e=>this.onEngineReady(e),onWorkspacesChange:e=>this.handleWorkspacesChange(e),onObjectsChange:e=>this.handleObjectsChange(e),onUndoStateChange:e=>this.handleUndoStateChange(e),onObjectsInViewportChange:e=>this.handleObjectsInViewportChange(e)}),o("kritzel-controls",{key:"da63adcab7cbd5a349f7ad6027789b3efffed9ac",class:{"keyboard-open":this.isVirtualKeyboardOpen},style:{display:this.isControlsVisible?"flex":"none"},ref:e=>this.controlsRef=e,controls:this.controls,isUtilityPanelVisible:this.isUtilityPanelVisible,undoState:this.undoState,theme:this.currentTheme,onIsControlsReady:()=>this.isControlsReady=!0}),o("div",{key:"baf7dedb8f514dba4aac7bcc44c0ba5c02cc0cf8",class:"top-right-buttons"},o("kritzel-settings",{key:"8f283f3a7138a4f84a2ca8165beb4310cedb939c",ref:e=>this.settingsRef=e,onSettingsChange:e=>this.handleSettingsChange(e)}),o("kritzel-export",{key:"8f89c247b842f5d56ef3754e17330edfe1a6e3c2",ref:e=>this.exportRef=e,onExportPng:()=>this.engineRef.exportViewportAsPng(),onExportSvg:()=>this.engineRef.exportViewportAsSvg()}),o("kritzel-more-menu",{key:"053e9de589cad9a05ead53c2cbcbdd8a15527a9c",onItemSelect:e=>this.handleMoreMenuItemSelect(e)})))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}}static get style(){return"kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}"}},[512,"kritzel-editor",{scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],lockDrawingScale:[1028,"lock-drawing-scale"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],isBackToContentButtonVisible:[32],currentTheme:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],backToContent:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}]),oe=se,ie=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-back-to-content","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-controls","kritzel-cursor-trail","kritzel-dialog","kritzel-dropdown","kritzel-engine","kritzel-export","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-master-detail","kritzel-menu","kritzel-menu-item","kritzel-more-menu","kritzel-numeric-input","kritzel-opacity-slider","kritzel-portal","kritzel-settings","kritzel-shape-fill","kritzel-slide-toggle","kritzel-split-button","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(r(e))||customElements.define(r(e),se);break;case"kritzel-back-to-content":customElements.get(r(e))||x();break;case"kritzel-color":customElements.get(r(e))||w();break;case"kritzel-color-palette":customElements.get(r(e))||E();break;case"kritzel-context-menu":customElements.get(r(e))||S();break;case"kritzel-controls":customElements.get(r(e))||v();break;case"kritzel-cursor-trail":customElements.get(r(e))||I();break;case"kritzel-dialog":customElements.get(r(e))||R();break;case"kritzel-dropdown":customElements.get(r(e))||W();break;case"kritzel-engine":customElements.get(r(e))||z();break;case"kritzel-export":customElements.get(r(e))||O();break;case"kritzel-font":customElements.get(r(e))||T();break;case"kritzel-font-family":customElements.get(r(e))||B();break;case"kritzel-font-size":customElements.get(r(e))||D();break;case"kritzel-icon":customElements.get(r(e))||n();break;case"kritzel-line-endings":customElements.get(r(e))||M();break;case"kritzel-master-detail":customElements.get(r(e))||V();break;case"kritzel-menu":customElements.get(r(e))||K();break;case"kritzel-menu-item":customElements.get(r(e))||P();break;case"kritzel-more-menu":customElements.get(r(e))||A();break;case"kritzel-numeric-input":customElements.get(r(e))||U();break;case"kritzel-opacity-slider":customElements.get(r(e))||F();break;case"kritzel-portal":customElements.get(r(e))||G();break;case"kritzel-settings":customElements.get(r(e))||N();break;case"kritzel-shape-fill":customElements.get(r(e))||Y();break;case"kritzel-slide-toggle":customElements.get(r(e))||L();break;case"kritzel-split-button":customElements.get(r(e))||Q();break;case"kritzel-stroke-size":customElements.get(r(e))||_();break;case"kritzel-tool-config":customElements.get(r(e))||J();break;case"kritzel-tooltip":customElements.get(r(e))||X();break;case"kritzel-utility-panel":customElements.get(r(e))||q();break;case"kritzel-workspace-manager":customElements.get(r(e))||Z()}}))};export{H as D,oe as KritzelEditor,$ as a,ee as b,ie as defineCustomElement}
@@ -1 +1 @@
1
- import{P as o,N as s}from"./p-BbHELXEC.js";const p=o,r=s;export{p as KritzelEngine,r as defineCustomElement}
1
+ import{P as o,N as s}from"./p-mPdux0tA.js";const t=o,m=s;export{t as KritzelEngine,m as defineCustomElement}
@@ -1 +1 @@
1
- import{K as s,d as o}from"./p-BsvZ2juR.js";const p=s,r=o;export{p as KritzelSettings,r as defineCustomElement}
1
+ import{K as o,d as s}from"./p-IGA64WxD.js";const p=o,r=s;export{p as KritzelSettings,r as defineCustomElement}
@@ -1 +1 @@
1
- import{a as o,d as s}from"./p-CYX7RMRZ.js";const a=o,p=s;export{a as KritzelToolConfig,p as defineCustomElement}
1
+ import{a as o,d as s}from"./p-DYAnRoi2.js";const a=o,p=s;export{a as KritzelToolConfig,p as defineCustomElement}
@@ -1 +1 @@
1
- import{K as o,d as s}from"./p-BNT9uvII.js";const p=o,r=s;export{p as KritzelTooltip,r as defineCustomElement}
1
+ import{K as o,d as s}from"./p-B1qfRBi0.js";const p=o,r=s;export{p as KritzelTooltip,r as defineCustomElement}
@@ -0,0 +1 @@
1
+ import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-Cj-I2_Og.js";import{h as n,e as s,g as c,f as a,i as d}from"./p-DAPeFBqC.js";import{K as h}from"./p-l10It7Nm.js";import{K as p,d as k}from"./p-DYAnRoi2.js";import{a as f}from"./p-BX4JyoOd.js";import{d as u}from"./p-BxK5ew4S.js";import{d as b}from"./p-WnxGQWr6.js";import{d as g}from"./p-DKDoQ9nc.js";import{d as z}from"./p-BNYfuHT_.js";import{d as m}from"./p-CwP7yBQP.js";import{d as v}from"./p-6USF_L1F.js";import{d as y}from"./p-Cpb-fnoO.js";import{d as x}from"./p-DnB4Srvo.js";import{d as w}from"./p-8uzm1dKV.js";import{d as C}from"./p-CJTKpwmi.js";import{d as j}from"./p-D_gY5jie.js";import{d as E}from"./p-B1qfRBi0.js";import{d as T}from"./p-GeVIjnFi.js";const S=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme;isControlsReady;firstConfig=null;isTouchDevice=h.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.closeTooltip()}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll"))}kritzelEngine=null;toolsScrollRef=null;configTriggerRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=p.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:f.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof c&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}componentDidRender(){this.updateScrollIndicators()}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef,r=t>2,i=t+e<o-2,l=o>e;this.canScrollLeft!==r&&(this.canScrollLeft=r),this.canScrollRight!==i&&(this.canScrollRight=i),this.needsScrolling!==l&&(this.needsScrolling=l)}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool)),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.closeTooltip(),await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"0cb024600ea4730de6f70731ba481f4a1b397335",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"e1e3f51d18f8431b55ad03fc4ee571006a8b99a3",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"3b3dc23abaf8aa0087ad9df10c2fdc150c7f9aa1",class:"kritzel-controls"},r("div",{key:"cf8cbd5042ec9f261eb76af29cceb375fbfcc658",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"1ebb0c83e09df88e6c53fee7ecf151688d847f2a",class:"kritzel-tools-scroll",ref:t=>this.toolsScrollRef=t,onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),title:o?.label},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},ref:o=>{o&&(t._triggerRef=o)},"aria-label":"Select shape type",tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{anchorElement:t._anchorRef,triggerElement:t._triggerRef},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,onClick:()=>this.handleControlClick?.(t)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"725c36b2e36168e5a9a97a3fceded3f110c499d6",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"2bfdb194ee2044529427b5806dd2d1b2bf6a32b5",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"bc64cf1a330b9620536f1b044559c3f45756ab23",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"d991a450027ec60fa8a46c2f877dc92e5bf1e73a",tool:this.activeControl.tool,theme:this.theme,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"09883ce02e94993849e89bd284c65ea7af59261f",tabIndex:t?0:-1,class:"kritzel-config",ref:t=>{t&&(this.configTriggerRef=t)},onKeyDown:t=>{"Enter"===t.key&&t.target.click()},style:{cursor:"pointer"}},this.activeControl.tool instanceof c&&this.displayValues?r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.displayValues.fontFamily,size:this.displayValues.size,color:this.displayValues.color})):this.displayValues&&r("div",{class:"color-container"},r("kritzel-color",{value:this.displayValues.color,theme:this.theme,size:this.displayValues.size,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],firstConfig:[32],isTouchDevice:[32],selectedSubOptions:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],closeTooltip:[64]},[[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{theme:[{onThemeChange:0}]}]);function D(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),S);break;case"kritzel-color":customElements.get(l(t))||u();break;case"kritzel-color-palette":customElements.get(l(t))||b();break;case"kritzel-dropdown":customElements.get(l(t))||g();break;case"kritzel-font":customElements.get(l(t))||z();break;case"kritzel-font-family":customElements.get(l(t))||m();break;case"kritzel-font-size":customElements.get(l(t))||v();break;case"kritzel-icon":customElements.get(l(t))||y();break;case"kritzel-line-endings":customElements.get(l(t))||x();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||C();break;case"kritzel-stroke-size":customElements.get(l(t))||j();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||E();break;case"kritzel-utility-panel":customElements.get(l(t))||T()}}))}export{S as K,D as d}
@@ -0,0 +1 @@
1
+ import{p as t,H as i,c as e,h as s,d as o,t as n}from"./p-Cj-I2_Og.js";import{K as l}from"./p-BML28BJR.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=e(this,"tooltipClosed"),this.tooltipOpened=e(this,"tooltipOpened")}get host(){return this}isVisible=!1;anchorElement;triggerElement;offsetY=24;tooltipClosed;tooltipOpened;positionX=0;positionY=0;handleOutsideClick(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||this.close()}handleOutsidePointerDown(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||(t.stopPropagation(),t.preventDefault(),this.close())}handleCloseAll(t){t.detail!==this.host&&this.close()}handleWindowResize(){this.calculateAdjustedPosition()}handleTriggerElementChange(t,i){i&&i.removeEventListener("click",this.handleTriggerClick),t&&t.addEventListener("click",this.handleTriggerClick)}handleVisibilityChange(t){t&&(this.calculateAdjustedPosition(),requestAnimationFrame((()=>{this.focusContent()})))}async open(){this.isVisible||(document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll",{detail:this.host})),this.isVisible=!0,this.tooltipOpened.emit())}async close(){this.isVisible&&(this.isVisible=!1,this.tooltipClosed.emit())}async toggle(){this.isVisible?this.close():this.open()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}connectedCallback(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentDidLoad(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}disconnectedCallback(){this.triggerElement&&this.triggerElement.removeEventListener("click",this.handleTriggerClick)}handleTriggerClick=t=>{t.stopPropagation(),this.toggle()};calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),i=this.host.shadowRoot?.querySelector(".tooltip-content"),e=i?.getBoundingClientRect(),s=e?.width||0,o=12,n=window.innerWidth-s-o;this.positionX=Math.max(o,Math.min(t.left+t.width/2-s/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return s(o,{key:"4145c722bdd124506bf988e5c2d4886bb10c5516",style:{position:"fixed",zIndex:"9999",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out",visibility:this.isVisible?"visible":"hidden",left:`${this.positionX}px`,bottom:`${this.positionY}px`}},s("div",{key:"7b8b74d2a9027b23bd6ebb0cb1f628820320dfe2",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},s("slot",{key:"52b93a5847696ddd740fce6d69ac48f20a215bd3"})))}static get watchers(){return{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[769,"kritzel-tooltip",{isVisible:[1028,"is-visible"],anchorElement:[16],triggerElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],open:[64],close:[64],toggle:[64],focusContent:[64]},[[4,"click","handleOutsideClick"],[7,"pointerdown","handleOutsidePointerDown"],[4,"kritzelTooltipCloseAll","handleCloseAll"],[9,"resize","handleWindowResize"]],{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}]);function r(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))}export{h as K,r as d}