kritzel-stencil 0.3.13 → 0.3.14

package/dist/collection/classes/core/viewport.class.js

@@ -395,6 +395,87 @@ export class KritzelViewport {
             this.setViewport(centerWorldX, centerWorldY, scale);
         }
     }
+    /**
+     * Zooms in by a fixed step, centered on the current viewport center,
+     * with a smooth animation. The resulting scale is clamped to the allowed range.
+     * @param factor - Multiplicative zoom-in step
+     * @param duration - Animation duration in milliseconds
+     */
+    zoomIn(factor, duration) {
+        this.animateZoomAroundViewportCenter(factor, duration);
+    }
+    /**
+     * Zooms out by a fixed step, centered on the current viewport center,
+     * with a smooth animation. The resulting scale is clamped to the allowed range.
+     * @param factor - Multiplicative zoom-out step
+     * @param duration - Animation duration in milliseconds
+     */
+    zoomOut(factor, duration) {
+        this.animateZoomAroundViewportCenter(1 / factor, duration);
+    }
+    /**
+     * Smoothly zooms around the viewport center, keeping the center world point
+     * fixed for the entire animation. The translation is recomputed from the fixed
+     * center point on every frame (rather than interpolated independently), which
+     * guarantees the center never drifts and the viewport does not jump.
+     * The resulting scale is clamped to the allowed range and the translation is
+     * clamped to the viewport boundaries.
+     * @param scaleFactor - Multiplicative scale factor (>1 zooms in, <1 zooms out)
+     * @param duration - Animation duration in milliseconds
+     */
+    animateZoomAroundViewportCenter(scaleFactor, duration) {
+        this.cancelViewportAnimation();
+        const state = this._core.store.state;
+        const startScale = state.scale;
+        const effectiveMinScale = this.getEffectiveMinScale();
+        const targetScale = Math.min(state.scaleMax, Math.max(effectiveMinScale, startScale * scaleFactor));
+        // The world point currently under the viewport center stays fixed.
+        const centerScreenX = state.viewportWidth / 2;
+        const centerScreenY = state.viewportHeight / 2;
+        const centerWorldX = (centerScreenX - state.translateX) / startScale;
+        const centerWorldY = (centerScreenY - state.translateY) / startScale;
+        if (targetScale === startScale || duration <= 0) {
+            this.applyZoomAroundCenter(targetScale, centerScreenX, centerScreenY, centerWorldX, centerWorldY);
+            state.isScaling = true;
+            this._core.rerender();
+            this._debounceUpdate();
+            this._debounceEndScaling();
+            return;
+        }
+        const startTime = performance.now();
+        state.isScaling = true;
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            // easeInOutCubic for a smooth ramp in and out
+            const eased = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+            const frameScale = startScale + (targetScale - startScale) * eased;
+            this.applyZoomAroundCenter(frameScale, centerScreenX, centerScreenY, centerWorldX, centerWorldY);
+            this._core.rerender();
+            if (progress < 1) {
+                this._animationFrameId = requestAnimationFrame(animate);
+            }
+            else {
+                this._animationFrameId = null;
+                state.isScaling = false;
+                this._core.rerender();
+                this._debounceUpdate();
+            }
+        };
+        this._animationFrameId = requestAnimationFrame(animate);
+    }
+    /**
+     * Applies a single zoom step that keeps the given world point anchored to the
+     * given screen point at the specified scale, clamped to the viewport boundaries.
+     */
+    applyZoomAroundCenter(scale, screenX, screenY, worldX, worldY) {
+        const state = this._core.store.state;
+        state.scale = scale;
+        const clamped = this.clampTranslate(screenX - worldX * scale, screenY - worldY * scale);
+        state.translateX = clamped.translateX;
+        state.translateY = clamped.translateY;
+        state.hasViewportChanged = true;
+    }
     /**
      * Centers a given object in the viewport without changing the scale.
      * The object's center point will be positioned at the viewport center.

package/dist/collection/classes/objects/image.class.js

@@ -328,6 +328,68 @@ export class KritzelImage extends KritzelBaseObject {
             this.migrateLegacyDataUrlIfNeeded();
         }
     }
+    /**
+     * Prepares image objects for insertion into the canvas while preserving
+     * the standard object-first flow (`new KritzelImage(...); addObject(image)`).
+     *
+     * Behavior:
+     * - If `assetId` is already set, no-op.
+     * - If `src` is set (URL or data URL), uploads bytes through the asset
+     *   resolver, fills `assetId`/`mimeType`, computes dimensions when needed,
+     *   and seeds `resolvedSrc` for immediate rendering.
+     */
+    async prepareForInsert() {
+        if (this.assetId || !this.src) {
+            return;
+        }
+        if (!this._core?.assetResolver) {
+            return;
+        }
+        const source = this.src;
+        const response = await fetch(source);
+        if (!response.ok) {
+            throw new Error(`Failed to load image source: ${source} (HTTP ${response.status})`);
+        }
+        const blob = await response.blob();
+        const mimeType = blob.type || 'image/png';
+        const { naturalWidth, naturalHeight } = await this.measureImageBlob(blob);
+        const asset = await this._core.assetResolver.put(blob, {
+            mimeType,
+            kind: 'image',
+            width: naturalWidth,
+            height: naturalHeight,
+        });
+        this.assetId = asset.id;
+        this.mimeType = asset.mimeType;
+        if (this.width <= 0 || this.height <= 0) {
+            const { scaledWidth, scaledHeight } = this.calculateScaledDimensions({
+                width: naturalWidth,
+                height: naturalHeight,
+            });
+            this.width = scaledWidth;
+            this.height = scaledHeight;
+        }
+        this.resolvedSrc = await this._core.assetResolver.resolve(asset.id);
+        this.loadState = 'ready';
+        this.src = '';
+    }
+    /**
+     * Measures intrinsic image dimensions from a Blob.
+     */
+    async measureImageBlob(blob) {
+        const objectUrl = URL.createObjectURL(blob);
+        try {
+            return await new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => resolve({ naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight });
+                img.onerror = err => reject(err);
+                img.src = objectUrl;
+            });
+        }
+        finally {
+            URL.revokeObjectURL(objectUrl);
+        }
+    }
     /**
      * Overrides base mount to kick off asset resolution the first time
      * the image is attached to the DOM. Legacy images persisted with an

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

@@ -344,6 +344,12 @@ export class KritzelEditor {
     async zoomTo(scale, worldX, worldY) {
         return this.engineRef.zoomTo(scale, worldX, worldY);
     }
+    async zoomIn(factor = 1.6, duration = 200) {
+        return this.engineRef.zoomIn(factor, duration);
+    }
+    async zoomOut(factor = 1.6, duration = 200) {
+        return this.engineRef.zoomOut(factor, duration);
+    }
     async getViewport() {
         return this.engineRef.getViewport();
     }
@@ -429,14 +435,14 @@ export class KritzelEditor {
     async redo() {
         return this.engineRef.redo();
     }
-    async getScreenshot(format = 'png') {
-        return this.engineRef.getScreenshot(format);
+    async getScreenshot(format = 'png', options) {
+        return this.engineRef.getScreenshot(format, options);
     }
-    async exportViewportAsPng() {
-        return this.engineRef.exportViewportAsPng();
+    async exportViewportAsPng(options) {
+        return this.engineRef.exportViewportAsPng(options);
     }
-    async exportViewportAsSvg() {
-        return this.engineRef.exportViewportAsSvg();
+    async exportViewportAsSvg(options) {
+        return this.engineRef.exportViewportAsSvg(options);
     }
     async exportSelectedObjectsAsPng() {
         return this.engineRef.exportSelectedObjectsAsPng();
@@ -788,31 +794,31 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '673bfb4d2d5224c3c3a11bada8afb1c3b90aa03d', style: {
+        return (h(Host, { key: 'ffacaea5d3df12a3a8b448d31db3c5949053156c', 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: '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 => {
+            } }, h("div", { key: '669eafee25b4f84c39469738a1337c21ab03e388', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'd6feb4a71c3286830fbe53a533f283c8af9a0385', 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: '5bd0e6263d51119b197292b69879c1ae437f92fc', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '468f17137c51c90fd61c9179d13c449b1ac8feb9', 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, 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 => {
+            }, 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: '848c30b27fb916c8480b41745bd6ec844e0b23a2', 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: '0b3f4879c44864661a5bf5f126da3a869fa808f5', class: "top-right-buttons" }, h("kritzel-settings", { key: '7da7fb709f2e4a31a6df1f7382a91f4d78dc6e35', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e998d60679c767d15617bd7ecde5ee77e781a92f', class: "top-right-buttons" }, h("kritzel-settings", { key: '43b9cdb2d10de789cc03d2a9ef5df870b8ca7bfe', 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: 'f362b0181231da30efc927cbebd818a9a64991b0', 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: '74669624a1e5177125ef00e1667c880ce47cbce4', 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: '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 => {
+            }, 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: '18d925f32d021ff6713accb22d0594d259d70f2e', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'bddd5c29c5f17cced47276c237c04cfdb711da38', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '4eb6c85459f59863d6e644ecf21c2295da71bafc', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'a5a323ec248bebc7bc07898f344e0926fac8db17', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: '8cb3ddad95d36f5b7ad59d8c4f057df93cb2bfe3', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '6c29a13069cd74972e94bbc245f26375fa95f4cc', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '35395d0faadcfeb021fba685aa46e180e47d2be2', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -2270,6 +2276,56 @@ export class KritzelEditor {
                     "tags": []
                 }
             },
+            "zoomIn": {
+                "complexType": {
+                    "signature": "(factor?: number, duration?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "factor",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "duration",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "zoomOut": {
+                "complexType": {
+                    "signature": "(factor?: number, duration?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "factor",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "duration",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "getViewport": {
                 "complexType": {
                     "signature": "() => Promise<KritzelViewportState>",
@@ -2930,11 +2986,15 @@ export class KritzelEditor {
             },
             "getScreenshot": {
                 "complexType": {
-                    "signature": "(format?: \"png\" | \"svg\") => Promise<string | null>",
+                    "signature": "(format?: \"png\" | \"svg\", options?: { includeBackground?: boolean; }) => Promise<string | null>",
                     "parameters": [{
                             "name": "format",
                             "type": "\"svg\" | \"png\"",
                             "docs": ""
+                        }, {
+                            "name": "options",
+                            "type": "{ includeBackground?: boolean; }",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -2951,8 +3011,12 @@ export class KritzelEditor {
             },
             "exportViewportAsPng": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: { includeBackground?: boolean; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "{ includeBackground?: boolean; }",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -2968,8 +3032,12 @@ export class KritzelEditor {
             },
             "exportViewportAsSvg": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: { includeBackground?: boolean; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "{ includeBackground?: boolean; }",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",