kritzel-stencil 0.3.12 → 0.3.13
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-CFnj_FXt.js → index-Xav9JFHg.js} +1 -1
- package/dist/cjs/index.cjs.js +41 -3
- package/dist/cjs/kritzel-active-users_42.cjs.entry.js +139 -97
- package/dist/cjs/kritzel-brush-style.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/{schema.constants-CzfoUWxF.js → schema.constants-CMFOYyBj.js} +22 -42
- package/dist/cjs/stencil.cjs.js +3 -3
- package/dist/collection/classes/core/viewport.class.js +16 -8
- package/dist/collection/classes/objects/shape.class.js +2 -1
- package/dist/collection/classes/tools/base-tool.class.js +2 -0
- package/dist/collection/classes/tools/brush-tool.class.js +1 -0
- package/dist/collection/classes/tools/eraser-tool.class.js +1 -0
- package/dist/collection/classes/tools/image-tool.class.js +1 -0
- package/dist/collection/classes/tools/line-tool.class.js +1 -0
- package/dist/collection/classes/tools/selection-tool.class.js +1 -0
- package/dist/collection/classes/tools/shape-tool.class.js +1 -0
- package/dist/collection/classes/tools/text-tool.class.js +1 -0
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +77 -22
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +106 -2
- package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css +3 -3
- package/dist/collection/components/shared/kritzel-input/kritzel-input.css +1 -1
- package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.css +2 -2
- package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css +7 -0
- package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js +7 -1
- package/dist/collection/components/ui/kritzel-export/kritzel-export.css +1 -1
- package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js +2 -2
- package/dist/collection/configs/default-asset-storage.config.js +1 -2
- package/dist/collection/configs/default-sync.config.js +2 -5
- package/dist/collection/constants/version.js +1 -1
- package/dist/collection/helpers/tool-config.helper.js +58 -65
- package/dist/collection/interfaces/tool-type.interface.js +1 -0
- package/dist/collection/themes/dark-theme.js +5 -0
- package/dist/collection/themes/light-theme.js +5 -0
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-active-users.js +1 -1
- package/dist/components/kritzel-avatar.js +1 -1
- package/dist/components/kritzel-awareness-cursors.js +1 -1
- package/dist/components/kritzel-back-to-content.js +1 -1
- package/dist/components/kritzel-brush-style.js +1 -1
- package/dist/components/kritzel-button.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-context-menu.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-current-user-dialog.js +1 -1
- package/dist/components/kritzel-current-user.js +1 -1
- package/dist/components/kritzel-cursor-trail.js +1 -1
- package/dist/components/kritzel-dialog.js +1 -1
- package/dist/components/kritzel-dropdown.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-export.js +1 -1
- package/dist/components/kritzel-font-family.js +1 -1
- package/dist/components/kritzel-font-size.js +1 -1
- package/dist/components/kritzel-font.js +1 -1
- package/dist/components/kritzel-icon.js +1 -1
- package/dist/components/kritzel-input.js +1 -1
- package/dist/components/kritzel-line-endings.js +1 -1
- package/dist/components/kritzel-login-dialog.js +1 -1
- package/dist/components/kritzel-master-detail.js +1 -1
- package/dist/components/kritzel-menu-item.js +1 -1
- package/dist/components/kritzel-menu.js +1 -1
- package/dist/components/kritzel-more-menu.js +1 -1
- package/dist/components/kritzel-numeric-input.js +1 -1
- package/dist/components/kritzel-opacity-slider.js +1 -1
- package/dist/components/kritzel-pill-tabs.js +1 -1
- package/dist/components/kritzel-portal.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-shape-fill.js +1 -1
- package/dist/components/kritzel-share-dialog.js +1 -1
- package/dist/components/kritzel-slide-toggle.js +1 -1
- package/dist/components/kritzel-split-button.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/kritzel-utility-panel.js +1 -1
- package/dist/components/kritzel-workspace-manager.js +1 -1
- package/dist/components/p-2xYAGd0I.js +1 -0
- package/dist/components/{p-DdmJquQr.js → p-B2Os1ya_.js} +1 -1
- package/dist/components/p-B2w8X7vn.js +1 -0
- package/dist/components/{p-DRB3TZzI.js → p-B4b6TDxp.js} +1 -1
- package/dist/components/p-B5xxfwKF.js +1 -0
- package/dist/components/p-B9hLySCl.js +1 -0
- package/dist/components/{p-D0aom7Yu.js → p-BFYtCsZu.js} +1 -1
- package/dist/components/{p-CARNM9pf.js → p-BFoK4W--.js} +1 -1
- package/dist/components/{p-x38RbGJA.js → p-BYmp9Ovv.js} +1 -1
- package/dist/components/{p-KVG5rztB.js → p-BbactVA0.js} +1 -1
- package/dist/components/{p-B_JH91jB.js → p-BfNHpqQ8.js} +1 -1
- package/dist/components/{p-DXgUuzXW.js → p-BiG1dxPS.js} +1 -1
- package/dist/components/{p-Dov3qOAR.js → p-Bj2laX89.js} +1 -1
- package/dist/components/{p-Cr7xOsIZ.js → p-BqwqGFQY.js} +1 -1
- package/dist/components/{p-DmTG0Y5h.js → p-BzYU3-MJ.js} +1 -1
- package/dist/components/p-C-aFOO5p.js +1 -0
- package/dist/components/p-C0TN5IAi.js +1 -0
- package/dist/components/{p-RnuCSIt-.js → p-C2SX-XRr.js} +1 -1
- package/dist/components/{p-guqEWGgV.js → p-CFgkUYoO.js} +1 -1
- package/dist/components/{p-BTSOqHMI.js → p-CHrSFOSI.js} +1 -1
- package/dist/components/p-CJOhfMU5.js +1 -0
- package/dist/components/{p-DJLJfKY2.js → p-COLHjboZ.js} +1 -1
- package/dist/components/{p-CKY7AvGR.js → p-COgo9OWy.js} +1 -1
- package/dist/components/{p-Do4UlU4e.js → p-CVzH1Oil.js} +1 -1
- package/dist/components/{p-DhAM4qeQ.js → p-CXpv9Rxe.js} +1 -1
- package/dist/components/{p-Bp3kdH4l.js → p-CcyIAi9S.js} +1 -1
- package/dist/components/{p-COIxq81R.js → p-CmuNn1Tc.js} +1 -1
- package/dist/components/{p-DfH7YY2C.js → p-D-sRVAbQ.js} +1 -1
- package/dist/components/{p-ZgZqbJ58.js → p-DDYoDSrm.js} +1 -1
- package/dist/components/{p-u0b2RJAn.js → p-DEy7zJCe.js} +1 -1
- package/dist/components/{p-BPEn0_hr.js → p-DM11KXUT.js} +1 -1
- package/dist/components/{p-CJERvHdy.js → p-DbB730vO.js} +1 -1
- package/dist/components/{p-C8ggg-5h.js → p-Df3BwVGy.js} +1 -1
- package/dist/components/{p-Dx_xz_El.js → p-DlwYHzSj.js} +1 -1
- package/dist/components/p-DplAQ6jk.js +9 -0
- package/dist/components/{p-CJ2V42sz.js → p-FK7b3BGt.js} +1 -1
- package/dist/components/{p-CxtTuKCy.js → p-JhOYwUOj.js} +1 -1
- package/dist/components/{p-Dw9sKOsb.js → p-SptaSMno.js} +1 -1
- package/dist/components/{p-KjtNlFTl.js → p-UoPj5QjH.js} +1 -1
- package/dist/components/{p-CYR9wbJg.js → p-dcAernE1.js} +1 -1
- package/dist/components/{p-EFyZdR89.js → p-ijIqLY9g.js} +1 -1
- package/dist/components/{p-BI_UUiTr.js → p-skWUIStn.js} +1 -1
- package/dist/components/{p-DgtrNOWm.js → p-x6doYeiI.js} +1 -1
- package/dist/esm/{index-D9HaikfQ.js → index-Dhio9uis.js} +1 -1
- package/dist/esm/index.js +42 -4
- package/dist/esm/kritzel-active-users_42.entry.js +139 -97
- package/dist/esm/kritzel-brush-style.entry.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{schema.constants-BcT1vV4J.js → schema.constants-NrtFvKER.js} +23 -42
- package/dist/esm/stencil.js +4 -4
- package/dist/stencil/index.esm.js +1 -1
- package/dist/stencil/p-9adee165.entry.js +9 -0
- package/dist/stencil/p-NrtFvKER.js +1 -0
- package/dist/stencil/{p-69298b5f.entry.js → p-fb32cd8f.entry.js} +1 -1
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/core/viewport.class.d.ts +8 -0
- package/dist/types/classes/tools/base-tool.class.d.ts +3 -0
- package/dist/types/classes/tools/brush-tool.class.d.ts +1 -0
- package/dist/types/classes/tools/eraser-tool.class.d.ts +1 -0
- package/dist/types/classes/tools/image-tool.class.d.ts +1 -0
- package/dist/types/classes/tools/line-tool.class.d.ts +1 -0
- package/dist/types/classes/tools/selection-tool.class.d.ts +1 -0
- package/dist/types/classes/tools/shape-tool.class.d.ts +1 -0
- package/dist/types/classes/tools/text-tool.class.d.ts +1 -0
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +2 -0
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +16 -0
- package/dist/types/components/ui/kritzel-context-menu/kritzel-context-menu.d.ts +1 -0
- package/dist/types/components.d.ts +26 -14
- package/dist/types/configs/default-asset-storage.config.d.ts +1 -1
- package/dist/types/configs/default-sync.config.d.ts +1 -1
- package/dist/types/constants/version.d.ts +1 -1
- package/dist/types/interfaces/theme.interface.d.ts +8 -3
- package/dist/types/interfaces/tool-config.interface.d.ts +3 -6
- package/dist/types/interfaces/tool-type.interface.d.ts +1 -0
- package/dist/types/interfaces/tool.interface.d.ts +1 -0
- package/dist/types/stencil-public-runtime.d.ts +1 -0
- package/package.json +1 -1
- package/dist/components/p-C0wFAtT_.js +0 -1
- package/dist/components/p-CWgI1dA0.js +0 -1
- package/dist/components/p-DH-H7om7.js +0 -1
- package/dist/components/p-DIiGd0LS.js +0 -1
- package/dist/components/p-DLh8x1jK.js +0 -9
- package/dist/components/p-Dqjil3Hm.js +0 -1
- package/dist/components/p-IiG44Unz.js +0 -1
- package/dist/components/p-K7ySy791.js +0 -1
- package/dist/stencil/p-0c95e585.entry.js +0 -9
- package/dist/stencil/p-BcT1vV4J.js +0 -1
- /package/dist/components/{p-BWj1eE2b.js → p-B43upypT.js} +0 -0
- /package/dist/stencil/{p-D9HaikfQ.js → p-Dhio9uis.js} +0 -0
|
@@ -22,7 +22,7 @@ const NAMESPACE = 'stencil';
|
|
|
22
22
|
const BUILD = /* stencil */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
|
|
23
23
|
|
|
24
24
|
/*
|
|
25
|
-
Stencil Client Platform v4.43.
|
|
25
|
+
Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
|
|
26
26
|
*/
|
|
27
27
|
|
|
28
28
|
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var schema_constants = require('./schema.constants-
|
|
3
|
+
var schema_constants = require('./schema.constants-CMFOYyBj.js');
|
|
4
4
|
var Y = require('yjs');
|
|
5
|
+
var yIndexeddb = require('y-indexeddb');
|
|
5
6
|
var yWebsocket = require('y-websocket');
|
|
6
|
-
require('y-indexeddb');
|
|
7
7
|
|
|
8
8
|
function _interopNamespace(e) {
|
|
9
9
|
if (e && e.__esModule) return e;
|
|
@@ -520,6 +520,44 @@ class InMemorySyncProvider {
|
|
|
520
520
|
}
|
|
521
521
|
}
|
|
522
522
|
|
|
523
|
+
/**
|
|
524
|
+
* IndexedDB sync provider for local persistence
|
|
525
|
+
*/
|
|
526
|
+
class IndexedDBSyncProvider {
|
|
527
|
+
type = 'local';
|
|
528
|
+
provider;
|
|
529
|
+
isConnected = false;
|
|
530
|
+
constructor(docName, doc, options) {
|
|
531
|
+
const dbName = options?.name || docName;
|
|
532
|
+
this.provider = new yIndexeddb.IndexeddbPersistence(dbName, doc);
|
|
533
|
+
}
|
|
534
|
+
async connect() {
|
|
535
|
+
if (this.isConnected) {
|
|
536
|
+
return;
|
|
537
|
+
}
|
|
538
|
+
return new Promise(resolve => {
|
|
539
|
+
this.provider.on('synced', () => {
|
|
540
|
+
this.isConnected = true;
|
|
541
|
+
resolve();
|
|
542
|
+
});
|
|
543
|
+
});
|
|
544
|
+
}
|
|
545
|
+
disconnect() {
|
|
546
|
+
// IndexedDB doesn't need explicit disconnect
|
|
547
|
+
this.isConnected = false;
|
|
548
|
+
}
|
|
549
|
+
async reconnect() {
|
|
550
|
+
this.disconnect();
|
|
551
|
+
return this.connect();
|
|
552
|
+
}
|
|
553
|
+
destroy() {
|
|
554
|
+
if (this.provider) {
|
|
555
|
+
this.provider.destroy();
|
|
556
|
+
}
|
|
557
|
+
this.isConnected = false;
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
|
|
523
561
|
/**
|
|
524
562
|
* WebSocket sync provider for real-time collaboration
|
|
525
563
|
*/
|
|
@@ -1161,7 +1199,6 @@ exports.DEFAULT_BRUSH_CONFIG = schema_constants.DEFAULT_BRUSH_CONFIG;
|
|
|
1161
1199
|
exports.DEFAULT_LINE_TOOL_CONFIG = schema_constants.DEFAULT_LINE_TOOL_CONFIG;
|
|
1162
1200
|
exports.DEFAULT_TEXT_CONFIG = schema_constants.DEFAULT_TEXT_CONFIG;
|
|
1163
1201
|
exports.IndexedDBAssetProvider = schema_constants.IndexedDBAssetProvider;
|
|
1164
|
-
exports.IndexedDBSyncProvider = schema_constants.IndexedDBSyncProvider;
|
|
1165
1202
|
Object.defineProperty(exports, "KritzelAlignment", {
|
|
1166
1203
|
enumerable: true,
|
|
1167
1204
|
get: function () { return schema_constants.KritzelAlignment; }
|
|
@@ -1198,5 +1235,6 @@ exports.BroadcastSyncProvider = BroadcastSyncProvider;
|
|
|
1198
1235
|
exports.HocuspocusSyncProvider = HocuspocusSyncProvider;
|
|
1199
1236
|
exports.HttpAssetProvider = HttpAssetProvider;
|
|
1200
1237
|
exports.InMemorySyncProvider = InMemorySyncProvider;
|
|
1238
|
+
exports.IndexedDBSyncProvider = IndexedDBSyncProvider;
|
|
1201
1239
|
exports.PresignedAssetProvider = PresignedAssetProvider;
|
|
1202
1240
|
exports.WebSocketSyncProvider = WebSocketSyncProvider;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
4
|
-
var schema_constants = require('./schema.constants-
|
|
3
|
+
var index = require('./index-Xav9JFHg.js');
|
|
4
|
+
var schema_constants = require('./schema.constants-CMFOYyBj.js');
|
|
5
5
|
var Y = require('yjs');
|
|
6
6
|
require('y-indexeddb');
|
|
7
7
|
require('y-websocket');
|
|
@@ -629,7 +629,7 @@ const KritzelColorPalette = class {
|
|
|
629
629
|
};
|
|
630
630
|
KritzelColorPalette.style = kritzelColorPaletteCss();
|
|
631
631
|
|
|
632
|
-
const kritzelContextMenuCss = () => `:host{display:block}.menu-container{display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100
|
|
632
|
+
const kritzelContextMenuCss = () => `:host{display:block}.menu-container{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:var(--kritzel-context-menu-min-width, 140px)}.menu-item-wrapper{position:relative}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:var(--kritzel-global-pointer-cursor, pointer);font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent;width:100%;min-width:0}.menu-item:not(.disabled):hover,.menu-item.submenu-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa)}.menu-item.has-children.disabled{cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-context-menu-item-color, #333333)}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.has-children.disabled kritzel-icon{opacity:0.8}.label{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.submenu-arrow{margin-left:auto;opacity:0.5}.menu-divider{height:1px;background-color:var(--kritzel-context-menu-divider-color, rgba(0, 0, 0, 0.1));margin:var(--kritzel-context-menu-divider-margin, 4px 8px)}.submenu-container{position:absolute;top:0;left:100%;z-index:2;margin-left:4px;display:flex;flex-direction:column;gap:var(--kritzel-context-menu-item-spacing, 2px);background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding, 4px);min-width:120px}.submenu-container.position-left{left:auto;right:100%;margin-left:0;margin-right:4px}`;
|
|
633
633
|
|
|
634
634
|
const VIEWPORT_PADDING = 8;
|
|
635
635
|
const SUBMENU_DELAY = 150;
|
|
@@ -750,6 +750,11 @@ const KritzelContextMenu = class {
|
|
|
750
750
|
const idx = path.lastIndexOf('.');
|
|
751
751
|
return idx === -1 ? '' : path.substring(0, idx);
|
|
752
752
|
}
|
|
753
|
+
getMenuDepth(path) {
|
|
754
|
+
if (!path)
|
|
755
|
+
return 0;
|
|
756
|
+
return path.split('.').length;
|
|
757
|
+
}
|
|
753
758
|
pruneStaleRefs() {
|
|
754
759
|
const openPaths = new Set(this.getOpenSubmenuPaths());
|
|
755
760
|
for (const key of Array.from(this.submenuRefs.keys())) {
|
|
@@ -861,7 +866,8 @@ const KritzelContextMenu = class {
|
|
|
861
866
|
}
|
|
862
867
|
renderSubmenu(processedChildren, path) {
|
|
863
868
|
const position = this.submenuPositions[path] === 'left' ? 'left' : 'right';
|
|
864
|
-
|
|
869
|
+
const zIndex = this.getMenuDepth(path) + 1;
|
|
870
|
+
return (index.h("div", { class: { 'submenu-container': true, 'position-left': position === 'left' }, key: `submenu-${path}`, style: { zIndex: String(zIndex) }, ref: el => el && this.submenuRefs.set(path, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave(path) }, this.renderItems(processedChildren, path)));
|
|
865
871
|
}
|
|
866
872
|
render() {
|
|
867
873
|
if (!this.processedItems || this.processedItems.length === 0) {
|
|
@@ -879,67 +885,65 @@ KritzelContextMenu.style = kritzelContextMenuCss();
|
|
|
879
885
|
|
|
880
886
|
class KritzelToolConfigHelper {
|
|
881
887
|
static getToolConfig(tool) {
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
888
|
+
switch (tool?.toolType) {
|
|
889
|
+
case 'selection':
|
|
890
|
+
return 'getToolConfig' in tool && typeof tool.getToolConfig === 'function'
|
|
891
|
+
? tool.getToolConfig()
|
|
892
|
+
: null;
|
|
893
|
+
case 'brush':
|
|
894
|
+
return {
|
|
895
|
+
type: 'brush',
|
|
896
|
+
colorProperty: 'color',
|
|
897
|
+
sizeProperty: 'size',
|
|
898
|
+
opacityProperty: 'opacity',
|
|
899
|
+
paletteSource: 'palette',
|
|
900
|
+
sizesSource: 'sizes',
|
|
901
|
+
controls: [
|
|
902
|
+
{ type: 'stroke-size', propertyName: 'size' },
|
|
903
|
+
],
|
|
904
|
+
};
|
|
905
|
+
case 'line':
|
|
906
|
+
return {
|
|
907
|
+
type: 'line',
|
|
908
|
+
colorProperty: 'color',
|
|
909
|
+
sizeProperty: 'size',
|
|
910
|
+
opacityProperty: 'opacity',
|
|
911
|
+
paletteSource: 'palette',
|
|
912
|
+
sizesSource: 'sizes',
|
|
913
|
+
controls: [
|
|
914
|
+
{ type: 'stroke-size', propertyName: 'size' },
|
|
915
|
+
{ type: 'line-endings', propertyName: 'arrows', additionalProps: {} },
|
|
916
|
+
],
|
|
917
|
+
};
|
|
918
|
+
case 'shape':
|
|
919
|
+
return {
|
|
920
|
+
type: 'shape',
|
|
921
|
+
colorProperty: 'strokeColor',
|
|
922
|
+
sizeProperty: 'strokeWidth',
|
|
923
|
+
opacityProperty: 'opacity',
|
|
924
|
+
paletteSource: 'palette',
|
|
925
|
+
sizesSource: 'sizes',
|
|
926
|
+
controls: [
|
|
927
|
+
{ type: 'stroke-size', propertyName: 'strokeWidth' },
|
|
928
|
+
{ type: 'shape-fill', propertyName: 'fillColor', additionalProps: {} },
|
|
929
|
+
],
|
|
930
|
+
};
|
|
931
|
+
case 'text':
|
|
932
|
+
return {
|
|
933
|
+
type: 'text',
|
|
934
|
+
colorProperty: 'fontColor',
|
|
935
|
+
sizeProperty: 'fontSize',
|
|
936
|
+
opacityProperty: 'opacity',
|
|
937
|
+
paletteSource: 'palette',
|
|
938
|
+
sizesSource: 'sizes',
|
|
939
|
+
controls: [
|
|
940
|
+
{ type: 'font-size', propertyName: 'fontSize', additionalProps: {} },
|
|
941
|
+
{ type: 'font-family', propertyName: 'fontFamily' },
|
|
942
|
+
],
|
|
943
|
+
};
|
|
944
|
+
default:
|
|
945
|
+
return null;
|
|
940
946
|
}
|
|
941
|
-
// Tool is not configurable (e.g., selection, eraser, image)
|
|
942
|
-
return null;
|
|
943
947
|
}
|
|
944
948
|
}
|
|
945
949
|
|
|
@@ -1898,7 +1902,7 @@ const KritzelDialog = class {
|
|
|
1898
1902
|
};
|
|
1899
1903
|
KritzelDialog.style = kritzelDialogCss();
|
|
1900
1904
|
|
|
1901
|
-
const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:6px;overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:6px;border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:6px;box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
|
|
1905
|
+
const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
|
|
1902
1906
|
|
|
1903
1907
|
const KritzelDropdown = class {
|
|
1904
1908
|
constructor(hostRef) {
|
|
@@ -2175,12 +2179,10 @@ const ABSOLUTE_SCALE_MAX = 1000;
|
|
|
2175
2179
|
const ABSOLUTE_SCALE_MIN = 0.0001;
|
|
2176
2180
|
|
|
2177
2181
|
/**
|
|
2178
|
-
* Default sync configuration -
|
|
2182
|
+
* Default sync configuration - None
|
|
2179
2183
|
*/
|
|
2180
2184
|
const DEFAULT_SYNC_CONFIG = {
|
|
2181
|
-
providers: [
|
|
2182
|
-
schema_constants.IndexedDBSyncProvider
|
|
2183
|
-
],
|
|
2185
|
+
providers: [],
|
|
2184
2186
|
};
|
|
2185
2187
|
|
|
2186
2188
|
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}.top-right-buttons{position:absolute;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
|
|
@@ -2372,15 +2374,7 @@ const KritzelEditor = class {
|
|
|
2372
2374
|
/** The element to use as the target for the cursor. Defaults to the editor container if not set. */
|
|
2373
2375
|
cursorTarget;
|
|
2374
2376
|
/** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
|
|
2375
|
-
loginConfig
|
|
2376
|
-
providers: [
|
|
2377
|
-
{
|
|
2378
|
-
label: 'Sign in with Google',
|
|
2379
|
-
icon: 'google',
|
|
2380
|
-
name: 'Google',
|
|
2381
|
-
},
|
|
2382
|
-
],
|
|
2383
|
-
};
|
|
2377
|
+
loginConfig;
|
|
2384
2378
|
/** Whether the editor is in a loading state. When true, a loading overlay is displayed. */
|
|
2385
2379
|
isLoading = false;
|
|
2386
2380
|
/** Optional unique identifier for namespacing storage keys across multiple editor instances. */
|
|
@@ -2509,12 +2503,18 @@ const KritzelEditor = class {
|
|
|
2509
2503
|
async centerObjectInViewport(object) {
|
|
2510
2504
|
return this.engineRef.centerObjectInViewport(object);
|
|
2511
2505
|
}
|
|
2506
|
+
async panToObject(object) {
|
|
2507
|
+
return this.engineRef.panToObject(object);
|
|
2508
|
+
}
|
|
2512
2509
|
async backToContent() {
|
|
2513
2510
|
return this.engineRef.backToContent();
|
|
2514
2511
|
}
|
|
2515
2512
|
async centerAllObjects(animate = true) {
|
|
2516
2513
|
return this.engineRef.centerAllObjects(animate);
|
|
2517
2514
|
}
|
|
2515
|
+
async centerObjects(objects, animate = true) {
|
|
2516
|
+
return this.engineRef.centerObjects(objects, animate);
|
|
2517
|
+
}
|
|
2518
2518
|
async setViewport(x, y, scale) {
|
|
2519
2519
|
return this.engineRef.setViewport(x, y, scale);
|
|
2520
2520
|
}
|
|
@@ -2968,31 +2968,31 @@ const KritzelEditor = class {
|
|
|
2968
2968
|
const isLoggedIn = this.isLoggedIn;
|
|
2969
2969
|
const shouldShowCurrentUser = isLoggedIn;
|
|
2970
2970
|
const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
|
|
2971
|
-
return (index.h(index.Host, { key: '
|
|
2971
|
+
return (index.h(index.Host, { key: '673bfb4d2d5224c3c3a11bada8afb1c3b90aa03d', style: {
|
|
2972
2972
|
opacity: this.isEditorVisible ? '1' : '0',
|
|
2973
2973
|
visibility: this.isEditorVisible ? 'visible' : 'hidden',
|
|
2974
2974
|
transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
|
|
2975
|
-
} }, index.h("div", { key: '
|
|
2975
|
+
} }, index.h("div", { key: 'cee9075de7a44953b3d017c334b19151ab7bb926', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'a7a6c246dabe3ddbab3d807a9f0c275bc621363f', 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: 'b5452a22f7fd434b8816bdaa117d457b2f1879f3', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'a08648ec91f678724171238735b1073ffb53ca73', ref: el => {
|
|
2976
2976
|
if (el) {
|
|
2977
2977
|
this.engineRef = el;
|
|
2978
2978
|
}
|
|
2979
|
-
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, 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: '
|
|
2979
|
+
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, 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: 'a7b78a31bda3fe2fe1def6be339894b83ea3ee38', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
|
|
2980
2980
|
if (el) {
|
|
2981
2981
|
this.controlsRef = el;
|
|
2982
2982
|
}
|
|
2983
|
-
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '
|
|
2983
|
+
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '0b3f4879c44864661a5bf5f126da3a869fa808f5', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '7da7fb709f2e4a31a6df1f7382a91f4d78dc6e35', ref: el => {
|
|
2984
2984
|
if (el) {
|
|
2985
2985
|
this.settingsRef = el;
|
|
2986
2986
|
}
|
|
2987
|
-
}, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: '
|
|
2987
|
+
}, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'f362b0181231da30efc927cbebd818a9a64991b0', ref: el => {
|
|
2988
2988
|
if (el) {
|
|
2989
2989
|
this.exportRef = el;
|
|
2990
2990
|
}
|
|
2991
|
-
}, 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: '
|
|
2991
|
+
}, 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: '1cf065fed9b27ffb19a3695425c797a3bc29fa51', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '7d6e8e227f36164daed7303645bdd490b362b4d0', user: this.user }), shouldShowLoginButton && (index.h("kritzel-button", { key: '1dcf1f5ae547f4c2c5b7ec88b34bcad0a2a4da28', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), index.h("kritzel-more-menu", { key: 'cb80dea4bb9861b6d627399c9aad64075cb8944b', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), index.h("kritzel-share-dialog", { key: 'd12bc96d7af23941e4e054dadfddcf6429de6208', ref: el => {
|
|
2992
2992
|
if (el) {
|
|
2993
2993
|
this.shareDialogRef = el;
|
|
2994
2994
|
}
|
|
2995
|
-
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '
|
|
2995
|
+
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '6c29a13069cd74972e94bbc245f26375fa95f4cc', ref: el => {
|
|
2996
2996
|
if (el) {
|
|
2997
2997
|
this.loginDialogRef = el;
|
|
2998
2998
|
}
|
|
@@ -20935,22 +20935,21 @@ class KritzelViewport {
|
|
|
20935
20935
|
return true;
|
|
20936
20936
|
}
|
|
20937
20937
|
/**
|
|
20938
|
-
* Centers and fits
|
|
20939
|
-
* Calculates the combined bounding box of
|
|
20938
|
+
* Centers and fits the provided objects in the viewport.
|
|
20939
|
+
* Calculates the combined bounding box of the provided objects and optionally animates the viewport to show them.
|
|
20940
|
+
* @param objects - Objects to include in the fit operation.
|
|
20940
20941
|
* @param animate - Whether to animate the viewport transition (default: true)
|
|
20941
|
-
* @returns true if
|
|
20942
|
+
* @returns true if at least one object was provided and viewport was adjusted, false otherwise
|
|
20942
20943
|
*/
|
|
20943
|
-
|
|
20944
|
-
|
|
20945
|
-
if (allObjects.length === 0) {
|
|
20944
|
+
centerFitObjects(objects, animate = true) {
|
|
20945
|
+
if (objects.length === 0) {
|
|
20946
20946
|
return false;
|
|
20947
20947
|
}
|
|
20948
|
-
// Calculate combined bounds of all objects
|
|
20949
20948
|
let minX = Infinity;
|
|
20950
20949
|
let minY = Infinity;
|
|
20951
20950
|
let maxX = -Infinity;
|
|
20952
20951
|
let maxY = -Infinity;
|
|
20953
|
-
for (const obj of
|
|
20952
|
+
for (const obj of objects) {
|
|
20954
20953
|
const bounds = obj.rotatedBoundingBox;
|
|
20955
20954
|
minX = Math.min(minX, bounds.x);
|
|
20956
20955
|
minY = Math.min(minY, bounds.y);
|
|
@@ -20973,6 +20972,15 @@ class KritzelViewport {
|
|
|
20973
20972
|
this.animateViewportTo(targetTranslateX, targetTranslateY, clampedScale, animate ? 150 : 0);
|
|
20974
20973
|
return true;
|
|
20975
20974
|
}
|
|
20975
|
+
/**
|
|
20976
|
+
* Centers and fits ALL objects in the viewport, including objects not currently rendered.
|
|
20977
|
+
* Calculates the combined bounding box of all objects and optionally animates the viewport to show them.
|
|
20978
|
+
* @param animate - Whether to animate the viewport transition (default: true)
|
|
20979
|
+
* @returns true if objects were found and viewport was adjusted, false if no objects exist
|
|
20980
|
+
*/
|
|
20981
|
+
centerFitAllObjects(animate = true) {
|
|
20982
|
+
return this.centerFitObjects(this._core.store.allNonSelectionObjects, animate);
|
|
20983
|
+
}
|
|
20976
20984
|
}
|
|
20977
20985
|
|
|
20978
20986
|
/** The amount of pixels to move an object when using arrow key nudging. */
|
|
@@ -26497,8 +26505,18 @@ const KritzelEngine = class {
|
|
|
26497
26505
|
}
|
|
26498
26506
|
/** Context menu items shown when right-clicking the canvas background. */
|
|
26499
26507
|
globalContextMenuItems;
|
|
26508
|
+
onGlobalContextMenuItemsChange(newValue) {
|
|
26509
|
+
if (this.contextMenuHandler) {
|
|
26510
|
+
this.contextMenuHandler.globalContextMenuItems = newValue ?? [];
|
|
26511
|
+
}
|
|
26512
|
+
}
|
|
26500
26513
|
/** Context menu items shown when right-clicking a selected object. */
|
|
26501
26514
|
objectContextMenuItems;
|
|
26515
|
+
onObjectContextMenuItemsChange(newValue) {
|
|
26516
|
+
if (this.contextMenuHandler) {
|
|
26517
|
+
this.contextMenuHandler.objectContextMenuItems = newValue ?? [];
|
|
26518
|
+
}
|
|
26519
|
+
}
|
|
26502
26520
|
/** Maximum zoom scale allowed. Clamped to the absolute maximum defined by the engine. */
|
|
26503
26521
|
scaleMax = ABSOLUTE_SCALE_MAX;
|
|
26504
26522
|
validateScaleMax(newValue) {
|
|
@@ -27223,6 +27241,14 @@ const KritzelEngine = class {
|
|
|
27223
27241
|
this.core.rerender();
|
|
27224
27242
|
return object;
|
|
27225
27243
|
}
|
|
27244
|
+
/**
|
|
27245
|
+
* Pans the viewport to center on the given object without changing the zoom level.
|
|
27246
|
+
* Unlike `centerObjectInViewport`, this moves the camera — not the object.
|
|
27247
|
+
* @param object - The object whose center the viewport should pan to.
|
|
27248
|
+
*/
|
|
27249
|
+
async panToObject(object) {
|
|
27250
|
+
this.viewport.panTo(object.centerX, object.centerY);
|
|
27251
|
+
}
|
|
27226
27252
|
/**
|
|
27227
27253
|
* Pans and zooms the viewport to fit the nearest content, with padding.
|
|
27228
27254
|
* Useful when the user has panned away from all objects.
|
|
@@ -27240,6 +27266,16 @@ const KritzelEngine = class {
|
|
|
27240
27266
|
async centerAllObjects(animate = true) {
|
|
27241
27267
|
return this.viewport.centerFitAllObjects(animate);
|
|
27242
27268
|
}
|
|
27269
|
+
/**
|
|
27270
|
+
* Pans and zooms the viewport to fit the provided objects.
|
|
27271
|
+
* Calculates the combined bounding box of the given objects and centers the viewport to show them.
|
|
27272
|
+
* @param objects - The objects to center and fit in the viewport.
|
|
27273
|
+
* @param animate - Whether to animate the viewport transition (default: true).
|
|
27274
|
+
* @returns `true` if objects were provided and the viewport was adjusted, `false` otherwise.
|
|
27275
|
+
*/
|
|
27276
|
+
async centerObjects(objects, animate = true) {
|
|
27277
|
+
return this.viewport.centerFitObjects(objects, animate);
|
|
27278
|
+
}
|
|
27243
27279
|
/**
|
|
27244
27280
|
* Sets the viewport to center on the given world coordinates at the specified scale.
|
|
27245
27281
|
* @param x - X position in world coordinates to center on.
|
|
@@ -28663,6 +28699,12 @@ const KritzelEngine = class {
|
|
|
28663
28699
|
"user": [{
|
|
28664
28700
|
"onUserChange": 0
|
|
28665
28701
|
}],
|
|
28702
|
+
"globalContextMenuItems": [{
|
|
28703
|
+
"onGlobalContextMenuItemsChange": 0
|
|
28704
|
+
}],
|
|
28705
|
+
"objectContextMenuItems": [{
|
|
28706
|
+
"onObjectContextMenuItemsChange": 0
|
|
28707
|
+
}],
|
|
28666
28708
|
"scaleMax": [{
|
|
28667
28709
|
"validateScaleMax": 0
|
|
28668
28710
|
}],
|
|
@@ -28706,7 +28748,7 @@ const KritzelEngine = class {
|
|
|
28706
28748
|
};
|
|
28707
28749
|
KritzelEngine.style = kritzelEngineCss();
|
|
28708
28750
|
|
|
28709
|
-
const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
|
|
28751
|
+
const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:var(--kritzel-button-border-radius, 8px);font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
|
|
28710
28752
|
|
|
28711
28753
|
const KritzelExport = class {
|
|
28712
28754
|
constructor(hostRef) {
|
|
@@ -28902,7 +28944,7 @@ const KritzelIcon = class {
|
|
|
28902
28944
|
};
|
|
28903
28945
|
KritzelIcon.style = kritzelIconCss();
|
|
28904
28946
|
|
|
28905
|
-
const kritzelInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:6px;overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}`;
|
|
28947
|
+
const kritzelInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:var(--kritzel-text-input-border-radius, 6px);overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}`;
|
|
28906
28948
|
|
|
28907
28949
|
const KritzelInput = class {
|
|
28908
28950
|
constructor(hostRef) {
|
|
@@ -29450,7 +29492,7 @@ const KritzelMoreMenu = class {
|
|
|
29450
29492
|
};
|
|
29451
29493
|
KritzelMoreMenu.style = kritzelMoreMenuCss();
|
|
29452
29494
|
|
|
29453
|
-
const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:6px;font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 5px 5px 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
|
|
29495
|
+
const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:var(--kritzel-numeric-input-border-radius, 6px);font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
|
|
29454
29496
|
|
|
29455
29497
|
const KritzelNumericInput = class {
|
|
29456
29498
|
constructor(hostRef) {
|
|
@@ -29949,7 +29991,7 @@ const KritzelPortal = class {
|
|
|
29949
29991
|
* This file is auto-generated by the version bump scripts.
|
|
29950
29992
|
* Do not modify manually.
|
|
29951
29993
|
*/
|
|
29952
|
-
const KRITZEL_VERSION = '0.3.
|
|
29994
|
+
const KRITZEL_VERSION = '0.3.13';
|
|
29953
29995
|
|
|
29954
29996
|
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)}`;
|
|
29955
29997
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Xav9JFHg.js');
|
|
4
4
|
|
|
5
5
|
const kritzelBrushStyleCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}`;
|
|
6
6
|
|