kritzel-stencil 0.0.127 → 0.0.129

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -4,6 +4,11 @@
   user-select: none;
 }
 
+:host(.mobile) {
+  --kritzel-controls-control-hover-background-color: transparent;
+  --kritzel-controls-control-active-background-color: transparent;
+}
+
 .kritzel-controls {
   display: flex;
   flex-direction: row;
@@ -15,7 +20,7 @@
   background-color: var(--kritzel-controls-background-color, #ffffff);
   border-radius: var(--kritzel-controls-border-radius, 16px);
   box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  border: var(--kritzel-controls-border, 1px solid #f0f0f0);
+  border: var(--kritzel-controls-border, 1px solid #ebebeb);
   z-index: 10000;
   position: relative;
 }
@@ -39,18 +44,10 @@
   background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
 }
 
-:host(.mobile) .kritzel-control:hover {
-  background-color: unset;
-}
-
 .kritzel-control:active {
   background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
 }
 
-:host(.mobile) .kritzel-control:active {
-  background-color: unset;
-}
-
 .kritzel-control.selected,
 .kritzel-control.selected:hover,
 .kritzel-control.selected:active {
@@ -92,7 +89,7 @@
   cursor: pointer;
   border: 2px solid transparent;
   box-sizing: border-box;
-  background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
 }
 
 .font-container {
@@ -105,7 +102,7 @@
   cursor: pointer;
   border: 2px solid transparent;
   box-sizing: border-box;
-  background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
 }
 
 .no-config {

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -12,23 +12,28 @@ export class KritzelControls {
         this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
         this.kritzelEngine = null;
     }
-    async handleActiveToolChange(event) {
-        var _a;
-        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
-    }
-    handleClick(event) {
+    handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
             return;
         }
         this.isTooltipVisible = false;
-        this.kritzelEngine.enable();
     }
-    async closeTooltip() {
+    handleKeyDown(event) {
         var _a;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
+        var _a;
+        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
+    }
+    async closeTooltip() {
         this.isTooltipVisible = false;
-        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
     }
     get activeToolAsTextTool() {
         var _a;
@@ -76,9 +81,10 @@ export class KritzelControls {
         }
     }
     handleConfigClick(event) {
+        var _a;
         event.stopPropagation();
         this.isTooltipVisible = !this.isTooltipVisible;
-        this.kritzelEngine.disable();
+        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.disable();
     }
     async handleToolChange(event) {
         this.activeControl = Object.assign(Object.assign({}, this.activeControl), { tool: event.detail });
@@ -87,13 +93,13 @@ export class KritzelControls {
     render() {
         var _a, _b;
         const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (h(Host, { key: 'dfb17219cf1d27d86148bc918b8303d74244700c', class: {
+        return (h(Host, { key: 'af04746b6eaa04a51482cd9d25ba3ab303d631f1', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'a5eb7c6b59a193ba0bdde53812882c355a7658d4', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'd6ecb1087a332162f3fc809ed4321fc48f72c3e7', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), h("div", { key: 'b51e49664bf6330f22fb07ef64116459ec3832b3', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), h("div", { key: '34723e47249d53fd544848d2d577deba4df1f131', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (h("button", { class: {
@@ -251,14 +257,20 @@ export class KritzelControls {
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{
-                "name": "activeToolChange",
-                "method": "handleActiveToolChange",
+                "name": "click",
+                "method": "handleDocumentClick",
                 "target": "document",
                 "capture": false,
                 "passive": false
             }, {
-                "name": "click",
-                "method": "handleClick",
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "activeToolChange",
+                "method": "handleActiveToolChange",
                 "target": "document",
                 "capture": false,
                 "passive": false

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n  tag: 'kritzel-controls',\r\n  styleUrl: 'kritzel-controls.css',\r\n  shadow: true,\r\n  assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n  @Prop()\r\n  controls: KritzelToolbarControl[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeControl: KritzelToolbarControl | null = null;\r\n\r\n  @Prop()\r\n  isUtilityPanelVisible: boolean = true;\r\n\r\n  @Event()\r\n  isControlsReady: EventEmitter<void>;\r\n\r\n  @State()\r\n  firstConfig: ToolConfig | null = null;\r\n\r\n  @State()\r\n  isTooltipVisible: boolean = false;\r\n\r\n  @State()\r\n  isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  @Listen('activeToolChange', { target: 'document' })\r\n  async handleActiveToolChange(event: CustomEvent) {\r\n    this.activeControl = this.controls.find(control => control.tool === event.detail) || null;\r\n    await this.kritzelEngine?.setFocus();\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClick(event: MouseEvent) {\r\n    const element = event.target as HTMLElement;\r\n\r\n    if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {\r\n      return;\r\n    }\r\n\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine.enable();\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n    this.kritzelEngine?.enable();\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  get activeToolAsTextTool() {\r\n    return this.activeControl?.tool as KritzelTextTool;\r\n  }\r\n\r\n  get activeToolAsBrushTool() {\r\n    return this.activeControl?.tool as KritzelBrushTool;\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    await this.initializeTools();\r\n    this.isControlsReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async initializeTools() {\r\n    for (const c of this.controls) {\r\n      if (c.type === 'tool' && c.tool) {\r\n        c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n      }\r\n\r\n      if (c.type === 'tool' && c.isDefault && c.tool) {\r\n        await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n        this.activeControl = c;\r\n      }\r\n\r\n      if (c.type === 'config') {\r\n        if (this.firstConfig === null) {\r\n          this.firstConfig = c;\r\n        } else {\r\n          console.warn('Only one config control is allowed. The first one will be used.');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private async handleControlClick(control: KritzelToolbarControl) {\r\n    this.activeControl = control;\r\n\r\n    if (this.activeControl.type === 'tool') {\r\n      await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n    }\r\n  }\r\n\r\n  private handleConfigClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.isTooltipVisible = !this.isTooltipVisible;\r\n    this.kritzelEngine.disable();\r\n  }\r\n\r\n  private async handleToolChange(event: CustomEvent) {\r\n    this.activeControl = { ...this.activeControl, tool: event.detail };\r\n    await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n  }\r\n\r\n  render() {\r\n    const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          mobile: this.isTouchDevice,\r\n        }}\r\n      >\r\n        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            onUndo={() => this.kritzelEngine?.undo()}\r\n            onRedo={() => this.kritzelEngine?.redo()}\r\n            onDelete={() => this.kritzelEngine?.delete()}\r\n          ></kritzel-utility-panel>\r\n        )}\r\n\r\n        <div class=\"kritzel-controls\">\r\n          {this.controls.map(control => {\r\n            if (control.type === 'tool') {\r\n              return (\r\n                <button\r\n                  class={{\r\n                    'kritzel-control': true,\r\n                    'selected': this.activeControl?.name === control?.name,\r\n                  }}\r\n                  key={control.name}\r\n                  onClick={_event => this.handleControlClick?.(control)}\r\n                >\r\n                  <kritzel-icon name={control.icon}></kritzel-icon>\r\n                </button>\r\n              );\r\n            }\r\n\r\n            if (control.type === 'divider') {\r\n              return <div class=\"kritzel-divider\" key={control.name}></div>;\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div class=\"kritzel-config-container\" key={control.name}>\r\n                  <kritzel-tooltip isVisible={this.isTooltipVisible} anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}>\r\n                    <div style={{ width: '294px', height: '100%' }}>\r\n                      {this.activeControl.name === 'brush' && (\r\n                        <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n                      )}\r\n\r\n                      {this.activeControl.name === 'text' && (\r\n                        <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n                      )}\r\n                    </div>\r\n                  </kritzel-tooltip>\r\n\r\n                  <div\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    style={{\r\n                      cursor: this.activeControl.config ? 'pointer' : 'default',\r\n                      pointerEvents: hasNoConfig ? 'none' : 'auto',\r\n                    }}\r\n                  >\r\n                    {this.activeControl.tool instanceof KritzelBrushTool && (\r\n                      <div class=\"color-container\">\r\n                        <kritzel-color\r\n                          value={this.activeToolAsBrushTool?.color}\r\n                          size={this.activeToolAsBrushTool?.size}\r\n                          style={{\r\n                            borderRadius: '50%',\r\n                            border: 'none',\r\n                          }}\r\n                        ></kritzel-color>\r\n                      </div>\r\n                    )}\r\n\r\n                    {this.activeControl.tool instanceof KritzelTextTool && (\r\n                      <div class=\"font-container\">\r\n                        <kritzel-font\r\n                          fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n                          size={this.activeToolAsTextTool?.fontSize}\r\n                          color={this.activeToolAsTextTool?.fontColor}\r\n                        ></kritzel-font>\r\n                      </div>\r\n                    )}\r\n\r\n                    {hasNoConfig && <div class=\"no-config\"></div>}\r\n                  </div>\r\n                </div>\r\n              );\r\n            }\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-controls.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-controls/kritzel-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Host, Listen, Event, EventEmitter, Method } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\nimport { KritzelTextTool } from '../../../classes/tools/text-tool.class';\r\nimport { KritzelToolbarControl } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\n\r\ntype ToolConfig = Record<string, any>;\r\n\r\n@Component({\r\n  tag: 'kritzel-controls',\r\n  styleUrl: 'kritzel-controls.css',\r\n  shadow: true,\r\n  assetsDirs: ['../assets'],\r\n})\r\nexport class KritzelControls {\r\n  @Prop()\r\n  controls: KritzelToolbarControl[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeControl: KritzelToolbarControl | null = null;\r\n\r\n  @Prop()\r\n  isUtilityPanelVisible: boolean = true;\r\n\r\n  @Event()\r\n  isControlsReady: EventEmitter<void>;\r\n\r\n  @State()\r\n  firstConfig: ToolConfig | null = null;\r\n\r\n  @State()\r\n  isTooltipVisible: boolean = false;\r\n\r\n  @State()\r\n  isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(event: MouseEvent) {\r\n    const element = event.target as HTMLElement;\r\n\r\n    if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {\r\n      return;\r\n    }\r\n\r\n    this.isTooltipVisible = false;\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.closeTooltip();\r\n      this.kritzelEngine?.enable();\r\n    }\r\n  }\r\n\r\n  @Listen('activeToolChange', { target: 'document' })\r\n  async handleActiveToolChange(event: CustomEvent) {\r\n    this.activeControl = this.controls.find(control => control.tool === event.detail) || null;\r\n    await this.kritzelEngine?.setFocus();\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.isTooltipVisible = false;\r\n  }\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  get activeToolAsTextTool() {\r\n    return this.activeControl?.tool as KritzelTextTool;\r\n  }\r\n\r\n  get activeToolAsBrushTool() {\r\n    return this.activeControl?.tool as KritzelBrushTool;\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    await this.initializeTools();\r\n    this.isControlsReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private async initializeTools() {\r\n    for (const c of this.controls) {\r\n      if (c.type === 'tool' && c.tool) {\r\n        c.tool = await this.kritzelEngine.registerTool(c.name, c.tool, c.config);\r\n      }\r\n\r\n      if (c.type === 'tool' && c.isDefault && c.tool) {\r\n        await this.kritzelEngine.changeActiveTool(c.tool as KritzelBaseTool);\r\n        this.activeControl = c;\r\n      }\r\n\r\n      if (c.type === 'config') {\r\n        if (this.firstConfig === null) {\r\n          this.firstConfig = c;\r\n        } else {\r\n          console.warn('Only one config control is allowed. The first one will be used.');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private async handleControlClick(control: KritzelToolbarControl) {\r\n    this.activeControl = control;\r\n\r\n    if (this.activeControl.type === 'tool') {\r\n      await this.kritzelEngine.changeActiveTool(this.activeControl.tool as KritzelBaseTool);\r\n    }\r\n  }\r\n\r\n  private handleConfigClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    this.isTooltipVisible = !this.isTooltipVisible;\r\n    this.kritzelEngine?.disable();\r\n  }\r\n\r\n  private async handleToolChange(event: CustomEvent) {\r\n    this.activeControl = { ...this.activeControl, tool: event.detail };\r\n    await this.kritzelEngine.changeActiveTool((this.activeControl as any).tool);\r\n  }\r\n\r\n  render() {\r\n    const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;\r\n\r\n    return (\r\n      <Host\r\n        class={{\r\n          mobile: this.isTouchDevice,\r\n        }}\r\n      >\r\n        {this.isUtilityPanelVisible && (\r\n          <kritzel-utility-panel\r\n            style={{\r\n              position: 'absolute',\r\n              bottom: '56px',\r\n              left: '12px',\r\n            }}\r\n            onUndo={() => this.kritzelEngine?.undo()}\r\n            onRedo={() => this.kritzelEngine?.redo()}\r\n            onDelete={() => this.kritzelEngine?.delete()}\r\n          ></kritzel-utility-panel>\r\n        )}\r\n\r\n        <div class=\"kritzel-controls\">\r\n          {this.controls.map(control => {\r\n            if (control.type === 'tool') {\r\n              return (\r\n                <button\r\n                  class={{\r\n                    'kritzel-control': true,\r\n                    'selected': this.activeControl?.name === control?.name,\r\n                  }}\r\n                  key={control.name}\r\n                  onClick={_event => this.handleControlClick?.(control)}\r\n                >\r\n                  <kritzel-icon name={control.icon}></kritzel-icon>\r\n                </button>\r\n              );\r\n            }\r\n\r\n            if (control.type === 'divider') {\r\n              return <div class=\"kritzel-divider\" key={control.name}></div>;\r\n            }\r\n\r\n            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n              return (\r\n                <div class=\"kritzel-config-container\" key={control.name}>\r\n                  <kritzel-tooltip isVisible={this.isTooltipVisible} anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}>\r\n                    <div style={{ width: '294px', height: '100%' }}>\r\n                      {this.activeControl.name === 'brush' && (\r\n                        <kritzel-control-brush-config tool={this.activeToolAsBrushTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-brush-config>\r\n                      )}\r\n\r\n                      {this.activeControl.name === 'text' && (\r\n                        <kritzel-control-text-config tool={this.activeToolAsTextTool} onToolChange={event => this.handleToolChange?.(event)}></kritzel-control-text-config>\r\n                      )}\r\n                    </div>\r\n                  </kritzel-tooltip>\r\n\r\n                  <div\r\n                    class=\"kritzel-config\"\r\n                    onClick={event => this.handleConfigClick?.(event)}\r\n                    style={{\r\n                      cursor: this.activeControl.config ? 'pointer' : 'default',\r\n                      pointerEvents: hasNoConfig ? 'none' : 'auto',\r\n                    }}\r\n                  >\r\n                    {this.activeControl.tool instanceof KritzelBrushTool && (\r\n                      <div class=\"color-container\">\r\n                        <kritzel-color\r\n                          value={this.activeToolAsBrushTool?.color}\r\n                          size={this.activeToolAsBrushTool?.size}\r\n                          style={{\r\n                            borderRadius: '50%',\r\n                            border: 'none',\r\n                          }}\r\n                        ></kritzel-color>\r\n                      </div>\r\n                    )}\r\n\r\n                    {this.activeControl.tool instanceof KritzelTextTool && (\r\n                      <div class=\"font-container\">\r\n                        <kritzel-font\r\n                          fontFamily={this.activeToolAsTextTool?.fontFamily}\r\n                          size={this.activeToolAsTextTool?.fontSize}\r\n                          color={this.activeToolAsTextTool?.fontColor}\r\n                        ></kritzel-font>\r\n                      </div>\r\n                    )}\r\n\r\n                    {hasNoConfig && <div class=\"no-config\"></div>}\r\n                  </div>\r\n                </div>\r\n              );\r\n            }\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js

@@ -13,7 +13,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'f381fac2cb032ca19c6945ef4f39673ea0bd0cc5' }, h("button", { key: '1f7200672970baf1d0cfcaa116fa3f8f9a39832a', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '755d9201d80d8db086f07b38e90a01a06e980b50', name: "undo" })), h("button", { key: '06e4d5c2956f23245c3d48f21c15d54e8bef8119', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '13eb6b31c45b67ac399fc7c84b941ddce04c5c86', name: "redo" })), h("div", { key: '7f03a576a37649db679b93604c2654d29cc81da4', class: "utility-separator" }), h("button", { key: '0c40613e9f6a049cec872d71e9f948d685ec1dbe', class: "utility-button" }, h("kritzel-icon", { key: '8cba73bcb02ef8b7c182ba2fd16d98d6855f1c1b', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: 'cf7b5c501b6535fda22b17ea218e90bd60223c6e' }, h("button", { key: '05db2cee7f2e191674167ef503e70718200bf904', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '10412c038b9d4e66851c8a0c9b51b99607bac397', name: "undo" })), h("button", { key: 'edf0289de8ce5cddd9341bc1855eae095274226c', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '46263e3d3f166b224c9a18ba383085e020fac51a', name: "redo" })), h("div", { key: '3a6c0eca21f44887683d6308ca5741b095eceb77', class: "utility-separator" }), h("button", { key: 'ced83e0c47fc920edabdc5b3379a8805f1827374', class: "utility-button" }, h("kritzel-icon", { key: 'd49c6412d778d34fe21e86482f2114631621106a', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js

@@ -0,0 +1,212 @@
+import { Host, h } from "@stencil/core";
+import { KritzelWorkspace } from "../../../classes/workspace.class";
+import { ObjectHelper } from "../../../helpers/object.helper";
+export class KritzelWorkspaceManager {
+    constructor() {
+        this.workspaces = [];
+        this.editingIndex = null;
+        this.newWorkspace = null;
+        this.kritzelEngine = null;
+        this.handleNewWorkspace = async () => {
+            var _a;
+            await ((_a = this.splitButtonRef) === null || _a === void 0 ? void 0 : _a.openMenu());
+            requestAnimationFrame(() => {
+                this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
+                this.editingIndex = 0;
+            });
+        };
+        this.handleMenuClosed = () => {
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleSave = async (item) => {
+            const workspace = item.value;
+            const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
+            if (this.newWorkspace) {
+                await this.kritzelEngine.createWorkspace(updatedWorkspace);
+                this.editingIndex = null;
+                this.newWorkspace = null;
+                this.selectWorkspace(updatedWorkspace);
+            }
+            else {
+                await this.kritzelEngine.updateWorkspace(updatedWorkspace);
+                this.editingIndex = null;
+                this.newWorkspace = null;
+            }
+        };
+        this.handleRename = (index) => {
+            this.editingIndex = index;
+        };
+        this.handleDelete = async (workspaceToDelete) => {
+            var _a;
+            await this.kritzelEngine.deleteWorkspace(workspaceToDelete);
+            if (((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === workspaceToDelete.id) {
+                const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;
+                this.selectWorkspace(newActiveWorkspace);
+            }
+        };
+    }
+    get sortedWorkspaces() {
+        const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];
+        return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }
+    get activeItemIndex() {
+        return this.sortedWorkspaces.findIndex(ws => { var _a; return ws.id === ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id); });
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        this.isWorkspaceManagerReady.emit();
+    }
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    handleSelect(workspace) {
+        this.selectWorkspace(workspace);
+    }
+    selectWorkspace(workspace) {
+        debugger;
+        if (this.editingIndex !== null)
+            return;
+        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
+        this.workspaceChange.emit(workspace);
+    }
+    render() {
+        const workspaceSelectionOptions = this.sortedWorkspaces.map((ws, index) => ({
+            label: ws.name,
+            value: ws,
+            select: () => this.handleSelect(ws),
+            cancel: this.handleMenuClosed,
+            save: this.handleSave,
+            children: [
+                {
+                    label: 'Rename',
+                    value: 'rename',
+                    select: () => this.handleRename(index),
+                },
+                {
+                    label: 'Delete',
+                    value: 'delete',
+                    disabled: this.sortedWorkspaces.length <= 1,
+                    select: () => this.handleDelete(ws),
+                },
+            ],
+        }));
+        return (h(Host, { key: '4d060aee853a47ea451f707c6de345b6efcbd678' }, h("kritzel-split-button", { key: 'cb52b41b25c7ddc8584e96a2151efc6406166e99', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
+    }
+    static get is() { return "kritzel-workspace-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-workspace-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-workspace-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "workspaces": {
+                "type": "unknown",
+                "attribute": "workspaces",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelWorkspace[]",
+                    "resolved": "KritzelWorkspace[]",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "activeWorkspace": {
+                "type": "unknown",
+                "attribute": "active-workspace",
+                "mutable": true,
+                "complexType": {
+                    "original": "KritzelWorkspace",
+                    "resolved": "KritzelWorkspace",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "editingIndex": {},
+            "newWorkspace": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "isWorkspaceManagerReady",
+                "name": "isWorkspaceManagerReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "workspaceChange",
+                "name": "workspaceChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KritzelWorkspace",
+                    "resolved": "KritzelWorkspace",
+                    "references": {
+                        "KritzelWorkspace": {
+                            "location": "import",
+                            "path": "../../../classes/workspace.class",
+                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=kritzel-workspace-manager.js.map

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-workspace-manager.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\r\nimport { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-workspace-manager',\r\n  styleUrl: 'kritzel-workspace-manager.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelWorkspaceManager {\r\n  @Prop()\r\n  workspaces: KritzelWorkspace[] = [];\r\n\r\n  @Prop({ mutable: true })\r\n  activeWorkspace: KritzelWorkspace;\r\n\r\n  @State()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  newWorkspace: KritzelWorkspace | null = null;\r\n\r\n  @Event()\r\n  isWorkspaceManagerReady: EventEmitter<void>;\r\n\r\n  @Event()\r\n  workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  kritzelEngine: HTMLKritzelEngineElement | null = null;\r\n\r\n  splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n  get sortedWorkspaces() {\r\n    const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];\r\n    return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\r\n  }\r\n\r\n  get activeItemIndex() {\r\n    return this.sortedWorkspaces.findIndex(ws => ws.id === this.activeWorkspace?.id);\r\n  }\r\n\r\n  async componentWillLoad() {\r\n    await this.initializeEngine();\r\n    this.isWorkspaceManagerReady.emit();\r\n  }\r\n\r\n  private async initializeEngine() {\r\n    await customElements.whenDefined('kritzel-engine');\r\n    this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n    if (!this.kritzelEngine) {\r\n      throw new Error('kritzel-engine not found in parent element.');\r\n    }\r\n  }\r\n\r\n  private handleSelect(workspace: KritzelWorkspace) {\r\n    this.selectWorkspace(workspace);\r\n  }\r\n\r\n  private handleNewWorkspace = async () => {\r\n    await this.splitButtonRef?.openMenu();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n      this.editingIndex = 0;\r\n    });\r\n  };\r\n\r\n  private handleMenuClosed = () => {\r\n    this.editingIndex = null;\r\n    this.newWorkspace = null;\r\n  };\r\n\r\n  private handleSave = async (item: KritzelMenuItem<KritzelWorkspace>) => {\r\n    const workspace = item.value;\r\n    const updatedWorkspace = { ...workspace, name: item.label };\r\n\r\n    if (this.newWorkspace) {\r\n      await this.kritzelEngine.createWorkspace(updatedWorkspace);\r\n\r\n      this.editingIndex = null;\r\n      this.newWorkspace = null;\r\n\r\n      this.selectWorkspace(updatedWorkspace);\r\n    } else {\r\n      await this.kritzelEngine.updateWorkspace(updatedWorkspace);\r\n\r\n      this.editingIndex = null;\r\n      this.newWorkspace = null;\r\n    }\r\n  };\r\n\r\n  private handleRename = (index: number) => {\r\n    this.editingIndex = index;\r\n  };\r\n\r\n  private handleDelete = async (workspaceToDelete: KritzelWorkspace) => {\r\n    await this.kritzelEngine.deleteWorkspace(workspaceToDelete);\r\n\r\n    if (this.activeWorkspace?.id === workspaceToDelete.id) {\r\n      const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;\r\n      this.selectWorkspace(newActiveWorkspace);\r\n    }\r\n  };\r\n\r\n  private selectWorkspace(workspace: KritzelWorkspace) {\r\n    debugger;\r\n    if (this.editingIndex !== null) return;\r\n    this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);\r\n    this.workspaceChange.emit(workspace);\r\n  }\r\n\r\n  render() {\r\n    const workspaceSelectionOptions: KritzelMenuItem<KritzelWorkspace>[] = this.sortedWorkspaces.map((ws, index) => ({\r\n      label: ws.name,\r\n      value: ws,\r\n      select: () => this.handleSelect(ws),\r\n      cancel: this.handleMenuClosed,\r\n      save: this.handleSave,\r\n      children: [\r\n        {\r\n          label: 'Rename',\r\n          value: 'rename',\r\n          select: () => this.handleRename(index),\r\n        },\r\n        {\r\n          label: 'Delete',\r\n          value: 'delete',\r\n          disabled: this.sortedWorkspaces.length <= 1,\r\n          select: () => this.handleDelete(ws),\r\n        },\r\n      ],\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-split-button\r\n          ref={el => (this.splitButtonRef = el)}\r\n          buttonIcon=\"plus\"\r\n          options={workspaceSelectionOptions}\r\n          activeItemIndex={this.activeItemIndex}\r\n          editingIndex={this.editingIndex}\r\n          onButtonClick={this.handleNewWorkspace}\r\n          onMenuClosed={this.handleMenuClosed}\r\n        ></kritzel-split-button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/configs/default-engine-state.js

@@ -1,4 +1,5 @@
 export const DEFAULT_ENGINE_STATE = {
+    activeWorkspace: null,
     activeTool: null,
     activeText: null,
     currentPath: null,
@@ -32,6 +33,7 @@ export const DEFAULT_ENGINE_STATE = {
         showObjectInfo: false,
         showViewportInfo: false,
         logCommands: false,
+        logDatabase: false,
     },
     host: null,
     pointerX: 0,
@@ -39,7 +41,7 @@ export const DEFAULT_ENGINE_STATE = {
     scale: 1,
     scaleMax: 1,
     scaleMin: 1,
-    scaleStep: 0.05,
+    scaleStep: 0.075,
     startX: 0,
     startY: 0,
     translateX: 0,
@@ -53,6 +55,7 @@ export const DEFAULT_ENGINE_STATE = {
     historyBufferSize: 1000,
     longTouchTimeout: null,
     longTouchDelay: 300,
-    pointers: new Map()
+    pointers: new Map(),
+    workspaces: [],
 };
 //# sourceMappingURL=default-engine-state.js.map

package/dist/collection/configs/default-engine-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"default-engine-state.js","sourceRoot":"","sources":["../../src/configs/default-engine-state.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAuB;IACtD,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,IAAI;IACpB,gBAAgB,EAAE,IAAI;IACtB,kBAAkB,EAAE,KAAK;IACzB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,KAAK;IACjB,sBAAsB,EAAE,KAAK;IAC7B,UAAU,EAAE,KAAK;IACjB,wBAAwB,EAAE,KAAK;IAC/B,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EAAE,KAAK;IACvB,oBAAoB,EAAE,KAAK;IAC3B,gBAAgB,EAAE,EAAE;IACpB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,KAAK;QACvB,WAAW,EAAE,KAAK;KACnB;IACD,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,iBAAiB,EAAE,IAAI;IACvB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,GAAG;IACnB,QAAQ,EAAE,IAAI,GAAG,EAAwB;CAC1C,CAAC","sourcesContent":["import { KritzelEngineState } from \"../interfaces/engine-state.interface\";\r\n\r\nexport const DEFAULT_ENGINE_STATE: KritzelEngineState = {\r\n  activeTool: null,\r\n  activeText: null,\r\n  currentPath: null,\r\n  copiedObjects: null,\r\n  objectsOctree: null,\r\n  selectionBox: null,\r\n  selectionGroup: null,\r\n  resizeHandleType: null,\r\n  hasViewportChanged: false,\r\n  isReady: false,\r\n  isEnabled: true,\r\n  isScaling: false,\r\n  isPanning: false,\r\n  isFocused: false,\r\n  isSelecting: false,\r\n  isResizing: false,\r\n  isResizeHandleSelected: false,\r\n  isRotating: false,\r\n  isRotationHandleSelected: false,\r\n  isDragging: false,\r\n  isDrawing: false,\r\n  isErasing: false,\r\n  isWriting: false,\r\n  isCtrlKeyPressed: false,\r\n  isContextMenuVisible: false,\r\n  contextMenuItems: [],\r\n  contextMenuX: 0,\r\n  contextMenuY: 0,\r\n  skipContextMenu: false,\r\n  debugInfo: {\r\n    showObjectInfo: false,\r\n    showViewportInfo: false,\r\n    logCommands: false,\r\n  },\r\n  host: null,\r\n  pointerX: 0,\r\n  pointerY: 0,\r\n  scale: 1,\r\n  scaleMax: 1,\r\n  scaleMin: 1,\r\n  scaleStep: 0.05,\r\n  startX: 0,\r\n  startY: 0,\r\n  translateX: 0,\r\n  translateXMax: 400,\r\n  translateXMin: 0,\r\n  translateY: 0,\r\n  translateYMax: 400,\r\n  translateYMin: 0,\r\n  viewportWidth: 0,\r\n  viewportHeight: 0,\r\n  historyBufferSize: 1000,\r\n  longTouchTimeout: null,\r\n  longTouchDelay: 300,\r\n  pointers: new Map<number, PointerEvent>()\r\n};"]}
+{"version":3,"file":"default-engine-state.js","sourceRoot":"","sources":["../../src/configs/default-engine-state.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAuB;IACtD,eAAe,EAAE,IAAI;IACrB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,YAAY,EAAE,IAAI;IAClB,cAAc,EAAE,IAAI;IACpB,gBAAgB,EAAE,IAAI;IACtB,kBAAkB,EAAE,KAAK;IACzB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,KAAK;IACjB,sBAAsB,EAAE,KAAK;IAC7B,UAAU,EAAE,KAAK;IACjB,wBAAwB,EAAE,KAAK;IAC/B,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EAAE,KAAK;IACvB,oBAAoB,EAAE,KAAK;IAC3B,gBAAgB,EAAE,EAAE;IACpB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE,CAAC;IACf,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,gBAAgB,EAAE,KAAK;QACvB,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,KAAK;KACnB;IACD,IAAI,EAAE,IAAI;IACV,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,aAAa,EAAE,CAAC;IAChB,aAAa,EAAE,CAAC;IAChB,cAAc,EAAE,CAAC;IACjB,iBAAiB,EAAE,IAAI;IACvB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,GAAG;IACnB,QAAQ,EAAE,IAAI,GAAG,EAAwB;IACzC,UAAU,EAAE,EAAE;CACf,CAAC","sourcesContent":["import { KritzelEngineState } from \"../interfaces/engine-state.interface\";\r\n\r\nexport const DEFAULT_ENGINE_STATE: KritzelEngineState = {\r\n  activeWorkspace: null,\r\n  activeTool: null,\r\n  activeText: null,\r\n  currentPath: null,\r\n  copiedObjects: null,\r\n  objectsOctree: null,\r\n  selectionBox: null,\r\n  selectionGroup: null,\r\n  resizeHandleType: null,\r\n  hasViewportChanged: false,\r\n  isReady: false,\r\n  isEnabled: true,\r\n  isScaling: false,\r\n  isPanning: false,\r\n  isFocused: false,\r\n  isSelecting: false,\r\n  isResizing: false,\r\n  isResizeHandleSelected: false,\r\n  isRotating: false,\r\n  isRotationHandleSelected: false,\r\n  isDragging: false,\r\n  isDrawing: false,\r\n  isErasing: false,\r\n  isWriting: false,\r\n  isCtrlKeyPressed: false,\r\n  isContextMenuVisible: false,\r\n  contextMenuItems: [],\r\n  contextMenuX: 0,\r\n  contextMenuY: 0,\r\n  skipContextMenu: false,\r\n  debugInfo: {\r\n    showObjectInfo: false,\r\n    showViewportInfo: false,\r\n    logCommands: false,\r\n    logDatabase: false,\r\n  },\r\n  host: null,\r\n  pointerX: 0,\r\n  pointerY: 0,\r\n  scale: 1,\r\n  scaleMax: 1,\r\n  scaleMin: 1,\r\n  scaleStep: 0.075,\r\n  startX: 0,\r\n  startY: 0,\r\n  translateX: 0,\r\n  translateXMax: 400,\r\n  translateXMin: 0,\r\n  translateY: 0,\r\n  translateYMax: 400,\r\n  translateYMin: 0,\r\n  viewportWidth: 0,\r\n  viewportHeight: 0,\r\n  historyBufferSize: 1000,\r\n  longTouchTimeout: null,\r\n  longTouchDelay: 300,\r\n  pointers: new Map<number, PointerEvent>(),\r\n  workspaces: [],\r\n};"]}

package/dist/collection/helpers/class.helper.js

@@ -1,6 +1,6 @@
 export class KritzelClassHelper {
     static isInstanceOf(object, className) {
-        return object.__class__ === className;
+        return !!object && object.__class__ === className;
     }
 }
 //# sourceMappingURL=class.helper.js.map

package/dist/collection/helpers/class.helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"class.helper.js","sourceRoot":"","sources":["../../src/helpers/class.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,kBAAkB;IAC7B,MAAM,CAAC,YAAY,CAAI,MAAW,EAAE,SAAiB;QACnD,OAAO,MAAM,CAAC,SAAS,KAAK,SAAS,CAAC;IACxC,CAAC;CACF","sourcesContent":["export class KritzelClassHelper {\r\n  static isInstanceOf<T>(object: any, className: string): object is T {\r\n    return object.__class__ === className;\r\n  }\r\n}"]}
+{"version":3,"file":"class.helper.js","sourceRoot":"","sources":["../../src/helpers/class.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,kBAAkB;IAC7B,MAAM,CAAC,YAAY,CAAI,MAAW,EAAE,SAAiB;QACnD,OAAO,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,SAAS,KAAK,SAAS,CAAC;IACpD,CAAC;CACF","sourcesContent":["export class KritzelClassHelper {\r\n  static isInstanceOf<T>(object: any, className: string): object is T {\r\n    return !!object && object.__class__ === className;\r\n  }\r\n}"]}

package/dist/collection/helpers/html.helper.js

@@ -1,7 +1,36 @@
-export class KritzelKeyboardHelper {
+export class KritzelHTMLHelper {
     static getNumericValueFromStyle(element, property) {
         const value = window.getComputedStyle(element).getPropertyValue(property);
         return parseFloat(value) || 0;
     }
+    static getScrollableParent(element) {
+        var _a, _b;
+        if (!element) {
+            return window;
+        }
+        const parent = (_b = (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.host) !== null && _b !== void 0 ? _b : element.parentElement;
+        if (!parent || parent.tagName === 'BODY') {
+            return window;
+        }
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
+            return parent;
+        }
+        return this.getScrollableParent(parent);
+    }
+    static isElementInViewport(element) {
+        if (!element) {
+            return false;
+        }
+        const scrollableParent = this.getScrollableParent(element);
+        const rect = element.getBoundingClientRect();
+        if (scrollableParent === window) {
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
+        }
+        const parentRect = scrollableParent.getBoundingClientRect();
+        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
+    }
 }
 //# sourceMappingURL=html.helper.js.map

package/dist/collection/helpers/html.helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"html.helper.js","sourceRoot":"","sources":["../../src/helpers/html.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;IACjC,MAAM,CAAC,wBAAwB,CAAC,OAAoB,EAAE,QAAgB;QACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC1E,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;CACD","sourcesContent":["export class KritzelKeyboardHelper {\r\n static getNumericValueFromStyle(element: HTMLElement, property: string): number {\r\n   const value = window.getComputedStyle(element).getPropertyValue(property);\r\n   return parseFloat(value) || 0;\r\n }\r\n}"]}
+{"version":3,"file":"html.helper.js","sourceRoot":"","sources":["../../src/helpers/html.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,iBAAiB;IAC7B,MAAM,CAAC,wBAAwB,CAAC,OAAoB,EAAE,QAAgB;QACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC1E,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,mBAAmB,CAAC,OAAoB;;QAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,MAAM,MAAM,GAAG,MAAC,MAAC,OAAO,CAAC,UAAyB,0CAAE,IAAoB,mCAAI,OAAO,CAAC,aAAa,CAAC;QAElG,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;YACzC,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC9C,IAAI,KAAK,CAAC,QAAQ,KAAK,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;YAC3H,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,CAAC,mBAAmB,CAAC,OAAoB;QAC7C,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAE7C,IAAI,gBAAgB,KAAK,MAAM,EAAE,CAAC;YAChC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;YACnF,MAAM,aAAa,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;YAEhF,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,cAAc,IAAI,IAAI,CAAC,KAAK,IAAI,aAAa,CAAC;QACzG,CAAC;QAED,MAAM,UAAU,GAAI,gBAAgC,CAAC,qBAAqB,EAAE,CAAC;QAE7E,OAAO,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC;IAC1I,CAAC;CACF","sourcesContent":["export class KritzelHTMLHelper {\r\n static getNumericValueFromStyle(element: HTMLElement, property: string): number {\r\n   const value = window.getComputedStyle(element).getPropertyValue(property);\r\n   return parseFloat(value) || 0;\r\n }\r\n\r\n static getScrollableParent(element: HTMLElement): HTMLElement | Window {\r\n    if (!element) {\r\n      return window;\r\n    }\r\n\r\n    const parent = ((element.parentNode as ShadowRoot)?.host as HTMLElement) ?? element.parentElement;\r\n\r\n    if (!parent || parent.tagName === 'BODY') {\r\n      return window;\r\n    }\r\n\r\n    const style = window.getComputedStyle(parent);\r\n    if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {\r\n      return parent;\r\n    }\r\n\r\n    return this.getScrollableParent(parent);\r\n  }\r\n\r\n  static isElementInViewport(element: HTMLElement): boolean {\r\n    if (!element) {\r\n      return false;\r\n    }\r\n\r\n    const scrollableParent = this.getScrollableParent(element);\r\n    const rect = element.getBoundingClientRect();\r\n\r\n    if (scrollableParent === window) {\r\n      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;\r\n      const viewportWidth = window.innerWidth || document.documentElement.clientWidth;\r\n\r\n      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;\r\n    }\r\n\r\n    const parentRect = (scrollableParent as HTMLElement).getBoundingClientRect();\r\n\r\n    return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;\r\n  }\r\n}"]}

package/dist/collection/helpers/object.helper.js

@@ -18,7 +18,7 @@ export class ObjectHelper {
         const cloneObject = (obj) => {
             const _a = obj, { _store, _elementRef, totalWidth, totalHeight, element } = _a, remainingProps = __rest(_a, ["_store", "_elementRef", "totalWidth", "totalHeight", "element"]);
             const clonedProps = structuredClone(remainingProps);
-            if (element && element instanceof HTMLElement) {
+            if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
                 clonedProps.element = element.cloneNode(true);
             }
             return clonedProps;

package/dist/collection/helpers/object.helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"object.helper.js","sourceRoot":"","sources":["../../src/helpers/object.helper.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA,MAAM,OAAO,YAAY;IACvB,MAAM,CAAC,YAAY;QACjB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,SAA4D;QACvE,MAAM,WAAW,GAAG,CAAC,GAA2B,EAAE,EAAE;YAClD,MAAM,KAA+E,GAAU,EAAzF,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,OAAkC,EAA7B,cAAc,cAA1E,iEAA4E,CAAa,CAAC;YAEhG,MAAM,WAAW,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;YAEpD,IAAI,OAAO,IAAI,OAAO,YAAY,WAAW,EAAE,CAAC;gBAC9C,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;YAC/D,CAAC;YAED,OAAO,WAAW,CAAC;QACrB,CAAC,CAAC;QAEF,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACpC,CAAC;QAED,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,GAAQ;QACrB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,GAAG,EAAE,MAAM,MAAK,CAAC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,WAAW,MAAK,MAAM,CAAC;IACvE,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../classes/objects/base-object.class';\r\n\r\nexport class ObjectHelper {\r\n  static generateUUID(): string {\r\n    return Math.random().toString(36).substr(2, 9);\r\n  }\r\n\r\n  static clone(objOrObjs: KritzelBaseObject<any> | KritzelBaseObject<any>[]): any {\r\n    const cloneObject = (obj: KritzelBaseObject<any>) => {\r\n      const { _store, _elementRef, totalWidth, totalHeight, element, ...remainingProps } = obj as any;\r\n\r\n      const clonedProps = structuredClone(remainingProps);\r\n\r\n      if (element && element instanceof HTMLElement) {\r\n        clonedProps.element = element.cloneNode(true) as HTMLElement;\r\n      }\r\n\r\n      return clonedProps;\r\n    };\r\n\r\n    if (Array.isArray(objOrObjs)) {\r\n      return objOrObjs.map(cloneObject);\r\n    }\r\n\r\n    return cloneObject(objOrObjs);\r\n  }\r\n\r\n  static isEmpty(obj: any): boolean {\r\n    if (obj === null || obj === undefined) {\r\n      return true;\r\n    }\r\n    return Object?.keys(obj).length === 0 && obj?.constructor === Object;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"object.helper.js","sourceRoot":"","sources":["../../src/helpers/object.helper.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA,MAAM,OAAO,YAAY;IACvB,MAAM,CAAC,YAAY;QACjB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,SAA4D;QACvE,MAAM,WAAW,GAAG,CAAC,GAA2B,EAAE,EAAE;YAClD,MAAM,KAA+E,GAAU,EAAzF,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,OAAkC,EAA7B,cAAc,cAA1E,iEAA4E,CAAa,CAAC;YAEhG,MAAM,WAAW,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;YAEpD,IAAI,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,UAAU,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,KAAK,CAAC,EAAE,CAAC;gBAC9F,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;YAC/D,CAAC;YAED,OAAO,WAAW,CAAC;QACrB,CAAC,CAAC;QAEF,IAAI,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACpC,CAAC;QAED,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,GAAQ;QACrB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,GAAG,EAAE,MAAM,MAAK,CAAC,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,WAAW,MAAK,MAAM,CAAC;IACvE,CAAC;CACF","sourcesContent":["import { KritzelBaseObject } from '../classes/objects/base-object.class';\r\n\r\nexport class ObjectHelper {\r\n  static generateUUID(): string {\r\n    return Math.random().toString(36).substr(2, 9);\r\n  }\r\n\r\n  static clone(objOrObjs: KritzelBaseObject<any> | KritzelBaseObject<any>[]): any {\r\n    const cloneObject = (obj: KritzelBaseObject<any>) => {\r\n      const { _store, _elementRef, totalWidth, totalHeight, element, ...remainingProps } = obj as any;\r\n\r\n      const clonedProps = structuredClone(remainingProps);\r\n\r\n      if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {\r\n        clonedProps.element = element.cloneNode(true) as HTMLElement;\r\n      }\r\n\r\n      return clonedProps;\r\n    };\r\n\r\n    if (Array.isArray(objOrObjs)) {\r\n      return objOrObjs.map(cloneObject);\r\n    }\r\n\r\n    return cloneObject(objOrObjs);\r\n  }\r\n\r\n  static isEmpty(obj: any): boolean {\r\n    if (obj === null || obj === undefined) {\r\n      return true;\r\n    }\r\n    return Object?.keys(obj).length === 0 && obj?.constructor === Object;\r\n  }\r\n}\r\n"]}

package/dist/collection/interfaces/command.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.interface.js","sourceRoot":"","sources":["../../src/interfaces/command.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelCommand {\r\n    initiator: string;\r\n    isUndoable: boolean;\r\n    execute(): void;\r\n    undo?(): void;\r\n}"]}
+{"version":3,"file":"command.interface.js","sourceRoot":"","sources":["../../src/interfaces/command.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelCommand {\r\n    initiator: string;\r\n    skipHistory: boolean;\r\n    execute(): void;\r\n    undo?(): void;\r\n}"]}

package/dist/collection/interfaces/debug-info.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"debug-info.interface.js","sourceRoot":"","sources":["../../src/interfaces/debug-info.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelDebugInfo {\r\n showViewportInfo: boolean;\r\n showObjectInfo: boolean;\r\n logCommands: boolean;\r\n}\r\n"]}
+{"version":3,"file":"debug-info.interface.js","sourceRoot":"","sources":["../../src/interfaces/debug-info.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelDebugInfo {\r\n showViewportInfo: boolean;\r\n showObjectInfo: boolean;\r\n logCommands: boolean;\r\n logDatabase: boolean;\r\n}\r\n"]}