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,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-CFnj_FXt.js');
|
|
4
|
-
var workspace_migrations = require('./workspace.migrations-
|
|
4
|
+
var workspace_migrations = require('./workspace.migrations-D5sPPbQN.js');
|
|
5
5
|
var Y = require('yjs');
|
|
6
6
|
require('y-indexeddb');
|
|
7
7
|
require('y-websocket');
|
|
@@ -892,7 +892,7 @@ class KritzelToolConfigHelper {
|
|
|
892
892
|
}
|
|
893
893
|
}
|
|
894
894
|
|
|
895
|
-
const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:
|
|
895
|
+
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}`;
|
|
896
896
|
|
|
897
897
|
const KritzelControls = class {
|
|
898
898
|
constructor(hostRef) {
|
|
@@ -1204,7 +1204,7 @@ const KritzelCurrentUserDialog = class {
|
|
|
1204
1204
|
}
|
|
1205
1205
|
render() {
|
|
1206
1206
|
const displayName = this.getDisplayName();
|
|
1207
|
-
return (index.h(index.Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, index.h("kritzel-dialog", { key: '
|
|
1207
|
+
return (index.h(index.Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, index.h("kritzel-dialog", { key: 'cd3daa7abd53c10852d63a2fe53d919414cd8904', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: '94d0a691ede73135e6cf4ef144c13e52e410ffbe', class: "user-info" }, index.h("kritzel-avatar", { key: 'e57592d2f3663b593534055be5aae1b224fa8906', user: this.user, size: 80 }), displayName && index.h("div", { key: '237db2d0608ee49ea70e5282b61a59077f0f4595', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: 'd821e8171530b92ce6f1781c1145b611d3c533d0', class: "user-email" }, this.user.email)))));
|
|
1208
1208
|
}
|
|
1209
1209
|
};
|
|
1210
1210
|
KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
|
|
@@ -1365,7 +1365,7 @@ class KritzelHTMLHelper {
|
|
|
1365
1365
|
}
|
|
1366
1366
|
}
|
|
1367
1367
|
|
|
1368
|
-
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}`;
|
|
1368
|
+
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}`;
|
|
1369
1369
|
|
|
1370
1370
|
const KritzelDialog = class {
|
|
1371
1371
|
constructor(hostRef) {
|
|
@@ -1392,8 +1392,12 @@ const KritzelDialog = class {
|
|
|
1392
1392
|
size = 'medium';
|
|
1393
1393
|
/** Whether to automatically go fullscreen on mobile viewports */
|
|
1394
1394
|
fullscreenOnMobile = true;
|
|
1395
|
+
/** Constrain the dialog to its nearest editor/container ancestor instead of the viewport. */
|
|
1396
|
+
contained = false;
|
|
1395
1397
|
isAnimating = false;
|
|
1396
1398
|
mobileLockedHeight = null;
|
|
1399
|
+
containerRect = null;
|
|
1400
|
+
containerBorderRadius = null;
|
|
1397
1401
|
/** Emitted when the dialog opens */
|
|
1398
1402
|
dialogOpen;
|
|
1399
1403
|
/** Emitted when the dialog closes */
|
|
@@ -1401,6 +1405,9 @@ const KritzelDialog = class {
|
|
|
1401
1405
|
previousOverflow = '';
|
|
1402
1406
|
previousActiveElement = null;
|
|
1403
1407
|
visualViewportListenersAttached = false;
|
|
1408
|
+
containerElement = null;
|
|
1409
|
+
containerResizeObserver = null;
|
|
1410
|
+
containerTrackingFrame = null;
|
|
1404
1411
|
handleIsOpenChange(newValue) {
|
|
1405
1412
|
if (newValue) {
|
|
1406
1413
|
this.openDialog();
|
|
@@ -1450,13 +1457,19 @@ const KritzelDialog = class {
|
|
|
1450
1457
|
}
|
|
1451
1458
|
disconnectedCallback() {
|
|
1452
1459
|
this.removeVisualViewportListeners();
|
|
1460
|
+
this.stopContainerTracking();
|
|
1453
1461
|
this.restoreBodyScroll();
|
|
1454
1462
|
}
|
|
1455
1463
|
openDialog() {
|
|
1456
1464
|
this.isAnimating = true;
|
|
1457
1465
|
this.previousActiveElement = document.activeElement;
|
|
1458
|
-
this.
|
|
1459
|
-
|
|
1466
|
+
if (this.contained) {
|
|
1467
|
+
this.startContainerTracking();
|
|
1468
|
+
}
|
|
1469
|
+
else {
|
|
1470
|
+
this.lockBodyScroll();
|
|
1471
|
+
this.addVisualViewportListeners();
|
|
1472
|
+
}
|
|
1460
1473
|
this.lockMobileViewportHeight();
|
|
1461
1474
|
this.dialogOpen.emit();
|
|
1462
1475
|
if (this.autoFocus) {
|
|
@@ -1471,9 +1484,106 @@ const KritzelDialog = class {
|
|
|
1471
1484
|
closeDialog() {
|
|
1472
1485
|
this.restoreBodyScroll();
|
|
1473
1486
|
this.removeVisualViewportListeners();
|
|
1487
|
+
this.stopContainerTracking();
|
|
1474
1488
|
this.mobileLockedHeight = null;
|
|
1475
1489
|
this.returnFocusToPreviousElement();
|
|
1476
1490
|
}
|
|
1491
|
+
findContainerElement() {
|
|
1492
|
+
// Walk up the composed DOM (crossing shadow roots) and return the first
|
|
1493
|
+
// ancestor that opts into containing dialogs. We accept either an explicit
|
|
1494
|
+
// [data-kritzel-dialog-container] marker or the kritzel-editor host so any
|
|
1495
|
+
// consumer can opt in without modifying the editor itself.
|
|
1496
|
+
let node = this.host;
|
|
1497
|
+
while (node) {
|
|
1498
|
+
if (node instanceof HTMLElement) {
|
|
1499
|
+
if (node.hasAttribute('data-kritzel-dialog-container') || node.tagName === 'KRITZEL-EDITOR') {
|
|
1500
|
+
return node;
|
|
1501
|
+
}
|
|
1502
|
+
}
|
|
1503
|
+
const parent = node.parentNode;
|
|
1504
|
+
if (parent) {
|
|
1505
|
+
node = parent;
|
|
1506
|
+
}
|
|
1507
|
+
else if (node instanceof ShadowRoot) {
|
|
1508
|
+
node = node.host;
|
|
1509
|
+
}
|
|
1510
|
+
else {
|
|
1511
|
+
node = null;
|
|
1512
|
+
}
|
|
1513
|
+
}
|
|
1514
|
+
return null;
|
|
1515
|
+
}
|
|
1516
|
+
startContainerTracking() {
|
|
1517
|
+
this.containerElement = this.findContainerElement();
|
|
1518
|
+
if (!this.containerElement) {
|
|
1519
|
+
// No container found — fall back to viewport behavior.
|
|
1520
|
+
this.containerRect = null;
|
|
1521
|
+
return;
|
|
1522
|
+
}
|
|
1523
|
+
this.updateContainerRect();
|
|
1524
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
1525
|
+
this.containerResizeObserver = new ResizeObserver(() => this.updateContainerRect());
|
|
1526
|
+
this.containerResizeObserver.observe(this.containerElement);
|
|
1527
|
+
}
|
|
1528
|
+
window.addEventListener('resize', this.handleContainerTrackingEvent, { passive: true });
|
|
1529
|
+
window.addEventListener('scroll', this.handleContainerTrackingEvent, { capture: true, passive: true });
|
|
1530
|
+
}
|
|
1531
|
+
stopContainerTracking() {
|
|
1532
|
+
if (this.containerResizeObserver) {
|
|
1533
|
+
this.containerResizeObserver.disconnect();
|
|
1534
|
+
this.containerResizeObserver = null;
|
|
1535
|
+
}
|
|
1536
|
+
window.removeEventListener('resize', this.handleContainerTrackingEvent);
|
|
1537
|
+
window.removeEventListener('scroll', this.handleContainerTrackingEvent, { capture: true });
|
|
1538
|
+
if (this.containerTrackingFrame !== null) {
|
|
1539
|
+
cancelAnimationFrame(this.containerTrackingFrame);
|
|
1540
|
+
this.containerTrackingFrame = null;
|
|
1541
|
+
}
|
|
1542
|
+
this.containerElement = null;
|
|
1543
|
+
this.containerRect = null;
|
|
1544
|
+
this.containerBorderRadius = null;
|
|
1545
|
+
}
|
|
1546
|
+
handleContainerTrackingEvent = () => {
|
|
1547
|
+
if (this.containerTrackingFrame !== null)
|
|
1548
|
+
return;
|
|
1549
|
+
this.containerTrackingFrame = requestAnimationFrame(() => {
|
|
1550
|
+
this.containerTrackingFrame = null;
|
|
1551
|
+
this.updateContainerRect();
|
|
1552
|
+
});
|
|
1553
|
+
};
|
|
1554
|
+
updateContainerRect() {
|
|
1555
|
+
if (!this.containerElement)
|
|
1556
|
+
return;
|
|
1557
|
+
const rect = this.containerElement.getBoundingClientRect();
|
|
1558
|
+
const next = { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
|
|
1559
|
+
const prev = this.containerRect;
|
|
1560
|
+
if (!prev || prev.top !== next.top || prev.left !== next.left || prev.width !== next.width || prev.height !== next.height) {
|
|
1561
|
+
this.containerRect = next;
|
|
1562
|
+
}
|
|
1563
|
+
// Look for the nearest visually-rounded ancestor (the container itself or
|
|
1564
|
+
// any ancestor up to the document) so the backdrop matches wrappers that
|
|
1565
|
+
// round their corners around the editor.
|
|
1566
|
+
const radius = this.findVisualBorderRadius(this.containerElement);
|
|
1567
|
+
if (this.containerBorderRadius !== radius) {
|
|
1568
|
+
this.containerBorderRadius = radius;
|
|
1569
|
+
}
|
|
1570
|
+
}
|
|
1571
|
+
findVisualBorderRadius(start) {
|
|
1572
|
+
let node = start;
|
|
1573
|
+
while (node && node !== document.body && node !== document.documentElement) {
|
|
1574
|
+
const computed = window.getComputedStyle(node);
|
|
1575
|
+
const tl = computed.borderTopLeftRadius;
|
|
1576
|
+
const tr = computed.borderTopRightRadius;
|
|
1577
|
+
const br = computed.borderBottomRightRadius;
|
|
1578
|
+
const bl = computed.borderBottomLeftRadius;
|
|
1579
|
+
const isZero = (v) => !v || v === '0px' || v === '0%';
|
|
1580
|
+
if (!(isZero(tl) && isZero(tr) && isZero(br) && isZero(bl))) {
|
|
1581
|
+
return `${tl} ${tr} ${br} ${bl}`;
|
|
1582
|
+
}
|
|
1583
|
+
node = node.parentElement;
|
|
1584
|
+
}
|
|
1585
|
+
return null;
|
|
1586
|
+
}
|
|
1477
1587
|
emitClose(reason) {
|
|
1478
1588
|
this.dialogClose.emit({ reason });
|
|
1479
1589
|
}
|
|
@@ -1482,6 +1592,12 @@ const KritzelDialog = class {
|
|
|
1482
1592
|
document.body.style.overflow = 'hidden';
|
|
1483
1593
|
}
|
|
1484
1594
|
lockMobileViewportHeight() {
|
|
1595
|
+
// Skip mobile viewport height locking when contained — the dialog is sized
|
|
1596
|
+
// by its wrapper, not the viewport.
|
|
1597
|
+
if (this.contained) {
|
|
1598
|
+
this.mobileLockedHeight = null;
|
|
1599
|
+
return;
|
|
1600
|
+
}
|
|
1485
1601
|
// Only lock height on mobile when fullscreenOnMobile is enabled.
|
|
1486
1602
|
// Use the smaller dimension so landscape phones (wide but short) are also detected.
|
|
1487
1603
|
const viewportWidth = this.getViewportWidth();
|
|
@@ -1616,15 +1732,73 @@ const KritzelDialog = class {
|
|
|
1616
1732
|
return null;
|
|
1617
1733
|
return (index.h("div", { class: "dialog-footer" }, index.h("slot", { name: "footer" })));
|
|
1618
1734
|
}
|
|
1735
|
+
getBackdropStyle() {
|
|
1736
|
+
if (!this.contained || !this.containerRect)
|
|
1737
|
+
return undefined;
|
|
1738
|
+
const { top, left, width, height } = this.containerRect;
|
|
1739
|
+
const style = {
|
|
1740
|
+
top: `${top}px`,
|
|
1741
|
+
left: `${left}px`,
|
|
1742
|
+
right: 'auto',
|
|
1743
|
+
bottom: 'auto',
|
|
1744
|
+
width: `${width}px`,
|
|
1745
|
+
height: `${height}px`,
|
|
1746
|
+
};
|
|
1747
|
+
if (this.containerBorderRadius) {
|
|
1748
|
+
style.borderRadius = this.containerBorderRadius;
|
|
1749
|
+
// Ensure rounded corners actually clip the inner dialog content.
|
|
1750
|
+
style.overflow = 'hidden';
|
|
1751
|
+
}
|
|
1752
|
+
return style;
|
|
1753
|
+
}
|
|
1754
|
+
getDialogContentStyle() {
|
|
1755
|
+
const style = {};
|
|
1756
|
+
// In contained mode, cap the dialog dimensions to the container so the
|
|
1757
|
+
// declared widths/heights of size variants cannot overflow the wrapper.
|
|
1758
|
+
if (this.contained && this.containerRect) {
|
|
1759
|
+
const { width, height } = this.containerRect;
|
|
1760
|
+
if (this.isContainerMobile()) {
|
|
1761
|
+
// Mobile-sized container: behave like fullscreen-on-mobile but scoped
|
|
1762
|
+
// to the container instead of the viewport (works in any orientation).
|
|
1763
|
+
style.width = `${width}px`;
|
|
1764
|
+
style.height = `${height}px`;
|
|
1765
|
+
style.maxWidth = `${width}px`;
|
|
1766
|
+
style.maxHeight = `${height}px`;
|
|
1767
|
+
style.borderRadius = '0';
|
|
1768
|
+
}
|
|
1769
|
+
else {
|
|
1770
|
+
// Leave a small margin so the dialog visibly sits within the container.
|
|
1771
|
+
const maxWidth = Math.max(0, width - 32);
|
|
1772
|
+
const maxHeight = Math.max(0, height - 32);
|
|
1773
|
+
style.maxWidth = `${maxWidth}px`;
|
|
1774
|
+
style.maxHeight = `${maxHeight}px`;
|
|
1775
|
+
}
|
|
1776
|
+
}
|
|
1777
|
+
if (this.mobileLockedHeight) {
|
|
1778
|
+
style.height = this.mobileLockedHeight;
|
|
1779
|
+
style.maxHeight = this.mobileLockedHeight;
|
|
1780
|
+
}
|
|
1781
|
+
return Object.keys(style).length > 0 ? style : undefined;
|
|
1782
|
+
}
|
|
1783
|
+
isContainerMobile() {
|
|
1784
|
+
if (!this.fullscreenOnMobile || !this.containerRect)
|
|
1785
|
+
return false;
|
|
1786
|
+
// Match the existing viewport media-query threshold: container is "mobile"
|
|
1787
|
+
// when its smaller dimension is <= 576px. This handles both portrait and
|
|
1788
|
+
// landscape wrappers symmetrically.
|
|
1789
|
+
return Math.min(this.containerRect.width, this.containerRect.height) <= 576;
|
|
1790
|
+
}
|
|
1619
1791
|
render() {
|
|
1620
1792
|
if (!this.isOpen)
|
|
1621
1793
|
return null;
|
|
1622
|
-
|
|
1794
|
+
const containerFullscreen = this.contained && this.isContainerMobile();
|
|
1795
|
+
return (index.h(index.Host, null, index.h("div", { class: { backdrop: true, 'is-animating': this.isAnimating, 'contained-fullscreen': containerFullscreen }, style: this.getBackdropStyle(), onClick: this.handleBackdropClick }, index.h("div", { class: {
|
|
1623
1796
|
'dialog-content': true,
|
|
1624
1797
|
'is-animating': this.isAnimating,
|
|
1625
1798
|
[`size-${this.size}`]: true,
|
|
1626
1799
|
'fullscreen-on-mobile': this.fullscreenOnMobile,
|
|
1627
|
-
|
|
1800
|
+
'contained-fullscreen': containerFullscreen,
|
|
1801
|
+
}, style: this.getDialogContentStyle(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogTitle ? 'dialog-title' : undefined, tabIndex: -1, onClick: this.handleContentClick }, this.renderHeader(), index.h("div", { class: "dialog-body" }, index.h("slot", null)), this.renderFooter()))));
|
|
1628
1802
|
}
|
|
1629
1803
|
static get watchers() { return {
|
|
1630
1804
|
"isOpen": [{
|
|
@@ -1917,7 +2091,7 @@ const DEFAULT_SYNC_CONFIG = {
|
|
|
1917
2091
|
],
|
|
1918
2092
|
};
|
|
1919
2093
|
|
|
1920
|
-
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}`;
|
|
2094
|
+
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}`;
|
|
1921
2095
|
|
|
1922
2096
|
const KritzelEditor = class {
|
|
1923
2097
|
constructor(hostRef) {
|
|
@@ -2194,6 +2368,9 @@ const KritzelEditor = class {
|
|
|
2194
2368
|
}
|
|
2195
2369
|
onCurrentThemeChange() {
|
|
2196
2370
|
setTimeout(() => this.setOsSpecificCssVariables(), 0);
|
|
2371
|
+
if (this.engineRef) {
|
|
2372
|
+
this.engineRef.saveSettings(this.currentSettingsConfig);
|
|
2373
|
+
}
|
|
2197
2374
|
}
|
|
2198
2375
|
onTouchStart(event) {
|
|
2199
2376
|
if (event.cancelable) {
|
|
@@ -2470,6 +2647,9 @@ const KritzelEditor = class {
|
|
|
2470
2647
|
this.viewportBoundaryBottom = event.detail.viewportBoundaryBottom ?? Infinity;
|
|
2471
2648
|
this.debugInfo = event.detail.debugInfo;
|
|
2472
2649
|
this.themeChange.emit(event.detail.theme);
|
|
2650
|
+
if (this.engineRef) {
|
|
2651
|
+
this.engineRef.saveSettings(event.detail);
|
|
2652
|
+
}
|
|
2473
2653
|
}
|
|
2474
2654
|
get moreMenuItems() {
|
|
2475
2655
|
return [
|
|
@@ -2592,6 +2772,19 @@ const KritzelEditor = class {
|
|
|
2592
2772
|
async loadShortcuts() {
|
|
2593
2773
|
this.shortcuts = await this.engineRef.getDisplayableShortcuts();
|
|
2594
2774
|
}
|
|
2775
|
+
get currentSettingsConfig() {
|
|
2776
|
+
return {
|
|
2777
|
+
scaleMin: this.scaleMin,
|
|
2778
|
+
scaleMax: this.scaleMax,
|
|
2779
|
+
lockDrawingScale: this.lockDrawingScale,
|
|
2780
|
+
theme: this.currentTheme,
|
|
2781
|
+
viewportBoundaryLeft: this.viewportBoundaryLeft,
|
|
2782
|
+
viewportBoundaryRight: this.viewportBoundaryRight,
|
|
2783
|
+
viewportBoundaryTop: this.viewportBoundaryTop,
|
|
2784
|
+
viewportBoundaryBottom: this.viewportBoundaryBottom,
|
|
2785
|
+
debugInfo: this.debugInfo,
|
|
2786
|
+
};
|
|
2787
|
+
}
|
|
2595
2788
|
getContentObjects(objects) {
|
|
2596
2789
|
return objects.filter(obj => !(obj instanceof workspace_migrations.KritzelSelectionGroup) && !(obj instanceof workspace_migrations.KritzelSelectionBox));
|
|
2597
2790
|
}
|
|
@@ -2638,27 +2831,27 @@ const KritzelEditor = class {
|
|
|
2638
2831
|
const isLoggedIn = this.isLoggedIn;
|
|
2639
2832
|
const shouldShowCurrentUser = isLoggedIn;
|
|
2640
2833
|
const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
|
|
2641
|
-
return (index.h(index.Host, { key: '
|
|
2834
|
+
return (index.h(index.Host, { key: 'e259a79d0fb8e39be29f338c78b3b686c82790ff' }, index.h("div", { key: '2aa5768df3fe0442ff4b032c1f3defa3e2414d4b', class: "top-left-buttons" }, index.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) }), index.h("kritzel-back-to-content", { key: 'cdbf4c27695a5daefe9548a642a9dcd0aff7a77b', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'e0ac833bd839c04d90c8788663ea0afd6aa35c39', ref: el => {
|
|
2642
2835
|
if (el) {
|
|
2643
2836
|
this.engineRef = el;
|
|
2644
2837
|
}
|
|
2645
|
-
}, 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) }), index.h("kritzel-controls", { key: '
|
|
2838
|
+
}, 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) }), index.h("kritzel-controls", { key: '396ed985b464306a845a4ef4f54782ccc42bd344', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
|
|
2646
2839
|
if (el) {
|
|
2647
2840
|
this.controlsRef = el;
|
|
2648
2841
|
}
|
|
2649
|
-
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '
|
|
2842
|
+
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '67fdbff9c0259c02bd02bc1342856bc4bdac6d9f', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '08e1bbfc902e8fe24395babef675654d84bc2dfc', ref: el => {
|
|
2650
2843
|
if (el) {
|
|
2651
2844
|
this.settingsRef = el;
|
|
2652
2845
|
}
|
|
2653
|
-
}, shortcuts: this.shortcuts,
|
|
2846
|
+
}, shortcuts: this.shortcuts, settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'e3250aaecf428bf763aefea11167b72587cee52d', ref: el => {
|
|
2654
2847
|
if (el) {
|
|
2655
2848
|
this.exportRef = el;
|
|
2656
2849
|
}
|
|
2657
|
-
}, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '
|
|
2850
|
+
}, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '6ba93cfeb8eb28d6e7a7c0d8f6813300bd14bd2b', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '4efef69fc7c1b443f6e12fdcda5ed8d26dbebcd3', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: '54208a3e130fe41f7429516d52f166b08de7e24c', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: 'b5a6f5e0e5465655d109ee9047cba97200f94639', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), index.h("kritzel-share-dialog", { key: 'ee32c5f54395db794ab77ecd0f2e9657db6765c0', ref: el => {
|
|
2658
2851
|
if (el) {
|
|
2659
2852
|
this.shareDialogRef = el;
|
|
2660
2853
|
}
|
|
2661
|
-
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '
|
|
2854
|
+
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'b24a52c160d828218d949ac1d8b9edd9b3c00535', ref: el => {
|
|
2662
2855
|
if (el) {
|
|
2663
2856
|
this.loginDialogRef = el;
|
|
2664
2857
|
}
|
|
@@ -27083,6 +27276,31 @@ const KritzelEngine = class {
|
|
|
27083
27276
|
this._isAssetStorageInitialized = false;
|
|
27084
27277
|
await this.initializeSyncAndWorkspace();
|
|
27085
27278
|
}
|
|
27279
|
+
/**
|
|
27280
|
+
* Persists the given settings object to localStorage using the namespaced storage key.
|
|
27281
|
+
* @param settings - The settings configuration to persist.
|
|
27282
|
+
*/
|
|
27283
|
+
async saveSettings(settings) {
|
|
27284
|
+
const key = this.core.getStorageKey('kritzel-settings');
|
|
27285
|
+
localStorage.setItem(key, JSON.stringify(settings));
|
|
27286
|
+
}
|
|
27287
|
+
/**
|
|
27288
|
+
* Loads the persisted settings object from localStorage.
|
|
27289
|
+
* @returns The stored settings, or null if nothing is stored or the value is invalid.
|
|
27290
|
+
*/
|
|
27291
|
+
async loadSettings() {
|
|
27292
|
+
const key = this.core.getStorageKey('kritzel-settings');
|
|
27293
|
+
const stored = localStorage.getItem(key);
|
|
27294
|
+
if (!stored) {
|
|
27295
|
+
return null;
|
|
27296
|
+
}
|
|
27297
|
+
try {
|
|
27298
|
+
return JSON.parse(stored);
|
|
27299
|
+
}
|
|
27300
|
+
catch {
|
|
27301
|
+
return null;
|
|
27302
|
+
}
|
|
27303
|
+
}
|
|
27086
27304
|
core;
|
|
27087
27305
|
viewport;
|
|
27088
27306
|
contextMenuHandler;
|
|
@@ -27977,7 +28195,7 @@ const KritzelExport = class {
|
|
|
27977
28195
|
return (index.h("div", { class: "export-tab-content" }, index.h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
|
|
27978
28196
|
}
|
|
27979
28197
|
render() {
|
|
27980
|
-
return (index.h(index.Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, index.h("kritzel-dialog", { key: '
|
|
28198
|
+
return (index.h(index.Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, index.h("kritzel-dialog", { key: 'f80cbe3fa709ed7e046303034b7345ca1f94bc48', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, contained: true, onDialogClose: this.closeDialog }, index.h("div", { key: 'e7968807c2b67ebfc800cb1694b4e34af245ffba', class: "export-content" }, index.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(), index.h("button", { key: '3489affca39a901c2ef05a0698cdf51c0a7f6d1a', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
|
|
27981
28199
|
}
|
|
27982
28200
|
};
|
|
27983
28201
|
KritzelExport.style = kritzelExportCss();
|
|
@@ -28274,7 +28492,7 @@ const KritzelLoginDialog = class {
|
|
|
28274
28492
|
this.dialogClosed.emit();
|
|
28275
28493
|
};
|
|
28276
28494
|
render() {
|
|
28277
|
-
return (index.h(index.Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, index.h("kritzel-dialog", { key: '
|
|
28495
|
+
return (index.h(index.Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, index.h("kritzel-dialog", { key: '54844ffa772a211515c1ef3e6834ec45f7f3d035', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, index.h("div", { key: 'd9b981b6904c58bc39173ae37ee5c4c0ee329005', class: "login-content" }, this.subtitle && (index.h("p", { key: 'd4d200060507d2b8b755796d8313acdfc7e2f587', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: '3dc1e3c070e62d026eb16ceb48eb63c94bc2bed0', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
|
|
28278
28496
|
'provider-button': true,
|
|
28279
28497
|
'is-loading': this.loadingProvider === provider.name,
|
|
28280
28498
|
'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
|
|
@@ -29145,11 +29363,10 @@ const KritzelPortal = class {
|
|
|
29145
29363
|
* This file is auto-generated by the version bump scripts.
|
|
29146
29364
|
* Do not modify manually.
|
|
29147
29365
|
*/
|
|
29148
|
-
const KRITZEL_VERSION = '0.2.
|
|
29366
|
+
const KRITZEL_VERSION = '0.2.11';
|
|
29149
29367
|
|
|
29150
29368
|
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)}`;
|
|
29151
29369
|
|
|
29152
|
-
const SETTINGS_STORAGE_KEY = 'kritzel-settings';
|
|
29153
29370
|
const DEFAULT_SCALE_MIN = 0.0001;
|
|
29154
29371
|
const DEFAULT_SCALE_MAX = 1000;
|
|
29155
29372
|
const DEFAULT_LOCK_DRAWING_SCALE = true;
|
|
@@ -29178,8 +29395,13 @@ const KritzelSettings = class {
|
|
|
29178
29395
|
get host() { return index.getElement(this); }
|
|
29179
29396
|
/** Keyboard shortcuts to display in the settings dialog */
|
|
29180
29397
|
shortcuts = [];
|
|
29181
|
-
/**
|
|
29182
|
-
|
|
29398
|
+
/** Current settings values. Used to initialize and sync the component's internal state. */
|
|
29399
|
+
settings;
|
|
29400
|
+
onSettingsPropChange(newSettings) {
|
|
29401
|
+
if (newSettings) {
|
|
29402
|
+
this.applySettings(newSettings);
|
|
29403
|
+
}
|
|
29404
|
+
}
|
|
29183
29405
|
isDialogOpen = false;
|
|
29184
29406
|
selectedCategoryId = SETTINGS_CATEGORIES[0].id;
|
|
29185
29407
|
scaleMin = DEFAULT_SCALE_MIN;
|
|
@@ -29194,50 +29416,40 @@ const KritzelSettings = class {
|
|
|
29194
29416
|
/** Emitted when settings change */
|
|
29195
29417
|
settingsChange;
|
|
29196
29418
|
componentWillLoad() {
|
|
29197
|
-
this.
|
|
29198
|
-
|
|
29199
|
-
|
|
29200
|
-
return this.editorId ? `${SETTINGS_STORAGE_KEY}-${this.editorId}` : SETTINGS_STORAGE_KEY;
|
|
29419
|
+
if (this.settings) {
|
|
29420
|
+
this.applySettings(this.settings);
|
|
29421
|
+
}
|
|
29201
29422
|
}
|
|
29202
|
-
|
|
29203
|
-
|
|
29204
|
-
|
|
29205
|
-
|
|
29206
|
-
|
|
29207
|
-
|
|
29208
|
-
|
|
29209
|
-
|
|
29210
|
-
|
|
29211
|
-
|
|
29212
|
-
|
|
29213
|
-
|
|
29214
|
-
|
|
29215
|
-
|
|
29216
|
-
|
|
29217
|
-
|
|
29218
|
-
|
|
29219
|
-
|
|
29220
|
-
|
|
29221
|
-
|
|
29222
|
-
|
|
29223
|
-
|
|
29224
|
-
|
|
29225
|
-
|
|
29226
|
-
|
|
29227
|
-
|
|
29228
|
-
|
|
29229
|
-
this.viewportBoundaryBottom = parsed.viewportBoundaryBottom;
|
|
29230
|
-
}
|
|
29231
|
-
if (parsed.debugInfo) {
|
|
29232
|
-
this.debugInfo = { ...DEFAULT_DEBUG_INFO, ...parsed.debugInfo };
|
|
29233
|
-
}
|
|
29234
|
-
}
|
|
29235
|
-
catch {
|
|
29236
|
-
// Invalid JSON, use defaults
|
|
29237
|
-
}
|
|
29423
|
+
applySettings(settings) {
|
|
29424
|
+
if (typeof settings.scaleMin === 'number') {
|
|
29425
|
+
this.scaleMin = settings.scaleMin;
|
|
29426
|
+
}
|
|
29427
|
+
if (typeof settings.scaleMax === 'number') {
|
|
29428
|
+
this.scaleMax = settings.scaleMax;
|
|
29429
|
+
}
|
|
29430
|
+
if (typeof settings.lockDrawingScale === 'boolean') {
|
|
29431
|
+
this.lockDrawingScale = settings.lockDrawingScale;
|
|
29432
|
+
}
|
|
29433
|
+
if (settings.theme === 'light' || settings.theme === 'dark') {
|
|
29434
|
+
this.currentTheme = settings.theme;
|
|
29435
|
+
}
|
|
29436
|
+
if (typeof settings.viewportBoundaryLeft === 'number') {
|
|
29437
|
+
this.viewportBoundaryLeft = settings.viewportBoundaryLeft;
|
|
29438
|
+
}
|
|
29439
|
+
if (typeof settings.viewportBoundaryRight === 'number') {
|
|
29440
|
+
this.viewportBoundaryRight = settings.viewportBoundaryRight;
|
|
29441
|
+
}
|
|
29442
|
+
if (typeof settings.viewportBoundaryTop === 'number') {
|
|
29443
|
+
this.viewportBoundaryTop = settings.viewportBoundaryTop;
|
|
29444
|
+
}
|
|
29445
|
+
if (typeof settings.viewportBoundaryBottom === 'number') {
|
|
29446
|
+
this.viewportBoundaryBottom = settings.viewportBoundaryBottom;
|
|
29447
|
+
}
|
|
29448
|
+
if (settings.debugInfo) {
|
|
29449
|
+
this.debugInfo = { ...DEFAULT_DEBUG_INFO, ...settings.debugInfo };
|
|
29238
29450
|
}
|
|
29239
29451
|
}
|
|
29240
|
-
|
|
29452
|
+
emitSettings() {
|
|
29241
29453
|
const settings = {
|
|
29242
29454
|
scaleMin: this.scaleMin,
|
|
29243
29455
|
scaleMax: this.scaleMax,
|
|
@@ -29249,44 +29461,43 @@ const KritzelSettings = class {
|
|
|
29249
29461
|
viewportBoundaryBottom: this.viewportBoundaryBottom,
|
|
29250
29462
|
debugInfo: this.debugInfo,
|
|
29251
29463
|
};
|
|
29252
|
-
localStorage.setItem(this.storageKey, JSON.stringify(settings));
|
|
29253
29464
|
this.settingsChange.emit(settings);
|
|
29254
29465
|
}
|
|
29255
29466
|
handleScaleMinChange = (event) => {
|
|
29256
29467
|
this.scaleMin = event.detail;
|
|
29257
|
-
this.
|
|
29468
|
+
this.emitSettings();
|
|
29258
29469
|
};
|
|
29259
29470
|
handleScaleMaxChange = (event) => {
|
|
29260
29471
|
this.scaleMax = event.detail;
|
|
29261
|
-
this.
|
|
29472
|
+
this.emitSettings();
|
|
29262
29473
|
};
|
|
29263
29474
|
handleLockDrawingScaleChange = (event) => {
|
|
29264
29475
|
this.lockDrawingScale = event.detail;
|
|
29265
|
-
this.
|
|
29476
|
+
this.emitSettings();
|
|
29266
29477
|
};
|
|
29267
29478
|
handleThemeChange = (event) => {
|
|
29268
29479
|
this.currentTheme = event.detail ? 'dark' : 'light';
|
|
29269
|
-
this.
|
|
29480
|
+
this.emitSettings();
|
|
29270
29481
|
};
|
|
29271
29482
|
handleViewportBoundaryLeftChange = (event) => {
|
|
29272
29483
|
this.viewportBoundaryLeft = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_LEFT;
|
|
29273
|
-
this.
|
|
29484
|
+
this.emitSettings();
|
|
29274
29485
|
};
|
|
29275
29486
|
handleViewportBoundaryRightChange = (event) => {
|
|
29276
29487
|
this.viewportBoundaryRight = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_RIGHT;
|
|
29277
|
-
this.
|
|
29488
|
+
this.emitSettings();
|
|
29278
29489
|
};
|
|
29279
29490
|
handleViewportBoundaryTopChange = (event) => {
|
|
29280
29491
|
this.viewportBoundaryTop = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_TOP;
|
|
29281
|
-
this.
|
|
29492
|
+
this.emitSettings();
|
|
29282
29493
|
};
|
|
29283
29494
|
handleViewportBoundaryBottomChange = (event) => {
|
|
29284
29495
|
this.viewportBoundaryBottom = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_BOTTOM;
|
|
29285
|
-
this.
|
|
29496
|
+
this.emitSettings();
|
|
29286
29497
|
};
|
|
29287
29498
|
handleDebugInfoChange = (key) => (event) => {
|
|
29288
29499
|
this.debugInfo = { ...this.debugInfo, [key]: event.detail };
|
|
29289
|
-
this.
|
|
29500
|
+
this.emitSettings();
|
|
29290
29501
|
};
|
|
29291
29502
|
async open() {
|
|
29292
29503
|
this.isDialogOpen = true;
|
|
@@ -29340,8 +29551,13 @@ const KritzelSettings = class {
|
|
|
29340
29551
|
}
|
|
29341
29552
|
}
|
|
29342
29553
|
render() {
|
|
29343
|
-
return (index.h(index.Host, { key: '
|
|
29554
|
+
return (index.h(index.Host, { key: 'e86192a8ca49f8618d58ede4d04d321ea238d7d4' }, index.h("kritzel-dialog", { key: '23a47a8cd9281794bfd2aec7edd6a4ef4b931550', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", contained: true, onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '007c8a1c04bd0d692b55d88988b0f8874f9242a4', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
|
|
29344
29555
|
}
|
|
29556
|
+
static get watchers() { return {
|
|
29557
|
+
"settings": [{
|
|
29558
|
+
"onSettingsPropChange": 0
|
|
29559
|
+
}]
|
|
29560
|
+
}; }
|
|
29345
29561
|
};
|
|
29346
29562
|
KritzelSettings.style = kritzelSettingsCss();
|
|
29347
29563
|
|
|
@@ -29466,9 +29682,9 @@ const KritzelShareDialog = class {
|
|
|
29466
29682
|
this.dialogClosed.emit();
|
|
29467
29683
|
};
|
|
29468
29684
|
render() {
|
|
29469
|
-
return (index.h(index.Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, index.h("kritzel-dialog", { key: '
|
|
29685
|
+
return (index.h(index.Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, index.h("kritzel-dialog", { key: '0575ac82e19d07cf909556cae2ec433e0057fd5b', dialogTitle: "Share Workspace", size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, index.h("div", { key: 'c51d207e31255f45724103bfecbe858f13a721e6', class: "share-content" }, index.h("div", { key: 'ca6cb7721b9ba834c133b2cb953b208475e34fb5', class: "share-section" }, index.h("div", { key: '2c76845c903cc1c18cc26b9111d608e732ed12a5', class: "share-row" }, index.h("div", { key: '7700533f54372bc81d8d795414318a6bf0e93c47', class: "share-label-group" }, index.h("label", { key: 'a1d80009cb09cfe35bce35ce1151bf0754b052c1', class: "share-label" }, "Link sharing"), index.h("p", { key: '10c1963e95e658c7fb86174f1dba7565ce40d5a6', class: "share-description" }, this.internalIsPublic
|
|
29470
29686
|
? 'Anyone with the link can access this workspace.'
|
|
29471
|
-
: 'Link sharing is disabled. Only you can access this workspace.')), index.h("kritzel-slide-toggle", { key: '
|
|
29687
|
+
: 'Link sharing is disabled. Only you can access this workspace.')), index.h("kritzel-slide-toggle", { key: 'ec62a5ece12be0cea18a16c5d41db0a992309174', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (index.h("div", { key: '5e826d4c8c37792ba3a74a0189ad313a8ab482e2', class: "share-section" }, index.h("div", { key: 'f8e35cda32cb34ab21f56335aa27503fd6fe98c4', class: "share-url-container" }, index.h("input", { key: '47feb20a1843e1d3d8f7d146d71574b187002e8d', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: '052f56f35d057430cbc8fd03da5bef574b173791', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, index.h("kritzel-icon", { key: '4e1de478f837a352185be2a06e15796dc1fb2f5e', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
|
|
29472
29688
|
}
|
|
29473
29689
|
static get watchers() { return {
|
|
29474
29690
|
"isPublic": [{
|