npm - kritzel-stencil - Versions diffs - 0.0.162 → 0.0.164 - Mend

kritzel-stencil 0.0.162 → 0.0.164

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

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

@@ -1,14 +1,17 @@
 import { Host, h } from "@stencil/core";
 import { KritzelIconRegistry } from "../../../classes/registries/icon-registry.class";
+import { ShapeType } from "../../../enums/shape-type.enum";
 import { KritzelSelectionTool } from "../../../classes/tools/selection-tool.class";
 import { KritzelEraserTool } from "../../../classes/tools/eraser-tool.class";
 import { KritzelImageTool } from "../../../classes/tools/image-tool.class";
 import { KritzelBrushTool } from "../../../classes/tools/brush-tool.class";
 import { KritzelLineTool } from "../../../classes/tools/line-tool.class";
 import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
+import { KritzelShapeTool } from "../../../classes/tools/shape-tool.class";
 import { DEFAULT_BRUSH_CONFIG } from "../../../configs/default-brush-tool.config";
 import { DEFAULT_LINE_TOOL_CONFIG } from "../../../configs/default-line-tool.config";
 import { DEFAULT_TEXT_CONFIG } from "../../../configs/default-text-tool.config";
+import { DEFAULT_SHAPE_CONFIG } from "../../../configs/default-shape-tool.config";
 import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from "../../../constants/engine.constants";
 import { KritzelWorkspace } from "../../../classes/core/workspace.class";
 import { KritzelKeyboardHelper } from "../../../helpers/keyboard.helper";
@@ -52,16 +55,24 @@ export class KritzelEditor {
             icon: 'type',
             config: DEFAULT_TEXT_CONFIG,
         },
+        {
+            name: 'shape',
+            type: 'tool',
+            tool: KritzelShapeTool,
+            icon: 'shape-rectangle',
+            config: DEFAULT_SHAPE_CONFIG,
+            subOptions: [
+                { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },
+                { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },
+                { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },
+            ],
+        },
         {
             name: 'image',
             type: 'tool',
             tool: KritzelImageTool,
             icon: 'image',
         },
-        {
-            name: 'divider',
-            type: 'divider',
-        },
         {
             name: 'config',
             type: 'config',
@@ -238,7 +249,7 @@ export class KritzelEditor {
         }
     }
     render() {
-        return (h(Host, { key: 'f107cce23625f36978736ef948a51cd91d84c3f1' }, h("kritzel-workspace-manager", { key: 'a924de174ac5226c3ac5507c35e162b35490a5dd', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '48b6c14ca2c1e1a2c745ec81294a331a463219a1', 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: '2ec26e1444f4ba642c4fdc4ef2da1a62dc0256a6', 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) })));
+        return (h(Host, { key: 'a39268fb2722bc9e1627a46a3430a574322dfdfb' }, h("kritzel-workspace-manager", { key: 'b0c08f2cab64347c0ee14a87ed0ab769a2e95733', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: 'c0efb9b0cdfdf3a9ba945e71e37c60ebfc45e981', 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: '5a275fb94e2f55a1f79d6d5b5f518305cd739f24', 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 is() { return "kritzel-editor"; }
     static get originalStyleUrls() {
@@ -315,7 +326,7 @@ export class KritzelEditor {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      isDefault: true,\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      icon: 'pen',\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'line',\r\n      type: 'tool',\r\n      tool: KritzelLineTool,\r\n      icon: 'arrow',\r\n      config: DEFAULT_LINE_TOOL_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  ]"
+                "defaultValue": "[\r\n    {\r\n      name: 'selection',\r\n      type: 'tool',\r\n      isDefault: true,\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      icon: 'pen',\r\n      config: DEFAULT_BRUSH_CONFIG,\r\n    },\r\n    {\r\n      name: 'line',\r\n      type: 'tool',\r\n      tool: KritzelLineTool,\r\n      icon: 'arrow',\r\n      config: DEFAULT_LINE_TOOL_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: 'shape',\r\n      type: 'tool',\r\n      tool: KritzelShapeTool,\r\n      icon: 'shape-rectangle',\r\n      config: DEFAULT_SHAPE_CONFIG,\r\n      subOptions: [\r\n        { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },\r\n        { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },\r\n        { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },\r\n      ],\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: 'config',\r\n      type: 'config',\r\n    },\r\n  ]"
             },
             "globalContextMenuItems": {
                 "type": "unknown",

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

	@@ -1 +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 { 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 { KritzelLineTool } from '../../../classes/tools/line-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_LINE_TOOL_CONFIG } from '../../../configs/default-line-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\nimport { KritzelEngineState } from '../../../interfaces/engine-state.interface';\r\nimport { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { KritzelKeyboardHelper } from '../../../helpers/keyboard.helper';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelSyncConfig } from '../../../interfaces/sync-config.interface';\r\nimport { KritzelUndoState } from '../../..';\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 @Element() host!: HTMLElement;\r\n\r\n @Prop() scaleMax: number = ABSOLUTE_SCALE_MAX;\r\n @Prop() scaleMin: number = ABSOLUTE_SCALE_MIN;\r\n @Prop() controls: KritzelToolbarControl[] = [\r\n {\r\n name: 'selection',\r\n type: 'tool',\r\n isDefault: true,\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 icon: 'pen',\r\n config: DEFAULT_BRUSH_CONFIG,\r\n },\r\n {\r\n name: 'line',\r\n type: 'tool',\r\n tool: KritzelLineTool,\r\n icon: 'arrow',\r\n config: DEFAULT_LINE_TOOL_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() 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() objectContextMenuItems: ContextMenuItem[] = [\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.bringToFront() },\r\n { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\r\n ];\r\n\r\n @Prop() customSvgIcons: Record<string, string> = {};\r\n @Prop() isControlsVisible: boolean = true;\r\n @Prop() isUtilityPanelVisible: boolean = true;\r\n @Prop() syncConfig?: KritzelSyncConfig;\r\n\r\n @Event() isReady: EventEmitter<HTMLElement>;\r\n @Event() objectsChange: EventEmitter<KritzelBaseObject[]>;\r\n @Event() undoStateChange: EventEmitter<KritzelUndoState>;\r\n\r\n @State() isEngineReady: boolean = false;\r\n @State() isControlsReady: boolean = false;\r\n @State() isWorkspaceManagerReady: boolean = false;\r\n @State() workspaces: KritzelWorkspace[] = [];\r\n @State() activeWorkspace: KritzelWorkspace;\r\n @State() isVirtualKeyboardOpen: boolean = false;\r\n @State() undoState: KritzelUndoState = null;\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 @Watch('workspaces')\r\n onWorkspacesChange(newWorkspaces: KritzelWorkspace[]) {\r\n if (this.activeWorkspace) {\r\n const updatedActiveWorkspace = newWorkspaces.find(ws => ws.id === this.activeWorkspace.id);\r\n if (updatedActiveWorkspace && updatedActiveWorkspace !== this.activeWorkspace) {\r\n this.activeWorkspace = updatedActiveWorkspace;\r\n }\r\n }\r\n }\r\n\r\n @Listen('dblclick', { passive: false })\r\n onTouchStart(event: MouseEvent) {\r\n if (event.cancelable) {\r\n event.preventDefault();\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 @Method()\r\n async createWorkspace(name: string, viewport?: { translateX: number; translateY: number; scale: number }): Promise<KritzelWorkspace \| null> {\r\n const workspace = new KritzelWorkspace(`workspace-${Date.now()}`, name, viewport);\r\n return this.engineRef.createWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async updateWorkspace(workspace: KritzelWorkspace): Promise<void> {\r\n return this.engineRef.updateWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async deleteWorkspace(workspace: KritzelWorkspace): Promise<void> {\r\n return this.engineRef.deleteWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async getWorkspaces(): Promise<KritzelWorkspace[]> {\r\n return this.engineRef.getWorkspaces();\r\n }\r\n\r\n @Method()\r\n async getActiveWorkspace(): Promise<KritzelWorkspace> {\r\n return this.engineRef.getActiveWorkspace();\r\n }\r\n\r\n engineRef!: HTMLKritzelEngineElement;\r\n controlsRef!: HTMLKritzelControlsElement;\r\n splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n componentDidLoad() {\r\n this.registerCustomSvgIcons();\r\n this.listenForMobileKeyboard();\r\n this.setOsSpecificCssVariables();\r\n }\r\n\r\n async checkIsReady() {\r\n await customElements.whenDefined('kritzel-editor');\r\n await customElements.whenDefined('kritzel-workspace-manager');\r\n await customElements.whenDefined('kritzel-controls');\r\n await customElements.whenDefined('kritzel-engine');\r\n\r\n if (!this.isEngineReady \|\| !this.isControlsReady \|\| !this.isWorkspaceManagerReady) {\r\n return;\r\n }\r\n\r\n this.isReady.emit(this.host);\r\n }\r\n\r\n onEngineReady(event: CustomEvent<KritzelEngineState>) {\r\n this.isEngineReady = true;\r\n this.activeWorkspace = event.detail.activeWorkspace;\r\n this.workspaces = event.detail.workspaces;\r\n }\r\n\r\n handleWorkspacesChange(event: CustomEvent<KritzelWorkspace[]>) {\r\n this.workspaces = event.detail;\r\n }\r\n\r\n handleObjectsChange(event: CustomEvent<KritzelBaseObject[]>) {\r\n this.objectsChange.emit(event.detail);\r\n }\r\n\r\n handleUndoStateChange(event: CustomEvent<KritzelUndoState>) {\r\n this.undoStateChange.emit(event.detail);\r\n this.undoState = event.detail;\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 private listenForMobileKeyboard() {\r\n KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {\r\n this.isVirtualKeyboardOpen = isOpen;\r\n });\r\n }\r\n\r\n private setOsSpecificCssVariables() {\r\n const os = KritzelDevicesHelper.detectOS();\r\n\r\n switch (os) {\r\n case 'iOS':\r\n // iOS specific adjustments\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');\r\n this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');\r\n this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');\r\n break;\r\n\r\n case 'Android':\r\n // Android specific adjustments\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');\r\n break;\r\n\r\n default:\r\n // Default for Windows/Linux\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');\r\n break;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <kritzel-workspace-manager\r\n workspaces={this.workspaces}\r\n activeWorkspace={this.activeWorkspace}\r\n onWorkspaceChange={event => (this.activeWorkspace = event.detail)}\r\n onIsWorkspaceManagerReady={() => (this.isWorkspaceManagerReady = true)}\r\n ></kritzel-workspace-manager>\r\n\r\n <kritzel-engine\r\n ref={el => (this.engineRef = el)}\r\n workspace={this.activeWorkspace}\r\n syncConfig={this.syncConfig}\r\n scaleMax={this.scaleMax}\r\n scaleMin={this.scaleMin}\r\n globalContextMenuItems={this.globalContextMenuItems}\r\n objectContextMenuItems={this.objectContextMenuItems}\r\n onIsEngineReady={event => this.onEngineReady(event)}\r\n onWorkspacesChange={event => this.handleWorkspacesChange(event)}\r\n onObjectsChange={event => this.handleObjectsChange(event)}\r\n onUndoStateChange={event => this.handleUndoStateChange(event)}\r\n ></kritzel-engine>\r\n\r\n <kritzel-controls\r\n class={{ 'keyboard-open': this.isVirtualKeyboardOpen }}\r\n style={{ display: this.isControlsVisible ? 'flex' : 'none' }}\r\n ref={el => (this.controlsRef = el)}\r\n controls={this.controls}\r\n isUtilityPanelVisible={this.isUtilityPanelVisible}\r\n undoState={this.undoState}\r\n onIsControlsReady={() => (this.isControlsReady = true)}\r\n ></kritzel-controls>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
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 { ShapeType } from '../../../enums/shape-type.enum';\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 { KritzelLineTool } from '../../../classes/tools/line-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelShapeTool } from '../../../classes/tools/shape-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_LINE_TOOL_CONFIG } from '../../../configs/default-line-tool.config';\r\nimport { DEFAULT_TEXT_CONFIG } from '../../../configs/default-text-tool.config';\r\nimport { DEFAULT_SHAPE_CONFIG } from '../../../configs/default-shape-tool.config';\r\nimport { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from '../../../constants/engine.constants';\r\nimport { KritzelEngineState } from '../../../interfaces/engine-state.interface';\r\nimport { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { KritzelKeyboardHelper } from '../../../helpers/keyboard.helper';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelSyncConfig } from '../../../interfaces/sync-config.interface';\r\nimport { KritzelUndoState } from '../../..';\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 @Element() host!: HTMLElement;\r\n\r\n @Prop() scaleMax: number = ABSOLUTE_SCALE_MAX;\r\n @Prop() scaleMin: number = ABSOLUTE_SCALE_MIN;\r\n @Prop() controls: KritzelToolbarControl[] = [\r\n {\r\n name: 'selection',\r\n type: 'tool',\r\n isDefault: true,\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 icon: 'pen',\r\n config: DEFAULT_BRUSH_CONFIG,\r\n },\r\n {\r\n name: 'line',\r\n type: 'tool',\r\n tool: KritzelLineTool,\r\n icon: 'arrow',\r\n config: DEFAULT_LINE_TOOL_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: 'shape',\r\n type: 'tool',\r\n tool: KritzelShapeTool,\r\n icon: 'shape-rectangle',\r\n config: DEFAULT_SHAPE_CONFIG,\r\n subOptions: [\r\n { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },\r\n { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },\r\n { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },\r\n ],\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: 'config',\r\n type: 'config',\r\n },\r\n ];\r\n\r\n @Prop() 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() objectContextMenuItems: ContextMenuItem[] = [\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.bringToFront() },\r\n { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },\r\n ];\r\n\r\n @Prop() customSvgIcons: Record<string, string> = {};\r\n @Prop() isControlsVisible: boolean = true;\r\n @Prop() isUtilityPanelVisible: boolean = true;\r\n @Prop() syncConfig?: KritzelSyncConfig;\r\n\r\n @Event() isReady: EventEmitter<HTMLElement>;\r\n @Event() objectsChange: EventEmitter<KritzelBaseObject[]>;\r\n @Event() undoStateChange: EventEmitter<KritzelUndoState>;\r\n\r\n @State() isEngineReady: boolean = false;\r\n @State() isControlsReady: boolean = false;\r\n @State() isWorkspaceManagerReady: boolean = false;\r\n @State() workspaces: KritzelWorkspace[] = [];\r\n @State() activeWorkspace: KritzelWorkspace;\r\n @State() isVirtualKeyboardOpen: boolean = false;\r\n @State() undoState: KritzelUndoState = null;\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 @Watch('workspaces')\r\n onWorkspacesChange(newWorkspaces: KritzelWorkspace[]) {\r\n if (this.activeWorkspace) {\r\n const updatedActiveWorkspace = newWorkspaces.find(ws => ws.id === this.activeWorkspace.id);\r\n if (updatedActiveWorkspace && updatedActiveWorkspace !== this.activeWorkspace) {\r\n this.activeWorkspace = updatedActiveWorkspace;\r\n }\r\n }\r\n }\r\n\r\n @Listen('dblclick', { passive: false })\r\n onTouchStart(event: MouseEvent) {\r\n if (event.cancelable) {\r\n event.preventDefault();\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 @Method()\r\n async createWorkspace(name: string, viewport?: { translateX: number; translateY: number; scale: number }): Promise<KritzelWorkspace \| null> {\r\n const workspace = new KritzelWorkspace(`workspace-${Date.now()}`, name, viewport);\r\n return this.engineRef.createWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async updateWorkspace(workspace: KritzelWorkspace): Promise<void> {\r\n return this.engineRef.updateWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async deleteWorkspace(workspace: KritzelWorkspace): Promise<void> {\r\n return this.engineRef.deleteWorkspace(workspace);\r\n }\r\n\r\n @Method()\r\n async getWorkspaces(): Promise<KritzelWorkspace[]> {\r\n return this.engineRef.getWorkspaces();\r\n }\r\n\r\n @Method()\r\n async getActiveWorkspace(): Promise<KritzelWorkspace> {\r\n return this.engineRef.getActiveWorkspace();\r\n }\r\n\r\n engineRef!: HTMLKritzelEngineElement;\r\n controlsRef!: HTMLKritzelControlsElement;\r\n splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n componentDidLoad() {\r\n this.registerCustomSvgIcons();\r\n this.listenForMobileKeyboard();\r\n this.setOsSpecificCssVariables();\r\n }\r\n\r\n async checkIsReady() {\r\n await customElements.whenDefined('kritzel-editor');\r\n await customElements.whenDefined('kritzel-workspace-manager');\r\n await customElements.whenDefined('kritzel-controls');\r\n await customElements.whenDefined('kritzel-engine');\r\n\r\n if (!this.isEngineReady \|\| !this.isControlsReady \|\| !this.isWorkspaceManagerReady) {\r\n return;\r\n }\r\n\r\n this.isReady.emit(this.host);\r\n }\r\n\r\n onEngineReady(event: CustomEvent<KritzelEngineState>) {\r\n this.isEngineReady = true;\r\n this.activeWorkspace = event.detail.activeWorkspace;\r\n this.workspaces = event.detail.workspaces;\r\n }\r\n\r\n handleWorkspacesChange(event: CustomEvent<KritzelWorkspace[]>) {\r\n this.workspaces = event.detail;\r\n }\r\n\r\n handleObjectsChange(event: CustomEvent<KritzelBaseObject[]>) {\r\n this.objectsChange.emit(event.detail);\r\n }\r\n\r\n handleUndoStateChange(event: CustomEvent<KritzelUndoState>) {\r\n this.undoStateChange.emit(event.detail);\r\n this.undoState = event.detail;\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 private listenForMobileKeyboard() {\r\n KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {\r\n this.isVirtualKeyboardOpen = isOpen;\r\n });\r\n }\r\n\r\n private setOsSpecificCssVariables() {\r\n const os = KritzelDevicesHelper.detectOS();\r\n\r\n switch (os) {\r\n case 'iOS':\r\n // iOS specific adjustments\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');\r\n this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');\r\n this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');\r\n break;\r\n\r\n case 'Android':\r\n // Android specific adjustments\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');\r\n break;\r\n\r\n default:\r\n // Default for Windows/Linux\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');\r\n this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');\r\n this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');\r\n break;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <kritzel-workspace-manager\r\n workspaces={this.workspaces}\r\n activeWorkspace={this.activeWorkspace}\r\n onWorkspaceChange={event => (this.activeWorkspace = event.detail)}\r\n onIsWorkspaceManagerReady={() => (this.isWorkspaceManagerReady = true)}\r\n ></kritzel-workspace-manager>\r\n\r\n <kritzel-engine\r\n ref={el => (this.engineRef = el)}\r\n workspace={this.activeWorkspace}\r\n syncConfig={this.syncConfig}\r\n scaleMax={this.scaleMax}\r\n scaleMin={this.scaleMin}\r\n globalContextMenuItems={this.globalContextMenuItems}\r\n objectContextMenuItems={this.objectContextMenuItems}\r\n onIsEngineReady={event => this.onEngineReady(event)}\r\n onWorkspacesChange={event => this.handleWorkspacesChange(event)}\r\n onObjectsChange={event => this.handleObjectsChange(event)}\r\n onUndoStateChange={event => this.handleUndoStateChange(event)}\r\n ></kritzel-engine>\r\n\r\n <kritzel-controls\r\n class={{ 'keyboard-open': this.isVirtualKeyboardOpen }}\r\n style={{ display: this.isControlsVisible ? 'flex' : 'none' }}\r\n ref={el => (this.controlsRef = el)}\r\n controls={this.controls}\r\n isUtilityPanelVisible={this.isUtilityPanelVisible}\r\n undoState={this.undoState}\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 CHANGED Viewed

@@ -384,9 +384,9 @@ export class KritzelEngine {
             height: this.core.store.state.viewportHeight / this.core.store.state.scale,
             depth: 100,
         };
-        const visibleObjects = this.core.store.state.objects.query(viewportBounds);
+        const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (h(Host, { key: '4a7e8c72ad1f80c3c31aa37eff33e78634cb37d1' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '3c8981ce6cafbc49f4f04189d27809c511bf45c4', class: "debug-panel" }, h("div", { key: '428d483a87b98cde24446a0a26ba790ec2a6358b' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '3ec597c219109c026f78e5018a885e88e51aa5c4' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '803c0d009b19fdc7c465ef14f3b5f278a954a912' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '8b1aef0ae845cdf4b93afe59d8c78c84dd181a2d' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '137ead0c39a2fba55b4c4dde53fb09d0832439e1' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'b19f710385e4306620176551853eb2645b96ca7a' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '943b55daada95aa37b759e45a15ffcfca76fba72' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'd001782dd4bc48c84c08477b26e5f3fce8df0b47' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'ed640d3905b39a995ba40a1cbf38f10a4aa1b400' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '154888aabbb56365aaf4584b0b991be848629e3e' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'c0c39e988940baf20137de8a0eeda2c085da2810' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'abd5a79b27bc75e898877d33097597c057dc3f2b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '9c49bf3246525c9a755bb293bec8a143ade97158' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '88ff8ab48af31bf036719f72a5a3726780ab9720' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '9650075f855fcf91b7303d3ace14242075fc523d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '911acb1f90f9812d30dc0aebceb207aecf9b4248' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'b65db638d3cefbd74e2d03b639ee5fe86a2a858b' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c53ca259dadc656762733119b4086c1f82235a7e' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'ae2d7a8917af450eb3bfd8e171a87530f337c0c2' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '5633cd9901ec028e4f5433c84b07321932beea66' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '82232a8eec470562e5658dee9713c855e78ca6a3' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '5b6b04b323a21ef37ddb144721ea01dccc7aec8b' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '3287f804515cfa31eaa755332e2043fce4feb7a9' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '3a59fd4db60f6f05d419de39149ea10e482875d4' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'f91a8ea9dfc50e5f1ae89d66c7609a103e3263a4' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '40ba8fb5530243c18e0b0c3ad68dadb2cbc615a1', id: "origin", class: "origin", style: {
+        return (h(Host, { key: '209ccf8414c635c9e04ca4807c95a29c629071ec' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'df6a03d1341887960bb91cbaa0a5dca6880a9293', class: "debug-panel" }, h("div", { key: '65157757ec6549ad2af311085a9618ab661f5ac0' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '20137b6c651a9aa8df15bce66d5bfe870a7af139' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '49dd30286641236ae428c731bb181cb06269852e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'd8ee431a10335e99aec40a596817765d7ee3f67b' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '34b1f31146080780433d6c1718d13bbfe397cb9b' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '4c279a106101cf808c91a2be4987569b21ae52b3' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '6ebd7ad3c803ef45d58a74180c52e8be8af8bca3' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '345970c8b2b54f3a0d8fe1d9bb1b7b33023db386' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'fc265ae0e71cf22311cab3006dfc29b9d24397d2' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '9f921032a58b55e60f82d11a76f269051357d3e1' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '6d197e06cc362a9ecb8bfe00d272aecfec2b49e1' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '5313589ba2a509c95a5730dcf29c4003d9884cbf' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '8af9f9d6e33a2897c20962048bbf2a058f9d4a45' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '81aec0050d3e2122643b61fd725e71b25d97bc27' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'c9956f05c01b74ee1666d9395a2715c3463fe401' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'ae0a01c8f8aafc08326b136720c6a75b6aec6299' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7816d40d73248a55120440e6d721325e1894178e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c22383bacca0ada584f2e8a8577523c905d74ae2' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '8185a7318c6cdfde558cc372b79582d58b706f9e' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '2d56b05377693ef032ab2316fa753ecedf264b9c' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '2e2bf9fd321ef04dc0ac6dc21539eb0117c9fb23' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '3118ab970d5d37e01405c42308fc051d675d4bfa' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'd8a31065843f89552f2d9c03dcbca960a716fa6c' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'cb8d28b6ea63cbb6572f761011fccb847b748227' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'd112a7e833c265085246817423557bfdc5b30b74' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'df4f302192a8fc9644b7f883618b0a0f8a600dc8', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, style: {
@@ -432,7 +432,32 @@ export class KritzelEngine {
                     backgroundColor: object.backgroundColor,
                     overflow: 'visible',
                     textRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'optimizeSpeed' : 'auto',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                    width: '100%',
+                    height: '100%',
+                    position: 'relative',
+                    overflow: 'visible',
+                } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    overflow: 'visible',
+                    pointerEvents: 'none',
+                }, viewBox: object.viewBox, preserveAspectRatio: "none" }, h("path", { d: object.getSvgPath(), fill: object.fillColor, stroke: object.strokeColor, "stroke-width": object.strokeWidth })), h("div", { ref: el => object.mountTextEditor(el), style: {
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    overflow: 'hidden',
+                    pointerEvents: object.isEditing ? 'auto' : 'none',
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                     pointerEvents: 'auto',
@@ -448,7 +473,13 @@ export class KritzelEngine {
                     borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
                     borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
                     borderColor: KritzelDevicesHelper.isFirefox() ? object.borderColor : 'transparent',
-                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("g", { style: { pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "rotationDegrees: ", object.rotationDegrees)))))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                } })))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
+                    pointerEvents: 'none',
+                    position: 'absolute',
+                    left: `${object.totalWidth}px`,
+                    top: '0',
+                    zIndex: (object.zIndex + 2).toString(),
+                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     zIndex: (object.zIndex + 1).toString(),
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
@@ -604,7 +635,7 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '7e350c48da76c54a223f23ead9dea8018b0bc36c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '81b44614c23f4016a1daa914ef8ea73eda0869eb', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -615,7 +646,7 @@ export class KritzelEngine {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '7923a3f6a92fa71911c971166171317b5bc421bf', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'f748cd15c916d9fcb5fbf445167c69c1cc8aea63', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -947,7 +978,7 @@ export class KritzelEngine {
         return {
             "registerTool": {
                 "complexType": {
-                    "signature": "(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig) => Promise<KritzelBaseTool>",
+                    "signature": "(toolName: string, toolClass: any, toolConfig?: KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig) => Promise<KritzelBaseTool>",
                     "parameters": [{
                             "name": "toolName",
                             "type": "string",
@@ -958,7 +989,7 @@ export class KritzelEngine {
                             "docs": ""
                         }, {
                             "name": "toolConfig",
-                            "type": "KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig",
+                            "type": "KritzelTextToolConfig | KritzelBrushToolConfig | KritzelLineToolConfig | KritzelShapeToolConfig",
                             "docs": ""
                         }],
                     "references": {
@@ -985,6 +1016,11 @@ export class KritzelEngine {
                             "location": "import",
                             "path": "../../../interfaces/toolbar-control.interface",
                             "id": "src/interfaces/toolbar-control.interface.ts::KritzelLineToolConfig"
+                        },
+                        "KritzelShapeToolConfig": {
+                            "location": "import",
+                            "path": "../../../interfaces/toolbar-control.interface",
+                            "id": "src/interfaces/toolbar-control.interface.ts::KritzelShapeToolConfig"
                         }
                     },
                     "return": "Promise<KritzelBaseTool>"