kritzel-stencil 0.4.24 → 0.4.26
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/LICENSE +21 -21
- package/LICENSE.md +49 -49
- package/dist/cjs/{index-Dn19mGl-.js → index-Xav9JFHg.js} +13 -49
- package/dist/cjs/index.cjs.js +7 -1
- package/dist/cjs/{kritzel-active-users_47.cjs.entry.js → kritzel-active-users_46.cjs.entry.js} +112 -217
- package/dist/cjs/kritzel-brush-style.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{schema.constants-CY0WWJYd.js → schema.constants-CjN-B633.js} +20 -44
- package/dist/cjs/stencil.cjs.js +3 -3
- package/dist/collection/classes/providers/sync/hocuspocus-sync-provider.class.js +3 -0
- package/dist/collection/classes/providers/sync/websocket-sync-provider.class.js +3 -0
- package/dist/collection/collection-manifest.json +1 -2
- package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.css +115 -115
- package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js +1 -1
- package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.css +10 -10
- package/dist/collection/components/core/kritzel-cursor-trail/kritzel-cursor-trail.js +1 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.css +160 -160
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +18 -20
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.css +80 -80
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +22 -124
- package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.css +29 -29
- package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.js +2 -2
- package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.css +58 -58
- package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js +3 -3
- package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.css +42 -42
- package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js +3 -3
- package/dist/collection/components/shared/kritzel-button/kritzel-button.css +73 -73
- package/dist/collection/components/shared/kritzel-button/kritzel-button.js +2 -2
- package/dist/collection/components/shared/kritzel-color/kritzel-color.css +24 -24
- package/dist/collection/components/shared/kritzel-color/kritzel-color.js +2 -2
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.css +46 -46
- package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js +1 -1
- package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css +209 -209
- package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css +190 -190
- package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js +2 -2
- package/dist/collection/components/shared/kritzel-font/kritzel-font.css +10 -10
- package/dist/collection/components/shared/kritzel-font/kritzel-font.js +1 -1
- package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.css +48 -48
- package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js +2 -2
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.css +30 -30
- package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js +1 -1
- package/dist/collection/components/shared/kritzel-icon/kritzel-icon.css +18 -18
- package/dist/collection/components/shared/kritzel-input/kritzel-input.css +69 -69
- package/dist/collection/components/shared/kritzel-input/kritzel-input.js +1 -1
- package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.css +60 -60
- package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js +3 -3
- package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.css +190 -190
- package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js +3 -3
- package/dist/collection/components/shared/kritzel-menu/kritzel-menu.css +34 -34
- package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js +1 -1
- package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.css +166 -166
- package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js +2 -2
- package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.css +102 -102
- package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js +1 -1
- package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.css +85 -85
- package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js +1 -1
- package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.css +68 -68
- package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.js +2 -2
- package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +1 -1
- package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.css +47 -47
- package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js +4 -4
- package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.css +48 -48
- package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js +1 -1
- package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css +78 -78
- package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js +1 -1
- package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.css +37 -37
- package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js +1 -1
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.css +18 -18
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +2 -2
- package/dist/collection/components/ui/kritzel-active-users/kritzel-active-users.css +65 -65
- package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.css +42 -42
- package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js +1 -1
- package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +112 -112
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +331 -331
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +6 -6
- package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.css +11 -11
- package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js +1 -1
- package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.css +39 -39
- package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js +1 -1
- package/dist/collection/components/ui/kritzel-export/kritzel-export.css +89 -89
- package/dist/collection/components/ui/kritzel-export/kritzel-export.js +1 -1
- package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.css +50 -50
- package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js +1 -1
- package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.css +98 -98
- package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
- package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.css +58 -58
- package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js +2 -2
- package/dist/collection/components/ui/kritzel-notification-card/kritzel-notification-card.css +101 -101
- package/dist/collection/components/ui/kritzel-settings/kritzel-settings.css +137 -137
- package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +1 -1
- package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.css +150 -150
- package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
- package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.css +38 -38
- package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.css +45 -45
- package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js +1 -1
- package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css +16 -16
- package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.css +72 -72
- package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js +1 -1
- package/dist/collection/constants/version.js +1 -1
- package/dist/collection/helpers/cursor.helper.js +6 -6
- package/dist/collection/helpers/svg-export.helper.js +41 -41
- package/dist/components/index.d.ts +0 -2
- package/dist/components/index.js +9 -4
- package/dist/components/kritzel-active-users.js +1 -1
- package/dist/components/kritzel-avatar.js +1 -1
- package/dist/components/kritzel-awareness-cursors.js +1 -1
- package/dist/components/kritzel-back-to-content.js +1 -1
- package/dist/components/kritzel-brush-style.js +4 -4
- package/dist/components/kritzel-button.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-context-menu.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-current-user-dialog.js +1 -1
- package/dist/components/kritzel-current-user.js +1 -1
- package/dist/components/kritzel-cursor-trail.js +1 -1
- package/dist/components/kritzel-dialog.js +1 -1
- package/dist/components/kritzel-dropdown.js +1 -1
- package/dist/components/kritzel-editor.js +94 -102
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-export.js +1 -1
- package/dist/components/kritzel-font-family.js +1 -1
- package/dist/components/kritzel-font-size.js +1 -1
- package/dist/components/kritzel-font.js +1 -1
- package/dist/components/kritzel-icon.js +1 -1
- package/dist/components/kritzel-input.js +1 -1
- package/dist/components/kritzel-line-endings.js +1 -1
- package/dist/components/kritzel-loading-overlay.js +1 -1
- package/dist/components/kritzel-login-dialog.js +1 -1
- package/dist/components/kritzel-master-detail.js +1 -1
- package/dist/components/kritzel-menu-item.js +1 -1
- package/dist/components/kritzel-menu.js +1 -1
- package/dist/components/kritzel-more-menu.js +1 -1
- package/dist/components/kritzel-notification-card.js +1 -1
- package/dist/components/kritzel-numeric-input.js +1 -1
- package/dist/components/kritzel-opacity-slider.js +1 -1
- package/dist/components/kritzel-pill-tabs.js +1 -1
- package/dist/components/kritzel-portal.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-shape-fill.js +1 -1
- package/dist/components/kritzel-share-dialog.js +1 -1
- package/dist/components/kritzel-slide-toggle.js +1 -1
- package/dist/components/kritzel-split-button.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/kritzel-utility-panel.js +1 -1
- package/dist/components/kritzel-watermark.js +1 -1
- package/dist/components/kritzel-workspace-manager.js +1 -1
- package/dist/components/kritzel-zoom-panel.js +1 -1
- package/dist/components/{p-BFYT03fw.js → p-B38_9BJg.js} +3 -3
- package/dist/components/{p-C9_yBEoX.js → p-B43upypT.js} +10 -30
- package/dist/components/{p-Covorf4C.js → p-BFYtCsZu.js} +3 -3
- package/dist/components/{p-BppcoKoo.js → p-BPzdPKWE.js} +5 -5
- package/dist/components/{p-Cx-L_28S.js → p-Ba0c-tu2.js} +3 -3
- package/dist/components/{p-MhQxGUvY.js → p-BeSKOETx.js} +3 -3
- package/dist/components/{p-CLAz6RJc.js → p-BprEDRpA.js} +3 -3
- package/dist/components/{p-BXUx_C0N.js → p-BsLI_BWq.js} +2 -2
- package/dist/components/{p-CSKToqUl.js → p-C0FEC_gS.js} +4 -4
- package/dist/components/{p-D2VcPEtL.js → p-CAXR5-S9.js} +6 -6
- package/dist/components/{p-DYPA7jpg.js → p-CBrn5AIB.js} +2 -2
- package/dist/components/{p-D3BzgkIE.js → p-CSPYkLLH.js} +2 -2
- package/dist/components/{p-Ck-87E2G.js → p-CSuU8frA.js} +1 -1
- package/dist/components/{p-Di--2boB.js → p-CXpv9Rxe.js} +3 -3
- package/dist/components/{p-dAXnRkjA.js → p-Ce1j1-Hg.js} +5 -5
- package/dist/components/{p-BrA9NBEE.js → p-CeffYwAK.js} +21 -21
- package/dist/components/{p-DT_WBwsw.js → p-ChPs27Fd.js} +6 -6
- package/dist/components/{p-3tBE7SyG.js → p-Cm33td2O.js} +2 -2
- package/dist/components/{p-BkXQL5Dl.js → p-CoXN583u.js} +5 -5
- package/dist/components/{p-Ch-KG9To.js → p-CucCT7Qn.js} +3 -3
- package/dist/components/{p-DPsbNStn.js → p-Cva3jIIU.js} +2 -2
- package/dist/components/{p-D0Trc3IQ.js → p-D0Ed8epW.js} +5 -5
- package/dist/components/{p-DafP9PAA.js → p-DFMZEarE.js} +2 -2
- package/dist/components/{p-BShrnlam.js → p-DK0anxtL.js} +2 -2
- package/dist/components/{p-zG-WUBGF.js → p-DN9p3G9K.js} +4 -4
- package/dist/components/{p-DcUIO14-.js → p-DOTdJ3JQ.js} +4 -4
- package/dist/components/{p-CWAChRD5.js → p-DOl-95VY.js} +12 -12
- package/dist/components/{p-Dznwo6oc.js → p-DTB3ykgO.js} +2 -2
- package/dist/components/{p-BZZ3KRPk.js → p-DUmLsjKb.js} +3 -3
- package/dist/components/{p-DwEYMvIn.js → p-DUoQyGKc.js} +66 -178
- package/dist/components/{p-QSyeAy8R.js → p-DX2nriaq.js} +2 -2
- package/dist/components/{p-BrqSjRJN.js → p-D_cyY7Nd.js} +3 -3
- package/dist/components/{p-CHoOe3FD.js → p-Df3BwVGy.js} +3 -3
- package/dist/components/{p-CSWCmyzb.js → p-DhabvHJM.js} +5 -5
- package/dist/components/{p-o3NYKrVL.js → p-DkHYY72B.js} +3 -3
- package/dist/components/{p-vDCa_ZDm.js → p-DnmVD1Mz.js} +3 -3
- package/dist/components/{p-fSV6KVTC.js → p-DoxFuOy1.js} +3 -3
- package/dist/components/{p-b0J2ktAm.js → p-Dpm75DfV.js} +7 -7
- package/dist/components/{p-ME1sDz3f.js → p-Dvn6ad4a.js} +2 -2
- package/dist/components/{p-Qdo3E8dr.js → p-NOWtUeeQ.js} +2 -2
- package/dist/components/{p-Dp1CD4gK.js → p-OUl5CA4Y.js} +2 -2
- package/dist/components/{p-D6JycG-I.js → p-bAacqNHq.js} +3 -3
- package/dist/components/{p-DjXQxw9R.js → p-djJSnjAX.js} +3 -3
- package/dist/components/{p-1Q4VnThv.js → p-jIKskj3S.js} +3 -3
- package/dist/components/{p-DW1B118Q.js → p-m7SeNszM.js} +9 -9
- package/dist/esm/{index-2va1Pk9z.js → index-Dhio9uis.js} +13 -49
- package/dist/esm/index.js +8 -2
- package/dist/{stencil/p-ce6d432e.entry.js → esm/kritzel-active-users_46.entry.js} +113 -217
- package/dist/esm/kritzel-brush-style.entry.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{schema.constants-DBvUmuDH.js → schema.constants-DfvqHmxc.js} +20 -44
- package/dist/esm/stencil.js +4 -4
- package/dist/stencil/index.esm.js +8 -2
- package/dist/{esm/kritzel-active-users_47.entry.js → stencil/p-5c045d3e.entry.js} +113 -217
- package/dist/stencil/{p-DBvUmuDH.js → p-DfvqHmxc.js} +20 -44
- package/dist/stencil/{p-2va1Pk9z.js → p-Dhio9uis.js} +11 -47
- package/dist/stencil/{p-df06ca3a.entry.js → p-fb32cd8f.entry.js} +2 -2
- package/dist/stencil/stencil.esm.js +4 -4
- package/dist/types/classes/providers/sync/hocuspocus-sync-provider.class.d.ts +1 -0
- package/dist/types/classes/providers/sync/websocket-sync-provider.class.d.ts +1 -0
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +0 -1
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +0 -14
- package/dist/types/components.d.ts +0 -42
- package/dist/types/constants/version.d.ts +1 -1
- package/dist/types/interfaces/sync-provider.interface.d.ts +7 -0
- package/dist/types/stencil-public-runtime.d.ts +0 -12
- package/loader/index.d.ts +1 -1
- package/package.json +1 -1
- package/readme.md +10 -10
- package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.css +0 -50
- package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.js +0 -66
- package/dist/components/kritzel-sync-indicator.d.ts +0 -11
- package/dist/components/kritzel-sync-indicator.js +0 -6
- package/dist/components/p-Bxi-Bm49.js +0 -39
- package/dist/types/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.d.ts +0 -7
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './
|
|
2
|
-
import { c as KritzelPath, e as KritzelLine, U as KritzelColorHelper, V as KritzelDevicesHelper, X as KritzelMouseButton, Y as KritzelHTMLHelper, Z as DEFAULT_STROKE_SIZES, _ as DEFAULT_COLOR_PALETTE, S as ShapeType, q as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, j as KritzelBrushTool, l as KritzelEraserTool, C as DEFAULT_LINE_TOOL_CONFIG, k as KritzelLineTool, o as KritzelShapeTool, B as DEFAULT_TEXT_CONFIG, n as KritzelTextTool, m as KritzelImageTool, N as KritzelAlignment, z as hasRemoteSyncProvider, E as DEFAULT_ASSET_STORAGE_CONFIG, $ as ObjectHelper, a0 as resolveTextToolAvailableFonts, a1 as ThemeHelper, G as darkTheme, F as lightTheme, a2 as KritzelSelectionGroup, a3 as KritzelSelectionBox, a4 as KritzelIconRegistry, y as KritzelFontRegistry, a5 as KritzelKeyboardHelper, a6 as KritzelBaseHandler, s as KritzelWorkspace, f as KritzelGroup, h as KritzelCustomElement, d as KritzelImage, g as KritzelShape, b as KritzelText, O as runMigrations, T as CURRENT_WORKSPACE_SCHEMA_VERSION, Q as WORKSPACE_MIGRATIONS, a7 as KritzelClassHelper, R as CURRENT_APP_STATE_SCHEMA_VERSION, P as APP_STATE_MIGRATIONS, p as KritzelCursorHelper, a8 as KritzelImageFileHelper, a9 as imageCompression, t as KritzelAnchorManager, u as KritzelThemeManager, v as KritzelLocalizationManager, w as KritzelLicenseManager, r as KritzelAssetResolver, aa as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION, i as KritzelBaseTool } from './
|
|
1
|
+
import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './p-Dhio9uis.js';
|
|
2
|
+
import { c as KritzelPath, e as KritzelLine, U as KritzelColorHelper, V as KritzelDevicesHelper, X as KritzelMouseButton, Y as KritzelHTMLHelper, Z as DEFAULT_STROKE_SIZES, _ as DEFAULT_COLOR_PALETTE, S as ShapeType, q as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, j as KritzelBrushTool, l as KritzelEraserTool, C as DEFAULT_LINE_TOOL_CONFIG, k as KritzelLineTool, o as KritzelShapeTool, B as DEFAULT_TEXT_CONFIG, n as KritzelTextTool, m as KritzelImageTool, N as KritzelAlignment, z as hasRemoteSyncProvider, E as DEFAULT_ASSET_STORAGE_CONFIG, $ as ObjectHelper, a0 as resolveTextToolAvailableFonts, a1 as ThemeHelper, G as darkTheme, F as lightTheme, a2 as KritzelSelectionGroup, a3 as KritzelSelectionBox, a4 as KritzelIconRegistry, y as KritzelFontRegistry, a5 as KritzelKeyboardHelper, a6 as KritzelBaseHandler, s as KritzelWorkspace, f as KritzelGroup, h as KritzelCustomElement, d as KritzelImage, g as KritzelShape, b as KritzelText, O as runMigrations, T as CURRENT_WORKSPACE_SCHEMA_VERSION, Q as WORKSPACE_MIGRATIONS, a7 as KritzelClassHelper, R as CURRENT_APP_STATE_SCHEMA_VERSION, P as APP_STATE_MIGRATIONS, p as KritzelCursorHelper, a8 as KritzelImageFileHelper, a9 as imageCompression, t as KritzelAnchorManager, u as KritzelThemeManager, v as KritzelLocalizationManager, w as KritzelLicenseManager, r as KritzelAssetResolver, aa as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION, i as KritzelBaseTool } from './p-DfvqHmxc.js';
|
|
3
3
|
import * as Y from 'yjs';
|
|
4
4
|
import 'y-indexeddb';
|
|
5
5
|
import 'y-websocket';
|
|
@@ -136,16 +136,16 @@ const KritzelAvatar = class {
|
|
|
136
136
|
height: `${this.size}px`,
|
|
137
137
|
fontSize: `${Math.round(this.size * 0.4)}px`,
|
|
138
138
|
};
|
|
139
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'f199b56955b749b868ad8e7940ef3114f1109c37', style: containerStyles, class: {
|
|
140
140
|
'has-image': !!showImage,
|
|
141
141
|
'has-initials': !!showInitials,
|
|
142
142
|
'has-default': !!showDefaultIcon,
|
|
143
|
-
}, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '
|
|
143
|
+
}, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '621a58cc965cf6d037f8515e1263bd5bf4098ab0', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
|
|
144
144
|
if (el) {
|
|
145
145
|
el.referrerPolicy = 'no-referrer';
|
|
146
146
|
el.crossOrigin = 'anonymous';
|
|
147
147
|
}
|
|
148
|
-
}, onError: this.handleImageError })), showInitials && (h("span", { key: '
|
|
148
|
+
}, onError: this.handleImageError })), showInitials && (h("span", { key: '28ff2e8b191c2d476c0f40dd57a2c8ec330ba104', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: 'd2ef56b2fca2a609b5b99bb8d7e8747308ab9699', class: "avatar-default" }, h("svg", { key: '1c1d6e6e306a9938f559016eeb77a67aae42f536', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '2c6af53101c20e137756d1194a3bac04c931066d', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
|
|
149
149
|
}
|
|
150
150
|
static get watchers() { return {
|
|
151
151
|
"user": [{
|
|
@@ -158,7 +158,7 @@ const KritzelAvatar = class {
|
|
|
158
158
|
};
|
|
159
159
|
KritzelAvatar.style = kritzelAvatarCss();
|
|
160
160
|
|
|
161
|
-
const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,
|
|
161
|
+
const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
|
|
162
162
|
|
|
163
163
|
const STALE_THRESHOLD_MS = 10_000;
|
|
164
164
|
const REMOVE_THRESHOLD_MS = 30_000;
|
|
@@ -363,7 +363,7 @@ const KritzelAwarenessCursors = class {
|
|
|
363
363
|
}
|
|
364
364
|
render() {
|
|
365
365
|
const cursors = Array.from(this.remoteCursors.values());
|
|
366
|
-
return (h(Host, { key: '
|
|
366
|
+
return (h(Host, { key: '9be6694250bafe011be27301d1c7a53fc7957657' }, cursors.map(remoteCursor => {
|
|
367
367
|
if (!remoteCursor.cursor)
|
|
368
368
|
return null;
|
|
369
369
|
// When a remote user is actively drawing, derive cursor position from
|
|
@@ -470,7 +470,7 @@ const KritzelBackToContent = class {
|
|
|
470
470
|
this.backToContent.emit();
|
|
471
471
|
};
|
|
472
472
|
render() {
|
|
473
|
-
return (h(Host, { key: '
|
|
473
|
+
return (h(Host, { key: '0a41ed93e39193416eebdaf786557bffd4653dd0' }, h("button", { key: '1f621de9699127a095e94d910d5c96328324b299', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '8ff49df055a0472edbbc57d84044a2de09b543c8', name: "chevrons-left" }))));
|
|
474
474
|
}
|
|
475
475
|
};
|
|
476
476
|
KritzelBackToContent.style = kritzelBackToContentCss();
|
|
@@ -497,16 +497,16 @@ const KritzelButton = class {
|
|
|
497
497
|
this.buttonClick.emit();
|
|
498
498
|
};
|
|
499
499
|
render() {
|
|
500
|
-
return (h(Host, { key: '
|
|
500
|
+
return (h(Host, { key: 'b7d78dad25d41116ac6368c1ff2cd41ee28d9cdc' }, h("button", { key: '88cfd3674e63cd82ea5874205237415a540307b6', type: this.type, class: {
|
|
501
501
|
'kritzel-button': true,
|
|
502
502
|
[this.variant]: true,
|
|
503
503
|
'disabled': this.disabled,
|
|
504
|
-
}, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '
|
|
504
|
+
}, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'a7f4fd923800f66bc7ea438f2cbcdfde81b11ae1' }))));
|
|
505
505
|
}
|
|
506
506
|
};
|
|
507
507
|
KritzelButton.style = kritzelButtonCss();
|
|
508
508
|
|
|
509
|
-
const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(
|
|
509
|
+
const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient( var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%, var(--kritzel-checkerboard-color-light, #fff) 0% 50% ) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}`;
|
|
510
510
|
|
|
511
511
|
const KritzelColorComponent = class {
|
|
512
512
|
constructor(hostRef) {
|
|
@@ -549,13 +549,13 @@ const KritzelColorComponent = class {
|
|
|
549
549
|
render() {
|
|
550
550
|
const resolvedColor = this.resolveColor();
|
|
551
551
|
const isColorVeryLight = this.isLightColor(resolvedColor);
|
|
552
|
-
return (h(Host, { key: '
|
|
552
|
+
return (h(Host, { key: '17b5c44e1defe8f3fb41632391be093a12bb899b' }, h("div", { key: '545f4c4fd62dea22a4a5f36108a51d30c57f2652', class: "checkerboard-bg", style: {
|
|
553
553
|
width: `${this.size}px`,
|
|
554
554
|
height: `${this.size}px`,
|
|
555
555
|
borderRadius: '50%',
|
|
556
556
|
display: 'inline-block',
|
|
557
557
|
position: 'relative',
|
|
558
|
-
} }, h("div", { key: '
|
|
558
|
+
} }, h("div", { key: 'bbcb68f6e5f00d9a33b316d52ac86e49911e463c', class: {
|
|
559
559
|
'color-circle': true,
|
|
560
560
|
'white': isColorVeryLight,
|
|
561
561
|
}, style: {
|
|
@@ -611,7 +611,7 @@ const KritzelColorPalette = class {
|
|
|
611
611
|
render() {
|
|
612
612
|
const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
|
|
613
613
|
const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
|
|
614
|
-
return (h(Host, { key: '
|
|
614
|
+
return (h(Host, { key: '5f25a2ead76106ba2ef9762b4d212d5a9d7ac2a8' }, h("div", { key: '764cc6a55cc1865aaf1c501ee89a161f74fefa1c', class: {
|
|
615
615
|
'color-grid': true,
|
|
616
616
|
'expanded': this.isExpanded,
|
|
617
617
|
}, style: {
|
|
@@ -1180,13 +1180,13 @@ const KritzelControls = class {
|
|
|
1180
1180
|
// Separate tool controls from config control
|
|
1181
1181
|
const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
|
|
1182
1182
|
const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
|
|
1183
|
-
return (h(Host, { key: '
|
|
1183
|
+
return (h(Host, { key: '42f84f104e4b008a7c53a5e1ea9290c17ba792d2', style: { display: this.visible ? '' : 'none' }, class: {
|
|
1184
1184
|
mobile: this.isTouchDevice,
|
|
1185
|
-
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '
|
|
1185
|
+
} }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8f6b3df9db735dfd847da9683db3fbdcc65b08a4', style: {
|
|
1186
1186
|
position: 'absolute',
|
|
1187
1187
|
bottom: '56px',
|
|
1188
1188
|
left: '12px',
|
|
1189
|
-
}, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '
|
|
1189
|
+
}, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '7a314d779882e2b42a39fdb2a52f434ccacff112', class: "kritzel-controls" }, h("div", { key: '23458bc04c2f1a610cff9c5e617d7be2c657bf4f', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'b17d817767c92ce7a6edf279759d3f1fb1097911', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
|
|
1190
1190
|
// Check if this control has sub-options (split-button)
|
|
1191
1191
|
if (control.subOptions?.length) {
|
|
1192
1192
|
const selectedSubOption = this.getSelectedSubOption(control);
|
|
@@ -1216,10 +1216,10 @@ const KritzelControls = class {
|
|
|
1216
1216
|
'kritzel-control': true,
|
|
1217
1217
|
'selected': this.activeControl?.name === control?.name,
|
|
1218
1218
|
}, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
|
|
1219
|
-
})), h("div", { key: '
|
|
1219
|
+
})), h("div", { key: '740b52666bf823b7dc504a1072f68b59f94a3773', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
|
|
1220
1220
|
'kritzel-config-container': true,
|
|
1221
1221
|
'visible': hasConfigUI,
|
|
1222
|
-
}, key: configControl.name }, h("div", { key: '
|
|
1222
|
+
}, key: configControl.name }, h("div", { key: '7c5697faa2d03931ba9449b58a32e9f06166528e', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '6e9bc7e5cf77778ec1dd2bee1c415344295acc00', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'fbfb910dacd4178aaffca5aa02e4e4422ba1b308', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '59d11a83e8c9968ba8d50df4275a892b4b75958c', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
|
|
1223
1223
|
if (el)
|
|
1224
1224
|
this.configTriggerRef = el;
|
|
1225
1225
|
}, onKeyDown: event => {
|
|
@@ -1228,7 +1228,7 @@ const KritzelControls = class {
|
|
|
1228
1228
|
}
|
|
1229
1229
|
}, style: {
|
|
1230
1230
|
cursor: 'pointer',
|
|
1231
|
-
} }, this.displayValues && (h("div", { key: '
|
|
1231
|
+
} }, this.displayValues && (h("div", { key: '0ce5a0d8f51773b6e31feeee785606d637e06b42', class: "color-container" }, h("kritzel-color", { key: '29cc12dd6677b695b14e76e8a1704da78f910698', value: this.displayValues.color, theme: this.theme, size: 18, style: {
|
|
1232
1232
|
borderRadius: '50%',
|
|
1233
1233
|
border: 'none',
|
|
1234
1234
|
} })))))))));
|
|
@@ -1262,7 +1262,7 @@ const KritzelCurrentUser = class {
|
|
|
1262
1262
|
/** Resolved localized strings keyed by term key, supplied by the editor. */
|
|
1263
1263
|
terms = {};
|
|
1264
1264
|
render() {
|
|
1265
|
-
return (h(Host, { key: '
|
|
1265
|
+
return (h(Host, { key: '30f2cedeefdef5817fcced6b84e74b53beba76ec' }, h("kritzel-avatar", { key: '41dc69bfbc13471fc686bb52e269dc98d2bfa3a8', user: this.user, size: this.avatarSize })));
|
|
1266
1266
|
}
|
|
1267
1267
|
};
|
|
1268
1268
|
KritzelCurrentUser.style = kritzelCurrentUserCss();
|
|
@@ -1303,7 +1303,7 @@ const KritzelCurrentUserDialog = class {
|
|
|
1303
1303
|
}
|
|
1304
1304
|
render() {
|
|
1305
1305
|
const displayName = this.getDisplayName();
|
|
1306
|
-
return (h(Host, { key: '
|
|
1306
|
+
return (h(Host, { key: '33baea01a828422f2bba5c2fba82dd82e5c5b32d' }, h("kritzel-dialog", { key: '5271e1eb5d36b74f8487c040e70424c26f7019f8', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '901697b9439eb8449f2f5c8e044c194f176633b1', class: "user-info" }, h("kritzel-avatar", { key: '76a17b9a2e4442b36b89747a5f5f168d2c59e7a1', user: this.user, size: 80 }), displayName && h("div", { key: '6aaedb1d2d8ea65de2460c15017d13b4e096223d', class: "user-name" }, displayName), this.user?.email && h("div", { key: '3cb78d0007087a18f798849f244399e5d6137e3b', class: "user-email" }, this.user.email), h("kritzel-button", { key: '67d416a1ac1be41cd6b658f79901cea29a287eb7', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
|
|
1307
1307
|
}
|
|
1308
1308
|
};
|
|
1309
1309
|
KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
|
|
@@ -1376,7 +1376,7 @@ const KritzelCursorTrail = class {
|
|
|
1376
1376
|
}
|
|
1377
1377
|
}
|
|
1378
1378
|
render() {
|
|
1379
|
-
return (h(Host, { key: '
|
|
1379
|
+
return (h(Host, { key: 'b427550b19a3e172cb25d05e34635121b82a61c5' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '9685b563497e110f36c0feffbfde04ebeb38024b', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
|
|
1380
1380
|
position: 'absolute',
|
|
1381
1381
|
left: '0',
|
|
1382
1382
|
top: '0',
|
|
@@ -1399,7 +1399,7 @@ const KritzelCursorTrail = class {
|
|
|
1399
1399
|
};
|
|
1400
1400
|
KritzelCursorTrail.style = kritzelCursorTrailCss();
|
|
1401
1401
|
|
|
1402
|
-
const kritzelDialogCss = () => `:host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out,
|
|
1402
|
+
const kritzelDialogCss = () => `:host{display:contents}.dialog-content{text-align:start;line-height:normal}.backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;display:flex;align-items:center;justify-content:center;background-color:var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));opacity:1;transition:opacity 150ms ease-out}.backdrop.is-animating{opacity:0}.dialog-content{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-dialog-background-color, #ffffff);border-radius:var(--kritzel-dialog-border-radius, 12px);box-shadow:var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));border:var(--kritzel-dialog-border, 1px solid #ebebeb);max-height:var(--kritzel-dialog-max-height, 90vh);max-width:var(--kritzel-dialog-max-width, 90vw);overflow:hidden;transform:scale(1);opacity:1;transition:transform 200ms ease-out, opacity 200ms ease-out;font-family:var(--kritzel-dialog-font-family, sans-serif)}.dialog-content.is-animating{transform:scale(0.95);opacity:0}.dialog-content.size-small{width:var(--kritzel-dialog-width-small, 320px);height:var(--kritzel-dialog-height-small, auto)}.dialog-content.size-medium{width:var(--kritzel-dialog-width-medium, 480px);height:var(--kritzel-dialog-height-medium, auto)}.dialog-content.size-large{width:var(--kritzel-dialog-width-large, 640px);height:var(--kritzel-dialog-height-large, auto)}.dialog-content.size-fullscreen{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.backdrop.contained-fullscreen{background-color:transparent}.dialog-content.contained-fullscreen{border-radius:0}.dialog-content.contained-fullscreen .dialog-body{display:flex;flex-direction:column}.dialog-content.contained-fullscreen .dialog-body ::slotted(*){flex:1;min-height:0}@media (max-width: 576px), (max-height: 576px) and (orientation: landscape){.backdrop:has(.fullscreen-on-mobile){background-color:transparent}.dialog-content.fullscreen-on-mobile{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}.dialog-content.fullscreen-on-mobile .dialog-body{display:flex;flex-direction:column}.dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*){flex:1;min-height:0}}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-dialog-header-padding, 16px 20px);border-bottom:var(--kritzel-dialog-header-border, 1px solid #ebebeb);gap:12px}.dialog-title{margin:0;font-size:var(--kritzel-dialog-title-font-size, 18px);font-weight:var(--kritzel-dialog-title-font-weight, 600);color:var(--kritzel-dialog-title-color, #1a1a1a);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--kritzel-dialog-close-button-border-radius, 6px);background-color:var(--kritzel-dialog-close-button-background, transparent);color:var(--kritzel-dialog-close-button-color, #666666);cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;flex-shrink:0;-webkit-tap-highlight-color:transparent}.close-button:hover{background-color:var(--kritzel-dialog-close-button-hover-background, #f5f5f5);color:var(--kritzel-dialog-close-button-hover-color, #1a1a1a)}.close-button:active{background-color:var(--kritzel-dialog-close-button-active-background, #ebebeb)}.close-button:focus-visible{outline:revert;outline-offset:revert}.dialog-body{padding:var(--kritzel-dialog-body-padding, 20px);overflow-y:auto;flex:1;min-height:0;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--kritzel-dialog-footer-gap, 8px);padding:var(--kritzel-dialog-footer-padding, 16px 20px);border-top:var(--kritzel-dialog-footer-border, 1px solid #ebebeb)}::slotted([slot='header']){flex:1}::slotted([slot='footer']){display:contents}`;
|
|
1403
1403
|
|
|
1404
1404
|
const KritzelDialog = class {
|
|
1405
1405
|
constructor(hostRef) {
|
|
@@ -1842,7 +1842,7 @@ const KritzelDialog = class {
|
|
|
1842
1842
|
};
|
|
1843
1843
|
KritzelDialog.style = kritzelDialogCss();
|
|
1844
1844
|
|
|
1845
|
-
const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,
|
|
1845
|
+
const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
|
|
1846
1846
|
|
|
1847
1847
|
const KritzelDropdown = class {
|
|
1848
1848
|
constructor(hostRef) {
|
|
@@ -2080,7 +2080,7 @@ const KritzelDropdown = class {
|
|
|
2080
2080
|
'open-up': this.openDirection === 'up',
|
|
2081
2081
|
'open-down': this.openDirection === 'down',
|
|
2082
2082
|
};
|
|
2083
|
-
return (h(Host, { key: '
|
|
2083
|
+
return (h(Host, { key: 'c606b338e55dc66396105fa7b4fbdf372f3866e6' }, h("div", { key: 'aa32b73cac337fa4142ecc124cf039a59e3b3118', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '2cd8e9ef246a24c49d58f76f227f36aed4786178', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '80df8155e1907017d508e92f155bab5ae12dffab', class: "dropdown-container", style: { width: this.width } }, h("button", { key: 'd86463de7ec58248f1611d6b5d46f0eafc117f36', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: '4ef6a997f7a781fb409e97ed5bd6843d0eaff0bb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '6601efcd69d84af1f022d14ede628bac743cc1f1', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '6cb2efe7b4ca890562c10b0e24eb1dfdad90ec24', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'a340af5a61dccf5bc29c8a473726b58055c2e9db', points: "6 9 12 15 18 9" }))))), h("slot", { key: '5bd4e5ad4cc4642c7769ecac2106ba82bae626f2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'e7a2be8ac261bc5fa1450940e2a57090d6be3315', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
|
|
2084
2084
|
const isSelected = option.value === this.internalValue;
|
|
2085
2085
|
const isFocused = index === this.focusedIndex;
|
|
2086
2086
|
const optionClasses = {
|
|
@@ -2127,7 +2127,7 @@ const DEFAULT_SYNC_CONFIG = {
|
|
|
2127
2127
|
providers: [],
|
|
2128
2128
|
};
|
|
2129
2129
|
|
|
2130
|
-
const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;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;text-align:start;line-height:normal}.editor-content{position:absolute;inset:0}.editor-content>kritzel-engine{position:absolute;inset:0;z-index:0}kritzel-controls{position:absolute;z-index:1;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);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;z-index:1;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-center-notification-layer{position:absolute;top:var(--kritzel-editor-top-center-notification-top, 14px);left:0;right:0;z-index:var(--kritzel-editor-top-center-notification-z-index, 10001);display:flex;justify-content:center;pointer-events:none}.top-center-notification-container{width:min(90vw, 420px);pointer-events:auto;animation:kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)
|
|
2130
|
+
const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;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;text-align:start;line-height:normal}.editor-content{position:absolute;inset:0}.editor-content>kritzel-engine{position:absolute;inset:0;z-index:0}kritzel-controls{position:absolute;z-index:1;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);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;z-index:1;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-center-notification-layer{position:absolute;top:var(--kritzel-editor-top-center-notification-top, 14px);left:0;right:0;z-index:var(--kritzel-editor-top-center-notification-z-index, 10001);display:flex;justify-content:center;pointer-events:none}.top-center-notification-container{width:min(90vw, 420px);pointer-events:auto;animation:kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms) var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1))}.top-center-notification-container.is-dismissing{animation:kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms) var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards}@keyframes kritzel-notification-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes kritzel-notification-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.top-center-notification-container{animation:none}}.top-right-buttons{position:absolute;z-index:1;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}.bottom-left-buttons{position:absolute;z-index:1;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@container (max-width: 767px){.bottom-left-buttons{display:none}}.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}`;
|
|
2131
2131
|
|
|
2132
2132
|
const KritzelEditor = class {
|
|
2133
2133
|
constructor(hostRef) {
|
|
@@ -2406,7 +2406,6 @@ const KritzelEditor = class {
|
|
|
2406
2406
|
contextMenuState;
|
|
2407
2407
|
normalizedControls = [];
|
|
2408
2408
|
resolvedMoreMenuItems = [];
|
|
2409
|
-
isSyncing = false;
|
|
2410
2409
|
isLoadingOverlayVisible = false;
|
|
2411
2410
|
notificationDismissTimeout;
|
|
2412
2411
|
notificationDismissAnimationTimeout;
|
|
@@ -3203,40 +3202,40 @@ const KritzelEditor = class {
|
|
|
3203
3202
|
const isLoggedIn = this.isLoggedIn;
|
|
3204
3203
|
const shouldShowCurrentUser = isLoggedIn;
|
|
3205
3204
|
const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
|
|
3206
|
-
return (h(Host, { key: '
|
|
3205
|
+
return (h(Host, { key: '10d7810f2db00207f1f024727fb3957dce6496c5' }, h("div", { key: 'f1bced369a6e820d17c89b6e8cdd8f09fc7e084f', class: "editor-content", style: {
|
|
3207
3206
|
opacity: this.isEditorVisible ? '1' : '0',
|
|
3208
3207
|
visibility: this.isEditorVisible ? 'visible' : 'hidden',
|
|
3209
3208
|
transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
|
|
3210
|
-
} }, h("div", { key: '
|
|
3209
|
+
} }, h("div", { key: '42d177987e4d14de10ebb45d673f750022c7d944', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'be583a237b378e0eeb14756fcb0bd9a733b51020', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '5713455fd09512085e5048ab3da35499d48c9bbc', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '41c3fbd197ccca774bb87be7d003374bc548e46e', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '5634e4cfd0d6cb7accee59e7f239e3d758872202', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'b1b2a90199b16e874a54a6435ebb4f873cc8a403', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '9b1d0f847171e177a2135454cab0c3761308c396', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
|
|
3211
3210
|
position: 'absolute',
|
|
3212
3211
|
left: `${this.contextMenuState.position.x}px`,
|
|
3213
3212
|
top: `${this.contextMenuState.position.y}px`,
|
|
3214
3213
|
zIndex: '10002',
|
|
3215
|
-
}, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-
|
|
3214
|
+
}, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-loading-overlay", { key: '693536ad11dbc5080203902f0553d87b628704e9', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: 'd4dacd1803e63417c2d7d9dcd008345e947f2806', ref: el => {
|
|
3216
3215
|
if (el) {
|
|
3217
3216
|
this.engineRef = el;
|
|
3218
3217
|
}
|
|
3219
|
-
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event),
|
|
3218
|
+
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: 'f988a540cae6372b2259167956f81ecfae324bf1', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
|
|
3220
3219
|
if (el) {
|
|
3221
3220
|
this.controlsRef = el;
|
|
3222
3221
|
}
|
|
3223
|
-
}, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '
|
|
3222
|
+
}, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'c9eca767869cb0504b18b480f14abb4ae9515e6a', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '9a02ece644a46b9eaa1ce92245df2183bfe7bb5a', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a214d0c6039cfeeda9e4e015e83ca196e4b73b56', class: "top-right-buttons" }, h("kritzel-settings", { key: 'c20518083d832267e85384d14adca6342fa82299', ref: el => {
|
|
3224
3223
|
if (el) {
|
|
3225
3224
|
this.settingsRef = el;
|
|
3226
3225
|
}
|
|
3227
|
-
}, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '
|
|
3226
|
+
}, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '3306caba17bb638e5285c838539c7862e889dbbd', ref: el => {
|
|
3228
3227
|
if (el) {
|
|
3229
3228
|
this.exportRef = el;
|
|
3230
3229
|
}
|
|
3231
|
-
}, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '
|
|
3230
|
+
}, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '1aede3a116f502f017188153803c35e304592575', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '8eaa1d59ca018d1b1190aa01c9fa3d2bd587de4c', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'c9a138c1411746654b3a2385c6c5c82b875cf88d', ref: el => {
|
|
3232
3231
|
if (el) {
|
|
3233
3232
|
this.currentUserDialogRef = el;
|
|
3234
3233
|
}
|
|
3235
|
-
}, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '
|
|
3234
|
+
}, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '9a2900deb52b4d70f1612fb75c5baa9302412ebf', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '027d3c3d847bf975bc5c6f44e9ecf1b452c77bf9', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '461e239bd09abf63b85e6122b1b9f7425da23ec3', ref: el => {
|
|
3236
3235
|
if (el) {
|
|
3237
3236
|
this.shareDialogRef = el;
|
|
3238
3237
|
}
|
|
3239
|
-
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '
|
|
3238
|
+
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '1e324fb764ab33047dba85eb34ae51418d081f2c', ref: el => {
|
|
3240
3239
|
if (el) {
|
|
3241
3240
|
this.loginDialogRef = el;
|
|
3242
3241
|
}
|
|
@@ -27045,8 +27044,8 @@ class KritzelSvgExportHelper {
|
|
|
27045
27044
|
.join('\n ');
|
|
27046
27045
|
const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
|
|
27047
27046
|
const defsContent = defs.length > 0 ? `\n <defs>\n ${defs.join('\n ')}\n </defs>` : '';
|
|
27048
|
-
return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
|
|
27049
|
-
${elements}
|
|
27047
|
+
return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
|
|
27048
|
+
${elements}
|
|
27050
27049
|
</svg>`;
|
|
27051
27050
|
}
|
|
27052
27051
|
/**
|
|
@@ -27198,8 +27197,8 @@ class KritzelSvgExportHelper {
|
|
|
27198
27197
|
const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
|
|
27199
27198
|
const refX = 0;
|
|
27200
27199
|
const refY = size / 2;
|
|
27201
|
-
return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
|
|
27202
|
-
<path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
|
|
27200
|
+
return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
|
|
27201
|
+
<path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
|
|
27203
27202
|
</marker>`;
|
|
27204
27203
|
}
|
|
27205
27204
|
/**
|
|
@@ -27246,10 +27245,10 @@ class KritzelSvgExportHelper {
|
|
|
27246
27245
|
const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
|
|
27247
27246
|
const scale = this.getObjectScale(path);
|
|
27248
27247
|
// Path needs to be wrapped in a g with translation since path.d uses local coordinates
|
|
27249
|
-
return `<g transform="${transform}"${opacity}>
|
|
27250
|
-
<svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
|
|
27251
|
-
<path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
|
|
27252
|
-
</svg>
|
|
27248
|
+
return `<g transform="${transform}"${opacity}>
|
|
27249
|
+
<svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
|
|
27250
|
+
<path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
|
|
27251
|
+
</svg>
|
|
27253
27252
|
</g>`;
|
|
27254
27253
|
}
|
|
27255
27254
|
/**
|
|
@@ -27265,10 +27264,10 @@ class KritzelSvgExportHelper {
|
|
|
27265
27264
|
const scale = this.getObjectScale(line);
|
|
27266
27265
|
const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
|
|
27267
27266
|
const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
|
|
27268
|
-
return `<g transform="${transform}"${opacity}>
|
|
27269
|
-
<svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
|
|
27270
|
-
<path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
|
|
27271
|
-
</svg>
|
|
27267
|
+
return `<g transform="${transform}"${opacity}>
|
|
27268
|
+
<svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
|
|
27269
|
+
<path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
|
|
27270
|
+
</svg>
|
|
27272
27271
|
</g>`;
|
|
27273
27272
|
}
|
|
27274
27273
|
/**
|
|
@@ -27292,18 +27291,18 @@ class KritzelSvgExportHelper {
|
|
|
27292
27291
|
const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
|
|
27293
27292
|
if (textHtml) {
|
|
27294
27293
|
const fontColor = KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
|
|
27295
|
-
textContent = `
|
|
27296
|
-
<foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
|
|
27297
|
-
<div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
|
|
27298
|
-
${textHtml}
|
|
27299
|
-
</div>
|
|
27294
|
+
textContent = `
|
|
27295
|
+
<foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
|
|
27296
|
+
<div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
|
|
27297
|
+
${textHtml}
|
|
27298
|
+
</div>
|
|
27300
27299
|
</foreignObject>`;
|
|
27301
27300
|
}
|
|
27302
27301
|
}
|
|
27303
|
-
return `<g transform="${transform}"${opacity}>
|
|
27304
|
-
<svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
|
|
27305
|
-
<path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
|
|
27306
|
-
</svg>
|
|
27302
|
+
return `<g transform="${transform}"${opacity}>
|
|
27303
|
+
<svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
|
|
27304
|
+
<path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
|
|
27305
|
+
</svg>
|
|
27307
27306
|
</g>`;
|
|
27308
27307
|
}
|
|
27309
27308
|
/**
|
|
@@ -27334,10 +27333,10 @@ class KritzelSvgExportHelper {
|
|
|
27334
27333
|
// adjusted font-size already accounts for it – keeping both would double-scale
|
|
27335
27334
|
// the content and overflow the foreignObject.
|
|
27336
27335
|
const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
|
|
27337
|
-
return `<g transform="${transform}"${opacity}>
|
|
27338
|
-
<foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
|
|
27339
|
-
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
|
|
27340
|
-
</foreignObject>
|
|
27336
|
+
return `<g transform="${transform}"${opacity}>
|
|
27337
|
+
<foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
|
|
27338
|
+
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
|
|
27339
|
+
</foreignObject>
|
|
27341
27340
|
</g>`;
|
|
27342
27341
|
}
|
|
27343
27342
|
/**
|
|
@@ -27371,9 +27370,9 @@ class KritzelSvgExportHelper {
|
|
|
27371
27370
|
return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
|
|
27372
27371
|
})
|
|
27373
27372
|
.join('');
|
|
27374
|
-
return `<g transform="${transform}"${opacity}>
|
|
27375
|
-
${bgRect}
|
|
27376
|
-
<text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
|
|
27373
|
+
return `<g transform="${transform}"${opacity}>
|
|
27374
|
+
${bgRect}
|
|
27375
|
+
<text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
|
|
27377
27376
|
</g>`;
|
|
27378
27377
|
}
|
|
27379
27378
|
/**
|
|
@@ -27401,8 +27400,8 @@ class KritzelSvgExportHelper {
|
|
|
27401
27400
|
const width = image.totalWidth / scale;
|
|
27402
27401
|
const height = image.totalHeight / scale;
|
|
27403
27402
|
const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
|
|
27404
|
-
return `<g transform="${transform}"${opacity}>
|
|
27405
|
-
<image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
|
|
27403
|
+
return `<g transform="${transform}"${opacity}>
|
|
27404
|
+
<image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
|
|
27406
27405
|
</g>`;
|
|
27407
27406
|
}
|
|
27408
27407
|
/**
|
|
@@ -27422,19 +27421,19 @@ class KritzelSvgExportHelper {
|
|
|
27422
27421
|
if (rasterSafeForCanvas) {
|
|
27423
27422
|
// PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
|
|
27424
27423
|
console.warn('[KritzelCustomElement SVG Export] Custom elements do not serialize well to PNG. Use SVG export or screenshot instead.');
|
|
27425
|
-
return `<g transform="${transform}"${opacity}>
|
|
27426
|
-
<rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
|
|
27427
|
-
<text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
|
|
27424
|
+
return `<g transform="${transform}"${opacity}>
|
|
27425
|
+
<rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
|
|
27426
|
+
<text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
|
|
27428
27427
|
</g>`;
|
|
27429
27428
|
}
|
|
27430
27429
|
// SVG export: use foreignObject to embed HTML
|
|
27431
27430
|
const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
|
|
27432
|
-
return `<g transform="${transform}"${opacity}>
|
|
27433
|
-
<foreignObject x="0" y="0" width="${width}" height="${height}">
|
|
27434
|
-
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
|
|
27435
|
-
${html}
|
|
27436
|
-
</div>
|
|
27437
|
-
</foreignObject>
|
|
27431
|
+
return `<g transform="${transform}"${opacity}>
|
|
27432
|
+
<foreignObject x="0" y="0" width="${width}" height="${height}">
|
|
27433
|
+
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
|
|
27434
|
+
${html}
|
|
27435
|
+
</div>
|
|
27436
|
+
</foreignObject>
|
|
27438
27437
|
</g>`;
|
|
27439
27438
|
}
|
|
27440
27439
|
/**
|
|
@@ -27454,8 +27453,8 @@ class KritzelSvgExportHelper {
|
|
|
27454
27453
|
return '';
|
|
27455
27454
|
}
|
|
27456
27455
|
const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
|
|
27457
|
-
return `<g${opacity}>
|
|
27458
|
-
${children}
|
|
27456
|
+
return `<g${opacity}>
|
|
27457
|
+
${children}
|
|
27459
27458
|
</g>`;
|
|
27460
27459
|
}
|
|
27461
27460
|
/**
|
|
@@ -27865,10 +27864,7 @@ const KritzelEngine = class {
|
|
|
27865
27864
|
contextMenuStateChange;
|
|
27866
27865
|
/** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
|
|
27867
27866
|
loadingChange;
|
|
27868
|
-
/** Emitted when remote workspace synchronization is in progress. */
|
|
27869
|
-
syncingChange;
|
|
27870
27867
|
forceUpdate = 0;
|
|
27871
|
-
isSyncing = false;
|
|
27872
27868
|
/** Manually triggers the `objectsSelectionChange` event. */
|
|
27873
27869
|
async triggerSelectionChange() {
|
|
27874
27870
|
this.objectsSelectionChange.emit();
|
|
@@ -29446,12 +29442,6 @@ const KritzelEngine = class {
|
|
|
29446
29442
|
_syncConfigRevision = 0;
|
|
29447
29443
|
_assetStorageConfigRevision = 0;
|
|
29448
29444
|
_isWorkspaceLoading = false;
|
|
29449
|
-
_syncingRequestId = 0;
|
|
29450
|
-
_syncingShowTimeout = null;
|
|
29451
|
-
_syncingHideTimeout = null;
|
|
29452
|
-
_syncingVisibleSince = null;
|
|
29453
|
-
_syncingShowDelayMs = 300;
|
|
29454
|
-
_syncingMinimumVisibleMs = 500;
|
|
29455
29445
|
_hasLoggedUnlicensedWelcomeBanner = false;
|
|
29456
29446
|
_previousVisibleCustomElements = new Set();
|
|
29457
29447
|
_revealedImageKeys = new Set();
|
|
@@ -29474,66 +29464,6 @@ const KritzelEngine = class {
|
|
|
29474
29464
|
this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
|
|
29475
29465
|
this.loadingChange.emit(this.core.store.state.isLoading);
|
|
29476
29466
|
}
|
|
29477
|
-
beginSyncingRequest() {
|
|
29478
|
-
this._syncingRequestId++;
|
|
29479
|
-
this.clearSyncingShowTimeout();
|
|
29480
|
-
this.clearSyncingHideTimeout();
|
|
29481
|
-
return this._syncingRequestId;
|
|
29482
|
-
}
|
|
29483
|
-
syncSyncingState(isSyncing, requestId) {
|
|
29484
|
-
if (requestId !== this._syncingRequestId) {
|
|
29485
|
-
return;
|
|
29486
|
-
}
|
|
29487
|
-
if (isSyncing) {
|
|
29488
|
-
this.clearSyncingHideTimeout();
|
|
29489
|
-
if (this.isSyncing || this._syncingShowTimeout !== null) {
|
|
29490
|
-
return;
|
|
29491
|
-
}
|
|
29492
|
-
this._syncingShowTimeout = setTimeout(() => {
|
|
29493
|
-
this._syncingShowTimeout = null;
|
|
29494
|
-
if (requestId !== this._syncingRequestId || this.isSyncing) {
|
|
29495
|
-
return;
|
|
29496
|
-
}
|
|
29497
|
-
this.isSyncing = true;
|
|
29498
|
-
this._syncingVisibleSince = Date.now();
|
|
29499
|
-
this.syncingChange.emit(true);
|
|
29500
|
-
}, this._syncingShowDelayMs);
|
|
29501
|
-
return;
|
|
29502
|
-
}
|
|
29503
|
-
this.clearSyncingShowTimeout();
|
|
29504
|
-
if (!this.isSyncing) {
|
|
29505
|
-
return;
|
|
29506
|
-
}
|
|
29507
|
-
this.clearSyncingHideTimeout();
|
|
29508
|
-
const elapsedMs = Date.now() - (this._syncingVisibleSince ?? Date.now());
|
|
29509
|
-
const remainingVisibleMs = Math.max(0, this._syncingMinimumVisibleMs - elapsedMs);
|
|
29510
|
-
if (remainingVisibleMs === 0) {
|
|
29511
|
-
this.finishSyncingState(requestId);
|
|
29512
|
-
return;
|
|
29513
|
-
}
|
|
29514
|
-
this._syncingHideTimeout = setTimeout(() => this.finishSyncingState(requestId), remainingVisibleMs);
|
|
29515
|
-
}
|
|
29516
|
-
finishSyncingState(requestId) {
|
|
29517
|
-
this._syncingHideTimeout = null;
|
|
29518
|
-
if (requestId !== this._syncingRequestId || !this.isSyncing) {
|
|
29519
|
-
return;
|
|
29520
|
-
}
|
|
29521
|
-
this.isSyncing = false;
|
|
29522
|
-
this._syncingVisibleSince = null;
|
|
29523
|
-
this.syncingChange.emit(false);
|
|
29524
|
-
}
|
|
29525
|
-
clearSyncingShowTimeout() {
|
|
29526
|
-
if (this._syncingShowTimeout !== null) {
|
|
29527
|
-
clearTimeout(this._syncingShowTimeout);
|
|
29528
|
-
this._syncingShowTimeout = null;
|
|
29529
|
-
}
|
|
29530
|
-
}
|
|
29531
|
-
clearSyncingHideTimeout() {
|
|
29532
|
-
if (this._syncingHideTimeout !== null) {
|
|
29533
|
-
clearTimeout(this._syncingHideTimeout);
|
|
29534
|
-
this._syncingHideTimeout = null;
|
|
29535
|
-
}
|
|
29536
|
-
}
|
|
29537
29467
|
isNetworkAvailable() {
|
|
29538
29468
|
return typeof navigator !== 'undefined' && navigator.onLine;
|
|
29539
29469
|
}
|
|
@@ -29639,13 +29569,11 @@ const KritzelEngine = class {
|
|
|
29639
29569
|
this.notificationsChange = createEvent(this, "notificationsChange");
|
|
29640
29570
|
this.contextMenuStateChange = createEvent(this, "contextMenuStateChange");
|
|
29641
29571
|
this.loadingChange = createEvent(this, "loadingChange");
|
|
29642
|
-
this.syncingChange = createEvent(this, "syncingChange");
|
|
29643
29572
|
this.core = new KritzelCore(this);
|
|
29644
29573
|
}
|
|
29645
29574
|
disconnectedCallback() {
|
|
29646
29575
|
this.throttledPointerMoveMulti.cancel();
|
|
29647
29576
|
this._revealedImageKeys.clear();
|
|
29648
|
-
this.beginSyncingRequest();
|
|
29649
29577
|
if (this._sceneBootstrapTransitionTimer !== null) {
|
|
29650
29578
|
clearTimeout(this._sceneBootstrapTransitionTimer);
|
|
29651
29579
|
this._sceneBootstrapTransitionTimer = null;
|
|
@@ -29895,27 +29823,11 @@ const KritzelEngine = class {
|
|
|
29895
29823
|
}
|
|
29896
29824
|
this._isWorkspaceLoading = true;
|
|
29897
29825
|
this.syncLoadingState();
|
|
29898
|
-
const syncingRequestId = this.beginSyncingRequest();
|
|
29899
29826
|
const initializationPromise = this.core.initializeWorkspace(workspace, options);
|
|
29900
29827
|
this._workspaceInitializationPromise = initializationPromise;
|
|
29901
29828
|
this._workspaceInitializationTargetKey = targetKey;
|
|
29902
29829
|
try {
|
|
29903
29830
|
await initializationPromise;
|
|
29904
|
-
// Track remote sync in the background without blocking the loading overlay.
|
|
29905
|
-
const initializedObjects = this.core.store.objects;
|
|
29906
|
-
const networkSyncPromise = initializedObjects?.whenNetworkSynced();
|
|
29907
|
-
if (networkSyncPromise && this.isNetworkAvailable()) {
|
|
29908
|
-
this.syncSyncingState(true, syncingRequestId);
|
|
29909
|
-
void networkSyncPromise.finally(() => {
|
|
29910
|
-
// Only clear syncing for the currently active object map.
|
|
29911
|
-
if (this.core.store.objects === initializedObjects) {
|
|
29912
|
-
this.syncSyncingState(false, syncingRequestId);
|
|
29913
|
-
}
|
|
29914
|
-
});
|
|
29915
|
-
}
|
|
29916
|
-
else {
|
|
29917
|
-
this.syncSyncingState(false, syncingRequestId);
|
|
29918
|
-
}
|
|
29919
29831
|
}
|
|
29920
29832
|
finally {
|
|
29921
29833
|
// Only the most recent init clears loading state to prevent race conditions
|
|
@@ -30718,7 +30630,7 @@ const KritzelExport = class {
|
|
|
30718
30630
|
return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
|
|
30719
30631
|
}
|
|
30720
30632
|
render() {
|
|
30721
|
-
return (h(Host, { key: '
|
|
30633
|
+
return (h(Host, { key: '61ce7589d0453a1bd9fde8f33a711e06225eacde' }, h("kritzel-dialog", { key: '48da046edabdb5659b6edefaca56adb7531f9862', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'b7afc64ad1f558a78aa68c07b4dec65e6ca21c67', class: "export-content" }, h("kritzel-pill-tabs", { key: '59f759ade5a590eda6ba87f89eb433ced62da0cd', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'a38bf30c9c5256d417cd3b0baf743e245a8cf3e4', slot: "footer" }, h("button", { key: '3dc9c53416ff9c8ca47df003f41767a2143fa4ef', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
|
|
30722
30634
|
}
|
|
30723
30635
|
};
|
|
30724
30636
|
KritzelExport.style = kritzelExportCss();
|
|
@@ -30733,7 +30645,7 @@ const KritzelFont = class {
|
|
|
30733
30645
|
size = 24;
|
|
30734
30646
|
color = '#000000';
|
|
30735
30647
|
render() {
|
|
30736
|
-
return (h(Host, { key: '
|
|
30648
|
+
return (h(Host, { key: '08ef3f41967f34f17cbbc42982b0edbb59edb2e2' }, h("div", { key: 'dc7b64d53dbee634a2da068c618a352e6b43bea7', class: "font-preview", style: {
|
|
30737
30649
|
fontFamily: this.fontFamily,
|
|
30738
30650
|
fontSize: `${this.size}px`,
|
|
30739
30651
|
color: this.color
|
|
@@ -30783,7 +30695,7 @@ const KritzelFontFamily = class {
|
|
|
30783
30695
|
label: option.label,
|
|
30784
30696
|
style: { fontFamily: option.cssFontFamily ?? option.value },
|
|
30785
30697
|
}));
|
|
30786
|
-
return (h(Host, { key: '
|
|
30698
|
+
return (h(Host, { key: '059350f34370f7a291f47a42721ca5d9bb82df49' }, h("kritzel-dropdown", { key: 'fbd8cf1ae463c7e9b76d0ac754a41de54397058e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
|
|
30787
30699
|
}
|
|
30788
30700
|
static get watchers() { return {
|
|
30789
30701
|
"fontOptions": [{
|
|
@@ -30817,7 +30729,7 @@ const KritzelFontSize = class {
|
|
|
30817
30729
|
render() {
|
|
30818
30730
|
const color = 'var(--kritzel-global-text-primary)';
|
|
30819
30731
|
const sizes = this.sizes ?? [];
|
|
30820
|
-
return (h(Host, { key: '
|
|
30732
|
+
return (h(Host, { key: 'c49be084faa8b5eb380ba9bc3382ba8404853e20' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
|
|
30821
30733
|
'size-container': true,
|
|
30822
30734
|
'selected': this.selectedSize === size,
|
|
30823
30735
|
}, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
|
|
@@ -30884,7 +30796,7 @@ const KritzelInput = class {
|
|
|
30884
30796
|
this.valueChange.emit(input.value);
|
|
30885
30797
|
};
|
|
30886
30798
|
render() {
|
|
30887
|
-
return (h(Host, { key: '
|
|
30799
|
+
return (h(Host, { key: '92393344834011156bda2f682e559e7806864d19' }, h("div", { key: '5d569b8746d9285701259979ec554dbb41df4490', class: "input-container" }, this.label && h("label", { key: 'a27844d3da23d353b0ea2dede3c664fdbcbb6aab', class: "input-label" }, this.label), h("div", { key: 'fab4f3f1bda07c78f39ea96ba87c42be5de08286', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '4294687bc9f6006b0b64427c111af08d82ad5ffd', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '83adbd2978c92e969fedd9ad75f2c89b017b31a5', class: "input-suffix" }, this.suffix)))));
|
|
30888
30800
|
}
|
|
30889
30801
|
static get watchers() { return {
|
|
30890
30802
|
"value": [{
|
|
@@ -30966,10 +30878,10 @@ const KritzelLineEndings = class {
|
|
|
30966
30878
|
render() {
|
|
30967
30879
|
const startEnding = this.getStartEnding();
|
|
30968
30880
|
const endEnding = this.getEndEnding();
|
|
30969
|
-
return (h(Host, { key: '
|
|
30881
|
+
return (h(Host, { key: '60115b8a2840ffe21e0846fdc2678c6ba24b22c0' }, h("div", { key: '3b63aa05ca78699172c645fdd404efdc55bc4536', class: "endings-section" }, h("div", { key: '9538369e8d2bb26600d6054ddbbc13d6c960bd56', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
|
|
30970
30882
|
'ending-option': true,
|
|
30971
30883
|
'selected': startEnding === type,
|
|
30972
|
-
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '
|
|
30884
|
+
}, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: 'ecec29740c09a61190938bab4955ccde6b84cfa2', class: "endings-section" }, h("div", { key: 'ea054597c3e3566e7921f2c04c07d74e4f4331a1', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
|
|
30973
30885
|
'ending-option': true,
|
|
30974
30886
|
'selected': endEnding === type,
|
|
30975
30887
|
}, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));
|
|
@@ -30992,7 +30904,7 @@ const KritzelLoadingOverlay = class {
|
|
|
30992
30904
|
*/
|
|
30993
30905
|
text = 'Loading...';
|
|
30994
30906
|
render() {
|
|
30995
|
-
return (h(Host, { key: '
|
|
30907
|
+
return (h(Host, { key: '6795ffc47d57a27f0b58fb42715080bf47c836af' }, h("div", { key: '5359411fa326444a1bddf6f40a6e2bd0ccf1617d', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: 'bd194c6fef9f2fbc4a4e38aee169d0a754e5dc96', class: "loading-spinner" }), this.text)));
|
|
30996
30908
|
}
|
|
30997
30909
|
};
|
|
30998
30910
|
KritzelLoadingOverlay.style = kritzelLoadingOverlayCss();
|
|
@@ -31044,7 +30956,7 @@ const KritzelLoginDialog = class {
|
|
|
31044
30956
|
this.dialogClosed.emit();
|
|
31045
30957
|
};
|
|
31046
30958
|
render() {
|
|
31047
|
-
return (h(Host, { key: '
|
|
30959
|
+
return (h(Host, { key: '17fe69ac34171a95bec92dcabc3196fe77549ede' }, h("kritzel-dialog", { key: '38ea1c3ed74675b21456cf8c1bfe1b97be029bf4', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '63b04f629c2d09a1ce6aeab90118bcac50d59fbc', class: "login-content" }, this.subtitle && (h("p", { key: '641597f030c268f2ffc90c914e53fd00fc131c74', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'f36dc7b791d1beada21d7786c108319dedb516b9', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
|
|
31048
30960
|
'provider-button': true,
|
|
31049
30961
|
'is-loading': this.loadingProvider === provider.name,
|
|
31050
30962
|
'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
|
|
@@ -31150,15 +31062,15 @@ const KritzelMasterDetail = class {
|
|
|
31150
31062
|
const selectedItem = this.items.find(item => item.id === this.selectedItemId);
|
|
31151
31063
|
const panelId = 'master-detail-panel';
|
|
31152
31064
|
const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
|
|
31153
|
-
return (h(Host, { key: '
|
|
31065
|
+
return (h(Host, { key: 'fc187266604f9d48210096a1574bf86482498a40' }, h("div", { key: '2886b386c6e96df671ff4902b2c9f7084f0c3191', class: {
|
|
31154
31066
|
'master-detail-container': true,
|
|
31155
31067
|
'is-mobile-detail-visible': this.showMobileDetail,
|
|
31156
|
-
} }, h("nav", { key: '
|
|
31068
|
+
} }, h("nav", { key: '94a35861b7c97d7f5f1505e4c25bc7f584c6351f', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
|
|
31157
31069
|
'menu-item': true,
|
|
31158
31070
|
'is-selected': item.id === this.selectedItemId,
|
|
31159
31071
|
'is-disabled': !!item.disabled,
|
|
31160
31072
|
'is-focused': index === this.focusedIndex,
|
|
31161
|
-
}, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '
|
|
31073
|
+
}, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'd55507c8e818314bd548506d1b568357062378db', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'f7bf50b2ecd7093110ee0fc91d49caf468ee9116', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'c809cea0d279439ced7a580ea2a4f44d5ec2b8b6', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '78babf63e193db45e26ea6602ab09dde045bf06e' })))));
|
|
31162
31074
|
}
|
|
31163
31075
|
static get watchers() { return {
|
|
31164
31076
|
"selectedItemId": [{
|
|
@@ -31231,7 +31143,7 @@ const KritzelMenu = class {
|
|
|
31231
31143
|
this.itemCloseChildMenu.emit(event.detail);
|
|
31232
31144
|
};
|
|
31233
31145
|
render() {
|
|
31234
|
-
return (h(Host, { key: '
|
|
31146
|
+
return (h(Host, { key: '0876a6a7e6dbb0daa984d228bac4c8b5d5790580', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '499dde6694d7b98eb85d9bac314ab7ba2dcf1e71', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
|
|
31235
31147
|
}
|
|
31236
31148
|
};
|
|
31237
31149
|
KritzelMenu.style = kritzelMenuCss();
|
|
@@ -31336,12 +31248,12 @@ const KritzelMenuItem = class {
|
|
|
31336
31248
|
];
|
|
31337
31249
|
}
|
|
31338
31250
|
render() {
|
|
31339
|
-
return (h(Host, { key: '
|
|
31251
|
+
return (h(Host, { key: '40bfb2f086d24080276f27d879216958dff0388a', tabIndex: this.item.isDisabled ? -1 : 0, class: {
|
|
31340
31252
|
'selected': this.item.isSelected,
|
|
31341
31253
|
'editing': this.item.isEditing,
|
|
31342
31254
|
'disabled': this.item.isDisabled,
|
|
31343
31255
|
'child-open': this.item.isChildMenuOpen,
|
|
31344
|
-
}, onClick: this.handleItemSelect }, h("div", { key: '
|
|
31256
|
+
}, onClick: this.handleItemSelect }, h("div", { key: '0aa55293dfc2cf1010c020f3f35ee3a3bd662c8a', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
|
|
31345
31257
|
}
|
|
31346
31258
|
static get watchers() { return {
|
|
31347
31259
|
"item": [{
|
|
@@ -31493,7 +31405,7 @@ const KritzelMoreMenu = class {
|
|
|
31493
31405
|
this.closeMenu();
|
|
31494
31406
|
};
|
|
31495
31407
|
render() {
|
|
31496
|
-
return (h(Host, { key: '
|
|
31408
|
+
return (h(Host, { key: 'ac84e832614f37f51b00f351fe70cf679d53ef15', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: 'a9ead49428833b9bbaf6cfa9a1550e6df514e3d5', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: 'ddf026728d5b3170faeb1b5e291e3e61b13711d5', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'de7e442b32c755c890579e7254d2cc6dad8bc21a', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'a426494a65dfe42a1d9a2040dcf5202d2daee559', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '4b0ba21f8da0d4149ae52e752c6dd1c6fb4ac0cc', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
|
|
31497
31409
|
}
|
|
31498
31410
|
static get watchers() { return {
|
|
31499
31411
|
"items": [{
|
|
@@ -31665,7 +31577,7 @@ const KritzelNumericInput = class {
|
|
|
31665
31577
|
this.valueChange.emit(newValue);
|
|
31666
31578
|
};
|
|
31667
31579
|
render() {
|
|
31668
|
-
return (h(Host, { key: '
|
|
31580
|
+
return (h(Host, { key: '5ebdff964290d1d7f334d7e42e69f2fa09484a27' }, h("div", { key: '8d41fd9c5ba68fbeb927e262d5c2fe61436dee0a', class: "input-container" }, this.label && h("label", { key: 'f1172074424465be27ce5c3b6c3326457daf7fdc', class: "input-label" }, this.label), h("div", { key: 'ffdea4c84fe026c3bbd26bf288aab8a5da809d00', class: "input-wrapper" }, h("input", { key: '0705fa4415727e2689aa0dbfc56f17c9d72e3d18', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '8f46261cdb045ff20d171bd0a6c98541f65f079b', class: "spinner-buttons" }, h("button", { key: 'b61a5e60db34972c3242264b9aa872e295a09b38', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '6c5a2be0a96b18ad204196fe59001211deedd038', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '4905b8ffa669e0b00b050cee94fdb8aac3c477e4', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'df2ca8633ca8dbf54ef80a3cffbbcba28534d1fd', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'd4e8bd93fda3e9b1bd4db79f25c503e1057086a3', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'a6e343e373963ca86b703783c88efeb4516e87a9', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
|
|
31669
31581
|
}
|
|
31670
31582
|
static get watchers() { return {
|
|
31671
31583
|
"value": [{
|
|
@@ -31675,7 +31587,7 @@ const KritzelNumericInput = class {
|
|
|
31675
31587
|
};
|
|
31676
31588
|
KritzelNumericInput.style = kritzelNumericInputCss();
|
|
31677
31589
|
|
|
31678
|
-
const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(
|
|
31590
|
+
const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient( to right, var(--kritzel-opacity-slider-active-color, #007AFF) 0%, var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%), var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%), var(--kritzel-opacity-slider-track-color, #e0e0e0) 100% );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
|
|
31679
31591
|
|
|
31680
31592
|
const KritzelOpacitySlider = class {
|
|
31681
31593
|
constructor(hostRef) {
|
|
@@ -31704,7 +31616,7 @@ const KritzelOpacitySlider = class {
|
|
|
31704
31616
|
}
|
|
31705
31617
|
render() {
|
|
31706
31618
|
const percentage = this.getPercentage();
|
|
31707
|
-
return (h(Host, { key: '
|
|
31619
|
+
return (h(Host, { key: '51b1e93e982f29f181f9f542dcc2939fca08d7de' }, h("div", { key: '3376dac02effb137c04efc5aa9de96d4a5b36452', class: "opacity-container" }, h("div", { key: '3d1d2c0fe1b4b4185e37dcbf61a6c3a955fe1356', class: "slider-wrapper" }, h("input", { key: '6c43f519ff5d7bbc17ce7804909e52efc6e9533b', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
|
|
31708
31620
|
'--slider-progress': `${percentage}%`,
|
|
31709
31621
|
'--kritzel-opacity-slider-thumb-border-color': this.previewColor,
|
|
31710
31622
|
} })))));
|
|
@@ -31769,7 +31681,7 @@ const KritzelPillTabs = class {
|
|
|
31769
31681
|
buttons?.[newIndex]?.focus();
|
|
31770
31682
|
}
|
|
31771
31683
|
render() {
|
|
31772
|
-
return (h(Host, { key: '
|
|
31684
|
+
return (h(Host, { key: 'f02f93ada5ec002695b62f511c847de201a8cbe4' }, h("div", { key: 'bb08ae773f1b993cb330556a5778d71fc5e91ce1', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
|
|
31773
31685
|
'pill-tab': true,
|
|
31774
31686
|
'selected': this.value === tab.id,
|
|
31775
31687
|
}, role: "tab", "aria-selected": this.value === tab.id ? 'true' : 'false', tabIndex: this.value === tab.id ? 0 : -1, onClick: () => this.handleTabClick(tab.id), onKeyDown: (e) => this.handleKeyDown(e, index) }, tab.icon && h("kritzel-icon", { name: tab.icon, size: 16 }), h("span", { class: "pill-tab-label" }, tab.label)))))));
|
|
@@ -32057,7 +31969,7 @@ const KritzelPortal = class {
|
|
|
32057
31969
|
this.portal.style.visibility = 'visible';
|
|
32058
31970
|
}
|
|
32059
31971
|
render() {
|
|
32060
|
-
return (h(Host, { key: '
|
|
31972
|
+
return (h(Host, { key: '51633f5b57002a821f73185811626439b0956479', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'f5cb7946de5775d1fd64d266f6ba5b952e9d89cb' })));
|
|
32061
31973
|
}
|
|
32062
31974
|
static get watchers() { return {
|
|
32063
31975
|
"anchor": [{
|
|
@@ -32071,7 +31983,7 @@ const KritzelPortal = class {
|
|
|
32071
31983
|
* This file is auto-generated by the version bump scripts.
|
|
32072
31984
|
* Do not modify manually.
|
|
32073
31985
|
*/
|
|
32074
|
-
const KRITZEL_VERSION = '0.4.
|
|
31986
|
+
const KRITZEL_VERSION = '0.4.26';
|
|
32075
31987
|
|
|
32076
31988
|
const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-tab-panel{display:none}.settings-tab-panel.is-active{display:block}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
|
|
32077
31989
|
|
|
@@ -32283,7 +32195,7 @@ const KritzelSettings = class {
|
|
|
32283
32195
|
return (h("div", { class: "settings-categories-wrapper" }, h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'general' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'viewport' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'shortcuts' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut)))))))))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'developer' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'about' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)))));
|
|
32284
32196
|
}
|
|
32285
32197
|
render() {
|
|
32286
|
-
return (h(Host, { key: '
|
|
32198
|
+
return (h(Host, { key: '96981b34953ffdda4cfdfa9e6acc832dedc0c64a' }, h("kritzel-dialog", { key: '792a68aa1fe66780a937a95db802e9c6a2135091', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'dc7d99c2b90ea4a86bc23527a39eaec70d95acc8', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
|
|
32287
32199
|
}
|
|
32288
32200
|
static get watchers() { return {
|
|
32289
32201
|
"settings": [{
|
|
@@ -32316,10 +32228,10 @@ const KritzelShapeFill = class {
|
|
|
32316
32228
|
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" })));
|
|
32317
32229
|
}
|
|
32318
32230
|
render() {
|
|
32319
|
-
return (h(Host, { key: '
|
|
32231
|
+
return (h(Host, { key: '6d38a9af2e4c4c7f86ab994c63fc074007c86b48' }, h("div", { key: 'cf58f26cb0e56e274873d11024209c6908d317bb', class: "fill-row" }, h("button", { key: 'c75eed70fe0c2fcbf0fd136bb6fce75b2dbfb45d', class: {
|
|
32320
32232
|
'fill-option': true,
|
|
32321
32233
|
'selected': this.value === 'transparent',
|
|
32322
|
-
}, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '
|
|
32234
|
+
}, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '5d6ede439b5d5e55598cd8c20b5851fb9f210463', class: {
|
|
32323
32235
|
'fill-option': true,
|
|
32324
32236
|
'selected': this.value === 'filled',
|
|
32325
32237
|
}, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
|
|
@@ -35523,9 +35435,9 @@ const KritzelShareDialog = class {
|
|
|
35523
35435
|
this.dialogClosed.emit();
|
|
35524
35436
|
};
|
|
35525
35437
|
render() {
|
|
35526
|
-
return (h(Host, { key: '
|
|
35438
|
+
return (h(Host, { key: '13e718f70f46a0c71e70d7330e0bcf655ebb60a3' }, h("kritzel-dialog", { key: 'd96e31d7259cc5c5461d94395ceecfc7491f403f', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '9a82641540675cb645e5520bfb1624e77b5eb382', class: "share-content" }, h("div", { key: '5eed405aaf5e39f71083e84d2db0c4177722915b', class: "share-section" }, h("div", { key: '2bb736f60448dcae354d2f7931c277fce9fe7964', class: "share-row" }, h("div", { key: 'f2b22b2ce9e3331b0bf142bcb280e3dae064f34d', class: "share-label-group" }, h("label", { key: '58daf90a8b4de173deaba2e93c31791d78c17214', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'ba5f9ee772ab44fd4cc9a3066894ee5da10c56d8', class: "share-description" }, this.internalIsPublic
|
|
35527
35439
|
? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
|
|
35528
|
-
: (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '
|
|
35440
|
+
: (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '7f70df4db90f087d8d7a7efe98012f7bf897975d', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '999fe3550e149b7e3f0ebf28f312fa5f676dd945', class: "share-section" }, h("div", { key: 'ff623a78f50b8a5e27a978e05e2ee2ba4ac1991b', class: "share-url-container" }, h("input", { key: '5c3b5c3e82366ebe4f4e7a73c6afa42dbbf39a20', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '60ac0315841649722b32d098c787f2a0deeec979', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, h("kritzel-icon", { key: 'eacbd3b75c554d3c62a098ddd45b6723f59521b5', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'fc24d6a9673b5b16a35f905023e632a314cef4ce', class: "share-qr-container" }, h("img", { key: '3669f9138336cd4cf51d1e3de5caedaddac518e8', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
|
|
35529
35441
|
}
|
|
35530
35442
|
static get watchers() { return {
|
|
35531
35443
|
"isPublic": [{
|
|
@@ -35566,7 +35478,7 @@ const KritzelSlideToggle = class {
|
|
|
35566
35478
|
}
|
|
35567
35479
|
};
|
|
35568
35480
|
render() {
|
|
35569
|
-
return (h(Host, { key: '
|
|
35481
|
+
return (h(Host, { key: 'd8a9509138995da84fe798da448f0487d8c082b5', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '0966d487def99332139fe6f4a604fff310088d72', class: "toggle-track" }, h("div", { key: 'aeec11224dffa71178f38b0a96a7e15c35f67bcf', class: "toggle-thumb" }))));
|
|
35570
35482
|
}
|
|
35571
35483
|
};
|
|
35572
35484
|
KritzelSlideToggle.style = kritzelSlideToggleCss();
|
|
@@ -35666,7 +35578,7 @@ const KritzelSplitButton = class {
|
|
|
35666
35578
|
this.menuScrollTop = event.target.scrollTop;
|
|
35667
35579
|
};
|
|
35668
35580
|
render() {
|
|
35669
|
-
return (h(Host, { key: '
|
|
35581
|
+
return (h(Host, { key: '37185b37faa1e703f9457d4f4685c7d8ed40b342', class: { mobile: this.isTouchDevice } }, h("button", { key: 'b97d4df106fea68398116f1c44c6d5cd9f31997c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '66dce735d160e23a16727c294f9ccb1bd3cda8c1', name: this.buttonIcon })), h("div", { key: '14ffaf9334090dc10df87d7b8744446be8bb2632', class: "split-divider" }), h("button", { key: '421e23ebb99e7b1ca656c0bc16f602a2a9812264', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: 'affc13ef766d21030137a7feb44305553845dbfc', name: this.dropdownIcon })), h("kritzel-portal", { key: '326cef4696ebf9986e6c42e18822b90c399b16c2', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'e0800efbdefc9dce3dc548523ec10e810f3f7f73', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
|
|
35670
35582
|
}
|
|
35671
35583
|
};
|
|
35672
35584
|
KritzelSplitButton.style = kritzelSplitButtonCss();
|
|
@@ -35687,7 +35599,7 @@ const KritzelStrokeSize = class {
|
|
|
35687
35599
|
}
|
|
35688
35600
|
render() {
|
|
35689
35601
|
const sizes = this.sizes ?? [];
|
|
35690
|
-
return (h(Host, { key: '
|
|
35602
|
+
return (h(Host, { key: '8b12f354a3395cd69c7199115ce998cf2eb26eb2' }, h("div", { key: '39008613327d50b75270dd78ea498113e5e9617b', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
|
|
35691
35603
|
'size-container': true,
|
|
35692
35604
|
'selected': this.selectedSize === size,
|
|
35693
35605
|
}, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
|
|
@@ -35695,22 +35607,6 @@ const KritzelStrokeSize = class {
|
|
|
35695
35607
|
};
|
|
35696
35608
|
KritzelStrokeSize.style = kritzelStrokeSizeCss();
|
|
35697
35609
|
|
|
35698
|
-
const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-editor-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-editor-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-editor-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-editor-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-editor-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
|
|
35699
|
-
|
|
35700
|
-
const KritzelSyncIndicator = class {
|
|
35701
|
-
constructor(hostRef) {
|
|
35702
|
-
registerInstance(this, hostRef);
|
|
35703
|
-
}
|
|
35704
|
-
/** Whether the indicator is visible. */
|
|
35705
|
-
visible = false;
|
|
35706
|
-
/** The text displayed next to the spinner. */
|
|
35707
|
-
text = 'Syncing...';
|
|
35708
|
-
render() {
|
|
35709
|
-
return (h(Host, { key: '2622544751cd377f172115f5f73e21e0f0995185' }, h("div", { key: '0cf49cbfbfa4ed0625eeff443ba1e2996a26562e', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '053ddc85e9ad2210822d3100ecf5d54d7170d470', class: "spinner", "aria-hidden": "true" }), h("span", { key: '94ea7f6be206688e9065d02b1d5c753e3598e9df' }, this.text))));
|
|
35710
|
-
}
|
|
35711
|
-
};
|
|
35712
|
-
KritzelSyncIndicator.style = kritzelSyncIndicatorCss();
|
|
35713
|
-
|
|
35714
35610
|
const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
|
|
35715
35611
|
|
|
35716
35612
|
const KritzelToolConfig = class {
|
|
@@ -36119,14 +36015,14 @@ const KritzelTooltip = class {
|
|
|
36119
36015
|
}
|
|
36120
36016
|
}
|
|
36121
36017
|
render() {
|
|
36122
|
-
return (h(Host, { key: '
|
|
36018
|
+
return (h(Host, { key: '407a2f458626f02808fc9d718046a635de71662b', style: {
|
|
36123
36019
|
position: 'fixed',
|
|
36124
36020
|
zIndex: '9999',
|
|
36125
36021
|
transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
|
|
36126
36022
|
visibility: this.isVisible ? 'visible' : 'hidden',
|
|
36127
36023
|
left: `${this.positionX}px`,
|
|
36128
36024
|
bottom: `${this.positionY}px`,
|
|
36129
|
-
} }, h("div", { key: '
|
|
36025
|
+
} }, h("div", { key: '13c00678bd485f1f5bc2676e2c89fd0019f5e089', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '67937f71c611f36a2c47ee2632a8657ced1d8cc7' }))));
|
|
36130
36026
|
}
|
|
36131
36027
|
static get watchers() { return {
|
|
36132
36028
|
"triggerElement": [{
|
|
@@ -36167,7 +36063,7 @@ const KritzelUtilityPanel = class {
|
|
|
36167
36063
|
this.redo.emit();
|
|
36168
36064
|
}
|
|
36169
36065
|
render() {
|
|
36170
|
-
return (h(Host, { key: '
|
|
36066
|
+
return (h(Host, { key: '3485f5cc7c4f1fd71fe24c2337d0a1f7145012c0' }, h("button", { key: '0a5eb536282df4fec1d7eead330574412640ae8b', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '976805f2e645acf710b30a6dc089b93bf3d6efb3', name: "undo" })), h("button", { key: 'dd44f61e16f96e315d62c0e9278b0a09ec7169d7', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '4f3fb33d6bc5cfa5c3b23a39c10998efefec51a8', name: "redo" })), h("div", { key: '60124754529de5ac00e6ec281a2402d4c85e1906', class: "utility-separator" }), h("button", { key: '0b3cbd654f5a8c2319547a3314887435dfc5b1f7', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '7fe136ecc1513895b14e479a5d47e13d398f52b4', name: "delete" }))));
|
|
36171
36067
|
}
|
|
36172
36068
|
};
|
|
36173
36069
|
KritzelUtilityPanel.style = kritzelUtilityPanelCss();
|
|
@@ -36188,7 +36084,7 @@ const KritzelWatermark = class {
|
|
|
36188
36084
|
label;
|
|
36189
36085
|
render() {
|
|
36190
36086
|
const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
|
|
36191
|
-
return (h(Host, { key: '
|
|
36087
|
+
return (h(Host, { key: '297a488f26fd8637da8d00b98af85cfeda5b0992' }, h("a", { key: '6e3be65773dfda06e9b7ae611cfbb5ff09ba1f91', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
|
|
36192
36088
|
}
|
|
36193
36089
|
};
|
|
36194
36090
|
KritzelWatermark.style = kritzelWatermarkCss();
|
|
@@ -36376,9 +36272,9 @@ const KritzelZoomPanel = class {
|
|
|
36376
36272
|
return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
|
|
36377
36273
|
}
|
|
36378
36274
|
render() {
|
|
36379
|
-
return (h(Host, { key: '
|
|
36275
|
+
return (h(Host, { key: '6f39f043da7b8607efcfb0e99d58cebc80d3c031' }, h("div", { key: 'f7c7600760ea8d3d9c6efe26e6b398ba20b12e23', class: { panel: true, visible: this.visible } }, h("button", { key: '18c6ddc87155a36395b296aded7c15c55500a2c8', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '54fea3408bb38c7e5f19877c84fb96a74028693a', name: "minus" })), h("span", { key: 'b2b354eb16a0e2102e9214864c438dfab79d8968', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'ddc3822e478ccfec770dcc5ba900d0276531b1ad', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '2069bf5aba39c362d472f57941ca8ae4f0bedb8a', name: "plus" })))));
|
|
36380
36276
|
}
|
|
36381
36277
|
};
|
|
36382
36278
|
KritzelZoomPanel.style = kritzelZoomPanelCss();
|
|
36383
36279
|
|
|
36384
|
-
export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoadingOverlay as kritzel_loading_overlay, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNotificationCard as kritzel_notification_card, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size,
|
|
36280
|
+
export { KritzelActiveUsers as kritzel_active_users, KritzelAvatar as kritzel_avatar, KritzelAwarenessCursors as kritzel_awareness_cursors, KritzelBackToContent as kritzel_back_to_content, KritzelButton as kritzel_button, KritzelColorComponent as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControls as kritzel_controls, KritzelCurrentUser as kritzel_current_user, KritzelCurrentUserDialog as kritzel_current_user_dialog, KritzelCursorTrail as kritzel_cursor_trail, KritzelDialog as kritzel_dialog, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelExport as kritzel_export, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelInput as kritzel_input, KritzelLineEndings as kritzel_line_endings, KritzelLoadingOverlay as kritzel_loading_overlay, KritzelLoginDialog as kritzel_login_dialog, KritzelMasterDetail as kritzel_master_detail, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelMoreMenu as kritzel_more_menu, KritzelNotificationCard as kritzel_notification_card, KritzelNumericInput as kritzel_numeric_input, KritzelOpacitySlider as kritzel_opacity_slider, KritzelPillTabs as kritzel_pill_tabs, KritzelPortal as kritzel_portal, KritzelSettings as kritzel_settings, KritzelShapeFill as kritzel_shape_fill, KritzelShareDialog as kritzel_share_dialog, KritzelSlideToggle as kritzel_slide_toggle, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelToolConfig as kritzel_tool_config, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWatermark as kritzel_watermark, KritzelWorkspaceManager as kritzel_workspace_manager, KritzelZoomPanel as kritzel_zoom_panel };
|