kritzel-stencil 0.0.119 → 0.0.120

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

@@ -1 +1 @@
-{"version":3,"file":"kritzel-editor.js","sourceRoot":"","sources":["../../../../src/components/core/kritzel-editor/kritzel-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Element, h, Method, Event, State, EventEmitter, Watch } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { DEFAULT_KRITZEL_CONTROLS } from '../../../configs/default-toolbar-controls';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n@Component({\r\n  tag: 'kritzel-editor',\r\n  styleUrl: 'kritzel-editor.css',\r\n  shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n  @Prop()\r\n  controls: KritzelToolbarControl[] = DEFAULT_KRITZEL_CONTROLS;\r\n\r\n  @Prop()\r\n  customSvgIcons: Record<string, string> = {};\r\n\r\n  @Prop()\r\n  hideControls: boolean = false;\r\n\r\n  @Event()\r\n  isReady: EventEmitter<HTMLElement>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  @State()\r\n  isEngineReady: boolean = false;\r\n\r\n  @State()\r\n  isControlsReady: boolean = false;\r\n\r\n  @Watch('isEngineReady')\r\n  onIsEngineReady(newValue: boolean) {\r\n    if (newValue && this.isControlsReady) {\r\n      this.checkIsReady();\r\n    }\r\n  }\r\n\r\n  @Watch('isControlsReady')\r\n  onIsControlsReady(newValue: boolean) {\r\n    if (newValue && this.isEngineReady) {\r\n      this.checkIsReady();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null> {\r\n    return this.engineRef.getObjectById(id);\r\n  }\r\n\r\n  @Method()\r\n  async addObject<T extends KritzelBaseObject>(object: T): Promise<T | null> {\r\n    return this.engineRef.addObject(object);\r\n  }\r\n\r\n  @Method()\r\n  async updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T | null> {\r\n    return this.engineRef.updateObject(object, updatedProperties);\r\n  }\r\n\r\n  @Method()\r\n  async removeObject<T extends KritzelBaseObject>(object: T): Promise<T | null> {\r\n    return this.engineRef.removeObject(object);\r\n  }\r\n\r\n  @Method()\r\n  async getSelectedObjects(): Promise<KritzelBaseObject[]> {\r\n    return this.engineRef.getSelectedObjects();\r\n  }\r\n\r\n  @Method()\r\n  async selectObjects(objects: KritzelBaseObject[]) {\r\n    return this.engineRef.selectObjects(objects);\r\n  }\r\n\r\n  @Method()\r\n  async selectAllObjectsInViewport() {\r\n    return this.engineRef.selectAllObjectsInViewport();\r\n  }\r\n\r\n  @Method()\r\n  async clearSelection() {\r\n    this.engineRef.clearSelection();\r\n  }\r\n\r\n  @Method()\r\n  async centerObjectInViewport(object: KritzelBaseObject) {\r\n    return this.engineRef.centerObjectInViewport(object);\r\n  }\r\n\r\n  @Listen('dblclick', { passive: false })\r\n  handleTouchStart(event: TouchEvent) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.controlsRef?.closeTooltip();\r\n    }\r\n  }\r\n\r\n  engineRef!: HTMLKritzelEngineElement;\r\n\r\n  controlsRef!: HTMLKritzelControlsElement;\r\n\r\n  componentDidLoad() {\r\n    this.registerCustomSvgIcons();\r\n  }\r\n\r\n  async checkIsReady() {\r\n    await customElements.whenDefined('kritzel-editor');\r\n    await customElements.whenDefined('kritzel-controls');\r\n    await customElements.whenDefined('kritzel-engine');\r\n\r\n    if (!this.isEngineReady || !this.isControlsReady) {\r\n      return;\r\n    }\r\n\r\n    this.isReady.emit(this.host);\r\n  }\r\n\r\n  private registerCustomSvgIcons() {\r\n    for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n      KritzelIconRegistry.register(name, svg);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <kritzel-engine ref={el => (this.engineRef = el)} onIsEngineReady={() => (this.isEngineReady = true)}></kritzel-engine>\r\n        <kritzel-controls\r\n          ref={el => (this.controlsRef = el)}\r\n          controls={this.controls}\r\n          style={this.hideControls ? { display: 'none' } : { display: 'flex' }}\r\n          onIsControlsReady={() => (this.isControlsReady = true)}\r\n        ></kritzel-controls>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-editor.js","sourceRoot":"","sources":["../../../../src/components/core/kritzel-editor/kritzel-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Element, h, Method, Event, State, EventEmitter, Watch } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\nimport { KritzelSelectionTool } from '../../../classes/tools/selection-tool.class';\r\nimport { KritzelEraserTool } from '../../../classes/tools/eraser-tool.class';\r\nimport { KritzelImageTool } from '../../../classes/tools/image-tool.class';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { DEFAULT_BRUSH_CONFIG } from '../../../configs/default-brush-tool.config';\r\nimport { DEFAULT_TEXT_CONFIG } from '../../../configs/default-text-tool.config';\r\nimport { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from '../../../constants/engine.constants';\r\n\r\n@Component({\r\n  tag: 'kritzel-editor',\r\n  styleUrl: 'kritzel-editor.css',\r\n  shadow: false,\r\n})\r\nexport class KritzelEditor {\r\n  @Prop()\r\n  scaleMax: number = ABSOLUTE_SCALE_MAX;\r\n\r\n  @Prop()\r\n  scaleMin: number = ABSOLUTE_SCALE_MIN;\r\n\r\n  @Prop()\r\n  controls: KritzelToolbarControl[] = [\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      tool: KritzelSelectionTool,\r\n      icon: 'cursor',\r\n    },\r\n    {\r\n      name: 'brush',\r\n      type: 'tool',\r\n      tool: KritzelBrushTool,\r\n      isDefault: true,\r\n      icon: 'pen',\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'eraser',\r\n      type: 'tool',\r\n      tool: KritzelEraserTool,\r\n      icon: 'eraser',\r\n    },\r\n    {\r\n      name: 'text',\r\n      type: 'tool',\r\n      tool: KritzelTextTool,\r\n      icon: 'type',\r\n      config: DEFAULT_TEXT_CONFIG,\r\n    },\r\n    {\r\n      name: 'image',\r\n      type: 'tool',\r\n      tool: KritzelImageTool,\r\n      icon: 'image',\r\n    },\r\n    {\r\n      name: 'divider',\r\n      type: 'divider',\r\n    },\r\n    {\r\n      name: 'config',\r\n      type: 'config',\r\n    },\r\n  ];\r\n\r\n  @Prop()\r\n  globalContextMenuItems: ContextMenuItem[] = [\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n      action: menu => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },\r\n  ];\r\n\r\n  @Prop()\r\n  objectContextMenuItems: ContextMenuItem[] = [\r\n    {\r\n      label: 'Edit',\r\n      icon: 'pen',\r\n      visible: (_, objects) => objects.length === 1 && objects[0].isEditable,\r\n      action: (_, objects) => {\r\n        if (objects.length === 1) {\r\n          const object = objects[0];\r\n          if (object.isEditable) {\r\n            object.edit();\r\n          }\r\n        }\r\n      }\r\n    },\r\n    { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,\r\n      action: menu => this.engineRef.paste(menu.x, menu.y),\r\n    },\r\n    { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },\r\n    { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },\r\n    { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },\r\n  ];\r\n\r\n  @Prop()\r\n  customSvgIcons: Record<string, string> = {};\r\n\r\n  @Prop()\r\n  isControlsVisible: boolean = true;\r\n\r\n  @Prop()\r\n  isUtilityPanelVisible: boolean = true;\r\n\r\n  @Event()\r\n  isReady: EventEmitter<HTMLElement>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  @State()\r\n  isEngineReady: boolean = false;\r\n\r\n  @State()\r\n  isControlsReady: boolean = false;\r\n\r\n  @Watch('isEngineReady')\r\n  onIsEngineReady(newValue: boolean) {\r\n    if (newValue && this.isControlsReady) {\r\n      this.checkIsReady();\r\n    }\r\n  }\r\n\r\n  @Watch('isControlsReady')\r\n  onIsControlsReady(newValue: boolean) {\r\n    if (newValue && this.isEngineReady) {\r\n      this.checkIsReady();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null> {\r\n    return this.engineRef.getObjectById(id);\r\n  }\r\n\r\n  @Method()\r\n  async addObject<T extends KritzelBaseObject>(object: T): Promise<T | null> {\r\n    return this.engineRef.addObject(object);\r\n  }\r\n\r\n  @Method()\r\n  async updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T | null> {\r\n    return this.engineRef.updateObject(object, updatedProperties);\r\n  }\r\n\r\n  @Method()\r\n  async removeObject<T extends KritzelBaseObject>(object: T): Promise<T | null> {\r\n    return this.engineRef.removeObject(object);\r\n  }\r\n\r\n  @Method()\r\n  async getSelectedObjects(): Promise<KritzelBaseObject[]> {\r\n    return this.engineRef.getSelectedObjects();\r\n  }\r\n\r\n  @Method()\r\n  async selectObjects(objects: KritzelBaseObject[]) {\r\n    return this.engineRef.selectObjects(objects);\r\n  }\r\n\r\n  @Method()\r\n  async selectAllObjectsInViewport() {\r\n    return this.engineRef.selectAllObjectsInViewport();\r\n  }\r\n\r\n  @Method()\r\n  async clearSelection() {\r\n    this.engineRef.clearSelection();\r\n  }\r\n\r\n  @Method()\r\n  async centerObjectInViewport(object: KritzelBaseObject) {\r\n    return this.engineRef.centerObjectInViewport(object);\r\n  }\r\n\r\n  @Listen('dblclick', { passive: false })\r\n  handleTouchStart(event: MouseEvent) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event) {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.controlsRef?.closeTooltip();\r\n    }\r\n  }\r\n\r\n  engineRef!: HTMLKritzelEngineElement;\r\n\r\n  controlsRef!: HTMLKritzelControlsElement;\r\n\r\n  componentDidLoad() {\r\n    this.registerCustomSvgIcons();\r\n  }\r\n\r\n  async checkIsReady() {\r\n    await customElements.whenDefined('kritzel-editor');\r\n    await customElements.whenDefined('kritzel-controls');\r\n    await customElements.whenDefined('kritzel-engine');\r\n\r\n    if (!this.isEngineReady || !this.isControlsReady) {\r\n      return;\r\n    }\r\n\r\n    this.isReady.emit(this.host);\r\n  }\r\n\r\n  private registerCustomSvgIcons() {\r\n    for (const [name, svg] of Object.entries(this.customSvgIcons)) {\r\n      KritzelIconRegistry.register(name, svg);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <kritzel-engine\r\n          ref={el => (this.engineRef = el)}\r\n          onIsEngineReady={() => (this.isEngineReady = true)}\r\n          scaleMax={this.scaleMax}\r\n          scaleMin={this.scaleMin}\r\n          globalContextMenuItems={this.globalContextMenuItems}\r\n          objectContextMenuItems={this.objectContextMenuItems}\r\n        ></kritzel-engine>\r\n\r\n        <kritzel-controls\r\n          ref={el => (this.controlsRef = el)}\r\n          controls={this.controls}\r\n          isUtilityPanelVisible={this.isUtilityPanelVisible}\r\n          style={this.isControlsVisible ? { display: 'flex' } : { display: 'none' }}\r\n          onIsControlsReady={() => (this.isControlsReady = true)}\r\n        ></kritzel-controls>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -13,7 +13,28 @@ import { RemoveObjectCommand } from "../../../classes/commands/remove-object.com
 import { KritzelToolRegistry } from "../../../classes/registries/tool.registry";
 import { KritzelEventHelper } from "../../../helpers/event.helper";
 import { KritzelClassHelper } from "../../../helpers/class.helper";
+import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
 export class KritzelEngine {
+    validateScaleMax(newValue) {
+        if (newValue > ABSOLUTE_SCALE_MAX) {
+            console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
+            this.scaleMax = ABSOLUTE_SCALE_MAX;
+            this.store.state.scaleMax = this.scaleMax;
+        }
+        else {
+            this.store.state.scaleMax = newValue;
+        }
+    }
+    validateScaleMin(newValue) {
+        if (newValue < ABSOLUTE_SCALE_MIN) {
+            console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
+            this.scaleMin = ABSOLUTE_SCALE_MIN;
+            this.store.state.scaleMin = this.scaleMin;
+        }
+        else {
+            this.store.state.scaleMin = newValue;
+        }
+    }
     get isSelecting() {
         return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.isSelecting;
     }
@@ -21,56 +42,21 @@ export class KritzelEngine {
         return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.selectionGroup !== null;
     }
     constructor() {
-        this.globalContextMenuItems = [
-            {
-                label: 'Paste',
-                icon: 'paste',
-                disabled: () => this.store.state.copiedObjects === null,
-                action: () => {
-                    const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;
-                    const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;
-                    this.paste(x, y);
-                },
-            },
-            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
-        ];
-        this.objectContextMenuItems = [
-            { label: 'Copy', icon: 'copy', action: () => this.copy() },
-            {
-                label: 'Paste',
-                icon: 'paste',
-                disabled: () => this.store.state.copiedObjects === null,
-                action: () => {
-                    const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;
-                    const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;
-                    this.paste(x, y);
-                },
-            },
-            { label: 'Delete', icon: 'delete', action: () => this.delete() },
-            { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.moveToTop() },
-            { label: 'Send to Back', icon: 'send-to-back', action: () => this.moveToBottom() },
-        ];
+        this.scaleMax = ABSOLUTE_SCALE_MAX;
+        this.scaleMin = ABSOLUTE_SCALE_MIN;
         this.forceUpdate = 0;
         this.contextMenuElement = null;
         this.store = new KritzelStore(this);
-        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
-        this.keyHandler = new KritzelKeyHandler(this.store);
-        this.store.onStateChange('activeTool', (activeTool) => {
-            if (!(activeTool instanceof KritzelSelectionTool)) {
-                this.store.clearSelection();
-            }
-            this.store.state.skipContextMenu = false;
-            this.activeToolChange.emit(activeTool);
-            KritzelKeyboardHelper.forceHideKeyboard();
-        });
-        this.store.onStateChange('isFocused', (isFocused) => {
-            if (!isFocused) {
-                this.store.resetActiveText();
-            }
-        });
+    }
+    componentWillLoad() {
+        this.validateScaleMax(this.scaleMax);
+        this.validateScaleMin(this.scaleMin);
     }
     componentDidLoad() {
+        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
+        this.keyHandler = new KritzelKeyHandler(this.store);
         this.viewport = new KritzelViewport(this.store, this.host);
+        this._registerStateChangeListeners();
         if (this.store.state.isReady === false) {
             this.store.state.isReady = true;
             this.isEngineReady.emit();
@@ -160,10 +146,6 @@ export class KritzelEngine {
         const isInKritzelEngine = path.includes(kritzelEngineElement || this.host);
         this.store.setState('isFocused', isInside && isInKritzelEngine);
     }
-    handleContextMenuAction(event) {
-        event.detail.action();
-        this.hideContextMenu();
-    }
     async registerTool(toolName, toolClass, toolConfig) {
         if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
@@ -282,21 +264,42 @@ export class KritzelEngine {
         this.store.history.executeCommand(command);
         return object;
     }
+    async getCopiedObjects() {
+        var _a;
+        return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
+    }
+    _registerStateChangeListeners() {
+        this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
+        this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
+    }
+    _handleActiveToolChange(activeTool) {
+        if (!(activeTool instanceof KritzelSelectionTool)) {
+            this.store.clearSelection();
+        }
+        this.store.state.skipContextMenu = false;
+        this.activeToolChange.emit(activeTool);
+        KritzelKeyboardHelper.forceHideKeyboard();
+    }
+    _handleIsFocusedChange(isFocused) {
+        if (!isFocused) {
+            this.store.resetActiveText();
+        }
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: '1a8a4ac086fd25b356d25f1c4f094005771a3d57' }, h("div", { key: '5edf7faeb5d63e8341fa81b48287eaee001ed163', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '356a8bb56abb4a9c98ab79f1d224a64e6c202a34' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: 'e3d853e7e11c32bf5f801c29a0ed9add91ce24c3' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '7ada7c0c256bbdc79b2b74b391c87a319c9aaf05' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '156ed10ab63bbacf30d549f115d82beeb6e714d5' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: '1cf8c42989b1c4117a4895f05686313e169b808e' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '1e558a335a31c050c80cda3cd763267fe95335d2' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: 'ff43094ed2f27d2157946329cc4473d92c2d3e30' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '844c0e1dd8d77270419e3c0a0362536e6027f4cb' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '64a782868924f27f9ef4d426694ddac338293bc5' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '4fc48b5006641e0ecb9af0d8cc5b4fe2868faa3d' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '1407e97aba7434599060b33ead00da898482cc6a' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: 'f99a32e77014bf5548a5ae50a99ee4e6f6ae4801' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '0c7708d4a8dc78e171b9493b8b5ab2cfe2984ad6' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '5bca3b678ee83f2faba320dfbeb63af8d41b2908' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '2cecae3e2108ca108220ca7bb67777829cd223ef' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'd0cf8270f99ae6e8ce915a856e54ed7b38cd40aa' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '4f1a0bad54e9a4ad46fec56d7c692a48e02cb7a2' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '9a4b3fdc05e103a2c73a7940bd9a84a68f912b14' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '5a480fdbe4a3fa435697bb94701971dda75f41d3' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: 'f549e8faa3ddad5b3294bb72f24ad3735539e84b' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: 'e81679812ed19a50a09357549df00e590ae613b6', class: "origin", style: {
+        return (h(Host, { key: 'd484b59ebdea9e7b9e8e086c39e7b3a339fb034d' }, h("div", { key: 'ea68c0a3c0020110b5aca6f3a7bdfab223b64744', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '4a7c60073190f2123dbb6bda4e206a1b488db7ac' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: 'c4fe558accb441fb06ff048f41b07b520ffde505' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '00d5fd0b0ec3c79f9ab1dc9a1032fa2f70c7c246' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: '87c8f03bfcc6de031e3d9d74576a6028bfc155bc' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: 'f4e82ddee133818b6ad60b5b6c5e9e721fce4968' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '4f9018ce1184b676248614d4edfdeffd49ac7ce2' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: 'cc5d72952bc4b80a42d26ca1b1e56bcab96ab76c' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), h("div", { key: '387071b0ea3f2064d1ea0e0495aa92de8072a900' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: 'a386b4fb631860b94f710cb601b1809283ab9664' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'a67ad19caa6a6cafa8b19dace26c25d60347090a' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '9fe3152ba0a3e936b6c6551673de3a67bd5de0d1' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '8103da258c7bdede340c6c64188a2f9657af16c3' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '10b315366f6cf8eb2f27a20083094c9e483c2fe3' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'b65926aca01fe6b41f70e8d7484674f568e9945a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '5e95a4268ab30bf06918e83aa5f7e96b5ee1dbe2' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '3922b7fcb2b74ec28f515db8254f05b454ef6b12' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '13c162ec56f0990948bac4569c28a6076582c7ea' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'f909cbc959961e47dbff28e5c620175dc04f6873' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '505122e286976b8fa9e9fac5b131bcecb359eaae' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), h("div", { key: '116217379cf67a0a268e97912ec44d52a98c434b' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), h("div", { key: 'b0bcbb90404d0cbc1281b932bd13e67df612d58d', class: "origin", style: {
                 transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
@@ -393,7 +396,7 @@ export class KritzelEngine {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: 'bf2c561803773e19aed36d418e96b9f797c305be', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: '4fd9e58c617eaf428edbdc3491d3f4fabe3ce564', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -403,12 +406,18 @@ export class KritzelEngine {
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '5177dab02b9a5563129d00b80b99a1a198eb8ff5', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'ea3ae0531d9b2109e547baca7159ea29ebd34827', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'ac88c3b66d642bbe42a0ac5345b4f4d6cddef5a3', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '75d7dfe1ef3ab64ae960c69a471224095a812cb8', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_2 = this.store.state.selectionGroup) === null || _2 === void 0 ? void 0 : _2.objects) || [], style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
-            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'c785558a0f922d7caeacaeeb44a9492ebcc0be7d', store: this.store })));
+            }, onActionSelected: event => {
+                event.detail.action({
+                    x: (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale,
+                    y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
+                }, this.store.state.selectionGroup.objects);
+                this.hideContextMenu();
+            } })), ((_3 = this.store.state) === null || _3 === void 0 ? void 0 : _3.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'a056ea6d5c4271f6af82d259d6d8126fef07c7bd', store: this.store })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -470,8 +479,7 @@ export class KritzelEngine {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "[\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: () => this.store.state.copiedObjects === null,\r\n      action: () => {\r\n        const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;\r\n        const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;\r\n        this.paste(x, y);\r\n      },\r\n    },\r\n    { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },\r\n  ]"
+                "setter": false
             },
             "objectContextMenuItems": {
                 "type": "unknown",
@@ -495,8 +503,47 @@ export class KritzelEngine {
                     "text": ""
                 },
                 "getter": false,
+                "setter": false
+            },
+            "scaleMax": {
+                "type": "number",
+                "attribute": "scale-max",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "ABSOLUTE_SCALE_MAX"
+            },
+            "scaleMin": {
+                "type": "number",
+                "attribute": "scale-min",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { label: 'Copy', icon: 'copy', action: () => this.copy() },\r\n    {\r\n      label: 'Paste',\r\n      icon: 'paste',\r\n      disabled: () => this.store.state.copiedObjects === null,\r\n      action: () => {\r\n        const x = (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale;\r\n        const y = (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale;\r\n        this.paste(x, y);\r\n      },\r\n    },\r\n    { label: 'Delete', icon: 'delete', action: () => this.delete() },\r\n    { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.moveToTop() },\r\n    { label: 'Send to Back', icon: 'send-to-back', action: () => this.moveToBottom() },\r\n  ]"
+                "reflect": false,
+                "defaultValue": "ABSOLUTE_SCALE_MIN"
             }
         };
     }
@@ -1036,7 +1083,7 @@ export class KritzelEngine {
                     "signature": "(objects: KritzelBaseObject[]) => Promise<void>",
                     "parameters": [{
                             "name": "objects",
-                            "type": "KritzelBaseObject<HTMLElement>[]",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>[]",
                             "docs": ""
                         }],
                     "references": {
@@ -1093,10 +1140,10 @@ export class KritzelEngine {
             },
             "centerObjectInViewport": {
                 "complexType": {
-                    "signature": "(object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement>>",
+                    "signature": "(object: KritzelBaseObject) => Promise<KritzelBaseObject<HTMLElement | SVGElement>>",
                     "parameters": [{
                             "name": "object",
-                            "type": "KritzelBaseObject<HTMLElement>",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>",
                             "docs": ""
                         }],
                     "references": {
@@ -1112,9 +1159,43 @@ export class KritzelEngine {
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
+                        },
+                        "SVGElement": {
+                            "location": "global",
+                            "id": "global::SVGElement"
+                        }
+                    },
+                    "return": "Promise<KritzelBaseObject<HTMLElement | SVGElement>>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getCopiedObjects": {
+                "complexType": {
+                    "signature": "() => Promise<KritzelBaseObject[]>",
+                    "parameters": [],
+                    "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"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "SVGElement": {
+                            "location": "global",
+                            "id": "global::SVGElement"
                         }
                     },
-                    "return": "Promise<KritzelBaseObject<HTMLElement>>"
+                    "return": "Promise<KritzelBaseObject<HTMLElement | SVGElement>[]>"
                 },
                 "docs": {
                     "text": "",
@@ -1124,6 +1205,15 @@ export class KritzelEngine {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "scaleMax",
+                "methodName": "validateScaleMax"
+            }, {
+                "propName": "scaleMin",
+                "methodName": "validateScaleMin"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "wheel",