kritzel-stencil 0.3.16 → 0.3.18

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

@@ -149,6 +149,11 @@ export class KritzelEngine {
     onThemeChange(newValue) {
         this.core.themeManager.setTheme(newValue);
     }
+    /** License key that, when valid, removes the "Powered by Kritzel" watermark. */
+    licenseKey;
+    onLicenseKeyChange(newValue) {
+        this.core.licenseManager.validate(newValue);
+    }
     /** An array of available themes for the editor. */
     themes;
     onThemesChange(newValue) {
@@ -157,6 +162,25 @@ export class KritzelEngine {
             this.core.themeManager.applyTheme(this.core.themeManager.currentTheme);
         }
     }
+    /** The current locale (language) code to apply to the editor, e.g. 'en', 'de', 'fr'. */
+    locale = 'en';
+    onLocaleChange(newValue) {
+        this.core.localizationManager.setLocale(newValue);
+    }
+    /** An array of available locale definitions (with optional partial term overrides). */
+    locales;
+    onLocalesChange(newValue) {
+        if (newValue && newValue.length > 0) {
+            this.core.localizationManager.registerLocales(newValue);
+            this.core.localizationManager.setLocale(this.locale);
+        }
+    }
+    /** The locale used to resolve terms missing from the active locale. */
+    fallbackLocale = 'en';
+    onFallbackLocaleChange(newValue) {
+        this.core.localizationManager.setFallbackLocale(newValue);
+        this.core.rerender();
+    }
     /** Left boundary of the viewport in world coordinates. Objects beyond this X position cannot be panned to. */
     viewportBoundaryLeft = -Infinity;
     onViewportBoundaryLeftChange(newValue) {
@@ -184,8 +208,10 @@ export class KritzelEngine {
             this.core.store.state.debugInfo = newValue;
         }
     }
-    /** When false, wheel events will not trigger viewport pan/zoom. The event still propagates to parent elements. */
-    wheelEnabled = true;
+    /** When false, non-modified wheel events do not pan the viewport. */
+    isPanningEnabled = true;
+    /** When false, Ctrl+wheel events do not zoom the viewport. */
+    isZoomingEnabled = true;
     /** External loading state. Combined with internal workspace-loading state to drive the overlay. */
     isLoading = false;
     onIsLoadingChange() {
@@ -228,13 +254,19 @@ export class KritzelEngine {
         if (this.core.store.isDisabled) {
             return;
         }
-        if (!this.wheelEnabled) {
-            return;
-        }
         if (this.core.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
-        this.viewport.handleWheel(ev);
+        if (ev.ctrlKey) {
+            if (this.isZoomingEnabled) {
+                this.viewport.handleWheel(ev);
+            }
+        }
+        else {
+            if (this.isPanningEnabled) {
+                this.viewport.handleWheel(ev);
+            }
+        }
         this.core.store.state?.activeTool?.handleWheel(ev);
     }
     handlePointerDown(ev) {
@@ -1070,7 +1102,7 @@ export class KritzelEngine {
     /**
      * Generates an SVG string from the currently selected objects.
      * Creates clean, standards-compliant SVG markup by directly serializing object properties.
-     * @param options - Optional export settings (theme, padding).
+     * @param options - Optional export settings (theme, padding, raster-safe mode for canvas export).
      * @returns SVG markup string, or null if no objects are selected.
      */
     async getSelectedObjectsAsSvgString(options) {
@@ -1079,10 +1111,16 @@ export class KritzelEngine {
             return null;
         }
         const theme = options?.theme ?? this.core.themeManager.getStoredTheme();
+        // Inline image bytes as data URLs so they survive both standalone SVG
+        // files and rasterization to PNG (a `blob:` href is not loaded when an
+        // SVG is drawn into a canvas, which otherwise yields a broken image).
+        const imageDataUrls = await KritzelSvgExportHelper.resolveImageDataUrls(selectedObjects, this.core.assetResolver);
         return KritzelSvgExportHelper.generateSvg(selectedObjects, {
             theme,
             padding: options?.padding ?? 0,
             includeXmlDeclaration: true,
+            rasterSafeForCanvas: options?.rasterSafeForCanvas ?? false,
+            imageDataUrls,
         });
     }
     /**
@@ -1121,6 +1159,9 @@ export class KritzelEngine {
         const svgString = await this.getSelectedObjectsAsSvgString({
             theme: options?.theme,
             padding: options?.padding,
+            // Avoid foreignObject-based text serialization, which taints the
+            // canvas in SVG->PNG conversion paths.
+            rasterSafeForCanvas: true,
         });
         if (!svgString) {
             return null;
@@ -1473,6 +1514,55 @@ export class KritzelEngine {
             return null;
         }
     }
+    /**
+     * Registers additional locale definitions (with optional partial term overrides).
+     * @param locales - The locale definitions to register.
+     */
+    async registerLocales(locales) {
+        this.core.localizationManager.registerLocales(locales);
+        this.core.localizationManager.setLocale(this.core.localizationManager.currentLocale);
+    }
+    /**
+     * Sets the active locale (language) and re-renders the UI.
+     * @param code - The locale code to activate, e.g. 'de'.
+     */
+    async setLocale(code) {
+        this.locale = code;
+        this.core.localizationManager.setLocale(code);
+    }
+    /**
+     * Gets the currently active locale code.
+     */
+    async getLocale() {
+        return this.core.localizationManager.currentLocale;
+    }
+    /**
+     * Gets the list of available locale codes (built-in and registered).
+     */
+    async getAvailableLocales() {
+        return this.core.localizationManager.getAvailableLocales();
+    }
+    /**
+     * Gets the list of available locales as `{ code, label }` options for a selector.
+     */
+    async getAvailableLocaleOptions() {
+        return this.core.localizationManager.getAvailableLocaleOptions();
+    }
+    /**
+     * Resolves a term key to its translated string for the active locale.
+     * @param key - The term key to resolve.
+     * @param vars - Optional values for `{placeholder}` interpolation.
+     */
+    async t(key, vars) {
+        return this.core.localizationManager.translate(key, vars);
+    }
+    /**
+     * Resolves every known term key for the active locale into a flat map.
+     * Useful for UI layers that need to localize many strings at once.
+     */
+    async getResolvedTerms() {
+        return this.core.localizationManager.getAllTerms();
+    }
     core;
     viewport;
     contextMenuHandler;
@@ -1548,6 +1638,7 @@ export class KritzelEngine {
         // Clean up managers
         this.core.cursorManager.cleanup();
         this.core.themeManager.cleanup();
+        this.core.licenseManager.destroy();
     }
     componentWillLoad() {
         this.core.setEditorId(this.editorId);
@@ -1556,6 +1647,13 @@ export class KritzelEngine {
         }
         const editorElement = this.host.closest('kritzel-editor');
         this.core.themeManager.injectThemeEarly(editorElement || this.host);
+        if (this.locales && this.locales.length > 0) {
+            this.core.localizationManager.registerLocales(this.locales);
+        }
+        this.core.localizationManager.setFallbackLocale(this.fallbackLocale);
+        this.core.localizationManager.setLocale(this.locale);
+        this.core.licenseManager.validate(this.licenseKey);
+        this.core.licenseManager.startPeriodicValidation();
         this.core.setUser(this.user);
         this.validateScaleMax(this.scaleMax);
         this.validateScaleMin(this.scaleMin);
@@ -1860,7 +1958,7 @@ export class KritzelEngine {
     }
     render() {
         if (!this.viewport) {
-            return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading..."))));
+            return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), this.core.localizationManager.translate('engine.loading')))));
         }
         const currentTheme = this.core.themeManager.getStoredTheme();
         const computedStyle = window.getComputedStyle(this.host);
@@ -2298,7 +2396,7 @@ export class KritzelEngine {
                     }, this.core.store.selectionGroup?.objects || []);
                 }
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && (h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') }))));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -2625,6 +2723,25 @@ export class KritzelEngine {
                 "attribute": "theme",
                 "defaultValue": "'light'"
             },
+            "licenseKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "License key that, when valid, removes the \"Powered by Kritzel\" watermark."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "license-key"
+            },
             "themes": {
                 "type": "unknown",
                 "mutable": false,
@@ -2649,6 +2766,84 @@ export class KritzelEngine {
                 "getter": false,
                 "setter": false
             },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LocaleCode",
+                    "resolved": "\"de\" | \"en\" | \"fr\" | string & {}",
+                    "references": {
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current locale (language) code to apply to the editor, e.g. 'en', 'de', 'fr'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'en'"
+            },
+            "locales": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelLocale[]",
+                    "resolved": "KritzelLocale[]",
+                    "references": {
+                        "KritzelLocale": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelLocale",
+                            "referenceLocation": "KritzelLocale"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of available locale definitions (with optional partial term overrides)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "fallbackLocale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LocaleCode",
+                    "resolved": "\"de\" | \"en\" | \"fr\" | string & {}",
+                    "references": {
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The locale used to resolve terms missing from the active locale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fallback-locale",
+                "defaultValue": "'en'"
+            },
             "viewportBoundaryLeft": {
                 "type": "number",
                 "mutable": false,
@@ -2753,7 +2948,27 @@ export class KritzelEngine {
                 "getter": false,
                 "setter": false
             },
-            "wheelEnabled": {
+            "isPanningEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When false, non-modified wheel events do not pan the viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-panning-enabled",
+                "defaultValue": "true"
+            },
+            "isZoomingEnabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -2765,12 +2980,12 @@ export class KritzelEngine {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When false, wheel events will not trigger viewport pan/zoom. The event still propagates to parent elements."
+                    "text": "When false, Ctrl+wheel events do not zoom the viewport."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "wheel-enabled",
+                "attribute": "is-zooming-enabled",
                 "defaultValue": "true"
             },
             "isLoading": {
@@ -4698,11 +4913,11 @@ export class KritzelEngine {
             },
             "getSelectedObjectsAsSvgString": {
                 "complexType": {
-                    "signature": "(options?: { theme?: \"light\" | \"dark\"; padding?: number; }) => Promise<string | null>",
+                    "signature": "(options?: { theme?: \"light\" | \"dark\"; padding?: number; rasterSafeForCanvas?: boolean; }) => Promise<string | null>",
                     "parameters": [{
                             "name": "options",
-                            "type": "{ theme?: \"light\" | \"dark\"; padding?: number; }",
-                            "docs": "- Optional export settings (theme, padding)."
+                            "type": "{ theme?: \"light\" | \"dark\"; padding?: number; rasterSafeForCanvas?: boolean; }",
+                            "docs": "- Optional export settings (theme, padding, raster-safe mode for canvas export)."
                         }],
                     "references": {
                         "Promise": {
@@ -4716,7 +4931,7 @@ export class KritzelEngine {
                     "text": "Generates an SVG string from the currently selected objects.\nCreates clean, standards-compliant SVG markup by directly serializing object properties.",
                     "tags": [{
                             "name": "param",
-                            "text": "options - Optional export settings (theme, padding)."
+                            "text": "options - Optional export settings (theme, padding, raster-safe mode for canvas export)."
                         }, {
                             "name": "returns",
                             "text": "SVG markup string, or null if no objects are selected."
@@ -5200,6 +5415,209 @@ export class KritzelEngine {
                             "text": "The stored settings, or null if nothing is stored or the value is invalid."
                         }]
                 }
+            },
+            "registerLocales": {
+                "complexType": {
+                    "signature": "(locales: KritzelLocale[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "locales",
+                            "type": "KritzelLocale[]",
+                            "docs": "- The locale definitions to register."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelLocale": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelLocale",
+                            "referenceLocation": "KritzelLocale"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Registers additional locale definitions (with optional partial term overrides).",
+                    "tags": [{
+                            "name": "param",
+                            "text": "locales - The locale definitions to register."
+                        }]
+                }
+            },
+            "setLocale": {
+                "complexType": {
+                    "signature": "(code: LocaleCode) => Promise<void>",
+                    "parameters": [{
+                            "name": "code",
+                            "type": "(string & {}) | \"en\" | \"de\" | \"fr\"",
+                            "docs": "- The locale code to activate, e.g. 'de'."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the active locale (language) and re-renders the UI.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "code - The locale code to activate, e.g. 'de'."
+                        }]
+                }
+            },
+            "getLocale": {
+                "complexType": {
+                    "signature": "() => Promise<LocaleCode>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    },
+                    "return": "Promise<LocaleCode>"
+                },
+                "docs": {
+                    "text": "Gets the currently active locale code.",
+                    "tags": []
+                }
+            },
+            "getAvailableLocales": {
+                "complexType": {
+                    "signature": "() => Promise<LocaleCode[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    },
+                    "return": "Promise<LocaleCode[]>"
+                },
+                "docs": {
+                    "text": "Gets the list of available locale codes (built-in and registered).",
+                    "tags": []
+                }
+            },
+            "getAvailableLocaleOptions": {
+                "complexType": {
+                    "signature": "() => Promise<{ code: LocaleCode; label: string; }[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    },
+                    "return": "Promise<{ code: LocaleCode; label: string; }[]>"
+                },
+                "docs": {
+                    "text": "Gets the list of available locales as `{ code, label }` options for a selector.",
+                    "tags": []
+                }
+            },
+            "t": {
+                "complexType": {
+                    "signature": "(key: KritzelTermKey, vars?: KritzelTermVars) => Promise<string>",
+                    "parameters": [{
+                            "name": "key",
+                            "type": "keyof KritzelTerms",
+                            "docs": "- The term key to resolve."
+                        }, {
+                            "name": "vars",
+                            "type": "{ [x: string]: string | number; }",
+                            "docs": "- Optional values for `{placeholder}` interpolation."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        },
+                        "KritzelTermVars": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelTermVars",
+                            "referenceLocation": "KritzelTermVars"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Resolves a term key to its translated string for the active locale.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "key - The term key to resolve."
+                        }, {
+                            "name": "param",
+                            "text": "vars - Optional values for `{placeholder}` interpolation."
+                        }]
+                }
+            },
+            "getResolvedTerms": {
+                "complexType": {
+                    "signature": "() => Promise<Partial<Record<KritzelTermKey, string>>>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    },
+                    "return": "Promise<Partial<Record<keyof KritzelTerms, string>>>"
+                },
+                "docs": {
+                    "text": "Resolves every known term key for the active locale into a flat map.\nUseful for UI layers that need to localize many strings at once.",
+                    "tags": []
+                }
             }
         };
     }
@@ -5244,9 +5662,21 @@ export class KritzelEngine {
             }, {
                 "propName": "theme",
                 "methodName": "onThemeChange"
+            }, {
+                "propName": "licenseKey",
+                "methodName": "onLicenseKeyChange"
             }, {
                 "propName": "themes",
                 "methodName": "onThemesChange"
+            }, {
+                "propName": "locale",
+                "methodName": "onLocaleChange"
+            }, {
+                "propName": "locales",
+                "methodName": "onLocalesChange"
+            }, {
+                "propName": "fallbackLocale",
+                "methodName": "onFallbackLocaleChange"
             }, {
                 "propName": "viewportBoundaryLeft",
                 "methodName": "onViewportBoundaryLeftChange"

package/dist/collection/components/core/kritzel-watermark/kritzel-watermark.css

@@ -0,0 +1,29 @@
+:host {
+  position: absolute;
+  bottom: var(--kritzel-watermark-offset-bottom, 12px);
+  right: var(--kritzel-watermark-offset-right, 12px);
+  z-index: 10000;
+  pointer-events: none;
+}
+
+.watermark-link {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: var(--kritzel-watermark-border-radius, 6px);
+  font-family: var(--kritzel-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  font-size: var(--kritzel-watermark-font-size, 11px);
+  line-height: 1;
+  text-decoration: none;
+  color: var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));
+  background-color: var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));
+  box-shadow: var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));
+  opacity: var(--kritzel-watermark-opacity, 0.85);
+  transition: opacity 150ms ease;
+  user-select: none;
+}
+
+.watermark-link:hover {
+  opacity: 1;
+}