npm - kritzel-stencil - Versions diffs - 0.0.131 → 0.0.133 - Mend

kritzel-stencil 0.0.131 → 0.0.133

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

Files changed (362) hide show

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

@@ -3,6 +3,7 @@ import { KritzelBrushTool } from "../../../classes/tools/brush-tool.class";
 import { KritzelTextTool } from "../../../classes/tools/text-tool.class";
 import { KritzelDevicesHelper } from "../../../helpers/devices.helper";
 export class KritzelControls {
+    host;
     controls = [];
     activeControl = null;
     isUtilityPanelVisible = true;
@@ -10,7 +11,6 @@ export class KritzelControls {
     firstConfig = null;
     isTooltipVisible = false;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-    host;
     handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
@@ -27,12 +27,12 @@ export class KritzelControls {
     }
     async handleActiveToolChange(event) {
         this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await this.kritzelEngine?.setFocus();
     }
     async closeTooltip() {
         this.isTooltipVisible = false;
     }
     kritzelEngine = null;
+    tooltipRef = null;
     get activeToolAsTextTool() {
         return this.activeControl?.tool;
     }
@@ -79,21 +79,33 @@ export class KritzelControls {
     handleConfigClick(event) {
         event.stopPropagation();
         this.isTooltipVisible = !this.isTooltipVisible;
-        this.kritzelEngine?.disable();
+        if (this.isTooltipVisible) {
+            this.kritzelEngine?.disable();
+        }
+        else {
+            this.kritzelEngine?.enable();
+        }
+        setTimeout(() => {
+            this.tooltipRef?.focusContent();
+        }, 100);
     }
     async handleToolChange(event) {
         this.activeControl = { ...this.activeControl, tool: event.detail };
         await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
     }
+    handleTooltipClosed() {
+        this.isTooltipVisible = false;
+        this.kritzelEngine?.enable();
+    }
     render() {
         const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
-        return (h(Host, { key: '7ab1f3e176848cb9a34be7e7b90e13c2a861d78b', class: {
+        return (h(Host, { key: 'a463310d88265b71097f838bf775abdcabc99225', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'f168b27cb9cc3a1a7d0028055cd58c60cec9776f', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '267e9c26b41a52c655209dbaa8c85cbd72323577', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '9e568217b23632d73b051350d7f795f0cd7ab9ed', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'c55773245c925e1b972f3e83cb4d8f1c93ebe995', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 return (h("button", { class: {
                         'kritzel-control': true,
@@ -104,7 +116,11 @@ export class KritzelControls {
                 return h("div", { class: "kritzel-divider", key: control.name });
             }
             if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
-                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container') }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), style: {
+                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: 0, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                        if (event.key === 'Enter') {
+                            this.handleConfigClick?.(event);
+                        }
+                    }, style: {
                         cursor: this.activeControl.config ? 'pointer' : 'default',
                         pointerEvents: hasNoConfig ? 'none' : 'auto',
                     } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {

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

	@@ -1 +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('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"]}
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 @Element() host!: HTMLElement;\r\n\r\n @Prop() controls: KritzelToolbarControl[] = [];\r\n @Prop({ mutable: true }) activeControl: KritzelToolbarControl \| null = null;\r\n @Prop() isUtilityPanelVisible: boolean = true;\r\n\r\n @Event() isControlsReady: EventEmitter<void>;\r\n\r\n @State() firstConfig: ToolConfig \| null = null;\r\n @State() isTooltipVisible: boolean = false;\r\n @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\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 }\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 tooltipRef: HTMLKritzelTooltipElement \| 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 if(this.isTooltipVisible){\r\n this.kritzelEngine?.disable();\r\n } else {\r\n this.kritzelEngine?.enable();\r\n }\r\n\r\n setTimeout(() => {\r\n this.tooltipRef?.focusContent();\r\n }, 100);\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 private handleTooltipClosed() {\r\n this.isTooltipVisible = false;\r\n this.kritzelEngine?.enable();\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\r\n ref={el => (this.tooltipRef = el)}\r\n isVisible={this.isTooltipVisible}\r\n anchorElement={this.host.shadowRoot?.querySelector('.kritzel-config-container') as HTMLElement}\r\n onTooltipClosed={() => this.handleTooltipClosed()}\r\n >\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 tabIndex={0}\r\n class=\"kritzel-config\"\r\n onClick={event => this.handleConfigClick?.(event)}\r\n onKeyDown={event => {\r\n if (event.key === 'Enter') {\r\n this.handleConfigClick?.(event as any);\r\n }\r\n }}\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.css CHANGED Viewed

@@ -24,6 +24,11 @@
   cursor: pointer;
   color: #333333;
   -webkit-tap-highlight-color: transparent;
+  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);
+}
+.utility-button:focus {
+  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
 }
 .utility-separator {

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

@@ -16,7 +16,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '134058928a840d11fdc39849b35f08b21840fc0c' }, h("button", { key: '8d80cb496983b0709c06bacb12ca6819789aa47d', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'c6733ef61ab6a272f80a580243fdd15063b8bf0c', name: "undo" })), h("button", { key: 'dc6147152bccd43ea54b9af20d019d305e550987', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '3ab8bced0f398a8d5f053cb0f388199fd2148bfc', name: "redo" })), h("div", { key: 'ebbfd25fb69faf2b669de20dc74a3dcabc01f489', class: "utility-separator" }), h("button", { key: 'd86caf8a7f2c2bc899b09871f555973137693eb9', class: "utility-button" }, h("kritzel-icon", { key: 'e1b4e9eef3d3ab2a2ddd1688818d4bcd2d7226c1', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '8109ccff01374c046d057021dfbcabdc632d829f' }, h("button", { key: '0d51cfb401974edf1a2a8810d2244f8a977c347f', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1d13ee6bbf060402e0b1349d41b728875314e2e5', name: "undo" })), h("button", { key: 'f2fe59e7c99cb1550052088b507313cfaed72f29', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '74bf8c20f61144ab4abc5804dcd8f39917d2c966', name: "redo" })), h("div", { key: '0c9a942e786425b32e984fefdc97b1abb5077997', class: "utility-separator" }), h("button", { key: '44ca9340c2f73212332e9b3ed93ed93b8f7c6944', class: "utility-button" }, h("kritzel-icon", { key: '7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kritzel-utility-panel.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,mBAAmB;~~IAE9B~~,IAAI,CAAqB;~~IAGzB~~,IAAI,CAAqB;~~IAGzB~~,MAAM,CAAqB;~~IAE3B~~,UAAU,CAAC,KAAY;QACrB,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,UAAU,CAAC,KAAY;QACrB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;gBACrE,qEAAc,IAAI,EAAC,MAAM,GAAgB,CAClC;YACT,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;gBACrE,qEAAc,IAAI,EAAC,MAAM,GAAgB,CAClC;YAET,4DAAK,KAAK,EAAC,mBAAmB,GAAO;YAErC,+DAAQ,KAAK,EAAC,gBAAgB;gBAC5B,qEAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-utility-panel',\r\n styleUrl: 'kritzel-utility-panel.css',\r\n shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n @Event()~~\r\n~~ undo: EventEmitter<void>;\r\n~~\r\n~~ @Event()~~\r\n~~ redo: EventEmitter<void>;\r\n~~\r\n~~ @Event()~~\r\n~~ delete: EventEmitter<void>;\r\n\r\n handleUndo(event: Event) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.undo.emit();\r\n }\r\n }\r\n\r\n handleRedo(event: Event) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.redo.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n <kritzel-icon name=\"undo\"></kritzel-icon>\r\n </button>\r\n <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n <kritzel-icon name=\"redo\"></kritzel-icon>\r\n </button>\r\n\r\n <div class=\"utility-separator\"></div>\r\n\r\n <button class=\"utility-button\">\r\n <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"kritzel-utility-panel.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,mBAAmB;IACrB,IAAI,CAAqB;IACzB,IAAI,CAAqB;IACzB,MAAM,CAAqB;IAEpC,UAAU,CAAC,KAAY;QACrB,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACrB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,UAAU,CAAC,KAAY;QACrB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;gBACrE,qEAAc,IAAI,EAAC,MAAM,GAAgB,CAClC;YACT,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;gBACrE,qEAAc,IAAI,EAAC,MAAM,GAAgB,CAClC;YAET,4DAAK,KAAK,EAAC,mBAAmB,GAAO;YAErC,+DAAQ,KAAK,EAAC,gBAAgB;gBAC5B,qEAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'kritzel-utility-panel',\r\n styleUrl: 'kritzel-utility-panel.css',\r\n shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n @Event() undo: EventEmitter<void>;\r\n @Event() redo: EventEmitter<void>;\r\n @Event() delete: EventEmitter<void>;\r\n\r\n handleUndo(event: Event) {\r\n if (event.cancelable) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.undo.emit();\r\n }\r\n }\r\n\r\n handleRedo(event: Event) {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.redo.emit();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button class=\"utility-button\" onClick={event => this.handleUndo(event)}>\r\n <kritzel-icon name=\"undo\"></kritzel-icon>\r\n </button>\r\n <button class=\"utility-button\" onClick={event => this.handleRedo(event)}>\r\n <kritzel-icon name=\"redo\"></kritzel-icon>\r\n </button>\r\n\r\n <div class=\"utility-separator\"></div>\r\n\r\n <button class=\"utility-button\">\r\n <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -1,4 +1,4 @@
-import { KritzelWorkspace } from "../../../classes/workspace.class";
+import { KritzelWorkspace } from "../../../classes/core/workspace.class";
 import { ObjectHelper } from "../../../helpers/object.helper";
 import { Host, h } from "@stencil/core";
 export class KritzelWorkspaceManager {
@@ -38,9 +38,9 @@ export class KritzelWorkspaceManager {
         this.workspaceChange.emit(item.value);
     }
     async add() {
+        await this.splitButtonRef.open();
         this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
         this.editingItemId = this.newWorkspace.id;
-        await this.splitButtonRef.open();
     }
     edit(item) {
         this.openChildMenuItem = null;
@@ -51,11 +51,14 @@ export class KritzelWorkspaceManager {
     }
     async save(item) {
         if (this.newWorkspace) {
-            await this.kritzelEngineRef.createWorkspace({ ...item.value, name: item.label });
+            this.newWorkspace.name = item.label;
+            await this.kritzelEngineRef.createWorkspace(this.newWorkspace);
             this.workspaceChange.emit(this.newWorkspace);
         }
         else {
-            await this.kritzelEngineRef.updateWorkspace({ ...item.value, name: item.label });
+            const workspace = item.value;
+            workspace.name = item.label;
+            await this.kritzelEngineRef.updateWorkspace(workspace);
         }
         this.editingItemId = null;
         this.newWorkspace = null;
@@ -68,6 +71,11 @@ export class KritzelWorkspaceManager {
         this.openChildMenuItem = null;
         this.childMenuAnchor = null;
         await this.kritzelEngineRef.deleteWorkspace(item.value);
+        if (item.value.id === this.activeWorkspace?.id) {
+            this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;
+            this.workspaceChange.emit(this.activeWorkspace);
+        }
+        await this.splitButtonRef.focusMenu();
     }
     toggleChildMenu(item, anchor) {
         this.openChildMenuItem = item;
@@ -77,12 +85,15 @@ export class KritzelWorkspaceManager {
         this.openChildMenuItem = null;
         this.childMenuAnchor = null;
     }
-    closeMenu() {
+    handleMenuOpen() {
+        this.kritzelEngineRef.disable();
+    }
+    handleMenuClose() {
         this.cancel();
         this.closeChildMenu();
+        this.kritzelEngineRef.enable();
     }
     render() {
-        console.log('render workspace manager');
         const menuItems = this.sortedWorkspaces
             .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
             .filter(ws => ws !== null)
@@ -107,14 +118,13 @@ export class KritzelWorkspaceManager {
                         id: `${ws.id}-delete`,
                         label: 'Delete',
                         value: 'delete',
+                        isDisabled: this.sortedWorkspaces.length <= 1,
                         action: (_item, parent) => this.delete(parent),
                     },
                 ],
             };
         });
-        return (h(Host, null, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onClose: () => {
-                this.closeMenu();
-            } })));
+        return (h(Host, null, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onMainButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onMenuOpen: () => this.handleMenuOpen(), onMenuClose: () => this.handleMenuClose() })));
     }
     static get is() { return "kritzel-workspace-manager"; }
     static get encapsulation() { return "shadow"; }
@@ -140,8 +150,8 @@ export class KritzelWorkspaceManager {
                     "references": {
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
                         }
                     }
                 },
@@ -164,8 +174,8 @@ export class KritzelWorkspaceManager {
                     "references": {
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
                         }
                     }
                 },
@@ -221,8 +231,8 @@ export class KritzelWorkspaceManager {
                     "references": {
                         "KritzelWorkspace": {
                             "location": "import",
-                            "path": "../../../classes/workspace.class",
-                            "id": "src/classes/workspace.class.ts::KritzelWorkspace"
+                            "path": "../../../classes/core/workspace.class",
+                            "id": "src/classes/core/workspace.class.ts::KritzelWorkspace"
                         }
                     }
                 }

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

	@@ -1 +1 @@
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 { KritzelWorkspace } from '../../../classes/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { Host, h, Component, State, Prop, Event, EventEmitter, Element } from '@stencil/core';\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 @Element() host!: HTMLElement;\r\n\r\n @Prop() activeWorkspace: KritzelWorkspace;\r\n @Prop() workspaces: KritzelWorkspace[] = [];\r\n\r\n @Event() isWorkspaceManagerReady: EventEmitter<void>;\r\n @Event() workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n @State() childMenuAnchor: HTMLElement = null;\r\n @State() openChildMenuItem: IKritzelMenuItem = null;\r\n @State() newWorkspace: KritzelWorkspace \| null = null;\r\n @State() editingItemId: string \| null = null;\r\n\r\n kritzelEngineRef: HTMLKritzelEngineElement \| null = null;\r\n splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n get sortedWorkspaces() {\r\n return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\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.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngineRef) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private async select(item: IKritzelMenuItem, parent: IKritzelMenuItem) {\r\n if (this.editingItemId) {\r\n return;\r\n }\r\n\r\n if (item.action) {\r\n item.action(item, parent);\r\n return;\r\n }\r\n\r\n this.workspaceChange.emit(item.value);\r\n }\r\n\r\n private async add() {\r\n this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n this.editingItemId = this.newWorkspace.id;\r\n await this.splitButtonRef.open();\r\n }\r\n\r\n private edit(item: IKritzelMenuItem) {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n requestAnimationFrame(() => {\r\n this.editingItemId = item.id;\r\n });\r\n }\r\n\r\n private async save(item: IKritzelMenuItem) {\r\n if (this.newWorkspace) {\r\n await this.kritzelEngineRef.createWorkspace({ ...item.value, name: item.label });\r\n this.workspaceChange.emit(this.newWorkspace);\r\n } else {\r\n await this.kritzelEngineRef.updateWorkspace({ ...item.value, name: item.label });\r\n }\r\n\r\n this.editingItemId = null;\r\n this.newWorkspace = null;\r\n }\r\n\r\n private cancel() {\r\n this.newWorkspace = null;\r\n this.editingItemId = null;\r\n }\r\n\r\n private async delete(item: IKritzelMenuItem) {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n await this.kritzelEngineRef.deleteWorkspace(item.value);\r\n }\r\n\r\n private toggleChildMenu(item: IKritzelMenuItem, anchor: HTMLElement) {\r\n this.openChildMenuItem = item;\r\n this.childMenuAnchor = anchor;\r\n }\r\n\r\n private closeChildMenu() {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n }\r\n\r\n private closeMenu() {\r\n this.cancel();\r\n this.closeChildMenu();\r\n }\r\n\r\n render() {\r\n console.log('render workspace manager');\r\n const menuItems = this.sortedWorkspaces\r\n .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())\r\n .filter(ws => ws !== null)\r\n .map(ws => {\r\n return {\r\n id: ws.id,\r\n label: ws.name,\r\n value: ws,\r\n isEditing: this.editingItemId === ws.id,\r\n isSelected: this.activeWorkspace?.id === ws.id,\r\n isNewItem: this.newWorkspace?.id === ws.id,\r\n isChildMenuOpen: this.openChildMenuItem?.id === ws.id,\r\n childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,\r\n children: [\r\n {\r\n id: `${ws.id}-rename`,\r\n label: 'Rename',\r\n value: 'rename',\r\n action: (_item, parent) => this.edit(parent),\r\n },\r\n {\r\n id: `${ws.id}-delete`,\r\n label: 'Delete',\r\n value: 'delete',\r\n action: (_item, parent) => this.delete(parent),\r\n },\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 items={menuItems}\r\n mainButtonDisabled={this.editingItemId != null}\r\n onButtonClick={() => this.add()}\r\n onItemSelect={event => this.select(event.detail.item, event.detail.parent)}\r\n onItemToggleChildMenu={event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor)}\r\n onItemSave={event => this.save(event.detail)}\r\n onItemCancel={() => this.cancel()}\r\n onItemCloseChildMenu={() => this.closeChildMenu()}\r\n onClose={() => {\r\n this.closeMenu();\r\n }}\r\n ></kritzel-split-button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
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 { KritzelWorkspace } from '../../../classes/core/workspace.class';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { IKritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\nimport { Host, h, Component, State, Prop, Event, EventEmitter, Element } from '@stencil/core';\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 @Element() host!: HTMLElement;\r\n\r\n @Prop() activeWorkspace: KritzelWorkspace;\r\n @Prop() workspaces: KritzelWorkspace[] = [];\r\n\r\n @Event() isWorkspaceManagerReady: EventEmitter<void>;\r\n @Event() workspaceChange: EventEmitter<KritzelWorkspace>;\r\n\r\n @State() childMenuAnchor: HTMLElement = null;\r\n @State() openChildMenuItem: IKritzelMenuItem = null;\r\n @State() newWorkspace: KritzelWorkspace \| null = null;\r\n @State() editingItemId: string \| null = null;\r\n\r\n kritzelEngineRef: HTMLKritzelEngineElement \| null = null;\r\n splitButtonRef!: HTMLKritzelSplitButtonElement;\r\n\r\n get sortedWorkspaces() {\r\n return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());\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.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');\r\n\r\n if (!this.kritzelEngineRef) {\r\n throw new Error('kritzel-engine not found in parent element.');\r\n }\r\n }\r\n\r\n private async select(item: IKritzelMenuItem, parent: IKritzelMenuItem) {\r\n if (this.editingItemId) {\r\n return;\r\n }\r\n\r\n if (item.action) {\r\n item.action(item, parent);\r\n return;\r\n }\r\n\r\n this.workspaceChange.emit(item.value);\r\n }\r\n\r\n private async add() {\r\n await this.splitButtonRef.open();\r\n this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');\r\n this.editingItemId = this.newWorkspace.id;\r\n }\r\n\r\n private edit(item: IKritzelMenuItem) {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n requestAnimationFrame(() => {\r\n this.editingItemId = item.id;\r\n });\r\n }\r\n\r\n private async save(item: IKritzelMenuItem) {\r\n if (this.newWorkspace) {\r\n this.newWorkspace.name = item.label;\r\n await this.kritzelEngineRef.createWorkspace(this.newWorkspace);\r\n this.workspaceChange.emit(this.newWorkspace);\r\n } else {\r\n const workspace = item.value;\r\n workspace.name = item.label;\r\n await this.kritzelEngineRef.updateWorkspace(workspace);\r\n }\r\n\r\n this.editingItemId = null;\r\n this.newWorkspace = null;\r\n }\r\n\r\n private cancel() {\r\n this.newWorkspace = null;\r\n this.editingItemId = null;\r\n }\r\n\r\n private async delete(item: IKritzelMenuItem) {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n\r\n await this.kritzelEngineRef.deleteWorkspace(item.value);\r\n\r\n if (item.value.id === this.activeWorkspace?.id) {\r\n this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) \|\| null;\r\n this.workspaceChange.emit(this.activeWorkspace);\r\n }\r\n\r\n await this.splitButtonRef.focusMenu();\r\n }\r\n\r\n private toggleChildMenu(item: IKritzelMenuItem, anchor: HTMLElement) {\r\n this.openChildMenuItem = item;\r\n this.childMenuAnchor = anchor;\r\n }\r\n\r\n private closeChildMenu() {\r\n this.openChildMenuItem = null;\r\n this.childMenuAnchor = null;\r\n }\r\n\r\n private handleMenuOpen() {\r\n this.kritzelEngineRef.disable();\r\n }\r\n\r\n private handleMenuClose() {\r\n this.cancel();\r\n this.closeChildMenu();\r\n this.kritzelEngineRef.enable();\r\n }\r\n\r\n render() {\r\n const menuItems = this.sortedWorkspaces\r\n .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())\r\n .filter(ws => ws !== null)\r\n .map(ws => {\r\n return {\r\n id: ws.id,\r\n label: ws.name,\r\n value: ws,\r\n isEditing: this.editingItemId === ws.id,\r\n isSelected: this.activeWorkspace?.id === ws.id,\r\n isNewItem: this.newWorkspace?.id === ws.id,\r\n isChildMenuOpen: this.openChildMenuItem?.id === ws.id,\r\n childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,\r\n children: [\r\n {\r\n id: `${ws.id}-rename`,\r\n label: 'Rename',\r\n value: 'rename',\r\n action: (_item, parent) => this.edit(parent),\r\n },\r\n {\r\n id: `${ws.id}-delete`,\r\n label: 'Delete',\r\n value: 'delete',\r\n isDisabled: this.sortedWorkspaces.length <= 1,\r\n action: (_item, parent) => this.delete(parent),\r\n },\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 items={menuItems}\r\n mainButtonDisabled={this.editingItemId != null}\r\n onMainButtonClick={() => this.add()}\r\n onItemSelect={event => this.select(event.detail.item, event.detail.parent)}\r\n onItemToggleChildMenu={event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor)}\r\n onItemSave={event => this.save(event.detail)}\r\n onItemCancel={() => this.cancel()}\r\n onItemCloseChildMenu={() => this.closeChildMenu()}\r\n onMenuOpen={() => this.handleMenuOpen()}\r\n onMenuClose={() => this.handleMenuClose()}\r\n ></kritzel-split-button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -13,7 +13,6 @@ export const DEFAULT_ENGINE_STATE = {
     isEnabled: true,
     isScaling: false,
     isPanning: false,
-    isFocused: false,
     isSelecting: false,
     isResizing: false,
     isResizeHandleSelected: false,

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

	@@ -1 +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,eAAe,EAAE,IAAI;IACrB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,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 objectsMap: 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};"]}
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,eAAe,EAAE,IAAI;IACrB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,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,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 objectsMap: 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 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/devices.helper.js CHANGED Viewed

@@ -2,5 +2,25 @@ export class KritzelDevicesHelper {
     static isTouchDevice() {
         return window.matchMedia('(any-pointer: coarse)').matches;
     }
+    static isAndroid() {
+        return /android/i.test(navigator.userAgent);
+    }
+    static isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent);
+    }
+    static detectOS() {
+        if (this.isIOS()) {
+            return 'iOS';
+        }
+        else if (this.isAndroid()) {
+            return 'Android';
+        }
+        else {
+            return 'Other';
+        }
+    }
+    static isFirefox() {
+        return /firefox/i.test(navigator.userAgent);
+    }
 }
 //# sourceMappingURL=devices.helper.js.map

package/dist/collection/helpers/devices.helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"devices.helper.js","sourceRoot":"","sources":["../../src/helpers/devices.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,oBAAoB;~~IAC7B~~,MAAM,CAAC,aAAa;~~QAChB~~,OAAO,MAAM,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC;~~IAC9D~~,CAAC;~~CACJ~~","sourcesContent":["export class KritzelDevicesHelper {\r\n static isTouchDevice(): boolean {\r\n return window.matchMedia('(any-pointer: coarse)').matches;\r\n }\r\n}"]}
1	+ {"version":3,"file":"devices.helper.js","sourceRoot":"","sources":["../../src/helpers/devices.helper.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,oBAAoB;IAC/B,MAAM,CAAC,aAAa;QAClB,OAAO,MAAM,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC;IAC5D,CAAC;IAED,MAAM,CAAC,SAAS;QACd,OAAO,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM,CAAC,KAAK;QACV,OAAO,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACtD,CAAC;IAED,MAAM,CAAC,QAAQ;QACb,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC;QACf,CAAC;aAAM,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC;YAC5B,OAAO,SAAS,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,OAAO,OAAO,CAAC;QACjB,CAAC;IACH,CAAC;IAED,MAAM,CAAC,SAAS;QACd,OAAO,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9C,CAAC;CACF","sourcesContent":["export class KritzelDevicesHelper {\r\n static isTouchDevice(): boolean {\r\n return window.matchMedia('(any-pointer: coarse)').matches;\r\n }\r\n\r\n static isAndroid(): boolean {\r\n return /android/i.test(navigator.userAgent);\r\n }\r\n\r\n static isIOS(): boolean {\r\n return /iPad\|iPhone\|iPod/.test(navigator.userAgent);\r\n }\r\n\r\n static detectOS(): 'iOS' \| 'Android' \| 'Other' {\r\n if (this.isIOS()) {\r\n return 'iOS';\r\n } else if (this.isAndroid()) {\r\n return 'Android';\r\n } else {\r\n return 'Other';\r\n }\r\n }\r\n\r\n static isFirefox(): boolean {\r\n return /firefox/i.test(navigator.userAgent);\r\n }\r\n}\r\n"]}

package/dist/collection/helpers/event.helper.js CHANGED Viewed

@@ -14,11 +14,7 @@ export class KritzelEventHelper {
         const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));
         return !!contextMenu;
     }
-    static onLongTouchPress(event, onSuccess, onCancel) {
-        if (event.pointerType !== 'touch') {
-            onCancel?.();
-            return () => { };
-        }
+    static onLongPress(event, onSuccess, onCancel) {
         const longPressTimeout = 400;
         const moveThreshold = 10;
         const startX = event.clientX;

package/dist/collection/helpers/event.helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"event.helper.js","sourceRoot":"","sources":["../../src/helpers/event.helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,OAAO,kBAAkB;IACtB,MAAM,CAAC,YAAY,CAAC,EAAc;QACvC,OAAO,EAAE,CAAC,MAAM,KAAK,kBAAkB,CAAC,KAAK,CAAC;IAChD,CAAC;IAEM,MAAM,CAAC,WAAW,CAAC,EAAc;QACtC,OAAO,EAAE,CAAC,MAAM,KAAK,kBAAkB,CAAC,IAAI,CAAC;IAC/C,CAAC;IAEM,MAAM,CAAC,gBAAgB,CAAC,KAAiB;QAC9C,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACtG,CAAC;IAEM,MAAM,CAAC,2BAA2B,CAAC,KAAmB;QAC3D,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAmB,CAAC;QACnD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC;QAC1G,OAAO,CAAC,CAAC,WAAW,CAAC;IACvB,CAAC;IAEM,MAAM,CAAC,~~gBAAgB~~,~~CAC5B~~,KAAmB,EACnB,SAAwC,EACxC,QAAqB;QAErB,~~IAAI,KAAK,CAAC,WAAW,KAAK,OAAO,EAAE,CAAC;YAClC,QAAQ,EAAE,EAAE,CAAC;YACb,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;QAClB,CAAC;QAED,~~MAAM,gBAAgB,GAAG,GAAG,CAAC;QAC7B,MAAM,aAAa,GAAG,EAAE,CAAC;QAEzB,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,eAAe,EAAE,CAAC;YAClB,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAErB,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,eAAe,EAAE,CAAC;YAClB,QAAQ,EAAE,EAAE,CAAC;QACf,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,CAAe,EAAE,EAAE;YACxC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,GAAG,aAAa,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,MAAM,CAAC,GAAG,aAAa,EAAE,CAAC;gBACjG,MAAM,EAAE,CAAC;YACX,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,MAAM,EAAE,CAAC;QACX,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,MAAM,EAAE,CAAC;QACX,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YACzD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACrD,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzE,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAClE,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAE1E,OAAO,MAAM,CAAC;IAChB,CAAC;CAEF","sourcesContent":["import { KritzelMouseButton } from '../enums/event-button.enum';\r\n\r\nexport class KritzelEventHelper {\r\n public static isRightClick(ev: MouseEvent): boolean {\r\n return ev.button === KritzelMouseButton.Right;\r\n }\r\n\r\n public static isLeftClick(ev: MouseEvent): boolean {\r\n return ev.button === KritzelMouseButton.Left;\r\n }\r\n\r\n public static isMainMouseWheel(event: WheelEvent): boolean {\r\n return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);\r\n }\r\n\r\n public static isPointerEventOnContextMenu(event: PointerEvent): boolean {\r\n const path = event.composedPath() as HTMLElement[];\r\n const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));\r\n return !!contextMenu;\r\n }\r\n\r\n public static ~~onLongTouchPress~~(\r\n event: PointerEvent,\r\n onSuccess: (event: PointerEvent) => void,\r\n onCancel?: () => void\r\n ): () => void {\r\n ~~if (event.pointerType !== 'touch') {\r\n onCancel?.();\r\n return () => {};\r\n }\r\n\r\n~~ const longPressTimeout = 400;\r\n const moveThreshold = 10;\r\n\r\n const startX = event.clientX;\r\n const startY = event.clientY;\r\n const target = event.target as HTMLElement;\r\n\r\n const timer = setTimeout(() => {\r\n removeListeners();\r\n onSuccess(event);\r\n }, longPressTimeout);\r\n\r\n const cancel = () => {\r\n clearTimeout(timer);\r\n removeListeners();\r\n onCancel?.();\r\n };\r\n\r\n const onPointerMove = (e: PointerEvent) => {\r\n if (Math.abs(e.clientX - startX) > moveThreshold \|\| Math.abs(e.clientY - startY) > moveThreshold) {\r\n cancel();\r\n }\r\n };\r\n\r\n const onPointerUp = () => {\r\n cancel();\r\n };\r\n\r\n const onPointerCancel = () => {\r\n cancel();\r\n };\r\n\r\n const removeListeners = () => {\r\n target.removeEventListener('pointermove', onPointerMove);\r\n target.removeEventListener('pointerup', onPointerUp);\r\n target.removeEventListener('pointercancel', onPointerCancel);\r\n };\r\n\r\n target.addEventListener('pointermove', onPointerMove, { passive: true });\r\n target.addEventListener('pointerup', onPointerUp, { once: true });\r\n target.addEventListener('pointercancel', onPointerCancel, { once: true });\r\n\r\n return cancel;\r\n }\r\n\r\n}\r\n"]}
1	+ {"version":3,"file":"event.helper.js","sourceRoot":"","sources":["../../src/helpers/event.helper.ts"],"names":[],"mappings":"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","sourcesContent":["import { KritzelMouseButton } from '../enums/event-button.enum';\r\n\r\nexport class KritzelEventHelper {\r\n public static isRightClick(ev: MouseEvent): boolean {\r\n return ev.button === KritzelMouseButton.Right;\r\n }\r\n\r\n public static isLeftClick(ev: MouseEvent): boolean {\r\n return ev.button === KritzelMouseButton.Left;\r\n }\r\n\r\n public static isMainMouseWheel(event: WheelEvent): boolean {\r\n return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);\r\n }\r\n\r\n public static isPointerEventOnContextMenu(event: PointerEvent): boolean {\r\n const path = event.composedPath() as HTMLElement[];\r\n const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));\r\n return !!contextMenu;\r\n }\r\n\r\n public static onLongPress(\r\n event: PointerEvent,\r\n onSuccess: (event: PointerEvent) => void,\r\n onCancel?: () => void\r\n ): () => void {\r\n const longPressTimeout = 400;\r\n const moveThreshold = 10;\r\n\r\n const startX = event.clientX;\r\n const startY = event.clientY;\r\n const target = event.target as HTMLElement;\r\n\r\n const timer = setTimeout(() => {\r\n removeListeners();\r\n onSuccess(event);\r\n }, longPressTimeout);\r\n\r\n const cancel = () => {\r\n clearTimeout(timer);\r\n removeListeners();\r\n onCancel?.();\r\n };\r\n\r\n const onPointerMove = (e: PointerEvent) => {\r\n if (Math.abs(e.clientX - startX) > moveThreshold \|\| Math.abs(e.clientY - startY) > moveThreshold) {\r\n cancel();\r\n }\r\n };\r\n\r\n const onPointerUp = () => {\r\n cancel();\r\n };\r\n\r\n const onPointerCancel = () => {\r\n cancel();\r\n };\r\n\r\n const removeListeners = () => {\r\n target.removeEventListener('pointermove', onPointerMove);\r\n target.removeEventListener('pointerup', onPointerUp);\r\n target.removeEventListener('pointercancel', onPointerCancel);\r\n };\r\n\r\n target.addEventListener('pointermove', onPointerMove, { passive: true });\r\n target.addEventListener('pointerup', onPointerUp, { once: true });\r\n target.addEventListener('pointercancel', onPointerCancel, { once: true });\r\n\r\n return cancel;\r\n }\r\n\r\n}\r\n"]}

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

@@ -31,5 +31,34 @@ export class KritzelHTMLHelper {
         const parentRect = scrollableParent.getBoundingClientRect();
         return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
     }
+    static getFocusableElements(root) {
+        if (!root)
+            return [];
+        const focusableElements = [];
+        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
+        const isVisible = (el) => {
+            return el.offsetParent !== null;
+        };
+        const find = (element) => {
+            // Check if the element itself is focusable
+            if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {
+                focusableElements.push(element);
+            }
+            // Traverse shadow DOM
+            if (element.shadowRoot) {
+                Array.from(element.shadowRoot.children).forEach(find);
+            }
+            // Traverse slotted content
+            if (element.tagName === 'SLOT') {
+                element.assignedElements({ flatten: true }).forEach(find);
+            }
+            // Traverse light DOM children if there is no shadow root
+            if (!element.shadowRoot) {
+                Array.from(element.children).forEach(find);
+            }
+        };
+        find(root);
+        return focusableElements;
+    }
 }
 //# sourceMappingURL=html.helper.js.map

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

	@@ -1 +1 @@
1	- {"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,GAAK,OAAO,CAAC,UAAyB,EAAE,IAAoB,IAAI,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}"]}
1	+ {"version":3,"file":"html.helper.js","sourceRoot":"","sources":["../../src/helpers/html.helper.ts"],"names":[],"mappings":"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","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\r\n static getFocusableElements(root: HTMLElement): HTMLElement[] {\r\n if (!root) return [];\r\n \r\n const focusableElements: HTMLElement[] = [];\r\n const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex=\"-1\"])';\r\n \r\n const isVisible = (el: HTMLElement) => {\r\n return el.offsetParent !== null;\r\n };\r\n \r\n const find = (element: Element) => {\r\n // Check if the element itself is focusable\r\n if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {\r\n focusableElements.push(element);\r\n }\r\n \r\n // Traverse shadow DOM\r\n if (element.shadowRoot) {\r\n Array.from(element.shadowRoot.children).forEach(find);\r\n }\r\n \r\n // Traverse slotted content\r\n if (element.tagName === 'SLOT') {\r\n (element as HTMLSlotElement).assignedElements({ flatten: true }).forEach(find);\r\n }\r\n \r\n // Traverse light DOM children if there is no shadow root\r\n if (!element.shadowRoot) {\r\n Array.from(element.children).forEach(find);\r\n }\r\n };\r\n \r\n find(root);\r\n \r\n return focusableElements;\r\n }\r\n}"]}

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

@@ -2,20 +2,6 @@ export class ObjectHelper {
     static generateUUID() {
         return Math.random().toString(36).substr(2, 9);
     }
-    static clone(objOrObjs) {
-        const cloneObject = (obj) => {
-            const { _store, _elementRef, totalWidth, totalHeight, element, ...remainingProps } = obj;
-            const clonedProps = structuredClone(remainingProps);
-            if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
-                clonedProps.element = element.cloneNode(true);
-            }
-            return clonedProps;
-        };
-        if (Array.isArray(objOrObjs)) {
-            return objOrObjs.map(cloneObject);
-        }
-        return cloneObject(objOrObjs);
-    }
     static isEmpty(obj) {
         if (obj === null || obj === undefined) {
             return true;

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

	@@ -1 +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,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,~~OAAO,~~EAAE,GAAG,cAAc,EAAE,GAAG,GAAU,~~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,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,GAAG,EAAE,WAAW,KAAK,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"]}
1	+ {"version":3,"file":"object.helper.js","sourceRoot":"","sources":["../../src/helpers/object.helper.ts"],"names":[],"mappings":"AAAA,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,OAAO,CAAC,GAAQ;QACrB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,GAAG,EAAE,WAAW,KAAK,MAAM,CAAC;IACvE,CAAC;CACF","sourcesContent":["export class ObjectHelper {\r\n static generateUUID(): string {\r\n return Math.random().toString(36).substr(2, 9);\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/index.js CHANGED Viewed

@@ -19,5 +19,5 @@ export * from './interfaces/toolbar-control.interface';
 export * from './interfaces/menu-item.interface';
 export * from './configs/default-brush-tool.config';
 export * from './configs/default-text-tool.config';
-export * from './classes/workspace.class';
+export * from './classes/core/workspace.class';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map CHANGED Viewed

	@@ -1 +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;AAE9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AAErD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,~~2BAA2B~~,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\nexport * from './interfaces/menu-item.interface';\r\n\r\nexport * from './configs/default-brush-tool.config';\r\nexport * from './configs/default-text-tool.config';\r\n\r\nexport * from './classes/workspace.class';\r\n\r\n\r\n\r\n"]}
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;AAE9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,sCAAsC,CAAC;AAErD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AAEnD,cAAc,gCAAgC,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\nexport * from './interfaces/menu-item.interface';\r\n\r\nexport * from './configs/default-brush-tool.config';\r\nexport * from './configs/default-text-tool.config';\r\n\r\nexport * from './classes/core/workspace.class';\r\n\r\n\r\n\r\n"]}

package/dist/collection/interfaces/clonable.interface.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=clonable.interface.js.map

package/dist/collection/interfaces/clonable.interface.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"clonable.interface.js","sourceRoot":"","sources":["../../src/interfaces/clonable.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface KritzelClonable<T> {\r\n clone(): T;\r\n}"]}