kritzel-stencil 0.2.9 → 0.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/kritzel-active-users_42.cjs.entry.js +291 -75
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/cjs/{workspace.migrations-BuN0vRGQ.js → workspace.migrations-D5sPPbQN.js} +47 -33
- package/dist/collection/classes/managers/theme.manager.js +35 -29
- package/dist/collection/classes/tools/text-tool.class.js +12 -4
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.css +8 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +25 -6
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +85 -0
- package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css +29 -0
- package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.js +201 -5
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css +1 -1
- 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.js +1 -1
- package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js +1 -1
- package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js +72 -64
- package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js +2 -2
- package/dist/collection/constants/version.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-awareness-cursors.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-current-user-dialog.js +1 -1
- package/dist/components/kritzel-current-user.js +1 -1
- package/dist/components/kritzel-dialog.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-export.js +1 -1
- package/dist/components/kritzel-login-dialog.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-share-dialog.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/{p-DeqXAEjq.js → p-B638ZH7S.js} +1 -1
- package/dist/components/p-BTSOqHMI.js +1 -0
- package/dist/components/{p-BD-U5p22.js → p-BWRjTm0J.js} +1 -1
- package/dist/components/{p-CNa_5hqn.js → p-B_fA1LTU.js} +2 -2
- package/dist/components/{p-DORo_go4.js → p-C-sJ1r3g.js} +1 -1
- package/dist/components/{p-BhMchyAR.js → p-C4bAtxyk.js} +1 -1
- package/dist/components/p-C51_twnc.js +1 -0
- package/dist/components/{p-DDm8Gefw.js → p-CqAkznU_.js} +1 -1
- package/dist/components/p-CrSLn46K.js +1 -0
- package/dist/components/p-CrmWVXea.js +1 -0
- package/dist/components/{p-CitH48cC.js → p-D9-C4GfD.js} +1 -1
- package/dist/components/{p-BK9c3UTv.js → p-DF8X_22i.js} +1 -1
- package/dist/components/p-DMfU0hHe.js +1 -0
- package/dist/components/{p-D_Tdq4Z0.js → p-DjAiIBXv.js} +1 -1
- package/dist/components/p-DqJ9KC24.js +1 -0
- package/dist/components/p-DsxW_miC.js +1 -0
- package/dist/components/{p-nW05C2cx.js → p-Z9_amVdR.js} +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/kritzel-active-users_42.entry.js +291 -75
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/esm/{workspace.migrations-DbozNwZA.js → workspace.migrations-BnTvdnKU.js} +47 -33
- package/dist/stencil/index.esm.js +1 -1
- package/dist/stencil/p-836d973c.entry.js +9 -0
- package/dist/stencil/p-BnTvdnKU.js +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/managers/theme.manager.d.ts +9 -15
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +1 -0
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +11 -0
- package/dist/types/components/shared/kritzel-dialog/kritzel-dialog.d.ts +21 -0
- package/dist/types/components/ui/kritzel-settings/kritzel-settings.d.ts +5 -5
- package/dist/types/components.d.ts +31 -13
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-B1V6yEGY.js +0 -1
- package/dist/components/p-BuSOJ7Xd.js +0 -1
- package/dist/components/p-DBIK7z89.js +0 -1
- package/dist/components/p-DPxSr1wV.js +0 -1
- package/dist/components/p-DpjrLdtb.js +0 -1
- package/dist/components/p-Dpr_JQam.js +0 -1
- package/dist/components/p-aO27ZwFX.js +0 -1
- package/dist/stencil/p-DbozNwZA.js +0 -1
- package/dist/stencil/p-d444dc76.entry.js +0 -9
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-D9HaikfQ.js';
|
|
2
|
-
import { b as KritzelPath, d as KritzelLine, G as KritzelColorHelper, n as KritzelSelectionTool, g as KritzelBrushTool, h as KritzelLineTool, l as KritzelShapeTool, k as KritzelTextTool, J as KritzelDevicesHelper, L as KritzelMouseButton, M as DEFAULT_COLOR_PALETTE, S as ShapeType, I as IndexedDBSyncProvider, D as DEFAULT_BRUSH_CONFIG, i as KritzelEraserTool, u as DEFAULT_LINE_TOOL_CONFIG, t as DEFAULT_TEXT_CONFIG, j as KritzelImageTool, y as KritzelAlignment, v as DEFAULT_ASSET_STORAGE_CONFIG, N as KritzelSelectionGroup, O as KritzelSelectionBox, P as KritzelIconRegistry, Q as KritzelKeyboardHelper, R as KritzelBaseHandler, T as KritzelToolRegistry, U as KritzelBaseObject, q as KritzelWorkspace, e as KritzelGroup, c as KritzelImage, f as KritzelShape, K as KritzelText, B as runMigrations, z as CURRENT_WORKSPACE_SCHEMA_VERSION, F as WORKSPACE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, E as APP_STATE_MIGRATIONS, V as ObjectHelper, m as KritzelCursorHelper, r as KritzelAnchorManager, s as KritzelThemeManager, o as KritzelAssetResolver, X as KritzelClassHelper, Y as KritzelEventHelper, Z as KritzelBaseTool, W as WORKSPACE_EXPORT_VERSION } from './workspace.migrations-
|
|
2
|
+
import { b as KritzelPath, d as KritzelLine, G as KritzelColorHelper, n as KritzelSelectionTool, g as KritzelBrushTool, h as KritzelLineTool, l as KritzelShapeTool, k as KritzelTextTool, J as KritzelDevicesHelper, L as KritzelMouseButton, M as DEFAULT_COLOR_PALETTE, S as ShapeType, I as IndexedDBSyncProvider, D as DEFAULT_BRUSH_CONFIG, i as KritzelEraserTool, u as DEFAULT_LINE_TOOL_CONFIG, t as DEFAULT_TEXT_CONFIG, j as KritzelImageTool, y as KritzelAlignment, v as DEFAULT_ASSET_STORAGE_CONFIG, N as KritzelSelectionGroup, O as KritzelSelectionBox, P as KritzelIconRegistry, Q as KritzelKeyboardHelper, R as KritzelBaseHandler, T as KritzelToolRegistry, U as KritzelBaseObject, q as KritzelWorkspace, e as KritzelGroup, c as KritzelImage, f as KritzelShape, K as KritzelText, B as runMigrations, z as CURRENT_WORKSPACE_SCHEMA_VERSION, F as WORKSPACE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, E as APP_STATE_MIGRATIONS, V as ObjectHelper, m as KritzelCursorHelper, r as KritzelAnchorManager, s as KritzelThemeManager, o as KritzelAssetResolver, X as KritzelClassHelper, Y as KritzelEventHelper, Z as KritzelBaseTool, W as WORKSPACE_EXPORT_VERSION } from './workspace.migrations-BnTvdnKU.js';
|
|
3
3
|
import * as Y from 'yjs';
|
|
4
4
|
import 'y-indexeddb';
|
|
5
5
|
import 'y-websocket';
|
|
@@ -870,7 +870,7 @@ class KritzelToolConfigHelper {
|
|
|
870
870
|
}
|
|
871
871
|
}
|
|
872
872
|
|
|
873
|
-
const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:
|
|
873
|
+
const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:100%}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-border, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}`;
|
|
874
874
|
|
|
875
875
|
const KritzelControls = class {
|
|
876
876
|
constructor(hostRef) {
|
|
@@ -1182,7 +1182,7 @@ const KritzelCurrentUserDialog = class {
|
|
|
1182
1182
|
}
|
|
1183
1183
|
render() {
|
|
1184
1184
|
const displayName = this.getDisplayName();
|
|
1185
|
-
return (h(Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, h("kritzel-dialog", { key: '
|
|
1185
|
+
return (h(Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, h("kritzel-dialog", { key: 'cd3daa7abd53c10852d63a2fe53d919414cd8904', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '94d0a691ede73135e6cf4ef144c13e52e410ffbe', class: "user-info" }, h("kritzel-avatar", { key: 'e57592d2f3663b593534055be5aae1b224fa8906', user: this.user, size: 80 }), displayName && h("div", { key: '237db2d0608ee49ea70e5282b61a59077f0f4595', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'd821e8171530b92ce6f1781c1145b611d3c533d0', class: "user-email" }, this.user.email)))));
|
|
1186
1186
|
}
|
|
1187
1187
|
};
|
|
1188
1188
|
KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
|
|
@@ -1343,7 +1343,7 @@ class KritzelHTMLHelper {
|
|
|
1343
1343
|
}
|
|
1344
1344
|
}
|
|
1345
1345
|
|
|
1346
|
-
const kritzelDialogCss = () => `:host{display:contents}.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}@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}`;
|
|
1346
|
+
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}`;
|
|
1347
1347
|
|
|
1348
1348
|
const KritzelDialog = class {
|
|
1349
1349
|
constructor(hostRef) {
|
|
@@ -1370,8 +1370,12 @@ const KritzelDialog = class {
|
|
|
1370
1370
|
size = 'medium';
|
|
1371
1371
|
/** Whether to automatically go fullscreen on mobile viewports */
|
|
1372
1372
|
fullscreenOnMobile = true;
|
|
1373
|
+
/** Constrain the dialog to its nearest editor/container ancestor instead of the viewport. */
|
|
1374
|
+
contained = false;
|
|
1373
1375
|
isAnimating = false;
|
|
1374
1376
|
mobileLockedHeight = null;
|
|
1377
|
+
containerRect = null;
|
|
1378
|
+
containerBorderRadius = null;
|
|
1375
1379
|
/** Emitted when the dialog opens */
|
|
1376
1380
|
dialogOpen;
|
|
1377
1381
|
/** Emitted when the dialog closes */
|
|
@@ -1379,6 +1383,9 @@ const KritzelDialog = class {
|
|
|
1379
1383
|
previousOverflow = '';
|
|
1380
1384
|
previousActiveElement = null;
|
|
1381
1385
|
visualViewportListenersAttached = false;
|
|
1386
|
+
containerElement = null;
|
|
1387
|
+
containerResizeObserver = null;
|
|
1388
|
+
containerTrackingFrame = null;
|
|
1382
1389
|
handleIsOpenChange(newValue) {
|
|
1383
1390
|
if (newValue) {
|
|
1384
1391
|
this.openDialog();
|
|
@@ -1428,13 +1435,19 @@ const KritzelDialog = class {
|
|
|
1428
1435
|
}
|
|
1429
1436
|
disconnectedCallback() {
|
|
1430
1437
|
this.removeVisualViewportListeners();
|
|
1438
|
+
this.stopContainerTracking();
|
|
1431
1439
|
this.restoreBodyScroll();
|
|
1432
1440
|
}
|
|
1433
1441
|
openDialog() {
|
|
1434
1442
|
this.isAnimating = true;
|
|
1435
1443
|
this.previousActiveElement = document.activeElement;
|
|
1436
|
-
this.
|
|
1437
|
-
|
|
1444
|
+
if (this.contained) {
|
|
1445
|
+
this.startContainerTracking();
|
|
1446
|
+
}
|
|
1447
|
+
else {
|
|
1448
|
+
this.lockBodyScroll();
|
|
1449
|
+
this.addVisualViewportListeners();
|
|
1450
|
+
}
|
|
1438
1451
|
this.lockMobileViewportHeight();
|
|
1439
1452
|
this.dialogOpen.emit();
|
|
1440
1453
|
if (this.autoFocus) {
|
|
@@ -1449,9 +1462,106 @@ const KritzelDialog = class {
|
|
|
1449
1462
|
closeDialog() {
|
|
1450
1463
|
this.restoreBodyScroll();
|
|
1451
1464
|
this.removeVisualViewportListeners();
|
|
1465
|
+
this.stopContainerTracking();
|
|
1452
1466
|
this.mobileLockedHeight = null;
|
|
1453
1467
|
this.returnFocusToPreviousElement();
|
|
1454
1468
|
}
|
|
1469
|
+
findContainerElement() {
|
|
1470
|
+
// Walk up the composed DOM (crossing shadow roots) and return the first
|
|
1471
|
+
// ancestor that opts into containing dialogs. We accept either an explicit
|
|
1472
|
+
// [data-kritzel-dialog-container] marker or the kritzel-editor host so any
|
|
1473
|
+
// consumer can opt in without modifying the editor itself.
|
|
1474
|
+
let node = this.host;
|
|
1475
|
+
while (node) {
|
|
1476
|
+
if (node instanceof HTMLElement) {
|
|
1477
|
+
if (node.hasAttribute('data-kritzel-dialog-container') || node.tagName === 'KRITZEL-EDITOR') {
|
|
1478
|
+
return node;
|
|
1479
|
+
}
|
|
1480
|
+
}
|
|
1481
|
+
const parent = node.parentNode;
|
|
1482
|
+
if (parent) {
|
|
1483
|
+
node = parent;
|
|
1484
|
+
}
|
|
1485
|
+
else if (node instanceof ShadowRoot) {
|
|
1486
|
+
node = node.host;
|
|
1487
|
+
}
|
|
1488
|
+
else {
|
|
1489
|
+
node = null;
|
|
1490
|
+
}
|
|
1491
|
+
}
|
|
1492
|
+
return null;
|
|
1493
|
+
}
|
|
1494
|
+
startContainerTracking() {
|
|
1495
|
+
this.containerElement = this.findContainerElement();
|
|
1496
|
+
if (!this.containerElement) {
|
|
1497
|
+
// No container found — fall back to viewport behavior.
|
|
1498
|
+
this.containerRect = null;
|
|
1499
|
+
return;
|
|
1500
|
+
}
|
|
1501
|
+
this.updateContainerRect();
|
|
1502
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
1503
|
+
this.containerResizeObserver = new ResizeObserver(() => this.updateContainerRect());
|
|
1504
|
+
this.containerResizeObserver.observe(this.containerElement);
|
|
1505
|
+
}
|
|
1506
|
+
window.addEventListener('resize', this.handleContainerTrackingEvent, { passive: true });
|
|
1507
|
+
window.addEventListener('scroll', this.handleContainerTrackingEvent, { capture: true, passive: true });
|
|
1508
|
+
}
|
|
1509
|
+
stopContainerTracking() {
|
|
1510
|
+
if (this.containerResizeObserver) {
|
|
1511
|
+
this.containerResizeObserver.disconnect();
|
|
1512
|
+
this.containerResizeObserver = null;
|
|
1513
|
+
}
|
|
1514
|
+
window.removeEventListener('resize', this.handleContainerTrackingEvent);
|
|
1515
|
+
window.removeEventListener('scroll', this.handleContainerTrackingEvent, { capture: true });
|
|
1516
|
+
if (this.containerTrackingFrame !== null) {
|
|
1517
|
+
cancelAnimationFrame(this.containerTrackingFrame);
|
|
1518
|
+
this.containerTrackingFrame = null;
|
|
1519
|
+
}
|
|
1520
|
+
this.containerElement = null;
|
|
1521
|
+
this.containerRect = null;
|
|
1522
|
+
this.containerBorderRadius = null;
|
|
1523
|
+
}
|
|
1524
|
+
handleContainerTrackingEvent = () => {
|
|
1525
|
+
if (this.containerTrackingFrame !== null)
|
|
1526
|
+
return;
|
|
1527
|
+
this.containerTrackingFrame = requestAnimationFrame(() => {
|
|
1528
|
+
this.containerTrackingFrame = null;
|
|
1529
|
+
this.updateContainerRect();
|
|
1530
|
+
});
|
|
1531
|
+
};
|
|
1532
|
+
updateContainerRect() {
|
|
1533
|
+
if (!this.containerElement)
|
|
1534
|
+
return;
|
|
1535
|
+
const rect = this.containerElement.getBoundingClientRect();
|
|
1536
|
+
const next = { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
|
|
1537
|
+
const prev = this.containerRect;
|
|
1538
|
+
if (!prev || prev.top !== next.top || prev.left !== next.left || prev.width !== next.width || prev.height !== next.height) {
|
|
1539
|
+
this.containerRect = next;
|
|
1540
|
+
}
|
|
1541
|
+
// Look for the nearest visually-rounded ancestor (the container itself or
|
|
1542
|
+
// any ancestor up to the document) so the backdrop matches wrappers that
|
|
1543
|
+
// round their corners around the editor.
|
|
1544
|
+
const radius = this.findVisualBorderRadius(this.containerElement);
|
|
1545
|
+
if (this.containerBorderRadius !== radius) {
|
|
1546
|
+
this.containerBorderRadius = radius;
|
|
1547
|
+
}
|
|
1548
|
+
}
|
|
1549
|
+
findVisualBorderRadius(start) {
|
|
1550
|
+
let node = start;
|
|
1551
|
+
while (node && node !== document.body && node !== document.documentElement) {
|
|
1552
|
+
const computed = window.getComputedStyle(node);
|
|
1553
|
+
const tl = computed.borderTopLeftRadius;
|
|
1554
|
+
const tr = computed.borderTopRightRadius;
|
|
1555
|
+
const br = computed.borderBottomRightRadius;
|
|
1556
|
+
const bl = computed.borderBottomLeftRadius;
|
|
1557
|
+
const isZero = (v) => !v || v === '0px' || v === '0%';
|
|
1558
|
+
if (!(isZero(tl) && isZero(tr) && isZero(br) && isZero(bl))) {
|
|
1559
|
+
return `${tl} ${tr} ${br} ${bl}`;
|
|
1560
|
+
}
|
|
1561
|
+
node = node.parentElement;
|
|
1562
|
+
}
|
|
1563
|
+
return null;
|
|
1564
|
+
}
|
|
1455
1565
|
emitClose(reason) {
|
|
1456
1566
|
this.dialogClose.emit({ reason });
|
|
1457
1567
|
}
|
|
@@ -1460,6 +1570,12 @@ const KritzelDialog = class {
|
|
|
1460
1570
|
document.body.style.overflow = 'hidden';
|
|
1461
1571
|
}
|
|
1462
1572
|
lockMobileViewportHeight() {
|
|
1573
|
+
// Skip mobile viewport height locking when contained — the dialog is sized
|
|
1574
|
+
// by its wrapper, not the viewport.
|
|
1575
|
+
if (this.contained) {
|
|
1576
|
+
this.mobileLockedHeight = null;
|
|
1577
|
+
return;
|
|
1578
|
+
}
|
|
1463
1579
|
// Only lock height on mobile when fullscreenOnMobile is enabled.
|
|
1464
1580
|
// Use the smaller dimension so landscape phones (wide but short) are also detected.
|
|
1465
1581
|
const viewportWidth = this.getViewportWidth();
|
|
@@ -1594,15 +1710,73 @@ const KritzelDialog = class {
|
|
|
1594
1710
|
return null;
|
|
1595
1711
|
return (h("div", { class: "dialog-footer" }, h("slot", { name: "footer" })));
|
|
1596
1712
|
}
|
|
1713
|
+
getBackdropStyle() {
|
|
1714
|
+
if (!this.contained || !this.containerRect)
|
|
1715
|
+
return undefined;
|
|
1716
|
+
const { top, left, width, height } = this.containerRect;
|
|
1717
|
+
const style = {
|
|
1718
|
+
top: `${top}px`,
|
|
1719
|
+
left: `${left}px`,
|
|
1720
|
+
right: 'auto',
|
|
1721
|
+
bottom: 'auto',
|
|
1722
|
+
width: `${width}px`,
|
|
1723
|
+
height: `${height}px`,
|
|
1724
|
+
};
|
|
1725
|
+
if (this.containerBorderRadius) {
|
|
1726
|
+
style.borderRadius = this.containerBorderRadius;
|
|
1727
|
+
// Ensure rounded corners actually clip the inner dialog content.
|
|
1728
|
+
style.overflow = 'hidden';
|
|
1729
|
+
}
|
|
1730
|
+
return style;
|
|
1731
|
+
}
|
|
1732
|
+
getDialogContentStyle() {
|
|
1733
|
+
const style = {};
|
|
1734
|
+
// In contained mode, cap the dialog dimensions to the container so the
|
|
1735
|
+
// declared widths/heights of size variants cannot overflow the wrapper.
|
|
1736
|
+
if (this.contained && this.containerRect) {
|
|
1737
|
+
const { width, height } = this.containerRect;
|
|
1738
|
+
if (this.isContainerMobile()) {
|
|
1739
|
+
// Mobile-sized container: behave like fullscreen-on-mobile but scoped
|
|
1740
|
+
// to the container instead of the viewport (works in any orientation).
|
|
1741
|
+
style.width = `${width}px`;
|
|
1742
|
+
style.height = `${height}px`;
|
|
1743
|
+
style.maxWidth = `${width}px`;
|
|
1744
|
+
style.maxHeight = `${height}px`;
|
|
1745
|
+
style.borderRadius = '0';
|
|
1746
|
+
}
|
|
1747
|
+
else {
|
|
1748
|
+
// Leave a small margin so the dialog visibly sits within the container.
|
|
1749
|
+
const maxWidth = Math.max(0, width - 32);
|
|
1750
|
+
const maxHeight = Math.max(0, height - 32);
|
|
1751
|
+
style.maxWidth = `${maxWidth}px`;
|
|
1752
|
+
style.maxHeight = `${maxHeight}px`;
|
|
1753
|
+
}
|
|
1754
|
+
}
|
|
1755
|
+
if (this.mobileLockedHeight) {
|
|
1756
|
+
style.height = this.mobileLockedHeight;
|
|
1757
|
+
style.maxHeight = this.mobileLockedHeight;
|
|
1758
|
+
}
|
|
1759
|
+
return Object.keys(style).length > 0 ? style : undefined;
|
|
1760
|
+
}
|
|
1761
|
+
isContainerMobile() {
|
|
1762
|
+
if (!this.fullscreenOnMobile || !this.containerRect)
|
|
1763
|
+
return false;
|
|
1764
|
+
// Match the existing viewport media-query threshold: container is "mobile"
|
|
1765
|
+
// when its smaller dimension is <= 576px. This handles both portrait and
|
|
1766
|
+
// landscape wrappers symmetrically.
|
|
1767
|
+
return Math.min(this.containerRect.width, this.containerRect.height) <= 576;
|
|
1768
|
+
}
|
|
1597
1769
|
render() {
|
|
1598
1770
|
if (!this.isOpen)
|
|
1599
1771
|
return null;
|
|
1600
|
-
|
|
1772
|
+
const containerFullscreen = this.contained && this.isContainerMobile();
|
|
1773
|
+
return (h(Host, null, h("div", { class: { backdrop: true, 'is-animating': this.isAnimating, 'contained-fullscreen': containerFullscreen }, style: this.getBackdropStyle(), onClick: this.handleBackdropClick }, h("div", { class: {
|
|
1601
1774
|
'dialog-content': true,
|
|
1602
1775
|
'is-animating': this.isAnimating,
|
|
1603
1776
|
[`size-${this.size}`]: true,
|
|
1604
1777
|
'fullscreen-on-mobile': this.fullscreenOnMobile,
|
|
1605
|
-
|
|
1778
|
+
'contained-fullscreen': containerFullscreen,
|
|
1779
|
+
}, style: this.getDialogContentStyle(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogTitle ? 'dialog-title' : undefined, tabIndex: -1, onClick: this.handleContentClick }, this.renderHeader(), h("div", { class: "dialog-body" }, h("slot", null)), this.renderFooter()))));
|
|
1606
1780
|
}
|
|
1607
1781
|
static get watchers() { return {
|
|
1608
1782
|
"isOpen": [{
|
|
@@ -1895,7 +2069,7 @@ const DEFAULT_SYNC_CONFIG = {
|
|
|
1895
2069
|
],
|
|
1896
2070
|
};
|
|
1897
2071
|
|
|
1898
|
-
const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px;z-index:10000}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px;z-index:10000}.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}`;
|
|
2072
|
+
const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}kritzel-controls{position:absolute;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;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;z-index:10000}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px;z-index:10000}.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}`;
|
|
1899
2073
|
|
|
1900
2074
|
const KritzelEditor = class {
|
|
1901
2075
|
constructor(hostRef) {
|
|
@@ -2172,6 +2346,9 @@ const KritzelEditor = class {
|
|
|
2172
2346
|
}
|
|
2173
2347
|
onCurrentThemeChange() {
|
|
2174
2348
|
setTimeout(() => this.setOsSpecificCssVariables(), 0);
|
|
2349
|
+
if (this.engineRef) {
|
|
2350
|
+
this.engineRef.saveSettings(this.currentSettingsConfig);
|
|
2351
|
+
}
|
|
2175
2352
|
}
|
|
2176
2353
|
onTouchStart(event) {
|
|
2177
2354
|
if (event.cancelable) {
|
|
@@ -2448,6 +2625,9 @@ const KritzelEditor = class {
|
|
|
2448
2625
|
this.viewportBoundaryBottom = event.detail.viewportBoundaryBottom ?? Infinity;
|
|
2449
2626
|
this.debugInfo = event.detail.debugInfo;
|
|
2450
2627
|
this.themeChange.emit(event.detail.theme);
|
|
2628
|
+
if (this.engineRef) {
|
|
2629
|
+
this.engineRef.saveSettings(event.detail);
|
|
2630
|
+
}
|
|
2451
2631
|
}
|
|
2452
2632
|
get moreMenuItems() {
|
|
2453
2633
|
return [
|
|
@@ -2570,6 +2750,19 @@ const KritzelEditor = class {
|
|
|
2570
2750
|
async loadShortcuts() {
|
|
2571
2751
|
this.shortcuts = await this.engineRef.getDisplayableShortcuts();
|
|
2572
2752
|
}
|
|
2753
|
+
get currentSettingsConfig() {
|
|
2754
|
+
return {
|
|
2755
|
+
scaleMin: this.scaleMin,
|
|
2756
|
+
scaleMax: this.scaleMax,
|
|
2757
|
+
lockDrawingScale: this.lockDrawingScale,
|
|
2758
|
+
theme: this.currentTheme,
|
|
2759
|
+
viewportBoundaryLeft: this.viewportBoundaryLeft,
|
|
2760
|
+
viewportBoundaryRight: this.viewportBoundaryRight,
|
|
2761
|
+
viewportBoundaryTop: this.viewportBoundaryTop,
|
|
2762
|
+
viewportBoundaryBottom: this.viewportBoundaryBottom,
|
|
2763
|
+
debugInfo: this.debugInfo,
|
|
2764
|
+
};
|
|
2765
|
+
}
|
|
2573
2766
|
getContentObjects(objects) {
|
|
2574
2767
|
return objects.filter(obj => !(obj instanceof KritzelSelectionGroup) && !(obj instanceof KritzelSelectionBox));
|
|
2575
2768
|
}
|
|
@@ -2616,27 +2809,27 @@ const KritzelEditor = class {
|
|
|
2616
2809
|
const isLoggedIn = this.isLoggedIn;
|
|
2617
2810
|
const shouldShowCurrentUser = isLoggedIn;
|
|
2618
2811
|
const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
|
|
2619
|
-
return (h(Host, { key: '
|
|
2812
|
+
return (h(Host, { key: 'e259a79d0fb8e39be29f338c78b3b686c82790ff' }, h("div", { key: '2aa5768df3fe0442ff4b032c1f3defa3e2414d4b', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '6bade436347fba887007843ed3ad71f85ea4acb0', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'cdbf4c27695a5daefe9548a642a9dcd0aff7a77b', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'e0ac833bd839c04d90c8788663ea0afd6aa35c39', ref: el => {
|
|
2620
2813
|
if (el) {
|
|
2621
2814
|
this.engineRef = el;
|
|
2622
2815
|
}
|
|
2623
|
-
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, 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) }), h("kritzel-controls", { key: '
|
|
2816
|
+
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, 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) }), h("kritzel-controls", { key: '396ed985b464306a845a4ef4f54782ccc42bd344', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
|
|
2624
2817
|
if (el) {
|
|
2625
2818
|
this.controlsRef = el;
|
|
2626
2819
|
}
|
|
2627
|
-
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '
|
|
2820
|
+
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '67fdbff9c0259c02bd02bc1342856bc4bdac6d9f', class: "top-right-buttons" }, h("kritzel-settings", { key: '08e1bbfc902e8fe24395babef675654d84bc2dfc', ref: el => {
|
|
2628
2821
|
if (el) {
|
|
2629
2822
|
this.settingsRef = el;
|
|
2630
2823
|
}
|
|
2631
|
-
}, shortcuts: this.shortcuts,
|
|
2824
|
+
}, shortcuts: this.shortcuts, settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'e3250aaecf428bf763aefea11167b72587cee52d', ref: el => {
|
|
2632
2825
|
if (el) {
|
|
2633
2826
|
this.exportRef = el;
|
|
2634
2827
|
}
|
|
2635
|
-
}, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '
|
|
2828
|
+
}, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '6ba93cfeb8eb28d6e7a7c0d8f6813300bd14bd2b', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '4efef69fc7c1b443f6e12fdcda5ed8d26dbebcd3', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '54208a3e130fe41f7429516d52f166b08de7e24c', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: 'b5a6f5e0e5465655d109ee9047cba97200f94639', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'ee32c5f54395db794ab77ecd0f2e9657db6765c0', ref: el => {
|
|
2636
2829
|
if (el) {
|
|
2637
2830
|
this.shareDialogRef = el;
|
|
2638
2831
|
}
|
|
2639
|
-
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '
|
|
2832
|
+
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'b24a52c160d828218d949ac1d8b9edd9b3c00535', ref: el => {
|
|
2640
2833
|
if (el) {
|
|
2641
2834
|
this.loginDialogRef = el;
|
|
2642
2835
|
}
|
|
@@ -27061,6 +27254,31 @@ const KritzelEngine = class {
|
|
|
27061
27254
|
this._isAssetStorageInitialized = false;
|
|
27062
27255
|
await this.initializeSyncAndWorkspace();
|
|
27063
27256
|
}
|
|
27257
|
+
/**
|
|
27258
|
+
* Persists the given settings object to localStorage using the namespaced storage key.
|
|
27259
|
+
* @param settings - The settings configuration to persist.
|
|
27260
|
+
*/
|
|
27261
|
+
async saveSettings(settings) {
|
|
27262
|
+
const key = this.core.getStorageKey('kritzel-settings');
|
|
27263
|
+
localStorage.setItem(key, JSON.stringify(settings));
|
|
27264
|
+
}
|
|
27265
|
+
/**
|
|
27266
|
+
* Loads the persisted settings object from localStorage.
|
|
27267
|
+
* @returns The stored settings, or null if nothing is stored or the value is invalid.
|
|
27268
|
+
*/
|
|
27269
|
+
async loadSettings() {
|
|
27270
|
+
const key = this.core.getStorageKey('kritzel-settings');
|
|
27271
|
+
const stored = localStorage.getItem(key);
|
|
27272
|
+
if (!stored) {
|
|
27273
|
+
return null;
|
|
27274
|
+
}
|
|
27275
|
+
try {
|
|
27276
|
+
return JSON.parse(stored);
|
|
27277
|
+
}
|
|
27278
|
+
catch {
|
|
27279
|
+
return null;
|
|
27280
|
+
}
|
|
27281
|
+
}
|
|
27064
27282
|
core;
|
|
27065
27283
|
viewport;
|
|
27066
27284
|
contextMenuHandler;
|
|
@@ -27955,7 +28173,7 @@ const KritzelExport = class {
|
|
|
27955
28173
|
return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
|
|
27956
28174
|
}
|
|
27957
28175
|
render() {
|
|
27958
|
-
return (h(Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, h("kritzel-dialog", { key: '
|
|
28176
|
+
return (h(Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, h("kritzel-dialog", { key: 'f80cbe3fa709ed7e046303034b7345ca1f94bc48', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e7968807c2b67ebfc800cb1694b4e34af245ffba', class: "export-content" }, h("kritzel-pill-tabs", { key: 'eac62225c4c42431296f330791a1fb2212f579f5', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '3489affca39a901c2ef05a0698cdf51c0a7f6d1a', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
|
|
27959
28177
|
}
|
|
27960
28178
|
};
|
|
27961
28179
|
KritzelExport.style = kritzelExportCss();
|
|
@@ -28252,7 +28470,7 @@ const KritzelLoginDialog = class {
|
|
|
28252
28470
|
this.dialogClosed.emit();
|
|
28253
28471
|
};
|
|
28254
28472
|
render() {
|
|
28255
|
-
return (h(Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, h("kritzel-dialog", { key: '
|
|
28473
|
+
return (h(Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, h("kritzel-dialog", { key: '54844ffa772a211515c1ef3e6834ec45f7f3d035', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'd9b981b6904c58bc39173ae37ee5c4c0ee329005', class: "login-content" }, this.subtitle && (h("p", { key: 'd4d200060507d2b8b755796d8313acdfc7e2f587', class: "login-subtitle" }, this.subtitle)), h("div", { key: '3dc1e3c070e62d026eb16ceb48eb63c94bc2bed0', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
|
|
28256
28474
|
'provider-button': true,
|
|
28257
28475
|
'is-loading': this.loadingProvider === provider.name,
|
|
28258
28476
|
'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
|
|
@@ -29123,11 +29341,10 @@ const KritzelPortal = class {
|
|
|
29123
29341
|
* This file is auto-generated by the version bump scripts.
|
|
29124
29342
|
* Do not modify manually.
|
|
29125
29343
|
*/
|
|
29126
|
-
const KRITZEL_VERSION = '0.2.
|
|
29344
|
+
const KRITZEL_VERSION = '0.2.11';
|
|
29127
29345
|
|
|
29128
29346
|
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-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)}`;
|
|
29129
29347
|
|
|
29130
|
-
const SETTINGS_STORAGE_KEY = 'kritzel-settings';
|
|
29131
29348
|
const DEFAULT_SCALE_MIN = 0.0001;
|
|
29132
29349
|
const DEFAULT_SCALE_MAX = 1000;
|
|
29133
29350
|
const DEFAULT_LOCK_DRAWING_SCALE = true;
|
|
@@ -29156,8 +29373,13 @@ const KritzelSettings = class {
|
|
|
29156
29373
|
get host() { return getElement(this); }
|
|
29157
29374
|
/** Keyboard shortcuts to display in the settings dialog */
|
|
29158
29375
|
shortcuts = [];
|
|
29159
|
-
/**
|
|
29160
|
-
|
|
29376
|
+
/** Current settings values. Used to initialize and sync the component's internal state. */
|
|
29377
|
+
settings;
|
|
29378
|
+
onSettingsPropChange(newSettings) {
|
|
29379
|
+
if (newSettings) {
|
|
29380
|
+
this.applySettings(newSettings);
|
|
29381
|
+
}
|
|
29382
|
+
}
|
|
29161
29383
|
isDialogOpen = false;
|
|
29162
29384
|
selectedCategoryId = SETTINGS_CATEGORIES[0].id;
|
|
29163
29385
|
scaleMin = DEFAULT_SCALE_MIN;
|
|
@@ -29172,50 +29394,40 @@ const KritzelSettings = class {
|
|
|
29172
29394
|
/** Emitted when settings change */
|
|
29173
29395
|
settingsChange;
|
|
29174
29396
|
componentWillLoad() {
|
|
29175
|
-
this.
|
|
29176
|
-
|
|
29177
|
-
|
|
29178
|
-
return this.editorId ? `${SETTINGS_STORAGE_KEY}-${this.editorId}` : SETTINGS_STORAGE_KEY;
|
|
29397
|
+
if (this.settings) {
|
|
29398
|
+
this.applySettings(this.settings);
|
|
29399
|
+
}
|
|
29179
29400
|
}
|
|
29180
|
-
|
|
29181
|
-
|
|
29182
|
-
|
|
29183
|
-
|
|
29184
|
-
|
|
29185
|
-
|
|
29186
|
-
|
|
29187
|
-
|
|
29188
|
-
|
|
29189
|
-
|
|
29190
|
-
|
|
29191
|
-
|
|
29192
|
-
|
|
29193
|
-
|
|
29194
|
-
|
|
29195
|
-
|
|
29196
|
-
|
|
29197
|
-
|
|
29198
|
-
|
|
29199
|
-
|
|
29200
|
-
|
|
29201
|
-
|
|
29202
|
-
|
|
29203
|
-
|
|
29204
|
-
|
|
29205
|
-
|
|
29206
|
-
|
|
29207
|
-
this.viewportBoundaryBottom = parsed.viewportBoundaryBottom;
|
|
29208
|
-
}
|
|
29209
|
-
if (parsed.debugInfo) {
|
|
29210
|
-
this.debugInfo = { ...DEFAULT_DEBUG_INFO, ...parsed.debugInfo };
|
|
29211
|
-
}
|
|
29212
|
-
}
|
|
29213
|
-
catch {
|
|
29214
|
-
// Invalid JSON, use defaults
|
|
29215
|
-
}
|
|
29401
|
+
applySettings(settings) {
|
|
29402
|
+
if (typeof settings.scaleMin === 'number') {
|
|
29403
|
+
this.scaleMin = settings.scaleMin;
|
|
29404
|
+
}
|
|
29405
|
+
if (typeof settings.scaleMax === 'number') {
|
|
29406
|
+
this.scaleMax = settings.scaleMax;
|
|
29407
|
+
}
|
|
29408
|
+
if (typeof settings.lockDrawingScale === 'boolean') {
|
|
29409
|
+
this.lockDrawingScale = settings.lockDrawingScale;
|
|
29410
|
+
}
|
|
29411
|
+
if (settings.theme === 'light' || settings.theme === 'dark') {
|
|
29412
|
+
this.currentTheme = settings.theme;
|
|
29413
|
+
}
|
|
29414
|
+
if (typeof settings.viewportBoundaryLeft === 'number') {
|
|
29415
|
+
this.viewportBoundaryLeft = settings.viewportBoundaryLeft;
|
|
29416
|
+
}
|
|
29417
|
+
if (typeof settings.viewportBoundaryRight === 'number') {
|
|
29418
|
+
this.viewportBoundaryRight = settings.viewportBoundaryRight;
|
|
29419
|
+
}
|
|
29420
|
+
if (typeof settings.viewportBoundaryTop === 'number') {
|
|
29421
|
+
this.viewportBoundaryTop = settings.viewportBoundaryTop;
|
|
29422
|
+
}
|
|
29423
|
+
if (typeof settings.viewportBoundaryBottom === 'number') {
|
|
29424
|
+
this.viewportBoundaryBottom = settings.viewportBoundaryBottom;
|
|
29425
|
+
}
|
|
29426
|
+
if (settings.debugInfo) {
|
|
29427
|
+
this.debugInfo = { ...DEFAULT_DEBUG_INFO, ...settings.debugInfo };
|
|
29216
29428
|
}
|
|
29217
29429
|
}
|
|
29218
|
-
|
|
29430
|
+
emitSettings() {
|
|
29219
29431
|
const settings = {
|
|
29220
29432
|
scaleMin: this.scaleMin,
|
|
29221
29433
|
scaleMax: this.scaleMax,
|
|
@@ -29227,44 +29439,43 @@ const KritzelSettings = class {
|
|
|
29227
29439
|
viewportBoundaryBottom: this.viewportBoundaryBottom,
|
|
29228
29440
|
debugInfo: this.debugInfo,
|
|
29229
29441
|
};
|
|
29230
|
-
localStorage.setItem(this.storageKey, JSON.stringify(settings));
|
|
29231
29442
|
this.settingsChange.emit(settings);
|
|
29232
29443
|
}
|
|
29233
29444
|
handleScaleMinChange = (event) => {
|
|
29234
29445
|
this.scaleMin = event.detail;
|
|
29235
|
-
this.
|
|
29446
|
+
this.emitSettings();
|
|
29236
29447
|
};
|
|
29237
29448
|
handleScaleMaxChange = (event) => {
|
|
29238
29449
|
this.scaleMax = event.detail;
|
|
29239
|
-
this.
|
|
29450
|
+
this.emitSettings();
|
|
29240
29451
|
};
|
|
29241
29452
|
handleLockDrawingScaleChange = (event) => {
|
|
29242
29453
|
this.lockDrawingScale = event.detail;
|
|
29243
|
-
this.
|
|
29454
|
+
this.emitSettings();
|
|
29244
29455
|
};
|
|
29245
29456
|
handleThemeChange = (event) => {
|
|
29246
29457
|
this.currentTheme = event.detail ? 'dark' : 'light';
|
|
29247
|
-
this.
|
|
29458
|
+
this.emitSettings();
|
|
29248
29459
|
};
|
|
29249
29460
|
handleViewportBoundaryLeftChange = (event) => {
|
|
29250
29461
|
this.viewportBoundaryLeft = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_LEFT;
|
|
29251
|
-
this.
|
|
29462
|
+
this.emitSettings();
|
|
29252
29463
|
};
|
|
29253
29464
|
handleViewportBoundaryRightChange = (event) => {
|
|
29254
29465
|
this.viewportBoundaryRight = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_RIGHT;
|
|
29255
|
-
this.
|
|
29466
|
+
this.emitSettings();
|
|
29256
29467
|
};
|
|
29257
29468
|
handleViewportBoundaryTopChange = (event) => {
|
|
29258
29469
|
this.viewportBoundaryTop = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_TOP;
|
|
29259
|
-
this.
|
|
29470
|
+
this.emitSettings();
|
|
29260
29471
|
};
|
|
29261
29472
|
handleViewportBoundaryBottomChange = (event) => {
|
|
29262
29473
|
this.viewportBoundaryBottom = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_BOTTOM;
|
|
29263
|
-
this.
|
|
29474
|
+
this.emitSettings();
|
|
29264
29475
|
};
|
|
29265
29476
|
handleDebugInfoChange = (key) => (event) => {
|
|
29266
29477
|
this.debugInfo = { ...this.debugInfo, [key]: event.detail };
|
|
29267
|
-
this.
|
|
29478
|
+
this.emitSettings();
|
|
29268
29479
|
};
|
|
29269
29480
|
async open() {
|
|
29270
29481
|
this.isDialogOpen = true;
|
|
@@ -29318,8 +29529,13 @@ const KritzelSettings = class {
|
|
|
29318
29529
|
}
|
|
29319
29530
|
}
|
|
29320
29531
|
render() {
|
|
29321
|
-
return (h(Host, { key: '
|
|
29532
|
+
return (h(Host, { key: 'e86192a8ca49f8618d58ede4d04d321ea238d7d4' }, h("kritzel-dialog", { key: '23a47a8cd9281794bfd2aec7edd6a4ef4b931550', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '007c8a1c04bd0d692b55d88988b0f8874f9242a4', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
|
|
29322
29533
|
}
|
|
29534
|
+
static get watchers() { return {
|
|
29535
|
+
"settings": [{
|
|
29536
|
+
"onSettingsPropChange": 0
|
|
29537
|
+
}]
|
|
29538
|
+
}; }
|
|
29323
29539
|
};
|
|
29324
29540
|
KritzelSettings.style = kritzelSettingsCss();
|
|
29325
29541
|
|
|
@@ -29444,9 +29660,9 @@ const KritzelShareDialog = class {
|
|
|
29444
29660
|
this.dialogClosed.emit();
|
|
29445
29661
|
};
|
|
29446
29662
|
render() {
|
|
29447
|
-
return (h(Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, h("kritzel-dialog", { key: '
|
|
29663
|
+
return (h(Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, h("kritzel-dialog", { key: '0575ac82e19d07cf909556cae2ec433e0057fd5b', dialogTitle: "Share Workspace", size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: 'c51d207e31255f45724103bfecbe858f13a721e6', class: "share-content" }, h("div", { key: 'ca6cb7721b9ba834c133b2cb953b208475e34fb5', class: "share-section" }, h("div", { key: '2c76845c903cc1c18cc26b9111d608e732ed12a5', class: "share-row" }, h("div", { key: '7700533f54372bc81d8d795414318a6bf0e93c47', class: "share-label-group" }, h("label", { key: 'a1d80009cb09cfe35bce35ce1151bf0754b052c1', class: "share-label" }, "Link sharing"), h("p", { key: '10c1963e95e658c7fb86174f1dba7565ce40d5a6', class: "share-description" }, this.internalIsPublic
|
|
29448
29664
|
? 'Anyone with the link can access this workspace.'
|
|
29449
|
-
: 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: '
|
|
29665
|
+
: 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: 'ec62a5ece12be0cea18a16c5d41db0a992309174', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (h("div", { key: '5e826d4c8c37792ba3a74a0189ad313a8ab482e2', class: "share-section" }, h("div", { key: 'f8e35cda32cb34ab21f56335aa27503fd6fe98c4', class: "share-url-container" }, h("input", { key: '47feb20a1843e1d3d8f7d146d71574b187002e8d', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '052f56f35d057430cbc8fd03da5bef574b173791', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, h("kritzel-icon", { key: '4e1de478f837a352185be2a06e15796dc1fb2f5e', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
|
|
29450
29666
|
}
|
|
29451
29667
|
static get watchers() { return {
|
|
29452
29668
|
"isPublic": [{
|