@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-tool-config/kritzel-tool-config.js

@@ -0,0 +1,467 @@
+import { Host, h } from "@stencil/core";
+import { KritzelToolConfigHelper } from "@kritzel/engine";
+import { KritzelColorHelper } from "@kritzel/engine";
+import { resolveTextToolAvailableFonts } from "@kritzel/engine";
+import { KritzelFontRegistry } from "@kritzel/engine";
+export class KritzelToolConfig {
+    tool;
+    handleToolChange(newTool, oldTool) {
+        const newConfig = KritzelToolConfigHelper.getToolConfig(newTool);
+        // Maintain settings when switching between shape tools
+        if (oldTool && newTool && newConfig?.type === 'shape') {
+            const oldConfig = KritzelToolConfigHelper.getToolConfig(oldTool);
+            if (oldConfig?.type === 'shape') {
+                // Copy properties that should persist
+                const propsToCopy = [
+                    newConfig.colorProperty, // strokeColor
+                    newConfig.sizeProperty, // strokeWidth
+                    newConfig.opacityProperty, // opacity
+                    'fillColor' // shape specific
+                ];
+                propsToCopy.forEach(prop => {
+                    if (prop && oldTool[prop] !== undefined) {
+                        newTool[prop] = oldTool[prop];
+                    }
+                });
+            }
+        }
+        this.config = newConfig;
+        if (this.config) {
+            this.updatePalette();
+            this.updateSizes();
+            this.currentOpacity = newTool[this.config.opacityProperty] ?? 1;
+            // Emit the values since they might have been updated from the old tool
+            this.emitDisplayValues();
+        }
+    }
+    isExpanded = false;
+    theme;
+    engine;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
+    onThemeChange() {
+        this.emitDisplayValues();
+    }
+    handleEngineChange(newEngine, oldEngine) {
+        if (oldEngine) {
+            oldEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+        if (newEngine) {
+            newEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    toolChange;
+    displayValuesChange;
+    config;
+    palette = [];
+    sizes = [];
+    currentOpacity = 1;
+    updateTrigger = 0;
+    getFontOptionsFromTool() {
+        const configuredFonts = resolveTextToolAvailableFonts(this.tool.availableFonts).map(font => {
+            const registeredFont = typeof font === 'string'
+                ? {
+                    family: font,
+                    label: font,
+                    cssFontFamily: font,
+                }
+                : {
+                    family: font.family,
+                    label: font.label ?? font.family,
+                    cssFontFamily: font.cssFontFamily ?? font.family,
+                };
+            return {
+                value: registeredFont.family,
+                label: registeredFont.label,
+                cssFontFamily: registeredFont.cssFontFamily,
+            };
+        });
+        const mergedFonts = [...configuredFonts];
+        const seenFonts = new Set(mergedFonts.map(font => font.value.trim().toLocaleLowerCase()));
+        for (const font of KritzelFontRegistry.list()) {
+            const normalizedValue = font.family.trim().toLocaleLowerCase();
+            if (seenFonts.has(normalizedValue)) {
+                continue;
+            }
+            seenFonts.add(normalizedValue);
+            mergedFonts.push({
+                value: font.family,
+                label: font.label,
+                cssFontFamily: font.cssFontFamily,
+            });
+        }
+        return mergedFonts;
+    }
+    handleSelectionChange() {
+        if (this.tool?.toolType === 'selection') {
+            this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+            if (this.config) {
+                this.updatePalette();
+                this.updateSizes();
+                this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+                this.emitDisplayValues();
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.engine) {
+            this.engine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    componentWillLoad() {
+        this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+        if (this.config) {
+            this.updatePalette();
+            this.updateSizes();
+            this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+            this.emitDisplayValues();
+        }
+        if (this.engine) {
+            this.engine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    emitDisplayValues() {
+        if (!this.config)
+            return;
+        const color = this.tool[this.config.colorProperty];
+        const opacity = this.currentOpacity;
+        const size = this.tool[this.config.sizeProperty];
+        const displayValues = {
+            color: KritzelColorHelper.applyOpacity(color, opacity, this.theme),
+            size,
+        };
+        if (this.tool.toolType === 'text') {
+            displayValues.fontFamily = this.tool.fontFamily;
+        }
+        this.displayValuesChange.emit(displayValues);
+    }
+    updatePalette() {
+        if (!this.config)
+            return;
+        if (this.config.paletteSource === 'none') {
+            this.palette = [];
+        }
+        else {
+            this.palette = this.tool.palette || [];
+        }
+    }
+    updateSizes() {
+        if (!this.config)
+            return;
+        if (this.config.sizesSource === 'none') {
+            this.sizes = [];
+        }
+        else {
+            this.sizes = this.tool.sizes || [];
+        }
+    }
+    handleToggleExpand = () => {
+        this.isExpanded = !this.isExpanded;
+    };
+    handleColorChange = (event) => {
+        this.tool[this.config.colorProperty] = event.detail;
+        // Special handling for shape fill: when color (stroke) changes, update fill color if it's currently filled
+        if (this.config.type === 'shape' || this.config.type === 'selection') {
+            const tool = this.tool;
+            const isTransparent = typeof tool.fillColor === 'string' ? tool.fillColor === 'transparent' :
+                (tool.fillColor.light === 'transparent' && tool.fillColor.dark === 'transparent');
+            if (!isTransparent) {
+                tool.fillColor = event.detail;
+            }
+        }
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleSizeChange = (event) => {
+        this.tool[this.config.sizeProperty] = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleOpacityChange = (event) => {
+        this.tool[this.config.opacityProperty] = event.detail;
+        this.currentOpacity = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+    };
+    handlePropertyChange = (propertyName, value) => {
+        // Special handling for shape fill
+        if ((this.config.type === 'shape' || this.config.type === 'selection') && propertyName === 'fillColor') {
+            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : { light: 'transparent', dark: 'transparent' };
+            this.tool.fillColor = newFillColor;
+            // When switching to fill mode, also update stroke color to match
+            if (value === 'filled') {
+                this.tool[this.config.colorProperty] = newFillColor;
+            }
+        }
+        else {
+            this.tool[propertyName] = value;
+            // Emit display values for font family changes
+            if (propertyName === 'fontFamily') {
+                this.emitDisplayValues();
+            }
+        }
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    getShapeFillValue() {
+        const fillColor = this.tool.fillColor;
+        const isTransparent = typeof fillColor === 'string' ? fillColor === 'transparent' :
+            (fillColor.light === 'transparent' && fillColor.dark === 'transparent');
+        return isTransparent ? 'transparent' : 'filled';
+    }
+    renderControl(control) {
+        const value = this.tool[control.propertyName];
+        switch (control.type) {
+            case 'stroke-size':
+                return (h("kritzel-stroke-size", { key: control.type, sizes: this.sizes, selectedSize: value, onSizeChange: this.handleSizeChange }));
+            case 'font-size':
+                return (h("kritzel-font-size", { key: control.type, sizes: this.sizes, selectedSize: value, fontFamily: this.tool.fontFamily, onSizeChange: this.handleSizeChange }));
+            case 'line-endings':
+                return (h("kritzel-line-endings", { key: control.type, value: value, onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'shape-fill':
+                return (h("kritzel-shape-fill", { key: control.type, value: this.getShapeFillValue(), onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'font-family':
+                return (h("kritzel-font-family", { key: control.type, fontOptions: this.getFontOptionsFromTool(), selectedFontFamily: value, onFontFamilyChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            default:
+                return null;
+        }
+    }
+    render() {
+        if (!this.config)
+            return null;
+        const shouldShowExpandButton = this.palette.length > 6 || this.config.type === 'text';
+        const shouldShowColorPalette = this.palette.length > 0;
+        // Separate size control from other controls
+        const sizeControl = this.config.controls.find(c => c.type === 'stroke-size' || c.type === 'font-size');
+        const otherControls = this.config.controls.filter(c => c.type !== 'stroke-size' && c.type !== 'font-size');
+        return (h(Host, null, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                gap: '8px',
+                width: '100%',
+            } }, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                flex: '1',
+            } }, shouldShowColorPalette && (h("kritzel-color-palette", { colors: this.palette, selectedColor: this.tool[this.config.colorProperty], isExpanded: this.isExpanded, isOpaque: true, opacity: this.currentOpacity, theme: this.theme, onColorChange: this.handleColorChange })), sizeControl && this.renderControl(sizeControl), h("kritzel-opacity-slider", { value: this.tool[this.config.opacityProperty], previewColor: this.tool[this.config.colorProperty], onValueChange: this.handleOpacityChange }), otherControls.map((control) => [
+            h("div", { class: "divider" }),
+            this.renderControl(control),
+        ])), shouldShowExpandButton && (h("div", { style: {
+                display: 'flex',
+                alignItems: 'flex-start',
+            } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? (this.terms['toolConfig.collapse'] ?? 'Collapse') : (this.terms['toolConfig.expand'] ?? 'Expand') }, h("kritzel-icon", { name: this.isExpanded ? 'chevron-up' : 'chevron-down' })))))));
+    }
+    static get is() { return "kritzel-tool-config"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-tool-config.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-tool-config.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tool": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ConfigurableTool",
+                    "resolved": "KritzelBaseTool",
+                    "references": {
+                        "ConfigurableTool": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ConfigurableTool",
+                            "referenceLocation": "ConfigurableTool"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expanded",
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
+                    "references": {
+                        "ThemeName": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            },
+            "engine": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"editor.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "config": {},
+            "palette": {},
+            "sizes": {},
+            "currentOpacity": {},
+            "updateTrigger": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toolChange",
+                "name": "toolChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ConfigurableTool",
+                    "resolved": "KritzelBaseTool",
+                    "references": {
+                        "ConfigurableTool": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ConfigurableTool",
+                            "referenceLocation": "ConfigurableTool"
+                        }
+                    }
+                }
+            }, {
+                "method": "displayValuesChange",
+                "name": "displayValuesChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ToolDisplayValues",
+                    "resolved": "ToolDisplayValues",
+                    "references": {
+                        "ToolDisplayValues": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::ToolDisplayValues",
+                            "referenceLocation": "ToolDisplayValues"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "tool",
+                "methodName": "handleToolChange"
+            }, {
+                "propName": "theme",
+                "methodName": "onThemeChange"
+            }, {
+                "propName": "engine",
+                "methodName": "handleEngineChange"
+            }];
+    }
+}