kritzel-stencil 0.0.119 → 0.0.120

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  @Event()\r\n  isControlsReady: EventEmitter<void>;\r\n\r\n  @State()\r\n  firstConfig: ToolConfig | null = null;\r\n\r\n  @State()\r\n  tooltipVisible: 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.tooltipVisible = false;\r\n    this.kritzelEngine.enable();\r\n  }\r\n\r\n  @Method()\r\n  async closeTooltip() {\r\n    this.tooltipVisible = 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.tooltipVisible = !this.tooltipVisible;\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        <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        <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.tooltipVisible} 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('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"]}

package/dist/collection/configs/default-brush-tool.config.js

@@ -0,0 +1,60 @@
+export const DEFAULT_BRUSH_CONFIG = {
+    type: 'pen',
+    color: '#000000',
+    size: 16,
+    palettes: {
+        pen: [
+            '#000000',
+            '#ff5252',
+            '#ffbc00',
+            '#00c853',
+            '#0000FF',
+            '#d500f9',
+            '#fafafa',
+            '#a52714',
+            '#ee8100',
+            '#558b2f',
+            '#01579b',
+            '#8e24aa',
+            '#90a4ae',
+            '#ff4081',
+            '#ff6e40',
+            '#aeea00',
+            '#304ffe',
+            '#7c4dff',
+            '#cfd8dc',
+            '#f8bbd0',
+            '#ffccbc',
+            '#f0f4c3',
+            '#9fa8da',
+            '#d1c4e9',
+        ],
+        highlighter: [
+            '#0000006e',
+            '#ff52526e',
+            '#ffbb006e',
+            '#00c8536e',
+            '#0000FF6e',
+            '#d500f96e',
+            '#fafafa6e',
+            '#a527146e',
+            '#ee81006e',
+            '#558b2f6e',
+            '#01579b6e',
+            '#8e24aa6e',
+            '#90a4ae6e',
+            '#ff40816e',
+            '#ff6e406e',
+            '#aeea006e',
+            '#304ffe6e',
+            '#7c4dff6e',
+            '#cfd8dc6e',
+            '#f8bbd06e',
+            '#ffccbc6e',
+            '#f0f4c36e',
+            '#9fa8da6e',
+            '#d1c4e96e',
+        ],
+    },
+};
+//# sourceMappingURL=default-brush-tool.config.js.map

package/dist/collection/configs/default-brush-tool.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-brush-tool.config.js","sourceRoot":"","sources":["../../src/configs/default-brush-tool.config.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAA2B;IAC1D,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;SACV;QACD,WAAW,EAAE;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;SACZ;KACF;CACF,CAAC","sourcesContent":["import { KritzelBrushToolConfig } from '../interfaces/toolbar-control.interface';\r\n\r\nexport const DEFAULT_BRUSH_CONFIG: KritzelBrushToolConfig = {\r\n  type: 'pen',\r\n  color: '#000000',\r\n  size: 16,\r\n  palettes: {\r\n    pen: [\r\n      '#000000',\r\n      '#ff5252',\r\n      '#ffbc00',\r\n      '#00c853',\r\n      '#0000FF',\r\n      '#d500f9',\r\n      '#fafafa',\r\n      '#a52714',\r\n      '#ee8100',\r\n      '#558b2f',\r\n      '#01579b',\r\n      '#8e24aa',\r\n      '#90a4ae',\r\n      '#ff4081',\r\n      '#ff6e40',\r\n      '#aeea00',\r\n      '#304ffe',\r\n      '#7c4dff',\r\n      '#cfd8dc',\r\n      '#f8bbd0',\r\n      '#ffccbc',\r\n      '#f0f4c3',\r\n      '#9fa8da',\r\n      '#d1c4e9',\r\n    ],\r\n    highlighter: [\r\n      '#0000006e',\r\n      '#ff52526e',\r\n      '#ffbb006e',\r\n      '#00c8536e',\r\n      '#0000FF6e',\r\n      '#d500f96e',\r\n      '#fafafa6e',\r\n      '#a527146e',\r\n      '#ee81006e',\r\n      '#558b2f6e',\r\n      '#01579b6e',\r\n      '#8e24aa6e',\r\n      '#90a4ae6e',\r\n      '#ff40816e',\r\n      '#ff6e406e',\r\n      '#aeea006e',\r\n      '#304ffe6e',\r\n      '#7c4dff6e',\r\n      '#cfd8dc6e',\r\n      '#f8bbd06e',\r\n      '#ffccbc6e',\r\n      '#f0f4c36e',\r\n      '#9fa8da6e',\r\n      '#d1c4e96e',\r\n    ],\r\n  },\r\n};\r\n\r\n\r\n"]}

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

@@ -37,13 +37,17 @@ export const DEFAULT_ENGINE_STATE = {
     cursorX: 0,
     cursorY: 0,
     scale: 1,
-    scaleMax: 1000,
-    scaleMin: 0.0001,
+    scaleMax: 1,
+    scaleMin: 1,
     scaleStep: 0.05,
     startX: 0,
     startY: 0,
     translateX: 0,
+    translateXMax: 400,
+    translateXMin: 0,
     translateY: 0,
+    translateYMax: 400,
+    translateYMin: 0,
     viewportWidth: 0,
     viewportHeight: 0,
     historyBufferSize: 1000,

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,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;IACb,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  cursorX: 0,\r\n  cursorY: 0,\r\n  scale: 1,\r\n  scaleMax: 1000,\r\n  scaleMin: 0.0001,\r\n  scaleStep: 0.05,\r\n  startX: 0,\r\n  startY: 0,\r\n  translateX: 0,\r\n  translateY: 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,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,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,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  cursorX: 0,\r\n  cursorY: 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};"]}

package/dist/collection/configs/default-text-tool.config.js

@@ -0,0 +1,32 @@
+export const DEFAULT_TEXT_CONFIG = {
+    color: '#000000',
+    size: 8,
+    fontFamily: 'Arial',
+    palette: [
+        '#000000',
+        '#ff5252',
+        '#ffbc00',
+        '#00c853',
+        '#0000FF',
+        '#d500f9',
+        '#fafafa',
+        '#a52714',
+        '#ee8100',
+        '#558b2f',
+        '#01579b',
+        '#8e24aa',
+        '#90a4ae',
+        '#ff4081',
+        '#ff6e40',
+        '#aeea00',
+        '#304ffe',
+        '#7c4dff',
+        '#cfd8dc',
+        '#f8bbd0',
+        '#ffccbc',
+        '#f0f4c3',
+        '#9fa8da',
+        '#d1c4e9',
+    ],
+};
+//# sourceMappingURL=default-text-tool.config.js.map

package/dist/collection/configs/default-text-tool.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-text-tool.config.js","sourceRoot":"","sources":["../../src/configs/default-text-tool.config.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAA0B;IACxD,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,CAAC;IACP,UAAU,EAAE,OAAO;IACnB,OAAO,EAAE;QACP,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;KACV;CACF,CAAC","sourcesContent":["import { KritzelTextToolConfig } from \"../interfaces/toolbar-control.interface\";\r\n\r\nexport const DEFAULT_TEXT_CONFIG: KritzelTextToolConfig = {\r\n  color: '#000000',\r\n  size: 8,\r\n  fontFamily: 'Arial',\r\n  palette: [\r\n    '#000000',\r\n    '#ff5252',\r\n    '#ffbc00',\r\n    '#00c853',\r\n    '#0000FF',\r\n    '#d500f9',\r\n    '#fafafa',\r\n    '#a52714',\r\n    '#ee8100',\r\n    '#558b2f',\r\n    '#01579b',\r\n    '#8e24aa',\r\n    '#90a4ae',\r\n    '#ff4081',\r\n    '#ff6e40',\r\n    '#aeea00',\r\n    '#304ffe',\r\n    '#7c4dff',\r\n    '#cfd8dc',\r\n    '#f8bbd0',\r\n    '#ffccbc',\r\n    '#f0f4c3',\r\n    '#9fa8da',\r\n    '#d1c4e9',\r\n  ],\r\n};"]}

package/dist/collection/constants/engine.constants.js

@@ -0,0 +1,3 @@
+export const ABSOLUTE_SCALE_MAX = 1000;
+export const ABSOLUTE_SCALE_MIN = 0.0001;
+//# sourceMappingURL=engine.constants.js.map

package/dist/collection/constants/engine.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"engine.constants.js","sourceRoot":"","sources":["../../src/constants/engine.constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC;AACvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC","sourcesContent":["export const ABSOLUTE_SCALE_MAX = 1000;\r\nexport const ABSOLUTE_SCALE_MIN = 0.0001;"]}

package/dist/collection/index.js

@@ -10,4 +10,12 @@
 export * from './classes/objects/text.class';
 export * from './classes/objects/path.class';
 export * from './classes/objects/image.class';
+export * from './classes/tools/brush-tool.class';
+export * from './classes/tools/eraser-tool.class';
+export * from './classes/tools/image-tool.class';
+export * from './classes/tools/text-tool.class';
+export * from './classes/tools/selection-tool.class';
+export * from './interfaces/toolbar-control.interface';
+export * from './configs/default-brush-tool.config';
+export * from './configs/default-text-tool.config';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC","sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport type * from './components';\r\n\r\nexport * from './classes/objects/text.class';\r\nexport * from './classes/objects/path.class';\r\nexport * from './classes/objects/image.class';\r\n\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AAErD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC","sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport type * from './components';\r\n\r\nexport * from './classes/objects/text.class';\r\nexport * from './classes/objects/path.class';\r\nexport * from './classes/objects/image.class';\r\n\r\nexport * from './classes/tools/brush-tool.class';\r\nexport * from './classes/tools/eraser-tool.class';\r\nexport * from './classes/tools/image-tool.class';\r\nexport * from './classes/tools/text-tool.class';\r\nexport * from './classes/tools/selection-tool.class';\r\n\r\nexport * from './interfaces/toolbar-control.interface';\r\n\r\nexport * from './configs/default-brush-tool.config';\r\nexport * from './configs/default-text-tool.config';\r\n\r\n\r\n\r\n"]}

package/dist/collection/interfaces/context-menu-item.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu-item.interface.js","sourceRoot":"","sources":["../../src/interfaces/context-menu-item.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface ContextMenuItem {\r\n  label: string;\r\n  action: () => void; \r\n  icon?: string;\r\n  disabled?: boolean | (() => boolean);\r\n}\r\n"]}
+{"version":3,"file":"context-menu-item.interface.js","sourceRoot":"","sources":["../../src/interfaces/context-menu-item.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from \"../classes/objects/base-object.class\";\r\n\r\nexport interface ContextMenuItem {\r\n  label: string;\r\n  action: (menu: { x: number; y: number }, objects: KritzelBaseObject[]) => void;\r\n  icon?: string;\r\n  visible?: boolean | ((menu: { x: number; y: number }, objects: KritzelBaseObject[]) => boolean | Promise<boolean>);\r\n  disabled?: boolean | ((menu: { x: number; y: number }, objects: KritzelBaseObject[]) => boolean | Promise<boolean>);\r\n}\r\n"]}

package/dist/collection/interfaces/engine-state.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"engine-state.interface.js","sourceRoot":"","sources":["../../src/interfaces/engine-state.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from \"../classes/objects/base-object.class\";\r\nimport { KritzelPath } from \"../classes/objects/path.class\";\r\nimport { KrtizelSelectionBox } from \"../classes/objects/selection-box.class\";\r\nimport { KritzelSelectionGroup } from \"../classes/objects/selection-group.class\";\r\nimport { KritzelText } from \"../classes/objects/text.class\";\r\nimport { KritzelOctree } from \"../classes/structures/octree.structure\";\r\nimport { KritzelBaseTool } from \"../classes/tools/base-tool.class\";\r\nimport { KritzelHandleType } from \"../enums/handle-type.enum\";\r\nimport { ContextMenuItem } from \"./context-menu-item.interface\";\r\nimport { KritzelDebugInfo } from \"./debug-info.interface\";\r\n\r\nexport interface KritzelEngineState {\r\n  activeTool: KritzelBaseTool;\r\n  activeText: KritzelText;\r\n  currentPath?: KritzelPath;\r\n  copiedObjects?: KritzelSelectionGroup;\r\n  objectsOctree: KritzelOctree<KritzelBaseObject<Element>>;\r\n  selectionBox?: KrtizelSelectionBox;\r\n  selectionGroup?: KritzelSelectionGroup;\r\n  resizeHandleType: KritzelHandleType;\r\n  hasViewportChanged: boolean;\r\n  isReady: boolean;\r\n  isEnabled: boolean;\r\n  isScaling: boolean;\r\n  isPanning: boolean;\r\n  isFocused: boolean;\r\n  isSelecting: boolean;\r\n  isResizing: boolean;\r\n  isResizeHandleSelected: boolean;\r\n  isRotating: boolean;\r\n  isRotationHandleSelected: boolean;\r\n  isDragging: boolean;\r\n  isDrawing: boolean;\r\n  isErasing: boolean;\r\n  isWriting: boolean;\r\n  isCtrlKeyPressed: boolean;\r\n  isContextMenuVisible: boolean;\r\n  contextMenuItems: ContextMenuItem[];\r\n  contextMenuX: number;\r\n  contextMenuY: number;\r\n  skipContextMenu: boolean;\r\n  debugInfo: KritzelDebugInfo;\r\n  host: HTMLElement;\r\n  cursorX: number;\r\n  cursorY: number;\r\n  scale: number;\r\n  scaleMax: number;\r\n  scaleMin: number;\r\n  scaleStep: number;\r\n  startX: number;\r\n  startY: number;\r\n  translateX: number;\r\n  translateY: number;\r\n  viewportWidth: number;\r\n  viewportHeight: number;\r\n  historyBufferSize: number;\r\n  longTouchTimeout: number;\r\n  longTouchDelay: number;\r\n  pointers: Map<number, PointerEvent>;\r\n}"]}
+{"version":3,"file":"engine-state.interface.js","sourceRoot":"","sources":["../../src/interfaces/engine-state.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from \"../classes/objects/base-object.class\";\r\nimport { KritzelPath } from \"../classes/objects/path.class\";\r\nimport { KrtizelSelectionBox } from \"../classes/objects/selection-box.class\";\r\nimport { KritzelSelectionGroup } from \"../classes/objects/selection-group.class\";\r\nimport { KritzelText } from \"../classes/objects/text.class\";\r\nimport { KritzelOctree } from \"../classes/structures/octree.structure\";\r\nimport { KritzelBaseTool } from \"../classes/tools/base-tool.class\";\r\nimport { KritzelHandleType } from \"../enums/handle-type.enum\";\r\nimport { ContextMenuItem } from \"./context-menu-item.interface\";\r\nimport { KritzelDebugInfo } from \"./debug-info.interface\";\r\n\r\nexport interface KritzelEngineState {\r\n  activeTool: KritzelBaseTool;\r\n  activeText: KritzelText;\r\n  currentPath?: KritzelPath;\r\n  copiedObjects?: KritzelSelectionGroup;\r\n  objectsOctree: KritzelOctree<KritzelBaseObject<Element>>;\r\n  selectionBox?: KrtizelSelectionBox;\r\n  selectionGroup?: KritzelSelectionGroup;\r\n  resizeHandleType: KritzelHandleType;\r\n  hasViewportChanged: boolean;\r\n  isReady: boolean;\r\n  isEnabled: boolean;\r\n  isScaling: boolean;\r\n  isPanning: boolean;\r\n  isFocused: boolean;\r\n  isSelecting: boolean;\r\n  isResizing: boolean;\r\n  isResizeHandleSelected: boolean;\r\n  isRotating: boolean;\r\n  isRotationHandleSelected: boolean;\r\n  isDragging: boolean;\r\n  isDrawing: boolean;\r\n  isErasing: boolean;\r\n  isWriting: boolean;\r\n  isCtrlKeyPressed: boolean;\r\n  isContextMenuVisible: boolean;\r\n  contextMenuItems: ContextMenuItem[];\r\n  contextMenuX: number;\r\n  contextMenuY: number;\r\n  skipContextMenu: boolean;\r\n  debugInfo: KritzelDebugInfo;\r\n  host: HTMLElement;\r\n  cursorX: number;\r\n  cursorY: number;\r\n  scale: number;\r\n  scaleMax: number;\r\n  scaleMin: number;\r\n  scaleStep: number;\r\n  startX: number;\r\n  startY: number;\r\n  translateX: number;\r\n  translateXMax: number;\r\n  translateXMin: number;\r\n  translateY: number;\r\n  translateYMax: number;\r\n  translateYMin: number;\r\n  viewportWidth: number;\r\n  viewportHeight: number;\r\n  historyBufferSize: number;\r\n  longTouchTimeout: number;\r\n  longTouchDelay: number;\r\n  pointers: Map<number, PointerEvent>;\r\n}"]}

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

@@ -1 +1 @@
-{"version":3,"file":"object.interface.js","sourceRoot":"","sources":["../../src/interfaces/object.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from '../classes/objects/base-object.class';\r\nimport { KritzelBoundingBox } from './bounding-box.interface';\r\n\r\nexport interface KritzelObject<T = Element> {\r\n  id: string;\r\n  visible: boolean;\r\n  x: number;\r\n  y: number;\r\n  translateX: number;\r\n  translateY: number;\r\n  height: number;\r\n  width: number;\r\n  backgroundColor: string;\r\n  borderColor: string;\r\n  borderWidth: number;\r\n  opacity: number;\r\n  scale: number;\r\n  selected: boolean;\r\n  resizing: boolean;\r\n  rotation: number;\r\n  markedForRemoval: boolean;\r\n  isMounted: boolean;\r\n  zIndex: number;\r\n\r\n  _elementRef: T;\r\n\r\n  set elementRef(element: T);\r\n  get elementRef(): T;\r\n  get boundingBox(): KritzelBoundingBox;\r\n  get totalWidth(): number;\r\n  get totalHeight(): number;\r\n  get rotationDegrees(): number;\r\n  get centerX(): number;\r\n  get centerY(): number;\r\n\r\n  mount(element: T): void;\r\n  generateId(): string;\r\n  isInViewport(viewport: KritzelBoundingBox, scale: number): boolean;\r\n  centerInViewport(): void;\r\n  move(startX: number, startY: number, endX: number, endY: number): void;\r\n  resize(x: number, y: number, width: number, height: number): void;\r\n  rotate(value: number): void;\r\n  copy(): KritzelBaseObject<Element>;\r\n  onSelectedClick(): void;\r\n  isClass<T extends KritzelBaseObject>(this: T, type: string): this is T;\r\n}\r\n"]}
+{"version":3,"file":"object.interface.js","sourceRoot":"","sources":["../../src/interfaces/object.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { KritzelBaseObject } from '../classes/objects/base-object.class';\r\nimport { KritzelBoundingBox } from './bounding-box.interface';\r\n\r\nexport interface KritzelObject<T = Element> {\r\n  id: string;\r\n  visible: boolean;\r\n  x: number;\r\n  y: number;\r\n  translateX: number;\r\n  translateY: number;\r\n  height: number;\r\n  width: number;\r\n  backgroundColor: string;\r\n  borderColor: string;\r\n  borderWidth: number;\r\n  opacity: number;\r\n  scale: number;\r\n  selected: boolean;\r\n  resizing: boolean;\r\n  rotation: number;\r\n  markedForRemoval: boolean;\r\n  isMounted: boolean;\r\n  zIndex: number;\r\n  isEditable: boolean;\r\n\r\n  _elementRef: T;\r\n\r\n  set elementRef(element: T);\r\n  get elementRef(): T;\r\n  get boundingBox(): KritzelBoundingBox;\r\n  get totalWidth(): number;\r\n  get totalHeight(): number;\r\n  get rotationDegrees(): number;\r\n  get centerX(): number;\r\n  get centerY(): number;\r\n\r\n  mount(element: T): void;\r\n  generateId(): string;\r\n  isInViewport(viewport: KritzelBoundingBox, scale: number): boolean;\r\n  centerInViewport(): void;\r\n  move(startX: number, startY: number, endX: number, endY: number): void;\r\n  resize(x: number, y: number, width: number, height: number): void;\r\n  rotate(value: number): void;\r\n  copy(): KritzelBaseObject<Element>;\r\n  onSelectedClick(): void;\r\n  isClass<T extends KritzelBaseObject>(this: T, type: string): this is T;\r\n  edit(): void;\r\n}\r\n"]}

package/dist/components/index.js

@@ -1,6 +1,7 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DoQOtXjT.js';
-export { a as KritzelPath, K as KritzelText } from './p-DRuQsvUx.js';
-export { K as KritzelImage } from './p-DuWb7MaD.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-dCaxwGmu.js';
+export { b as KritzelBrushTool, a as KritzelPath, K as KritzelText, c as KritzelTextTool } from './p-DC3j4P1n.js';
+export { a as KritzelEraserTool, K as KritzelImage, b as KritzelImageTool, c as KritzelSelectionTool } from './p-eS30Bqrc.js';
+export { D as DEFAULT_BRUSH_CONFIG, a as DEFAULT_TEXT_CONFIG, KritzelEditor, defineCustomElement as defineCustomElementKritzelEditor } from './kritzel-editor.js';
 export { KritzelBrushStyle, defineCustomElement as defineCustomElementKritzelBrushStyle } from './kritzel-brush-style.js';
 export { KritzelColor, defineCustomElement as defineCustomElementKritzelColor } from './kritzel-color.js';
 export { KritzelColorPalette, defineCustomElement as defineCustomElementKritzelColorPalette } from './kritzel-color-palette.js';
@@ -10,7 +11,6 @@ export { KritzelControlTextConfig, defineCustomElement as defineCustomElementKri
 export { KritzelControls, defineCustomElement as defineCustomElementKritzelControls } from './kritzel-controls.js';
 export { KritzelCursorTrail, defineCustomElement as defineCustomElementKritzelCursorTrail } from './kritzel-cursor-trail.js';
 export { KritzelDropdown, defineCustomElement as defineCustomElementKritzelDropdown } from './kritzel-dropdown.js';
-export { KritzelEditor, defineCustomElement as defineCustomElementKritzelEditor } from './kritzel-editor.js';
 export { KritzelEngine, defineCustomElement as defineCustomElementKritzelEngine } from './kritzel-engine.js';
 export { KritzelFont, defineCustomElement as defineCustomElementKritzelFont } from './kritzel-font.js';
 export { KritzelFontFamily, defineCustomElement as defineCustomElementKritzelFontFamily } from './kritzel-font-family.js';

package/dist/components/kritzel-brush-style.js

@@ -1,4 +1,4 @@
-import { K as KritzelBrushStyle$1, d as defineCustomElement$1 } from './p-BV9-NuyD.js';
+import { K as KritzelBrushStyle$1, d as defineCustomElement$1 } from './p-CIb4IA9u.js';
 
 const KritzelBrushStyle = KritzelBrushStyle$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-color-palette.js

@@ -1,4 +1,4 @@
-import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-yBnfPxIa.js';
+import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-D-Rf05Ov.js';
 
 const KritzelColorPalette = KritzelColorPalette$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-color.js

@@ -1,4 +1,4 @@
-import { K as KritzelColor$1, d as defineCustomElement$1 } from './p-CaQ7Iei7.js';
+import { K as KritzelColor$1, d as defineCustomElement$1 } from './p-CxmkJbeV.js';
 
 const KritzelColor = KritzelColor$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-context-menu.js

@@ -1,4 +1,4 @@
-import { K as KritzelContextMenu$1, d as defineCustomElement$1 } from './p-CYnE3twZ.js';
+import { K as KritzelContextMenu$1, d as defineCustomElement$1 } from './p-CEYRFk55.js';
 
 const KritzelContextMenu = KritzelContextMenu$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-control-brush-config.js

@@ -1,4 +1,4 @@
-import { K as KritzelControlBrushConfig$1, d as defineCustomElement$1 } from './p-B8nuvSxt.js';
+import { K as KritzelControlBrushConfig$1, d as defineCustomElement$1 } from './p-BSS4UREq.js';
 
 const KritzelControlBrushConfig = KritzelControlBrushConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-control-text-config.js

@@ -1,4 +1,4 @@
-import { K as KritzelControlTextConfig$1, d as defineCustomElement$1 } from './p-JQA2FRVr.js';
+import { K as KritzelControlTextConfig$1, d as defineCustomElement$1 } from './p-C3E9PtD3.js';
 
 const KritzelControlTextConfig = KritzelControlTextConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-controls.js

@@ -1,4 +1,4 @@
-import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-93b-eQ0s.js';
+import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-BAMl2Ww6.js';
 
 const KritzelControls = KritzelControls$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-cursor-trail.js

@@ -1,4 +1,4 @@
-import { K as KritzelCursorTrail$1, d as defineCustomElement$1 } from './p-CSSrNLad.js';
+import { K as KritzelCursorTrail$1, d as defineCustomElement$1 } from './p-D0L3GqSK.js';
 
 const KritzelCursorTrail = KritzelCursorTrail$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-dropdown.js

@@ -1,4 +1,4 @@
-import { K as KritzelDropdown$1, d as defineCustomElement$1 } from './p-LIijWPsT.js';
+import { K as KritzelDropdown$1, d as defineCustomElement$1 } from './p--tElassI.js';
 
 const KritzelDropdown = KritzelDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-editor.js

@@ -1,22 +1,22 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DoQOtXjT.js';
-import { a as KritzelIconRegistry, d as defineCustomElement$5 } from './p-C6kzcN4b.js';
-import { b as KritzelBrushTool, c as KritzelTextTool } from './p-DRuQsvUx.js';
-import { b as KritzelSelectionTool, c as KritzelEraserTool, e as KritzelImageTool, d as defineCustomElement$9 } from './p-DuWb7MaD.js';
-import { d as defineCustomElement$i } from './p-BV9-NuyD.js';
-import { d as defineCustomElement$h } from './p-CaQ7Iei7.js';
-import { d as defineCustomElement$g } from './p-yBnfPxIa.js';
-import { d as defineCustomElement$f } from './p-CYnE3twZ.js';
-import { d as defineCustomElement$e } from './p-B8nuvSxt.js';
-import { d as defineCustomElement$d } from './p-JQA2FRVr.js';
-import { d as defineCustomElement$c } from './p-93b-eQ0s.js';
-import { d as defineCustomElement$b } from './p-CSSrNLad.js';
-import { d as defineCustomElement$a } from './p-LIijWPsT.js';
-import { d as defineCustomElement$8 } from './p-B57pFHwJ.js';
-import { d as defineCustomElement$7 } from './p-BBIuV3j1.js';
-import { d as defineCustomElement$6 } from './p-fmNiA3Yr.js';
-import { d as defineCustomElement$4 } from './p-D04aTZsR.js';
-import { d as defineCustomElement$3 } from './p-CtNzxQ7T.js';
-import { d as defineCustomElement$2 } from './p-eBBOf568.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-dCaxwGmu.js';
+import { a as KritzelIconRegistry, d as defineCustomElement$5 } from './p-B2wWYPH8.js';
+import { A as ABSOLUTE_SCALE_MAX, f as ABSOLUTE_SCALE_MIN, c as KritzelSelectionTool, a as KritzelEraserTool, b as KritzelImageTool, e as defineCustomElement$9 } from './p-eS30Bqrc.js';
+import { b as KritzelBrushTool, c as KritzelTextTool } from './p-DC3j4P1n.js';
+import { d as defineCustomElement$i } from './p-CIb4IA9u.js';
+import { d as defineCustomElement$h } from './p-CxmkJbeV.js';
+import { d as defineCustomElement$g } from './p-D-Rf05Ov.js';
+import { d as defineCustomElement$f } from './p-CEYRFk55.js';
+import { d as defineCustomElement$e } from './p-BSS4UREq.js';
+import { d as defineCustomElement$d } from './p-C3E9PtD3.js';
+import { d as defineCustomElement$c } from './p-BAMl2Ww6.js';
+import { d as defineCustomElement$b } from './p-D0L3GqSK.js';
+import { d as defineCustomElement$a } from './p--tElassI.js';
+import { d as defineCustomElement$8 } from './p-CDpq9L_H.js';
+import { d as defineCustomElement$7 } from './p-gDLg_PJJ.js';
+import { d as defineCustomElement$6 } from './p-D1oFXBAp.js';
+import { d as defineCustomElement$4 } from './p-DbPbyRLO.js';
+import { d as defineCustomElement$3 } from './p--2FkikYE.js';
+import { d as defineCustomElement$2 } from './p-CqPrOhzi.js';
 
 const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',
@@ -77,6 +77,7 @@ const DEFAULT_BRUSH_CONFIG = {
         ],
     },
 };
+
 const DEFAULT_TEXT_CONFIG = {
     color: '#000000',
     size: 8,
@@ -108,49 +109,6 @@ const DEFAULT_TEXT_CONFIG = {
         '#d1c4e9',
     ],
 };
-const DEFAULT_KRITZEL_CONTROLS = [
-    {
-        name: 'selection',
-        type: 'tool',
-        tool: KritzelSelectionTool,
-        icon: 'cursor',
-    },
-    {
-        name: 'brush',
-        type: 'tool',
-        tool: KritzelBrushTool,
-        isDefault: true,
-        icon: 'pen',
-        config: DEFAULT_BRUSH_CONFIG,
-    },
-    {
-        name: 'eraser',
-        type: 'tool',
-        tool: KritzelEraserTool,
-        icon: 'eraser',
-    },
-    {
-        name: 'text',
-        type: 'tool',
-        tool: KritzelTextTool,
-        icon: 'type',
-        config: DEFAULT_TEXT_CONFIG,
-    },
-    {
-        name: 'image',
-        type: 'tool',
-        tool: KritzelImageTool,
-        icon: 'image',
-    },
-    {
-        name: 'divider',
-        type: 'divider',
-    },
-    {
-        name: 'config',
-        type: 'config',
-    },
-];
 
 const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-controls{position:absolute;bottom:28px}";
 
@@ -159,9 +117,88 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         super();
         this.__registerHost();
         this.isReady = createEvent(this, "isReady");
-        this.controls = DEFAULT_KRITZEL_CONTROLS;
+        this.scaleMax = ABSOLUTE_SCALE_MAX;
+        this.scaleMin = ABSOLUTE_SCALE_MIN;
+        this.controls = [
+            {
+                name: 'selection',
+                type: 'tool',
+                tool: KritzelSelectionTool,
+                icon: 'cursor',
+            },
+            {
+                name: 'brush',
+                type: 'tool',
+                tool: KritzelBrushTool,
+                isDefault: true,
+                icon: 'pen',
+                config: DEFAULT_BRUSH_CONFIG,
+            },
+            {
+                name: 'eraser',
+                type: 'tool',
+                tool: KritzelEraserTool,
+                icon: 'eraser',
+            },
+            {
+                name: 'text',
+                type: 'tool',
+                tool: KritzelTextTool,
+                icon: 'type',
+                config: DEFAULT_TEXT_CONFIG,
+            },
+            {
+                name: 'image',
+                type: 'tool',
+                tool: KritzelImageTool,
+                icon: 'image',
+            },
+            {
+                name: 'divider',
+                type: 'divider',
+            },
+            {
+                name: 'config',
+                type: 'config',
+            },
+        ];
+        this.globalContextMenuItems = [
+            {
+                label: 'Paste',
+                icon: 'paste',
+                disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
+                action: menu => this.engineRef.paste(menu.x, menu.y),
+            },
+            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
+        ];
+        this.objectContextMenuItems = [
+            {
+                label: 'Edit',
+                icon: 'pen',
+                visible: (_, objects) => objects.length === 1 && objects[0].isEditable,
+                action: (_, objects) => {
+                    if (objects.length === 1) {
+                        const object = objects[0];
+                        if (object.isEditable) {
+                            object.edit();
+                        }
+                    }
+                }
+            },
+            { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
+            {
+                label: 'Paste',
+                icon: 'paste',
+                disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
+                action: menu => this.engineRef.paste(menu.x, menu.y),
+            },
+            { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
+            { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.moveToTop() },
+            { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.moveToBottom() },
+        ];
         this.customSvgIcons = {};
-        this.hideControls = false;
+        this.isControlsVisible = true;
+        this.isUtilityPanelVisible = true;
         this.isEngineReady = false;
         this.isControlsReady = false;
     }
@@ -232,7 +269,7 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         }
     }
     render() {
-        return (h(Host, { key: '6621a06171194680b6df309dfa328e96ce7723c5' }, h("kritzel-engine", { key: '623628c15564168b8e508dbe45afbf2e5f5b1ed5', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true) }), h("kritzel-controls", { key: 'dc56bb4c327d17236443c648fd3ca37eeaadc515', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' }, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: '512d901979a81f1affdda0e920d7216e7605863a' }, h("kritzel-engine", { key: '9828d5a1e78f6ce66fde98e95d82947cd8efba25', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true), scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems }), h("kritzel-controls", { key: 'a8d52ab6fce293a97c34aeb2a03823916dcdf947', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -240,10 +277,15 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "isControlsReady": ["onIsControlsReady"]
     }; }
     static get style() { return kritzelEditorCss; }
-}, [0, "kritzel-editor", {
+}, [256, "kritzel-editor", {
+        "scaleMax": [2, "scale-max"],
+        "scaleMin": [2, "scale-min"],
         "controls": [16],
+        "globalContextMenuItems": [16, "global-context-menu-items"],
+        "objectContextMenuItems": [16, "object-context-menu-items"],
         "customSvgIcons": [16, "custom-svg-icons"],
-        "hideControls": [4, "hide-controls"],
+        "isControlsVisible": [4, "is-controls-visible"],
+        "isUtilityPanelVisible": [4, "is-utility-panel-visible"],
         "isEngineReady": [32],
         "isControlsReady": [32],
         "getObjectById": [64],
@@ -361,7 +403,7 @@ function defineCustomElement$1() {
 const KritzelEditor = KritzelEditor$1;
 const defineCustomElement = defineCustomElement$1;
 
-export { KritzelEditor, defineCustomElement };
+export { DEFAULT_BRUSH_CONFIG as D, KritzelEditor, DEFAULT_TEXT_CONFIG as a, defineCustomElement };
 //# sourceMappingURL=kritzel-editor.js.map
 
 //# sourceMappingURL=kritzel-editor.js.map