kritzel-stencil 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/kritzel-active-users_42.cjs.entry.js +177 -52
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil.cjs.js +1 -1
- package/dist/cjs/{workspace.migrations-CPncKohl.js → workspace.migrations-BPwtowiJ.js} +208 -24
- package/dist/collection/classes/core/core.class.js +27 -19
- package/dist/collection/classes/core/viewport.class.js +3 -0
- package/dist/collection/classes/handlers/key.handler.js +73 -6
- package/dist/collection/classes/handlers/selection.handler.js +36 -2
- package/dist/collection/classes/objects/group.class.js +69 -12
- package/dist/collection/classes/objects/shape.class.js +24 -0
- package/dist/collection/classes/objects/text.class.js +23 -0
- package/dist/collection/classes/tools/text-tool.class.js +46 -10
- package/dist/collection/components/core/kritzel-editor/kritzel-editor.js +28 -7
- package/dist/collection/components/core/kritzel-engine/kritzel-engine.js +64 -18
- package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js +23 -1
- package/dist/collection/constants/version.js +1 -1
- package/dist/collection/themes/dark-theme.js +5 -0
- package/dist/collection/themes/light-theme.js +5 -0
- package/dist/components/index.js +1 -1
- package/dist/components/kritzel-awareness-cursors.js +1 -1
- package/dist/components/kritzel-color-palette.js +1 -1
- package/dist/components/kritzel-color.js +1 -1
- package/dist/components/kritzel-controls.js +1 -1
- package/dist/components/kritzel-editor.js +1 -1
- package/dist/components/kritzel-engine.js +1 -1
- package/dist/components/kritzel-menu-item.js +1 -1
- package/dist/components/kritzel-menu.js +1 -1
- package/dist/components/kritzel-more-menu.js +1 -1
- package/dist/components/kritzel-portal.js +1 -1
- package/dist/components/kritzel-settings.js +1 -1
- package/dist/components/kritzel-split-button.js +1 -1
- package/dist/components/kritzel-stroke-size.js +1 -1
- package/dist/components/kritzel-tool-config.js +1 -1
- package/dist/components/kritzel-workspace-manager.js +1 -1
- package/dist/components/{p-CFzvz-B2.js → p-0YBCp8Wh.js} +1 -1
- package/dist/components/{p-DkT0CXfN.js → p-574MVXxi.js} +1 -1
- package/dist/components/p-BCzbwL4m.js +1 -0
- package/dist/components/p-BLjdzUzs.js +1 -0
- package/dist/components/{p-BFQVg_eQ.js → p-BSEdLfq2.js} +1 -1
- package/dist/components/{p-C3Dwuqka.js → p-BWrxz4mM.js} +1 -1
- package/dist/components/{p-ChqeIKg_.js → p-BYOIzv_f.js} +1 -1
- package/dist/components/{p-CekG3_ce.js → p-Bfa-Amjn.js} +1 -1
- package/dist/components/{p-9ASFIqd0.js → p-BmcAX-1k.js} +1 -1
- package/dist/components/{p-CzIuqMQA.js → p-BtJB7FsW.js} +1 -1
- package/dist/components/{p-C_yfHS4F.js → p-C6Td7I4k.js} +1 -1
- package/dist/components/{p-ChQNi67Z.js → p-D9ifYAtg.js} +1 -1
- package/dist/components/{p-B_rHzy0t.js → p-DE2xDwUM.js} +1 -1
- package/dist/components/{p-CaDBSaxZ.js → p-DFeyobdy.js} +2 -2
- package/dist/components/{p-BHSRRiEg.js → p-DfB7uJ0N.js} +1 -1
- package/dist/components/{p-B2kHVHa_.js → p-u-827ZX7.js} +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/kritzel-active-users_42.entry.js +177 -52
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil.js +1 -1
- package/dist/esm/{workspace.migrations-ytjzXm9B.js → workspace.migrations-C_uxbvuH.js} +208 -24
- package/dist/stencil/index.esm.js +1 -1
- package/dist/stencil/p-4d28c496.entry.js +9 -0
- package/dist/stencil/p-C_uxbvuH.js +1 -0
- package/dist/stencil/stencil.esm.js +1 -1
- package/dist/types/classes/handlers/selection.handler.d.ts +15 -0
- package/dist/types/classes/objects/group.class.d.ts +15 -0
- package/dist/types/classes/objects/shape.class.d.ts +10 -0
- package/dist/types/classes/objects/text.class.d.ts +9 -0
- package/dist/types/classes/tools/text-tool.class.d.ts +26 -8
- package/dist/types/components/core/kritzel-editor/kritzel-editor.d.ts +1 -0
- package/dist/types/components/core/kritzel-engine/kritzel-engine.d.ts +2 -0
- package/dist/types/components/shared/kritzel-portal/kritzel-portal.d.ts +1 -0
- package/dist/types/components.d.ts +7 -2
- package/dist/types/constants/version.d.ts +1 -1
- package/dist/types/interfaces/theme.interface.d.ts +12 -4
- package/package.json +1 -1
- package/dist/components/p-BYX50YSd.js +0 -1
- package/dist/components/p-CjazGGq3.js +0 -1
- package/dist/stencil/p-19e04f32.entry.js +0 -9
- package/dist/stencil/p-ytjzXm9B.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c as i,h as s,d as o,t as r}from"./p-BWj1eE2b.js";import{h as a,d as l,e as n,g as h,f as p}from"./p-
|
|
1
|
+
import{p as e,H as t,c as i,h as s,d as o,t as r}from"./p-BWj1eE2b.js";import{h as a,d as l,e as n,g as h,f as p}from"./p-C6Td7I4k.js";import{a as c}from"./p-BCzbwL4m.js";import{d}from"./p-Bfa-Amjn.js";import{d as m}from"./p-BWrxz4mM.js";import{d as f}from"./p-CBTqCoUx.js";import{d as y}from"./p-C4vg_-vg.js";import{d as g}from"./p-qBqQhAmh.js";import{d as u}from"./p-DDBaFNFi.js";import{d as z}from"./p-A7Ult9iv.js";import{d as k}from"./p-D6KNaj_Y.js";import{d as C}from"./p-DemKKw9U.js";import{d as x}from"./p-DEd2L0e3.js";import{d as v}from"./p-BtJB7FsW.js";class b{static getToolConfig(e){return e instanceof a?e.getToolConfig():e instanceof l?{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"size"}]}:e instanceof n?{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]}:e instanceof h?{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]}:e instanceof p?{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]}:null}}const E=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=i(this,"toolChange"),this.displayValuesChange=i(this,"displayValuesChange")}tool;handleToolChange(e,t){const i=b.getToolConfig(e);if(t&&e&&"shape"===i?.type){const s=b.getToolConfig(t);"shape"===s?.type&&[i.colorProperty,i.sizeProperty,i.opacityProperty,"fillColor"].forEach((i=>{i&&void 0!==t[i]&&(e[i]=t[i])}))}this.config=i,this.config&&(this.updatePalette(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;onThemeChange(){this.emitDisplayValues()}toolChange;displayValuesChange;config;palette=[];currentOpacity=1;updateTrigger=0;handleSelectionChange(){this.tool instanceof a&&(this.config=b.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}componentWillLoad(){this.config=b.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues())}emitDisplayValues(){if(!this.config)return;const e=this.tool[this.config.sizeProperty],t={color:c.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};this.tool instanceof p&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}handleToggleExpand=()=>{this.isExpanded=!this.isExpanded};handleColorChange=e=>{if(this.tool[this.config.colorProperty]=e.detail,"shape"===this.config.type||"selection"===this.config.type){const t=this.tool;("string"==typeof t.fillColor?"transparent"===t.fillColor:"transparent"===t.fillColor.light&&"transparent"===t.fillColor.dark)||(t.fillColor=e.detail)}this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleSizeChange=e=>{this.tool[this.config.sizeProperty]=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleOpacityChange=e=>{this.tool[this.config.opacityProperty]=e.detail,this.currentOpacity=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool)};handlePropertyChange=(e,t)=>{if("shape"!==this.config.type&&"selection"!==this.config.type||"fillColor"!==e)this.tool[e]=t,"fontFamily"===e&&this.emitDisplayValues();else{const e="filled"===t?this.tool[this.config.colorProperty]:{light:"transparent",dark:"transparent"};this.tool.fillColor=e,"filled"===t&&(this.tool[this.config.colorProperty]=e)}this.toolChange.emit(this.tool),this.updateTrigger++};getShapeFillValue(){const e=this.tool.fillColor;return("string"==typeof e?"transparent"===e:"transparent"===e.light&&"transparent"===e.dark)?"transparent":"filled"}renderControl(e){const t=this.tool[e.propertyName];switch(e.type){case"stroke-size":return s("kritzel-stroke-size",{key:e.type,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return s("kritzel-font-size",{key:e.type,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return s("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return s("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return s("kritzel-font-family",{key:e.type,selectedFontFamily:t,onFontFamilyChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});default:return null}}render(){if(!this.config)return null;const e=this.palette.length>6||"text"===this.config.type,t=this.palette.length>0,i=this.config.controls.find((e=>"stroke-size"===e.type||"font-size"===e.type)),r=this.config.controls.filter((e=>"stroke-size"!==e.type&&"font-size"!==e.type));return s(o,null,s("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},s("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&s("kritzel-color-palette",{colors:this.palette,selectedColor:this.tool[this.config.colorProperty],isExpanded:this.isExpanded,isOpaque:!0,opacity:this.currentOpacity,theme:this.theme,onColorChange:this.handleColorChange}),i&&this.renderControl(i),s("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[s("div",{class:"divider"}),this.renderControl(e)]))),e&&s("div",{style:{display:"flex",alignItems:"flex-start"}},s("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?"Collapse":"Expand"},s("kritzel-icon",{name:this.isExpanded?"chevron-up":"chevron-down"})))))}static get watchers(){return{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}]}}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],config:[32],palette:[32],currentOpacity:[32],updateTrigger:[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}]}]);function j(){"undefined"!=typeof customElements&&["kritzel-tool-config","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size"].forEach((e=>{switch(e){case"kritzel-tool-config":customElements.get(r(e))||customElements.define(r(e),E);break;case"kritzel-color":customElements.get(r(e))||d();break;case"kritzel-color-palette":customElements.get(r(e))||m();break;case"kritzel-dropdown":customElements.get(r(e))||f();break;case"kritzel-font":customElements.get(r(e))||y();break;case"kritzel-font-family":customElements.get(r(e))||g();break;case"kritzel-font-size":customElements.get(r(e))||u();break;case"kritzel-icon":customElements.get(r(e))||z();break;case"kritzel-line-endings":customElements.get(r(e))||k();break;case"kritzel-opacity-slider":customElements.get(r(e))||C();break;case"kritzel-shape-fill":customElements.get(r(e))||x();break;case"kritzel-stroke-size":customElements.get(r(e))||v()}}))}export{b as K,E as a,j as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{O as t}from"./p-BAN5dnHX.js";import{a as i}from"./p-CjazGGq3.js";class s{static doPolygonsIntersect(t,i){const s=[t.bottomLeft,t.bottomRight,t.topRight,t.topLeft],h=[i.bottomLeft,i.bottomRight,i.topRight,i.topLeft];for(const t of s)if(this.isPointInPolygon(t,h))return!0;for(const t of h)if(this.isPointInPolygon(t,s))return!0;for(let t=0;t<s.length;t++){const i=s[t],n=s[(t+1)%s.length];for(let t=0;t<h.length;t++)if(this.intersectLines(i,n,h[t],h[(t+1)%h.length]))return!0}return!1}static isPointInPolygon(t,i){let s=!1;for(let h=0,n=i.length-1;h<i.length;n=h++){const e=i[h].x,r=i[h].y,o=i[n].y;r>t.y!=o>t.y&&t.x<(i[n].x-e)*(t.y-r)/(o-r)+e&&(s=!s)}return s}static intersectLines(t,i,s,h){const n=(i.x-t.x)*(h.y-s.y)-(i.y-t.y)*(h.x-s.x);if(0===n)return!1;const e=((s.x-t.x)*(h.y-s.y)-(s.y-t.y)*(h.x-s.x))/n,r=-((t.x-s.x)*(i.y-t.y)-(t.y-s.y)*(i.x-t.x))/n;return e>=0&&e<=1&&r>=0&&r<=1}static getLineIntersectionPoint(t,i,s,h){const n=(i.x-t.x)*(h.y-s.y)-(i.y-t.y)*(h.x-s.x);if(0===n)return null;const e=((s.x-t.x)*(h.y-s.y)-(s.y-t.y)*(h.x-s.x))/n,r=-((t.x-s.x)*(i.y-t.y)-(t.y-s.y)*(i.x-t.x))/n;return e>=0&&e<=1&&r>=0&&r<=1?{x:t.x+e*(i.x-t.x),y:t.y+e*(i.y-t.y)}:null}static getLinePolygonIntersection(t,i,s){const h=[s.topLeft,s.topRight,s.bottomRight,s.bottomLeft];let n=null,e=1/0;for(let s=0;s<h.length;s++){const r=this.getLineIntersectionPoint(t,i,h[s],h[(s+1)%h.length]);if(r){const i=Math.sqrt(Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2));i<e&&(e=i,n=r)}}return n}static getEllipsePolygonApproximation(t,i,s,h,n=32,e=0){const r=[],o=Math.cos(e),a=Math.sin(e);for(let e=0;e<n;e++){const u=2*Math.PI*e/n,c=s*Math.cos(u),l=h*Math.sin(u);r.push({x:t+c*o-l*a,y:i+c*a+l*o})}return r}static getLinePointsArrayIntersection(t,i,s){let h=null,n=1/0;for(let e=0;e<s.length;e++){const r=this.getLineIntersectionPoint(t,i,s[e],s[(e+1)%s.length]);if(r){const i=Math.sqrt(Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2));i<n&&(n=i,h=r)}}return h}static isPointInPolygonPoints(t,i){return this.isPointInPolygon(t,i)}}class h{__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;isDebugInfoVisible=!1;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,i=[t.topLeft.x,t.topRight.x,t.bottomRight.x,t.bottomLeft.x],s=[t.topLeft.y,t.topRight.y,t.bottomRight.y,t.bottomLeft.y],h=Math.min(...i),n=Math.max(...i),e=Math.min(...s),r=Math.max(...s);return{x:h,y:e,z:this.scale,width:n-h,height:r-e}}get rotatedPolygon(){const t=this.translateX+this.totalWidth/2/this.scale,i=this.translateY+this.totalHeight/2/this.scale,s=this.rotation,h=Math.cos(s),n=Math.sin(s),e=this.translateX,r=this.translateY,o=e+this.totalWidth/this.scale,a=r+this.totalHeight/this.scale,u=(s,e)=>({x:h*(s-t)-n*(e-i)+t,y:n*(s-t)+h*(e-i)+i});return{topLeft:u(e,r),topRight:u(o,r),bottomRight:u(o,a),bottomLeft:u(e,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 i=new h;return i._core=t,i.zIndex=t.store.currentZIndex,i.workspaceId=t.store.state.activeWorkspace.id,i.userId=t.user?.id,i}mount(t){this.isMounted||(this.elementRef=t,this.isMounted=!0)}generateId(){return t.generateUUID()}isInViewport(){const t=this._core.store.state.scale;if(this.boundingBox.width*t*(this.boundingBox.height*t)<.5)return!1;const i=-this._core.store.state.translateX/this._core.store.state.scale,s=-this._core.store.state.translateY/this._core.store.state.scale;return this.rotatedBoundingBox.x<i+this._core.store.state.viewportWidth/this._core.store.state.scale&&this.rotatedBoundingBox.x+this.rotatedBoundingBox.width>i&&this.rotatedBoundingBox.y<s+this._core.store.state.viewportHeight/this._core.store.state.scale&&this.rotatedBoundingBox.y+this.rotatedBoundingBox.height>s}centerInViewport(){const{viewportWidth:t,viewportHeight:i,translateX:s,translateY:h,scale:n}=this._core.store.state,{x:e,y:r,width:o,height:a}=this.rotatedBoundingBox;this.updatePosition(this.translateX+((t/2-s)/n-(e+o/2)),this.translateY+((i/2-h)/n-(r+a/2)))}update(){this._core.store.objects.update(this)}move(t,i,s,h){const n=(i-h)/this._core.store.state.scale;this.translateX+=(t-s)/this._core.store.state.scale,this.translateY+=n,this._core.store.objects.update(this)}resize(t,i,s,h){s<=1||h<=1||(this.width=s,this.height=h,this.translateX=t,this.translateY=i,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}serialize(){const{_core:t,_elementRef:i,element:s,totalWidth:h,totalHeight:n,...e}=this,r=structuredClone(e);return s&&"object"==typeof s&&"nodeType"in s&&1===s.nodeType&&(r.element=s.cloneNode(!0)),r}deserialize(t){return Object.assign(this,t),this}adoptTransientStateFrom(t){}isClass(t){return this.__class__===t}edit(t){}onAfterUpdate(t){}hitTest(t,i){return!0}hitTestPolygon(t){return s.doPolygonsIntersect(this.rotatedPolygon,t)}updatePosition(t,i){this.translateX=t,this.translateY=i,this._core.store.objects.update(this)}}var n,e={},r=(n||(n=1,function(t){Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const{PI:i}=Math,s=i+1e-4,h=[1,1];function n(t,i,s,h=t=>t){return t*h(.5-i*(.5-s))}const{min:e}=Math;function r(t,i,s){let h=e(1,i/s);return e(1,t+(e(1,1-h)-t)*(.275*h))}function o(t,i){return[t[0]+i[0],t[1]+i[1]]}function a(t,i,s){return t[0]=i[0]+s[0],t[1]=i[1]+s[1],t}function u(t,i){return[t[0]-i[0],t[1]-i[1]]}function c(t,i,s){return t[0]=i[0]-s[0],t[1]=i[1]-s[1],t}function l(t,i){return[t[0]*i,t[1]*i]}function f(t,i,s){return t[0]=i[0]*s,t[1]=i[1]*s,t}function d(t){return[t[1],-t[0]]}function M(t,i){let s=i[0];return t[0]=i[1],t[1]=-s,t}function g(t,i){return t[0]*i[0]+t[1]*i[1]}function m(t,i){return t[0]===i[0]&&t[1]===i[1]}function p(t,i){let s=t[0]-i[0],h=t[1]-i[1];return s*s+h*h}function x(t){return function(t,i){return[t[0]/i,t[1]/i]}(t,function(t){return Math.hypot(t[0],t[1])}(t))}function y(t,i){return Math.hypot(t[1]-i[1],t[0]-i[0])}function v(t,i,s){let h=Math.sin(s),n=Math.cos(s),e=t[0]-i[0],r=t[1]-i[1];return[e*n-r*h+i[0],e*h+r*n+i[1]]}function P(t,i,s,h){let n=Math.sin(h),e=Math.cos(h),r=i[0]-s[0],o=i[1]-s[1],a=r*n+o*e;return t[0]=r*e-o*n+s[0],t[1]=a+s[1],t}function $(t,i,s){return o(t,l(u(i,t),s))}function b(t,i,s,h){let n=s[1]-i[1];return t[0]=i[0]+(s[0]-i[0])*h,t[1]=i[1]+n*h,t}function w(t,i,s){return o(t,l(i,s))}const L=[0,0],I=[0,0],X=[0,0];function _(t,i){let h=w(t,x(d(u(t,o(t,[1,1])))),-i),n=[],e=1/13;for(let i=e;i<=1;i+=e)n.push(v(h,t,2*s*i));return n}function z(t,i,h){let n=[],e=1/h;for(let h=e;h<=1;h+=e)n.push(v(i,t,s*h));return n}function Y(t,i,s){let h=u(i,s),n=l(h,.5),e=l(h,.51);return[u(t,n),u(t,e),o(t,e),o(t,n)]}function j(t,i,h,n){let e=[],r=w(t,i,h),o=1/n;for(let i=o;i<1;i+=o)e.push(v(r,t,3*s*i));return e}function k(t,i,s){return[o(t,l(i,s)),o(t,l(i,.99*s)),u(t,l(i,.99*s)),u(t,l(i,s))]}function A(t,i,s){return!1===t||void 0===t?0:!0===t?Math.max(i,s):t}function B(t,i={}){let{size:h=16,smoothing:e=.5,thinning:l=.5,simulatePressure:m=!0,easing:x=t=>t,start:y={},end:v={},last:$=!1}=i,{cap:w=!0,easing:B=t=>t*(2-t)}=y,{cap:R=!0,easing:S=t=>--t*t*t+1}=v;if(0===t.length||h<=0)return[];let T,C=t[t.length-1].runningLength,O=A(y.taper,h,C),D=A(v.taper,h,C),V=(h*e)**2,W=[],F=[],H=function(t,i,s){return t.slice(0,10).reduce(((t,h)=>{let n=h.pressure;return i&&(n=r(t,h.distance,s)),(t+n)/2}),t[0].pressure)}(t,m,h),E=n(h,l,t[t.length-1].pressure,x),K=t[0].vector,G=t[0].point,Q=G,U=G,q=Q,N=!1;for(let i=0;i<t.length;i++){let{pressure:e}=t[i],{point:d,vector:y,distance:v,runningLength:$}=t[i],w=i===t.length-1;if(!w&&C-$<3)continue;l?(m&&(e=r(H,v,h)),E=n(h,l,e,x)):E=h/2,void 0===T&&(T=E);let _=$<O?B($/O):1,z=C-$<D?S((C-$)/D):1;E=Math.max(.01,E*Math.min(_,z));let Y=(w?t[i]:t[i+1]).vector,j=w?1:g(y,Y),k=null!==j&&j<0;if(g(y,K)<0&&!N||k){M(L,K),f(L,L,E);for(let t=0;t<=1;t+=.07692307692307693)c(I,d,L),P(I,I,d,s*t),U=[I[0],I[1]],W.push(U),a(X,d,L),P(X,X,d,s*-t),q=[X[0],X[1]],F.push(q);G=U,Q=q,k&&(N=!0)}else N=!1,w?(M(L,y),f(L,L,E),W.push(u(d,L)),F.push(o(d,L))):(b(L,Y,y,j),M(L,L),f(L,L,E),c(I,d,L),U=[I[0],I[1]],(i<=1||p(G,U)>V)&&(W.push(U),G=U),a(X,d,L),q=[X[0],X[1]],(i<=1||p(Q,q)>V)&&(F.push(q),Q=q),H=e,K=y)}let Z=[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=[],it=[];if(1===t.length){if(!O&&!D||$)return _(Z,T||E)}else{O||D&&1===t.length||(w?tt.push(...z(Z,F[0],13)):tt.push(...Y(Z,W[0],F[0])));let i=d(function(t){return[-t[0],-t[1]]}(t[t.length-1].vector));D||O&&1===t.length?it.push(J):R?it.push(...j(J,i,E,29)):it.push(...k(J,i,E))}return W.concat(it,F.reverse(),tt)}const R=[0,0];function S(t){return null!=t&&t>=0}function T(t,i={}){let{streamline:s=.5,size:n=16,last:e=!1}=i;if(0===t.length)return[];let r=.15+.85*(1-s),a=Array.isArray(t[0])?t:t.map((({x:t,y:i,pressure:s=.5})=>[t,i,s]));if(2===a.length){let t=a[1];a=a.slice(0,-1);for(let i=1;i<5;i++)a.push($(a[0],t,i/4))}1===a.length&&(a=[...a,[...o(a[0],h),...a[0].slice(2)]]);let u=[{point:[a[0][0],a[0][1]],pressure:S(a[0][2])?a[0][2]:.25,vector:[...h],distance:0,runningLength:0}],l=!1,f=0,d=u[0],M=a.length-1;for(let t=1;t<a.length;t++){let i=e&&t===M?[a[t][0],a[t][1]]:$(d.point,a[t],r);if(m(d.point,i))continue;let s=y(i,d.point);if(f+=s,t<M&&!l){if(f<n)continue;l=!0}c(R,d.point,i),d={point:i,pressure:S(a[t][2])?a[t][2]:.5,vector:x(R),distance:s,runningLength:f},u.push(d)}return u[0].vector=u[1]?.vector||[0,0],u}function C(t,i={}){return B(T(t,i),i)}t.default=C,t.getStroke=C,t.getStrokeOutlinePoints=B,t.getStrokePoints=T}(e)),e);class o{static average(t,i){return(t+i)/2}}class a extends h{__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`${this.x} ${this.y} ${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.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,i){const s=new a;return s._core=t,s.id=s.generateId(),s.workspaceId=t.store.state.activeWorkspace.id,s.userId=t.user?.id,s.options=i,s.points=i?.points??[],s.translateX=i?.translateX??0,s.translateY=i?.translateY??0,s.scale=i?.scale??1,s.strokeWidth=i?.strokeWidth??8,s.fill=i?.fill??{light:"#000000",dark:"#ffffff"},s.opacity=i?.opacity??1,s.zIndex=t.store.currentZIndex,s.d=s.generateSvgPath(),s.updateDimensions(),s}copy(){const t=super.copy();return this.points&&(t.points=this.points.map((t=>[...t]))),t}resize(t,i,s,h){if(s<=1||h<=1)return;const n=s/this.width,e=h/this.height;if(this.width=s,this.height=h,1===this.points.length){const t=this.points[0],i=Math.max(0,s-this.strokeWidth)/n,r=Math.max(0,h-this.strokeWidth)/e;this.points.push([t[0]+i,t[1]+r])}this.points=this.points.map((([t,i])=>[t*n,i*e])),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,this.translateX=t,this.translateY=i,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,i,s,h){const n=(i-h)/this._core.store.state.scale;this.translateX+=(t-s)/this._core.store.state.scale,this.translateY+=n,this._adjustedPoints=null,this._core.store.objects.update(this)}hitTest(t,i){const s=this.strokeWidth/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),1===this._adjustedPoints.length){const h=this._adjustedPoints[0];return this.pointToLineSegmentDistance(t,i,h[0],h[1],h[0],h[1])<=s}for(let h=0;h<this._adjustedPoints.length-1;h++){const n=this._adjustedPoints[h],e=this._adjustedPoints[h+1];if(this.pointToLineSegmentDistance(t,i,n[0],n[1],e[0],e[1])<=s)return!0}return!1}hitTestPolygon(t){const i=this.strokeWidth/this.scale/2;null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const h=[{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,i]of this._adjustedPoints)if(s.isPointInPolygon({x:t,y:i},h))return!0;for(const t of h)if(this.hitTest(t.x,t.y))return!0;for(let t=0;t<this._adjustedPoints.length-1;t++){const i={x:this._adjustedPoints[t][0],y:this._adjustedPoints[t][1]},n={x:this._adjustedPoints[t+1][0],y:this._adjustedPoints[t+1][1]};for(let t=0;t<h.length;t++)if(s.intersectLines(i,n,h[t],h[(t+1)%h.length]))return!0}for(let t=0;t<this._adjustedPoints.length-1;t++){const s=this._adjustedPoints[t],n=this._adjustedPoints[t+1];for(let t=0;t<h.length;t++){const e=h[t],r=h[(t+1)%h.length],o=this.pointToLineSegmentDistance(e.x,e.y,s[0],s[1],n[0],n[1]),a=this.pointToLineSegmentDistance(r.x,r.y,s[0],s[1],n[0],n[1]),u=this.pointToLineSegmentDistance(s[0],s[1],e.x,e.y,r.x,r.y),c=this.pointToLineSegmentDistance(n[0],n[1],e.x,e.y,r.x,r.y);if(Math.min(o,a,u,c)<=i)return!0}}return!1}updatePosition(t,i){this.translateX=t,this.translateY=i,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,i=Math.cos(t),s=Math.sin(t),h=this.points.map((t=>t[0])),n=this.points.map((t=>t[1])),e={x:(Math.min(...h)+Math.max(...h))/2,y:(Math.min(...n)+Math.max(...n))/2},{x:r,y:o}=e;return this.points.map((([t,h])=>{const n=t-r,e=h-o;return[r+n*i-e*s,o+n*s+e*i]})).map((([t,i])=>[Math.abs(t-this.x)/this.scale+this.translateX,Math.abs(i-this.y)/this.scale+this.translateY]))}pointToLineSegmentDistance(t,i,s,h,n,e){const r=n-s,o=e-h,a=r*r+o*o;let u,c,l=-1;0!==a&&(l=((t-s)*r+(i-h)*o)/a),l<0?(u=s,c=h):l>1?(u=n,c=e):(u=s+l*r,c=h+l*o);const f=t-u,d=i-c;return Math.sqrt(f*f+d*d)}updateDimensions(){const t=this.points.map((([t,i])=>[t*Math.cos(this.rotation)-i*Math.sin(this.rotation),t*Math.sin(this.rotation)+i*Math.cos(this.rotation)])),i=Math.min(...t.map((t=>t[0]-this.strokeWidth/2))),s=Math.min(...t.map((t=>t[1]-this.strokeWidth/2))),h=Math.max(...t.map((t=>t[0]+this.strokeWidth/2))),n=Math.max(...t.map((t=>t[1]+this.strokeWidth/2)));this.width=h-i+this.lineSlack,this.height=n-s+this.lineSlack,this.x=i,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,i=Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2,s=Math.max(...this.points.map((t=>t[0])))+this.strokeWidth/2,h=Math.max(...this.points.map((t=>t[1])))+this.strokeWidth/2;this.width=s-t+this.lineSlack,this.height=h-i+this.lineSlack,this.x=t,this.y=i}generateSvgPath(){const t=this.getStrokeFromPoints(this.points,this.strokeWidth);return this.getSvgPathFromStroke(t)}getStrokeFromPoints(t,i){return r.getStroke(t,{size:i,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,i=!0){const s=t.length;if(s<4)return"";let h=t[0],n=t[1];const e=t[2];let r=`M${h[0].toFixed(2)},${h[1].toFixed(2)} Q${n[0].toFixed(2)},${n[1].toFixed(2)} ${o.average(n[0],e[0]).toFixed(2)},${o.average(n[1],e[1]).toFixed(2)} T`;for(let i=2,e=s-1;i<e;i++)h=t[i],n=t[i+1],r+=`${o.average(h[0],n[0]).toFixed(2)},${o.average(h[1],n[1]).toFixed(2)} `;return i&&(r+="Z"),r}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 i=this.centerX,s=this.centerY,h=this.strokeWidth/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),this._adjustedPoints.length<1)return null;let n=!0;for(let e=1;e<=32;e++){const r=e/32,o=t.x+(i-t.x)*r,a=t.y+(s-t.y)*r;let u=1/0;if(1===this._adjustedPoints.length){const t=this._adjustedPoints[0],i=o-t[0],s=a-t[1];u=Math.sqrt(i*i+s*s)}else for(let t=0;t<this._adjustedPoints.length-1;t++){const i=this._adjustedPoints[t],s=this._adjustedPoints[t+1],h=this.pointToLineSegmentDistance(o,a,i[0],i[1],s[0],s[1]);h<u&&(u=h)}const c=u<=h;if(n&&c){let n=(e-1)/32,o=r;for(let e=0;e<8;e++){const e=(n+o)/2,r=t.x+(i-t.x)*e,a=t.y+(s-t.y)*e;let u=1/0;if(1===this._adjustedPoints.length){const t=this._adjustedPoints[0],i=r-t[0],s=a-t[1];u=Math.sqrt(i*i+s*s)}else for(let t=0;t<this._adjustedPoints.length-1;t++){const i=this._adjustedPoints[t],s=this._adjustedPoints[t+1],h=this.pointToLineSegmentDistance(r,a,i[0],i[1],s[0],s[1]);h<u&&(u=h)}u<=h?o=e:n=e}const a=(n+o)/2;return{x:t.x+(i-t.x)*a,y:t.y+(s-t.y)*a}}n=!c}return null}}class u extends h{__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.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,i){const s=new u;return s._core=t,s.id=s.generateId(),s.workspaceId=t.store.state.activeWorkspace.id,s.userId=t.user?.id,s.options=i,s.startX=i?.startX??0,s.startY=i?.startY??0,s.endX=i?.endX??0,s.endY=i?.endY??0,s.controlX=i?.controlX,s.controlY=i?.controlY,s.translateX=i?.translateX??0,s.translateY=i?.translateY??0,s.scale=i?.scale??1,s.strokeWidth=i?.strokeWidth??4,s.stroke=i?.stroke??{light:"#000000",dark:"#ffffff"},s.opacity=i?.opacity??1,s.startAnchor=i?.startAnchor,s.endAnchor=i?.endAnchor,s.arrows=i?.arrows,s.zIndex=t.store.currentZIndex,s.updateDimensions(),s}resize(t,i,s,h){if(s<=1||h<=1)return;const n=s/this.width,e=h/this.height;this.startX=this.startX*n,this.startY=this.startY*e,this.endX=this.endX*n,this.endY=this.endY*e,void 0!==this.controlX&&void 0!==this.controlY&&(this.controlX=this.controlX*n,this.controlY=this.controlY*e);const{minX:r,minY:o,maxX:a,maxY:u}=this.calculateBoundingBox();this.width=a-r,this.height=u-o,this.x=r,this.y=o,this.translateX=t,this.translateY=i,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,i,s,h){const n=(i-h)/this._core.store.state.scale;this.translateX+=(t-s)/this._core.store.state.scale,this.translateY+=n,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,i){const s=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 h=this.getClipInfo();return this.pointToBezierDistance(t,i,h.start?.t??0,h.end?.t??1)<=s}const h=this.getClipInfo(),n=h.start?[h.start.x,h.start.y]:this._adjustedPoints[0],e=h.end?[h.end.x,h.end.y]:this._adjustedPoints[1];return this.pointToLineSegmentDistance(t,i,n[0],n[1],e[0],e[1])<=s}hitTestPolygon(t){const i=this.strokeWidth/this.scale/2;null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const h=this.getClipInfo(),n=[{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}],e=h.start?[h.start.x,h.start.y]:this._adjustedPoints[0],r=h.end?[h.end.x,h.end.y]:this._adjustedPoints[1],o=[e,r];for(const[t,i]of o)if(s.isPointInPolygon({x:t,y:i},n))return!0;for(const t of n)if(this.hitTest(t.x,t.y))return!0;if(void 0!==this.controlX&&void 0!==this.controlY){const t=this._adjustedPoints[0],e=this._adjustedPoints[1],r=this.computeAdjustedControlPoint(),o=h.start?.t??0,a=h.end?.t??1,u=20;for(let h=0;h<=u;h++){const c=o+h/u*(a-o),l=1-c,f=l*l*t[0]+2*l*c*r[0]+c*c*e[0],d=l*l*t[1]+2*l*c*r[1]+c*c*e[1];if(s.isPointInPolygon({x:f,y:d},n))return!0;for(let t=0;t<n.length;t++){const s=n[t],h=n[(t+1)%n.length];if(this.pointToLineSegmentDistance(f,d,s.x,s.y,h.x,h.y)<=i)return!0}}return!1}const a={x:e[0],y:e[1]},u={x:r[0],y:r[1]};for(let t=0;t<n.length;t++){const h=n[t],e=n[(t+1)%n.length];if(s.intersectLines(a,u,h,e))return!0;const r=this.pointToLineSegmentDistance(h.x,h.y,a.x,a.y,u.x,u.y),o=this.pointToLineSegmentDistance(e.x,e.y,a.x,a.y,u.x,u.y),c=this.pointToLineSegmentDistance(a.x,a.y,h.x,h.y,e.x,e.y),l=this.pointToLineSegmentDistance(u.x,u.y,h.x,h.y,e.x,e.y);if(Math.min(r,o,c,l)<=i)return!0}return!1}updatePosition(t,i){this.translateX=t,this.translateY=i,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}updateEndpoint(t,i,s){"start"===t?(this.startX=i,this.startY=s):(this.endX=i,this.endY=s);const h=this.width,n=this.height,{minX:e,minY:r,maxX:o,maxY:a}=this.calculateBoundingBox(),u=e-this.x,c=r-this.y,l=o-e,f=a-r,d=(l-h)/2,M=(f-n)/2;this.x=e,this.y=r,this.width=l,this.height=f;const g=Math.cos(this.rotation),m=Math.sin(this.rotation),p=u+d,x=c+M,y=p*m+x*g-M;this.translateX+=(p*g-x*m-d)/this.scale,this.translateY+=y/this.scale,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}updateControlPoint(t,i){this.controlX=t,this.controlY=i;const s=this.width,h=this.height,{minX:n,minY:e,maxX:r,maxY:o}=this.calculateBoundingBox(),a=n-this.x,u=e-this.y,c=r-n,l=o-e,f=(c-s)/2,d=(l-h)/2;this.x=n,this.y=e,this.width=c,this.height=l;const M=Math.cos(this.rotation),g=Math.sin(this.rotation),m=a+f,p=u+d,x=m*g+p*M-d;this.translateX+=(m*M-p*g-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]],i=this.rotation,s=Math.cos(i),h=Math.sin(i),n=t.map((t=>t[0])),e=t.map((t=>t[1])),r={x:(Math.min(...n)+Math.max(...n))/2,y:(Math.min(...e)+Math.max(...e))/2},{x:o,y:a}=r;return t.map((([t,i])=>{const n=t-o,e=i-a;return[o+n*s-e*h,a+n*h+e*s]})).map((([t,i])=>[(t-this.x)/this.scale+this.translateX,(i-this.y)/this.scale+this.translateY]))}pointToLineSegmentDistance(t,i,s,h,n,e){const r=n-s,o=e-h,a=r*r+o*o;let u,c,l=-1;0!==a&&(l=((t-s)*r+(i-h)*o)/a),l<0?(u=s,c=h):l>1?(u=n,c=e):(u=s+l*r,c=h+l*o);const f=t-u,d=i-c;return Math.sqrt(f*f+d*d)}pointToBezierDistance(t,i,s=0,h=1){null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const n=this._adjustedPoints[0],e=this._adjustedPoints[1],r=this.computeAdjustedControlPoint();let o=1/0;for(let a=0;a<=20;a++){const u=s+a/20*(h-s),c=1-u,l=t-(c*c*n[0]+2*c*u*r[0]+u*u*e[0]),f=i-(c*c*n[1]+2*c*u*r[1]+u*u*e[1]),d=Math.sqrt(l*l+f*f);d<o&&(o=d)}return o}getClipInfo(){if(this._clipInfo)return this._clipInfo;const t=this.endAnchor,i={};if(this.startAnchor){const t=this._core.anchorManager.findAnchorTarget(this,"start");if(t){const s=this._core.anchorManager.computeAnchorClipInfo(this,"start",t);s&&(i.start={x:s.worldX,y:s.worldY,t:s.t})}}if(t){const t=this._core.anchorManager.findAnchorTarget(this,"end");if(t){const s=this._core.anchorManager.computeAnchorClipInfo(this,"end",t);s&&(i.end={x:s.worldX,y:s.worldY,t:s.t})}}return this._clipInfo=i,i}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,i=Math.cos(t),s=Math.sin(t),h=[this.startX,this.endX],n=[this.startY,this.endY],e={x:(Math.min(...h)+Math.max(...h))/2,y:(Math.min(...n)+Math.max(...n))/2},{x:r,y:o}=e,a=this.controlX-r,u=this.controlY-o;return[(r+a*i-u*s-this.x)/this.scale+this.translateX,(o+a*s+u*i-this.y)/this.scale+this.translateY]}get rotatedPolygon(){const t=this.padding,{minX:i,minY:s,maxX:h,maxY:n}=u.calculateBoundingBox(this.startX,this.startY,this.endX,this.endY,this.controlX,this.controlY,this.strokeWidth),e=i-this.x+t,r=s-this.y+t,o=h-this.x+t,a=n-this.y+t,c={x:e,y:r},l={x:o,y:r},f={x:o,y:a},d={x:e,y:a},M=this.totalWidth/2,g=this.totalHeight/2,m=this.rotation,p=Math.cos(m),x=Math.sin(m),y=t=>({x:((t.x-M)*p-(t.y-g)*x+M)/this.scale+this.translateX,y:((t.x-M)*x+(t.y-g)*p+g)/this.scale+this.translateY});return{topLeft:y(c),topRight:y(l),bottomRight:y(f),bottomLeft:y(d)}}static calculateBoundingBox(t,i,s,h,n,e,r){let o=Math.min(t,s),a=Math.min(i,h),u=Math.max(t,s),c=Math.max(i,h);if(void 0!==n&&void 0!==e){const r=t-2*n+s;if(0!==r){const i=(t-n)/r;if(i>0&&i<1){const h=(1-i)*(1-i)*t+2*(1-i)*i*n+i*i*s;o=Math.min(o,h),u=Math.max(u,h)}}const l=i-2*e+h;if(0!==l){const t=(i-e)/l;if(t>0&&t<1){const s=(1-t)*(1-t)*i+2*(1-t)*t*e+t*t*h;a=Math.min(a,s),c=Math.max(c,s)}}}const l=r/2;return{minX:o-l,minY:a-l,maxX:u+l,maxY:c+l}}calculateBoundingBox(){return u.calculateBoundingBox(this.startX,this.startY,this.endX,this.endY,this.controlX,this.controlY,this.strokeWidth)}updateDimensions(){const{minX:t,minY:i,maxX:s,maxY:h}=this.calculateBoundingBox();this.width=s-t,this.height=h-i,this.x=t,this.y=i,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 i="start"===t?this.arrows?.start:this.arrows?.end;return i?.size??3*this.strokeWidth}getArrowFill(t){const s="start"===t?this.arrows?.start:this.arrows?.end;return i.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}}export{a as K,u as a,s as b,h as c}
|
|
1
|
+
import{O as t}from"./p-BAN5dnHX.js";import{a as i}from"./p-BCzbwL4m.js";class s{static doPolygonsIntersect(t,i){const s=[t.bottomLeft,t.bottomRight,t.topRight,t.topLeft],h=[i.bottomLeft,i.bottomRight,i.topRight,i.topLeft];for(const t of s)if(this.isPointInPolygon(t,h))return!0;for(const t of h)if(this.isPointInPolygon(t,s))return!0;for(let t=0;t<s.length;t++){const i=s[t],n=s[(t+1)%s.length];for(let t=0;t<h.length;t++)if(this.intersectLines(i,n,h[t],h[(t+1)%h.length]))return!0}return!1}static isPointInPolygon(t,i){let s=!1;for(let h=0,n=i.length-1;h<i.length;n=h++){const e=i[h].x,r=i[h].y,o=i[n].y;r>t.y!=o>t.y&&t.x<(i[n].x-e)*(t.y-r)/(o-r)+e&&(s=!s)}return s}static intersectLines(t,i,s,h){const n=(i.x-t.x)*(h.y-s.y)-(i.y-t.y)*(h.x-s.x);if(0===n)return!1;const e=((s.x-t.x)*(h.y-s.y)-(s.y-t.y)*(h.x-s.x))/n,r=-((t.x-s.x)*(i.y-t.y)-(t.y-s.y)*(i.x-t.x))/n;return e>=0&&e<=1&&r>=0&&r<=1}static getLineIntersectionPoint(t,i,s,h){const n=(i.x-t.x)*(h.y-s.y)-(i.y-t.y)*(h.x-s.x);if(0===n)return null;const e=((s.x-t.x)*(h.y-s.y)-(s.y-t.y)*(h.x-s.x))/n,r=-((t.x-s.x)*(i.y-t.y)-(t.y-s.y)*(i.x-t.x))/n;return e>=0&&e<=1&&r>=0&&r<=1?{x:t.x+e*(i.x-t.x),y:t.y+e*(i.y-t.y)}:null}static getLinePolygonIntersection(t,i,s){const h=[s.topLeft,s.topRight,s.bottomRight,s.bottomLeft];let n=null,e=1/0;for(let s=0;s<h.length;s++){const r=this.getLineIntersectionPoint(t,i,h[s],h[(s+1)%h.length]);if(r){const i=Math.sqrt(Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2));i<e&&(e=i,n=r)}}return n}static getEllipsePolygonApproximation(t,i,s,h,n=32,e=0){const r=[],o=Math.cos(e),a=Math.sin(e);for(let e=0;e<n;e++){const u=2*Math.PI*e/n,c=s*Math.cos(u),l=h*Math.sin(u);r.push({x:t+c*o-l*a,y:i+c*a+l*o})}return r}static getLinePointsArrayIntersection(t,i,s){let h=null,n=1/0;for(let e=0;e<s.length;e++){const r=this.getLineIntersectionPoint(t,i,s[e],s[(e+1)%s.length]);if(r){const i=Math.sqrt(Math.pow(r.x-t.x,2)+Math.pow(r.y-t.y,2));i<n&&(n=i,h=r)}}return h}static isPointInPolygonPoints(t,i){return this.isPointInPolygon(t,i)}}class h{__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;isDebugInfoVisible=!1;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,i=[t.topLeft.x,t.topRight.x,t.bottomRight.x,t.bottomLeft.x],s=[t.topLeft.y,t.topRight.y,t.bottomRight.y,t.bottomLeft.y],h=Math.min(...i),n=Math.max(...i),e=Math.min(...s),r=Math.max(...s);return{x:h,y:e,z:this.scale,width:n-h,height:r-e}}get rotatedPolygon(){const t=this.translateX+this.totalWidth/2/this.scale,i=this.translateY+this.totalHeight/2/this.scale,s=this.rotation,h=Math.cos(s),n=Math.sin(s),e=this.translateX,r=this.translateY,o=e+this.totalWidth/this.scale,a=r+this.totalHeight/this.scale,u=(s,e)=>({x:h*(s-t)-n*(e-i)+t,y:n*(s-t)+h*(e-i)+i});return{topLeft:u(e,r),topRight:u(o,r),bottomRight:u(o,a),bottomLeft:u(e,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 i=new h;return i._core=t,i.zIndex=t.store.currentZIndex,i.workspaceId=t.store.state.activeWorkspace.id,i.userId=t.user?.id,i}mount(t){this.isMounted||(this.elementRef=t,this.isMounted=!0)}generateId(){return t.generateUUID()}isInViewport(){const t=this._core.store.state.scale;if(this.boundingBox.width*t*(this.boundingBox.height*t)<.5)return!1;const i=-this._core.store.state.translateX/this._core.store.state.scale,s=-this._core.store.state.translateY/this._core.store.state.scale;return this.rotatedBoundingBox.x<i+this._core.store.state.viewportWidth/this._core.store.state.scale&&this.rotatedBoundingBox.x+this.rotatedBoundingBox.width>i&&this.rotatedBoundingBox.y<s+this._core.store.state.viewportHeight/this._core.store.state.scale&&this.rotatedBoundingBox.y+this.rotatedBoundingBox.height>s}centerInViewport(){const{viewportWidth:t,viewportHeight:i,translateX:s,translateY:h,scale:n}=this._core.store.state,{x:e,y:r,width:o,height:a}=this.rotatedBoundingBox;this.updatePosition(this.translateX+((t/2-s)/n-(e+o/2)),this.translateY+((i/2-h)/n-(r+a/2)))}update(){this._core.store.objects.update(this)}move(t,i,s,h){const n=(i-h)/this._core.store.state.scale;this.translateX+=(t-s)/this._core.store.state.scale,this.translateY+=n,this._core.store.objects.update(this)}resize(t,i,s,h){s<=1||h<=1||(this.width=s,this.height=h,this.translateX=t,this.translateY=i,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}serialize(){const{_core:t,_elementRef:i,element:s,totalWidth:h,totalHeight:n,...e}=this,r=structuredClone(e);return s&&"object"==typeof s&&"nodeType"in s&&1===s.nodeType&&(r.element=s.cloneNode(!0)),r}deserialize(t){return Object.assign(this,t),this}adoptTransientStateFrom(t){}isClass(t){return this.__class__===t}edit(t){}onAfterUpdate(t){}hitTest(t,i){return!0}hitTestPolygon(t){return s.doPolygonsIntersect(this.rotatedPolygon,t)}updatePosition(t,i){this.translateX=t,this.translateY=i,this._core.store.objects.update(this)}}var n,e={},r=(n||(n=1,function(t){Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const{PI:i}=Math,s=i+1e-4,h=[1,1];function n(t,i,s,h=t=>t){return t*h(.5-i*(.5-s))}const{min:e}=Math;function r(t,i,s){let h=e(1,i/s);return e(1,t+(e(1,1-h)-t)*(.275*h))}function o(t,i){return[t[0]+i[0],t[1]+i[1]]}function a(t,i,s){return t[0]=i[0]+s[0],t[1]=i[1]+s[1],t}function u(t,i){return[t[0]-i[0],t[1]-i[1]]}function c(t,i,s){return t[0]=i[0]-s[0],t[1]=i[1]-s[1],t}function l(t,i){return[t[0]*i,t[1]*i]}function f(t,i,s){return t[0]=i[0]*s,t[1]=i[1]*s,t}function d(t){return[t[1],-t[0]]}function M(t,i){let s=i[0];return t[0]=i[1],t[1]=-s,t}function g(t,i){return t[0]*i[0]+t[1]*i[1]}function m(t,i){return t[0]===i[0]&&t[1]===i[1]}function p(t,i){let s=t[0]-i[0],h=t[1]-i[1];return s*s+h*h}function x(t){return function(t,i){return[t[0]/i,t[1]/i]}(t,function(t){return Math.hypot(t[0],t[1])}(t))}function y(t,i){return Math.hypot(t[1]-i[1],t[0]-i[0])}function v(t,i,s){let h=Math.sin(s),n=Math.cos(s),e=t[0]-i[0],r=t[1]-i[1];return[e*n-r*h+i[0],e*h+r*n+i[1]]}function P(t,i,s,h){let n=Math.sin(h),e=Math.cos(h),r=i[0]-s[0],o=i[1]-s[1],a=r*n+o*e;return t[0]=r*e-o*n+s[0],t[1]=a+s[1],t}function $(t,i,s){return o(t,l(u(i,t),s))}function b(t,i,s,h){let n=s[1]-i[1];return t[0]=i[0]+(s[0]-i[0])*h,t[1]=i[1]+n*h,t}function w(t,i,s){return o(t,l(i,s))}const L=[0,0],I=[0,0],X=[0,0];function _(t,i){let h=w(t,x(d(u(t,o(t,[1,1])))),-i),n=[],e=1/13;for(let i=e;i<=1;i+=e)n.push(v(h,t,2*s*i));return n}function z(t,i,h){let n=[],e=1/h;for(let h=e;h<=1;h+=e)n.push(v(i,t,s*h));return n}function Y(t,i,s){let h=u(i,s),n=l(h,.5),e=l(h,.51);return[u(t,n),u(t,e),o(t,e),o(t,n)]}function k(t,i,h,n){let e=[],r=w(t,i,h),o=1/n;for(let i=o;i<1;i+=o)e.push(v(r,t,3*s*i));return e}function A(t,i,s){return[o(t,l(i,s)),o(t,l(i,.99*s)),u(t,l(i,.99*s)),u(t,l(i,s))]}function j(t,i,s){return!1===t||void 0===t?0:!0===t?Math.max(i,s):t}function B(t,i={}){let{size:h=16,smoothing:e=.5,thinning:l=.5,simulatePressure:m=!0,easing:x=t=>t,start:y={},end:v={},last:$=!1}=i,{cap:w=!0,easing:B=t=>t*(2-t)}=y,{cap:R=!0,easing:S=t=>--t*t*t+1}=v;if(0===t.length||h<=0)return[];let T,C=t[t.length-1].runningLength,O=j(y.taper,h,C),D=j(v.taper,h,C),V=(h*e)**2,W=[],F=[],H=function(t,i,s){return t.slice(0,10).reduce(((t,h)=>{let n=h.pressure;return i&&(n=r(t,h.distance,s)),(t+n)/2}),t[0].pressure)}(t,m,h),E=n(h,l,t[t.length-1].pressure,x),K=t[0].vector,Q=t[0].point,U=Q,N=Q,Z=U,q=!1;for(let i=0;i<t.length;i++){let{pressure:e}=t[i],{point:d,vector:y,distance:v,runningLength:$}=t[i],w=i===t.length-1;if(!w&&C-$<3)continue;l?(m&&(e=r(H,v,h)),E=n(h,l,e,x)):E=h/2,void 0===T&&(T=E);let _=$<O?B($/O):1,z=C-$<D?S((C-$)/D):1;E=Math.max(.01,E*Math.min(_,z));let Y=(w?t[i]:t[i+1]).vector,k=w?1:g(y,Y),A=null!==k&&k<0;if(g(y,K)<0&&!q||A){M(L,K),f(L,L,E);for(let t=0;t<=1;t+=.07692307692307693)c(I,d,L),P(I,I,d,s*t),N=[I[0],I[1]],W.push(N),a(X,d,L),P(X,X,d,s*-t),Z=[X[0],X[1]],F.push(Z);Q=N,U=Z,A&&(q=!0)}else q=!1,w?(M(L,y),f(L,L,E),W.push(u(d,L)),F.push(o(d,L))):(b(L,Y,y,k),M(L,L),f(L,L,E),c(I,d,L),N=[I[0],I[1]],(i<=1||p(Q,N)>V)&&(W.push(N),Q=N),a(X,d,L),Z=[X[0],X[1]],(i<=1||p(U,Z)>V)&&(F.push(Z),U=Z),H=e,K=y)}let G=[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=[],it=[];if(1===t.length){if(!O&&!D||$)return _(G,T||E)}else{O||D&&1===t.length||(w?tt.push(...z(G,F[0],13)):tt.push(...Y(G,W[0],F[0])));let i=d(function(t){return[-t[0],-t[1]]}(t[t.length-1].vector));D||O&&1===t.length?it.push(J):R?it.push(...k(J,i,E,29)):it.push(...A(J,i,E))}return W.concat(it,F.reverse(),tt)}const R=[0,0];function S(t){return null!=t&&t>=0}function T(t,i={}){let{streamline:s=.5,size:n=16,last:e=!1}=i;if(0===t.length)return[];let r=.15+.85*(1-s),a=Array.isArray(t[0])?t:t.map((({x:t,y:i,pressure:s=.5})=>[t,i,s]));if(2===a.length){let t=a[1];a=a.slice(0,-1);for(let i=1;i<5;i++)a.push($(a[0],t,i/4))}1===a.length&&(a=[...a,[...o(a[0],h),...a[0].slice(2)]]);let u=[{point:[a[0][0],a[0][1]],pressure:S(a[0][2])?a[0][2]:.25,vector:[...h],distance:0,runningLength:0}],l=!1,f=0,d=u[0],M=a.length-1;for(let t=1;t<a.length;t++){let i=e&&t===M?[a[t][0],a[t][1]]:$(d.point,a[t],r);if(m(d.point,i))continue;let s=y(i,d.point);if(f+=s,t<M&&!l){if(f<n)continue;l=!0}c(R,d.point,i),d={point:i,pressure:S(a[t][2])?a[t][2]:.5,vector:x(R),distance:s,runningLength:f},u.push(d)}return u[0].vector=u[1]?.vector||[0,0],u}function C(t,i={}){return B(T(t,i),i)}t.default=C,t.getStroke=C,t.getStrokeOutlinePoints=B,t.getStrokePoints=T}(e)),e);class o{static average(t,i){return(t+i)/2}}class a extends h{__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`${this.x} ${this.y} ${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.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,i){const s=new a;return s._core=t,s.id=s.generateId(),s.workspaceId=t.store.state.activeWorkspace.id,s.userId=t.user?.id,s.options=i,s.points=i?.points??[],s.translateX=i?.translateX??0,s.translateY=i?.translateY??0,s.scale=i?.scale??1,s.strokeWidth=i?.strokeWidth??8,s.fill=i?.fill??{light:"#000000",dark:"#ffffff"},s.opacity=i?.opacity??1,s.zIndex=t.store.currentZIndex,s.d=s.generateSvgPath(),s.updateDimensions(),s}copy(){const t=super.copy();return this.points&&(t.points=this.points.map((t=>[...t]))),t}resize(t,i,s,h){if(s<=1||h<=1)return;const n=s/this.width,e=h/this.height;if(this.width=s,this.height=h,1===this.points.length){const t=this.points[0],i=Math.max(0,s-this.strokeWidth)/n,r=Math.max(0,h-this.strokeWidth)/e;this.points.push([t[0]+i,t[1]+r])}this.points=this.points.map((([t,i])=>[t*n,i*e])),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,this.translateX=t,this.translateY=i,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,i,s,h){const n=(i-h)/this._core.store.state.scale;this.translateX+=(t-s)/this._core.store.state.scale,this.translateY+=n,this._adjustedPoints=null,this._core.store.objects.update(this)}hitTest(t,i){const s=this.strokeWidth/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),1===this._adjustedPoints.length){const h=this._adjustedPoints[0];return this.pointToLineSegmentDistance(t,i,h[0],h[1],h[0],h[1])<=s}for(let h=0;h<this._adjustedPoints.length-1;h++){const n=this._adjustedPoints[h],e=this._adjustedPoints[h+1];if(this.pointToLineSegmentDistance(t,i,n[0],n[1],e[0],e[1])<=s)return!0}return!1}hitTestPolygon(t){const i=this.strokeWidth/this.scale/2;null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const h=[{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,i]of this._adjustedPoints)if(s.isPointInPolygon({x:t,y:i},h))return!0;for(const t of h)if(this.hitTest(t.x,t.y))return!0;for(let t=0;t<this._adjustedPoints.length-1;t++){const i={x:this._adjustedPoints[t][0],y:this._adjustedPoints[t][1]},n={x:this._adjustedPoints[t+1][0],y:this._adjustedPoints[t+1][1]};for(let t=0;t<h.length;t++)if(s.intersectLines(i,n,h[t],h[(t+1)%h.length]))return!0}for(let t=0;t<this._adjustedPoints.length-1;t++){const s=this._adjustedPoints[t],n=this._adjustedPoints[t+1];for(let t=0;t<h.length;t++){const e=h[t],r=h[(t+1)%h.length],o=this.pointToLineSegmentDistance(e.x,e.y,s[0],s[1],n[0],n[1]),a=this.pointToLineSegmentDistance(r.x,r.y,s[0],s[1],n[0],n[1]),u=this.pointToLineSegmentDistance(s[0],s[1],e.x,e.y,r.x,r.y),c=this.pointToLineSegmentDistance(n[0],n[1],e.x,e.y,r.x,r.y);if(Math.min(o,a,u,c)<=i)return!0}}return!1}updatePosition(t,i){this.translateX=t,this.translateY=i,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,i=Math.cos(t),s=Math.sin(t),h=this.points.map((t=>t[0])),n=this.points.map((t=>t[1])),e={x:(Math.min(...h)+Math.max(...h))/2,y:(Math.min(...n)+Math.max(...n))/2},{x:r,y:o}=e;return this.points.map((([t,h])=>{const n=t-r,e=h-o;return[r+n*i-e*s,o+n*s+e*i]})).map((([t,i])=>[Math.abs(t-this.x)/this.scale+this.translateX,Math.abs(i-this.y)/this.scale+this.translateY]))}pointToLineSegmentDistance(t,i,s,h,n,e){const r=n-s,o=e-h,a=r*r+o*o;let u,c,l=-1;0!==a&&(l=((t-s)*r+(i-h)*o)/a),l<0?(u=s,c=h):l>1?(u=n,c=e):(u=s+l*r,c=h+l*o);const f=t-u,d=i-c;return Math.sqrt(f*f+d*d)}updateDimensions(){const t=this.points.map((([t,i])=>[t*Math.cos(this.rotation)-i*Math.sin(this.rotation),t*Math.sin(this.rotation)+i*Math.cos(this.rotation)])),i=Math.min(...t.map((t=>t[0]-this.strokeWidth/2))),s=Math.min(...t.map((t=>t[1]-this.strokeWidth/2))),h=Math.max(...t.map((t=>t[0]+this.strokeWidth/2))),n=Math.max(...t.map((t=>t[1]+this.strokeWidth/2)));this.width=h-i+this.lineSlack,this.height=n-s+this.lineSlack,this.x=i,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,i=Math.min(...this.points.map((t=>t[1])))-this.strokeWidth/2,s=Math.max(...this.points.map((t=>t[0])))+this.strokeWidth/2,h=Math.max(...this.points.map((t=>t[1])))+this.strokeWidth/2;this.width=s-t+this.lineSlack,this.height=h-i+this.lineSlack,this.x=t,this.y=i}generateSvgPath(){const t=this.getStrokeFromPoints(this.points,this.strokeWidth);return this.getSvgPathFromStroke(t)}getStrokeFromPoints(t,i){return r.getStroke(t,{size:i,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,i=!0){const s=t.length;if(s<4)return"";let h=t[0],n=t[1];const e=t[2];let r=`M${h[0].toFixed(2)},${h[1].toFixed(2)} Q${n[0].toFixed(2)},${n[1].toFixed(2)} ${o.average(n[0],e[0]).toFixed(2)},${o.average(n[1],e[1]).toFixed(2)} T`;for(let i=2,e=s-1;i<e;i++)h=t[i],n=t[i+1],r+=`${o.average(h[0],n[0]).toFixed(2)},${o.average(h[1],n[1]).toFixed(2)} `;return i&&(r+="Z"),r}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 i=this.centerX,s=this.centerY,h=this.strokeWidth/this.scale/2;if(null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints()),this._adjustedPoints.length<1)return null;let n=!0;for(let e=1;e<=32;e++){const r=e/32,o=t.x+(i-t.x)*r,a=t.y+(s-t.y)*r;let u=1/0;if(1===this._adjustedPoints.length){const t=this._adjustedPoints[0],i=o-t[0],s=a-t[1];u=Math.sqrt(i*i+s*s)}else for(let t=0;t<this._adjustedPoints.length-1;t++){const i=this._adjustedPoints[t],s=this._adjustedPoints[t+1],h=this.pointToLineSegmentDistance(o,a,i[0],i[1],s[0],s[1]);h<u&&(u=h)}const c=u<=h;if(n&&c){let n=(e-1)/32,o=r;for(let e=0;e<8;e++){const e=(n+o)/2,r=t.x+(i-t.x)*e,a=t.y+(s-t.y)*e;let u=1/0;if(1===this._adjustedPoints.length){const t=this._adjustedPoints[0],i=r-t[0],s=a-t[1];u=Math.sqrt(i*i+s*s)}else for(let t=0;t<this._adjustedPoints.length-1;t++){const i=this._adjustedPoints[t],s=this._adjustedPoints[t+1],h=this.pointToLineSegmentDistance(r,a,i[0],i[1],s[0],s[1]);h<u&&(u=h)}u<=h?o=e:n=e}const a=(n+o)/2;return{x:t.x+(i-t.x)*a,y:t.y+(s-t.y)*a}}n=!c}return null}}class u extends h{__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.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,i){const s=new u;return s._core=t,s.id=s.generateId(),s.workspaceId=t.store.state.activeWorkspace.id,s.userId=t.user?.id,s.options=i,s.startX=i?.startX??0,s.startY=i?.startY??0,s.endX=i?.endX??0,s.endY=i?.endY??0,s.controlX=i?.controlX,s.controlY=i?.controlY,s.translateX=i?.translateX??0,s.translateY=i?.translateY??0,s.scale=i?.scale??1,s.strokeWidth=i?.strokeWidth??4,s.stroke=i?.stroke??{light:"#000000",dark:"#ffffff"},s.opacity=i?.opacity??1,s.startAnchor=i?.startAnchor,s.endAnchor=i?.endAnchor,s.arrows=i?.arrows,s.zIndex=t.store.currentZIndex,s.updateDimensions(),s}resize(t,i,s,h){if(s<=1||h<=1)return;const n=s/this.width,e=h/this.height;this.startX=this.startX*n,this.startY=this.startY*e,this.endX=this.endX*n,this.endY=this.endY*e,void 0!==this.controlX&&void 0!==this.controlY&&(this.controlX=this.controlX*n,this.controlY=this.controlY*e);const{minX:r,minY:o,maxX:a,maxY:u}=this.calculateBoundingBox();this.width=a-r,this.height=u-o,this.x=r,this.y=o,this.translateX=t,this.translateY=i,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,i,s,h){const n=(i-h)/this._core.store.state.scale;this.translateX+=(t-s)/this._core.store.state.scale,this.translateY+=n,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,i){const s=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 h=this.getClipInfo();return this.pointToBezierDistance(t,i,h.start?.t??0,h.end?.t??1)<=s}const h=this.getClipInfo(),n=h.start?[h.start.x,h.start.y]:this._adjustedPoints[0],e=h.end?[h.end.x,h.end.y]:this._adjustedPoints[1];return this.pointToLineSegmentDistance(t,i,n[0],n[1],e[0],e[1])<=s}hitTestPolygon(t){const i=this.strokeWidth/this.scale/2;null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const h=this.getClipInfo(),n=[{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}],e=h.start?[h.start.x,h.start.y]:this._adjustedPoints[0],r=h.end?[h.end.x,h.end.y]:this._adjustedPoints[1],o=[e,r];for(const[t,i]of o)if(s.isPointInPolygon({x:t,y:i},n))return!0;for(const t of n)if(this.hitTest(t.x,t.y))return!0;if(void 0!==this.controlX&&void 0!==this.controlY){const t=this._adjustedPoints[0],e=this._adjustedPoints[1],r=this.computeAdjustedControlPoint(),o=h.start?.t??0,a=h.end?.t??1,u=20;for(let h=0;h<=u;h++){const c=o+h/u*(a-o),l=1-c,f=l*l*t[0]+2*l*c*r[0]+c*c*e[0],d=l*l*t[1]+2*l*c*r[1]+c*c*e[1];if(s.isPointInPolygon({x:f,y:d},n))return!0;for(let t=0;t<n.length;t++){const s=n[t],h=n[(t+1)%n.length];if(this.pointToLineSegmentDistance(f,d,s.x,s.y,h.x,h.y)<=i)return!0}}return!1}const a={x:e[0],y:e[1]},u={x:r[0],y:r[1]};for(let t=0;t<n.length;t++){const h=n[t],e=n[(t+1)%n.length];if(s.intersectLines(a,u,h,e))return!0;const r=this.pointToLineSegmentDistance(h.x,h.y,a.x,a.y,u.x,u.y),o=this.pointToLineSegmentDistance(e.x,e.y,a.x,a.y,u.x,u.y),c=this.pointToLineSegmentDistance(a.x,a.y,h.x,h.y,e.x,e.y),l=this.pointToLineSegmentDistance(u.x,u.y,h.x,h.y,e.x,e.y);if(Math.min(r,o,c,l)<=i)return!0}return!1}updatePosition(t,i){this.translateX=t,this.translateY=i,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}updateEndpoint(t,i,s){"start"===t?(this.startX=i,this.startY=s):(this.endX=i,this.endY=s);const h=this.width,n=this.height,{minX:e,minY:r,maxX:o,maxY:a}=this.calculateBoundingBox(),u=e-this.x,c=r-this.y,l=o-e,f=a-r,d=(l-h)/2,M=(f-n)/2;this.x=e,this.y=r,this.width=l,this.height=f;const g=Math.cos(this.rotation),m=Math.sin(this.rotation),p=u+d,x=c+M,y=p*m+x*g-M;this.translateX+=(p*g-x*m-d)/this.scale,this.translateY+=y/this.scale,this._adjustedPoints=null,this._clipInfo=null,this._core.store.objects.update(this)}updateControlPoint(t,i){this.controlX=t,this.controlY=i;const s=this.width,h=this.height,{minX:n,minY:e,maxX:r,maxY:o}=this.calculateBoundingBox(),a=n-this.x,u=e-this.y,c=r-n,l=o-e,f=(c-s)/2,d=(l-h)/2;this.x=n,this.y=e,this.width=c,this.height=l;const M=Math.cos(this.rotation),g=Math.sin(this.rotation),m=a+f,p=u+d,x=m*g+p*M-d;this.translateX+=(m*M-p*g-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]],i=this.rotation,s=Math.cos(i),h=Math.sin(i),n=t.map((t=>t[0])),e=t.map((t=>t[1])),r={x:(Math.min(...n)+Math.max(...n))/2,y:(Math.min(...e)+Math.max(...e))/2},{x:o,y:a}=r;return t.map((([t,i])=>{const n=t-o,e=i-a;return[o+n*s-e*h,a+n*h+e*s]})).map((([t,i])=>[(t-this.x)/this.scale+this.translateX,(i-this.y)/this.scale+this.translateY]))}pointToLineSegmentDistance(t,i,s,h,n,e){const r=n-s,o=e-h,a=r*r+o*o;let u,c,l=-1;0!==a&&(l=((t-s)*r+(i-h)*o)/a),l<0?(u=s,c=h):l>1?(u=n,c=e):(u=s+l*r,c=h+l*o);const f=t-u,d=i-c;return Math.sqrt(f*f+d*d)}pointToBezierDistance(t,i,s=0,h=1){null===this._adjustedPoints&&(this._adjustedPoints=this.computeAdjustedPoints());const n=this._adjustedPoints[0],e=this._adjustedPoints[1],r=this.computeAdjustedControlPoint();let o=1/0;for(let a=0;a<=20;a++){const u=s+a/20*(h-s),c=1-u,l=t-(c*c*n[0]+2*c*u*r[0]+u*u*e[0]),f=i-(c*c*n[1]+2*c*u*r[1]+u*u*e[1]),d=Math.sqrt(l*l+f*f);d<o&&(o=d)}return o}getClipInfo(){if(this._clipInfo)return this._clipInfo;const t=this.endAnchor,i={};if(this.startAnchor){const t=this._core.anchorManager.findAnchorTarget(this,"start");if(t){const s=this._core.anchorManager.computeAnchorClipInfo(this,"start",t);s&&(i.start={x:s.worldX,y:s.worldY,t:s.t})}}if(t){const t=this._core.anchorManager.findAnchorTarget(this,"end");if(t){const s=this._core.anchorManager.computeAnchorClipInfo(this,"end",t);s&&(i.end={x:s.worldX,y:s.worldY,t:s.t})}}return this._clipInfo=i,i}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,i=Math.cos(t),s=Math.sin(t),h=[this.startX,this.endX],n=[this.startY,this.endY],e={x:(Math.min(...h)+Math.max(...h))/2,y:(Math.min(...n)+Math.max(...n))/2},{x:r,y:o}=e,a=this.controlX-r,u=this.controlY-o;return[(r+a*i-u*s-this.x)/this.scale+this.translateX,(o+a*s+u*i-this.y)/this.scale+this.translateY]}get rotatedPolygon(){const t=this.padding,{minX:i,minY:s,maxX:h,maxY:n}=u.calculateBoundingBox(this.startX,this.startY,this.endX,this.endY,this.controlX,this.controlY,this.strokeWidth),e=i-this.x+t,r=s-this.y+t,o=h-this.x+t,a=n-this.y+t,c={x:e,y:r},l={x:o,y:r},f={x:o,y:a},d={x:e,y:a},M=this.totalWidth/2,g=this.totalHeight/2,m=this.rotation,p=Math.cos(m),x=Math.sin(m),y=t=>({x:((t.x-M)*p-(t.y-g)*x+M)/this.scale+this.translateX,y:((t.x-M)*x+(t.y-g)*p+g)/this.scale+this.translateY});return{topLeft:y(c),topRight:y(l),bottomRight:y(f),bottomLeft:y(d)}}static calculateBoundingBox(t,i,s,h,n,e,r){let o=Math.min(t,s),a=Math.min(i,h),u=Math.max(t,s),c=Math.max(i,h);if(void 0!==n&&void 0!==e){const r=t-2*n+s;if(0!==r){const i=(t-n)/r;if(i>0&&i<1){const h=(1-i)*(1-i)*t+2*(1-i)*i*n+i*i*s;o=Math.min(o,h),u=Math.max(u,h)}}const l=i-2*e+h;if(0!==l){const t=(i-e)/l;if(t>0&&t<1){const s=(1-t)*(1-t)*i+2*(1-t)*t*e+t*t*h;a=Math.min(a,s),c=Math.max(c,s)}}}const l=r/2;return{minX:o-l,minY:a-l,maxX:u+l,maxY:c+l}}calculateBoundingBox(){return u.calculateBoundingBox(this.startX,this.startY,this.endX,this.endY,this.controlX,this.controlY,this.strokeWidth)}updateDimensions(){const{minX:t,minY:i,maxX:s,maxY:h}=this.calculateBoundingBox();this.width=s-t,this.height=h-i,this.x=t,this.y=i,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 i="start"===t?this.arrows?.start:this.arrows?.end;return i?.size??3*this.strokeWidth}getArrowFill(t){const s="start"===t?this.arrows?.start:this.arrows?.end;return i.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}}export{a as K,u as a,s as b,h as c}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './workspace.migrations-
|
|
2
|
-
export { E as APP_STATE_MIGRATIONS, A as AssetNotFoundError, C as CURRENT_APP_STATE_SCHEMA_VERSION, z as CURRENT_WORKSPACE_SCHEMA_VERSION, v as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, u as DEFAULT_LINE_TOOL_CONFIG, t as DEFAULT_TEXT_CONFIG, p as IndexedDBAssetProvider, I as IndexedDBSyncProvider, y as KritzelAlignment, r as KritzelAnchorManager, o as KritzelAssetResolver, g as KritzelBrushTool, m as KritzelCursorHelper, i as KritzelEraserTool, e as KritzelGroup, c as KritzelImage, j as KritzelImageTool, d as KritzelLine, h as KritzelLineTool, b as KritzelPath, n as KritzelSelectionTool, f as KritzelShape, l as KritzelShapeTool, K as KritzelText, k as KritzelTextTool, s as KritzelThemeManager, q as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, F as WORKSPACE_MIGRATIONS, x as darkTheme, w as lightTheme, B as runMigrations } from './workspace.migrations-
|
|
1
|
+
import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './workspace.migrations-C_uxbvuH.js';
|
|
2
|
+
export { E as APP_STATE_MIGRATIONS, A as AssetNotFoundError, C as CURRENT_APP_STATE_SCHEMA_VERSION, z as CURRENT_WORKSPACE_SCHEMA_VERSION, v as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, u as DEFAULT_LINE_TOOL_CONFIG, t as DEFAULT_TEXT_CONFIG, p as IndexedDBAssetProvider, I as IndexedDBSyncProvider, y as KritzelAlignment, r as KritzelAnchorManager, o as KritzelAssetResolver, g as KritzelBrushTool, m as KritzelCursorHelper, i as KritzelEraserTool, e as KritzelGroup, c as KritzelImage, j as KritzelImageTool, d as KritzelLine, h as KritzelLineTool, b as KritzelPath, n as KritzelSelectionTool, f as KritzelShape, l as KritzelShapeTool, K as KritzelText, k as KritzelTextTool, s as KritzelThemeManager, q as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, F as WORKSPACE_MIGRATIONS, x as darkTheme, w as lightTheme, B as runMigrations } from './workspace.migrations-C_uxbvuH.js';
|
|
3
3
|
import * as Y from 'yjs';
|
|
4
4
|
import { WebsocketProvider } from 'y-websocket';
|
|
5
5
|
import 'y-indexeddb';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-D9HaikfQ.js';
|
|
2
|
-
import { b as KritzelPath, d as KritzelLine, G as KritzelColorHelper, n as KritzelSelectionTool, g as KritzelBrushTool, h as KritzelLineTool, l as KritzelShapeTool, k as KritzelTextTool, J as KritzelDevicesHelper, L as KritzelMouseButton, M as DEFAULT_COLOR_PALETTE, S as ShapeType, I as IndexedDBSyncProvider, D as DEFAULT_BRUSH_CONFIG, i as KritzelEraserTool, u as DEFAULT_LINE_TOOL_CONFIG, t as DEFAULT_TEXT_CONFIG, j as KritzelImageTool, y as KritzelAlignment, v as DEFAULT_ASSET_STORAGE_CONFIG, N as KritzelSelectionGroup, O as KritzelSelectionBox, P as KritzelIconRegistry, Q as KritzelKeyboardHelper, R as KritzelBaseHandler, T as KritzelToolRegistry, U as KritzelBaseObject, q as KritzelWorkspace, e as KritzelGroup, c as KritzelImage, f as KritzelShape, K as KritzelText, B as runMigrations, z as CURRENT_WORKSPACE_SCHEMA_VERSION, F as WORKSPACE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, E as APP_STATE_MIGRATIONS, V as ObjectHelper, m as KritzelCursorHelper, r as KritzelAnchorManager, s as KritzelThemeManager, o as KritzelAssetResolver, X as KritzelClassHelper, Y as KritzelEventHelper, Z as KritzelBaseTool, W as WORKSPACE_EXPORT_VERSION } from './workspace.migrations-
|
|
2
|
+
import { b as KritzelPath, d as KritzelLine, G as KritzelColorHelper, n as KritzelSelectionTool, g as KritzelBrushTool, h as KritzelLineTool, l as KritzelShapeTool, k as KritzelTextTool, J as KritzelDevicesHelper, L as KritzelMouseButton, M as DEFAULT_COLOR_PALETTE, S as ShapeType, I as IndexedDBSyncProvider, D as DEFAULT_BRUSH_CONFIG, i as KritzelEraserTool, u as DEFAULT_LINE_TOOL_CONFIG, t as DEFAULT_TEXT_CONFIG, j as KritzelImageTool, y as KritzelAlignment, v as DEFAULT_ASSET_STORAGE_CONFIG, N as KritzelSelectionGroup, O as KritzelSelectionBox, P as KritzelIconRegistry, Q as KritzelKeyboardHelper, R as KritzelBaseHandler, T as KritzelToolRegistry, U as KritzelBaseObject, q as KritzelWorkspace, e as KritzelGroup, c as KritzelImage, f as KritzelShape, K as KritzelText, B as runMigrations, z as CURRENT_WORKSPACE_SCHEMA_VERSION, F as WORKSPACE_MIGRATIONS, C as CURRENT_APP_STATE_SCHEMA_VERSION, E as APP_STATE_MIGRATIONS, V as ObjectHelper, m as KritzelCursorHelper, r as KritzelAnchorManager, s as KritzelThemeManager, o as KritzelAssetResolver, X as KritzelClassHelper, Y as KritzelEventHelper, Z as KritzelBaseTool, W as WORKSPACE_EXPORT_VERSION } from './workspace.migrations-C_uxbvuH.js';
|
|
3
3
|
import * as Y from 'yjs';
|
|
4
4
|
import 'y-indexeddb';
|
|
5
5
|
import 'y-websocket';
|
|
@@ -1964,6 +1964,7 @@ const KritzelEditor = class {
|
|
|
1964
1964
|
];
|
|
1965
1965
|
objectContextMenuItems = [
|
|
1966
1966
|
{ label: 'Copy', icon: 'copy', group: 'clipboard', action: () => this.engineRef.copy() },
|
|
1967
|
+
{ label: 'Cut', icon: 'cut', group: 'clipboard', action: () => this.engineRef.cut() },
|
|
1967
1968
|
{
|
|
1968
1969
|
label: 'Paste',
|
|
1969
1970
|
icon: 'paste',
|
|
@@ -2224,6 +2225,9 @@ const KritzelEditor = class {
|
|
|
2224
2225
|
async copy() {
|
|
2225
2226
|
return this.engineRef.copy();
|
|
2226
2227
|
}
|
|
2228
|
+
async cut() {
|
|
2229
|
+
return this.engineRef.cut();
|
|
2230
|
+
}
|
|
2227
2231
|
async paste(x, y) {
|
|
2228
2232
|
return this.engineRef.paste(x, y);
|
|
2229
2233
|
}
|
|
@@ -2571,27 +2575,27 @@ const KritzelEditor = class {
|
|
|
2571
2575
|
const isLoggedIn = this.isLoggedIn;
|
|
2572
2576
|
const shouldShowCurrentUser = isLoggedIn;
|
|
2573
2577
|
const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
|
|
2574
|
-
return (h(Host, { key: '
|
|
2578
|
+
return (h(Host, { key: '6e832b0036dbc0d36aa70b297cf73cceafbaa846' }, h("div", { key: '48e99e354326781792798fdcc2b07a1b5bbc8cca', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '980bf87558891a8b20030be4b6d0c32ee568ca4d', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '59636e148d71c54e51f17095dfec2754d63f1692', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '11f17eef609d3d3ece1ead3cf51524e690f4a2eb', ref: el => {
|
|
2575
2579
|
if (el) {
|
|
2576
2580
|
this.engineRef = el;
|
|
2577
2581
|
}
|
|
2578
|
-
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: '
|
|
2582
|
+
}, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: 'b9852a78ed062ca7026b8d0da44263fb0a64d8cc', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
|
|
2579
2583
|
if (el) {
|
|
2580
2584
|
this.controlsRef = el;
|
|
2581
2585
|
}
|
|
2582
|
-
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '
|
|
2586
|
+
}, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'f3e33d794033eb5fdbde8c4553c744da61eefc51', class: "top-right-buttons" }, h("kritzel-settings", { key: '466ac8a5d110feb46472c3207f4a73e9ce37e148', ref: el => {
|
|
2583
2587
|
if (el) {
|
|
2584
2588
|
this.settingsRef = el;
|
|
2585
2589
|
}
|
|
2586
|
-
}, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '
|
|
2590
|
+
}, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'c6e0eca3baca940f9160ca02989d5c27410ccc59', ref: el => {
|
|
2587
2591
|
if (el) {
|
|
2588
2592
|
this.exportRef = el;
|
|
2589
2593
|
}
|
|
2590
|
-
}, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '
|
|
2594
|
+
}, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'b66a7736b9ac0942873e5bdc1677228cd53d57d6', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '4ab0b49bd43f428fb1ade5d5d9836d846355d92f', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '04d6d43b60ad1bd3272dfb1e09aa3efb9602c42e', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: '7ca482736a2253d95dffc369de1db1d14d207c35', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'c5ae3f2e981d980fd35380424036acdc29b0fe53', ref: el => {
|
|
2591
2595
|
if (el) {
|
|
2592
2596
|
this.shareDialogRef = el;
|
|
2593
2597
|
}
|
|
2594
|
-
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '
|
|
2598
|
+
}, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'f72b412715d0ffd9a8038ade192d894623fc98fc', ref: el => {
|
|
2595
2599
|
if (el) {
|
|
2596
2600
|
this.loginDialogRef = el;
|
|
2597
2601
|
}
|
|
@@ -20385,6 +20389,7 @@ class KritzelViewport {
|
|
|
20385
20389
|
const startTranslateY = this._core.store.state.translateY;
|
|
20386
20390
|
const startScale = this._core.store.state.scale;
|
|
20387
20391
|
const startTime = performance.now();
|
|
20392
|
+
this._core.store.state.isScaling = true;
|
|
20388
20393
|
const animate = (currentTime) => {
|
|
20389
20394
|
const elapsed = currentTime - startTime;
|
|
20390
20395
|
const progress = Math.min(elapsed / duration, 1);
|
|
@@ -20403,6 +20408,8 @@ class KritzelViewport {
|
|
|
20403
20408
|
}
|
|
20404
20409
|
else {
|
|
20405
20410
|
this._animationFrameId = null;
|
|
20411
|
+
this._core.store.state.isScaling = false;
|
|
20412
|
+
this._core.rerender();
|
|
20406
20413
|
this._debounceUpdate();
|
|
20407
20414
|
}
|
|
20408
20415
|
};
|
|
@@ -20517,7 +20524,23 @@ class KritzelKeyHandler extends KritzelBaseHandler {
|
|
|
20517
20524
|
*/
|
|
20518
20525
|
shortcuts = [
|
|
20519
20526
|
// General
|
|
20520
|
-
{
|
|
20527
|
+
{
|
|
20528
|
+
key: 'Escape',
|
|
20529
|
+
label: 'Clear Selection',
|
|
20530
|
+
category: 'General',
|
|
20531
|
+
condition: c => !!c.store.activeText || !!c.store.activeShape || !!c.store.selectionGroup,
|
|
20532
|
+
action: c => {
|
|
20533
|
+
if (c.store.activeText) {
|
|
20534
|
+
c.store.activeText.handleEscape();
|
|
20535
|
+
return;
|
|
20536
|
+
}
|
|
20537
|
+
if (c.store.activeShape) {
|
|
20538
|
+
c.store.activeShape.handleEscape();
|
|
20539
|
+
return;
|
|
20540
|
+
}
|
|
20541
|
+
c.clearSelection();
|
|
20542
|
+
},
|
|
20543
|
+
},
|
|
20521
20544
|
{ key: 'Delete', label: 'Delete Selected', category: 'General', condition: c => !!c.store.selectionGroup, action: c => c.delete() },
|
|
20522
20545
|
{ key: 'a', ctrl: true, label: 'Select All in Viewport', category: 'General', action: c => c.selectAllObjectsInViewport() },
|
|
20523
20546
|
{ key: 'A', ctrl: true, shift: true, label: 'Select All Objects', category: 'General', action: c => c.selectAllObjects() },
|
|
@@ -20547,7 +20570,14 @@ class KritzelKeyHandler extends KritzelBaseHandler {
|
|
|
20547
20570
|
},
|
|
20548
20571
|
},
|
|
20549
20572
|
{ key: 'x', ctrl: true, label: 'Cut', category: 'Clipboard', condition: c => !!c.store.selectionGroup, action: c => c.cut() },
|
|
20550
|
-
{
|
|
20573
|
+
{
|
|
20574
|
+
key: 'v',
|
|
20575
|
+
ctrl: true,
|
|
20576
|
+
label: 'Paste',
|
|
20577
|
+
category: 'Clipboard',
|
|
20578
|
+
condition: c => !!c.store.state.copiedObjects && !c.store.activeText && !c.store.activeShape,
|
|
20579
|
+
action: c => c.paste(),
|
|
20580
|
+
},
|
|
20551
20581
|
// Object layering
|
|
20552
20582
|
{ key: '+', ctrl: true, label: 'Bring Forward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.bringForward() },
|
|
20553
20583
|
{ key: '-', ctrl: true, label: 'Send Backward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.sendBackward() },
|
|
@@ -20557,10 +20587,46 @@ class KritzelKeyHandler extends KritzelBaseHandler {
|
|
|
20557
20587
|
{ key: 'g', ctrl: true, label: 'Group', category: 'Grouping', condition: c => !!c.store.selectionGroup && c.store.selectionGroup.objects.length >= 2, action: c => c.group() },
|
|
20558
20588
|
{ key: 'G', ctrl: true, shift: true, label: 'Ungroup', category: 'Grouping', condition: c => !!c.store.selectionGroup, action: c => c.ungroup() },
|
|
20559
20589
|
// Movement
|
|
20560
|
-
{
|
|
20561
|
-
|
|
20562
|
-
|
|
20563
|
-
|
|
20590
|
+
{
|
|
20591
|
+
key: 'ArrowUp',
|
|
20592
|
+
label: 'Move Object Up',
|
|
20593
|
+
category: 'Movement',
|
|
20594
|
+
condition: c => !!c.store.selectionGroup,
|
|
20595
|
+
action: c => {
|
|
20596
|
+
c.store.selectionGroup.move(0, 0, 0, NUDGE_AMOUNT);
|
|
20597
|
+
c.rerender();
|
|
20598
|
+
},
|
|
20599
|
+
},
|
|
20600
|
+
{
|
|
20601
|
+
key: 'ArrowDown',
|
|
20602
|
+
label: 'Move Object Down',
|
|
20603
|
+
category: 'Movement',
|
|
20604
|
+
condition: c => !!c.store.selectionGroup,
|
|
20605
|
+
action: c => {
|
|
20606
|
+
c.store.selectionGroup.move(0, NUDGE_AMOUNT, 0, 0);
|
|
20607
|
+
c.rerender();
|
|
20608
|
+
},
|
|
20609
|
+
},
|
|
20610
|
+
{
|
|
20611
|
+
key: 'ArrowLeft',
|
|
20612
|
+
label: 'Move Object Left',
|
|
20613
|
+
category: 'Movement',
|
|
20614
|
+
condition: c => !!c.store.selectionGroup,
|
|
20615
|
+
action: c => {
|
|
20616
|
+
c.store.selectionGroup.move(0, 0, NUDGE_AMOUNT, 0);
|
|
20617
|
+
c.rerender();
|
|
20618
|
+
},
|
|
20619
|
+
},
|
|
20620
|
+
{
|
|
20621
|
+
key: 'ArrowRight',
|
|
20622
|
+
label: 'Move Object Right',
|
|
20623
|
+
category: 'Movement',
|
|
20624
|
+
condition: c => !!c.store.selectionGroup,
|
|
20625
|
+
action: c => {
|
|
20626
|
+
c.store.selectionGroup.move(NUDGE_AMOUNT, 0, 0, 0);
|
|
20627
|
+
c.rerender();
|
|
20628
|
+
},
|
|
20629
|
+
},
|
|
20564
20630
|
];
|
|
20565
20631
|
/**
|
|
20566
20632
|
* Creates a new instance of the key handler.
|
|
@@ -20590,6 +20656,14 @@ class KritzelKeyHandler extends KritzelBaseHandler {
|
|
|
20590
20656
|
*/
|
|
20591
20657
|
handleKeyDown(event) {
|
|
20592
20658
|
this._core.store.state.isCtrlKeyPressed = event.ctrlKey;
|
|
20659
|
+
// While a text or shape's text editor is being edited, let ProseMirror /
|
|
20660
|
+
// the browser handle keys natively (Ctrl+A, Ctrl+C, arrows, etc.) instead
|
|
20661
|
+
// of running global canvas shortcuts. Escape is the one exception — it
|
|
20662
|
+
// still runs through the shortcut system so it can collapse the text
|
|
20663
|
+
// selection (handled inside the shortcut's action).
|
|
20664
|
+
if ((this._core.store.activeText || this._core.store.activeShape) && event.key !== 'Escape') {
|
|
20665
|
+
return;
|
|
20666
|
+
}
|
|
20593
20667
|
const shortcut = this.shortcuts.find(s => s.key === event.key && !!s.ctrl === event.ctrlKey && !!s.shift === event.shiftKey && (!s.condition || s.condition(this._core)));
|
|
20594
20668
|
if (shortcut) {
|
|
20595
20669
|
event.preventDefault();
|
|
@@ -23852,6 +23926,31 @@ class KritzelCore {
|
|
|
23852
23926
|
// Batch all inserts and updates in a single Y.js transaction to avoid
|
|
23853
23927
|
// N separate observer callbacks and N rerenders (fires only once at commit)
|
|
23854
23928
|
this._store.objects.transaction(() => {
|
|
23929
|
+
// Recursively flush a group's pending children (and any nested groups'
|
|
23930
|
+
// pending children) into the store. Without recursion, nested groups
|
|
23931
|
+
// would have their grandchildren stranded in `_pendingChildren` and they
|
|
23932
|
+
// would never appear on the canvas, even though the parent group's
|
|
23933
|
+
// bounding box looks correct.
|
|
23934
|
+
const flushPendingChildren = (group, parentZIndex) => {
|
|
23935
|
+
if (group._pendingChildren.length === 0) {
|
|
23936
|
+
return;
|
|
23937
|
+
}
|
|
23938
|
+
const pendingChildren = group._pendingChildren;
|
|
23939
|
+
group._pendingChildren = [];
|
|
23940
|
+
pendingChildren.forEach((child, childIndex) => {
|
|
23941
|
+
if (child.workspaceId !== activeWorkspace.id) {
|
|
23942
|
+
child.workspaceId = activeWorkspace.id;
|
|
23943
|
+
}
|
|
23944
|
+
child.updatePosition(child.translateX + offsetX, child.translateY + offsetY);
|
|
23945
|
+
child.zIndex = parentZIndex + childIndex + 1;
|
|
23946
|
+
// Recurse before adding so grandchildren are inserted as well
|
|
23947
|
+
if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
|
|
23948
|
+
flushPendingChildren(child, child.zIndex);
|
|
23949
|
+
}
|
|
23950
|
+
this.addObject(child);
|
|
23951
|
+
});
|
|
23952
|
+
group.finalize();
|
|
23953
|
+
};
|
|
23855
23954
|
// First add all copied objects to the objectsMap with updated positions
|
|
23856
23955
|
copiedObjects.forEach((obj, i) => {
|
|
23857
23956
|
// Update workspace if pasting to a different workspace
|
|
@@ -23862,26 +23961,9 @@ class KritzelCore {
|
|
|
23862
23961
|
obj.updatePosition(obj.translateX + offsetX, obj.translateY + offsetY);
|
|
23863
23962
|
// Update z-index
|
|
23864
23963
|
obj.zIndex = baseZIndex + i;
|
|
23865
|
-
// Handle KritzelGroup: also add pending children with offset
|
|
23964
|
+
// Handle KritzelGroup: also add pending children (and grandchildren) with offset
|
|
23866
23965
|
if (KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
|
|
23867
|
-
|
|
23868
|
-
obj._pendingChildren.forEach((child, childIndex) => {
|
|
23869
|
-
// Update workspace
|
|
23870
|
-
if (child.workspaceId !== activeWorkspace.id) {
|
|
23871
|
-
child.workspaceId = activeWorkspace.id;
|
|
23872
|
-
}
|
|
23873
|
-
// Update position with offset
|
|
23874
|
-
child.updatePosition(child.translateX + offsetX, child.translateY + offsetY);
|
|
23875
|
-
// Update z-index
|
|
23876
|
-
child.zIndex = baseZIndex + i + childIndex;
|
|
23877
|
-
// Add child to store
|
|
23878
|
-
this.addObject(child);
|
|
23879
|
-
});
|
|
23880
|
-
// Clear pending children
|
|
23881
|
-
obj._pendingChildren = [];
|
|
23882
|
-
// Finalize the group's bounding box and snapshots
|
|
23883
|
-
obj.finalize();
|
|
23884
|
-
}
|
|
23966
|
+
flushPendingChildren(obj, obj.zIndex);
|
|
23885
23967
|
}
|
|
23886
23968
|
// Add to objectsMap
|
|
23887
23969
|
this.addObject(obj);
|
|
@@ -26052,6 +26134,10 @@ const KritzelEngine = class {
|
|
|
26052
26134
|
async copy() {
|
|
26053
26135
|
this.core.copy();
|
|
26054
26136
|
}
|
|
26137
|
+
/** Cuts the currently selected objects to the internal clipboard (deletes them from the canvas). */
|
|
26138
|
+
async cut() {
|
|
26139
|
+
this.core.cut();
|
|
26140
|
+
}
|
|
26055
26141
|
/**
|
|
26056
26142
|
* Pastes previously copied objects at the specified world coordinates.
|
|
26057
26143
|
* @param x - X position in world coordinates.
|
|
@@ -26181,23 +26267,39 @@ const KritzelEngine = class {
|
|
|
26181
26267
|
object.setContent(pendingContent);
|
|
26182
26268
|
}
|
|
26183
26269
|
}
|
|
26184
|
-
// Handle KritzelGroup: flush pending children into the store
|
|
26270
|
+
// Handle KritzelGroup: flush pending children (recursively for nested groups) into the store
|
|
26185
26271
|
if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && object._pendingChildren.length > 0) {
|
|
26186
|
-
|
|
26187
|
-
//
|
|
26272
|
+
// Build a map of old ID → new ID across all nesting levels so we can
|
|
26273
|
+
// remap anchor references regardless of how deeply nested the line is.
|
|
26188
26274
|
const idRemapping = new Map();
|
|
26189
|
-
|
|
26190
|
-
|
|
26191
|
-
|
|
26192
|
-
|
|
26193
|
-
|
|
26194
|
-
|
|
26195
|
-
|
|
26196
|
-
|
|
26197
|
-
|
|
26198
|
-
|
|
26199
|
-
|
|
26200
|
-
|
|
26275
|
+
const allFlushedChildren = [];
|
|
26276
|
+
const flushGroup = (group) => {
|
|
26277
|
+
if (group._pendingChildren.length === 0) {
|
|
26278
|
+
return;
|
|
26279
|
+
}
|
|
26280
|
+
const pending = group._pendingChildren;
|
|
26281
|
+
group._pendingChildren = [];
|
|
26282
|
+
group.childIds = [];
|
|
26283
|
+
pending.forEach(child => {
|
|
26284
|
+
const oldId = child.id;
|
|
26285
|
+
child.id = child.generateId();
|
|
26286
|
+
child._core = this.core;
|
|
26287
|
+
child.scale = this.core.store.state.scale;
|
|
26288
|
+
child.zIndex = this.core.store.currentZIndex;
|
|
26289
|
+
child.workspaceId = this.core.store.state.activeWorkspace.id;
|
|
26290
|
+
idRemapping.set(oldId, child.id);
|
|
26291
|
+
group.childIds.push(child.id);
|
|
26292
|
+
allFlushedChildren.push(child);
|
|
26293
|
+
// Recurse into nested groups before inserting so grandchildren get
|
|
26294
|
+
// proper IDs and `childIds` references before the parent is added.
|
|
26295
|
+
if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
|
|
26296
|
+
flushGroup(child);
|
|
26297
|
+
}
|
|
26298
|
+
});
|
|
26299
|
+
};
|
|
26300
|
+
flushGroup(object);
|
|
26301
|
+
// Remap anchor references in lines across all flushed descendants
|
|
26302
|
+
allFlushedChildren.forEach(child => {
|
|
26201
26303
|
if (KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
|
|
26202
26304
|
if (child.startAnchor && idRemapping.has(child.startAnchor.objectId)) {
|
|
26203
26305
|
child.startAnchor = { objectId: idRemapping.get(child.startAnchor.objectId) };
|
|
@@ -26207,10 +26309,11 @@ const KritzelEngine = class {
|
|
|
26207
26309
|
}
|
|
26208
26310
|
}
|
|
26209
26311
|
});
|
|
26210
|
-
|
|
26312
|
+
// Insert all flushed descendants into the store
|
|
26313
|
+
allFlushedChildren.forEach(child => {
|
|
26211
26314
|
this.core.addObject(child);
|
|
26212
26315
|
});
|
|
26213
|
-
|
|
26316
|
+
// finalize() recurses into nested groups so all bounding boxes/snapshots align
|
|
26214
26317
|
object.finalize();
|
|
26215
26318
|
// Rebuild anchor index so anchored lines are tracked
|
|
26216
26319
|
this.core.anchorManager.rebuildIndex();
|
|
@@ -27165,6 +27268,12 @@ const KritzelEngine = class {
|
|
|
27165
27268
|
this.core.store.state.isResizeHandleSelected = false;
|
|
27166
27269
|
this.core.store.state.isRotationHandleSelected = false;
|
|
27167
27270
|
}
|
|
27271
|
+
if (!(activeTool instanceof KritzelTextTool)) {
|
|
27272
|
+
this.core.resetActiveText();
|
|
27273
|
+
}
|
|
27274
|
+
if (!(activeTool instanceof KritzelShapeTool)) {
|
|
27275
|
+
this.core.resetActiveShape();
|
|
27276
|
+
}
|
|
27168
27277
|
this.core.store.state.skipContextMenu = false;
|
|
27169
27278
|
this.core.store.state.copiedObjects = undefined;
|
|
27170
27279
|
if (activeTool) {
|
|
@@ -27241,7 +27350,7 @@ const KritzelEngine = class {
|
|
|
27241
27350
|
overflow: 'visible',
|
|
27242
27351
|
userSelect: 'none',
|
|
27243
27352
|
imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
|
|
27244
|
-
}, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState !== 'ready' && (h("div", { ref: () => object.ensureLoaded(), style: {
|
|
27353
|
+
}, draggable: false, decoding: "async", loading: "eager", onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState !== 'ready' && (h("div", { ref: () => object.ensureLoaded(), style: {
|
|
27245
27354
|
position: 'absolute',
|
|
27246
27355
|
left: '0',
|
|
27247
27356
|
top: '0',
|
|
@@ -28654,6 +28763,22 @@ const KritzelPortal = class {
|
|
|
28654
28763
|
this.closePortal();
|
|
28655
28764
|
}
|
|
28656
28765
|
}
|
|
28766
|
+
handleOutsidePointerDown(event) {
|
|
28767
|
+
if (!this.portal)
|
|
28768
|
+
return;
|
|
28769
|
+
const isLastPortal = this.lastAddedPortal === this.portal;
|
|
28770
|
+
if (!isLastPortal)
|
|
28771
|
+
return;
|
|
28772
|
+
const path = event.composedPath();
|
|
28773
|
+
const isInsidePortal = path.some(el => el === this.host);
|
|
28774
|
+
const isOnAnchor = this.anchor && path.some(el => el === this.anchor);
|
|
28775
|
+
if (!isInsidePortal && !isOnAnchor) {
|
|
28776
|
+
event.stopPropagation();
|
|
28777
|
+
event.preventDefault();
|
|
28778
|
+
this.close.emit();
|
|
28779
|
+
this.closePortal();
|
|
28780
|
+
}
|
|
28781
|
+
}
|
|
28657
28782
|
handleKeyDown(event) {
|
|
28658
28783
|
const isLastPortal = this.lastAddedPortal === this.portal;
|
|
28659
28784
|
if (!isLastPortal)
|
|
@@ -28875,7 +29000,7 @@ const KritzelPortal = class {
|
|
|
28875
29000
|
this.portal.style.visibility = 'visible';
|
|
28876
29001
|
}
|
|
28877
29002
|
render() {
|
|
28878
|
-
return (h(Host, { key: '
|
|
29003
|
+
return (h(Host, { key: 'dcd8e6f3787c713012aeb6436bf63f2f4930c39e', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '830f51521a77f0a28471026494323e14ab4f9f9a' })));
|
|
28879
29004
|
}
|
|
28880
29005
|
static get watchers() { return {
|
|
28881
29006
|
"anchor": [{
|
|
@@ -28889,7 +29014,7 @@ const KritzelPortal = class {
|
|
|
28889
29014
|
* This file is auto-generated by the version bump scripts.
|
|
28890
29015
|
* Do not modify manually.
|
|
28891
29016
|
*/
|
|
28892
|
-
const KRITZEL_VERSION = '0.2.
|
|
29017
|
+
const KRITZEL_VERSION = '0.2.2';
|
|
28893
29018
|
|
|
28894
29019
|
const kritzelSettingsCss = () => `: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)}`;
|
|
28895
29020
|
|