kritzel-stencil 0.3.7 → 0.3.8

package/dist/components/p-CoJdbj3f.js

@@ -1 +0,0 @@
-import{p as e,H as t,c as i,h as s,d as o,t as r}from"./p-BWj1eE2b.js";import{h as n,d as l,e as a,g as h,f as p}from"./p-8b9zAWnS.js";import{a as c}from"./p-DjAiIBXv.js";import{d}from"./p-CqAkznU_.js";import{d as m}from"./p-B638ZH7S.js";import{d as f}from"./p-CBTqCoUx.js";import{d as g}from"./p-C4vg_-vg.js";import{d as y}from"./p-qBqQhAmh.js";import{d as z}from"./p-DDBaFNFi.js";import{d as u}from"./p-A7Ult9iv.js";import{d as k}from"./p-D6KNaj_Y.js";import{d as C}from"./p-DemKKw9U.js";import{d as x}from"./p-DEd2L0e3.js";import{d as v}from"./p-DF8X_22i.js";class b{static getToolConfig(e){const t=e?.constructor?.name;return e instanceof n||"KritzelSelectionTool"===t?e.getToolConfig():e instanceof l||"KritzelBrushTool"===t?{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"size"}]}:e instanceof a||"KritzelLineTool"===t?{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]}:e instanceof h||"KritzelShapeTool"===t?{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]}:e instanceof p||"KritzelTextTool"===t?{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]}:null}}const E=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=i(this,"toolChange"),this.displayValuesChange=i(this,"displayValuesChange")}tool;handleToolChange(e,t){const i=b.getToolConfig(e);if(t&&e&&"shape"===i?.type){const s=b.getToolConfig(t);"shape"===s?.type&&[i.colorProperty,i.sizeProperty,i.opacityProperty,"fillColor"].forEach((i=>{i&&void 0!==t[i]&&(e[i]=t[i])}))}this.config=i,this.config&&(this.updatePalette(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;engine;handleSelectionChangeBound=this.handleSelectionChange.bind(this);onThemeChange(){this.emitDisplayValues()}handleEngineChange(e,t){t&&t.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound),e&&e.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}toolChange;displayValuesChange;config;palette=[];currentOpacity=1;updateTrigger=0;handleSelectionChange(){this.tool instanceof n&&(this.config=b.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}disconnectedCallback(){this.engine&&this.engine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}componentWillLoad(){this.config=b.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()),this.engine&&this.engine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}emitDisplayValues(){if(!this.config)return;const e=this.tool[this.config.sizeProperty],t={color:c.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};this.tool instanceof p&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}handleToggleExpand=()=>{this.isExpanded=!this.isExpanded};handleColorChange=e=>{if(this.tool[this.config.colorProperty]=e.detail,"shape"===this.config.type||"selection"===this.config.type){const t=this.tool;("string"==typeof t.fillColor?"transparent"===t.fillColor:"transparent"===t.fillColor.light&&"transparent"===t.fillColor.dark)||(t.fillColor=e.detail)}this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleSizeChange=e=>{this.tool[this.config.sizeProperty]=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleOpacityChange=e=>{this.tool[this.config.opacityProperty]=e.detail,this.currentOpacity=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool)};handlePropertyChange=(e,t)=>{if("shape"!==this.config.type&&"selection"!==this.config.type||"fillColor"!==e)this.tool[e]=t,"fontFamily"===e&&this.emitDisplayValues();else{const e="filled"===t?this.tool[this.config.colorProperty]:{light:"transparent",dark:"transparent"};this.tool.fillColor=e,"filled"===t&&(this.tool[this.config.colorProperty]=e)}this.toolChange.emit(this.tool),this.updateTrigger++};getShapeFillValue(){const e=this.tool.fillColor;return("string"==typeof e?"transparent"===e:"transparent"===e.light&&"transparent"===e.dark)?"transparent":"filled"}renderControl(e){const t=this.tool[e.propertyName];switch(e.type){case"stroke-size":return s("kritzel-stroke-size",{key:e.type,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return s("kritzel-font-size",{key:e.type,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return s("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return s("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return s("kritzel-font-family",{key:e.type,selectedFontFamily:t,onFontFamilyChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});default:return null}}render(){if(!this.config)return null;const e=this.palette.length>6||"text"===this.config.type,t=this.palette.length>0,i=this.config.controls.find((e=>"stroke-size"===e.type||"font-size"===e.type)),r=this.config.controls.filter((e=>"stroke-size"!==e.type&&"font-size"!==e.type));return s(o,null,s("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},s("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&s("kritzel-color-palette",{colors:this.palette,selectedColor:this.tool[this.config.colorProperty],isExpanded:this.isExpanded,isOpaque:!0,opacity:this.currentOpacity,theme:this.theme,onColorChange:this.handleColorChange}),i&&this.renderControl(i),s("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[s("div",{class:"divider"}),this.renderControl(e)]))),e&&s("div",{style:{display:"flex",alignItems:"flex-start"}},s("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?"Collapse":"Expand"},s("kritzel-icon",{name:this.isExpanded?"chevron-up":"chevron-down"})))))}static get watchers(){return{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}}static get style(){return".expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}"}},[513,"kritzel-tool-config",{tool:[1040],isExpanded:[1028,"is-expanded"],theme:[1],engine:[16],config:[32],palette:[32],currentOpacity:[32],updateTrigger:[32]},void 0,{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}]);function j(){"undefined"!=typeof customElements&&["kritzel-tool-config","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"].forEach((e=>{switch(e){case"kritzel-tool-config":customElements.get(r(e))||customElements.define(r(e),E);break;case"kritzel-color":customElements.get(r(e))||d();break;case"kritzel-color-palette":customElements.get(r(e))||m();break;case"kritzel-dropdown":customElements.get(r(e))||f();break;case"kritzel-font":customElements.get(r(e))||g();break;case"kritzel-font-family":customElements.get(r(e))||y();break;case"kritzel-font-size":customElements.get(r(e))||z();break;case"kritzel-icon":customElements.get(r(e))||u();break;case"kritzel-line-endings":customElements.get(r(e))||k();break;case"kritzel-opacity-slider":customElements.get(r(e))||C();break;case"kritzel-shape-fill":customElements.get(r(e))||x();break;case"kritzel-stroke-size":customElements.get(r(e))||v()}}))}export{b as K,E as a,j as d}