kritzel-stencil 0.2.1 → 0.2.2
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/index.cjs.js +1 -1
- package/dist/cjs/kritzel-active-users_42.cjs.entry.js +80 -39
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/cjs/{workspace.migrations-TAWnOE7r.js → workspace.migrations-BPwtowiJ.js} +159 -22
- package/dist/collection/classes/core/core.class.js +27 -19
- package/dist/collection/classes/handlers/selection.handler.js +36 -2
- package/dist/collection/classes/objects/group.class.js +69 -12
- package/dist/collection/classes/tools/text-tool.class.js +44 -8
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +34 -17
- package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +23 -1
- package/dist/collection/constants/version.js +1 -1
- package/dist/collection/themes/dark-theme.js +5 -0
- package/dist/collection/themes/light-theme.js +5 -0
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-awareness-cursors.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.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-menu-item.js +1 -1
- package/dist/components/kritzel-menu.js +1 -1
- package/dist/components/kritzel-more-menu.js +1 -1
- package/dist/components/kritzel-portal.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-split-button.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-workspace-manager.js +1 -1
- package/dist/components/{p-CFzvz-B2.js → p-0YBCp8Wh.js} +1 -1
- package/dist/components/{p-DkT0CXfN.js → p-574MVXxi.js} +1 -1
- package/dist/components/p-BCzbwL4m.js +1 -0
- package/dist/components/p-BLjdzUzs.js +1 -0
- package/dist/components/{p-BFQVg_eQ.js → p-BSEdLfq2.js} +1 -1
- package/dist/components/{p-C3Dwuqka.js → p-BWrxz4mM.js} +1 -1
- package/dist/components/{p-ChqeIKg_.js → p-BYOIzv_f.js} +1 -1
- package/dist/components/{p-CekG3_ce.js → p-Bfa-Amjn.js} +1 -1
- package/dist/components/{p-mDz63oKF.js → p-BmcAX-1k.js} +1 -1
- package/dist/components/{p-CzIuqMQA.js → p-BtJB7FsW.js} +1 -1
- package/dist/components/{p-CVQBfO3r.js → p-C6Td7I4k.js} +1 -1
- package/dist/components/{p-ChQNi67Z.js → p-D9ifYAtg.js} +1 -1
- package/dist/components/{p-DoIOS3fS.js → p-DE2xDwUM.js} +1 -1
- package/dist/components/{p-B4wyWc66.js → p-DFeyobdy.js} +2 -2
- package/dist/components/{p--T9W9erA.js → p-DfB7uJ0N.js} +1 -1
- package/dist/components/{p-B2kHVHa_.js → p-u-827ZX7.js} +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/kritzel-active-users_42.entry.js +80 -39
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/esm/{workspace.migrations-Dta1Yewh.js → workspace.migrations-C_uxbvuH.js} +159 -22
- package/dist/stencil/index.esm.js +1 -1
- package/dist/stencil/{p-22753671.entry.js → p-4d28c496.entry.js} +2 -2
- package/dist/stencil/p-C_uxbvuH.js +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/handlers/selection.handler.d.ts +15 -0
- package/dist/types/classes/objects/group.class.d.ts +15 -0
- package/dist/types/classes/tools/text-tool.class.d.ts +26 -8
- package/dist/types/components/shared/kritzel-portal/kritzel-portal.d.ts +1 -0
- package/dist/types/constants/version.d.ts +1 -1
- package/dist/types/interfaces/theme.interface.d.ts +12 -4
- package/package.json +1 -1
- package/dist/components/p-BYX50YSd.js +0 -1
- package/dist/components/p-CjazGGq3.js +0 -1
- package/dist/stencil/p-Dta1Yewh.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as
|
|
1
|
+
import{K as s,d as o}from"./p-BLjdzUzs.js";const p=s,r=o;export{p as KritzelPortal,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as o,d as s}from"./p-
|
|
1
|
+
import{K as o,d as s}from"./p-DE2xDwUM.js";const p=o,r=s;export{p as KritzelSettings,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as o,d as s}from"./p-
|
|
1
|
+
import{K as o,d as s}from"./p-D9ifYAtg.js";const t=o,p=s;export{t as KritzelSplitButton,p as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as
|
|
1
|
+
import{K as s,d as o}from"./p-BtJB7FsW.js";const t=s,p=o;export{t as KritzelStrokeSize,p as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as o,d as
|
|
1
|
+
import{a as o,d as s}from"./p-DfB7uJ0N.js";const a=o,p=s;export{a as KritzelToolConfig,p as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{K as o,d as s}from"./p-
|
|
1
|
+
import{K as o,d as s}from"./p-BSEdLfq2.js";const p=o,r=s;export{p as KritzelWorkspaceManager,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as i,h as o,d as n,t as r}from"./p-BWj1eE2b.js";import{d as s}from"./p-A7Ult9iv.js";import{K as l}from"./p-jGOpkGDl.js";import{d as a}from"./p-BYX50YSd.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect"),this.itemSave=i(this,"itemSave"),this.itemCancel=i(this,"itemCancel"),this.itemToggleChildMenu=i(this,"itemToggleChildMenu"),this.itemCloseChildMenu=i(this,"itemCloseChildMenu")}get host(){return this}item;onItemChange(e,t){e!==t&&(this.isDirty=!1)}parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;isDirty=!1;inputRef;focusInput(){this.item.isEditing&&!this.isDirty&&requestAnimationFrame((()=>{if(this.inputRef)if(this.inputRef.focus(),l.isIOS()){const e=this.inputRef.value.length;this.inputRef.setSelectionRange(e,e)}else this.inputRef.select()}))}componentDidLoad(){this.setDeviceSpecificStyles(),this.focusInput()}componentDidUpdate(){this.focusInput()}setDeviceSpecificStyles=()=>{l.isTouchDevice()&&(this.host.style.setProperty("--kritzel-menu-item-overlay-background-color","transparent"),this.host.style.setProperty("--kritzel-menu-item-button-hover-background-color","transparent"))};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit({item:this.item,parent:this.parent})};handleInputChange=e=>{e.stopPropagation(),this.item.label=e.target.value,this.isDirty=!0};handleSave=e=>{e.stopPropagation(),this.host.focus(),this.itemSave.emit(this.item)};handleCancel=e=>{e.stopPropagation(),this.host.focus(),this.itemCancel.emit(this.item)};handleMenuToggle=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit({item:this.item,childMenuAnchor:e.target})};handleMenuClose=()=>{this.itemCloseChildMenu.emit(this.item)};renderViewMode(){return[o("div",{class:"menu-item-content left"},this.item.icon&&o("span",{title:this.item.iconTooltip},o("kritzel-icon",{name:this.item.icon,size:16,style:this.item.color?{"--kritzel-icon-color":this.item.color}:void 0})),o("div",{style:this.item.color?{color:this.item.color}:void 0},this.item.label)),o("div",{class:"menu-item-content right"},this.item.children&&this.item.children.length>0&&[o("button",{id:"child-menu-toggle",class:"action-button",onClick:this.handleMenuToggle,disabled:this.item.isDisabled},o("kritzel-icon",{name:"ellipsis-vertical",size:16})),o("kritzel-portal",{anchor:this.item.childMenuAnchor,offsetY:4,onClose:this.handleMenuClose},o("kritzel-menu",{items:this.item.children,parent:this.item,onItemSelect:e=>this.itemSelect.emit(e.detail),onItemSave:e=>this.itemSave.emit(e.detail),onItemCancel:e=>this.itemCancel.emit(e.detail),onClose:this.handleMenuClose}))])]}renderEditMode(){return[o("div",{class:"menu-item-content left"},o("input",{ref:e=>this.inputRef=e,type:"text",class:"edit-input",value:this.item.label,onInput:this.handleInputChange})),o("div",{class:"menu-item-content right"},o("div",{tabIndex:0,class:"action-button",onClick:this.handleCancel},o("kritzel-icon",{name:"x",size:16})),o("div",{tabIndex:this.isDirty||this.item.isNewItem?0:-1,class:{"action-button":!0,disabled:!this.isDirty&&!this.item.isNewItem},onClick:this.handleSave},o("kritzel-icon",{name:"check",size:16})))]}render(){return o(n,{key:"6fd639ff533e0b2c39febd369b4ba034661ec708",tabIndex:this.item.isDisabled?-1:0,class:{selected:this.item.isSelected,editing:this.item.isEditing,disabled:this.item.isDisabled,"child-open":this.item.isChildMenuOpen},onClick:this.handleItemSelect},o("div",{key:"d7486e9f1614be1801268fa97947aaab4c12460d",class:"menu-item-overlay"}),this.item.isEditing?this.renderEditMode():this.renderViewMode())}static get watchers(){return{item:[{onItemChange:0}]}}static get style(){return":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff);caret-color:var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);border-color:var(--kritzel-menu-item-input-border-color-on-selected, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));color:var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff)}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:var(--kritzel-menu-item-input-border, 1px solid #ccc);font-size:var(--kritzel-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none;color:inherit}.edit-input{caret-color:var(--kritzel-menu-item-input-caret-color, currentColor)}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}"}},[513,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},void 0,{item:[{onItemChange:0}]}]);function h(){"undefined"!=typeof customElements&&["kritzel-menu-item","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu-item":customElements.get(r(e))||customElements.define(r(e),c);break;case"kritzel-icon":customElements.get(r(e))||s();break;case"kritzel-menu":customElements.get(r(e))||d();break;case"kritzel-menu-item":customElements.get(r(e))||h();break;case"kritzel-portal":customElements.get(r(e))||a()}}))}const m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect"),this.itemSave=i(this,"itemSave"),this.itemCancel=i(this,"itemCancel"),this.itemToggleChildMenu=i(this,"itemToggleChildMenu"),this.itemCloseChildMenu=i(this,"itemCloseChildMenu"),this.close=i(this,"close")}get host(){return this}items;parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;close;selectedIndex=null;async setScrollTop(e){this.host.scrollTop=e,this.host.scrollTo({top:e,behavior:"auto"})}async setFocus(){const e=this.host.shadowRoot.querySelector("kritzel-menu-item");e&&e.focus()}get openChildMenuItem(){return this.items.find((e=>e.isChildMenuOpen))}get editingMenuItem(){return this.items.find((e=>e.isEditing))}onOverlayClick=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(this.openChildMenuItem)};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit(e.detail)};handleSave=e=>{e.stopPropagation(),this.itemSave.emit(e.detail)};handleCancel=e=>{e.stopPropagation(),this.itemCancel.emit(e.detail)};handleToggleChildMenu=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit(e.detail)};handleCloseChildMenu=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(e.detail)};render(){return o(n,{key:"a81ea8a1fe2dc6cb8d9f395cafbcadec3eb4aa45",tabIndex:0,onClick:e=>e.stopPropagation()},this.openChildMenuItem&&o("div",{key:"bb27d7a923431d79567e79283e505ea4ae02ef36",class:"has-open-child-overlay",onClick:this.onOverlayClick}),this.items.map((e=>o("kritzel-menu-item",{key:e.id,item:e,parent:this.parent,style:{pointerEvents:this.editingMenuItem&&!e.isEditing?"none":"auto"},onItemSelect:this.handleItemSelect,onItemSave:this.handleSave,onItemCancel:this.handleCancel,onItemToggleChildMenu:this.handleToggleChildMenu,onItemCloseChildMenu:this.handleCloseChildMenu}))))}static get style(){return":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;clip-path:inset(0 round var(--kritzel-menu-border-radius, 12px))}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}"}},[513,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu":customElements.get(r(e))||customElements.define(r(e),m);break;case"kritzel-icon":customElements.get(r(e))||s();break;case"kritzel-menu":customElements.get(r(e))||d();break;case"kritzel-menu-item":customElements.get(r(e))||h();break;case"kritzel-portal":customElements.get(r(e))||a()}}))}export{m as K,d as a,c as b,h as d}
|
|
1
|
+
import{p as e,H as t,c as i,h as o,d as n,t as r}from"./p-BWj1eE2b.js";import{d as s}from"./p-A7Ult9iv.js";import{K as l}from"./p-jGOpkGDl.js";import{d as a}from"./p-BLjdzUzs.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect"),this.itemSave=i(this,"itemSave"),this.itemCancel=i(this,"itemCancel"),this.itemToggleChildMenu=i(this,"itemToggleChildMenu"),this.itemCloseChildMenu=i(this,"itemCloseChildMenu")}get host(){return this}item;onItemChange(e,t){e!==t&&(this.isDirty=!1)}parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;isDirty=!1;inputRef;focusInput(){this.item.isEditing&&!this.isDirty&&requestAnimationFrame((()=>{if(this.inputRef)if(this.inputRef.focus(),l.isIOS()){const e=this.inputRef.value.length;this.inputRef.setSelectionRange(e,e)}else this.inputRef.select()}))}componentDidLoad(){this.setDeviceSpecificStyles(),this.focusInput()}componentDidUpdate(){this.focusInput()}setDeviceSpecificStyles=()=>{l.isTouchDevice()&&(this.host.style.setProperty("--kritzel-menu-item-overlay-background-color","transparent"),this.host.style.setProperty("--kritzel-menu-item-button-hover-background-color","transparent"))};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit({item:this.item,parent:this.parent})};handleInputChange=e=>{e.stopPropagation(),this.item.label=e.target.value,this.isDirty=!0};handleSave=e=>{e.stopPropagation(),this.host.focus(),this.itemSave.emit(this.item)};handleCancel=e=>{e.stopPropagation(),this.host.focus(),this.itemCancel.emit(this.item)};handleMenuToggle=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit({item:this.item,childMenuAnchor:e.target})};handleMenuClose=()=>{this.itemCloseChildMenu.emit(this.item)};renderViewMode(){return[o("div",{class:"menu-item-content left"},this.item.icon&&o("span",{title:this.item.iconTooltip},o("kritzel-icon",{name:this.item.icon,size:16,style:this.item.color?{"--kritzel-icon-color":this.item.color}:void 0})),o("div",{style:this.item.color?{color:this.item.color}:void 0},this.item.label)),o("div",{class:"menu-item-content right"},this.item.children&&this.item.children.length>0&&[o("button",{id:"child-menu-toggle",class:"action-button",onClick:this.handleMenuToggle,disabled:this.item.isDisabled},o("kritzel-icon",{name:"ellipsis-vertical",size:16})),o("kritzel-portal",{anchor:this.item.childMenuAnchor,offsetY:4,onClose:this.handleMenuClose},o("kritzel-menu",{items:this.item.children,parent:this.item,onItemSelect:e=>this.itemSelect.emit(e.detail),onItemSave:e=>this.itemSave.emit(e.detail),onItemCancel:e=>this.itemCancel.emit(e.detail),onClose:this.handleMenuClose}))])]}renderEditMode(){return[o("div",{class:"menu-item-content left"},o("input",{ref:e=>this.inputRef=e,type:"text",class:"edit-input",value:this.item.label,onInput:this.handleInputChange})),o("div",{class:"menu-item-content right"},o("div",{tabIndex:0,class:"action-button",onClick:this.handleCancel},o("kritzel-icon",{name:"x",size:16})),o("div",{tabIndex:this.isDirty||this.item.isNewItem?0:-1,class:{"action-button":!0,disabled:!this.isDirty&&!this.item.isNewItem},onClick:this.handleSave},o("kritzel-icon",{name:"check",size:16})))]}render(){return o(n,{key:"6fd639ff533e0b2c39febd369b4ba034661ec708",tabIndex:this.item.isDisabled?-1:0,class:{selected:this.item.isSelected,editing:this.item.isEditing,disabled:this.item.isDisabled,"child-open":this.item.isChildMenuOpen},onClick:this.handleItemSelect},o("div",{key:"d7486e9f1614be1801268fa97947aaab4c12460d",class:"menu-item-overlay"}),this.item.isEditing?this.renderEditMode():this.renderViewMode())}static get watchers(){return{item:[{onItemChange:0}]}}static get style(){return":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);-webkit-tap-highlight-color:transparent}:host:focus:not(:focus-visible){outline:none}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff);caret-color:var(--kritzel-menu-item-input-caret-color-on-selected, #ffffff);border-color:var(--kritzel-menu-item-input-border-color-on-selected, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color-on-selected, rgba(255, 255, 255, 0.3));color:var(--kritzel-menu-item-input-selection-text-color-on-selected, #ffffff)}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-background-color, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:var(--kritzel-menu-item-input-border, 1px solid #ccc);font-size:var(--kritzel-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none;color:inherit}.edit-input{caret-color:var(--kritzel-menu-item-input-caret-color, currentColor)}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}"}},[513,"kritzel-menu-item",{item:[16],parent:[16],isDirty:[32]},void 0,{item:[{onItemChange:0}]}]);function h(){"undefined"!=typeof customElements&&["kritzel-menu-item","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu-item":customElements.get(r(e))||customElements.define(r(e),c);break;case"kritzel-icon":customElements.get(r(e))||s();break;case"kritzel-menu":customElements.get(r(e))||d();break;case"kritzel-menu-item":customElements.get(r(e))||h();break;case"kritzel-portal":customElements.get(r(e))||a()}}))}const m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=i(this,"itemSelect"),this.itemSave=i(this,"itemSave"),this.itemCancel=i(this,"itemCancel"),this.itemToggleChildMenu=i(this,"itemToggleChildMenu"),this.itemCloseChildMenu=i(this,"itemCloseChildMenu"),this.close=i(this,"close")}get host(){return this}items;parent=null;itemSelect;itemSave;itemCancel;itemToggleChildMenu;itemCloseChildMenu;close;selectedIndex=null;async setScrollTop(e){this.host.scrollTop=e,this.host.scrollTo({top:e,behavior:"auto"})}async setFocus(){const e=this.host.shadowRoot.querySelector("kritzel-menu-item");e&&e.focus()}get openChildMenuItem(){return this.items.find((e=>e.isChildMenuOpen))}get editingMenuItem(){return this.items.find((e=>e.isEditing))}onOverlayClick=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(this.openChildMenuItem)};handleItemSelect=e=>{e.stopPropagation(),this.itemSelect.emit(e.detail)};handleSave=e=>{e.stopPropagation(),this.itemSave.emit(e.detail)};handleCancel=e=>{e.stopPropagation(),this.itemCancel.emit(e.detail)};handleToggleChildMenu=e=>{e.stopPropagation(),this.itemToggleChildMenu.emit(e.detail)};handleCloseChildMenu=e=>{e.stopPropagation(),this.itemCloseChildMenu.emit(e.detail)};render(){return o(n,{key:"a81ea8a1fe2dc6cb8d9f395cafbcadec3eb4aa45",tabIndex:0,onClick:e=>e.stopPropagation()},this.openChildMenuItem&&o("div",{key:"bb27d7a923431d79567e79283e505ea4ae02ef36",class:"has-open-child-overlay",onClick:this.onOverlayClick}),this.items.map((e=>o("kritzel-menu-item",{key:e.id,item:e,parent:this.parent,style:{pointerEvents:this.editingMenuItem&&!e.isEditing?"none":"auto"},onItemSelect:this.handleItemSelect,onItemSave:this.handleSave,onItemCancel:this.handleCancel,onItemToggleChildMenu:this.handleToggleChildMenu,onItemCloseChildMenu:this.handleCloseChildMenu}))))}static get style(){return":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;clip-path:inset(0 round var(--kritzel-menu-border-radius, 12px))}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}"}},[513,"kritzel-menu",{items:[16],parent:[16],selectedIndex:[32],setScrollTop:[64],setFocus:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-menu":customElements.get(r(e))||customElements.define(r(e),m);break;case"kritzel-icon":customElements.get(r(e))||s();break;case"kritzel-menu":customElements.get(r(e))||d();break;case"kritzel-menu-item":customElements.get(r(e))||h();break;case"kritzel-portal":customElements.get(r(e))||a()}}))}export{m as K,d as a,c as b,h as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,d as r,t as o}from"./p-BWj1eE2b.js";import{K as n,a}from"./p-
|
|
1
|
+
import{p as t,H as e,h as s,d as r,t as o}from"./p-BWj1eE2b.js";import{K as n,a}from"./p-u-827ZX7.js";const i=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}core;showEdgeIndicators=!0;edgeIndicatorPadding=8;remoteCursors=new Map;objectVersion=0;cleanupIntervalId;objectChangeRafId=null;componentDidLoad(){this.core.store.objects?.onAwarenessChange((t=>{this.handleAwarenessChange(t)})),this.core.store.objects?.onObjectsChange((()=>{this.handleRemoteObjectChange()})),this.cleanupIntervalId=setInterval((()=>{this.cleanupStaleCursors()}),3e3)}disconnectedCallback(){this.cleanupIntervalId&&clearInterval(this.cleanupIntervalId),null!==this.objectChangeRafId&&cancelAnimationFrame(this.objectChangeRafId)}handleAwarenessChange(t){const e=this.core.store.objects?.localClientId,s=Date.now(),r=new Map(this.remoteCursors),o=new Set;t.forEach(((t,n)=>{if(n===e)return;if(!t.user)return;o.add(n);const a=t.user,i=t.cursor,l=t.activeObjectId||null,c=t.selectionBox||null,d=r.get(n);r.set(n,{clientId:n,user:a,cursor:i,activeObjectId:l,selectionBox:c,lastUpdated:s,lastCursorMove:!d||!d.cursor!=!i||i&&d.cursor&&(i.x!==d.cursor.x||i.y!==d.cursor.y)?s:d?.lastCursorMove??s})}));for(const t of r.keys())o.has(t)||r.delete(t);this.remoteCursors=r}cleanupStaleCursors(){const t=Date.now();let e=!1;const s=new Map(this.remoteCursors);for(const[r,o]of s)t-o.lastUpdated>3e4?(s.delete(r),e=!0):!e&&t-o.lastCursorMove>1e4&&(e=!0);e&&(this.remoteCursors=s)}isStale(t){return Date.now()-t.lastCursorMove>1e4}hasActiveDrawingCursors(){for(const t of this.remoteCursors.values())if(t.activeObjectId)return!0;return!1}handleRemoteObjectChange(){this.hasActiveDrawingCursors()&&null===this.objectChangeRafId&&(this.objectChangeRafId=requestAnimationFrame((()=>{this.objectChangeRafId=null,this.objectVersion++})))}getActiveObjectTip(t){const e=this.core.store.objects?.findById(t);if(!e)return null;if(e instanceof n&&!e.isCompleted){const t=e.points[e.points.length-1];return t?{x:(t[0]-e.x)/e.scale+e.translateX,y:(t[1]-e.y)/e.scale+e.translateY}:null}return e instanceof a&&!e.isCompleted?{x:(e.endX-e.x)/e.scale+e.translateX,y:(e.endY-e.y)/e.scale+e.translateY}:null}worldToScreen(t,e){const{scale:s,translateX:r,translateY:o}=this.core.store.state;return{x:t*s+r,y:e*s+o}}isInViewport(t,e){const{viewportWidth:s,viewportHeight:r}=this.core.store.state;return t>=0&&t<=s&&e>=0&&e<=r}clampToEdge(t,e){const{viewportWidth:s,viewportHeight:r}=this.core.store.state,o=this.edgeIndicatorPadding,n=Math.max(o,Math.min(s-o,t)),a=Math.max(o,Math.min(r-o,e)),i=n-o,l=s-o-n,c=a-o;let d="top";const h=Math.min(i,l,c,r-o-a);return d=h===i?"left":h===l?"right":h===c?"top":"bottom",{x:n,y:a,angle:Math.atan2(e-a,t-n),edge:d}}getUserDisplayName(t){return t.displayName?t.displayName:t.firstName||t.lastName?[t.firstName,t.lastName].filter(Boolean).join(" "):"Unknown"}getInitials(t){const e=t.trim().split(/\s+/);return 0===e.length||1===e.length&&e[0].length<=1?t:1===e.length?e[0][0].toUpperCase():(e[0][0]+e[e.length-1][0]).toUpperCase()}render(){const t=Array.from(this.remoteCursors.values());return s(r,{key:"0f8678b0a96d80e12d2aa75f85af74a8737f836d"},t.map((t=>{if(!t.cursor)return null;let e,s=!1;if(t.activeObjectId){const r=this.getActiveObjectTip(t.activeObjectId);r?(s=!0,e=this.worldToScreen(r.x,r.y)):e=this.worldToScreen(t.cursor.x,t.cursor.y)}else e=this.worldToScreen(t.cursor.x,t.cursor.y);const r=this.isInViewport(e.x,e.y),o=this.isStale(t),n=t.user.color||"#6B7280";return r?this.renderCursor(t,e.x,e.y,n,o,s):this.showEdgeIndicators?this.renderEdgeIndicator(t,e.x,e.y,n,o,s):null})),t.map((t=>{if(!t.selectionBox)return null;const e=t.user.color||"#6B7280",r=t.selectionBox,o=this.worldToScreen(r.x,r.y),{scale:n}=this.core.store.state;return s("div",{key:`selection-box-${t.clientId}`,class:"remote-selection-box",style:{transform:`translate(${o.x}px, ${o.y}px)`,width:r.width*n+"px",height:r.height*n+"px",backgroundColor:`color-mix(in srgb, ${e} 20%, transparent)`,borderColor:`color-mix(in srgb, ${e} 50%, transparent)`}})})))}renderCursor(t,e,r,o,n,a){return s("div",{key:`cursor-${t.clientId}`,class:{"awareness-cursor":!0,stale:n,"tracking-object":a},style:{transform:`translate(${e}px, ${r}px)`}},s("svg",{class:"cursor-arrow",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{d:"M5 3L19 12L12 13L9 20L5 3Z",fill:o,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),s("span",{class:"cursor-label",style:{backgroundColor:o}},this.getUserDisplayName(t.user)))}renderEdgeIndicator(t,e,r,o,n,a){const i=this.clampToEdge(e,r),l=180*i.angle/Math.PI+90;let c=0,d=0;"left"===i.edge?c=20:"right"===i.edge?c=-20:"top"===i.edge?d=20:"bottom"===i.edge&&(d=-20);const h=this.getUserDisplayName(t.user);return s("div",{key:`edge-${t.clientId}`,class:{"edge-indicator":!0,stale:n,"tracking-object":a},style:{transform:`translate(${i.x}px, ${i.y}px)`}},s("svg",{class:{"edge-arrow":!0,stale:n},width:"16",height:"16",viewBox:"0 0 16 16",style:{transform:`rotate(${l}deg)`}},s("path",{d:"M8 1L14 13H2L8 1Z",fill:o,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),s("span",{class:"edge-label",style:{backgroundColor:o,transform:`translate(${c}px, ${d}px)`}},this.getInitials(h)))}static get style(){return":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out, height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}"}},[513,"kritzel-awareness-cursors",{core:[16],showEdgeIndicators:[4,"show-edge-indicators"],edgeIndicatorPadding:[2,"edge-indicator-padding"],remoteCursors:[32],objectVersion:[32]}]);function l(){"undefined"!=typeof customElements&&["kritzel-awareness-cursors"].forEach((t=>{"kritzel-awareness-cursors"===t&&(customElements.get(o(t))||customElements.define(o(t),i))}))}export{i as K,l as d}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const o=[{light:"#000000",dark:"#ffffff",label:"Primary"},{light:"#ff5252",dark:"#ff5252"},{light:"#ffbc00",dark:"#ffbc00"},{light:"#00c853",dark:"#00c853"},{light:"#0000FF",dark:"#0000FF"},{light:"#d500f9",dark:"#d500f9"},{light:"#fafafa",dark:"#212121",label:"Background"},{light:"#a52714",dark:"#a52714"},{light:"#ee8100",dark:"#ee8100"},{light:"#558b2f",dark:"#558b2f"},{light:"#01579b",dark:"#01579b"},{light:"#8e24aa",dark:"#8e24aa"},{light:"#90a4ae",dark:"#607d8b",label:"Neutral"},{light:"#ff4081",dark:"#ff4081"},{light:"#ff6e40",dark:"#ff6e40"},{light:"#aeea00",dark:"#aeea00"},{light:"#304ffe",dark:"#304ffe"},{light:"#7c4dff",dark:"#7c4dff"},{light:"#cfd8dc",dark:"#455a64"},{light:"#f8bbd0",dark:"#ec407a"},{light:"#ffccbc",dark:"#ff7043"},{light:"#f0f4c3",dark:"#c0ca33"},{light:"#9fa8da",dark:"#5c6bc0"},{light:"#d1c4e9",dark:"#9575cd"}],e={name:"light",global:{borderColor:"#ebebeb",dividerColor:"#e0e0e0",focusColor:"#333333",focusRingColor:"#333333",iconColor:"currentColor",scrollbarThumbColor:"#ebebeb",textPrimary:"#000000",textSecondary:"#333333"},pillTabs:{background:"#f0f0f0",tabBackground:"transparent",tabBackgroundHover:"rgba(0, 0, 0, 0.05)",tabBackgroundSelected:"#ffffff",tabShadowSelected:"0 1px 3px rgba(0, 0, 0, 0.1)",tabTextColor:"#666666",tabTextColorSelected:"#000000"},textInput:{background:"#ffffff",borderColor:"#dbdbdb",focusBorderColor:"#333333",hoverBorderColor:"#cccccc",labelColor:"#333333",placeholderColor:"#999999",selectionBackground:"#007AFF",selectionColor:"#ffffff",suffixBackground:"#f5f5f5",suffixColor:"#666666",textColor:"#333333"},selection:{borderColor:"#007AFF",handleColor:"#ffffff"},checkerboard:{colorDark:"#cccccc",colorLight:"#ffffff"},backToContent:{activeBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",color:"#000000",hoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)"},colorPalette:{circleBorderColor:"#dddcdc",hoverBackgroundColor:"#ebebeb",selectedBackgroundColor:"#ebebeb"},contextMenu:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 1px 6px rgba(0, 0, 0, 0.12)",dividerColor:"rgba(0, 0, 0, 0.1)",itemActiveBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",itemColor:"#333333",itemDisabledColor:"#aaaaaa",itemHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)"},controls:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",controlActiveBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",controlColor:"#000000",controlHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",controlSelectedBackgroundColor:"#007AFF",controlSelectedColor:"#ffffff"},currentUserDialog:{emailColor:"#666666",nameColor:"#333333"},dialog:{backdropColor:"rgba(0, 0, 0, 0.4)",backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 4px 24px rgba(0, 0, 0, 0.15)",closeButtonActiveBackground:"hsl(0, 0%, 0%, 8.6%)",closeButtonBackground:"transparent",closeButtonColor:"#333333",closeButtonHoverBackground:"hsl(0, 0%, 0%, 4.3%)",closeButtonHoverColor:"#000000",fontFamily:"inherit",footerBorder:"1px solid #ebebeb",headerBorder:"1px solid #ebebeb",titleColor:"#000000"},loginDialog:{buttonActiveBackground:"#ebebeb",buttonBackground:"#ffffff",buttonBorderColor:"#e0e0e0",buttonHoverBackground:"#f5f5f5",buttonHoverBorderColor:"#cccccc",buttonTextColor:"#333333",spinnerActiveColor:"#333333",spinnerColor:"#cccccc",subtitleColor:"#666666"},dropdown:{accentColor:"#007bff",background:"#ffffff",borderColor:"#dbdbdb",hoverBorderColor:"#cccccc",hoverBackgroundColor:"#f0f0f0",selectedBackgroundColor:"#007bff1a",textColor:"#333333"},engine:{backgroundColor:"#ffffff"},snap:{indicatorFill:"rgba(59, 130, 246, 0.3)",indicatorStroke:"#007bff",lineStroke:"rgba(0, 0, 0, 0.2)"},fontSize:{hoverBackgroundColor:"#ebebeb",selectedBackgroundColor:"#ebebeb",textColor:"#333333"},lineEndings:{hoverBackgroundColor:"#ebebeb",labelColor:"#666666",optionBackground:"#ffffff",selectedBackgroundColor:"#ebebeb"},masterDetail:{backButtonColor:"#333333",backgroundColor:"#ffffff",detailBackgroundColor:"#ffffff",detailFocusOutline:"2px solid #333333",menuBackgroundColor:"#ffffff",menuBorderRight:"1px solid #ebebeb",menuItemActiveBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",menuItemBackgroundColor:"transparent",menuItemChevronColor:"#aaaaaa",menuItemColor:"#333333",menuItemDisabledColor:"#aaaaaa",menuItemFocusOutline:"2px solid #333333",menuItemHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",menuItemSelectedBackgroundColor:"#007AFF",menuItemSelectedColor:"#ffffff",menuItemSelectedHoverBackgroundColor:"#007AFF"},menu:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",itemButtonHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",itemChildOpenBackgroundColor:"hsl(0, 0%, 0%, 3%)",itemColor:"#333333",itemEditingBackgroundColor:"#f0f0f0",itemInputBorder:"1px solid #333333",itemInputBorderColorOnSelected:"#ffffff",itemInputCaretColor:"#333333",itemInputCaretColorOnSelected:"#ffffff",itemInputSelectionColor:"#007aff",itemInputSelectionColorOnSelected:"rgba(255, 255, 255, 0.55)",itemInputSelectionTextColor:"#ffffff",itemInputSelectionTextColorOnSelected:"#ffffff",itemOverlayBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",itemSelectedBackgroundColor:"#007aff",itemSelectedColor:"#ffffff"},moreMenu:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",borderRadius:"12px",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",buttonActiveBackgroundColor:"hsl(0, 0%, 0%, 8.6%)",buttonColor:"#000000",buttonHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",innerBorderRadius:"12px"},numericInput:{focusBorderColor:"#333333",borderColor:"#dbdbdb",hoverBorderColor:"#cccccc",inputBackground:"#ffffff",labelColor:"#666666",selectionBackground:"#007AFF",selectionColor:"#ffffff",spinnerActiveBackground:"hsl(0, 0%, 0%, 8.6%)",spinnerBackground:"transparent",spinnerColor:"#333333",spinnerHoverBackground:"hsl(0, 0%, 0%, 4.3%)",textColor:"#333333"},opacitySlider:{activeColor:"#007AFF",thumbBorderColor:"#007AFF",thumbColor:"#ffffff",trackColor:"#e0e0e0"},settings:{contentHeadingColor:"#000000",contentTextColor:"#333333",descriptionColor:"#666666",labelColor:"#333333",shortcutItemBg:"#f8f8f8",shortcutKeyBg:"#ffffff",shortcutKeyBorder:"#e0e0e0",shortcutKeyColor:"#555555"},shapeFill:{hoverBackgroundColor:"#ebebeb",optionBackground:"#ffffff",selectedBackgroundColor:"#ebebeb"},shareDialog:{borderColor:"#e5e5e5",copyButtonBackground:"#ffffff",copyButtonColor:"#666666",copyButtonHoverBackground:"#e8e8e8",copyButtonHoverColor:"#333333",copySuccessBackground:"#d4edda",copySuccessColor:"#28a745",descriptionColor:"#666666",inputBackground:"#f5f5f5",inputBorderColor:"#e0e0e0",inputTextColor:"#333333",labelColor:"#333333",revokeButtonBorderColor:"#dc3545",revokeButtonColor:"#dc3545",revokeButtonHoverBackground:"#dc3545",revokeButtonHoverColor:"#ffffff",selectionColor:"#cce5ff"},slideToggle:{thumbColor:"#fff",thumbSize:"18px",trackCheckedColor:"#007AFF",trackColor:"#ccc"},splitButton:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 0 3px rgba(0, 0, 0, 0.08)",color:"#000000",dividerBackgroundColor:"#ebebeb",hoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)"},strokeSize:{hoverBackgroundColor:"#ebebeb",selectedBackgroundColor:"#ebebeb"},tooltip:{backgroundColor:"#ffffff",border:"1px solid #ebebeb",boxShadow:"0 1px 6px rgba(0, 0, 0, 0.12)",color:"#000000"},utilityPanel:{backgroundColor:"#e2e2e2",buttonColor:"#333333",buttonHoverBackgroundColor:"hsl(0, 0%, 0%, 4.3%)",separatorColor:"hsl(0, 0%, 0%, 8%)"}},r={name:"dark",global:{borderColor:"#3a3a3a",dividerColor:"#3a3a3a",focusColor:"#ffffff",focusRingColor:"#ffffff",iconColor:"currentColor",scrollbarThumbColor:"#555555",textPrimary:"#ffffff",textSecondary:"#e0e0e0"},pillTabs:{background:"#3a3a3a",tabBackground:"transparent",tabBackgroundHover:"rgba(255, 255, 255, 0.08)",tabBackgroundSelected:"#2a2a2a",tabShadowSelected:"0 1px 3px rgba(0, 0, 0, 0.3)",tabTextColor:"#999999",tabTextColorSelected:"#ffffff"},textInput:{background:"#1a1a1a",borderColor:"#4a4a4a",focusBorderColor:"#ffffff",hoverBorderColor:"#5a5a5a",labelColor:"#e0e0e0",placeholderColor:"#777777",selectionBackground:"#0A84FF",selectionColor:"#ffffff",suffixBackground:"#3a3a3a",suffixColor:"#aaaaaa",textColor:"#e0e0e0"},selection:{borderColor:"#0A84FF",handleColor:"#1a1a1a"},checkerboard:{colorDark:"#4a4a4a",colorLight:"#3a3a3a"},backToContent:{activeBackgroundColor:"hsl(0, 0%, 100%, 12%)",backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",color:"#ffffff",hoverBackgroundColor:"hsl(0, 0%, 100%, 8%)"},colorPalette:{circleBorderColor:"#4a4a4a",hoverBackgroundColor:"#3a3a3a",selectedBackgroundColor:"#3a3a3a"},contextMenu:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 1px 8px rgba(0, 0, 0, 0.4)",dividerColor:"rgba(255, 255, 255, 0.1)",itemActiveBackgroundColor:"hsl(0, 0%, 100%, 12%)",itemColor:"#e0e0e0",itemDisabledColor:"#666666",itemHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)"},controls:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",controlActiveBackgroundColor:"hsl(0, 0%, 100%, 12%)",controlColor:"#ffffff",controlHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",controlSelectedBackgroundColor:"#0A84FF",controlSelectedColor:"#ffffff"},currentUserDialog:{emailColor:"#999999",nameColor:"#ffffff"},dialog:{backdropColor:"rgba(0, 0, 0, 0.6)",backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 4px 24px rgba(0, 0, 0, 0.5)",closeButtonActiveBackground:"hsl(0, 0%, 100%, 12%)",closeButtonBackground:"transparent",closeButtonColor:"#e0e0e0",closeButtonHoverBackground:"hsl(0, 0%, 100%, 8%)",closeButtonHoverColor:"#ffffff",footerBorder:"1px solid #3a3a3a",headerBorder:"1px solid #3a3a3a",titleColor:"#ffffff"},loginDialog:{buttonActiveBackground:"#444444",buttonBackground:"#2a2a2a",buttonBorderColor:"#4a4a4a",buttonHoverBackground:"#3a3a3a",buttonHoverBorderColor:"#5a5a5a",buttonTextColor:"#e0e0e0",spinnerActiveColor:"#ffffff",spinnerColor:"#555555",subtitleColor:"#999999"},dropdown:{accentColor:"#0A84FF",borderColor:"#4a4a4a",hoverBorderColor:"#5a5a5a",background:"#1a1a1a",hoverBackgroundColor:"#3a3a3a",selectedBackgroundColor:"rgba(10, 132, 255, 0.2)",textColor:"#e0e0e0"},engine:{backgroundColor:"#1a1a1a"},snap:{indicatorFill:"rgba(10, 132, 255, 0.35)",indicatorStroke:"#0A84FF",lineStroke:"rgba(255, 255, 255, 0.35)"},fontSize:{hoverBackgroundColor:"#3a3a3a",selectedBackgroundColor:"#3a3a3a",textColor:"#e0e0e0"},lineEndings:{hoverBackgroundColor:"#3a3a3a",labelColor:"#999999",optionBackground:"#2a2a2a",selectedBackgroundColor:"#3a3a3a"},masterDetail:{backButtonColor:"#e0e0e0",backgroundColor:"#2a2a2a",detailBackgroundColor:"#2a2a2a",detailFocusOutline:"2px solid #ffffff",menuBackgroundColor:"#2a2a2a",menuBorderRight:"1px solid #3a3a3a",menuItemActiveBackgroundColor:"hsl(0, 0%, 100%, 12%)",menuItemBackgroundColor:"transparent",menuItemChevronColor:"#666666",menuItemColor:"#e0e0e0",menuItemDisabledColor:"#666666",menuItemFocusOutline:"2px solid #ffffff",menuItemHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",menuItemSelectedBackgroundColor:"#0A84FF",menuItemSelectedColor:"#ffffff",menuItemSelectedHoverBackgroundColor:"#0A84FF"},menu:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",itemButtonHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",itemChildOpenBackgroundColor:"hsl(0, 0%, 100%, 6%)",itemColor:"#e0e0e0",itemEditingBackgroundColor:"#3a3a3a",itemInputBorder:"1px solid #ffffff",itemInputBorderColorOnSelected:"#ffffff",itemInputCaretColor:"#e0e0e0",itemInputCaretColorOnSelected:"#ffffff",itemInputSelectionColor:"#b0b0b0",itemInputSelectionColorOnSelected:"rgba(255, 255, 255, 0.35)",itemInputSelectionTextColor:"#ffffff",itemInputSelectionTextColorOnSelected:"#ffffff",itemOverlayBackgroundColor:"hsl(0, 0%, 100%, 8%)",itemSelectedBackgroundColor:"#0A84FF",itemSelectedColor:"#ffffff"},moreMenu:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",borderRadius:"12px",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",buttonActiveBackgroundColor:"hsl(0, 0%, 100%, 12%)",buttonColor:"#ffffff",buttonHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",innerBorderRadius:"12px"},numericInput:{borderColor:"#4a4a4a",focusBorderColor:"#ffffff",hoverBorderColor:"#5a5a5a",inputBackground:"#1a1a1a",labelColor:"#999999",selectionBackground:"#0A84FF",selectionColor:"#ffffff",spinnerActiveBackground:"hsl(0, 0%, 100%, 12%)",spinnerBackground:"transparent",spinnerColor:"#e0e0e0",spinnerHoverBackground:"hsl(0, 0%, 100%, 8%)",textColor:"#e0e0e0"},opacitySlider:{activeColor:"#0A84FF",thumbBorderColor:"#0A84FF",thumbColor:"#ffffff",trackColor:"#4a4a4a"},settings:{contentHeadingColor:"#ffffff",contentTextColor:"#e0e0e0",descriptionColor:"#999999",labelColor:"#e0e0e0",shortcutItemBg:"#3a3a3a",shortcutKeyBg:"#2a2a2a",shortcutKeyBorder:"#4a4a4a",shortcutKeyColor:"#e0e0e0"},shapeFill:{hoverBackgroundColor:"#3a3a3a",optionBackground:"#2a2a2a",selectedBackgroundColor:"#3a3a3a"},shareDialog:{labelColor:"#e0e0e0",descriptionColor:"#e0e0e0",inputBackground:"#1a1a1a",inputBorderColor:"#4a4a4a",inputTextColor:"#e0e0e0",selectionColor:"#0A84FF",copyButtonBackground:"#2a2a2a",copyButtonColor:"#e0e0e0",copyButtonHoverBackground:"#3a3a3a",copyButtonHoverColor:"#ffffff",copySuccessBackground:"#28a745",copySuccessColor:"#ffffff"},slideToggle:{thumbColor:"#ffffff",trackCheckedColor:"#0A84FF",trackColor:"#4a4a4a",transitionDuration:"0.2s"},splitButton:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 0 6px rgba(0, 0, 0, 0.3)",color:"#ffffff",dividerBackgroundColor:"#3a3a3a",hoverBackgroundColor:"hsl(0, 0%, 100%, 8%)"},strokeSize:{hoverBackgroundColor:"#3a3a3a",selectedBackgroundColor:"#3a3a3a"},tooltip:{backgroundColor:"#2a2a2a",border:"1px solid #3a3a3a",boxShadow:"0 1px 8px rgba(0, 0, 0, 0.4)",color:"#ffffff"},utilityPanel:{backgroundColor:"#3a3a3a",buttonColor:"#e0e0e0",buttonHoverBackgroundColor:"hsl(0, 0%, 100%, 8%)",separatorColor:"hsl(0, 0%, 100%, 12%)"}};class a{static camelToKebab(o){return o.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}static flattenThemeToVariables(o,e="--kritzel"){const r=new Map,t=(o,e,l=!1)=>{for(const[f,n]of Object.entries(o)){if(l&&"name"===f)continue;const o=`${e}-${a.camelToKebab(f)}`;"object"==typeof n&&null!==n?t(n,o):"string"==typeof n&&r.set(o,n)}};return t(o,e,!0),r}static applyVariablesToElement(o,e){for(const[r,a]of e)o.style.setProperty(r,a)}static applyThemeToElement(o,e){const r=a.flattenThemeToVariables(e);a.applyVariablesToElement(o,r)}}const t="kritzel-theme",l="light";class f{_core;_currentTheme=l;_targetElement=null;_storageKey;constructor(o){this._core=o,this._storageKey=o.editorId?`${t}-${o.editorId}`:t,this._currentTheme=this.getStoredTheme()}get currentTheme(){return this._currentTheme}setTargetElement(o){this._targetElement=o,this._targetElement&&this.applyTheme(this._currentTheme)}getTargetElement(){return this._targetElement}getThemeByName(o){return"dark"===o?r:e}getStoredTheme(){if("undefined"==typeof localStorage)return l;const o=localStorage.getItem(this._storageKey);return"dark"===o||"light"===o?o:l}static getStoredTheme(){if("undefined"==typeof localStorage)return l;const o=localStorage.getItem(t);return"dark"===o||"light"===o?o:l}saveTheme(o){"undefined"!=typeof localStorage&&localStorage.setItem(this._storageKey,o)}setTheme(o){this._currentTheme=o,this.saveTheme(o),this._targetElement&&this.applyTheme(o)}isDarkTheme(){return"dark"===this._currentTheme}applyTheme(o){if(!this._targetElement)return;const e=this.getThemeByName(o);a.applyThemeToElement(this._targetElement,e)}cleanup(){this._targetElement=null}}class n{static resolveThemeColor(o,e){return o?function(o,e){return o[e]}(o,e??f.getStoredTheme()):""}static applyOpacity(o,e,r){const a=this.resolveThemeColor(o,r);if(!a||e>=1)return a;const t=a.startsWith("#")?a.slice(1):a;let l,f,n;if(3===t.length)l=parseInt(t[0]+t[0],16),f=parseInt(t[1]+t[1],16),n=parseInt(t[2]+t[2],16);else{if(6!==t.length)return a;l=parseInt(t.substring(0,2),16),f=parseInt(t.substring(2,4),16),n=parseInt(t.substring(4,6),16)}return isNaN(l)||isNaN(f)||isNaN(n)?a:`rgba(${l}, ${f}, ${n}, ${e})`}static getContrastColor(o){const e=o.startsWith("#")?o.slice(1):o;let r,a,t;if(3===e.length)r=parseInt(e[0]+e[0],16),a=parseInt(e[1]+e[1],16),t=parseInt(e[2]+e[2],16);else{if(6!==e.length)return"#000000";r=parseInt(e.substring(0,2),16),a=parseInt(e.substring(2,4),16),t=parseInt(e.substring(4,6),16)}return isNaN(r)||isNaN(a)||isNaN(t)||.299*r+.587*a+.114*t>150?"#000000":"#ffffff"}static determineTextColor(o){const e="transparent"===o.light,r="transparent"===o.dark;return e&&r?{light:"#000000",dark:"#ffffff"}:{light:e?"#000000":this.getContrastColor(o.light),dark:r?"#ffffff":this.getContrastColor(o.dark)}}}export{o as D,f as K,n as a,r as d,e as l}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{p as t,H as s,c as i,h as e,d as n,t as h}from"./p-BWj1eE2b.js";import{O as o}from"./p-BAN5dnHX.js";import{K as r}from"./p-BML28BJR.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.close=i(this,"close")}get host(){return this}anchor;anchorChanged(t){t?(this.openPortal(),requestAnimationFrame((()=>{this.calculatePosition(),this.autoFocus&&this.focusFirstElement()}))):this.closePortal()}offsetX;offsetY;autoFocus=!0;close;handleDismissMenus(){this.portal&&(this.close.emit(),this.closePortal())}handleOutsideClick(t){this.lastAddedPortal===this.portal&&(this.host.contains(t.target)||(this.close.emit(),this.closePortal()))}handleOutsidePointerDown(t){if(!this.portal)return;if(this.lastAddedPortal!==this.portal)return;const s=t.composedPath(),i=s.some((t=>t===this.host)),e=this.anchor&&s.some((t=>t===this.anchor));i||e||(t.stopPropagation(),t.preventDefault(),this.close.emit(),this.closePortal())}handleKeyDown(t){if(this.lastAddedPortal===this.portal){if("Escape"===t.key)return t.stopPropagation(),this.anchor.focus(),this.close.emit(),void this.closePortal();if("Tab"!==t.key){if("Enter"===t.key){const s=this.getDeepActiveElement();s?.click&&(t.preventDefault(),s.click())}}else this.trapFocus(t)}}handleResize(){this.calculatePosition()}handleWindowScroll(){if(!r.isElementInViewport(this.anchor))return this.anchor?.blur(),void this.closePortal();this.calculatePosition()}portal;id=`portal-${o.generateUUID()}`;defaultOffset=0;minLeft=0;themeObserver;focusFirstElement(){requestAnimationFrame((()=>{this.firstFocusableElement?.focus?.()}))}getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}trapFocus(t){const s=r.getFocusableElements(this.host);if(0===s.length)return;const i=s[0],e=s[s.length-1],n=this.getDeepActiveElement();t.shiftKey?n===i&&(e.focus(),t.preventDefault()):n===e&&(i.focus(),t.preventDefault())}get firstFocusableElement(){const t=this.host.shadowRoot?.querySelector("slot"),s=t?.assignedElements({flatten:!0})[0];return s?r.getFocusableElements(s)[0]??s:null}get lastAddedPortal(){const t=Array.from(document.querySelectorAll('[id^="portal-"]'));return t.length?t[t.length-1]:null}calculateLeft(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetX??this.defaultOffset;let e;e=t.left+t.width/2>window.innerWidth/2?t.right-s.width-i:t.left+i;const n=window.innerWidth-s.width-this.minLeft;return e<this.minLeft&&(e=this.minLeft),e>n&&(e=n),Math.round(e+window.scrollX)}calculateTop(){if(!this.anchor||!this.portal)return 0;const t=this.anchor.getBoundingClientRect(),s=this.portal.getBoundingClientRect(),i=this.offsetY??this.defaultOffset;let e=t.bottom+i;const n=window.innerHeight-t.bottom-i-8,h=t.top-i-8;return this.host.style.removeProperty("--kritzel-portal-max-height"),s.height<=n?e=t.bottom+i:s.height<=h?e=t.top-s.height-i:n>=h?(e=t.bottom+i,this.host.style.setProperty("--kritzel-portal-max-height",`${n}px`)):(e=8,this.host.style.setProperty("--kritzel-portal-max-height",`${h}px`)),Math.round(e+window.scrollY)}getThemeProvider(){if(!this.anchor)return null;let t=this.anchor;for(;t;){const i=t.closest("kritzel-editor");if(i instanceof s)return i;const e=t.closest('[id^="portal-"]');if(e instanceof s)return e;const n=t.getRootNode();if(!(n instanceof ShadowRoot))return null;t=n.host}return null}openPortal(){this.portal=document.createElement("div"),this.portal.setAttribute("id",this.id),this.portal.style.zIndex="1",this.portal.style.position="absolute",this.portal.style.top="0px",this.portal.style.left="0px",this.portal.style.visibility="hidden";const t=this.getThemeProvider();if(t){const s=()=>{if(this.portal)for(let s=0;s<t.style.length;s++){const i=t.style[s];i.startsWith("--kritzel-")&&this.portal.style.setProperty(i,t.style.getPropertyValue(i))}};s(),this.themeObserver=new MutationObserver((()=>s())),this.themeObserver.observe(t,{attributes:!0,attributeFilter:["style"]})}this.portal.appendChild(this.host),document.body.append(this.portal)}closePortal(){this.themeObserver?.disconnect(),this.themeObserver=null;const t=document.getElementById(this.id);t&&(document.body.removeChild(t),this.host.remove())}calculatePosition(){if(!this.anchor||!this.portal)return;const t=this.calculateTop(),s=this.calculateLeft();this.portal.style.top=`${t}px`,this.portal.style.left=`${s}px`,this.portal.style.visibility="visible"}render(){return e(n,{key:"dcd8e6f3787c713012aeb6436bf63f2f4930c39e",style:{display:this.anchor?"block":"none"}},e("slot",{key:"830f51521a77f0a28471026494323e14ab4f9f9a"}))}static get watchers(){return{anchor:[{anchorChanged:0}]}}},[769,"kritzel-portal",{anchor:[16],offsetX:[2,"offset-x"],offsetY:[2,"offset-y"],autoFocus:[4,"auto-focus"]},[[8,"kritzel-dismiss-menus","handleDismissMenus"],[8,"click","handleOutsideClick"],[6,"pointerdown","handleOutsidePointerDown"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{anchor:[{anchorChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-portal"].forEach((t=>{"kritzel-portal"===t&&(customElements.get(h(t))||customElements.define(h(t),l))}))}export{l as K,a as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as i,h as s,d as n,t as l}from"./p-BWj1eE2b.js";import{K as a}from"./p-DhMlShij.js";import{O as o}from"./p-BAN5dnHX.js";import{d as h}from"./p-A7Ult9iv.js";import{d as r,a as c}from"./p-
|
|
1
|
+
import{p as e,H as t,c as i,h as s,d as n,t as l}from"./p-BWj1eE2b.js";import{K as a}from"./p-DhMlShij.js";import{O as o}from"./p-BAN5dnHX.js";import{d as h}from"./p-A7Ult9iv.js";import{d as r,a as c}from"./p-0YBCp8Wh.js";import{d as u}from"./p-BLjdzUzs.js";import{d as m}from"./p-D9ifYAtg.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.isWorkspaceManagerReady=i(this,"isWorkspaceManagerReady"),this.workspaceChange=i(this,"workspaceChange")}get host(){return this}visible=!1;activeWorkspace;workspaces=[];isWorkspaceManagerReady;workspaceChange;childMenuAnchor=null;openChildMenuItem=null;newWorkspace=null;editingItemId=null;handleWheel(e){e.ctrlKey&&e.preventDefault()}kritzelEngineRef=null;splitButtonRef;get sortedWorkspaces(){return[this.newWorkspace,...this.workspaces].filter((e=>null!=e)).sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime()))}async componentWillLoad(){await this.initializeEngine(),this.isWorkspaceManagerReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");const e=this.host.closest("kritzel-editor");this.kritzelEngineRef=e?.querySelector("kritzel-engine")??null,this.kritzelEngineRef||console.warn("kritzel-engine not found in kritzel-editor.")}async select(e,t){this.editingItemId||(e.action?e.action(e,t):this.workspaceChange.emit(e.value))}async add(){await this.splitButtonRef.open(),this.newWorkspace=new a(o.generateUUID(),"New Workspace"),this.editingItemId=this.newWorkspace.id}edit(e){this.openChildMenuItem=null,this.childMenuAnchor=null,requestAnimationFrame((()=>{this.editingItemId=e.id}))}async save(e){if(this.newWorkspace)this.newWorkspace.name=e.label,await(this.kritzelEngineRef?.createWorkspace(this.newWorkspace)),this.workspaceChange.emit(this.newWorkspace);else{const t=e.value;t.name=e.label,await(this.kritzelEngineRef?.updateWorkspace(t))}this.editingItemId=null,this.newWorkspace=null}cancel(){this.newWorkspace=null,this.editingItemId=null}async delete(e){this.openChildMenuItem=null,this.childMenuAnchor=null,await(this.kritzelEngineRef?.deleteWorkspace(e.value)),e.value.id===this.activeWorkspace?.id&&(this.activeWorkspace=this.sortedWorkspaces.find((t=>t.id!==e.value.id))||null,this.workspaceChange.emit(this.activeWorkspace)),await this.splitButtonRef.focusMenu()}toggleChildMenu(e,t){this.openChildMenuItem=e,this.childMenuAnchor=t}closeChildMenu(){this.openChildMenuItem=null,this.childMenuAnchor=null}handleMenuOpen(){}handleMenuClose(){this.cancel(),this.closeChildMenu()}render(){const e=this.sortedWorkspaces.sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime())).filter((e=>null!==e)).map((e=>({id:e.id,label:e.name,icon:e.isPublic?"users-round":void 0,iconTooltip:e.isPublic?"Shared workspace":void 0,value:e,isEditing:this.editingItemId===e.id,isSelected:this.activeWorkspace?.id===e.id,isNewItem:this.newWorkspace?.id===e.id,isChildMenuOpen:this.openChildMenuItem?.id===e.id,childMenuAnchor:this.openChildMenuItem?.id===e.id?this.childMenuAnchor:null,children:[{id:`${e.id}-rename`,label:"Rename",value:"rename",action:(e,t)=>this.edit(t)},{id:`${e.id}-delete`,label:"Delete",value:"delete",isDisabled:this.sortedWorkspaces.length<=1,action:(e,t)=>this.delete(t)}]})));return s(n,null,s("div",{class:{manager:!0,visible:this.visible}},s("kritzel-split-button",{ref:e=>this.splitButtonRef=e,items:e,mainButtonDisabled:null!=this.editingItemId,onMainButtonClick:()=>this.add(),onItemSelect:e=>this.select(e.detail.item,e.detail.parent),onItemToggleChildMenu:e=>this.toggleChildMenu(e.detail.item,e.detail.childMenuAnchor),onItemSave:e=>this.save(e.detail),onItemCancel:()=>this.cancel(),onItemCloseChildMenu:()=>this.closeChildMenu(),onMenuOpen:()=>this.handleMenuOpen(),onMenuClose:()=>this.handleMenuClose()})))}static get style(){return":host{display:flex;flex-direction:column;z-index:1}.manager{opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.manager.visible{opacity:1;pointer-events:auto}"}},[513,"kritzel-workspace-manager",{visible:[4],activeWorkspace:[1040],workspaces:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]]);function p(){"undefined"!=typeof customElements&&["kritzel-workspace-manager","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button"].forEach((e=>{switch(e){case"kritzel-workspace-manager":customElements.get(l(e))||customElements.define(l(e),d);break;case"kritzel-icon":customElements.get(l(e))||h();break;case"kritzel-menu":customElements.get(l(e))||c();break;case"kritzel-menu-item":customElements.get(l(e))||r();break;case"kritzel-portal":customElements.get(l(e))||u();break;case"kritzel-split-button":customElements.get(l(e))||m()}}))}export{d as K,p as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as o,h as r,d as s,t as i}from"./p-BWj1eE2b.js";import{a as l}from"./p-
|
|
1
|
+
import{p as e,H as t,c as o,h as r,d as s,t as i}from"./p-BWj1eE2b.js";import{a as l}from"./p-BCzbwL4m.js";import{d as a}from"./p-Bfa-Amjn.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.colorChange=o(this,"colorChange")}colors=[];selectedColor=null;isExpanded=!1;isOpaque=!1;opacity=1;theme;colorChange;handleColorClick(e){this.selectedColor=e,this.colorChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleColorClick(t))}calculateHeight(){const e=Math.ceil(this.colors.length/6);return 32*e+8*(e-1)+"px"}areColorsEqual(e,t){return!!e&&e.light===t.light&&e.dark===t.dark}render(){const e=this.isExpanded?this.colors:this.colors.slice(0,6),t=this.isExpanded?this.calculateHeight():"32px";return r(s,{key:"a2c996d16a44f66471f6f76e08129142fc9f5ddb"},r("div",{key:"245f4b9ff50412b84ede221d22b0894a104a6895",class:{"color-grid":!0,expanded:this.isExpanded},style:{height:t}},e.map((e=>r("div",{tabIndex:0,class:{"color-container":!0,selected:this.areColorsEqual(this.selectedColor,e)},onClick:()=>this.handleColorClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},r("kritzel-color",{value:l.applyOpacity(e,this.opacity,this.theme),theme:this.theme}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.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}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}"}},[513,"kritzel-color-palette",{colors:[16],selectedColor:[1040],isExpanded:[4,"is-expanded"],isOpaque:[4,"is-opaque"],opacity:[2],theme:[1]}]);function n(){"undefined"!=typeof customElements&&["kritzel-color-palette","kritzel-color"].forEach((e=>{switch(e){case"kritzel-color-palette":customElements.get(i(e))||customElements.define(i(e),c);break;case"kritzel-color":customElements.get(i(e))||a()}}))}export{c as K,n as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as r,h as o,d as n,t as i}from"./p-BWj1eE2b.js";import{K as s}from"./p-jGOpkGDl.js";import{d as a}from"./p-A7Ult9iv.js";import{d as c,a as l}from"./p-
|
|
1
|
+
import{p as e,H as t,c as r,h as o,d as n,t as i}from"./p-BWj1eE2b.js";import{K as s}from"./p-jGOpkGDl.js";import{d as a}from"./p-A7Ult9iv.js";import{d as c,a as l}from"./p-0YBCp8Wh.js";import{d as m}from"./p-BLjdzUzs.js";const u=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.itemSelect=r(this,"itemSelect")}get host(){return this}visible=!1;items=[];icon="ellipsis-vertical";iconSize=24;offsetY=4;itemSelect;menuAnchor=null;isTouchDevice=s.isTouchDevice();toggleMenu=e=>{e.stopPropagation(),this.menuAnchor?this.closeMenu():(window.dispatchEvent(new CustomEvent("kritzel-dismiss-menus")),this.menuAnchor=this.host)};closeMenu=()=>{this.menuAnchor=null};get visibleItems(){return this.items.filter((e=>!1!==e.isVisible))}handleMenuItemSelect=e=>{const{item:t,parent:r}=e.detail;t.action&&t.action(t,r),this.itemSelect.emit(e.detail),this.closeMenu()};render(){return o(n,{key:"1bf8b30bc9c958911e544121db01d74948fb2695",class:{mobile:this.isTouchDevice}},o("div",{key:"3aab8140694f15db066f7c46f243ebc29fb698c1",class:{"more-menu-wrapper":!0,visible:this.visible}},o("button",{key:"55799f62f7bf72af751362315d38dc8b226c0950",class:"more-menu-button",onClick:this.toggleMenu},o("kritzel-icon",{key:"ee627acfcad95a1a978fb3c46d428181bbcb98c1",name:this.icon,size:this.iconSize})),o("kritzel-portal",{key:"e4116b6583e34dd915ffb46ee3b7377ea2ff10e8",anchor:this.menuAnchor,offsetY:this.offsetY,onClose:this.closeMenu},o("kritzel-menu",{key:"a9f50ddf822b14bad8723c67a202dcaa257b817a",items:this.visibleItems,onItemSelect:this.handleMenuItemSelect}))))}static get style(){return":host{display:inline-flex}.more-menu-wrapper{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.more-menu-wrapper.visible{opacity:1;pointer-events:auto}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}"}},[513,"kritzel-more-menu",{visible:[4],items:[16],icon:[1],iconSize:[2,"icon-size"],offsetY:[2,"offset-y"],menuAnchor:[32],isTouchDevice:[32]}]);function b(){"undefined"!=typeof customElements&&["kritzel-more-menu","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal"].forEach((e=>{switch(e){case"kritzel-more-menu":customElements.get(i(e))||customElements.define(i(e),u);break;case"kritzel-icon":customElements.get(i(e))||a();break;case"kritzel-menu":customElements.get(i(e))||l();break;case"kritzel-menu-item":customElements.get(i(e))||c();break;case"kritzel-portal":customElements.get(i(e))||m()}}))}export{u as K,b as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as r,h as t,d as i,t as o}from"./p-BWj1eE2b.js";import{a as s}from"./p-
|
|
1
|
+
import{p as e,H as r,h as t,d as i,t as o}from"./p-BWj1eE2b.js";import{a as s}from"./p-BCzbwL4m.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}value;theme;size=24;resolveColor(){return this.value?"string"==typeof this.value?this.value:s.resolveThemeColor(this.value,this.theme):""}isLightColor(e){if(!e)return!1;let r=0,t=0,i=0,o=e.startsWith("#")?e.slice(1):e;if(3===o.length)r=parseInt(o[0]+o[0],16),t=parseInt(o[1]+o[1],16),i=parseInt(o[2]+o[2],16);else{if(6!==o.length)return!1;r=parseInt(o.substring(0,2),16),t=parseInt(o.substring(2,4),16),i=parseInt(o.substring(4,6),16)}return!(isNaN(r)||isNaN(t)||isNaN(i))&&.299*r+.587*t+.114*i>220}render(){const e=this.resolveColor(),r=this.isLightColor(e);return t(i,{key:"a740b94f2baacb978b26deae1ea1057c7faf9036"},t("div",{key:"e82f83a23e44a2ff23b5efbfac28e4c47cd5b749",class:"checkerboard-bg",style:{width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",display:"inline-block",position:"relative"}},t("div",{key:"d83e2be171f89ee4cd53e8cf83ab6591f585129f",class:{"color-circle":!0,white:r},style:{backgroundColor:e,width:`${this.size}px`,height:`${this.size}px`,borderRadius:"50%",position:"absolute",top:"0",left:"0",display:"inline-block"}})))}static get style(){return":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient( var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%, var(--kritzel-checkerboard-color-light, #fff) 0% 50% ) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}"}},[513,"kritzel-color",{value:[1],theme:[1],size:[2]}]);function a(){"undefined"!=typeof customElements&&["kritzel-color"].forEach((e=>{"kritzel-color"===e&&(customElements.get(o(e))||customElements.define(o(e),c))}))}export{c as K,a as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-BWj1eE2b.js";import{h as n,d as s,f as a,e as c,g as d}from"./p-CVQBfO3r.js";import{K as p}from"./p-jGOpkGDl.js";import{K as h,d as k}from"./p--T9W9erA.js";import{a as f}from"./p-CjazGGq3.js";import{d as u}from"./p-CekG3_ce.js";import{d as b}from"./p-C3Dwuqka.js";import{d as g}from"./p-CBTqCoUx.js";import{d as z}from"./p-C4vg_-vg.js";import{d as m}from"./p-qBqQhAmh.js";import{d as v}from"./p-DDBaFNFi.js";import{d as x}from"./p-A7Ult9iv.js";import{d as y}from"./p-D6KNaj_Y.js";import{d as w}from"./p-DemKKw9U.js";import{d as C}from"./p-DEd2L0e3.js";import{d as j}from"./p-CzIuqMQA.js";import{d as E}from"./p-0cs6zQLB.js";import{d as T}from"./p-mYhFNPgz.js";const S=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;isTouchDevice=p.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),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.closeTooltip()}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll"))}kritzelEngine=null;toolsScrollRef=null;configTriggerRef=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=h.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:f.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof a&&(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()}componentDidRender(){this.updateScrollIndicators()}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef,r=t>2,i=t+e<o-2,l=o>e;this.canScrollLeft!==r&&(this.canScrollLeft=r),this.canScrollRight!==i&&(this.canScrollRight=i),this.needsScrolling!==l&&(this.needsScrolling=l)}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))}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}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.closeTooltip(),await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"ea5e17d6995c228862b6d3375213b8f4ff05f04b",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"3296551d078f9d358efff1438fdcf723349fa5e1",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:"9cbea189d5875cda4f09dc7228345e0cb268d47d",class:"kritzel-controls"},r("div",{key:"0df655a7ac5bd6bc164b82703bc212b480058ba2",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"bc16b645b6c6a12ec6bd8420a8d84aee83d2b6d2",class:"kritzel-tools-scroll",ref:t=>this.toolsScrollRef=t,onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,"data-testid":`tool-${t.name}`,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),title:o?.label,"data-testid":`tool-${t.name}-main`},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},ref:o=>{o&&(t._triggerRef=o)},"aria-label":"Select shape type","data-testid":`tool-${t.name}-dropdown`,tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{anchorElement:t._anchorRef,triggerElement:t._triggerRef},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,"data-testid":`suboption-${e.id}`,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return"separator"===t.type?r("div",{class:"kritzel-control-separator",key:t.name}):r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,"data-testid":`tool-${t.name}`,onClick:()=>this.handleControlClick?.(t)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"2e0824a991997d52168a3d922c2214ed66f5bf57",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:"d2cb554f56ce0f3bfe72e85fcbb506199387c15f",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"39412859a99c71b536e0b2ed0045b671a975af7e",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"1977ceddd337df53e8636e2bddd1d928aca3a1ff",tool:this.activeControl.tool,theme:this.theme,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"06bd3bf3558931a0c2317e149d8990f42e77adae",tabIndex:t?0:-1,class:"kritzel-config","data-testid":"tool-config",ref:t=>{t&&(this.configTriggerRef=t)},onKeyDown:t=>{"Enter"===t.key&&t.target.click()},style:{cursor:"pointer"}},this.activeControl.tool instanceof a&&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-separator{width:1px;height:24px;background-color:var(--kritzel-controls-border, #ebebeb);margin:0 4px}.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],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}]}]);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),S);break;case"kritzel-color":customElements.get(l(t))||u();break;case"kritzel-color-palette":customElements.get(l(t))||b();break;case"kritzel-dropdown":customElements.get(l(t))||g();break;case"kritzel-font":customElements.get(l(t))||z();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))||x();break;case"kritzel-line-endings":customElements.get(l(t))||y();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))||j();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||E();break;case"kritzel-utility-panel":customElements.get(l(t))||T()}}))}export{S as K,D as d}
|
|
1
|
+
import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-BWj1eE2b.js";import{h as n,d as s,f as a,e as c,g as d}from"./p-C6Td7I4k.js";import{K as p}from"./p-jGOpkGDl.js";import{K as h,d as k}from"./p-DfB7uJ0N.js";import{a as f}from"./p-BCzbwL4m.js";import{d as u}from"./p-Bfa-Amjn.js";import{d as b}from"./p-BWrxz4mM.js";import{d as g}from"./p-CBTqCoUx.js";import{d as z}from"./p-C4vg_-vg.js";import{d as m}from"./p-qBqQhAmh.js";import{d as v}from"./p-DDBaFNFi.js";import{d as x}from"./p-A7Ult9iv.js";import{d as y}from"./p-D6KNaj_Y.js";import{d as w}from"./p-DemKKw9U.js";import{d as j}from"./p-DEd2L0e3.js";import{d as C}from"./p-BtJB7FsW.js";import{d as E}from"./p-0cs6zQLB.js";import{d as T}from"./p-mYhFNPgz.js";const S=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;isTouchDevice=p.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),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.closeTooltip()}handleSelectionChange(){this.activeControl?.tool instanceof n&&this.updateDisplayValues(this.activeControl.tool)}onThemeChange(){this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool)}async closeTooltip(){document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll"))}kritzelEngine=null;toolsScrollRef=null;configTriggerRef=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=h.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:f.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};t instanceof a&&(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()}componentDidRender(){this.updateScrollIndicators()}updateScrollIndicators(){if(!this.toolsScrollRef)return;const{scrollLeft:t,scrollWidth:o,clientWidth:e}=this.toolsScrollRef,r=t>2,i=t+e<o-2,l=o>e;this.canScrollLeft!==r&&(this.canScrollLeft=r),this.canScrollRight!==i&&(this.canScrollRight=i),this.needsScrolling!==l&&(this.needsScrolling=l)}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))}async handleToolChange(t){this.activeControl={...this.activeControl,tool:t.detail},await this.kritzelEngine.changeActiveTool(this.activeControl.tool)}getSelectedSubOption(t){if(t.subOptions?.length)return this.selectedSubOptions.get(t.name)||t.subOptions[0]}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.closeTooltip(),await this.handleControlClick(t)}render(){const t=this.activeControl?.tool instanceof s||this.activeControl?.tool instanceof a||this.activeControl?.tool instanceof c||this.activeControl?.tool instanceof d||this.activeControl?.tool instanceof n&&this.activeControl.tool.hasSelection(),o=this.controls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.controls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"ea5e17d6995c228862b6d3375213b8f4ff05f04b",class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"3296551d078f9d358efff1438fdcf723349fa5e1",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:"9cbea189d5875cda4f09dc7228345e0cb268d47d",class:"kritzel-controls"},r("div",{key:"0df655a7ac5bd6bc164b82703bc212b480058ba2",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"bc16b645b6c6a12ec6bd8420a8d84aee83d2b6d2",class:"kritzel-tools-scroll",ref:t=>this.toolsScrollRef=t,onScroll:this.handleToolsScroll},o.map((t=>{if(t.subOptions?.length){const o=this.getSelectedSubOption(t),e=this.activeControl?.name===t.name;return r("div",{class:{"kritzel-control-split":!0,selected:e},key:t.name,"data-testid":`tool-${t.name}`,ref:o=>{o&&(t._anchorRef=o)}},r("button",{class:"kritzel-control-main",onClick:()=>this.handleControlClick(t),title:o?.label,"data-testid":`tool-${t.name}-main`},r("kritzel-icon",{name:o?.icon||t.icon})),r("button",{class:{"kritzel-control-dropdown":!0,visible:e},ref:o=>{o&&(t._triggerRef=o)},"aria-label":"Select shape type","data-testid":`tool-${t.name}-dropdown`,tabIndex:e?0:-1},r("kritzel-icon",{name:"chevron-down",size:12})),r("kritzel-tooltip",{anchorElement:t._anchorRef,triggerElement:t._triggerRef},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,"data-testid":`suboption-${e.id}`,onClick:()=>this.selectSubOption(t,e)},r("kritzel-icon",{name:e.icon,size:20}),r("span",null,e.label)))))))}return"separator"===t.type?r("div",{class:"kritzel-control-separator",key:t.name}):r("button",{class:{"kritzel-control":!0,selected:this.activeControl?.name===t?.name},key:t.name,"data-testid":`tool-${t.name}`,onClick:()=>this.handleControlClick?.(t)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"2e0824a991997d52168a3d922c2214ed66f5bf57",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:"d2cb554f56ce0f3bfe72e85fcbb506199387c15f",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"39412859a99c71b536e0b2ed0045b671a975af7e",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"1977ceddd337df53e8636e2bddd1d928aca3a1ff",tool:this.activeControl.tool,theme:this.theme,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"06bd3bf3558931a0c2317e149d8990f42e77adae",tabIndex:t?0:-1,class:"kritzel-config","data-testid":"tool-config",ref:t=>{t&&(this.configTriggerRef=t)},onKeyDown:t=>{"Enter"===t.key&&t.target.click()},style:{cursor:"pointer"}},this.activeControl.tool instanceof a&&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-separator{width:1px;height:24px;background-color:var(--kritzel-controls-border, #ebebeb);margin:0 4px}.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],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}]}]);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),S);break;case"kritzel-color":customElements.get(l(t))||u();break;case"kritzel-color-palette":customElements.get(l(t))||b();break;case"kritzel-dropdown":customElements.get(l(t))||g();break;case"kritzel-font":customElements.get(l(t))||z();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))||x();break;case"kritzel-line-endings":customElements.get(l(t))||y();break;case"kritzel-opacity-slider":customElements.get(l(t))||w();break;case"kritzel-shape-fill":customElements.get(l(t))||j();break;case"kritzel-stroke-size":customElements.get(l(t))||C();break;case"kritzel-tool-config":customElements.get(l(t))||k();break;case"kritzel-tooltip":customElements.get(l(t))||E();break;case"kritzel-utility-panel":customElements.get(l(t))||T()}}))}export{S as K,D as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as s,c as t,h as r,d as i,t as o}from"./p-BWj1eE2b.js";import{d as l}from"./p-
|
|
1
|
+
import{p as e,H as s,c as t,h as r,d as i,t as o}from"./p-BWj1eE2b.js";import{d as l}from"./p-Bfa-Amjn.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=t(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}render(){return r(i,{key:"f964d37a6cbfa48898ac066859165df1492535a9"},r("div",{key:"fed8ec5ddbe07d64beb151b22211fecdc0a278d1",class:"size-grid"},this.sizes.map((e=>r("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e)},r("kritzel-color",{value:"var(--kritzel-global-text-primary)",size:e}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center}.size-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}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}"}},[513,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}]);function c(){"undefined"!=typeof customElements&&["kritzel-stroke-size","kritzel-color"].forEach((e=>{switch(e){case"kritzel-stroke-size":customElements.get(o(e))||customElements.define(o(e),a);break;case"kritzel-color":customElements.get(o(e))||l()}}))}export{a as K,c as d}
|