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

kritzel-stencil 0.0.164 → 0.0.166

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 (44) hide show

package/dist/components/{p-tp96UZ0l.js → p-CRtmNOp1.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-import { b as KritzelBrushTool, c as KritzelTextTool } from './p-Dz2XHHqa.js';
+import { b as KritzelBrushTool, c as KritzelTextTool } from './p-Bwv1dxAB.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
 import { d as defineCustomElement$c } from './p-LAsVgL2e.js';
 import { d as defineCustomElement$b } from './p-Brd9SxWS.js';
@@ -304,6 +304,6 @@ function defineCustomElement() {
 }
 export { KritzelControls as K, defineCustomElement as d };
-//# sourceMappingURL=p-tp96UZ0l.js.map
+//# sourceMappingURL=p-CRtmNOp1.js.map
-//# sourceMappingURL=p-tp96UZ0l.js.map
+//# sourceMappingURL=p-CRtmNOp1.js.map

package/dist/components/{p-tp96UZ0l.js.map → p-CRtmNOp1.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-tp96UZ0l.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n flex-direction: column;\r\n user-select: none;\r\n}\r\n\r\n:host(.mobile) {\r\n --kritzel-controls-control-hover-background-color: transparent;\r\n --kritzel-controls-control-active-background-color: transparent;\r\n}\r\n\r\n.kritzel-controls {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: flex-start;\r\n gap: var(--kritzel-controls-gap, 8px);\r\n height: 100%;\r\n padding: var(--kritzel-controls-padding, 8px);\r\n background-color: var(--kritzel-controls-background-color, #ffffff);\r\n border-radius: var(--kritzel-controls-border-radius, 16px);\r\n box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-controls-border, 1px solid #ebebeb);\r\n z-index: 10000;\r\n position: relative;\r\n}\r\n\r\n.kritzel-control {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: var(--kritzel-controls-control-color, #000000);\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n padding: var(--kritzel-controls-control-padding, 8px);\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n -webkit-tap-highlight-color: transparent;\r\n font-weight: bold;\r\n}\r\n\r\n.kritzel-control:focus,\r\n.kritzel-control:hover {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control:active {\r\n background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-control.selected:focus {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;\r\n\r\n}\r\n\r\n\r\n/* Split-button control styles /\r\n.kritzel-control-split {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n color: var(--kritzel-controls-control-color, #000000);\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: var(--kritzel-controls-control-padding, 8px);\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n -webkit-tap-highlight-color: transparent;\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n color: inherit;\r\n}\r\n\r\n/ When selected, main button only has left-rounded corners (dropdown appears on right) /\r\n.kritzel-control-split.selected .kritzel-control-main {\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px);\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-dropdown {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n align-self: stretch;\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n -webkit-tap-highlight-color: transparent;\r\n border-radius: 0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;\r\n color: inherit;\r\n \r\n / Hidden state - collapsed with no visibility /\r\n width: 0;\r\n padding: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n \r\n / Smooth transition /\r\n transition: width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out;\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-dropdown.visible {\r\n width: auto;\r\n padding: 0 6px;\r\n opacity: 1;\r\n pointer-events: auto;\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main:focus,\r\n.kritzel-control-split .kritzel-control-main:hover,\r\n.kritzel-control-split .kritzel-control-dropdown:focus,\r\n.kritzel-control-split .kritzel-control-dropdown:hover {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main:active,\r\n.kritzel-control-split .kritzel-control-dropdown:active {\r\n background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control-split.selected {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-control-split.selected .kritzel-control-main:hover,\r\n.kritzel-control-split.selected .kritzel-control-dropdown:hover {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n/ Submenu styles /\r\n.kritzel-submenu {\r\n position: absolute;\r\n bottom: calc(100% + 8px);\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--kritzel-controls-background-color, #ffffff);\r\n border-radius: 12px;\r\n padding: 6px;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n border: 1px solid #ebebeb;\r\n z-index: 10001;\r\n min-width: 140px;\r\n}\r\n\r\n.kritzel-submenu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 12px;\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border-radius: 8px;\r\n color: var(--kritzel-controls-control-color, #000000);\r\n font-size: 14px;\r\n text-align: left;\r\n white-space: nowrap;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-submenu-item:hover {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-submenu-item.active {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);\r\n color: var(--kritzel-controls-control-selected-color, #ffffff);\r\n}\r\n\r\n.kritzel-submenu-item.active:hover {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);\r\n}\r\n\r\n\r\n.kritzel-config-container {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 40px;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n \r\n / Hidden state - collapsed /\r\n width: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n margin-left: calc(-1 var(--kritzel-controls-gap, 8px));\r\n \r\n /* Smooth transition /\r\n transition: width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out;\r\n}\r\n\r\n.kritzel-config-container.visible {\r\n width: 40px;\r\n opacity: 1;\r\n pointer-events: auto;\r\n margin-left: 0;\r\n}\r\n\r\n\r\n.kritzel-config {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border-radius: 50%;\r\n}\r\n\r\n.color-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.font-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.no-config {\r\n height: 24px;\r\n width: 24px;\r\n border-radius: 50%;\r\n border: 1px dashed gray;\r\n}\r\n\r\nkritzel-tooltip {\r\n position: fixed;\r\n bottom: 56px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 10001;\r\n}\r\n","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, KritzelToolbarSubOption } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\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 @Prop() undoState: KritzelUndoState = null;\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 @State() selectedSubOptions: Map<string, KritzelToolbarSubOption> = new Map();\r\n @State() openSubMenuControl: KritzelToolbarControl \| null = null;\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 // Close submenu when clicking outside\r\n if (!element.closest('.kritzel-control-split') && !element.closest('.kritzel-submenu')) {\r\n this.openSubMenuControl = null;\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event) {\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.closeTooltip();\r\n this.openSubMenuControl = null;\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 /\r\n Get the currently selected sub-option for a control.\r\n * Returns the first sub-option as default if none is selected.\r\n /\r\n private getSelectedSubOption(control: KritzelToolbarControl): KritzelToolbarSubOption \| undefined {\r\n if (!control.subOptions?.length) return undefined;\r\n return this.selectedSubOptions.get(control.name) \|\| control.subOptions[0];\r\n }\r\n\r\n /\r\n Toggle the submenu for a split-button control\r\n /\r\n private toggleSubMenu(event: MouseEvent, control: KritzelToolbarControl) {\r\n event.stopPropagation();\r\n if (this.openSubMenuControl?.name === control.name) {\r\n this.openSubMenuControl = null;\r\n } else {\r\n this.openSubMenuControl = control;\r\n }\r\n }\r\n\r\n /\r\n Select a sub-option and update the tool property\r\n */\r\n private async selectSubOption(control: KritzelToolbarControl, option: KritzelToolbarSubOption) {\r\n // Update the selected sub-options map (create new Map for reactivity)\r\n const newMap = new Map(this.selectedSubOptions);\r\n newMap.set(control.name, option);\r\n this.selectedSubOptions = newMap;\r\n\r\n // Update the tool property if the tool is instantiated\r\n if (control.tool && typeof control.tool !== 'function') {\r\n (control.tool as any)[option.toolProperty] = option.value;\r\n }\r\n\r\n // Close the submenu\r\n this.openSubMenuControl = null;\r\n\r\n // Activate this control\r\n await this.handleControlClick(control);\r\n }\r\n\r\n render() {\r\n const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool \|\| \r\n this.activeControl?.tool instanceof KritzelTextTool;\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 undoState={this.undoState}\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 // Check if this control has sub-options (split-button)\r\n if (control.subOptions?.length) {\r\n const selectedSubOption = this.getSelectedSubOption(control);\r\n const isActive = this.activeControl?.name === control.name;\r\n const isSubMenuOpen = this.openSubMenuControl?.name === control.name;\r\n\r\n return (\r\n <div\r\n class={{\r\n 'kritzel-control-split': true,\r\n 'selected': isActive,\r\n }}\r\n key={control.name}\r\n >\r\n <button\r\n class=\"kritzel-control-main\"\r\n onClick={() => this.handleControlClick(control)}\r\n title={selectedSubOption?.label}\r\n >\r\n <kritzel-icon name={selectedSubOption?.icon \|\| control.icon}></kritzel-icon>\r\n </button>\r\n <button\r\n class={{\r\n 'kritzel-control-dropdown': true,\r\n 'visible': isActive,\r\n }}\r\n onClick={(e) => this.toggleSubMenu(e, control)}\r\n aria-label=\"Select shape type\"\r\n aria-expanded={isSubMenuOpen ? 'true' : 'false'}\r\n tabIndex={isActive ? 0 : -1}\r\n >\r\n <kritzel-icon name=\"chevron-down\" size={12}></kritzel-icon>\r\n </button>\r\n\r\n {isSubMenuOpen && (\r\n <div class=\"kritzel-submenu\">\r\n {control.subOptions.map(option => (\r\n <button\r\n class={{\r\n 'kritzel-submenu-item': true,\r\n 'active': option.id === selectedSubOption?.id,\r\n }}\r\n key={option.id}\r\n onClick={() => this.selectSubOption(control, option)}\r\n >\r\n <kritzel-icon name={option.icon} size={20}></kritzel-icon>\r\n <span>{option.label}</span>\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n // Regular tool control (no sub-options)\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 === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n return (\r\n <div \r\n class={{\r\n 'kritzel-config-container': true,\r\n 'visible': hasConfigUI,\r\n }}\r\n key={control.name}\r\n >\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={hasConfigUI ? 0 : -1}\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: 'pointer',\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 </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}
1	+ {"file":"p-CRtmNOp1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-controls/kritzel-controls.css?tag=kritzel-controls&encapsulation=shadow","src/components/ui/kritzel-controls/kritzel-controls.tsx"],"sourcesContent":[":host {\r\n display: flex;\r\n flex-direction: column;\r\n user-select: none;\r\n}\r\n\r\n:host(.mobile) {\r\n --kritzel-controls-control-hover-background-color: transparent;\r\n --kritzel-controls-control-active-background-color: transparent;\r\n}\r\n\r\n.kritzel-controls {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: flex-start;\r\n gap: var(--kritzel-controls-gap, 8px);\r\n height: 100%;\r\n padding: var(--kritzel-controls-padding, 8px);\r\n background-color: var(--kritzel-controls-background-color, #ffffff);\r\n border-radius: var(--kritzel-controls-border-radius, 16px);\r\n box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n border: var(--kritzel-controls-border, 1px solid #ebebeb);\r\n z-index: 10000;\r\n position: relative;\r\n}\r\n\r\n.kritzel-control {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: var(--kritzel-controls-control-color, #000000);\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n padding: var(--kritzel-controls-control-padding, 8px);\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n -webkit-tap-highlight-color: transparent;\r\n font-weight: bold;\r\n}\r\n\r\n.kritzel-control:focus,\r\n.kritzel-control:hover {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control:active {\r\n background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control.selected,\r\n.kritzel-control.selected:hover,\r\n.kritzel-control.selected:active {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-control.selected:focus {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;\r\n\r\n}\r\n\r\n\r\n/* Split-button control styles /\r\n.kritzel-control-split {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n color: var(--kritzel-controls-control-color, #000000);\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: var(--kritzel-controls-control-padding, 8px);\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n -webkit-tap-highlight-color: transparent;\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n color: inherit;\r\n}\r\n\r\n/ When selected, main button only has left-rounded corners (dropdown appears on right) /\r\n.kritzel-control-split.selected .kritzel-control-main {\r\n border-radius: var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px);\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-dropdown {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n align-self: stretch;\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n -webkit-tap-highlight-color: transparent;\r\n border-radius: 0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;\r\n color: inherit;\r\n \r\n / Hidden state - collapsed with no visibility /\r\n width: 0;\r\n padding: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n \r\n / Smooth transition /\r\n transition: width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out;\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-dropdown.visible {\r\n width: auto;\r\n padding: 0 6px;\r\n opacity: 1;\r\n pointer-events: auto;\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main:focus,\r\n.kritzel-control-split .kritzel-control-main:hover,\r\n.kritzel-control-split .kritzel-control-dropdown:focus,\r\n.kritzel-control-split .kritzel-control-dropdown:hover {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-control-split .kritzel-control-main:active,\r\n.kritzel-control-split .kritzel-control-dropdown:active {\r\n background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));\r\n}\r\n\r\n.kritzel-control-split.selected {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;\r\n color: var(--kritzel-controls-control-selected-color, #ffffff) !important;\r\n}\r\n\r\n.kritzel-control-split.selected .kritzel-control-main:hover,\r\n.kritzel-control-split.selected .kritzel-control-dropdown:hover {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n/ Submenu styles /\r\n.kritzel-submenu {\r\n position: absolute;\r\n bottom: calc(100% + 8px);\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--kritzel-controls-background-color, #ffffff);\r\n border-radius: 12px;\r\n padding: 6px;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n border: 1px solid #ebebeb;\r\n z-index: 10001;\r\n min-width: 140px;\r\n}\r\n\r\n.kritzel-submenu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 12px;\r\n border: none;\r\n background: none;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border-radius: 8px;\r\n color: var(--kritzel-controls-control-color, #000000);\r\n font-size: 14px;\r\n text-align: left;\r\n white-space: nowrap;\r\n -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.kritzel-submenu-item:hover {\r\n background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.kritzel-submenu-item.active {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);\r\n color: var(--kritzel-controls-control-selected-color, #ffffff);\r\n}\r\n\r\n.kritzel-submenu-item.active:hover {\r\n background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);\r\n}\r\n\r\n\r\n.kritzel-config-container {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 40px;\r\n box-sizing: border-box;\r\n -webkit-tap-highlight-color: transparent;\r\n \r\n / Hidden state - collapsed /\r\n width: 0;\r\n opacity: 0;\r\n overflow: hidden;\r\n pointer-events: none;\r\n margin-left: calc(-1 var(--kritzel-controls-gap, 8px));\r\n \r\n /* Smooth transition /\r\n transition: width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out;\r\n}\r\n\r\n.kritzel-config-container.visible {\r\n width: 40px;\r\n opacity: 1;\r\n pointer-events: auto;\r\n margin-left: 0;\r\n}\r\n\r\n\r\n.kritzel-config {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border-radius: 50%;\r\n}\r\n\r\n.color-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.font-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n cursor: var(--kritzel-pointer-cursor, pointer);\r\n border: 2px solid transparent;\r\n box-sizing: border-box;\r\n background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);\r\n}\r\n\r\n.no-config {\r\n height: 24px;\r\n width: 24px;\r\n border-radius: 50%;\r\n border: 1px dashed gray;\r\n}\r\n\r\nkritzel-tooltip {\r\n position: fixed;\r\n bottom: 56px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 10001;\r\n}\r\n","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, KritzelToolbarSubOption } from '../../../interfaces/toolbar-control.interface';\r\nimport { KritzelBaseTool } from '../../../classes/tools/base-tool.class';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\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 @Prop() undoState: KritzelUndoState = null;\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 @State() selectedSubOptions: Map<string, KritzelToolbarSubOption> = new Map();\r\n @State() openSubMenuControl: KritzelToolbarControl \| null = null;\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 // Close submenu when clicking outside\r\n if (!element.closest('.kritzel-control-split') && !element.closest('.kritzel-submenu')) {\r\n this.openSubMenuControl = null;\r\n }\r\n }\r\n\r\n @Listen('keydown', { target: 'window' })\r\n handleKeyDown(event) {\r\n if (event.key === 'Escape') {\r\n event.preventDefault();\r\n this.closeTooltip();\r\n this.openSubMenuControl = null;\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 /\r\n Get the currently selected sub-option for a control.\r\n * Returns the first sub-option as default if none is selected.\r\n /\r\n private getSelectedSubOption(control: KritzelToolbarControl): KritzelToolbarSubOption \| undefined {\r\n if (!control.subOptions?.length) return undefined;\r\n return this.selectedSubOptions.get(control.name) \|\| control.subOptions[0];\r\n }\r\n\r\n /\r\n Toggle the submenu for a split-button control\r\n /\r\n private toggleSubMenu(event: MouseEvent, control: KritzelToolbarControl) {\r\n event.stopPropagation();\r\n if (this.openSubMenuControl?.name === control.name) {\r\n this.openSubMenuControl = null;\r\n } else {\r\n this.openSubMenuControl = control;\r\n }\r\n }\r\n\r\n /\r\n Select a sub-option and update the tool property\r\n */\r\n private async selectSubOption(control: KritzelToolbarControl, option: KritzelToolbarSubOption) {\r\n // Update the selected sub-options map (create new Map for reactivity)\r\n const newMap = new Map(this.selectedSubOptions);\r\n newMap.set(control.name, option);\r\n this.selectedSubOptions = newMap;\r\n\r\n // Update the tool property if the tool is instantiated\r\n if (control.tool && typeof control.tool !== 'function') {\r\n (control.tool as any)[option.toolProperty] = option.value;\r\n }\r\n\r\n // Close the submenu\r\n this.openSubMenuControl = null;\r\n\r\n // Activate this control\r\n await this.handleControlClick(control);\r\n }\r\n\r\n render() {\r\n const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool \|\| \r\n this.activeControl?.tool instanceof KritzelTextTool;\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 undoState={this.undoState}\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 // Check if this control has sub-options (split-button)\r\n if (control.subOptions?.length) {\r\n const selectedSubOption = this.getSelectedSubOption(control);\r\n const isActive = this.activeControl?.name === control.name;\r\n const isSubMenuOpen = this.openSubMenuControl?.name === control.name;\r\n\r\n return (\r\n <div\r\n class={{\r\n 'kritzel-control-split': true,\r\n 'selected': isActive,\r\n }}\r\n key={control.name}\r\n >\r\n <button\r\n class=\"kritzel-control-main\"\r\n onClick={() => this.handleControlClick(control)}\r\n title={selectedSubOption?.label}\r\n >\r\n <kritzel-icon name={selectedSubOption?.icon \|\| control.icon}></kritzel-icon>\r\n </button>\r\n <button\r\n class={{\r\n 'kritzel-control-dropdown': true,\r\n 'visible': isActive,\r\n }}\r\n onClick={(e) => this.toggleSubMenu(e, control)}\r\n aria-label=\"Select shape type\"\r\n aria-expanded={isSubMenuOpen ? 'true' : 'false'}\r\n tabIndex={isActive ? 0 : -1}\r\n >\r\n <kritzel-icon name=\"chevron-down\" size={12}></kritzel-icon>\r\n </button>\r\n\r\n {isSubMenuOpen && (\r\n <div class=\"kritzel-submenu\">\r\n {control.subOptions.map(option => (\r\n <button\r\n class={{\r\n 'kritzel-submenu-item': true,\r\n 'active': option.id === selectedSubOption?.id,\r\n }}\r\n key={option.id}\r\n onClick={() => this.selectSubOption(control, option)}\r\n >\r\n <kritzel-icon name={option.icon} size={20}></kritzel-icon>\r\n <span>{option.label}</span>\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n // Regular tool control (no sub-options)\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 === 'config' && control.name === this.firstConfig?.name && this.activeControl) {\r\n return (\r\n <div \r\n class={{\r\n 'kritzel-config-container': true,\r\n 'visible': hasConfigUI,\r\n }}\r\n key={control.name}\r\n >\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={hasConfigUI ? 0 : -1}\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: 'pointer',\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 </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}

package/dist/esm/{default-line-tool.config-C35P3XfD.js → default-line-tool.config-DJ488kil.js} RENAMED Viewed

@@ -14766,20 +14766,21 @@ class KritzelLine extends KritzelBaseObject {
         this._core.store.state.objects.update(this);
     }
     hitTest(x, y) {
-        const halfStroke = this.strokeWidth / this.scale / 2;
+        const strokeWidth = Math.max(this.strokeWidth, 10);
+        const halfStroke = strokeWidth / this.scale / 2;
         if (this._adjustedPoints === null) {
             this._adjustedPoints = this.computeAdjustedPoints();
         }
         // For curved lines, use distance to the Bezier curve
         if (this.controlX !== undefined && this.controlY !== undefined) {
             const distance = this.pointToBezierDistance(x, y);
-            return distance <= halfStroke + 2;
+            return distance <= halfStroke;
         }
         // For straight lines, use distance to line segment
         const p1 = this._adjustedPoints[0];
         const p2 = this._adjustedPoints[1];
         const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
-        return distance <= halfStroke + 2; // Add a small tolerance for easier selection
+        return distance <= halfStroke;
     }
     hitTestPolygon(polygon) {
         const halfStroke = this.strokeWidth / this.scale / 2;
@@ -15297,9 +15298,10 @@ class KritzelBrushTool extends KritzelBaseTool {
     color = '#000000';
     size = 6;
     palettes = {
-        pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#808000', '#800080'],
+        pen: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#808080', '#C0C0C0', '#800000', '#008000', '#000080', '#800080'],
         highlighter: ['#ffff00', '#ffb347', '#b4ffb4'],
     };
+    _currentPathId = null;
     constructor(core) {
         super(core);
     }
@@ -15321,6 +15323,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                     strokeWidth: this.size,
                 });
                 path.isCompleted = false;
+                this._currentPathId = path.id;
                 this._core.store.state.objects.insert(path);
             }
         }
@@ -15339,6 +15342,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                     strokeWidth: this.size,
                 });
                 path.isCompleted = false;
+                this._currentPathId = path.id;
                 this._core.store.state.objects.insert(path);
             }
         }
@@ -15348,8 +15352,9 @@ class KritzelBrushTool extends KritzelBaseTool {
             event.preventDefault();
         }
         if (event.pointerType === 'mouse') {
-            if (this._core.store.state.isDrawing) {
-                const currentPath = this._core.store.currentPath;
+            if (this._core.store.state.isDrawing && this._currentPathId) {
+                const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
                 if (currentPath) {
                     const x = event.clientX - this._core.store.offsetX;
                     const y = event.clientY - this._core.store.offsetY;
@@ -15372,23 +15377,26 @@ class KritzelBrushTool extends KritzelBaseTool {
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 1) {
-                const currentPath = this._core.store.currentPath;
-                if (currentPath) {
-                    const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
-                    const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
-                    const updatedPath = KritzelPath.create(this._core, {
-                        points: [...currentPath.points, [x, y]],
-                        translateX: -this._core.store.state.translateX,
-                        translateY: -this._core.store.state.translateY,
-                        scale: this._core.store.state.scale,
-                        fill: this.color,
-                        strokeWidth: this.size,
-                    });
-                    updatedPath.id = currentPath.id;
-                    updatedPath.workspaceId = currentPath.workspaceId;
-                    updatedPath.zIndex = currentPath.zIndex;
-                    updatedPath.isCompleted = false;
-                    this._core.store.state.objects.update(updatedPath);
+                if (this._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+                        const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+                        const updatedPath = KritzelPath.create(this._core, {
+                            points: [...currentPath.points, [x, y]],
+                            translateX: -this._core.store.state.translateX,
+                            translateY: -this._core.store.state.translateY,
+                            scale: this._core.store.state.scale,
+                            fill: this.color,
+                            strokeWidth: this.size,
+                        });
+                        updatedPath.id = currentPath.id;
+                        updatedPath.workspaceId = currentPath.workspaceId;
+                        updatedPath.zIndex = currentPath.zIndex;
+                        updatedPath.isCompleted = false;
+                        this._core.store.state.objects.update(updatedPath);
+                    }
                 }
             }
         }
@@ -15400,22 +15408,30 @@ class KritzelBrushTool extends KritzelBaseTool {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
-                const currentPath = this._core.store.currentPath;
-                if (currentPath) {
-                    currentPath.isCompleted = true;
-                    this._core.store.state.objects.update(currentPath);
-                    this._core.engine.emitObjectsChange();
+                if (this._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        currentPath.isCompleted = true;
+                        this._core.store.state.objects.update(currentPath);
+                        this._core.engine.emitObjectsChange();
+                    }
+                    this._currentPathId = null;
                 }
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isDrawing) {
                 this._core.store.state.isDrawing = false;
-                const currentPath = this._core.store.currentPath;
-                if (currentPath) {
-                    currentPath.isCompleted = true;
-                    this._core.store.state.objects.update(currentPath);
-                    this._core.engine.emitObjectsChange();
+                if (this._currentPathId) {
+                    const matchingObjects = this._core.store.state.objects.filter(o => o.id === this._currentPathId);
+                    const currentPath = matchingObjects.length > 0 ? matchingObjects[0] : null;
+                    if (currentPath) {
+                        currentPath.isCompleted = true;
+                        this._core.store.state.objects.update(currentPath);
+                        this._core.engine.emitObjectsChange();
+                    }
+                    this._currentPathId = null;
                 }
             }
         }
@@ -15488,7 +15504,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             const deltaX = snapshot.translateX - this.translateX;
             const deltaY = snapshot.translateY - this.translateY;
             snapshot.translateX = x + deltaX;
-            snapshot.translateY = x + deltaY;
+            snapshot.translateY = y + deltaY;
         });
         this.translateX = x;
         this.translateY = y;
@@ -15724,6 +15740,9 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const groupCenterY = this.translateY + this.totalHeight / this.scale / 2;
         return objCenterY - groupCenterY;
     }
+    hitTest(x, y) {
+        return this.objects.some(obj => obj.hitTest(x, y));
+    }
 }
 class KritzelLineTool extends KritzelBaseTool {
@@ -17559,6 +17578,10 @@ class KritzelSelectionTool extends KritzelBaseTool {
         if (!object) {
             return null;
         }
+        const { x, y } = this._core.getCanvasPoint(event);
+        if (!object.hitTest(x, y)) {
+            return null;
+        }
         if (object instanceof KritzelSelectionGroup) {
             return object;
         }
@@ -33834,6 +33857,6 @@ const DEFAULT_LINE_TOOL_CONFIG = {
 };
 export { Schema as $, isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelPath as E, KritzelImage as F, KritzelLine as G, HocuspocusProvider as H, KritzelBrushTool as I, KritzelLineTool as J, KritzelText as K, KritzelEraserTool as L, KritzelImageTool as M, KritzelTextTool as N, Observable$1 as O, KritzelCursorHelper as P, KritzelSelectionTool as Q, IndexedDBSyncProvider as R, KritzelAppStateMap as S, KritzelWorkspace as T, KritzelAnchorManager as U, DEFAULT_BRUSH_CONFIG as V, DEFAULT_TEXT_CONFIG as W, DEFAULT_LINE_TOOL_CONFIG as X, KritzelDevicesHelper as Y, KritzelMouseButton as Z, KritzelBaseObject as _, writeVarUint8Array$2 as a, schema as a0, addListNodes as a1, EditorView as a2, EditorState as a3, keymap as a4, TextSelection as a5, KritzelKeyboardHelper as a6, KritzelToolRegistry as a7, KritzelGeometryHelper as a8, baseKeymap as a9, KritzelBaseTool as aa, KritzelEventHelper as ab, KritzelIconRegistry as ac, KritzelBaseHandler as ad, KritzelSelectionBox as ae, KritzelSelectionGroup as af, Doc as ag, DEFAULT_SYNC_CONFIG as ah, UndoManager as ai, ObjectHelper as aj, KritzelClassHelper as ak, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
-//# sourceMappingURL=default-line-tool.config-C35P3XfD.js.map
+//# sourceMappingURL=default-line-tool.config-DJ488kil.js.map
-//# sourceMappingURL=default-line-tool.config-C35P3XfD.js.map
+//# sourceMappingURL=default-line-tool.config-DJ488kil.js.map