kritzel-stencil 0.3.46 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/dist/cjs/index.cjs.js +2 -1
  2. package/dist/cjs/kritzel-active-users_47.cjs.entry.js +249 -68
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/{schema.constants-fuAsi56H.js → schema.constants-IAt9YXDZ.js} +273 -32
  5. package/dist/cjs/stencil.cjs.js +1 -1
  6. package/dist/collection/classes/handlers/context-menu.handler.js +2 -3
  7. package/dist/collection/classes/managers/clipboard.manager.js +9 -3
  8. package/dist/collection/classes/objects/base-object.class.js +0 -1
  9. package/dist/collection/classes/objects/text.class.js +2 -1
  10. package/dist/collection/classes/registries/font-registry.class.js +161 -0
  11. package/dist/collection/classes/structures/object-map.structure.js +9 -0
  12. package/dist/collection/classes/tools/image-tool.class.js +19 -3
  13. package/dist/collection/classes/tools/text-tool.class.js +2 -0
  14. package/dist/collection/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js +22 -7
  15. package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +138 -9
  16. package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +58 -13
  17. package/dist/collection/components/shared/kritzel-font-family/kritzel-font-family.js +31 -22
  18. package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js +10 -11
  19. package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js +40 -5
  20. package/dist/collection/configs/default-text-tool.config.js +2 -0
  21. package/dist/collection/constants/text-tool-fonts.constants.js +18 -0
  22. package/dist/collection/constants/version.js +1 -1
  23. package/dist/collection/helpers/image-file.helper.js +6 -0
  24. package/dist/collection/index.js +2 -0
  25. package/dist/collection/interfaces/font.interface.js +1 -0
  26. package/dist/components/index.js +1 -1
  27. package/dist/components/kritzel-awareness-cursors.js +1 -1
  28. package/dist/components/kritzel-controls.js +1 -1
  29. package/dist/components/kritzel-cursor-trail.js +1 -1
  30. package/dist/components/kritzel-editor.js +1 -1
  31. package/dist/components/kritzel-engine.js +1 -1
  32. package/dist/components/kritzel-font-family.js +1 -1
  33. package/dist/components/kritzel-settings.js +1 -1
  34. package/dist/components/kritzel-tool-config.js +1 -1
  35. package/dist/components/p-BH4oJ7yX.js +9 -0
  36. package/dist/components/p-C38P-Vd0.js +1 -0
  37. package/dist/components/p-Cm33td2O.js +1 -0
  38. package/dist/components/{p-Bjy2t3_g.js → p-Co165PAZ.js} +1 -1
  39. package/dist/components/p-DJkKlUyZ.js +1 -0
  40. package/dist/components/p-JYj3Facr.js +1 -0
  41. package/dist/components/p-Ka7OWbnk.js +1 -0
  42. package/dist/components/p-djJSnjAX.js +1 -0
  43. package/dist/esm/index.js +2 -2
  44. package/dist/esm/kritzel-active-users_47.entry.js +249 -68
  45. package/dist/esm/loader.js +1 -1
  46. package/dist/esm/{schema.constants-Cv5-yM39.js → schema.constants-rIkxAcpB.js} +271 -33
  47. package/dist/esm/stencil.js +1 -1
  48. package/dist/stencil/index.esm.js +1 -1
  49. package/dist/stencil/p-966ca4b5.entry.js +9 -0
  50. package/dist/stencil/p-rIkxAcpB.js +1 -0
  51. package/dist/stencil/stencil.esm.js +1 -1
  52. package/dist/types/classes/managers/clipboard.manager.d.ts +1 -0
  53. package/dist/types/classes/objects/base-object.class.d.ts +0 -1
  54. package/dist/types/classes/registries/font-registry.class.d.ts +19 -0
  55. package/dist/types/classes/structures/object-map.structure.d.ts +2 -2
  56. package/dist/types/classes/tools/image-tool.class.d.ts +9 -2
  57. package/dist/types/classes/tools/text-tool.class.d.ts +3 -0
  58. package/dist/types/components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.d.ts +2 -0
  59. package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +22 -0
  60. package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +10 -0
  61. package/dist/types/components/shared/kritzel-font-family/kritzel-font-family.d.ts +4 -0
  62. package/dist/types/components/ui/kritzel-tool-config/kritzel-tool-config.d.ts +1 -0
  63. package/dist/types/components.d.ts +20 -2
  64. package/dist/types/constants/text-tool-fonts.constants.d.ts +3 -0
  65. package/dist/types/constants/version.d.ts +1 -1
  66. package/dist/types/helpers/image-file.helper.d.ts +3 -0
  67. package/dist/types/index.d.ts +2 -0
  68. package/dist/types/interfaces/font.interface.d.ts +15 -0
  69. package/dist/types/interfaces/toolbar-control.interface.d.ts +2 -0
  70. package/package.json +1 -1
  71. package/dist/components/p-B4b6TDxp.js +0 -1
  72. package/dist/components/p-C2ocjA6D.js +0 -1
  73. package/dist/components/p-CwbZCXKh.js +0 -1
  74. package/dist/components/p-D2q_wTyG.js +0 -1
  75. package/dist/components/p-D8NvNMcU.js +0 -1
  76. package/dist/components/p-D8W6LE-c.js +0 -1
  77. package/dist/components/p-G9G9y5VE.js +0 -9
  78. package/dist/components/p-JhOYwUOj.js +0 -1
  79. package/dist/components/p-UEf2EN23.js +0 -1
  80. package/dist/stencil/p-56ea721b.entry.js +0 -9
  81. package/dist/stencil/p-Cv5-yM39.js +0 -1
@@ -0,0 +1 @@
1
+ import{p as e,H as t,c as s,h as i,d as o,t as r}from"./p-B43upypT.js";import{a as n}from"./p-BmyTdQGy.js";import{r as l,K as a}from"./p-DJkKlUyZ.js";import{d as h}from"./p-CqLgB8JK.js";import{d as p}from"./p-Cymum41a.js";import{d as c}from"./p-Df3BwVGy.js";import{d}from"./p-B8Xi4Clg.js";import{d as m}from"./p-djJSnjAX.js";import{d as f}from"./p-BI2ng9I_.js";import{d as u}from"./p-CdR76C4L.js";import{d as g}from"./p-CXpv9Rxe.js";import{d as y}from"./p-B6t5q-V4.js";import{d as z}from"./p-BFYtCsZu.js";import{d as k}from"./p-D82VaHce.js";class C{static getToolConfig(e){switch(e?.toolType){case"selection":return"getToolConfig"in e&&"function"==typeof e.getToolConfig?e.getToolConfig():null;case"brush":return{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"}]};case"line":return{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]};case"shape":return{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]};case"text":return{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]};default:return null}}}const x=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=s(this,"toolChange"),this.displayValuesChange=s(this,"displayValuesChange")}tool;handleToolChange(e,t){const s=C.getToolConfig(e);if(t&&e&&"shape"===s?.type){const i=C.getToolConfig(t);"shape"===i?.type&&[s.colorProperty,s.sizeProperty,s.opacityProperty,"fillColor"].forEach((s=>{s&&void 0!==t[s]&&(e[s]=t[s])}))}this.config=s,this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;engine;terms={};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=[];sizes=[];currentOpacity=1;updateTrigger=0;getFontOptionsFromTool(){const e=[...l(this.tool.availableFonts).map((e=>{const t="string"==typeof e?{family:e,label:e,cssFontFamily:e}:{family:e.family,label:e.label??e.family,cssFontFamily:e.cssFontFamily??e.family};return{value:t.family,label:t.label,cssFontFamily:t.cssFontFamily}}))],t=new Set(e.map((e=>e.value.trim().toLocaleLowerCase())));for(const s of a.list()){const i=s.family.trim().toLocaleLowerCase();t.has(i)||(t.add(i),e.push({value:s.family,label:s.label,cssFontFamily:s.cssFontFamily}))}return e}handleSelectionChange(){"selection"===this.tool?.toolType&&(this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}disconnectedCallback(){this.engine&&this.engine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}componentWillLoad(){this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),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:n.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};"text"===this.tool.toolType&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}updateSizes(){this.config&&(this.sizes="none"===this.config.sizesSource?[]:this.tool.sizes||[])}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 i("kritzel-stroke-size",{key:e.type,sizes:this.sizes,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return i("kritzel-font-size",{key:e.type,sizes:this.sizes,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return i("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return i("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return i("kritzel-font-family",{key:e.type,fontOptions:this.getFontOptionsFromTool(),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,s=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 i(o,null,i("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},i("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&i("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}),s&&this.renderControl(s),i("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[i("div",{class:"divider"}),this.renderControl(e)]))),e&&i("div",{style:{display:"flex",alignItems:"flex-start"}},i("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?this.terms["toolConfig.collapse"]??"Collapse":this.terms["toolConfig.expand"]??"Expand"},i("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],terms:[16],config:[32],palette:[32],sizes:[32],currentOpacity:[32],updateTrigger:[32]},void 0,{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}]);function b(){"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),x);break;case"kritzel-color":customElements.get(r(e))||h();break;case"kritzel-color-palette":customElements.get(r(e))||p();break;case"kritzel-dropdown":customElements.get(r(e))||c();break;case"kritzel-font":customElements.get(r(e))||d();break;case"kritzel-font-family":customElements.get(r(e))||m();break;case"kritzel-font-size":customElements.get(r(e))||f();break;case"kritzel-icon":customElements.get(r(e))||u();break;case"kritzel-line-endings":customElements.get(r(e))||g();break;case"kritzel-opacity-slider":customElements.get(r(e))||y();break;case"kritzel-shape-fill":customElements.get(r(e))||z();break;case"kritzel-stroke-size":customElements.get(r(e))||k()}}))}export{C as K,x as a,b as d}
@@ -0,0 +1 @@
1
+ import{p as t,H as e,h as s,d as i,t as o}from"./p-B43upypT.js";var r;!function(t){t[t.Left=0]="Left",t[t.Middle=1]="Middle",t[t.Right=2]="Right"}(r||(r={}));const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}core;cursorTrailPoints=[];isLeftButtonDown=!1;handleMouseDown(t){"mouse"===t.pointerType&&t.button===r.Left&&(this.isLeftButtonDown=!0,this.cursorTrailPoints=[]),"touch"===t.pointerType&&1===this.core.store.state.pointers.size&&(this.isLeftButtonDown=!0,this.cursorTrailPoints=[])}handlePointerMove(t){if(!this.isLeftButtonDown)return;const e=[{x:t.clientX,y:t.clientY,timestamp:Date.now()},...this.cursorTrailPoints];this.cursorTrailPoints=e.length>this.MAX_TRAIL_POINTS?e.slice(0,this.MAX_TRAIL_POINTS):e}handlePointerUp(t){"mouse"===t.pointerType&&t.button===r.Left&&(this.isLeftButtonDown=!1,this.cursorTrailPoints=[]),"touch"===t.pointerType&&0===this.core.store.state.pointers.size&&(this.isLeftButtonDown=!1,this.cursorTrailPoints=[])}trailCleanupIntervalId;TRAIL_DURATION_MS=100;MAX_TRAIL_POINTS=50;componentDidLoad(){this.trailCleanupIntervalId=window.setInterval((()=>{const t=Date.now(),e=this.cursorTrailPoints.filter((e=>t-e.timestamp<this.TRAIL_DURATION_MS));e.length!==this.cursorTrailPoints.length&&(this.cursorTrailPoints=e)}),50)}disconnectedCallback(){this.trailCleanupIntervalId&&window.clearInterval(this.trailCleanupIntervalId)}render(){return s(i,{key:"b427550b19a3e172cb25d05e34635121b82a61c5"},this.cursorTrailPoints.length>1&&s("svg",{key:"9685b563497e110f36c0feffbfde04ebeb38024b",class:"cursor-trail-svg",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:"0",top:"0",width:"100%",height:"100%",pointerEvents:"none",opacity:"var(--kritzel-cursor-trail-opacity, 0.6)",zIndex:"9000"}},this.cursorTrailPoints.slice(1).map(((t,e)=>{const i=this.cursorTrailPoints[e],o=Date.now(),r=Math.max(0,Math.min(1,(o-t.timestamp)/this.TRAIL_DURATION_MS));if(r>=1)return null;const n=Math.max(2,15*(1-r));return s("line",{key:`trail-segment-${t.timestamp}`,x1:i.x.toString(),y1:i.y.toString(),x2:t.x.toString(),y2:t.y.toString(),stroke:"var(--kritzel-cursor-trail-color, rgb(228, 228, 228))","stroke-width":n.toString(),"stroke-linecap":"round"})}))))}static get style(){return":host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9000}"}},[513,"kritzel-cursor-trail",{core:[16],cursorTrailPoints:[32],isLeftButtonDown:[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]]);function h(){"undefined"!=typeof customElements&&["kritzel-cursor-trail"].forEach((t=>{"kritzel-cursor-trail"===t&&(customElements.get(o(t))||customElements.define(o(t),n))}))}export{n as K,r as a,h as d}
@@ -1 +1 @@
1
- import{p as e,H as t,c as s,h as i,d as o,t as n}from"./p-B43upypT.js";import{a,C as l}from"./p-CW-VyJgK.js";import{d as r}from"./p-DX2nriaq.js";import{d as c}from"./p-Df3BwVGy.js";import{d as h}from"./p-CdR76C4L.js";import{d as g}from"./p-BsANVili.js";import{d}from"./p-BDzlx2hB.js";import{d as p}from"./p-CWRSGYOE.js";const u=-1/0,b=1/0,m=-1/0,f=1/0,v={showViewportInfo:!1,showObjectInfo:!1,showSyncProviderInfo:!0,showMigrationInfo:!0,showAssetResolverInfo:!1},w=["general","viewport","shortcuts","developer","about"],y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}get host(){return this}availableThemes=["light","dark"];availableLocales=[];shortcuts=[];terms={};settings;onSettingsPropChange(e){e&&this.applySettings(e)}isDialogOpen=!1;selectedCategoryId=w[0];scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;theme="light";locale="en";viewportBoundaryLeft=u;viewportBoundaryRight=b;viewportBoundaryTop=m;viewportBoundaryBottom=f;debugInfo={...v};settingsChange;componentWillLoad(){this.settings&&this.applySettings(this.settings)}applySettings(e){"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale),"string"==typeof e.theme&&(this.theme=e.theme),"string"==typeof e.locale&&(this.locale=e.locale),"number"==typeof e.viewportBoundaryLeft&&(this.viewportBoundaryLeft=e.viewportBoundaryLeft),"number"==typeof e.viewportBoundaryRight&&(this.viewportBoundaryRight=e.viewportBoundaryRight),"number"==typeof e.viewportBoundaryTop&&(this.viewportBoundaryTop=e.viewportBoundaryTop),"number"==typeof e.viewportBoundaryBottom&&(this.viewportBoundaryBottom=e.viewportBoundaryBottom),e.debugInfo&&(this.debugInfo={...v,...e.debugInfo})}emitSettings(){this.settingsChange.emit({scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,theme:this.theme,locale:this.locale,viewportBoundaryLeft:this.viewportBoundaryLeft,viewportBoundaryRight:this.viewportBoundaryRight,viewportBoundaryTop:this.viewportBoundaryTop,viewportBoundaryBottom:this.viewportBoundaryBottom,debugInfo:this.debugInfo})}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.emitSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.emitSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.emitSettings()};handleThemeChange=e=>{this.theme=e.detail,this.emitSettings()};handleLocaleChange=e=>{this.locale=e.detail,this.emitSettings()};handleViewportBoundaryLeftChange=e=>{this.viewportBoundaryLeft=e.detail??u,this.emitSettings()};handleViewportBoundaryRightChange=e=>{this.viewportBoundaryRight=e.detail??b,this.emitSettings()};handleViewportBoundaryTopChange=e=>{this.viewportBoundaryTop=e.detail??m,this.emitSettings()};handleViewportBoundaryBottomChange=e=>{this.viewportBoundaryBottom=e.detail??f,this.emitSettings()};handleDebugInfoChange=e=>t=>{this.debugInfo={...this.debugInfo,[e]:t.detail},this.emitSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};formatKeyCombo(e){const t=[];return e.ctrl&&t.push("Ctrl"),e.shift&&t.push("Shift"),t.push(this.formatKey(e.key)),t.join("+")}formatKey(e){return{Escape:"Esc",Delete:"Del"," ":"Space"}[e]??e.toUpperCase()}groupShortcutsByCategory(){const e=new Map;for(const t of this.shortcuts){const s=e.get(t.category)||[];s.push(t),e.set(t.category,s)}return e}t(e,t){return this.terms[e]??t}get categories(){const e={general:"settings",viewport:"viewport",shortcuts:"command",developer:"braces",about:"info"},t={general:{key:"settings.categories.general",fallback:"General"},viewport:{key:"settings.categories.viewport",fallback:"Viewport"},shortcuts:{key:"settings.categories.shortcuts",fallback:"Keyboard Shortcuts"},developer:{key:"settings.categories.developer",fallback:"Developer Options"},about:{key:"settings.categories.about",fallback:"About"}};return w.map((s=>({id:s,label:this.t(t[s].key,t[s].fallback),icon:e[s]})))}renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.general.title","General Settings")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.theme.label","Theme")),i("p",{class:"settings-description"},this.t("settings.general.theme.description","Select a registered color theme for the editor interface.")),i("kritzel-dropdown",{options:this.availableThemes.map((e=>({value:e,label:e}))),value:this.theme,onValueChanged:this.handleThemeChange})),this.availableLocales.length>0&&i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.language.label","Language")),i("p",{class:"settings-description"},this.t("settings.general.language.description","Select the display language for the editor interface.")),i("kritzel-dropdown",{options:this.availableLocales.map((e=>({value:e.code,label:e.label}))),value:this.locale,onValueChanged:this.handleLocaleChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.lockDrawingScale.label","Lock Drawing Scale")),i("p",{class:"settings-description"},this.t("settings.general.lockDrawingScale.description","When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.")),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:this.t("settings.general.lockDrawingScale.label","Lock Drawing Scale"),onCheckedChange:this.handleLockDrawingScaleChange}))));case"viewport":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.viewport.title","Viewport Settings")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.minZoom.label","Minimum Zoom Level")),i("p",{class:"settings-description"},this.t("settings.viewport.minZoom.description","Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.")),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.maxZoom.label","Maximum Zoom Level")),i("p",{class:"settings-description"},this.t("settings.viewport.maxZoom.description","Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.")),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryLeft.label","Viewport Boundary Left")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryLeft.description","Left boundary in world coordinates. Set to limit how far left the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryLeft,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryLeftChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryRight.label","Viewport Boundary Right")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryRight.description","Right boundary in world coordinates. Set to limit how far right the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryRight,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryRightChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryTop.label","Viewport Boundary Top")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryTop.description","Top boundary in world coordinates. Set to limit how far up the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryTop,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryTopChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryBottom.label","Viewport Boundary Bottom")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryBottom.description","Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryBottom,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryBottomChange}))));case"shortcuts":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.shortcuts.title","Keyboard Shortcuts")),i("div",{class:"shortcuts-list"},Array.from(this.groupShortcutsByCategory()).map((([e,t])=>i("div",{class:"shortcuts-category",key:e},i("h4",{class:"shortcuts-category-title"},e),i("div",{class:"shortcuts-group"},t.map((e=>i("div",{class:"shortcut-item",key:e.key+e.label},i("span",{class:"shortcut-label"},e.label),i("kbd",{class:"shortcut-key"},this.formatKeyCombo(e)))))))))));case"developer":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.developer.title","Developer Options")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showViewportInfo.label","Show Viewport Info")),i("p",{class:"settings-description"},this.t("settings.developer.showViewportInfo.description","Display viewport debug information such as position, zoom level, and boundaries.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showViewportInfo,label:this.t("settings.developer.showViewportInfo.label","Show Viewport Info"),onCheckedChange:this.handleDebugInfoChange("showViewportInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showObjectInfo.label","Show Object Info")),i("p",{class:"settings-description"},this.t("settings.developer.showObjectInfo.description","Display debug information about objects on the canvas.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showObjectInfo,label:this.t("settings.developer.showObjectInfo.label","Show Object Info"),onCheckedChange:this.handleDebugInfoChange("showObjectInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showSyncProviderInfo.label","Show Sync Provider Info")),i("p",{class:"settings-description"},this.t("settings.developer.showSyncProviderInfo.description","Display debug information about the sync provider connection status.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showSyncProviderInfo,label:this.t("settings.developer.showSyncProviderInfo.label","Show Sync Provider Info"),onCheckedChange:this.handleDebugInfoChange("showSyncProviderInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showMigrationInfo.label","Show Migration Info")),i("p",{class:"settings-description"},this.t("settings.developer.showMigrationInfo.description","Display debug information about data migrations.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showMigrationInfo,label:this.t("settings.developer.showMigrationInfo.label","Show Migration Info"),onCheckedChange:this.handleDebugInfoChange("showMigrationInfo")}))));case"about":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.about.title","About")),i("p",null,this.t("settings.about.description","Kritzel - A drawing application")),i("p",{class:"version-info"},"Version ","0.3.46"),i("p",{class:"version-info"},"App-State Schema v",l),i("p",{class:"version-info"},"Workspace Schema v",a));default:return null}}render(){return i(o,{key:"1fb0bca35cb20633f017a927d39e2a66ebfb403b"},i("kritzel-dialog",{key:"6366a8d8e7f65ef3f715248db3dc7c7e36dd3f4a",isOpen:this.isDialogOpen,dialogTitle:this.t("settings.dialogTitle","Settings"),size:"large",contained:!0,onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"2f4891d1ef0b3f130c591790b2e53e7264a61145",items:this.categories,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get watchers(){return{settings:[{onSettingsPropChange:0}]}}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}"}},[513,"kritzel-settings",{availableThemes:[16],availableLocales:[16],shortcuts:[16],terms:[16],settings:[16],isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],theme:[32],locale:[32],viewportBoundaryLeft:[32],viewportBoundaryRight:[32],viewportBoundaryTop:[32],viewportBoundaryBottom:[32],debugInfo:[32],open:[64]},void 0,{settings:[{onSettingsPropChange:0}]}]);function k(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-dropdown","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),y);break;case"kritzel-dialog":customElements.get(n(e))||r();break;case"kritzel-dropdown":customElements.get(n(e))||c();break;case"kritzel-icon":customElements.get(n(e))||h();break;case"kritzel-master-detail":customElements.get(n(e))||g();break;case"kritzel-numeric-input":customElements.get(n(e))||d();break;case"kritzel-slide-toggle":customElements.get(n(e))||p()}}))}export{y as K,k as d}
1
+ import{p as e,H as t,c as s,h as i,d as o,t as n}from"./p-B43upypT.js";import{a,C as l}from"./p-CW-VyJgK.js";import{d as r}from"./p-DX2nriaq.js";import{d as c}from"./p-Df3BwVGy.js";import{d as h}from"./p-CdR76C4L.js";import{d as g}from"./p-BsANVili.js";import{d}from"./p-BDzlx2hB.js";import{d as p}from"./p-CWRSGYOE.js";const u=-1/0,b=1/0,m=-1/0,f=1/0,v={showViewportInfo:!1,showObjectInfo:!1,showSyncProviderInfo:!0,showMigrationInfo:!0,showAssetResolverInfo:!1},w=["general","viewport","shortcuts","developer","about"],y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}get host(){return this}availableThemes=["light","dark"];availableLocales=[];shortcuts=[];terms={};settings;onSettingsPropChange(e){e&&this.applySettings(e)}isDialogOpen=!1;selectedCategoryId=w[0];scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;theme="light";locale="en";viewportBoundaryLeft=u;viewportBoundaryRight=b;viewportBoundaryTop=m;viewportBoundaryBottom=f;debugInfo={...v};settingsChange;componentWillLoad(){this.settings&&this.applySettings(this.settings)}applySettings(e){"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale),"string"==typeof e.theme&&(this.theme=e.theme),"string"==typeof e.locale&&(this.locale=e.locale),"number"==typeof e.viewportBoundaryLeft&&(this.viewportBoundaryLeft=e.viewportBoundaryLeft),"number"==typeof e.viewportBoundaryRight&&(this.viewportBoundaryRight=e.viewportBoundaryRight),"number"==typeof e.viewportBoundaryTop&&(this.viewportBoundaryTop=e.viewportBoundaryTop),"number"==typeof e.viewportBoundaryBottom&&(this.viewportBoundaryBottom=e.viewportBoundaryBottom),e.debugInfo&&(this.debugInfo={...v,...e.debugInfo})}emitSettings(){this.settingsChange.emit({scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,theme:this.theme,locale:this.locale,viewportBoundaryLeft:this.viewportBoundaryLeft,viewportBoundaryRight:this.viewportBoundaryRight,viewportBoundaryTop:this.viewportBoundaryTop,viewportBoundaryBottom:this.viewportBoundaryBottom,debugInfo:this.debugInfo})}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.emitSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.emitSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.emitSettings()};handleThemeChange=e=>{this.theme=e.detail,this.emitSettings()};handleLocaleChange=e=>{this.locale=e.detail,this.emitSettings()};handleViewportBoundaryLeftChange=e=>{this.viewportBoundaryLeft=e.detail??u,this.emitSettings()};handleViewportBoundaryRightChange=e=>{this.viewportBoundaryRight=e.detail??b,this.emitSettings()};handleViewportBoundaryTopChange=e=>{this.viewportBoundaryTop=e.detail??m,this.emitSettings()};handleViewportBoundaryBottomChange=e=>{this.viewportBoundaryBottom=e.detail??f,this.emitSettings()};handleDebugInfoChange=e=>t=>{this.debugInfo={...this.debugInfo,[e]:t.detail},this.emitSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};formatKeyCombo(e){const t=[];return e.ctrl&&t.push("Ctrl"),e.shift&&t.push("Shift"),t.push(this.formatKey(e.key)),t.join("+")}formatKey(e){return{Escape:"Esc",Delete:"Del"," ":"Space"}[e]??e.toUpperCase()}groupShortcutsByCategory(){const e=new Map;for(const t of this.shortcuts){const s=e.get(t.category)||[];s.push(t),e.set(t.category,s)}return e}t(e,t){return this.terms[e]??t}get categories(){const e={general:"settings",viewport:"viewport",shortcuts:"command",developer:"braces",about:"info"},t={general:{key:"settings.categories.general",fallback:"General"},viewport:{key:"settings.categories.viewport",fallback:"Viewport"},shortcuts:{key:"settings.categories.shortcuts",fallback:"Keyboard Shortcuts"},developer:{key:"settings.categories.developer",fallback:"Developer Options"},about:{key:"settings.categories.about",fallback:"About"}};return w.map((s=>({id:s,label:this.t(t[s].key,t[s].fallback),icon:e[s]})))}renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.general.title","General Settings")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.theme.label","Theme")),i("p",{class:"settings-description"},this.t("settings.general.theme.description","Select a registered color theme for the editor interface.")),i("kritzel-dropdown",{options:this.availableThemes.map((e=>({value:e,label:e}))),value:this.theme,onValueChanged:this.handleThemeChange})),this.availableLocales.length>0&&i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.language.label","Language")),i("p",{class:"settings-description"},this.t("settings.general.language.description","Select the display language for the editor interface.")),i("kritzel-dropdown",{options:this.availableLocales.map((e=>({value:e.code,label:e.label}))),value:this.locale,onValueChanged:this.handleLocaleChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.general.lockDrawingScale.label","Lock Drawing Scale")),i("p",{class:"settings-description"},this.t("settings.general.lockDrawingScale.description","When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.")),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:this.t("settings.general.lockDrawingScale.label","Lock Drawing Scale"),onCheckedChange:this.handleLockDrawingScaleChange}))));case"viewport":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.viewport.title","Viewport Settings")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.minZoom.label","Minimum Zoom Level")),i("p",{class:"settings-description"},this.t("settings.viewport.minZoom.description","Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.")),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.maxZoom.label","Maximum Zoom Level")),i("p",{class:"settings-description"},this.t("settings.viewport.maxZoom.description","Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.")),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryLeft.label","Viewport Boundary Left")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryLeft.description","Left boundary in world coordinates. Set to limit how far left the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryLeft,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryLeftChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryRight.label","Viewport Boundary Right")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryRight.description","Right boundary in world coordinates. Set to limit how far right the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryRight,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryRightChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryTop.label","Viewport Boundary Top")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryTop.description","Top boundary in world coordinates. Set to limit how far up the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryTop,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryTopChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.viewport.boundaryBottom.label","Viewport Boundary Bottom")),i("p",{class:"settings-description"},this.t("settings.viewport.boundaryBottom.description","Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.")),i("kritzel-numeric-input",{value:this.viewportBoundaryBottom,step:100,placeholder:this.t("settings.viewport.boundaryPlaceholder","Infinite"),onValueChange:this.handleViewportBoundaryBottomChange}))));case"shortcuts":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.shortcuts.title","Keyboard Shortcuts")),i("div",{class:"shortcuts-list"},Array.from(this.groupShortcutsByCategory()).map((([e,t])=>i("div",{class:"shortcuts-category",key:e},i("h4",{class:"shortcuts-category-title"},e),i("div",{class:"shortcuts-group"},t.map((e=>i("div",{class:"shortcut-item",key:e.key+e.label},i("span",{class:"shortcut-label"},e.label),i("kbd",{class:"shortcut-key"},this.formatKeyCombo(e)))))))))));case"developer":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.developer.title","Developer Options")),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showViewportInfo.label","Show Viewport Info")),i("p",{class:"settings-description"},this.t("settings.developer.showViewportInfo.description","Display viewport debug information such as position, zoom level, and boundaries.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showViewportInfo,label:this.t("settings.developer.showViewportInfo.label","Show Viewport Info"),onCheckedChange:this.handleDebugInfoChange("showViewportInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showObjectInfo.label","Show Object Info")),i("p",{class:"settings-description"},this.t("settings.developer.showObjectInfo.description","Display debug information about objects on the canvas.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showObjectInfo,label:this.t("settings.developer.showObjectInfo.label","Show Object Info"),onCheckedChange:this.handleDebugInfoChange("showObjectInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showSyncProviderInfo.label","Show Sync Provider Info")),i("p",{class:"settings-description"},this.t("settings.developer.showSyncProviderInfo.description","Display debug information about the sync provider connection status.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showSyncProviderInfo,label:this.t("settings.developer.showSyncProviderInfo.label","Show Sync Provider Info"),onCheckedChange:this.handleDebugInfoChange("showSyncProviderInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},this.t("settings.developer.showMigrationInfo.label","Show Migration Info")),i("p",{class:"settings-description"},this.t("settings.developer.showMigrationInfo.description","Display debug information about data migrations.")),i("kritzel-slide-toggle",{checked:this.debugInfo.showMigrationInfo,label:this.t("settings.developer.showMigrationInfo.label","Show Migration Info"),onCheckedChange:this.handleDebugInfoChange("showMigrationInfo")}))));case"about":return i("div",{class:"settings-content"},i("h3",null,this.t("settings.about.title","About")),i("p",null,this.t("settings.about.description","Kritzel - A drawing application")),i("p",{class:"version-info"},"Version ","0.4.1"),i("p",{class:"version-info"},"App-State Schema v",l),i("p",{class:"version-info"},"Workspace Schema v",a));default:return null}}render(){return i(o,{key:"1fb0bca35cb20633f017a927d39e2a66ebfb403b"},i("kritzel-dialog",{key:"6366a8d8e7f65ef3f715248db3dc7c7e36dd3f4a",isOpen:this.isDialogOpen,dialogTitle:this.t("settings.dialogTitle","Settings"),size:"large",contained:!0,onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"2f4891d1ef0b3f130c591790b2e53e7264a61145",items:this.categories,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get watchers(){return{settings:[{onSettingsPropChange:0}]}}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}"}},[513,"kritzel-settings",{availableThemes:[16],availableLocales:[16],shortcuts:[16],terms:[16],settings:[16],isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],theme:[32],locale:[32],viewportBoundaryLeft:[32],viewportBoundaryRight:[32],viewportBoundaryTop:[32],viewportBoundaryBottom:[32],debugInfo:[32],open:[64]},void 0,{settings:[{onSettingsPropChange:0}]}]);function k(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-dropdown","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),y);break;case"kritzel-dialog":customElements.get(n(e))||r();break;case"kritzel-dropdown":customElements.get(n(e))||c();break;case"kritzel-icon":customElements.get(n(e))||h();break;case"kritzel-master-detail":customElements.get(n(e))||g();break;case"kritzel-numeric-input":customElements.get(n(e))||d();break;case"kritzel-slide-toggle":customElements.get(n(e))||p()}}))}export{y as K,k as d}
@@ -0,0 +1 @@
1
+ const t="__kritzelFontRegistry__",e="kritzel-font-registry-change",s=t=>t.trim().toLocaleLowerCase();class n{static get _fonts(){return(()=>{const e=globalThis,s=e[t];if(s)return s;const n={fonts:new Map};return e[t]=n,n})().fonts}static getFontFaceSet(){return"undefined"!=typeof document&&document.fonts?document.fonts:null}static toCssFontFace(t){return t.includes(" ")?`"${t.replaceAll('"','\\"')}"`:t}static getRegisteredFontFamilies(t){return[...new Set(Object.values(t).map((t=>"string"==typeof t?t:t.family)).map((t=>t.trim())).filter(Boolean))]}static register(t,e){const s=((t,e)=>"string"==typeof e?{key:t,family:e,label:e,cssFontFamily:e}:{key:t,family:e.family,label:e.label??e.family,cssFontFamily:e.cssFontFamily??e.family,source:e.source})(t,e);this._fonts.has(t)&&console.warn(`[FontRegistry] Font "${t}" is already registered. It will be overwritten.`),this._fonts.set(t,s),this.emitChange()}static registerFonts(t){for(const[e,s]of Object.entries(t))this.register(e,s)}static injectFontStylesheets(t){if("undefined"==typeof document)return Promise.resolve([]);const e=[];for(const[s,n]of Object.entries(t)){if("string"==typeof n||!n.source)continue;const t=n.source,i=`kritzel-font-stylesheet-${s}`;if(document.getElementById(i))continue;const o=document.createElement("link");o.id=i,o.rel="stylesheet",o.href=t;const r=new Promise((e=>{o.onload=()=>e(),o.onerror=()=>{console.warn(`[FontRegistry] Failed to load stylesheet for font "${s}": ${t}`),e()}}));document.head.appendChild(o),e.push(r)}return Promise.all(e)}static async waitForFonts(t){await this.injectFontStylesheets(t);const e=this.getFontFaceSet(),s=this.getRegisteredFontFamilies(t);e&&0!==s.length&&(await Promise.allSettled(s.map((t=>e.load(`1em ${this.toCssFontFace(t)}`)))),await e.ready)}static get(t){return this._fonts.get(t)}static has(t){return this._fonts.has(t)}static unregister(t){const e=this._fonts.delete(t);return e&&this.emitChange(),e}static list(){return[...this._fonts.values()]}static resolveCssFontFamily(t){const e=s(t),n=this.list().find((t=>s(t.family)===e||t.key.trim().toLocaleLowerCase()===e));return n?.cssFontFamily??t}static toRegisteredFont(t){return"string"==typeof t?{key:t,family:t,label:t,cssFontFamily:t}:{key:t.family,family:t.family,label:t.label??t.family,cssFontFamily:t.cssFontFamily??t.family,source:t.source}}static emitChange(){const t=globalThis;"function"==typeof t.dispatchEvent&&"undefined"!=typeof CustomEvent&&t.dispatchEvent(new CustomEvent(e))}static get changeEventName(){return e}}const i=["Arial","Verdana","Helvetica","Tahoma","Trebuchet MS","Times New Roman","Georgia","Garamond","Courier New","Brush Script MT"],o=t=>t&&0!==t.length?[...t]:[...i];export{i as D,n as K,o as r}
@@ -0,0 +1 @@
1
+ import{p as t,H as o,c as e,h as r,d as i,t as l}from"./p-B43upypT.js";import{K as n}from"./p-jGOpkGDl.js";import{K as s,d as a}from"./p-C38P-Vd0.js";import{a as c}from"./p-BmyTdQGy.js";import{d}from"./p-CqLgB8JK.js";import{d as h}from"./p-Cymum41a.js";import{d as p}from"./p-Df3BwVGy.js";import{d as k}from"./p-B8Xi4Clg.js";import{d as u}from"./p-djJSnjAX.js";import{d as b}from"./p-BI2ng9I_.js";import{d as f}from"./p-CdR76C4L.js";import{d as g}from"./p-CXpv9Rxe.js";import{d as z}from"./p-B6t5q-V4.js";import{d as m}from"./p-BFYtCsZu.js";import{d as v}from"./p-D82VaHce.js";import{d as y}from"./p-BTzlrIxe.js";import{d as x}from"./p-CsvMgk_f.js";const w=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isControlsReady=e(this,"isControlsReady")}get host(){return this}visible=!0;controls=[];activeControl=null;isUtilityPanelVisible=!0;undoState=null;theme="light";terms={};isControlsReady;firstConfig=null;isTouchDevice=n.isTouchDevice();selectedSubOptions=new Map;canScrollLeft=!1;canScrollRight=!1;needsScrolling=!1;displayValues=null;internalControls=[];handleActiveToolChangeBound=this.handleActiveToolChange.bind(this);handleSelectionChangeBound=this.handleSelectionChange.bind(this);handleKeyDown(t){"Escape"===t.key&&(t.preventDefault(),this.closeTooltip(),this.kritzelEngine?.enable())}async handleActiveToolChange(t){this.activeControl=this.internalControls.find((o=>o.tool===t.detail))||null,this.activeControl?.tool&&this.updateDisplayValues(this.activeControl.tool),this.closeTooltip()}handleSelectionChange(){const t=this.activeControl?.tool;t&&"function"!=typeof t&&"selection"===t.toolType&&this.updateDisplayValues(t)}async onControlsChange(){this.kritzelEngine&&await this.initializeTools()}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=s.getToolConfig(t);if(!o)return void(this.displayValues=null);const e=t[o.sizeProperty],r={color:c.applyOpacity(t[o.colorProperty],t[o.opacityProperty]??1,this.theme),size:e};"text"===t.toolType&&(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()}disconnectedCallback(){this.kritzelEngine&&(this.kritzelEngine.removeEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound))}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.");this.kritzelEngine.addEventListener("activeToolChange",this.handleActiveToolChangeBound),this.kritzelEngine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}async initializeTools(){let t=!1;const o=this.controls.map((t=>({...t})));for(const e of o){if("tool"===e.type&&e.tool){let t=e.tool;"function"!=typeof t&&(t=t.constructor);const o=await this.kritzelEngine.registerTool(e.name,t,e.config);o&&(e.tool=o)}"tool"===e.type&&e.isDefault&&e.tool&&(await this.kritzelEngine.changeActiveTool(e.tool),this.activeControl=e,this.updateDisplayValues(e.tool),t=!0),"config"===e.type&&(null===this.firstConfig?this.firstConfig=e:console.warn("Only one config control is allowed. The first one will be used."))}if(this.internalControls=o,!t){const t=this.internalControls.find((t=>"tool"===t.type&&t.tool));t&&(await this.kritzelEngine.changeActiveTool(t.tool),this.activeControl=t,this.updateDisplayValues(t.tool))}}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=null!==(this.activeControl?.tool?s.getToolConfig(this.activeControl.tool):null),o=this.internalControls.filter((t=>"tool"===t.type||"separator"===t.type)),e=this.internalControls.find((t=>"config"===t.type&&t.name===this.firstConfig?.name));return r(i,{key:"a526bd337a6b75933ec4be89c3edded0a9c39e7c",style:{display:this.visible?"":"none"},class:{mobile:this.isTouchDevice}},this.isUtilityPanelVisible&&r("kritzel-utility-panel",{key:"5314f067c5a22425690e3b6f26c836962ac528a2",style:{position:"absolute",bottom:"56px",left:"12px"},undoState:this.undoState,terms:this.terms,onUndo:()=>this.kritzelEngine?.undo(),onRedo:()=>this.kritzelEngine?.redo(),onDelete:()=>this.kritzelEngine?.delete()}),r("div",{key:"7cf0cd164d723b5901f54a6671395f63dd8bad29",class:"kritzel-controls"},r("div",{key:"b7169122686a0a67c37d96751291fc43f4c45e4a",class:{"scroll-indicator-left":!0,visible:this.canScrollLeft}}),r("div",{key:"6e3c4f30900e4722abdfaf3cfdc68cf1a07b9292",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),"aria-label":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 ${t.name} options`,"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),"aria-label":t.name.charAt(0).toUpperCase()+t.name.slice(1)},r("kritzel-icon",{name:t.icon}))}))),r("div",{key:"bc8d79e0512f30fe150c6d2ac7f81206fc47c1a5",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:"671431a9c388080fb917d4e8c596d17e92eaba08",class:{"config-gradient-left":!0,visible:this.needsScrolling}}),r("kritzel-tooltip",{key:"394e8e2c07b191b3fb93645d68d7eae67761167a",anchorElement:this.host.shadowRoot?.querySelector(".kritzel-config-container"),triggerElement:this.configTriggerRef},r("kritzel-tool-config",{key:"b8479fba2afdb51fe0ef965e18b1ae45ba8a7da6",tool:this.activeControl.tool,theme:this.theme,engine:this.kritzelEngine,terms:this.terms,onToolChange:t=>this.handleToolChange?.(t),onDisplayValuesChange:this.handleDisplayValuesChange,style:{width:"100%",height:"100%"}})),r("div",{key:"8fac81d682dbdec6b5247154fd20d553dfe6f1a7",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.displayValues&&r("div",{key:"6aa1daed9425d069c7d0405a04e65b4c4e88291f",class:"color-container"},r("kritzel-color",{key:"7b54461769bf4aec3e39d1fbe21c015b7d7a85bb",value:this.displayValues.color,theme:this.theme,size:18,style:{borderRadius:"50%",border:"none"}}))))))}static get assetsDirs(){return["../assets"]}static get watchers(){return{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}}static get style(){return":host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}: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:1;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-separator-color, #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",{visible:[4],controls:[16],activeControl:[1040],isUtilityPanelVisible:[4,"is-utility-panel-visible"],undoState:[16],theme:[1],terms:[16],firstConfig:[32],isTouchDevice:[32],selectedSubOptions:[32],canScrollLeft:[32],canScrollRight:[32],needsScrolling:[32],displayValues:[32],internalControls:[32],closeTooltip:[64]},[[8,"keydown","handleKeyDown"]],{controls:[{onControlsChange:0}],theme:[{onThemeChange:0}]}]);function C(){"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),w);break;case"kritzel-color":customElements.get(l(t))||d();break;case"kritzel-color-palette":customElements.get(l(t))||h();break;case"kritzel-dropdown":customElements.get(l(t))||p();break;case"kritzel-font":customElements.get(l(t))||k();break;case"kritzel-font-family":customElements.get(l(t))||u();break;case"kritzel-font-size":customElements.get(l(t))||b();break;case"kritzel-icon":customElements.get(l(t))||f();break;case"kritzel-line-endings":customElements.get(l(t))||g();break;case"kritzel-opacity-slider":customElements.get(l(t))||z();break;case"kritzel-shape-fill":customElements.get(l(t))||m();break;case"kritzel-stroke-size":customElements.get(l(t))||v();break;case"kritzel-tool-config":customElements.get(l(t))||a();break;case"kritzel-tooltip":customElements.get(l(t))||y();break;case"kritzel-utility-panel":customElements.get(l(t))||x()}}))}export{w as K,C as d}
@@ -0,0 +1 @@
1
+ import{p as t,H as s,h as i,d as e,t as h}from"./p-B43upypT.js";import{O as n}from"./p-Dd-pMvlr.js";import{a as r}from"./p-BmyTdQGy.js";class o{static doPolygonsIntersect(t,s){const i=[t.bottomLeft,t.bottomRight,t.topRight,t.topLeft],e=[s.bottomLeft,s.bottomRight,s.topRight,s.topLeft];for(const t of i)if(this.isPointInPolygon(t,e))return!0;for(const t of e)if(this.isPointInPolygon(t,i))return!0;for(let t=0;t<i.length;t++){const s=i[t],h=i[(t+1)%i.length];for(let t=0;t<e.length;t++)if(this.intersectLines(s,h,e[t],e[(t+1)%e.length]))return!0}return!1}static isPointInPolygon(t,s){let i=!1;for(let e=0,h=s.length-1;e<s.length;h=e++){const n=s[e].x,r=s[e].y,o=s[h].y;r>t.y!=o>t.y&&t.x<(s[h].x-n)*(t.y-r)/(o-r)+n&&(i=!i)}return i}static intersectLines(t,s,i,e){const h=(s.x-t.x)*(e.y-i.y)-(s.y-t.y)*(e.x-i.x);if(0===h)return!1;const n=((i.x-t.x)*(e.y-i.y)-(i.y-t.y)*(e.x-i.x))/h,r=-((t.x-i.x)*(s.y-t.y)-(t.y-i.y)*(s.x-t.x))/h;return n>=0&&n<=1&&r>=0&&r<=1}static getLineIntersectionPoint(t,s,i,e){const h=(s.x-t.x)*(e.y-i.y)-(s.y-t.y)*(e.x-i.x);if(0===h)return null;const n=((i.x-t.x)*(e.y-i.y)-(i.y-t.y)*(e.x-i.x))/h,r=-((t.x-i.x)*(s.y-t.y)-(t.y-i.y)*(s.x-t.x))/h;return n>=0&&n<=1&&r>=0&&r<=1?{x:t.x+n*(s.x-t.x),y:t.y+n*(s.y-t.y)}:null}static getLinePolygonIntersection(t,s,i){const e=[i.topLeft,i.topRight,i.bottomRight,i.bottomLeft];let h=null,n=1/0;for(let i=0;i<e.length;i++){const r=this.getLineIntersectionPoint(t,s,e[i],e[(i+1)%e.length]);if(r){const s=Math.sqrt(Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2));s<n&&(n=s,h=r)}}return h}static getEllipsePolygonApproximation(t,s,i,e,h=32,n=0){const r=[],o=Math.cos(n),a=Math.sin(n);for(let n=0;n<h;n++){const l=2*Math.PI*n/h,c=i*Math.cos(l),u=e*Math.sin(l);r.push({x:t+c*o-u*a,y:s+c*a+u*o})}return r}static getLinePointsArrayIntersection(t,s,i){let e=null,h=1/0;for(let n=0;n<i.length;n++){const r=this.getLineIntersectionPoint(t,s,i[n],i[(n+1)%i.length]);if(r){const s=Math.sqrt(Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2));s<h&&(h=s,e=r)}}return e}static isPointInPolygonPoints(t,s){return this.isPointInPolygon(t,s)}}class a{__class__="KritzelBaseObject";_core;_elementRef;id;workspaceId;x;y;translateX;translateY;height;width;backgroundColor;borderColor;borderWidth=0;opacity=1;padding=0;scale;resizing=!1;rotation=0;markedForRemoval=!1;zIndex=0;userId;isVisible=!0;isSelected=!1;isHovered=!1;isMounted=!1;isEditable=!1;isInteractive=!1;isResizable=!0;isRotatable=!0;get totalWidth(){return this.width+2*this.padding}get totalHeight(){return this.height+2*this.padding}set elementRef(t){this._elementRef=t}get elementRef(){return this._elementRef}get boundingBox(){return{x:this.translateX,y:this.translateY,z:this.scale,width:this.totalWidth/this.scale,height:this.totalHeight/this.scale}}get rotatedBoundingBox(){const t=this.rotatedPolygon,s=[t.topLeft.x,t.topRight.x,t.bottomRight.x,t.bottomLeft.x],i=[t.topLeft.y,t.topRight.y,t.bottomRight.y,t.bottomLeft.y],e=Math.min(...s),h=Math.max(...s),n=Math.min(...i),r=Math.max(...i);return{x:e,y:n,z:this.scale,width:h-e,height:r-n}}get rotatedPolygon(){const t=this.translateX+this.totalWidth/2/this.scale,s=this.translateY+this.totalHeight/2/this.scale,i=this.rotation,e=Math.cos(i),h=Math.sin(i),n=this.translateX,r=this.translateY,o=n+this.totalWidth/this.scale,a=r+this.totalHeight/this.scale,l=(i,n)=>({x:e*(i-t)-h*(n-s)+t,y:h*(i-t)+e*(n-s)+s});return{topLeft:l(n,r),topRight:l(o,r),bottomRight:l(o,a),bottomLeft:l(n,a)}}get minXRotated(){return Math.min(this.rotatedPolygon.topLeft.x,this.rotatedPolygon.topRight.x,this.rotatedPolygon.bottomRight.x,this.rotatedPolygon.bottomLeft.x)}get minYRotated(){return Math.min(this.rotatedPolygon.topLeft.y,this.rotatedPolygon.topRight.y,this.rotatedPolygon.bottomRight.y,this.rotatedPolygon.bottomLeft.y)}get maxXRotated(){return Math.max(this.rotatedPolygon.topLeft.x,this.rotatedPolygon.topRight.x,this.rotatedPolygon.bottomRight.x,this.rotatedPolygon.bottomLeft.x)}get maxYRotated(){return Math.max(this.rotatedPolygon.topLeft.y,this.rotatedPolygon.topRight.y,this.rotatedPolygon.bottomRight.y,this.rotatedPolygon.bottomLeft.y)}get transformationMatrix(){const t=1/this.scale;return`matrix(${t}, 0, 0, ${t}, ${this.translateX}, ${this.translateY})`}get rotationDegrees(){return this.rotation*(180/Math.PI)}get centerX(){return this.translateX+this.totalWidth/2/this.scale}get centerY(){return this.translateY+this.totalHeight/2/this.scale}constructor(){this.id=this.generateId()}static create(t){const s=new a;return s._core=t,s.zIndex=t.store.currentZIndex,s.workspaceId=t.store.state.activeWorkspace.id,s.userId=t.user?.id,s}mount(t){this.isMounted||(this.elementRef=t,this.isMounted=!0)}generateId(){return n.generateUUID()}isInViewport(){const t=this._core.store.state.scale;if(this.boundingBox.width*t*(this.boundingBox.height*t)<.5)return!1;const s=-this._core.store.state.translateX/this._core.store.state.scale,i=-this._core.store.state.translateY/this._core.store.state.scale;return this.rotatedBoundingBox.x<s+this._core.store.state.viewportWidth/this._core.store.state.scale&&this.rotatedBoundingBox.x+this.rotatedBoundingBox.width>s&&this.rotatedBoundingBox.y<i+this._core.store.state.viewportHeight/this._core.store.state.scale&&this.rotatedBoundingBox.y+this.rotatedBoundingBox.height>i}centerInViewport(){const{viewportWidth:t,viewportHeight:s,translateX:i,translateY:e,scale:h}=this._core.store.state,{x:n,y:r,width:o,height:a}=this.rotatedBoundingBox;this.updatePosition(this.translateX+((t/2-i)/h-(n+o/2)),this.translateY+((s/2-e)/h-(r+a/2)))}update(){this._core.store.objects.update(this)}move(t,s,i,e){const h=(s-e)/this._core.store.state.scale;this.translateX+=(t-i)/this._core.store.state.scale,this.translateY+=h,this._core.store.objects.update(this)}resize(t,s,i,e){i<=1||e<=1||(this.width=i,this.height=e,this.translateX=t,this.translateY=s,this._core.store.objects.update(this),this._core.anchorManager.updateAnchorsForObject(this.id))}rotate(t){this.rotation=t,this._core.store.objects.update(this)}clone(){const t=Object.create(Object.getPrototypeOf(this));return Object.assign(t,this),t.id=this.id,t}copy(){const t=Object.create(Object.getPrototypeOf(this));return Object.assign(t,this),t.id=this.generateId(),t.isMounted=!1,t.isSelected=!1,t.isHovered=!1,t.isInteractive=!1,t.resizing=!1,t.markedForRemoval=!1,t.isVisible=!0,t}serialize(){const{_core:t,_elementRef:s,element:i,totalWidth:e,totalHeight:h,isSelected:n,isHovered:r,isMounted:o,isInteractive:a,resizing:l,markedForRemoval:c,isVisible:u,...f}=this;return structuredClone(f)}deserialize(t){return Object.assign(this,t),this.isSelected=!1,this.isHovered=!1,this.isMounted=!1,this.isInteractive=!1,this.resizing=!1,this.markedForRemoval=!1,this.isVisible=!0,"_adjustedPoints"in this&&(this._adjustedPoints=null),"_clipInfo"in this&&(this._clipInfo=null),this}adoptTransientStateFrom(t){}isClass(t){return this.__class__===t}edit(t){}onAfterUpdate(t){}hitTest(t,s){return!0}hitTestPolygon(t){return o.doPolygonsIntersect(this.rotatedPolygon,t)}updatePosition(t,s){this.translateX=t,this.translateY=s,this._core.store.objects.update(this)}}class l{static average(t,s){return(t+s)/2}static degreesToRadians(t){return t*(Math.PI/180)}}var c,u={},f=(c||(c=1,function(t){Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const{PI:s}=Math,i=s+1e-4,e=[1,1];function h(t,s,i,e=t=>t){return t*e(.5-s*(.5-i))}const{min:n}=Math;function r(t,s,i){let e=n(1,s/i);return n(1,t+(n(1,1-e)-t)*(.275*e))}function o(t,s){return[t[0]+s[0],t[1]+s[1]]}function a(t,s,i){return t[0]=s[0]+i[0],t[1]=s[1]+i[1],t}function l(t,s){return[t[0]-s[0],t[1]-s[1]]}function c(t,s,i){return t[0]=s[0]-i[0],t[1]=s[1]-i[1],t}function u(t,s){return[t[0]*s,t[1]*s]}function f(t,s,i){return t[0]=s[0]*i,t[1]=s[1]*i,t}function d(t){return[t[1],-t[0]]}function g(t,s){let i=s[0];return t[0]=s[1],t[1]=-i,t}function p(t,s){return t[0]*s[0]+t[1]*s[1]}function m(t,s){return t[0]===s[0]&&t[1]===s[1]}function M(t,s){let i=t[0]-s[0],e=t[1]-s[1];return i*i+e*e}function x(t){return function(t,s){return[t[0]/s,t[1]/s]}(t,function(t){return Math.hypot(t[0],t[1])}(t))}function y(t,s){return Math.hypot(t[1]-s[1],t[0]-s[0])}function w(t,s,i){let e=Math.sin(i),h=Math.cos(i),n=t[0]-s[0],r=t[1]-s[1];return[n*h-r*e+s[0],n*e+r*h+s[1]]}function b(t,s,i,e){let h=Math.sin(e),n=Math.cos(e),r=s[0]-i[0],o=s[1]-i[1],a=r*h+o*n;return t[0]=r*n-o*h+i[0],t[1]=a+i[1],t}function v(t,s,i){return o(t,u(l(s,t),i))}function k(t,s,i,e){let h=i[1]-s[1];return t[0]=s[0]+(i[0]-s[0])*e,t[1]=s[1]+h*e,t}function $(t,s,i){return o(t,u(s,i))}const z=[0,0],I=[0,0],P=[0,0];function j(t,s){let e=$(t,x(d(l(t,o(t,[1,1])))),-s),h=[],n=1/13;for(let s=n;s<=1;s+=n)h.push(w(e,t,2*i*s));return h}function L(t,s,e){let h=[],n=1/e;for(let e=n;e<=1;e+=n)h.push(w(s,t,i*e));return h}function C(t,s,i){let e=l(s,i),h=u(e,.5),n=u(e,.51);return[l(t,h),l(t,n),o(t,n),o(t,h)]}function A(t,s,e,h){let n=[],r=$(t,s,e),o=1/h;for(let s=o;s<1;s+=o)n.push(w(r,t,3*i*s));return n}function B(t,s,i){return[o(t,u(s,i)),o(t,u(s,.99*i)),l(t,u(s,.99*i)),l(t,u(s,i))]}function _(t,s,i){return!1===t||void 0===t?0:!0===t?Math.max(s,i):t}function R(t,s={}){let{size:e=16,smoothing:n=.5,thinning:u=.5,simulatePressure:m=!0,easing:x=t=>t,start:y={},end:w={},last:v=!1}=s,{cap:$=!0,easing:R=t=>t*(2-t)}=y,{cap:S=!0,easing:T=t=>--t*t*t+1}=w;if(0===t.length||e<=0)return[];let X,Y=t[t.length-1].runningLength,D=_(y.taper,e,Y),O=_(w.taper,e,Y),E=(e*n)**2,V=[],F=[],W=function(t,s,i){return t.slice(0,10).reduce(((t,e)=>{let h=e.pressure;return s&&(h=r(t,e.distance,i)),(t+h)/2}),t[0].pressure)}(t,m,e),H=h(e,u,t[t.length-1].pressure,x),U=t[0].vector,K=t[0].point,Q=K,Z=K,q=Q,G=!1;for(let s=0;s<t.length;s++){let{pressure:n}=t[s],{point:d,vector:y,distance:w,runningLength:v}=t[s],$=s===t.length-1;if(!$&&Y-v<3)continue;u?(m&&(n=r(W,w,e)),H=h(e,u,n,x)):H=e/2,void 0===X&&(X=H);let j=v<D?R(v/D):1,L=Y-v<O?T((Y-v)/O):1;H=Math.max(.01,H*Math.min(j,L));let C=($?t[s]:t[s+1]).vector,A=$?1:p(y,C),B=null!==A&&A<0;if(p(y,U)<0&&!G||B){g(z,U),f(z,z,H);for(let t=0;t<=1;t+=.07692307692307693)c(I,d,z),b(I,I,d,i*t),Z=[I[0],I[1]],V.push(Z),a(P,d,z),b(P,P,d,i*-t),q=[P[0],P[1]],F.push(q);K=Z,Q=q,B&&(G=!0)}else G=!1,$?(g(z,y),f(z,z,H),V.push(l(d,z)),F.push(o(d,z))):(k(z,C,y,A),g(z,z),f(z,z,H),c(I,d,z),Z=[I[0],I[1]],(s<=1||M(K,Z)>E)&&(V.push(Z),K=Z),a(P,d,z),q=[P[0],P[1]],(s<=1||M(Q,q)>E)&&(F.push(q),Q=q),W=n,U=y)}let N=[t[0].point[0],t[0].point[1]],J=t.length>1?[t[t.length-1].point[0],t[t.length-1].point[1]]:o(t[0].point,[1,1]),tt=[],st=[];if(1===t.length){if(!D&&!O||v)return j(N,X||H)}else{D||O&&1===t.length||($?tt.push(...L(N,F[0],13)):tt.push(...C(N,V[0],F[0])));let s=d(function(t){return[-t[0],-t[1]]}(t[t.length-1].vector));O||D&&1===t.length?st.push(J):S?st.push(...A(J,s,H,29)):st.push(...B(J,s,H))}return V.concat(st,F.reverse(),tt)}const S=[0,0];function T(t){return null!=t&&t>=0}function X(t,s={}){let{streamline:i=.5,size:h=16,last:n=!1}=s;if(0===t.length)return[];let r=.15+.85*(1-i),a=Array.isArray(t[0])?t:t.map((({x:t,y:s,pressure:i=.5})=>[t,s,i]));if(2===a.length){let t=a[1];a=a.slice(0,-1);for(let s=1;s<5;s++)a.push(v(a[0],t,s/4))}1===a.length&&(a=[...a,[...o(a[0],e),...a[0].slice(2)]]);let l=[{point:[a[0][0],a[0][1]],pressure:T(a[0][2])?a[0][2]:.25,vector:[...e],distance:0,runningLength:0}],u=!1,f=0,d=l[0],g=a.length-1;for(let t=1;t<a.length;t++){let s=n&&t===g?[a[t][0],a[t][1]]:v(d.point,a[t],r);if(m(d.point,s))continue;let i=y(s,d.point);if(f+=i,t<g&&!u){if(f<h)continue;u=!0}c(S,d.point,s),d={point:s,pressure:T(a[t][2])?a[t][2]:.5,vector:x(S),distance:i,runningLength:f},l.push(d)}return l[0].vector=l[1]?.vector||[0,0],l}function Y(t,s={}){return R(X(t,s),s)}t.default=Y,t.getStroke=Y,t.getStrokeOutlinePoints=R,t.getStrokePoints=X}(u)),u);class d extends a{__class__="KritzelPath";points;d;stroke={light:"none",dark:"none"};strokeWidth;lineSlack=.5;fill;x=0;y=0;height=0;width=0;scale=1;options;isVisible=!0;isDebugInfoVisible=!0;isCompleted=!1;_adjustedPoints=null;get viewBox(){return`0 0 ${this.width} ${this.height}`}constructor(t){super(),this.options=t,this.points=t?.points??[],this.translateX=t?.translateX??0,this.translateY=t?.translateY??0,this.rotation=l.degreesToRadians(t?.rotation??0),this.scale=t?.scale??1,this.strokeWidth=t?.strokeWidth??8,this.fill=t?.fill??{light:"#000000",dark:"#ffffff"},this.d=this.generateSvgPath(),this.updateDimensions()}static create(t,s){const i=new d;return i._core=t,i.id=i.generateId(),i.workspaceId=t.store.state.activeWorkspace.id,i.userId=t.user?.id,i.options=s,i.points=s?.points??[],i.translateX=s?.translateX??0,i.translateY=s?.translateY??0,i.rotation=l.degreesToRadians(s?.rotation??0),i.scale=s?.scale??1,i.strokeWidth=s?.strokeWidth??8,i.fill=s?.fill??{light:"#000000",dark:"#ffffff"},i.opacity=s?.opacity??1,i.zIndex=t.store.currentZIndex,i.d=i.generateSvgPath(),i.updateDimensions(),i}copy(){const t=super.copy();return this.points&&(t.points=this.points.map((t=>[...t]))),t}deserialize(t){const s=super.deserialize(t);return this.d=this.generateSvgPath(),s}resize(t,s,i,e){if(i<=1||e<=1)return;const h=i/this.width,n=e/this.height;if(this.width=i,this.height=e,1===this.points.length){const t=this.points[0],s=Math.max(0,i-this.strokeWidth)/h,r=Math.max(0,e-this.strokeWidth)/n;this.points.push([t[0]+s,t[1]+r])}this.points=this.points.map((([t,s])=>[t*h,s*n])),this.d=this.generateSvgPath(),this.width=Math.max(...this.points.map((t=>t[0])))-Math.min(...this.points.map((t=>t[0])))+this.strokeWidth,this.height=Math.max(...this.points.map((t=>t[1])))-Math.min(...this.points.map((t=>t[1])))+this.strokeWidth,this.x=Math.min(...this.points.map((t=>t[0])))-this.strokeWidth/2,this.y=Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2,null!==t&&(this.translateX=t),null!==s&&(this.translateY=s),this._adjustedPoints=null,this._core.store.objects.update(this)}rotate(t){this.rotation=t,this._adjustedPoints=null,this._core.store.objects.update(this)}move(t,s,i,e){const h=(s-e)/this._core.store.state.scale;this.translateX+=(t-i)/this._core.store.state.scale,this.translateY+=h,this._adjustedPoints=null,this._core.store.objects.update(this)}hitTest(t,s){const i=this.strokeWidth/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),1===this._adjustedPoints.length){const e=this._adjustedPoints[0];return this.pointToLineSegmentDistance(t,s,e[0],e[1],e[0],e[1])<=i}for(let e=0;e<this._adjustedPoints.length-1;e++){const h=this._adjustedPoints[e],n=this._adjustedPoints[e+1];if(this.pointToLineSegmentDistance(t,s,h[0],h[1],n[0],n[1])<=i)return!0}return!1}hitTestPolygon(t){const s=this.strokeWidth/this.scale/2;null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const i=[{x:t.bottomLeft.x,y:t.bottomLeft.y},{x:t.bottomRight.x,y:t.bottomRight.y},{x:t.topRight.x,y:t.topRight.y},{x:t.topLeft.x,y:t.topLeft.y}];for(const[t,s]of this._adjustedPoints)if(o.isPointInPolygon({x:t,y:s},i))return!0;for(const t of i)if(this.hitTest(t.x,t.y))return!0;for(let t=0;t<this._adjustedPoints.length-1;t++){const s={x:this._adjustedPoints[t][0],y:this._adjustedPoints[t][1]},e={x:this._adjustedPoints[t+1][0],y:this._adjustedPoints[t+1][1]};for(let t=0;t<i.length;t++)if(o.intersectLines(s,e,i[t],i[(t+1)%i.length]))return!0}for(let t=0;t<this._adjustedPoints.length-1;t++){const e=this._adjustedPoints[t],h=this._adjustedPoints[t+1];for(let t=0;t<i.length;t++){const n=i[t],r=i[(t+1)%i.length],o=this.pointToLineSegmentDistance(n.x,n.y,e[0],e[1],h[0],h[1]),a=this.pointToLineSegmentDistance(r.x,r.y,e[0],e[1],h[0],h[1]),l=this.pointToLineSegmentDistance(e[0],e[1],n.x,n.y,r.x,r.y),c=this.pointToLineSegmentDistance(h[0],h[1],n.x,n.y,r.x,r.y);if(Math.min(o,a,l,c)<=s)return!0}}return!1}updatePosition(t,s){this.translateX=t,this.translateY=s,this._adjustedPoints=null,this._core.store.objects.update(this)}onAfterUpdate(t){t.includes("strokeWidth")&&(this.d=this.generateSvgPath(),this.updateBoundingBox(),this._adjustedPoints=null)}computeAdjustedPoints(){if(!this.points?.length)return[];const t=this.rotation,s=Math.cos(t),i=Math.sin(t),e=this.points.map((t=>t[0])),h=this.points.map((t=>t[1])),n={x:(Math.min(...e)+Math.max(...e))/2,y:(Math.min(...h)+Math.max(...h))/2},{x:r,y:o}=n;return this.points.map((([t,e])=>{const h=t-r,n=e-o;return[r+h*s-n*i,o+h*i+n*s]})).map((([t,s])=>[Math.abs(t-this.x)/this.scale+this.translateX,Math.abs(s-this.y)/this.scale+this.translateY]))}pointToLineSegmentDistance(t,s,i,e,h,n){const r=h-i,o=n-e,a=r*r+o*o;let l,c,u=-1;0!==a&&(u=((t-i)*r+(s-e)*o)/a),u<0?(l=i,c=e):u>1?(l=h,c=n):(l=i+u*r,c=e+u*o);const f=t-l,d=s-c;return Math.sqrt(f*f+d*d)}updateDimensions(){const t=Math.min(...this.points.map((t=>t[0])))-this.strokeWidth/2,s=Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2,i=Math.max(...this.points.map((t=>t[0])))+this.strokeWidth/2,e=Math.max(...this.points.map((t=>t[1])))+this.strokeWidth/2;this.width=i-t+this.lineSlack,this.height=e-s+this.lineSlack,this.x=t,this.y=s,this.translateX=(this.x+this.translateX)/this.scale,this.translateY=(this.y+this.translateY)/this.scale}updateBoundingBox(){const t=Math.min(...this.points.map((t=>t[0])))-this.strokeWidth/2,s=Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2,i=Math.max(...this.points.map((t=>t[0])))+this.strokeWidth/2,e=Math.max(...this.points.map((t=>t[1])))+this.strokeWidth/2;this.width=i-t+this.lineSlack,this.height=e-s+this.lineSlack,this.x=t,this.y=s}generateSvgPath(){const t=this.getStrokeFromPoints(this.points,this.strokeWidth),s=this.points.length?Math.min(...this.points.map((t=>t[0])))-this.strokeWidth/2:0,i=this.points.length?Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2:0;return this.getSvgPathFromStroke(t,s,i)}getStrokeFromPoints(t,s){return f.getStroke(t,{size:s,thinning:.5,smoothing:.5,streamline:.5,easing:t=>t,simulatePressure:!0,last:!0,start:{cap:!0,taper:0,easing:t=>t},end:{cap:!0,taper:0,easing:t=>t}})}getSvgPathFromStroke(t,s=0,i=0,e=!0){const h=t.length;if(h<4)return"";const n=t[0],r=t[1],o=t[2],a=n[1]-i,c=r[0]-s,u=r[1]-i,f=o[0]-s,d=o[1]-i;let g=`M${(n[0]-s).toFixed(2)},${a.toFixed(2)} Q${c.toFixed(2)},${u.toFixed(2)} ${l.average(c,f).toFixed(2)},${l.average(u,d).toFixed(2)} T`;for(let e=2,n=h-1;e<n;e++){const h=t[e],n=t[e+1],r=h[1]-i,o=n[1]-i;g+=`${l.average(h[0]-s,n[0]-s).toFixed(2)},${l.average(r,o).toFixed(2)} `}return e&&(g+="Z"),g}isLowRes(){if(!this._core)return!1;const t=this._core.store.state.scale;return this.boundingBox.width*t*(this.boundingBox.height*t)<500}getClipPoint(t){const s=this.centerX,i=this.centerY,e=this.strokeWidth/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),this._adjustedPoints.length<1)return null;let h=!0;for(let n=1;n<=32;n++){const r=n/32,o=t.x+(s-t.x)*r,a=t.y+(i-t.y)*r;let l=1/0;if(1===this._adjustedPoints.length){const t=this._adjustedPoints[0],s=o-t[0],i=a-t[1];l=Math.sqrt(s*s+i*i)}else for(let t=0;t<this._adjustedPoints.length-1;t++){const s=this._adjustedPoints[t],i=this._adjustedPoints[t+1],e=this.pointToLineSegmentDistance(o,a,s[0],s[1],i[0],i[1]);e<l&&(l=e)}const c=l<=e;if(h&&c){let h=(n-1)/32,o=r;for(let n=0;n<8;n++){const n=(h+o)/2,r=t.x+(s-t.x)*n,a=t.y+(i-t.y)*n;let l=1/0;if(1===this._adjustedPoints.length){const t=this._adjustedPoints[0],s=r-t[0],i=a-t[1];l=Math.sqrt(s*s+i*i)}else for(let t=0;t<this._adjustedPoints.length-1;t++){const s=this._adjustedPoints[t],i=this._adjustedPoints[t+1],e=this.pointToLineSegmentDistance(r,a,s[0],s[1],i[0],i[1]);e<l&&(l=e)}l<=e?o=n:h=n}const a=(h+o)/2;return{x:t.x+(s-t.x)*a,y:t.y+(i-t.y)*a}}h=!c}return null}}class g extends a{__class__="KritzelLine";startX;startY;endX;endY;controlX;controlY;stroke;strokeWidth;scale=1;options;startAnchor;endAnchor;arrows;isVisible=!0;isDebugInfoVisible=!0;isCompleted=!1;_adjustedPoints=null;_clipInfo=null;get d(){return void 0!==this.controlX&&void 0!==this.controlY?`M ${this.startX} ${this.startY} Q ${this.controlX} ${this.controlY} ${this.endX} ${this.endY}`:`M ${this.startX} ${this.startY} L ${this.endX} ${this.endY}`}get viewBox(){return`${this.x} ${this.y} ${this.width} ${this.height}`}constructor(t){super(),this.options=t,this.startX=t?.startX??0,this.startY=t?.startY??0,this.endX=t?.endX??0,this.endY=t?.endY??0,this.controlX=t?.controlX,this.controlY=t?.controlY,this.translateX=t?.translateX??0,this.translateY=t?.translateY??0,this.rotation=l.degreesToRadians(t?.rotation??0),this.scale=t?.scale??1,this.strokeWidth=t?.strokeWidth??4,this.stroke=t?.stroke??{light:"#000000",dark:"#ffffff"},this.startAnchor=t?.startAnchor,this.endAnchor=t?.endAnchor,this.arrows=t?.arrows,this.updateDimensions()}static create(t,s){const i=new g;return i._core=t,i.id=i.generateId(),i.workspaceId=t.store.state.activeWorkspace.id,i.userId=t.user?.id,i.options=s,i.startX=s?.startX??0,i.startY=s?.startY??0,i.endX=s?.endX??0,i.endY=s?.endY??0,i.controlX=s?.controlX,i.controlY=s?.controlY,i.translateX=s?.translateX??0,i.translateY=s?.translateY??0,i.rotation=l.degreesToRadians(s?.rotation??0),i.scale=s?.scale??1,i.strokeWidth=s?.strokeWidth??4,i.stroke=s?.stroke??{light:"#000000",dark:"#ffffff"},i.opacity=s?.opacity??1,i.startAnchor=s?.startAnchor,i.endAnchor=s?.endAnchor,i.arrows=s?.arrows,i.zIndex=t.store.currentZIndex,i.updateDimensions(),i}resize(t,s,i,e){if(i<=1||e<=1)return;const h=i/this.width,n=e/this.height;this.startX=this.startX*h,this.startY=this.startY*n,this.endX=this.endX*h,this.endY=this.endY*n,void 0!==this.controlX&&void 0!==this.controlY&&(this.controlX=this.controlX*h,this.controlY=this.controlY*n);const{minX:r,minY:o,maxX:a,maxY:l}=this.calculateBoundingBox();this.width=a-r,this.height=l-o,this.x=r,this.y=o,this.translateX=t,this.translateY=s,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this),this._core.anchorManager.updateAnchorsForObject(this.id),this.startAnchor&&this._core.anchorManager.updateAnchorsForObject(this.startAnchor.objectId),this.endAnchor&&this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId)}rotate(t){this.rotation=t,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}move(t,s,i,e){const h=(s-e)/this._core.store.state.scale;this.translateX+=(t-i)/this._core.store.state.scale,this.translateY+=h,this.startAnchor&&this._core.anchorManager.updateAnchorsForObject(this.startAnchor.objectId),this.endAnchor&&this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId),this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}hitTest(t,s){const i=Math.max(this.strokeWidth,20)/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),void 0!==this.controlX&&void 0!==this.controlY){const e=this.getClipInfo();return this.pointToBezierDistance(t,s,e.start?.t??0,e.end?.t??1)<=i}const e=this.getClipInfo(),h=e.start?[e.start.x,e.start.y]:this._adjustedPoints[0],n=e.end?[e.end.x,e.end.y]:this._adjustedPoints[1];return this.pointToLineSegmentDistance(t,s,h[0],h[1],n[0],n[1])<=i}hitTestPolygon(t){const s=this.strokeWidth/this.scale/2;null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const i=this.getClipInfo(),e=[{x:t.bottomLeft.x,y:t.bottomLeft.y},{x:t.bottomRight.x,y:t.bottomRight.y},{x:t.topRight.x,y:t.topRight.y},{x:t.topLeft.x,y:t.topLeft.y}],h=i.start?[i.start.x,i.start.y]:this._adjustedPoints[0],n=i.end?[i.end.x,i.end.y]:this._adjustedPoints[1],r=[h,n];for(const[t,s]of r)if(o.isPointInPolygon({x:t,y:s},e))return!0;for(const t of e)if(this.hitTest(t.x,t.y))return!0;if(void 0!==this.controlX&&void 0!==this.controlY){const t=this._adjustedPoints[0],h=this._adjustedPoints[1],n=this.computeAdjustedControlPoint(),r=i.start?.t??0,a=i.end?.t??1,l=20;for(let i=0;i<=l;i++){const c=r+i/l*(a-r),u=1-c,f=u*u*t[0]+2*u*c*n[0]+c*c*h[0],d=u*u*t[1]+2*u*c*n[1]+c*c*h[1];if(o.isPointInPolygon({x:f,y:d},e))return!0;for(let t=0;t<e.length;t++){const i=e[t],h=e[(t+1)%e.length];if(this.pointToLineSegmentDistance(f,d,i.x,i.y,h.x,h.y)<=s)return!0}}return!1}const a={x:h[0],y:h[1]},l={x:n[0],y:n[1]};for(let t=0;t<e.length;t++){const i=e[t],h=e[(t+1)%e.length];if(o.intersectLines(a,l,i,h))return!0;const n=this.pointToLineSegmentDistance(i.x,i.y,a.x,a.y,l.x,l.y),r=this.pointToLineSegmentDistance(h.x,h.y,a.x,a.y,l.x,l.y),c=this.pointToLineSegmentDistance(a.x,a.y,i.x,i.y,h.x,h.y),u=this.pointToLineSegmentDistance(l.x,l.y,i.x,i.y,h.x,h.y);if(Math.min(n,r,c,u)<=s)return!0}return!1}updatePosition(t,s){this.translateX=t,this.translateY=s,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}updateEndpoint(t,s,i){"start"===t?(this.startX=s,this.startY=i):(this.endX=s,this.endY=i);const e=this.width,h=this.height,{minX:n,minY:r,maxX:o,maxY:a}=this.calculateBoundingBox(),l=n-this.x,c=r-this.y,u=o-n,f=a-r,d=(u-e)/2,g=(f-h)/2;this.x=n,this.y=r,this.width=u,this.height=f;const p=Math.cos(this.rotation),m=Math.sin(this.rotation),M=l+d,x=c+g,y=M*m+x*p-g;this.translateX+=(M*p-x*m-d)/this.scale,this.translateY+=y/this.scale,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}updateControlPoint(t,s){this.controlX=t,this.controlY=s;const i=this.width,e=this.height,{minX:h,minY:n,maxX:r,maxY:o}=this.calculateBoundingBox(),a=h-this.x,l=n-this.y,c=r-h,u=o-n,f=(c-i)/2,d=(u-e)/2;this.x=h,this.y=n,this.width=c,this.height=u;const g=Math.cos(this.rotation),p=Math.sin(this.rotation),m=a+f,M=l+d,x=m*p+M*g-d;this.translateX+=(m*g-M*p-f)/this.scale,this.translateY+=x/this.scale,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}computeAdjustedPoints(){const t=[[this.startX,this.startY],[this.endX,this.endY]],s=this.rotation,i=Math.cos(s),e=Math.sin(s),h=t.map((t=>t[0])),n=t.map((t=>t[1])),r={x:(Math.min(...h)+Math.max(...h))/2,y:(Math.min(...n)+Math.max(...n))/2},{x:o,y:a}=r;return t.map((([t,s])=>{const h=t-o,n=s-a;return[o+h*i-n*e,a+h*e+n*i]})).map((([t,s])=>[(t-this.x)/this.scale+this.translateX,(s-this.y)/this.scale+this.translateY]))}pointToLineSegmentDistance(t,s,i,e,h,n){const r=h-i,o=n-e,a=r*r+o*o;let l,c,u=-1;0!==a&&(u=((t-i)*r+(s-e)*o)/a),u<0?(l=i,c=e):u>1?(l=h,c=n):(l=i+u*r,c=e+u*o);const f=t-l,d=s-c;return Math.sqrt(f*f+d*d)}pointToBezierDistance(t,s,i=0,e=1){null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const h=this._adjustedPoints[0],n=this._adjustedPoints[1],r=this.computeAdjustedControlPoint();let o=1/0;for(let a=0;a<=20;a++){const l=i+a/20*(e-i),c=1-l,u=t-(c*c*h[0]+2*c*l*r[0]+l*l*n[0]),f=s-(c*c*h[1]+2*c*l*r[1]+l*l*n[1]),d=Math.sqrt(u*u+f*f);d<o&&(o=d)}return o}getClipInfo(){if(this._clipInfo)return this._clipInfo;const t=this.endAnchor,s={};if(this.startAnchor){const t=this._core.anchorManager.findAnchorTarget(this,"start");if(t){const i=this._core.anchorManager.computeAnchorClipInfo(this,"start",t);i&&(s.start={x:i.worldX,y:i.worldY,t:i.t})}}if(t){const t=this._core.anchorManager.findAnchorTarget(this,"end");if(t){const i=this._core.anchorManager.computeAnchorClipInfo(this,"end",t);i&&(s.end={x:i.worldX,y:i.worldY,t:i.t})}}return this._clipInfo=s,s}computeAdjustedControlPoint(){if(void 0===this.controlX||void 0===this.controlY)return[(this.startX+this.endX)/2,(this.startY+this.endY)/2];const t=this.rotation,s=Math.cos(t),i=Math.sin(t),e=[this.startX,this.endX],h=[this.startY,this.endY],n={x:(Math.min(...e)+Math.max(...e))/2,y:(Math.min(...h)+Math.max(...h))/2},{x:r,y:o}=n,a=this.controlX-r,l=this.controlY-o;return[(r+a*s-l*i-this.x)/this.scale+this.translateX,(o+a*i+l*s-this.y)/this.scale+this.translateY]}get rotatedPolygon(){const t=this.padding,{minX:s,minY:i,maxX:e,maxY:h}=g.calculateBoundingBox(this.startX,this.startY,this.endX,this.endY,this.controlX,this.controlY,this.strokeWidth),n=s-this.x+t,r=i-this.y+t,o=e-this.x+t,a=h-this.y+t,l={x:n,y:r},c={x:o,y:r},u={x:o,y:a},f={x:n,y:a},d=this.totalWidth/2,p=this.totalHeight/2,m=this.rotation,M=Math.cos(m),x=Math.sin(m),y=t=>({x:((t.x-d)*M-(t.y-p)*x+d)/this.scale+this.translateX,y:((t.x-d)*x+(t.y-p)*M+p)/this.scale+this.translateY});return{topLeft:y(l),topRight:y(c),bottomRight:y(u),bottomLeft:y(f)}}static calculateBoundingBox(t,s,i,e,h,n,r){let o=Math.min(t,i),a=Math.min(s,e),l=Math.max(t,i),c=Math.max(s,e);if(void 0!==h&&void 0!==n){const r=t-2*h+i;if(0!==r){const s=(t-h)/r;if(s>0&&s<1){const e=(1-s)*(1-s)*t+2*(1-s)*s*h+s*s*i;o=Math.min(o,e),l=Math.max(l,e)}}const u=s-2*n+e;if(0!==u){const t=(s-n)/u;if(t>0&&t<1){const i=(1-t)*(1-t)*s+2*(1-t)*t*n+t*t*e;a=Math.min(a,i),c=Math.max(c,i)}}}const u=r/2;return{minX:o-u,minY:a-u,maxX:l+u,maxY:c+u}}calculateBoundingBox(){return g.calculateBoundingBox(this.startX,this.startY,this.endX,this.endY,this.controlX,this.controlY,this.strokeWidth)}serialize(){const t=super.serialize();return delete t._adjustedPoints,delete t._clipInfo,t}deserialize(t){const s=super.deserialize(t);return this._adjustedPoints=null,this._clipInfo=null,s}updateDimensions(){const{minX:t,minY:s,maxX:i,maxY:e}=this.calculateBoundingBox();this.width=i-t,this.height=e-s,this.x=t,this.y=s,this.translateX=(this.x+this.translateX)/this.scale,this.translateY=(this.y+this.translateY)/this.scale}get startMarkerId(){return`arrow-start-${this.id}`}get endMarkerId(){return`arrow-end-${this.id}`}getArrowSize(t){const s="start"===t?this.arrows?.start:this.arrows?.end;return s?.size??3*this.strokeWidth}getArrowFill(t){const s="start"===t?this.arrows?.start:this.arrows?.end;return r.resolveThemeColor(s?.fill??this.stroke)}getArrowPath(t="triangle"){switch(t){case"triangle":default:return"M 0 0 L 10 5 L 0 10 z";case"open":return"M 0 0 L 10 5 L 0 10";case"diamond":return"M 0 5 L 5 0 L 10 5 L 5 10 z";case"circle":return"M 5,0 A 5,5 0 1,1 5,10 A 5,5 0 1,1 5,0"}}get hasStartArrow(){return!0===this.arrows?.start?.enabled}get hasEndArrow(){return!0===this.arrows?.end?.enabled}}const p=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}core;showEdgeIndicators=!0;edgeIndicatorPadding=8;remoteCursors=new Map;objectVersion=0;cleanupIntervalId;objectChangeRafId=null;removeAwarenessChangeListener;removeObjectsChangeListener;componentDidLoad(){this.removeAwarenessChangeListener=this.core.store.objects?.onAwarenessChange((t=>{this.handleAwarenessChange(t)})),this.removeObjectsChangeListener=this.core.store.objects?.onObjectsChange((()=>{this.handleRemoteObjectChange()})),this.cleanupIntervalId=setInterval((()=>{this.cleanupStaleCursors()}),3e3),this.cleanupIntervalId&&"function"==typeof this.cleanupIntervalId.unref&&this.cleanupIntervalId.unref()}disconnectedCallback(){this.removeAwarenessChangeListener&&(this.removeAwarenessChangeListener(),this.removeAwarenessChangeListener=void 0),this.removeObjectsChangeListener&&(this.removeObjectsChangeListener(),this.removeObjectsChangeListener=void 0),this.cleanupIntervalId&&"function"==typeof globalThis.clearInterval&&(globalThis.clearInterval(this.cleanupIntervalId),this.cleanupIntervalId=void 0),null!==this.objectChangeRafId&&"function"==typeof globalThis.cancelAnimationFrame&&(globalThis.cancelAnimationFrame(this.objectChangeRafId),this.objectChangeRafId=null)}handleAwarenessChange(t){const s=this.core.store.objects?.localClientId,i=Date.now(),e=new Map(this.remoteCursors),h=new Set;t.forEach(((t,n)=>{if(n===s)return;if(!t.user)return;h.add(n);const r=t.user,o=t.cursor,a=t.activeObjectId||null,l=t.selectionBox||null,c=e.get(n);e.set(n,{clientId:n,user:r,cursor:o,activeObjectId:a,selectionBox:l,lastUpdated:i,lastCursorMove:!c||!c.cursor!=!o||o&&c.cursor&&(o.x!==c.cursor.x||o.y!==c.cursor.y)?i:c?.lastCursorMove??i})}));for(const t of e.keys())h.has(t)||e.delete(t);this.remoteCursors=e}cleanupStaleCursors(){const t=Date.now();let s=!1;const i=new Map(this.remoteCursors);for(const[e,h]of i)t-h.lastUpdated>3e4?(i.delete(e),s=!0):!s&&t-h.lastCursorMove>1e4&&(s=!0);s&&(this.remoteCursors=i)}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 s=this.core.store.objects?.findById(t);if(!s)return null;if(s instanceof d&&!s.isCompleted){const t=s.points[s.points.length-1];return t?{x:(t[0]-s.x)/s.scale+s.translateX,y:(t[1]-s.y)/s.scale+s.translateY}:null}return s instanceof g&&!s.isCompleted?{x:(s.endX-s.x)/s.scale+s.translateX,y:(s.endY-s.y)/s.scale+s.translateY}:null}worldToScreen(t,s){const{scale:i,translateX:e,translateY:h}=this.core.store.state;return{x:t*i+e,y:s*i+h}}isInViewport(t,s){const{viewportWidth:i,viewportHeight:e}=this.core.store.state;return t>=0&&t<=i&&s>=0&&s<=e}clampToEdge(t,s){const{viewportWidth:i,viewportHeight:e}=this.core.store.state,h=this.edgeIndicatorPadding,n=Math.max(h,Math.min(i-h,t)),r=Math.max(h,Math.min(e-h,s)),o=n-h,a=i-h-n,l=r-h;let c="top";const u=Math.min(o,a,l,e-h-r);return c=u===o?"left":u===a?"right":u===l?"top":"bottom",{x:n,y:r,angle:Math.atan2(s-r,t-n),edge:c}}getUserDisplayName(t){return t.displayName?t.displayName:t.firstName||t.lastName?[t.firstName,t.lastName].filter(Boolean).join(" "):"Unknown"}getInitials(t){const s=t.trim().split(/\s+/);return 0===s.length||1===s.length&&s[0].length<=1?t:1===s.length?s[0][0].toUpperCase():(s[0][0]+s[s.length-1][0]).toUpperCase()}render(){const t=Array.from(this.remoteCursors.values());return i(e,{key:"9be6694250bafe011be27301d1c7a53fc7957657"},t.map((t=>{if(!t.cursor)return null;let s,i=!1;if(t.activeObjectId){const e=this.getActiveObjectTip(t.activeObjectId);e?(i=!0,s=this.worldToScreen(e.x,e.y)):s=this.worldToScreen(t.cursor.x,t.cursor.y)}else s=this.worldToScreen(t.cursor.x,t.cursor.y);const e=this.isInViewport(s.x,s.y),h=this.isStale(t),n=t.user.color||"#6B7280";return e?this.renderCursor(t,s.x,s.y,n,h,i):this.showEdgeIndicators?this.renderEdgeIndicator(t,s.x,s.y,n,h,i):null})),t.map((t=>{if(!t.selectionBox)return null;const s=t.user.color||"#6B7280",e=t.selectionBox,h=this.worldToScreen(e.x,e.y),{scale:n}=this.core.store.state;return i("div",{key:`selection-box-${t.clientId}`,class:"remote-selection-box",style:{transform:`translate(${h.x}px, ${h.y}px)`,width:e.width*n+"px",height:e.height*n+"px",backgroundColor:`color-mix(in srgb, ${s} 20%, transparent)`,borderColor:`color-mix(in srgb, ${s} 50%, transparent)`}})})))}renderCursor(t,s,e,h,n,r){return i("div",{key:`cursor-${t.clientId}`,class:{"awareness-cursor":!0,stale:n,"tracking-object":r},style:{transform:`translate(${s}px, ${e}px)`}},i("svg",{class:"cursor-arrow",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M5 3L19 12L12 13L9 20L5 3Z",fill:h,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),i("span",{class:"cursor-label",style:{backgroundColor:h}},this.getUserDisplayName(t.user)))}renderEdgeIndicator(t,s,e,h,n,r){const o=this.clampToEdge(s,e),a=180*o.angle/Math.PI+90;let l=0,c=0;"left"===o.edge?l=20:"right"===o.edge?l=-20:"top"===o.edge?c=20:"bottom"===o.edge&&(c=-20);const u=this.getUserDisplayName(t.user);return i("div",{key:`edge-${t.clientId}`,class:{"edge-indicator":!0,stale:n,"tracking-object":r},style:{transform:`translate(${o.x}px, ${o.y}px)`}},i("svg",{class:{"edge-arrow":!0,stale:n},width:"16",height:"16",viewBox:"0 0 16 16",style:{transform:`rotate(${a}deg)`}},i("path",{d:"M8 1L14 13H2L8 1Z",fill:h,stroke:"#ffffff","stroke-width":"1.5","stroke-linejoin":"round"})),i("span",{class:"edge-label",style:{backgroundColor:h,transform:`translate(${l}px, ${c}px)`}},this.getInitials(u)))}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 m(){"undefined"!=typeof customElements&&["kritzel-awareness-cursors"].forEach((t=>{"kritzel-awareness-cursors"===t&&(customElements.get(h(t))||customElements.define(h(t),p))}))}export{a as K,d as a,g as b,p as c,m as d,l as e,o as f}
@@ -0,0 +1 @@
1
+ import{p as t,H as e,c as o,h as n,d as s,t as l}from"./p-B43upypT.js";import{d as i}from"./p-Df3BwVGy.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.fontFamilyChange=o(this,"fontFamilyChange")}fontOptions=[];selectedFontFamily;fontFamilyChange;handleFontOptionsChange(){this.ensureValidSelectedFont(this.resolveFontOptions())}componentWillLoad(){this.ensureValidSelectedFont(this.resolveFontOptions())}handleDropdownValueChange=t=>{this.fontFamilyChange.emit(t.detail)};ensureValidSelectedFont(t){if(0===t.length)return;const e=this.selectedFontFamily?.trim().toLocaleLowerCase(),o=t.some((t=>t.value.trim().toLocaleLowerCase()===e));e&&o||(this.selectedFontFamily=t[0].value)}resolveFontOptions(){return this.fontOptions}render(){const t=this.resolveFontOptions(),e=t.find((t=>t.value===this.selectedFontFamily)),o=e?.cssFontFamily??this.selectedFontFamily,l=t.map((t=>({value:t.value,label:t.label,style:{fontFamily:t.cssFontFamily??t.value}})));return n(s,{key:"059350f34370f7a291f47a42721ca5d9bb82df49"},n("kritzel-dropdown",{key:"fbd8cf1ae463c7e9b76d0ac754a41de54397058e",options:l,value:this.selectedFontFamily,onValueChanged:this.handleDropdownValueChange,selectStyles:{fontFamily:o}}))}static get watchers(){return{fontOptions:[{handleFontOptionsChange:0}]}}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}.font-style-button.italic-text{font-style:italic}"}},[513,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]},void 0,{fontOptions:[{handleFontOptionsChange:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-font-family","kritzel-dropdown"].forEach((t=>{switch(t){case"kritzel-font-family":customElements.get(l(t))||customElements.define(l(t),r);break;case"kritzel-dropdown":customElements.get(l(t))||i()}}))}export{r as K,a as d}
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-Cv5-yM39.js';
2
- export { N as APP_STATE_MIGRATIONS, A as AssetNotFoundError, P as CURRENT_APP_STATE_SCHEMA_VERSION, Q as CURRENT_WORKSPACE_SCHEMA_VERSION, B as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, z as DEFAULT_LINE_TOOL_CONFIG, y as DEFAULT_TEXT_CONFIG, G as DE_LOCALE, F as EN_LOCALE, J as FR_LOCALE, I as IndexedDBAssetProvider, L as KritzelAlignment, t as KritzelAnchorManager, r as KritzelAssetResolver, K as KritzelBaseObject, i as KritzelBaseTool, j as KritzelBrushTool, p as KritzelCursorHelper, h as KritzelCustomElement, x as KritzelCustomElementRendererRegistry, l as KritzelEraserTool, f as KritzelGroup, d as KritzelImage, m as KritzelImageTool, w as KritzelLicenseManager, e as KritzelLine, k as KritzelLineTool, v as KritzelLocalizationManager, c as KritzelPath, q as KritzelSelectionTool, g as KritzelShape, o as KritzelShapeTool, b as KritzelText, n as KritzelTextTool, u as KritzelThemeManager, s as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, O as WORKSPACE_MIGRATIONS, E as darkTheme, C as lightTheme, M as runMigrations } from './schema.constants-Cv5-yM39.js';
1
+ import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-rIkxAcpB.js';
2
+ export { O as APP_STATE_MIGRATIONS, A as AssetNotFoundError, Q as CURRENT_APP_STATE_SCHEMA_VERSION, R as CURRENT_WORKSPACE_SCHEMA_VERSION, C as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, B as DEFAULT_LINE_TOOL_CONFIG, z as DEFAULT_TEXT_CONFIG, J as DE_LOCALE, G as EN_LOCALE, L as FR_LOCALE, I as IndexedDBAssetProvider, M as KritzelAlignment, t as KritzelAnchorManager, r as KritzelAssetResolver, K as KritzelBaseObject, i as KritzelBaseTool, j as KritzelBrushTool, p as KritzelCursorHelper, h as KritzelCustomElement, x as KritzelCustomElementRendererRegistry, l as KritzelEraserTool, y as KritzelFontRegistry, f as KritzelGroup, d as KritzelImage, m as KritzelImageTool, w as KritzelLicenseManager, e as KritzelLine, k as KritzelLineTool, v as KritzelLocalizationManager, c as KritzelPath, q as KritzelSelectionTool, g as KritzelShape, o as KritzelShapeTool, b as KritzelText, n as KritzelTextTool, u as KritzelThemeManager, s as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, P as WORKSPACE_MIGRATIONS, F as darkTheme, E as lightTheme, N as runMigrations } from './schema.constants-rIkxAcpB.js';
3
3
  import * as Y from 'yjs';
4
4
  import { IndexeddbPersistence } from 'y-indexeddb';
5
5
  import { WebsocketProvider } from 'y-websocket';