kritzel-stencil 0.3.11 → 0.3.13

package/dist/collection/collection-manifest.json

@@ -47,7 +47,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.4",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js

@@ -188,20 +188,13 @@ export class KritzelEditor {
     isUtilityPanelVisible = true;
     isWorkspaceManagerVisible = true;
     isMoreMenuVisible = true;
+    isObjectDistanceFadingActive = false;
     syncConfig = DEFAULT_SYNC_CONFIG;
     assetStorageConfig = DEFAULT_ASSET_STORAGE_CONFIG;
     /** The element to use as the target for the cursor. Defaults to the editor container if not set. */
     cursorTarget;
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
-    loginConfig = {
-        providers: [
-            {
-                label: 'Sign in with Google',
-                icon: 'google',
-                name: 'Google',
-            },
-        ],
-    };
+    loginConfig;
     /** Whether the editor is in a loading state. When true, a loading overlay is displayed. */
     isLoading = false;
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
@@ -303,12 +296,18 @@ export class KritzelEditor {
     async addObject(object) {
         return this.engineRef.addObject(object);
     }
+    async addObjects(objects) {
+        return this.engineRef.addObjects(objects);
+    }
     async updateObject(object, updatedProperties) {
         return this.engineRef.updateObject(object, updatedProperties);
     }
     async removeObject(object) {
         return this.engineRef.removeObject(object);
     }
+    async removeObjects(objects) {
+        return this.engineRef.removeObjects(objects);
+    }
     async getSelectedObjects() {
         return this.engineRef.getSelectedObjects();
     }
@@ -324,12 +323,18 @@ export class KritzelEditor {
     async centerObjectInViewport(object) {
         return this.engineRef.centerObjectInViewport(object);
     }
+    async panToObject(object) {
+        return this.engineRef.panToObject(object);
+    }
     async backToContent() {
         return this.engineRef.backToContent();
     }
     async centerAllObjects(animate = true) {
         return this.engineRef.centerAllObjects(animate);
     }
+    async centerObjects(objects, animate = true) {
+        return this.engineRef.centerObjects(objects, animate);
+    }
     async setViewport(x, y, scale) {
         return this.engineRef.setViewport(x, y, scale);
     }
@@ -783,31 +788,31 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '3606d2318e6811f2f4b647f1531ff8bda409a401', style: {
+        return (h(Host, { key: '673bfb4d2d5224c3c3a11bada8afb1c3b90aa03d', style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, h("div", { key: '094e66c69a829a3d150cd672f66f3f092cf19623', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'b31a64b26f0f13a24bc07f2a5db8230ebc0377e2', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '9768ead0daf60292c649a0ccdb4dcd92d8ce342a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'cf4cf487da19cd10352a31dab4e50db4aaabfd7a', ref: el => {
+            } }, h("div", { key: 'cee9075de7a44953b3d017c334b19151ab7bb926', class: "top-left-buttons" }, 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) }), h("kritzel-back-to-content", { key: 'b5452a22f7fd434b8816bdaa117d457b2f1879f3', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'a08648ec91f678724171238735b1073ffb53ca73', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, 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.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) }), h("kritzel-controls", { key: 'eb0839b834e688f15461ebd7391c87b331a5b328', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
+            }, 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) }), h("kritzel-controls", { key: 'a7b78a31bda3fe2fe1def6be339894b83ea3ee38', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e5c14a118d245ef0ec1c5863eb21022a5e5d7c77', class: "top-right-buttons" }, h("kritzel-settings", { key: 'bad9ebae5bc91efaf388e525375ba263f0344374', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '0b3f4879c44864661a5bf5f126da3a869fa808f5', class: "top-right-buttons" }, h("kritzel-settings", { key: '7da7fb709f2e4a31a6df1f7382a91f4d78dc6e35', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, 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) }), h("kritzel-export", { key: 'ca28cd1057181b347af75ea51950114272bf33ec', ref: el => {
+            }, 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) }), h("kritzel-export", { key: 'f362b0181231da30efc927cbebd818a9a64991b0', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '1b667e832c1f231ecdd9ea0cca0504c6f4a82ce1', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'ec0a1827625f79435d20b8d53374eb29e7174f7e', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '0ddec61cc09b96797c33ae18c225ec967efed3e8', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'e9d41eff38bbd4e9420f8586559597f8ec9d6802', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'f3fd8a06f5cf0ac89c02d535ee30dec05c9e536f', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '1cf065fed9b27ffb19a3695425c797a3bc29fa51', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '7d6e8e227f36164daed7303645bdd490b362b4d0', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '1dcf1f5ae547f4c2c5b7ec88b34bcad0a2a4da28', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'cb80dea4bb9861b6d627399c9aad64075cb8944b', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'd12bc96d7af23941e4e054dadfddcf6429de6208', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '49bd9f85d4cb7ee0f8dc7d2b7248169848c36b9f', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '6c29a13069cd74972e94bbc245f26375fa95f4cc', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -844,7 +849,7 @@ export class KritzelEditor {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-max",
-                "defaultValue": "ABSOLUTE_SCALE_MAX"
+                "defaultValue": "1000"
             },
             "scaleMin": {
                 "type": "number",
@@ -864,7 +869,7 @@ export class KritzelEditor {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-min",
-                "defaultValue": "ABSOLUTE_SCALE_MIN"
+                "defaultValue": "0.0001"
             },
             "lockDrawingScale": {
                 "type": "boolean",
@@ -1288,6 +1293,26 @@ export class KritzelEditor {
                 "attribute": "is-more-menu-visible",
                 "defaultValue": "true"
             },
+            "isObjectDistanceFadingActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-object-distance-fading-active",
+                "defaultValue": "false"
+            },
             "syncConfig": {
                 "type": "unknown",
                 "mutable": false,
@@ -1311,7 +1336,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "DEFAULT_SYNC_CONFIG"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "assetStorageConfig": {
                 "type": "unknown",
@@ -1336,7 +1361,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "DEFAULT_ASSET_STORAGE_CONFIG"
+                "defaultValue": "{\n  providers: [],\n}"
             },
             "cursorTarget": {
                 "type": "unknown",
@@ -1382,8 +1407,7 @@ export class KritzelEditor {
                     "text": "Optional login configuration. When provided, a \"Sign in\" button is shown that opens a login dialog with the configured providers."
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "{\n    providers: [\n      {\n        label: 'Sign in with Google',\n        icon: 'google',\n        name: 'Google',\n      },\n    ],\n  }"
+                "setter": false
             },
             "isLoading": {
                 "type": "boolean",
@@ -1808,6 +1832,37 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "addObjects": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(objects: T[]) => Promise<T[]>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "T[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<T[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "updateObject": {
                 "complexType": {
                     "signature": "<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>) => Promise<T | null>",
@@ -1878,6 +1933,37 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "removeObjects": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(objects: T[]) => Promise<T[]>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "T[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<T[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "getSelectedObjects": {
                 "complexType": {
                     "signature": "() => Promise<KritzelBaseObject[]>",
@@ -2005,6 +2091,33 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "panToObject": {
+                "complexType": {
+                    "signature": "(object: KritzelBaseObject) => Promise<void>",
+                    "parameters": [{
+                            "name": "object",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "backToContent": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",
@@ -2043,6 +2156,37 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "centerObjects": {
+                "complexType": {
+                    "signature": "(objects: KritzelBaseObject[], animate?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>[]",
+                            "docs": ""
+                        }, {
+                            "name": "animate",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "setViewport": {
                 "complexType": {
                     "signature": "(x: number, y: number, scale: number) => Promise<void>",