kritzel-stencil 0.0.155 → 0.0.157

package/dist/stencil/kritzel-editor.entry.js

@@ -0,0 +1,248 @@
+import { r as registerInstance, a as createEvent, e as getElement, h, d as Host } from './index-DniO_INI.js';
+import { K as KritzelIconRegistry } from './icon-registry.class-BtT8riKh.js';
+import { c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, a as KritzelEraserTool, d as DEFAULT_TEXT_CONFIG, b as KritzelImageTool } from './default-text-tool.config-DKpRP4XR.js';
+import { b as KritzelBrushTool, c as KritzelTextTool, d as KritzelKeyboardHelper } from './text-tool.class-C0GbC5zQ.js';
+import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN } from './engine.constants-DsjjAmnl.js';
+import { K as KritzelWorkspace } from './workspace.class-n789Y3S-.js';
+import { K as KritzelDevicesHelper } from './devices.helper-l10It7Nm.js';
+import './object.helper-B0kd2rUI.js';
+import './event-button.enum-D8W6LE-c.js';
+
+const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}";
+
+const KritzelEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isReady = createEvent(this, "isReady", 7);
+        this.objectsChange = createEvent(this, "objectsChange", 7);
+        this.undoStateChange = createEvent(this, "undoStateChange", 7);
+    }
+    get host() { return getElement(this); }
+    scaleMax = ABSOLUTE_SCALE_MAX;
+    scaleMin = ABSOLUTE_SCALE_MIN;
+    controls = [
+        {
+            name: 'selection',
+            type: 'tool',
+            isDefault: true,
+            tool: KritzelSelectionTool,
+            icon: 'cursor',
+        },
+        {
+            name: 'brush',
+            type: 'tool',
+            tool: KritzelBrushTool,
+            icon: 'pen',
+            config: DEFAULT_BRUSH_CONFIG,
+        },
+        {
+            name: 'eraser',
+            type: 'tool',
+            tool: KritzelEraserTool,
+            icon: 'eraser',
+        },
+        {
+            name: 'text',
+            type: 'tool',
+            tool: KritzelTextTool,
+            icon: 'type',
+            config: DEFAULT_TEXT_CONFIG,
+        },
+        {
+            name: 'image',
+            type: 'tool',
+            tool: KritzelImageTool,
+            icon: 'image',
+        },
+        {
+            name: 'divider',
+            type: 'divider',
+        },
+        {
+            name: 'config',
+            type: 'config',
+        },
+    ];
+    globalContextMenuItems = [
+        {
+            label: 'Paste',
+            icon: 'paste',
+            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
+            action: menu => this.engineRef.paste(menu.x, menu.y),
+        },
+        { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
+    ];
+    objectContextMenuItems = [
+        { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
+        {
+            label: 'Paste',
+            icon: 'paste',
+            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
+            action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
+        },
+        { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
+        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
+        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
+    ];
+    customSvgIcons = {};
+    isControlsVisible = true;
+    isUtilityPanelVisible = true;
+    syncConfig;
+    isReady;
+    objectsChange;
+    undoStateChange;
+    isEngineReady = false;
+    isControlsReady = false;
+    isWorkspaceManagerReady = false;
+    workspaces = [];
+    activeWorkspace;
+    isVirtualKeyboardOpen = false;
+    undoState = null;
+    onIsEngineReady(newValue) {
+        if (newValue && this.isControlsReady) {
+            this.checkIsReady();
+        }
+    }
+    onIsControlsReady(newValue) {
+        if (newValue && this.isEngineReady) {
+            this.checkIsReady();
+        }
+    }
+    onWorkspacesChange(newWorkspaces) {
+        if (this.activeWorkspace) {
+            const updatedActiveWorkspace = newWorkspaces.find(ws => ws.id === this.activeWorkspace.id);
+            if (updatedActiveWorkspace && updatedActiveWorkspace !== this.activeWorkspace) {
+                this.activeWorkspace = updatedActiveWorkspace;
+            }
+        }
+    }
+    onTouchStart(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+    }
+    async getObjectById(id) {
+        return this.engineRef.getObjectById(id);
+    }
+    async addObject(object) {
+        return this.engineRef.addObject(object);
+    }
+    async updateObject(object, updatedProperties) {
+        return this.engineRef.updateObject(object, updatedProperties);
+    }
+    async removeObject(object) {
+        return this.engineRef.removeObject(object);
+    }
+    async getSelectedObjects() {
+        return this.engineRef.getSelectedObjects();
+    }
+    async selectObjects(objects) {
+        return this.engineRef.selectObjects(objects);
+    }
+    async selectAllObjectsInViewport() {
+        return this.engineRef.selectAllObjectsInViewport();
+    }
+    async clearSelection() {
+        this.engineRef.clearSelection();
+    }
+    async centerObjectInViewport(object) {
+        return this.engineRef.centerObjectInViewport(object);
+    }
+    async createWorkspace(name, viewport) {
+        const workspace = new KritzelWorkspace(`workspace-${Date.now()}`, name, viewport);
+        return this.engineRef.createWorkspace(workspace);
+    }
+    async updateWorkspace(workspace) {
+        return this.engineRef.updateWorkspace(workspace);
+    }
+    async deleteWorkspace(workspace) {
+        return this.engineRef.deleteWorkspace(workspace);
+    }
+    async getWorkspaces() {
+        return this.engineRef.getWorkspaces();
+    }
+    async getActiveWorkspace() {
+        return this.engineRef.getActiveWorkspace();
+    }
+    engineRef;
+    controlsRef;
+    splitButtonRef;
+    componentDidLoad() {
+        this.registerCustomSvgIcons();
+        this.listenForMobileKeyboard();
+        this.setOsSpecificCssVariables();
+    }
+    async checkIsReady() {
+        await customElements.whenDefined('kritzel-editor');
+        await customElements.whenDefined('kritzel-workspace-manager');
+        await customElements.whenDefined('kritzel-controls');
+        await customElements.whenDefined('kritzel-engine');
+        if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady) {
+            return;
+        }
+        this.isReady.emit(this.host);
+    }
+    onEngineReady(event) {
+        this.isEngineReady = true;
+        this.activeWorkspace = event.detail.activeWorkspace;
+        this.workspaces = event.detail.workspaces;
+    }
+    handleWorkspacesChange(event) {
+        this.workspaces = event.detail;
+    }
+    handleObjectsChange(event) {
+        this.objectsChange.emit(event.detail);
+    }
+    handleUndoStateChange(event) {
+        this.undoStateChange.emit(event.detail);
+        this.undoState = event.detail;
+    }
+    registerCustomSvgIcons() {
+        for (const [name, svg] of Object.entries(this.customSvgIcons)) {
+            KritzelIconRegistry.register(name, svg);
+        }
+    }
+    listenForMobileKeyboard() {
+        KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
+            this.isVirtualKeyboardOpen = isOpen;
+        });
+    }
+    setOsSpecificCssVariables() {
+        const os = KritzelDevicesHelper.detectOS();
+        switch (os) {
+            case 'iOS':
+                // iOS specific adjustments
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');
+                this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');
+                this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');
+                break;
+            case 'Android':
+                // Android specific adjustments
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');
+                break;
+            default:
+                // Default for Windows/Linux
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');
+                break;
+        }
+    }
+    render() {
+        return (h(Host, { key: '67146704b8a3cb7a70f327d281427adedcfb4e9e' }, h("kritzel-workspace-manager", { key: '416361c4f145a520cb584a3303b1cf8985c94400', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '39e80a4d7628b1537c0436e788d7e68bb02a1f64', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '3d20e1ebffab5106c9531b5451da3441178d752a', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+    }
+    static get watchers() { return {
+        "isEngineReady": ["onIsEngineReady"],
+        "isControlsReady": ["onIsControlsReady"],
+        "workspaces": ["onWorkspacesChange"]
+    }; }
+};
+KritzelEditor.style = kritzelEditorCss;
+
+export { KritzelEditor as kritzel_editor };
+//# sourceMappingURL=kritzel-editor.entry.esm.js.map