kritzel-stencil 0.1.2 → 0.1.3
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/kritzel-color_24.cjs.entry.js +17 -57
- package/dist/collection/classes/core/viewport.class.js +3 -43
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +1 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +1 -1
- package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
- package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
- package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js +2 -2
- package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js +2 -2
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +4 -4
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +2 -2
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-cursor-trail.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-font-size.js +1 -1
- package/dist/components/kritzel-font.js +1 -1
- package/dist/components/kritzel-line-endings.js +1 -1
- package/dist/components/kritzel-shape-fill.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/{p-CSGeDE4f.js → p-BlUr7oVq.js} +1 -1
- package/dist/components/{p-BbqT9o1F.js → p-CNneo_RD.js} +1 -1
- package/dist/components/p-CkpOndCn.js +1 -0
- package/dist/components/{p-CyHZWbkS.js → p-CzjSdJio.js} +1 -1
- package/dist/components/{p-D8GeJNUv.js → p-DLijNISu.js} +1 -1
- package/dist/components/{p-B8QjTqOY.js → p-DMJI6opm.js} +1 -1
- package/dist/components/{p-B3P64-gH.js → p-DwJUC6cw.js} +2 -2
- package/dist/components/{p-BF6MdW17.js → p-FOxrXeq4.js} +1 -1
- package/dist/components/{p-CbuHMNa9.js → p-S5GeUsJP.js} +1 -1
- package/dist/components/{p-BnidlyU0.js → p-e1r5dgeP.js} +1 -1
- package/dist/components/{p-ClMFs3KI.js → p-pKbfOI5a.js} +1 -1
- package/dist/esm/kritzel-color_24.entry.js +17 -57
- package/dist/stencil/p-361ebc7e.entry.js +9 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/core/viewport.class.d.ts +0 -6
- package/package.json +1 -1
- package/dist/components/p-8iEiCuEN.js +0 -1
- package/dist/stencil/p-caf30edb.entry.js +0 -9
|
@@ -39,13 +39,13 @@ const KritzelColor = class {
|
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
41
|
const isColorVeryLight = this.isLightColor(this.value);
|
|
42
|
-
return (index.h(index.Host, { key: '
|
|
42
|
+
return (index.h(index.Host, { key: '16e284aa1e572b81f4413d33c0d046ee57c5980f' }, index.h("div", { key: '718a391eb984720fdc5cd80f9a4db161e504bb9c', class: "checkerboard-bg", style: {
|
|
43
43
|
width: `${this.size}px`,
|
|
44
44
|
height: `${this.size}px`,
|
|
45
45
|
borderRadius: '50%',
|
|
46
46
|
display: 'inline-block',
|
|
47
47
|
position: 'relative',
|
|
48
|
-
} }, index.h("div", { key: '
|
|
48
|
+
} }, index.h("div", { key: 'bcf5ebc3dda30fcda5f1c61fa55aeef2bf1d799c', class: {
|
|
49
49
|
'color-circle': true,
|
|
50
50
|
'white': isColorVeryLight,
|
|
51
51
|
}, style: {
|
|
@@ -127,7 +127,7 @@ const KritzelColorPalette = class {
|
|
|
127
127
|
render() {
|
|
128
128
|
const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
|
|
129
129
|
const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
|
|
130
|
-
return (index.h(index.Host, { key: '
|
|
130
|
+
return (index.h(index.Host, { key: 'fbb9b59f227cdc0e97e8dfaf73255fb987c58292' }, index.h("div", { key: '447971664569dd28972587fc44b67575762ef959', class: {
|
|
131
131
|
'color-grid': true,
|
|
132
132
|
'expanded': this.isExpanded,
|
|
133
133
|
}, style: {
|
|
@@ -501,7 +501,7 @@ class KritzelToolConfigHelper {
|
|
|
501
501
|
}
|
|
502
502
|
}
|
|
503
503
|
|
|
504
|
-
const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw -
|
|
504
|
+
const kritzelControlsCss = () => `: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;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-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-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-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-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}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-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-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-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}`;
|
|
505
505
|
|
|
506
506
|
const KritzelControls = class {
|
|
507
507
|
constructor(hostRef) {
|
|
@@ -769,10 +769,10 @@ const KritzelControls = class {
|
|
|
769
769
|
'kritzel-control': true,
|
|
770
770
|
'selected': this.activeControl?.name === control?.name,
|
|
771
771
|
}, key: control.name, onClick: _event => this.handleControlClick?.(control) }, index.h("kritzel-icon", { name: control.icon })));
|
|
772
|
-
})), index.h("div", { key: '
|
|
772
|
+
})), index.h("div", { key: '5f76128a603b02f7e92241453b2bc4045b517438', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
|
|
773
773
|
'kritzel-config-container': true,
|
|
774
774
|
'visible': hasConfigUI,
|
|
775
|
-
}, key: configControl.name }, index.h("div", { key: '
|
|
775
|
+
}, key: configControl.name }, index.h("div", { key: 'dc3903a6631e85c95ed62e23aec93feae2c46c55', class: "config-gradient-left" }), index.h("kritzel-tooltip", { key: '360a0a16a6aab116d3cd641b9988a63fad8a2e32', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, index.h("kritzel-tool-config", { key: '9c77db55899b52706ceb0f2c49bf3341c28b663a', tool: this.activeControl.tool, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: 'e9b3a9ae86d9117d194d67cab55771f7322947b0', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
|
|
776
776
|
if (event.key === 'Enter') {
|
|
777
777
|
this.handleConfigClick?.(event);
|
|
778
778
|
}
|
|
@@ -855,7 +855,7 @@ const KritzelCursorTrail = class {
|
|
|
855
855
|
}
|
|
856
856
|
}
|
|
857
857
|
render() {
|
|
858
|
-
return (index.h(index.Host, { key: '
|
|
858
|
+
return (index.h(index.Host, { key: '5bb40688111e544ec102739c3d606ef34273fbab' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '91782bcfaae5d97d534a3e44535e85ed28f960b5', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
859
859
|
position: 'absolute',
|
|
860
860
|
left: '0',
|
|
861
861
|
top: '0',
|
|
@@ -1396,7 +1396,7 @@ const KritzelEditor = class {
|
|
|
1396
1396
|
}
|
|
1397
1397
|
}
|
|
1398
1398
|
render() {
|
|
1399
|
-
return (index.h(index.Host, { key: '
|
|
1399
|
+
return (index.h(index.Host, { key: '08dae992458f6440295e59a12934c76ad4f9931e' }, index.h("kritzel-workspace-manager", { key: '43a980a7aadbc3fef9f375c99f1577f771612835', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-engine", { key: '471133030308d915fb9fa1e8e818662e56d483db', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), index.h("kritzel-controls", { key: '7e7c7111e0629309c4bda9d94b95623dbe835f0f', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
|
|
1400
1400
|
}
|
|
1401
1401
|
static get watchers() { return {
|
|
1402
1402
|
"isEngineReady": [{
|
|
@@ -18627,11 +18627,6 @@ class KritzelViewport {
|
|
|
18627
18627
|
_core;
|
|
18628
18628
|
_debounceUpdate;
|
|
18629
18629
|
_debounceEndScaling;
|
|
18630
|
-
_velocityX = 0;
|
|
18631
|
-
_velocityY = 0;
|
|
18632
|
-
_panRafId = null;
|
|
18633
|
-
_friction = 0.92;
|
|
18634
|
-
_minVelocity = 0.5;
|
|
18635
18630
|
initialTouchDistance = 0;
|
|
18636
18631
|
startX = 0;
|
|
18637
18632
|
startY = 0;
|
|
@@ -18815,47 +18810,12 @@ class KritzelViewport {
|
|
|
18815
18810
|
this._debounceEndScaling();
|
|
18816
18811
|
}
|
|
18817
18812
|
handlePan(event) {
|
|
18818
|
-
// Normalize delta for trackpad vs mouse wheel
|
|
18819
|
-
// WheelEvent.deltaMode: 0=pixels, 1=lines, 2=pages
|
|
18820
|
-
let deltaX = event.deltaX;
|
|
18821
|
-
let deltaY = event.deltaY;
|
|
18822
|
-
if (event.deltaMode === 1) {
|
|
18823
|
-
deltaX *= 16;
|
|
18824
|
-
deltaY *= 16;
|
|
18825
|
-
}
|
|
18826
|
-
else if (event.deltaMode === 2) {
|
|
18827
|
-
deltaX *= window.innerWidth;
|
|
18828
|
-
deltaY *= window.innerHeight;
|
|
18829
|
-
}
|
|
18830
18813
|
const panSpeed = 0.8;
|
|
18831
|
-
|
|
18832
|
-
this.
|
|
18833
|
-
this._velocityY = -deltaY * panSpeed;
|
|
18834
|
-
// Start animation loop if not already running
|
|
18835
|
-
if (this._panRafId === null) {
|
|
18836
|
-
this._animatePan();
|
|
18837
|
-
}
|
|
18838
|
-
}
|
|
18839
|
-
_animatePan() {
|
|
18840
|
-
// Apply current velocity
|
|
18841
|
-
this._core.store.state.translateX += this._velocityX;
|
|
18842
|
-
this._core.store.state.translateY += this._velocityY;
|
|
18814
|
+
this._core.store.state.translateX = this._core.store.state.translateX - event.deltaX * panSpeed;
|
|
18815
|
+
this._core.store.state.translateY = this._core.store.state.translateY - event.deltaY * panSpeed;
|
|
18843
18816
|
this._core.store.state.hasViewportChanged = true;
|
|
18844
18817
|
this._core.rerender();
|
|
18845
|
-
|
|
18846
|
-
this._velocityX *= this._friction;
|
|
18847
|
-
this._velocityY *= this._friction;
|
|
18848
|
-
// Continue animation if velocity is still significant
|
|
18849
|
-
if (Math.abs(this._velocityX) > this._minVelocity || Math.abs(this._velocityY) > this._minVelocity) {
|
|
18850
|
-
this._panRafId = requestAnimationFrame(() => this._animatePan());
|
|
18851
|
-
}
|
|
18852
|
-
else {
|
|
18853
|
-
// Stop animation and finalize
|
|
18854
|
-
this._velocityX = 0;
|
|
18855
|
-
this._velocityY = 0;
|
|
18856
|
-
this._panRafId = null;
|
|
18857
|
-
this._debounceUpdate();
|
|
18858
|
-
}
|
|
18818
|
+
this._debounceUpdate();
|
|
18859
18819
|
}
|
|
18860
18820
|
}
|
|
18861
18821
|
|
|
@@ -21197,7 +21157,7 @@ const KritzelFont = class {
|
|
|
21197
21157
|
size = 24;
|
|
21198
21158
|
color = '#000000';
|
|
21199
21159
|
render() {
|
|
21200
|
-
return (index.h(index.Host, { key: '
|
|
21160
|
+
return (index.h(index.Host, { key: '96cdcbefb7747932e4dc174a1a4a952863a0da99' }, index.h("div", { key: '228479a564056c0a06db85bbdb07978fe17802a6', class: "font-preview", style: {
|
|
21201
21161
|
fontFamily: this.fontFamily,
|
|
21202
21162
|
fontSize: `${this.size}px`,
|
|
21203
21163
|
color: this.color
|
|
@@ -21271,7 +21231,7 @@ const KritzelFontSize = class {
|
|
|
21271
21231
|
}
|
|
21272
21232
|
}
|
|
21273
21233
|
render() {
|
|
21274
|
-
return (index.h(index.Host, { key: '
|
|
21234
|
+
return (index.h(index.Host, { key: 'd4c62d22c92b540f372120681da797acded5b6cb' }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
|
|
21275
21235
|
'size-container': true,
|
|
21276
21236
|
'selected': this.selectedSize === size,
|
|
21277
21237
|
}, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
|
|
@@ -21377,10 +21337,10 @@ const KritzelLineEndings = class {
|
|
|
21377
21337
|
render() {
|
|
21378
21338
|
const startEnding = this.getStartEnding();
|
|
21379
21339
|
const endEnding = this.getEndEnding();
|
|
21380
|
-
return (index.h(index.Host, { key: '
|
|
21340
|
+
return (index.h(index.Host, { key: '424f7faa167fdf487bcf094f72b34488ba477c99' }, index.h("div", { key: '3c667e2fdba171599ce747b3489258bdbbf8ec8e', class: "endings-section" }, index.h("div", { key: '1502ec8094550c73cd6e7d21ab0110d1dc5fd035', class: "endings-row" }, this.styles.map(type => (index.h("button", { class: {
|
|
21381
21341
|
'ending-option': true,
|
|
21382
21342
|
'selected': startEnding === type,
|
|
21383
|
-
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), index.h("div", { key: '
|
|
21343
|
+
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), index.h("div", { key: 'c62e785eb0c60fa00603796193fb77ecb2f3a8dd', class: "endings-section" }, index.h("div", { key: 'bb256da3a6a1a473a93aa70c12aa12a2ff34f8a3', class: "endings-row" }, this.styles.map(type => (index.h("button", { class: {
|
|
21384
21344
|
'ending-option': true,
|
|
21385
21345
|
'selected': endEnding === type,
|
|
21386
21346
|
}, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
|
|
@@ -21891,10 +21851,10 @@ const KritzelShapeFill = class {
|
|
|
21891
21851
|
return (index.h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, index.h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
|
|
21892
21852
|
}
|
|
21893
21853
|
render() {
|
|
21894
|
-
return (index.h(index.Host, { key: '
|
|
21854
|
+
return (index.h(index.Host, { key: '0d0c051f7b8b8a7c586246bc9d74ed3c3885eb90' }, index.h("div", { key: 'c2411c4d070fcffff06f372c1e750415486f6a40', class: "fill-row" }, index.h("button", { key: 'b53097dce91b2f42a7511c4db923730fa089cb7f', class: {
|
|
21895
21855
|
'fill-option': true,
|
|
21896
21856
|
'selected': this.value === 'transparent',
|
|
21897
|
-
}, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), index.h("button", { key: '
|
|
21857
|
+
}, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), index.h("button", { key: '570424d81fc01a1a09e4efa5ff3918fc9a2c5451', class: {
|
|
21898
21858
|
'fill-option': true,
|
|
21899
21859
|
'selected': this.value === 'filled',
|
|
21900
21860
|
}, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
|
|
@@ -4,11 +4,6 @@ export class KritzelViewport {
|
|
|
4
4
|
_core;
|
|
5
5
|
_debounceUpdate;
|
|
6
6
|
_debounceEndScaling;
|
|
7
|
-
_velocityX = 0;
|
|
8
|
-
_velocityY = 0;
|
|
9
|
-
_panRafId = null;
|
|
10
|
-
_friction = 0.92;
|
|
11
|
-
_minVelocity = 0.5;
|
|
12
7
|
initialTouchDistance = 0;
|
|
13
8
|
startX = 0;
|
|
14
9
|
startY = 0;
|
|
@@ -192,46 +187,11 @@ export class KritzelViewport {
|
|
|
192
187
|
this._debounceEndScaling();
|
|
193
188
|
}
|
|
194
189
|
handlePan(event) {
|
|
195
|
-
// Normalize delta for trackpad vs mouse wheel
|
|
196
|
-
// WheelEvent.deltaMode: 0=pixels, 1=lines, 2=pages
|
|
197
|
-
let deltaX = event.deltaX;
|
|
198
|
-
let deltaY = event.deltaY;
|
|
199
|
-
if (event.deltaMode === 1) {
|
|
200
|
-
deltaX *= 16;
|
|
201
|
-
deltaY *= 16;
|
|
202
|
-
}
|
|
203
|
-
else if (event.deltaMode === 2) {
|
|
204
|
-
deltaX *= window.innerWidth;
|
|
205
|
-
deltaY *= window.innerHeight;
|
|
206
|
-
}
|
|
207
190
|
const panSpeed = 0.8;
|
|
208
|
-
|
|
209
|
-
this.
|
|
210
|
-
this._velocityY = -deltaY * panSpeed;
|
|
211
|
-
// Start animation loop if not already running
|
|
212
|
-
if (this._panRafId === null) {
|
|
213
|
-
this._animatePan();
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
_animatePan() {
|
|
217
|
-
// Apply current velocity
|
|
218
|
-
this._core.store.state.translateX += this._velocityX;
|
|
219
|
-
this._core.store.state.translateY += this._velocityY;
|
|
191
|
+
this._core.store.state.translateX = this._core.store.state.translateX - event.deltaX * panSpeed;
|
|
192
|
+
this._core.store.state.translateY = this._core.store.state.translateY - event.deltaY * panSpeed;
|
|
220
193
|
this._core.store.state.hasViewportChanged = true;
|
|
221
194
|
this._core.rerender();
|
|
222
|
-
|
|
223
|
-
this._velocityX *= this._friction;
|
|
224
|
-
this._velocityY *= this._friction;
|
|
225
|
-
// Continue animation if velocity is still significant
|
|
226
|
-
if (Math.abs(this._velocityX) > this._minVelocity || Math.abs(this._velocityY) > this._minVelocity) {
|
|
227
|
-
this._panRafId = requestAnimationFrame(() => this._animatePan());
|
|
228
|
-
}
|
|
229
|
-
else {
|
|
230
|
-
// Stop animation and finalize
|
|
231
|
-
this._velocityX = 0;
|
|
232
|
-
this._velocityY = 0;
|
|
233
|
-
this._panRafId = null;
|
|
234
|
-
this._debounceUpdate();
|
|
235
|
-
}
|
|
195
|
+
this._debounceUpdate();
|
|
236
196
|
}
|
|
237
197
|
}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
"components/core/kritzel-engine/kritzel-engine.js",
|
|
6
6
|
"components/ui/kritzel-context-menu/kritzel-context-menu.js",
|
|
7
7
|
"components/shared/kritzel-font-family/kritzel-font-family.js",
|
|
8
|
+
"components/shared/kritzel-line-endings/kritzel-line-endings.js",
|
|
8
9
|
"components/shared/kritzel-shape-fill/kritzel-shape-fill.js",
|
|
9
10
|
"components/core/kritzel-cursor-trail/kritzel-cursor-trail.js",
|
|
10
11
|
"components/core/kritzel-editor/kritzel-editor.js",
|
|
@@ -13,7 +14,6 @@
|
|
|
13
14
|
"components/shared/kritzel-font/kritzel-font.js",
|
|
14
15
|
"components/shared/kritzel-font-size/kritzel-font-size.js",
|
|
15
16
|
"components/shared/kritzel-icon/kritzel-icon.js",
|
|
16
|
-
"components/shared/kritzel-line-endings/kritzel-line-endings.js",
|
|
17
17
|
"components/shared/kritzel-menu/kritzel-menu.js",
|
|
18
18
|
"components/shared/kritzel-menu-item/kritzel-menu-item.js",
|
|
19
19
|
"components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js",
|
|
@@ -63,7 +63,7 @@ export class KritzelCursorTrail {
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
render() {
|
|
66
|
-
return (h(Host, { key: '
|
|
66
|
+
return (h(Host, { key: '5bb40688111e544ec102739c3d606ef34273fbab' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '91782bcfaae5d97d534a3e44535e85ed28f960b5', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
67
67
|
position: 'absolute',
|
|
68
68
|
left: '0',
|
|
69
69
|
top: '0',
|
|
@@ -264,7 +264,7 @@ export class KritzelEditor {
|
|
|
264
264
|
}
|
|
265
265
|
}
|
|
266
266
|
render() {
|
|
267
|
-
return (h(Host, { key: '
|
|
267
|
+
return (h(Host, { key: '08dae992458f6440295e59a12934c76ad4f9931e' }, h("kritzel-workspace-manager", { key: '43a980a7aadbc3fef9f375c99f1577f771612835', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '471133030308d915fb9fa1e8e818662e56d483db', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '7e7c7111e0629309c4bda9d94b95623dbe835f0f', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
|
|
268
268
|
}
|
|
269
269
|
static get is() { return "kritzel-editor"; }
|
|
270
270
|
static get originalStyleUrls() {
|
|
@@ -28,13 +28,13 @@ export class KritzelColor {
|
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
30
|
const isColorVeryLight = this.isLightColor(this.value);
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: '16e284aa1e572b81f4413d33c0d046ee57c5980f' }, h("div", { key: '718a391eb984720fdc5cd80f9a4db161e504bb9c', class: "checkerboard-bg", style: {
|
|
32
32
|
width: `${this.size}px`,
|
|
33
33
|
height: `${this.size}px`,
|
|
34
34
|
borderRadius: '50%',
|
|
35
35
|
display: 'inline-block',
|
|
36
36
|
position: 'relative',
|
|
37
|
-
} }, h("div", { key: '
|
|
37
|
+
} }, h("div", { key: 'bcf5ebc3dda30fcda5f1c61fa55aeef2bf1d799c', class: {
|
|
38
38
|
'color-circle': true,
|
|
39
39
|
'white': isColorVeryLight,
|
|
40
40
|
}, style: {
|
|
@@ -27,7 +27,7 @@ export class KritzelColorPalette {
|
|
|
27
27
|
render() {
|
|
28
28
|
const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
|
|
29
29
|
const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
|
|
30
|
-
return (h(Host, { key: '
|
|
30
|
+
return (h(Host, { key: 'fbb9b59f227cdc0e97e8dfaf73255fb987c58292' }, h("div", { key: '447971664569dd28972587fc44b67575762ef959', class: {
|
|
31
31
|
'color-grid': true,
|
|
32
32
|
'expanded': this.isExpanded,
|
|
33
33
|
}, style: {
|
|
@@ -4,7 +4,7 @@ export class KritzelFont {
|
|
|
4
4
|
size = 24;
|
|
5
5
|
color = '#000000';
|
|
6
6
|
render() {
|
|
7
|
-
return (h(Host, { key: '
|
|
7
|
+
return (h(Host, { key: '96cdcbefb7747932e4dc174a1a4a952863a0da99' }, h("div", { key: '228479a564056c0a06db85bbdb07978fe17802a6', class: "font-preview", style: {
|
|
8
8
|
fontFamily: this.fontFamily,
|
|
9
9
|
fontSize: `${this.size}px`,
|
|
10
10
|
color: this.color
|
|
@@ -15,7 +15,7 @@ export class KritzelFontSize {
|
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: 'd4c62d22c92b540f372120681da797acded5b6cb' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
|
|
19
19
|
'size-container': true,
|
|
20
20
|
'selected': this.selectedSize === size,
|
|
21
21
|
}, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
|
|
@@ -67,10 +67,10 @@ export class KritzelLineEndings {
|
|
|
67
67
|
render() {
|
|
68
68
|
const startEnding = this.getStartEnding();
|
|
69
69
|
const endEnding = this.getEndEnding();
|
|
70
|
-
return (h(Host, { key: '
|
|
70
|
+
return (h(Host, { key: '424f7faa167fdf487bcf094f72b34488ba477c99' }, h("div", { key: '3c667e2fdba171599ce747b3489258bdbbf8ec8e', class: "endings-section" }, h("div", { key: '1502ec8094550c73cd6e7d21ab0110d1dc5fd035', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
|
|
71
71
|
'ending-option': true,
|
|
72
72
|
'selected': startEnding === type,
|
|
73
|
-
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '
|
|
73
|
+
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: 'c62e785eb0c60fa00603796193fb77ecb2f3a8dd', class: "endings-section" }, h("div", { key: 'bb256da3a6a1a473a93aa70c12aa12a2ff34f8a3', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
|
|
74
74
|
'ending-option': true,
|
|
75
75
|
'selected': endEnding === type,
|
|
76
76
|
}, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
|
|
@@ -16,10 +16,10 @@ export class KritzelShapeFill {
|
|
|
16
16
|
return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
19
|
+
return (h(Host, { key: '0d0c051f7b8b8a7c586246bc9d74ed3c3885eb90' }, h("div", { key: 'c2411c4d070fcffff06f372c1e750415486f6a40', class: "fill-row" }, h("button", { key: 'b53097dce91b2f42a7511c4db923730fa089cb7f', class: {
|
|
20
20
|
'fill-option': true,
|
|
21
21
|
'selected': this.value === 'transparent',
|
|
22
|
-
}, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '
|
|
22
|
+
}, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '570424d81fc01a1a09e4efa5ff3918fc9a2c5451', class: {
|
|
23
23
|
'fill-option': true,
|
|
24
24
|
'selected': this.value === 'filled',
|
|
25
25
|
}, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
user-select: none;
|
|
5
|
-
max-width: calc(100vw -
|
|
5
|
+
max-width: calc(100vw - 16px);
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
:host(.mobile) {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
position: absolute;
|
|
54
54
|
top: 0;
|
|
55
55
|
bottom: 0;
|
|
56
|
-
width:
|
|
56
|
+
width: 32px;
|
|
57
57
|
pointer-events: none;
|
|
58
58
|
opacity: 0;
|
|
59
59
|
transition: opacity 0.2s ease-out;
|
|
@@ -263,8 +263,8 @@
|
|
|
263
263
|
position: absolute;
|
|
264
264
|
top: 0;
|
|
265
265
|
bottom: 0;
|
|
266
|
-
left: -
|
|
267
|
-
width:
|
|
266
|
+
left: -32px;
|
|
267
|
+
width: 32px;
|
|
268
268
|
background: linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));
|
|
269
269
|
pointer-events: none;
|
|
270
270
|
z-index: 1;
|
|
@@ -269,10 +269,10 @@ export class KritzelControls {
|
|
|
269
269
|
'kritzel-control': true,
|
|
270
270
|
'selected': this.activeControl?.name === control?.name,
|
|
271
271
|
}, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
|
|
272
|
-
})), h("div", { key: '
|
|
272
|
+
})), h("div", { key: '5f76128a603b02f7e92241453b2bc4045b517438', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
|
|
273
273
|
'kritzel-config-container': true,
|
|
274
274
|
'visible': hasConfigUI,
|
|
275
|
-
}, key: configControl.name }, h("div", { key: '
|
|
275
|
+
}, key: configControl.name }, h("div", { key: 'dc3903a6631e85c95ed62e23aec93feae2c46c55', class: "config-gradient-left" }), h("kritzel-tooltip", { key: '360a0a16a6aab116d3cd641b9988a63fad8a2e32', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("kritzel-tool-config", { key: '9c77db55899b52706ceb0f2c49bf3341c28b663a', tool: this.activeControl.tool, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'e9b3a9ae86d9117d194d67cab55771f7322947b0', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
|
|
276
276
|
if (event.key === 'Enter') {
|
|
277
277
|
this.handleConfigClick?.(event);
|
|
278
278
|
}
|
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-BxS4Pdpz.js";export{d as KritzelBrushTool,c as KritzelGroup,b as KritzelLine,e as KritzelLineTool,a as KritzelPath,g as KritzelSelectionTool,K as KritzelText,f as KritzelTextTool}from"./p-DOF5fWDU.js";import{w as t,a as i,t as o,r as n,b as l,e as h,c as u,d as m,f as p,g as z,s as C,h as k,i as y,v as S,j as x,o as w,k as j,l as v,m as T,O as P,n as B,p as W,q as U,u as H,x as M,y as A,z as O,A as $,B as _,C as N,H as R,D as Y}from"./p-B3P64-gH.js";export{I as IndexedDBSyncProvider,L as KritzelAnchorManager,J as KritzelAppStateMap,G as KritzelCursorHelper,E as KritzelEraserTool,K as KritzelImage,F as KritzelImageTool}from"./p-B3P64-gH.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{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{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.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{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelOpacitySlider,defineCustomElement as defineCustomElementKritzelOpacitySlider}from"./kritzel-opacity-slider.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelShapeFill,defineCustomElement as defineCustomElementKritzelShapeFill}from"./kritzel-shape-fill.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(t,e,s){this.doc=e,this.channel=new BroadcastChannel(t),this.channel.onmessage=t=>{this.handleMessage(t.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+t)}handleDocUpdate=(e,s)=>{if(s!==this){const s=p();t(s,0),i(s,e),this.channel.postMessage(o(s))}};handleMessage(e){const s=z(new Uint8Array(e));switch(n(s)){case 0:const e=l(s);u(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=l(s),r=h(this.doc,n);if(r.length>0){const e=p();t(e,0),i(e,r),this.channel.postMessage(o(e))}}}broadcastSync(){const e=p();t(e,2),i(e,m(this.doc)),this.channel.postMessage(o(e))}async connect(){if(!this._synced)return new Promise((t=>{const e=()=>{this._synced?t():setTimeout(e,50)};e()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const X=new Map,Q="undefined"==typeof BroadcastChannel?class{constructor(t){this.room=t,this.onmessage=null,this._onChange=e=>e.key===t&&null!==this.onmessage&&this.onmessage({data:y(e.newValue||"")}),w(this._onChange)}postMessage(t){S.setItem(this.room,x(j(t)))}close(){v(this._onChange)}}:BroadcastChannel,V=t=>C(X,t,(()=>{const e=k(),s=new Q(t);return s.onmessage=t=>e.forEach((e=>e(t.data,"broadcastchannel"))),{bc:s,subs:e}})),Z=(t,e,s=null)=>{const i=V(t);i.bc.postMessage(e),i.subs.forEach((t=>t(e,s)))},tt=(e,s)=>{t(e,0);const o=m(s);i(e,o)},et=(e,s,o)=>{t(e,1),i(e,h(s,o))},st=(t,e,s,i)=>{try{u(e,l(t),s)}catch(t){null!=i&&i(t),console.error("Caught error while handling a Yjs update",t)}},it=st;class ot extends P{constructor(t){super(),this.doc=t,this.clientID=t.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const t=W();null!==this.getLocalState()&&15e3<=t-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const e=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=t-s.lastUpdated&&this.states.has(i)&&e.push(i)})),e.length>0&&nt(this,e,"timeout")}),B(3e3)),t.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(t){const e=this.clientID,s=this.meta.get(e),i=void 0===s?0:s.clock+1,o=this.states.get(e);null===t?this.states.delete(e):this.states.set(e,t),this.meta.set(e,{clock:i,lastUpdated:W()});const n=[],r=[],l=[],c=[];null===t?c.push(e):null==o?null!=t&&n.push(e):(r.push(e),U(o,t)||l.push(e)),(n.length>0||l.length>0||c.length>0)&&this.emit("change",[{added:n,updated:l,removed:c},"local"]),this.emit("update",[{added:n,updated:r,removed:c},"local"])}setLocalStateField(t,e){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[t]:e})}getStates(){return this.states}}const nt=(t,e,s)=>{const i=[];for(let s=0;s<e.length;s++){const o=e[s];if(t.states.has(o)){if(t.states.delete(o),o===t.clientID){const e=t.meta.get(o);t.meta.set(o,{clock:e.clock+1,lastUpdated:W()})}i.push(o)}}i.length>0&&(t.emit("change",[{added:[],updated:[],removed:i},s]),t.emit("update",[{added:[],updated:[],removed:i},s]))},rt=(e,s,i=e.states)=>{const n=s.length,r=p();t(r,n);for(let o=0;o<n;o++){const n=s[o],l=i.get(n)||null,c=e.meta.get(n).clock;t(r,n),t(r,c),H(r,JSON.stringify(l))}return o(r)},lt=[];lt[0]=(e,s,i,o)=>{t(e,0);const r=((t,e,s,i,o)=>{const r=n(t);switch(r){case 0:((t,e,s)=>{et(e,s,l(t))})(t,e,s);break;case 1:st(t,s,i,o);break;case 2:it(t,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)},lt[3]=(e,s,o)=>{t(e,1),i(e,rt(o.awareness,Array.from(o.awareness.getStates().keys())))},lt[1]=(t,e,s)=>{((t,e,s)=>{const i=z(e),o=W(),r=[],l=[],c=[],a=[],h=n(i);for(let e=0;e<h;e++){const e=n(i);let s=n(i);const h=JSON.parse(T(i)),d=t.meta.get(e),u=t.states.get(e),m=void 0===d?0:d.clock;(m<s||m===s&&null===h&&t.states.has(e))&&(null===h?e===t.clientID&&null!=t.getLocalState()?s++:t.states.delete(e):t.states.set(e,h),t.meta.set(e,{clock:s,lastUpdated:o}),void 0===d&&null!==h?r.push(e):void 0!==d&&null===h?a.push(e):null!==h&&(U(h,u)||c.push(e),l.push(e)))}(r.length>0||c.length>0||a.length>0)&&t.emit("change",[{added:r,updated:c,removed:a},s]),(r.length>0||l.length>0||a.length>0)&&t.emit("update",[{added:r,updated:l,removed:a},s])})(s.awareness,l(e),s)},lt[2]=(t,e,s)=>{((t,e,s)=>{0===n(t)&&s(0,T(t))})(e,0,((t,e)=>ct(s,e)))};const ct=(t,e)=>console.warn(`Permission denied to access ${t.url}.\n${e}`),at=(t,e,s)=>{const i=z(e),o=p(),r=n(i),l=t.messageHandlers[r];return l?l(o,i,t,s,r):console.error("Unable to compute message"),o},ht=(t,e,s)=>{e===t.ws&&(t.emit("connection-close",[s,t]),t.ws=null,e.close(),t.wsconnecting=!1,t.wsconnected?(t.wsconnected=!1,t.synced=!1,nt(t.awareness,Array.from(t.awareness.getStates().keys()).filter((e=>e!==t.doc.clientID)),t),t.emit("status",[{status:"disconnected"}])):t.wsUnsuccessfulReconnects++,setTimeout(dt,_(100*N(2,t.wsUnsuccessfulReconnects),t.maxBackoffTime),t))},dt=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=W();const i=at(e,new Uint8Array(t.data),!0);O(i)>1&&s.send(o(i))},s.onerror=t=>{e.emit("connection-error",[t,e])},s.onclose=t=>{ht(e,s,t)},s.onopen=()=>{e.wsLastMessageReceived=W(),e.wsconnecting=!1,e.wsconnected=!0,e.wsUnsuccessfulReconnects=0,e.emit("status",[{status:"connected"}]);const n=p();if(t(n,0),tt(n,e.doc),s.send(o(n)),null!==e.awareness.getLocalState()){const n=p();t(n,1),i(n,rt(e.awareness,[e.doc.clientID])),s.send(o(n))}},e.emit("status",[{status:"connecting"}])}},ut=(t,e)=>{const s=t.ws;t.wsconnected&&s&&s.readyState===s.OPEN&&s.send(e),t.bcconnected&&Z(t.bcChannel,e,t)};class mt extends A{constructor(e,s,n,{connect:r=!0,awareness:l=new ot(n),params:c={},protocols:a=[],WebSocketPolyfill:h=WebSocket,resyncInterval:d=-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=c,this.protocols=a,this.roomname=s,this.doc=n,this._WS=h,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=lt.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=r,this._resyncInterval=0,d>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const e=p();t(e,0),tt(e,n),this.ws.send(o(e))}}),d)),this._bcSubscriber=(t,e)=>{if(e!==this){const e=at(this,new Uint8Array(t),!1);O(e)>1&&Z(this.bcChannel,o(e),this)}},this._updateHandler=(e,s)=>{if(s!==this){const s=p();t(s,0),((e,s)=>{t(e,2),i(e,s)})(s,e),ut(this,o(s))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:e,updated:s,removed:n})=>{const r=e.concat(s).concat(n),c=p();t(c,1),i(c,rt(l,r)),ut(this,o(c))},this._exitHandler=()=>{nt(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<W()-this.wsLastMessageReceived&&ht(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const t=(()=>M(this.params,((t,e)=>`${encodeURIComponent(e)}=${encodeURIComponent(t)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===t.length?"":"?"+t)}get synced(){return this._synced}set synced(t){this._synced!==t&&(this._synced=t,this.emit("synced",[t]),this.emit("sync",[t]))}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||(((t,e)=>{V(this.bcChannel).subs.add(e)})(0,this._bcSubscriber),this.bcconnected=!0);const e=p();t(e,0),tt(e,this.doc),Z(this.bcChannel,o(e),this);const s=p();t(s,0),et(s,this.doc),Z(this.bcChannel,o(s),this);const n=p();t(n,3),Z(this.bcChannel,o(n),this);const r=p();t(r,1),i(r,rt(this.awareness,[this.doc.clientID])),Z(this.bcChannel,o(r),this)}disconnectBc(){const e=p();t(e,1),i(e,rt(this.awareness,[this.doc.clientID],new Map)),ut(this,o(e)),this.bcconnected&&(((t,e)=>{const s=V(t);s.subs.delete(e)&&0===s.subs.size&&(s.bc.close(),X.delete(t))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&ht(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(dt(this),this.connectBc())}}class pt{provider;isConnected=!1;constructor(t,e,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||t;this.provider=new mt(i,o,e,{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(t){return{create:(e,s)=>new pt(e,s,t)}}setupEventListeners(){this.provider.on("status",(({status:t})=>{"connected"===t?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===t&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(t=>{t&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("WebSocket connection timeout"))}),1e4),i=({status:e})=>{"connected"===e&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class ft{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(t,e,s){const i=s?.name||t,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||ft.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const t={websocketProvider:n,name:i,document:e,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&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),this.provider=new R(t),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const t={url:o,name:i,document:e,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&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),s?.WebSocketPolyfill&&(t.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new R(t),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(t){if(ft.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),ft.sharedWebSocketProvider;const e={url:t.url};return t.WebSocketPolyfill&&(e.WebSocketPolyfill=t.WebSocketPolyfill),t.onConnect&&(e.onConnect=t.onConnect),t.onDisconnect&&(e.onDisconnect=t.onDisconnect),t.onStatus&&(e.onStatus=t.onStatus),ft.sharedWebSocketProvider=new Y(e),console.info("Shared Hocuspocus WebSocket created: "+t.url),ft.sharedWebSocketProvider}static destroySharedWebSocket(){ft.sharedWebSocketProvider&&(ft.sharedWebSocketProvider.destroy(),ft.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return ft.sharedWebSocketProvider}static with(t){return{create:(e,s)=>new ft(e,s,t)}}async connect(){if(!this.isSynced)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),t()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void t();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,ft as HocuspocusSyncProvider,pt as WebSocketSyncProvider}
|
|
1
|
+
export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BxS4Pdpz.js";export{d as KritzelBrushTool,c as KritzelGroup,b as KritzelLine,e as KritzelLineTool,a as KritzelPath,g as KritzelSelectionTool,K as KritzelText,f as KritzelTextTool}from"./p-DOF5fWDU.js";import{w as t,a as i,t as o,r as n,b as l,e as h,c as u,d as m,f as p,g as z,s as C,h as k,i as y,v as S,j as x,o as w,k as j,l as v,m as T,O as P,n as U,p as W,q as B,u as M,x as H,y as A,z as O,A as $,B as _,C as N,H as R,D as Y}from"./p-DwJUC6cw.js";export{I as IndexedDBSyncProvider,L as KritzelAnchorManager,J as KritzelAppStateMap,G as KritzelCursorHelper,E as KritzelEraserTool,K as KritzelImage,F as KritzelImageTool}from"./p-DwJUC6cw.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{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{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.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{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelOpacitySlider,defineCustomElement as defineCustomElementKritzelOpacitySlider}from"./kritzel-opacity-slider.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelShapeFill,defineCustomElement as defineCustomElementKritzelShapeFill}from"./kritzel-shape-fill.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(t,e,s){this.doc=e,this.channel=new BroadcastChannel(t),this.channel.onmessage=t=>{this.handleMessage(t.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+t)}handleDocUpdate=(e,s)=>{if(s!==this){const s=p();t(s,0),i(s,e),this.channel.postMessage(o(s))}};handleMessage(e){const s=z(new Uint8Array(e));switch(n(s)){case 0:const e=l(s);u(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=l(s),r=h(this.doc,n);if(r.length>0){const e=p();t(e,0),i(e,r),this.channel.postMessage(o(e))}}}broadcastSync(){const e=p();t(e,2),i(e,m(this.doc)),this.channel.postMessage(o(e))}async connect(){if(!this._synced)return new Promise((t=>{const e=()=>{this._synced?t():setTimeout(e,50)};e()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const X=new Map,Q="undefined"==typeof BroadcastChannel?class{constructor(t){this.room=t,this.onmessage=null,this._onChange=e=>e.key===t&&null!==this.onmessage&&this.onmessage({data:y(e.newValue||"")}),w(this._onChange)}postMessage(t){S.setItem(this.room,x(j(t)))}close(){v(this._onChange)}}:BroadcastChannel,V=t=>C(X,t,(()=>{const e=k(),s=new Q(t);return s.onmessage=t=>e.forEach((e=>e(t.data,"broadcastchannel"))),{bc:s,subs:e}})),Z=(t,e,s=null)=>{const i=V(t);i.bc.postMessage(e),i.subs.forEach((t=>t(e,s)))},tt=(e,s)=>{t(e,0);const o=m(s);i(e,o)},et=(e,s,o)=>{t(e,1),i(e,h(s,o))},st=(t,e,s,i)=>{try{u(e,l(t),s)}catch(t){null!=i&&i(t),console.error("Caught error while handling a Yjs update",t)}},it=st;class ot extends P{constructor(t){super(),this.doc=t,this.clientID=t.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const t=W();null!==this.getLocalState()&&15e3<=t-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const e=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=t-s.lastUpdated&&this.states.has(i)&&e.push(i)})),e.length>0&&nt(this,e,"timeout")}),U(3e3)),t.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(t){const e=this.clientID,s=this.meta.get(e),i=void 0===s?0:s.clock+1,o=this.states.get(e);null===t?this.states.delete(e):this.states.set(e,t),this.meta.set(e,{clock:i,lastUpdated:W()});const n=[],r=[],l=[],c=[];null===t?c.push(e):null==o?null!=t&&n.push(e):(r.push(e),B(o,t)||l.push(e)),(n.length>0||l.length>0||c.length>0)&&this.emit("change",[{added:n,updated:l,removed:c},"local"]),this.emit("update",[{added:n,updated:r,removed:c},"local"])}setLocalStateField(t,e){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[t]:e})}getStates(){return this.states}}const nt=(t,e,s)=>{const i=[];for(let s=0;s<e.length;s++){const o=e[s];if(t.states.has(o)){if(t.states.delete(o),o===t.clientID){const e=t.meta.get(o);t.meta.set(o,{clock:e.clock+1,lastUpdated:W()})}i.push(o)}}i.length>0&&(t.emit("change",[{added:[],updated:[],removed:i},s]),t.emit("update",[{added:[],updated:[],removed:i},s]))},rt=(e,s,i=e.states)=>{const n=s.length,r=p();t(r,n);for(let o=0;o<n;o++){const n=s[o],l=i.get(n)||null,c=e.meta.get(n).clock;t(r,n),t(r,c),M(r,JSON.stringify(l))}return o(r)},lt=[];lt[0]=(e,s,i,o)=>{t(e,0);const r=((t,e,s,i,o)=>{const r=n(t);switch(r){case 0:((t,e,s)=>{et(e,s,l(t))})(t,e,s);break;case 1:st(t,s,i,o);break;case 2:it(t,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)},lt[3]=(e,s,o)=>{t(e,1),i(e,rt(o.awareness,Array.from(o.awareness.getStates().keys())))},lt[1]=(t,e,s)=>{((t,e,s)=>{const i=z(e),o=W(),r=[],l=[],c=[],a=[],h=n(i);for(let e=0;e<h;e++){const e=n(i);let s=n(i);const h=JSON.parse(T(i)),d=t.meta.get(e),u=t.states.get(e),m=void 0===d?0:d.clock;(m<s||m===s&&null===h&&t.states.has(e))&&(null===h?e===t.clientID&&null!=t.getLocalState()?s++:t.states.delete(e):t.states.set(e,h),t.meta.set(e,{clock:s,lastUpdated:o}),void 0===d&&null!==h?r.push(e):void 0!==d&&null===h?a.push(e):null!==h&&(B(h,u)||c.push(e),l.push(e)))}(r.length>0||c.length>0||a.length>0)&&t.emit("change",[{added:r,updated:c,removed:a},s]),(r.length>0||l.length>0||a.length>0)&&t.emit("update",[{added:r,updated:l,removed:a},s])})(s.awareness,l(e),s)},lt[2]=(t,e,s)=>{((t,e,s)=>{0===n(t)&&s(0,T(t))})(e,0,((t,e)=>ct(s,e)))};const ct=(t,e)=>console.warn(`Permission denied to access ${t.url}.\n${e}`),at=(t,e,s)=>{const i=z(e),o=p(),r=n(i),l=t.messageHandlers[r];return l?l(o,i,t,s,r):console.error("Unable to compute message"),o},ht=(t,e,s)=>{e===t.ws&&(t.emit("connection-close",[s,t]),t.ws=null,e.close(),t.wsconnecting=!1,t.wsconnected?(t.wsconnected=!1,t.synced=!1,nt(t.awareness,Array.from(t.awareness.getStates().keys()).filter((e=>e!==t.doc.clientID)),t),t.emit("status",[{status:"disconnected"}])):t.wsUnsuccessfulReconnects++,setTimeout(dt,_(100*N(2,t.wsUnsuccessfulReconnects),t.maxBackoffTime),t))},dt=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=W();const i=at(e,new Uint8Array(t.data),!0);O(i)>1&&s.send(o(i))},s.onerror=t=>{e.emit("connection-error",[t,e])},s.onclose=t=>{ht(e,s,t)},s.onopen=()=>{e.wsLastMessageReceived=W(),e.wsconnecting=!1,e.wsconnected=!0,e.wsUnsuccessfulReconnects=0,e.emit("status",[{status:"connected"}]);const n=p();if(t(n,0),tt(n,e.doc),s.send(o(n)),null!==e.awareness.getLocalState()){const n=p();t(n,1),i(n,rt(e.awareness,[e.doc.clientID])),s.send(o(n))}},e.emit("status",[{status:"connecting"}])}},ut=(t,e)=>{const s=t.ws;t.wsconnected&&s&&s.readyState===s.OPEN&&s.send(e),t.bcconnected&&Z(t.bcChannel,e,t)};class mt extends A{constructor(e,s,n,{connect:r=!0,awareness:l=new ot(n),params:c={},protocols:a=[],WebSocketPolyfill:h=WebSocket,resyncInterval:d=-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=c,this.protocols=a,this.roomname=s,this.doc=n,this._WS=h,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=m,this.wsUnsuccessfulReconnects=0,this.messageHandlers=lt.slice(),this._synced=!1,this.ws=null,this.wsLastMessageReceived=0,this.shouldConnect=r,this._resyncInterval=0,d>0&&(this._resyncInterval=setInterval((()=>{if(this.ws&&this.ws.readyState===WebSocket.OPEN){const e=p();t(e,0),tt(e,n),this.ws.send(o(e))}}),d)),this._bcSubscriber=(t,e)=>{if(e!==this){const e=at(this,new Uint8Array(t),!1);O(e)>1&&Z(this.bcChannel,o(e),this)}},this._updateHandler=(e,s)=>{if(s!==this){const s=p();t(s,0),((e,s)=>{t(e,2),i(e,s)})(s,e),ut(this,o(s))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:e,updated:s,removed:n})=>{const r=e.concat(s).concat(n),c=p();t(c,1),i(c,rt(l,r)),ut(this,o(c))},this._exitHandler=()=>{nt(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<W()-this.wsLastMessageReceived&&ht(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const t=(()=>H(this.params,((t,e)=>`${encodeURIComponent(e)}=${encodeURIComponent(t)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===t.length?"":"?"+t)}get synced(){return this._synced}set synced(t){this._synced!==t&&(this._synced=t,this.emit("synced",[t]),this.emit("sync",[t]))}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||(((t,e)=>{V(this.bcChannel).subs.add(e)})(0,this._bcSubscriber),this.bcconnected=!0);const e=p();t(e,0),tt(e,this.doc),Z(this.bcChannel,o(e),this);const s=p();t(s,0),et(s,this.doc),Z(this.bcChannel,o(s),this);const n=p();t(n,3),Z(this.bcChannel,o(n),this);const r=p();t(r,1),i(r,rt(this.awareness,[this.doc.clientID])),Z(this.bcChannel,o(r),this)}disconnectBc(){const e=p();t(e,1),i(e,rt(this.awareness,[this.doc.clientID],new Map)),ut(this,o(e)),this.bcconnected&&(((t,e)=>{const s=V(t);s.subs.delete(e)&&0===s.subs.size&&(s.bc.close(),X.delete(t))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&ht(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(dt(this),this.connectBc())}}class pt{provider;isConnected=!1;constructor(t,e,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||t;this.provider=new mt(i,o,e,{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(t){return{create:(e,s)=>new pt(e,s,t)}}setupEventListeners(){this.provider.on("status",(({status:t})=>{"connected"===t?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===t&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(t=>{t&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("WebSocket connection timeout"))}),1e4),i=({status:e})=>{"connected"===e&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class ft{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(t,e,s){const i=s?.name||t,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||ft.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const t={websocketProvider:n,name:i,document:e,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&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),this.provider=new R(t),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const t={url:o,name:i,document:e,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&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),s?.WebSocketPolyfill&&(t.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new R(t),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(t){if(ft.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),ft.sharedWebSocketProvider;const e={url:t.url};return t.WebSocketPolyfill&&(e.WebSocketPolyfill=t.WebSocketPolyfill),t.onConnect&&(e.onConnect=t.onConnect),t.onDisconnect&&(e.onDisconnect=t.onDisconnect),t.onStatus&&(e.onStatus=t.onStatus),ft.sharedWebSocketProvider=new Y(e),console.info("Shared Hocuspocus WebSocket created: "+t.url),ft.sharedWebSocketProvider}static destroySharedWebSocket(){ft.sharedWebSocketProvider&&(ft.sharedWebSocketProvider.destroy(),ft.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return ft.sharedWebSocketProvider}static with(t){return{create:(e,s)=>new ft(e,s,t)}}async connect(){if(!this.isSynced)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),t()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void t();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,ft as HocuspocusSyncProvider,pt as WebSocketSyncProvider}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as o,d as
|
|
1
|
+
import{K as o,d as p}from"./p-DMJI6opm.js";const s=o,m=p;export{s as KritzelColorPalette,m as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as o,d as
|
|
1
|
+
import{K as o,d as r}from"./p-e1r5dgeP.js";const s=o,e=r;export{s as KritzelColor,e as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as o,d as
|
|
1
|
+
import{K as o,d as p}from"./p-CkpOndCn.js";const s=o,n=p;export{s as KritzelControls,n as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as o,d as
|
|
1
|
+
import{K as o,d as r}from"./p-BlUr7oVq.js";const s=o,p=r;export{s as KritzelCursorTrail,p as defineCustomElement}
|