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.
- package/dist/cjs/{default-line-tool.config-Bva9deYM.js → default-line-tool.config-Ba74O1gD.js} +31 -9
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js +127 -114
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/collection/classes/objects/shape.class.js +9 -3
- package/dist/collection/classes/objects/text.class.js +19 -3
- package/dist/collection/classes/tools/text-tool.class.js +3 -3
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +20 -34
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +171 -15
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +29 -72
- package/dist/collection/constants/version.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/p-0YNMEgri.js +1 -0
- package/dist/components/p-B1qfRBi0.js +1 -0
- package/dist/components/{p-Dmy0R-7y.js → p-DAPeFBqC.js} +1 -1
- package/dist/components/{p-CYX7RMRZ.js → p-DYAnRoi2.js} +1 -1
- package/dist/components/{p-BsvZ2juR.js → p-IGA64WxD.js} +1 -1
- package/dist/components/{p-BbHELXEC.js → p-mPdux0tA.js} +2 -2
- package/dist/esm/{default-line-tool.config-DDIFE6oX.js → default-line-tool.config-BW07ZETV.js} +31 -9
- package/dist/esm/index.js +2 -2
- package/dist/esm/kritzel-back-to-content_32.entry.js +127 -114
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/index.esm.js +1 -1
- package/dist/stencil/p-55409078.entry.js +9 -0
- package/dist/stencil/p-BW07ZETV.js +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/shared/kritzel-tooltip/kritzel-tooltip.d.ts +11 -1
- package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts +3 -11
- package/dist/types/components.d.ts +7 -0
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-BNT9uvII.js +0 -1
- package/dist/components/p-DqtvAhfs.js +0 -1
- package/dist/stencil/p-3fc743ee.entry.js +0 -9
- 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.
|
|
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
|
-
|
|
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
|
-
|
|
138
|
-
|
|
139
|
-
|
|
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.
|
|
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: '
|
|
204
|
+
return (h(Host, { key: '0cb024600ea4730de6f70731ba481f4a1b397335', class: {
|
|
240
205
|
mobile: this.isTouchDevice,
|
|
241
|
-
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '
|
|
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: '
|
|
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
|
-
},
|
|
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: '
|
|
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: '
|
|
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
|
-
|
|
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",
|
package/dist/components/index.js
CHANGED
|
@@ -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
|
|
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-
|
|
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
|
|
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-
|
|
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-
|
|
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}
|