kritzel-stencil 0.1.21 → 0.1.23
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.
- package/dist/cjs/{default-line-tool.config-Bva9deYM.js → default-line-tool.config-Ba74O1gD.js} +31 -9
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js +127 -114
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/collection/classes/objects/shape.class.js +9 -3
- package/dist/collection/classes/objects/text.class.js +19 -3
- package/dist/collection/classes/tools/text-tool.class.js +3 -3
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +20 -34
- package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js +171 -15
- package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +29 -72
- package/dist/collection/constants/version.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-tooltip.js +1 -1
- package/dist/components/p-0YNMEgri.js +1 -0
- package/dist/components/p-B1qfRBi0.js +1 -0
- package/dist/components/{p-Dmy0R-7y.js → p-DAPeFBqC.js} +1 -1
- package/dist/components/{p-CYX7RMRZ.js → p-DYAnRoi2.js} +1 -1
- package/dist/components/{p-BsvZ2juR.js → p-IGA64WxD.js} +1 -1
- package/dist/components/{p-BbHELXEC.js → p-mPdux0tA.js} +2 -2
- package/dist/esm/{default-line-tool.config-DDIFE6oX.js → default-line-tool.config-BW07ZETV.js} +31 -9
- package/dist/esm/index.js +2 -2
- package/dist/esm/kritzel-back-to-content_32.entry.js +127 -114
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/stencil/index.esm.js +1 -1
- package/dist/stencil/p-55409078.entry.js +9 -0
- package/dist/stencil/p-BW07ZETV.js +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/components/shared/kritzel-tooltip/kritzel-tooltip.d.ts +11 -1
- package/dist/types/components/ui/kritzel-controls/kritzel-controls.d.ts +3 -11
- package/dist/types/components.d.ts +7 -0
- package/dist/types/constants/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-BNT9uvII.js +0 -1
- package/dist/components/p-DqtvAhfs.js +0 -1
- package/dist/stencil/p-3fc743ee.entry.js +0 -9
- package/dist/stencil/p-DDIFE6oX.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-k35gVcuU.js";export{s as setNonce}from"./p-k35gVcuU.js";import{g as o}from"./p-DQuL1Twl.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((async e=>(await o(),t([["p-
|
|
1
|
+
import{p as e,b as t}from"./p-k35gVcuU.js";export{s as setNonce}from"./p-k35gVcuU.js";import{g as o}from"./p-DQuL1Twl.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((async e=>(await o(),t([["p-55409078",[[512,"kritzel-editor",{scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],lockDrawingScale:[1028,"lock-drawing-scale"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],isBackToContentButtonVisible:[32],currentTheme:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],backToContent:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}],currentTheme:[{onCurrentThemeChange:0}]}],[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],firstConfig:[32],isTouchDevice:[32],selectedSubOptions:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],closeTooltip:[64]},[[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{theme:[{onThemeChange:0}]}],[513,"kritzel-settings",{isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],currentTheme:[32],open:[64]}],[513,"kritzel-workspace-manager",{activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-more-menu",{items:[16],icon:[1],iconSize:[2,"icon-size"],offsetY:[2,"offset-y"],menuAnchor:[32]}],[513,"kritzel-engine",{workspace:[16],syncConfig:[16],activeTool:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],scaleMax:[1026,"scale-max"],scaleMin:[1026,"scale-min"],cursorTarget:[16],lockDrawingScale:[4,"lock-drawing-scale"],theme:[1],forceUpdate:[32],triggerSelectionChange:[64],registerTool:[64],changeActiveTool:[64],disable:[64],enable:[64],delete:[64],copy:[64],paste:[64],bringForward:[64],sendBackward:[64],bringToFront:[64],sendToBack:[64],group:[64],ungroup:[64],undo:[64],redo:[64],hideContextMenu:[64],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],backToContent:[64],getCopiedObjects:[64],getScreenshot:[64],exportViewportAsPng:[64],exportViewportAsSvg:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[1,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[1,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{workspace:[{onWorkspaceChange:0}],scaleMax:[{validateScaleMax:0}],scaleMin:[{validateScaleMin:0}],cursorTarget:[{onCursorTargetChange:0}],lockDrawingScale:[{onLockDrawingScaleChange:0}],theme:[{onThemeChange:0}]}],[513,"kritzel-export",{isDialogOpen:[32],previewUrl:[32],isLoading:[32],open:[64]}],[513,"kritzel-back-to-content",{visible:[4],text:[1]}],[513,"kritzel-tool-config",{tool:[1040],isExpanded:[1028,"is-expanded"],theme:[1],config:[32],palette:[32],currentOpacity:[32],updateTrigger:[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}]}],[513,"kritzel-split-button",{buttonIcon:[1,"button-icon"],dropdownIcon:[1,"dropdown-icon"],items:[16],mainButtonDisabled:[4,"main-button-disabled"],menuButtonDisabled:[4,"menu-button-disabled"],isMenuOpen:[32],isTouchDevice:[32],anchorElement:[32],menuScrollTop:[32],open:[64],focusMenu:[64]}],[513,"kritzel-context-menu",{items:[16],objects:[16],processedItems:[32]},[[9,"pointerdown","handleOutsideClick"]],{items:[{onItemsChanged:0}]}],[769,"kritzel-master-detail",{items:[16],selectedItemId:[1,"selected-item-id"],focusedIndex:[32],showMobileDetail:[32]},null,{selectedItemId:[{watchSelectedItemId:0}]}],[513,"kritzel-utility-panel",{undoState:[16]}],[513,"kritzel-cursor-trail",{core:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[513,"kritzel-numeric-input",{value:[1026],min:[2],max:[2],step:[2],label:[1],inputValue:[32]},null,{value:[{onValueChange:0}]}],[513,"kritzel-slide-toggle",{checked:[1028],disabled:[4],label:[1]}],[769,"kritzel-tooltip",{isVisible:[1028,"is-visible"],anchorElement:[16],triggerElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],open:[64],close:[64],toggle:[64],focusContent:[64]},[[4,"click","handleOutsideClick"],[7,"pointerdown","handleOutsidePointerDown"],[4,"kritzelTooltipCloseAll","handleCloseAll"],[9,"resize","handleWindowResize"]],{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}],[513,"kritzel-color-palette",{colors:[16],selectedColor:[1040],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"],opacity:[2],theme:[1]}],[513,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]}],[513,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}],[513,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}],[769,"kritzel-dialog",{isOpen:[516,"is-open"],dialogTitle:[1,"dialog-title"],closable:[4],closeOnBackdrop:[4,"close-on-backdrop"],closeOnEscape:[4,"close-on-escape"],autoFocus:[4,"auto-focus"],trapFocus:[4,"trap-focus"],size:[1],fullscreenOnMobile:[4,"fullscreen-on-mobile"],isAnimating:[32],open:[64],close:[64],focusFirstElement:[64]},[[8,"keydown","handleKeyDown"]],{isOpen:[{handleIsOpenChange:0}]}],[513,"kritzel-line-endings",{styles:[16],value:[1040]}],[513,"kritzel-opacity-slider",{value:[1026],min:[2],max:[2],step:[2],previewColor:[1,"preview-color"]}],[513,"kritzel-shape-fill",{value:[1025]}],[513,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}],[513,"kritzel-color",{value:[1],theme:[1],size:[2]}],[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[16],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32],isOpen:[32],focusedIndex:[32],openDirection:[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}],[513,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}],[513,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},null,{item:[{onItemChange:0}]}],[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:[{anchorChanged:0}]}],[513,"kritzel-icon",{name:[1],label:[1],size:[2]}]]],["p-095f812f",[[513,"kritzel-brush-style",{type:[1],brushOptions:[16]}]]]],e))));
|
|
@@ -3,18 +3,28 @@ export declare class KritzelTooltip {
|
|
|
3
3
|
host: HTMLElement;
|
|
4
4
|
isVisible: boolean;
|
|
5
5
|
anchorElement: HTMLElement;
|
|
6
|
+
triggerElement: HTMLElement;
|
|
6
7
|
offsetY: number;
|
|
7
8
|
tooltipClosed: EventEmitter<void>;
|
|
9
|
+
tooltipOpened: EventEmitter<void>;
|
|
8
10
|
positionX: number;
|
|
9
11
|
positionY: number;
|
|
10
12
|
handleOutsideClick(event: MouseEvent): void;
|
|
11
13
|
handleOutsidePointerDown(event: PointerEvent): void;
|
|
14
|
+
handleCloseAll(event: CustomEvent): void;
|
|
12
15
|
handleWindowResize(): void;
|
|
16
|
+
handleTriggerElementChange(newTrigger: HTMLElement, oldTrigger: HTMLElement): void;
|
|
17
|
+
handleVisibilityChange(newValue: boolean): void;
|
|
18
|
+
open(): Promise<void>;
|
|
19
|
+
close(): Promise<void>;
|
|
20
|
+
toggle(): Promise<void>;
|
|
13
21
|
focusContent(): Promise<void>;
|
|
22
|
+
connectedCallback(): void;
|
|
14
23
|
componentDidLoad(): void;
|
|
15
24
|
componentWillLoad(): void;
|
|
16
25
|
componentWillUpdate(): void;
|
|
17
|
-
|
|
26
|
+
disconnectedCallback(): void;
|
|
27
|
+
private handleTriggerClick;
|
|
18
28
|
private calculateAdjustedPosition;
|
|
19
29
|
render(): any;
|
|
20
30
|
}
|
|
@@ -17,23 +17,20 @@ export declare class KritzelControls {
|
|
|
17
17
|
theme: ThemeMode;
|
|
18
18
|
isControlsReady: EventEmitter<void>;
|
|
19
19
|
firstConfig: ToolConfig | null;
|
|
20
|
-
isTooltipVisible: boolean;
|
|
21
20
|
isTouchDevice: boolean;
|
|
22
21
|
selectedSubOptions: Map<string, KritzelToolbarSubOption>;
|
|
23
|
-
openSubMenuControl: KritzelToolbarControl | null;
|
|
24
22
|
canScrollLeft: boolean;
|
|
25
23
|
canScrollRight: boolean;
|
|
26
24
|
needsScrolling: boolean;
|
|
27
25
|
displayValues: ToolDisplayValues | null;
|
|
28
|
-
|
|
29
|
-
handleKeyDown(event: any): void;
|
|
26
|
+
handleKeyDown(event: KeyboardEvent): void;
|
|
30
27
|
handleActiveToolChange(event: CustomEvent): Promise<void>;
|
|
31
28
|
handleSelectionChange(): void;
|
|
32
29
|
onThemeChange(): void;
|
|
33
30
|
closeTooltip(): Promise<void>;
|
|
34
31
|
kritzelEngine: HTMLKritzelEngineElement | null;
|
|
35
|
-
tooltipRef: HTMLKritzelTooltipElement | null;
|
|
36
32
|
toolsScrollRef: HTMLDivElement | null;
|
|
33
|
+
private configTriggerRef;
|
|
37
34
|
get activeToolAsTextTool(): KritzelTextTool;
|
|
38
35
|
get activeToolAsBrushTool(): KritzelBrushTool;
|
|
39
36
|
get activeToolAsLineTool(): KritzelLineTool;
|
|
@@ -42,23 +39,18 @@ export declare class KritzelControls {
|
|
|
42
39
|
private updateDisplayValues;
|
|
43
40
|
componentWillLoad(): Promise<void>;
|
|
44
41
|
componentDidLoad(): void;
|
|
42
|
+
componentDidRender(): void;
|
|
45
43
|
private updateScrollIndicators;
|
|
46
44
|
private handleToolsScroll;
|
|
47
45
|
private initializeEngine;
|
|
48
46
|
private initializeTools;
|
|
49
47
|
private handleControlClick;
|
|
50
|
-
private handleConfigClick;
|
|
51
48
|
private handleToolChange;
|
|
52
|
-
private handleTooltipClosed;
|
|
53
49
|
/**
|
|
54
50
|
* Get the currently selected sub-option for a control.
|
|
55
51
|
* Returns the first sub-option as default if none is selected.
|
|
56
52
|
*/
|
|
57
53
|
private getSelectedSubOption;
|
|
58
|
-
/**
|
|
59
|
-
* Toggle the submenu for a split-button control
|
|
60
|
-
*/
|
|
61
|
-
private toggleSubMenu;
|
|
62
54
|
/**
|
|
63
55
|
* Select a sub-option and update the tool property
|
|
64
56
|
*/
|
|
@@ -552,6 +552,7 @@ export namespace Components {
|
|
|
552
552
|
}
|
|
553
553
|
interface KritzelTooltip {
|
|
554
554
|
"anchorElement": HTMLElement;
|
|
555
|
+
"close": () => Promise<void>;
|
|
555
556
|
"focusContent": () => Promise<void>;
|
|
556
557
|
/**
|
|
557
558
|
* @default false
|
|
@@ -561,6 +562,9 @@ export namespace Components {
|
|
|
561
562
|
* @default 24
|
|
562
563
|
*/
|
|
563
564
|
"offsetY": number;
|
|
565
|
+
"open": () => Promise<void>;
|
|
566
|
+
"toggle": () => Promise<void>;
|
|
567
|
+
"triggerElement": HTMLElement;
|
|
564
568
|
}
|
|
565
569
|
interface KritzelUtilityPanel {
|
|
566
570
|
/**
|
|
@@ -1191,6 +1195,7 @@ declare global {
|
|
|
1191
1195
|
};
|
|
1192
1196
|
interface HTMLKritzelTooltipElementEventMap {
|
|
1193
1197
|
"tooltipClosed": void;
|
|
1198
|
+
"tooltipOpened": void;
|
|
1194
1199
|
}
|
|
1195
1200
|
interface HTMLKritzelTooltipElement extends Components.KritzelTooltip, HTMLStencilElement {
|
|
1196
1201
|
addEventListener<K extends keyof HTMLKritzelTooltipElementEventMap>(type: K, listener: (this: HTMLKritzelTooltipElement, ev: KritzelTooltipCustomEvent<HTMLKritzelTooltipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -1804,6 +1809,8 @@ declare namespace LocalJSX {
|
|
|
1804
1809
|
*/
|
|
1805
1810
|
"offsetY"?: number;
|
|
1806
1811
|
"onTooltipClosed"?: (event: KritzelTooltipCustomEvent<void>) => void;
|
|
1812
|
+
"onTooltipOpened"?: (event: KritzelTooltipCustomEvent<void>) => void;
|
|
1813
|
+
"triggerElement"?: HTMLElement;
|
|
1807
1814
|
}
|
|
1808
1815
|
interface KritzelUtilityPanel {
|
|
1809
1816
|
"onDelete"?: (event: KritzelUtilityPanelCustomEvent<void>) => void;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{p as t,H as o,c as i,h as e,d as s,t as n}from"./p-Cj-I2_Og.js";import{K as l}from"./p-BML28BJR.js";const a=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=i(this,"tooltipClosed")}get host(){return this}isVisible=!1;anchorElement;offsetY=24;tooltipClosed;positionX=0;positionY=0;handleOutsideClick(t){this.isVisible&&(t.composedPath().some((t=>t===this.host))||this.tooltipClosed.emit())}handleOutsidePointerDown(t){this.isVisible&&(t.composedPath().some((t=>t===this.host))||(t.stopPropagation(),t.preventDefault(),this.tooltipClosed.emit()))}handleWindowResize(){this.calculateAdjustedPosition()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}componentDidLoad(){this.focusSlottedContent()}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}focusSlottedContent(){const t=this.host.shadowRoot?.querySelector("slot"),o=t?.assignedElements()||[];o.length>0&&o[0].focus()}calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),o=this.host.shadowRoot?.querySelector(".tooltip-content"),i=o?.getBoundingClientRect(),e=i?.width||0,s=12,n=window.innerWidth-e-s;this.positionX=Math.max(s,Math.min(t.left+t.width/2-e/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return e(s,{key:"d23199ba12acd84fe7fb7a3e133a6605b175bcec",style:{position:"fixed",zIndex:"9999",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out",visibility:this.isVisible?"visible":"hidden",left:`${this.positionX}px`,bottom:`${this.positionY}px`}},e("div",{key:"030ca8a36358b78ba726f7406e76cea16a4e75e9",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},e("slot",{key:"148ed867ee7962487d38f82e6d37b8599a7158af"})))}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[769,"kritzel-tooltip",{isVisible:[4,"is-visible"],anchorElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],focusContent:[64]},[[4,"click","handleOutsideClick"],[7,"pointerdown","handleOutsidePointerDown"],[9,"resize","handleWindowResize"]]]);function r(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),a))}))}export{a as K,r as d}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-Cj-I2_Og.js";import{h as n,e as s,g as c,f as a,i as d}from"./p-Dmy0R-7y.js";import{K as h}from"./p-l10It7Nm.js";import{K as p,d as k}from"./p-CYX7RMRZ.js";import{a as u}from"./p-BX4JyoOd.js";import{d as b}from"./p-BxK5ew4S.js";import{d as f}from"./p-WnxGQWr6.js";import{d as z}from"./p-DKDoQ9nc.js";import{d as g}from"./p-BNYfuHT_.js";import{d as m}from"./p-CwP7yBQP.js";import{d as v}from"./p-6USF_L1F.js";import{d as y}from"./p-Cpb-fnoO.js";import{d as x}from"./p-DnB4Srvo.js";import{d as w}from"./p-8uzm1dKV.js";import{d as C}from"./p-CJTKpwmi.js";import{d as T}from"./p-D_gY5jie.js";import{d as j}from"./p-BNT9uvII.js";import{d as S}from"./p-GeVIjnFi.js";const E=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme;isControlsReady;firstConfig=null;isTooltipVisible=!1;isTouchDevice=h.isTouchDevice();selectedSubOptions=new Map;openSubMenuControl=null;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleDocumentClick(t){this.kritzelEngine&&(t.composedPath().some((t=>{const o=t;return!!o.tagName&&("kritzel-tooltip"===o.tagName.toLowerCase()||o.classList?.contains("kritzel-tooltip"))}))||(this.isTooltipVisible=!1))}handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.openSubMenuControl=null,this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.controls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.isTooltipVisible=!1,this.openSubMenuControl=null}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){this.isTooltipVisible=!1}kritzelEngine=null;tooltipRef=null;toolsScrollRef=null;get activeToolAsTextTool(){return this.activeControl?.tool}get activeToolAsBrushTool(){return this.activeControl?.tool}get activeToolAsLineTool(){return this.activeControl?.tool}get activeToolAsShapeTool(){return this.activeControl?.tool}handleDisplayValuesChange=t=>{const o=t.detail;this.displayValues&&this.displayValues.color===o.color&&this.displayValues.size===o.size&&this.displayValues.fontFamily===o.fontFamily||(this.displayValues=o)};updateDisplayValues(t){const o=p.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:u.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof c&&(r.fontFamily=t.fontFamily),this.displayValues&&this.displayValues.color===r.color&&this.displayValues.size===r.size&&this.displayValues.fontFamily===r.fontFamily||(this.displayValues=r)}async componentWillLoad(){await this.initializeEngine(),await this.initializeTools(),this.isControlsReady.emit()}componentDidLoad(){this.updateScrollIndicators()}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef;this.canScrollLeft=t>2,this.canScrollRight=t+e<o-2,this.needsScrolling=o>e}handleToolsScroll=()=>{this.updateScrollIndicators()};async initializeEngine(){if(await customElements.whenDefined("kritzel-engine"),this.kritzelEngine=this.host.parentElement.querySelector("kritzel-engine"),!this.kritzelEngine)throw new Error("kritzel-engine not found in parent element.")}async initializeTools(){for(const t of this.controls)"tool"===t.type&&t.tool&&(t.tool=await this.kritzelEngine.registerTool(t.name,t.tool,t.config)),"tool"===t.type&&t.isDefault&&t.tool&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool)),"config"===t.type&&(null===this.firstConfig?this.firstConfig=t:console.warn("Only one config control is allowed. The first one will be used."))}async handleControlClick(t){this.activeControl=t,"tool"===this.activeControl.type&&(this.updateDisplayValues(this.activeControl.tool),await this.kritzelEngine.changeActiveTool(this.activeControl.tool))}handleConfigClick(t){t.stopPropagation(),this.isTooltipVisible=!this.isTooltipVisible,setTimeout((()=>{this.tooltipRef?.focusContent()}),100)}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}handleTooltipClosed(){this.isTooltipVisible=!1}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}toggleSubMenu(t,o){t.stopPropagation(),this.openSubMenuControl=this.openSubMenuControl?.name===o.name?null:o}async selectSubOption(t,o){const e=new Map(this.selectedSubOptions);e.set(t.name,o),this.selectedSubOptions=e,t.tool&&"function"!=typeof t.tool&&(t.tool[o.toolProperty]=o.value),this.openSubMenuControl=null,await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"cb713bc59241300837519145031c1d15109e28c3",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"62cb00da2676739aa472d69e8e453501bd78e408",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"0376615eb976d961cb17ba02aab36f4127343899",class:"kritzel-controls"},r("div",{key:"c72373afc1eb04fb39868d107cb0a35c846097fe",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"1aa1ece36dda200a4c62529c08f1787d8bd4b534",class:"kritzel-tools-scroll",ref:t=>{this.toolsScrollRef=t,t&&this.updateScrollIndicators()},onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name,i=this.openSubMenuControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),title:o?.label},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},onClick:o=>this.toggleSubMenu(o,t),"aria-label":"Select shape type","aria-expanded":i?"true":"false",tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{isVisible:i,anchorElement:t._anchorRef,onTooltipClosed:()=>{this.openSubMenuControl=null}},r("div",{class:"kritzel-submenu-content"},t.subOptions.map((e=>r("button",{class:{"kritzel-submenu-item":!0,active:e.id===o?.id},key:e.id,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,onClick:()=>this.handleControlClick?.(t)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"a3129881a9c992b6fbd94b66a6325d46072dba60",class:{"scroll-indicator-right":!0,visible:this.canScrollRight&&!(e&&this.activeControl&&t)}}),e&&this.activeControl&&r("div",{class:{"kritzel-config-container":!0,visible:t},key:e.name},r("div",{key:"57de6641291894b0e507e90987ea94a9103c25ca",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"182317753d162abe9c804a4757ed19505bb3b487",ref:t=>this.tooltipRef=t,isVisible:this.isTooltipVisible,anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),onTooltipClosed:()=>this.handleTooltipClosed()},r("kritzel-tool-config",{key:"13ecc34147d44b2bb12eb0008eec179db55f5840",tool:this.activeControl.tool,theme:this.theme,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"bc4053cf9feb69c2962fe5a86cd7cf811b03e971",tabIndex:t?0:-1,class:"kritzel-config",onClick:t=>this.handleConfigClick?.(t),onKeyDown:t=>{"Enter"===t.key&&this.handleConfigClick?.(t)},style:{cursor:"pointer"}},this.activeControl.tool instanceof c&&this.displayValues?r("div",{class:"font-container"},r("kritzel-font",{fontFamily:this.displayValues.fontFamily,size:this.displayValues.size,color:this.displayValues.color})):this.displayValues&&r("div",{class:"color-container"},r("kritzel-color",{value:this.displayValues.color,theme:this.theme,size:this.displayValues.size,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:calc(100vw - 16px)}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}"}},[513,"kritzel-controls",{controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],firstConfig:[32],isTooltipVisible:[32],isTouchDevice:[32],selectedSubOptions:[32],openSubMenuControl:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],closeTooltip:[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{theme:[{onThemeChange:0}]}]);function D(){"undefined"!=typeof customElements&&["kritzel-controls","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size","kritzel-tool-config","kritzel-tooltip","kritzel-utility-panel"].forEach((t=>{switch(t){case"kritzel-controls":customElements.get(l(t))||customElements.define(l(t),E);break;case"kritzel-color":customElements.get(l(t))||b();break;case"kritzel-color-palette":customElements.get(l(t))||f();break;case"kritzel-dropdown":customElements.get(l(t))||z();break;case"kritzel-font":customElements.get(l(t))||g();break;case"kritzel-font-family":customElements.get(l(t))||m();break;case"kritzel-font-size":customElements.get(l(t))||v();break;case"kritzel-icon":customElements.get(l(t))||y();break;case"kritzel-line-endings":customElements.get(l(t))||x();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||C();break;case"kritzel-stroke-size":customElements.get(l(t))||T();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||j();break;case"kritzel-utility-panel":customElements.get(l(t))||S()}}))}export{E as K,D as d}
|