@yorab/react-paint 0.17.1 → 0.18.0

package/dist/_chunks/array-DuJem3vg.js

@@ -0,0 +1 @@
+var e={},t=(t=``)=>(e[t]||(e[t]=0),`${t}${++e[t]}`),n=(e,t,n)=>Math.max(t,Math.min(e,n)),r=()=>typeof navigator>`u`?!1:navigator.userAgent.includes(`Macintosh`),i=e=>e?e.type===`group`?e.shapes:[e]:[],a=(e,t)=>{let n=i(e).map(e=>t.find(t=>t.id===e?.toolId)||t.find(t=>t.type===e?.type)).filter(e=>e!==void 0);if(!n.length)return;if(n.length===1)return n[0];let r=n.slice(1).reduce((e,t)=>{let n={};for(let r in t.settings){if(e[r]===void 0)continue;let i=e[r],a=t.settings[r];if(i.hidden||a?.hidden)continue;let o={};`min`in a&&`min`in i&&a.min===i.min&&`max`in a&&`max`in i&&a.max===i.max&&`step`in a&&`step`in i&&a.step===i.step&&(o.min=a.min,o.max=a.max,o.step=a.step),`values`in a&&`values`in i&&a.values?.join(`,`)===i.values?.join(`,`)&&(o.values=a.values),(Object.keys(o).length>0||r===`closedPoints`)&&(n[r]=o)}return n},n[0].settings);return{id:n.map(e=>e.id).join(`-`),icon:``,label:`group`,type:`group`,settings:r}},o=(e,t)=>{let n={...t};for(let t of e)Array.isArray(t)?t[1].includes(n[t[0]])&&delete n[t[0]]:delete n[t];return n},s=(e,t,n)=>{let r=Array.isArray(n)?[...n]:{...n},i=Array.isArray(e)?e:typeof e==`string`?e.split(`.`):[e];return i.reduce((e,n,r)=>(e[n]=c(e[n])?{...e[n]}:Array.isArray(e[n])?[...e[n]]:e[n]===void 0||e[n]===null?{}:e[n],r===i.length-1&&(e[n]=t),e[n]),r),r},c=e=>typeof e==`object`&&!Array.isArray(e)&&e!==null,l=(e,t,n)=>{if(!c(t)||!c(n))return n;let r={...t};for(let t in n)n.hasOwnProperty(t)&&(r.hasOwnProperty(t)?r[t]=e(r[t],n[t],t)??l(e,r[t],n[t]):r[t]=n[t]);return r},u=(e,t)=>{if(e===t)return!0;if(typeof e!=`object`||typeof t!=`object`||e===null||t===null)return!1;let n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return!1;for(let i of n)if(!r.includes(i)||!u(e[i],t[i]))return!1;return!0},d=e=>e.filter(e=>e!=null),f=(e,t,n)=>t<0||n<0||t>e.length-1||n>e.length-1?e:t<n?[...e.slice(0,t),...e.slice(t+1,n+1),e[t],...e.slice(n+1,e.length)]:[...e.slice(0,n),e[t],...e.slice(n,t),...e.slice(t+1,e.length)];export{o as a,a as c,t as d,l as i,n as l,f as n,s as o,u as r,i as s,d as t,r as u};

package/dist/_chunks/canvas-OCtokhMt.js

@@ -0,0 +1 @@
+import{a as e,d as t,l as n,n as r,o as i,r as a,s as o,t as s,u as c}from"./array-DuJem3vg.js";import l,{createContext as u,useCallback as d,useContext as f,useEffect as p,useImperativeHandle as m,useLayoutEffect as h,useMemo as g,useReducer as _,useRef as v,useState as y}from"react";import{jsx as b,jsxs as x}from"react/jsx-runtime";var S=`blue`,C=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],ee=[`brush`,`rect`,`square`,`line`,`polygon`,`circle`,`curve`,`ellipse`,`picture`,`text`,`triangle`,`group`],w=[`rect`,`square`,`circle`,`ellipse`,`picture`,`text`,`triangle`,`brush`,`group`],T=[`square`,`circle`,`picture`,`text`],E=`react-paint-canvas-drawcanvas`,D={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,withContextMenu:!0,availableTools:[],clearCallback:`empty`,brushAlgo:`simple`,isBrushShapeDoneOnMouseUp:!0,withFrameSelection:!0,withSkeleton:!0,canvasSelectionPadding:0,size:`fixed`,canZoom:`never`,debug:!1},O={canvasBackgroundColor:`white`,canvasSelectionColor:S,canvasSelectionWidth:2},te=u(void 0),k=()=>{let e=f(te);if(!e)throw Error(`useCanvasContext must be used within a CanvasContext.Provider`);return e},A={id:`react-paint-selection`,type:`selection`,icon:``,label:``},ne=`react-paint-picture`,j={strokeColor:{values:[],default:`black`},fillColor:{values:[],default:`transparent`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:[],default:0}},M=300,re=()=>{let e=v(void 0),t=v(void 0),n=n=>{let r=Date.now();e.current&&r<e.current+M&&t.current?.(n),e.current=Date.now()};return{registerDoubleClickEvent:(e,r)=>{t.current=r,e.addEventListener(`click`,n),e.addEventListener(`touchend`,n)},unRegisterDoubleClickEvent:e=>{e.removeEventListener(`click`,n),e.removeEventListener(`touchend`,n)}}},N=(e,t,n)=>{let r=v(n);r.current=n,p(()=>{if(!e)return;let n=e=>r.current(e);return e.addEventListener(t,n),()=>{e.removeEventListener(t,n)}},[e,t])},ie=[[1,0],[1,2],[4,6]],ae=`serif`,oe=e=>{e.reset(),e.lineCap=`round`,e.lineJoin=`round`},P=(e,t={})=>{let{lineCap:n=`round`,fillColor:r=`transparent`,opacity:i=100,strokeColor:a=S,lineWidth:o=2,lineDash:s=0,shadowColor:c=`transparent`,shadowBlur:l=0}=t;e.lineCap=n,e.globalAlpha=i/100,e.fillStyle=r,e.strokeStyle=a,e.lineWidth=o,e.setLineDash(s===0?[]:[ie[s][0]*o,ie[s][1]*o]),e.shadowColor=c,e.shadowBlur=l},F=(e,t,n,r)=>{e.save(),e.scale(t.canvasSize.scaleRatio,t.canvasSize.scaleRatio),e.translate(t.canvasOffset[0],t.canvasOffset[1]),n&&r&&(e.translate(r[0],r[1]),e.rotate(n),e.translate(-r[0],-r[1]))},I=(e,t,n)=>{e.globalAlpha!==0&&(n?.fillColor!==`transparent`&&e.fill(t),n?.strokeColor!==`transparent`&&e.stroke(t))},L=e=>e*180/Math.PI,se=(e,t)=>t[0]>=e.x&&t[0]<=e.x+e.width&&t[1]>=e.y&&t[1]<=e.y+e.height,R=(e,t)=>{let n=t.x-Math.min(Math.max(t.x,e.x),e.x+e.width),r=t.y-Math.min(Math.max(t.y,e.y),e.y+e.height);return Math.sqrt(n*n+r*r)<=t.radius},z=({origin:e=[0,0],point:t,rotation:n=0})=>{if(n===0)return t;let r=[t[0]-e[0],t[1]-e[1]],i=r[1]*Math.cos(n)-r[0]*Math.sin(n);return[r[1]*Math.sin(n)+r[0]*Math.cos(n)+e[0],i+e[1]]},ce=e=>(e+2*Math.PI)%(2*Math.PI),le=({targetVector:[e,t],radian:n=!0,originVector:r})=>{let i=ce(Math.atan2(t[1]-e[1],t[0]-e[0]));if(r){let[e,t]=r,a=ce(i-Math.atan2(t[1]-e[1],t[0]-e[0]));return n?a:L(a)}return n?i:L(i)},ue=(e,t)=>Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2),de=(e,t)=>[(e[0]+t[0])/2,(e[1]+t[1])/2],B=(e,t,n)=>{let{borders:r}=t;return{type:`rect`,border:Xn(r),shapePath:e,line:$n({points:[[r.x+r.width/2,r.y],[r.x+r.width/2,r.y-23/n.canvasSize.scaleRatio]]}),anchors:[Zn({x:r.x+r.width/2,y:r.y-23/n.canvasSize.scaleRatio,radius:14/2/n.canvasSize.scaleRatio}),...C.map(e=>Zn({x:r.x+r.width*e[0],y:r.y+r.height*e[1],radius:14/2/n.canvasSize.scaleRatio}))]}},fe=(e,t,n,r)=>{t.selection&&r.debug&&(e.save(),e.scale(r.canvasSize.scaleRatio,r.canvasSize.scaleRatio),e.translate(r.canvasOffset[0],r.canvasOffset[1]),P(e,{fillColor:`transparent`,strokeColor:`green`,lineWidth:n/r.canvasSize.scaleRatio}),e.strokeRect(t.computed.boundingBox.x,t.computed.boundingBox.y,t.computed.boundingBox.width,t.computed.boundingBox.height),e.restore())},pe=(e,t,n,r,i,a)=>{if(t.selection&&(F(e,i,t.rotation,t.computed.center),i.debug&&(P(e,{fillColor:`transparent`,strokeColor:`red`,lineWidth:r/i.canvasSize.scaleRatio}),e.strokeRect(t.computed.outerBorders.x,t.computed.outerBorders.y,t.computed.outerBorders.width,t.computed.outerBorders.height)),P(e,{fillColor:`transparent`,strokeColor:n,lineWidth:r/i.canvasSize.scaleRatio}),t.selection.shapePath?e.stroke(t.selection.shapePath):e.stroke(t.selection.border),!(!a||t.locked))){t.selection.shapePath&&e.stroke(t.selection.border),t.selection.line&&e.stroke(t.selection.line),P(e,{fillColor:`rgb(255,255,255)`,strokeColor:`rgb(150,150,150)`,lineWidth:2/i.canvasSize.scaleRatio,shadowColor:n,shadowBlur:0});for(let n of t.selection.anchors)e.fill(n),e.stroke(n)}},me=({borderStart:e,borderSize:t,vector:n,settings:r,invertedAxe:i,anchor:a})=>{switch(a){case 0:{if(i){let i=Math.max(0,n-t)+2*r.selectionPadding;return[e+t-2*r.selectionPadding,i]}let a=Math.max(2*r.selectionPadding,t-n);return[e+t-a,a]}case .5:return[e,t];case 1:if(i){let i=Math.min(e,e+t+n);return[i,e-i+2*r.selectionPadding]}return[e,Math.max(2*r.selectionPadding,t+n)];default:return[0,0]}},V=(e,t,n,r,i,a,o,s,c,l,u)=>{let{selectionPadding:d}=u,f=`ratio`in c&&c.ratio?c.ratio:(e.width-d*2||1)/(e.height-d*2||1),p=(r-d*2)/(a-d*2),m,h,g,_;return l.anchor[0]!==.5&&l.anchor[1]!==.5?p<f?(h=i,_=a,g=(a-d*2)*f+2*d,m=l.anchor[0]===0?o?e.x+e.width-2*d:e.x+(e.width-g):o?e.x-g+2*d:e.x):(m=n,g=r,_=(r-d*2)/f+2*d,h=l.anchor[1]===0?s?e.y+e.height-2*d:e.y+(e.height-_):s?e.y-_+2*d:e.y):l.anchor[0]===.5?(h=i,_=a,g=(a-d*2)*f+2*d,m=e.x+(e.width-g)/2):(m=n,g=r,_=(r-d*2)/f+2*d,h=e.y+(e.height-_)/2),{borderX:m,borderWidth:g,borderY:h,borderHeight:_,center:t,originalShape:c}},he=({borderX:e,borderWidth:t,borderY:n,borderHeight:r,center:i,originalShape:a})=>{let o=[e+t/2-i[0],n+r/2-i[1]],[s,c]=z({point:o,rotation:-(a.rotation??0)});return{borderX:q(e+s-o[0]),borderWidth:q(t),borderY:q(n+c-o[1]),borderHeight:q(r)}},ge=(e,t,n,r)=>{let i=t.x+t.width/2,a=t.y+t.height/2,o=n?e.borderWidth*2+t.width:Math.abs(t.width+(e.borderWidth-t.width)*2),s=r?e.borderHeight*2+t.height:Math.abs(t.height+(e.borderHeight-t.height)*2);return{...e,borderHeight:s,borderWidth:o,borderX:i-o/2,borderY:a-s/2}},_e=({roundCursorPosition:e,borders:t,center:n,selectionMode:r,originalShape:i,settings:a})=>{let{selectionPadding:o}=a,s=Math.max(1,t.width-o*2),c=Math.max(1,t.height-o*2),l=`ratio`in i&&i.ratio?i.ratio:s/c,u=t.x+t.width/2,d=t.y+t.height/2,f=1;if(r.anchor[0]!==.5&&r.anchor[1]!==.5){let t=[(r.anchor[0]-.5)*s,(r.anchor[1]-.5)*c],n=[e[0]-u,e[1]-d],i=Math.hypot(t[0],t[1])||1;f=Math.hypot(n[0],n[1])/i}else if(r.anchor[0]===.5){let t=(r.anchor[1]-.5)*c,n=e[1]-d;f=Math.abs(n)/(Math.abs(t)||1)}else{let t=(r.anchor[0]-.5)*s,n=e[0]-u;f=Math.abs(n)/(Math.abs(t)||1)}let p=2*o/(s+2*o),m=s*Math.max(f,p),h=m/l,g=m+o*2,_=h+o*2;return{borderX:u-g/2,borderY:d-_/2,borderWidth:g,borderHeight:_,center:n,originalShape:i}},H=(e,t,n,r,i=!1,a=!1)=>{let{center:o,borders:s}=t.computed,c=z({origin:o,point:e,rotation:t.rotation}),l=a&&i?[s.x+s.width/2,s.x+s.width/2]:[s.x+s.width-r.selectionPadding,s.x+r.selectionPadding],u=a&&i?[s.y+s.height/2,s.y+s.height/2]:[s.y+s.height-r.selectionPadding,s.y+r.selectionPadding],d=n.anchor[0]===0&&c[0]>=l[0]||n.anchor[0]===1&&c[0]<=l[1],f=n.anchor[1]===0&&c[1]>=u[0]||n.anchor[1]===1&&c[1]<=u[1],p=[Y(c[0],r,n.anchor[0]===0&&!d||n.anchor[0]===1&&d?r.selectionPadding:-r.selectionPadding),Y(c[1],r,n.anchor[1]===0&&!f||n.anchor[1]===1&&f?r.selectionPadding:-r.selectionPadding)];if(i&&a)return{...he(_e({roundCursorPosition:p,borders:s,center:o,selectionMode:n,originalShape:t,settings:r})),isXinverted:d,isYinverted:f};let m=r.gridGap?[n.anchor[0]===0?s.x:n.anchor[0]===.5?s.x+s.width/2:s.x+s.width,n.anchor[1]===0?s.y:n.anchor[1]===.5?s.y+s.height/2:s.y+s.height]:z({origin:o,point:n.cursorStartPosition,rotation:t.rotation}),h=[p[0]-m[0],p[1]-m[1]],[g,_]=me({borderStart:s.x,borderSize:s.width,vector:h[0],settings:r,invertedAxe:d,anchor:n.anchor[0]}),[v,y]=me({borderStart:s.y,borderSize:s.height,vector:h[1],settings:r,invertedAxe:f,anchor:n.anchor[1]}),b=i?V(s,o,g,_,v,y,d,f,t,n,r):{borderX:g,borderWidth:_,borderY:v,borderHeight:y,center:o,originalShape:t};return{...he(a?ge(b,s,d,f):b),isXinverted:d,isYinverted:f}},ve=(e,t,n,r,i,a)=>{let{borders:o}=t.computed,{borderX:s,borderHeight:c,borderY:l,borderWidth:u,isXinverted:d,isYinverted:f}=H(e,t,n,r,i,a);return{newBorderX:s,newBorderY:l,newBorderWidth:u,newBorderHeight:c,widthMultiplier:(u-2*r.selectionPadding)/(o.width-2*r.selectionPadding||1),heightMultiplier:(c-2*r.selectionPadding)/(o.height-2*r.selectionPadding||1),isXinverted:d,isYinverted:f,groupCenter:[s+u/2,l+c/2],rotation:t.rotation??0,settings:r,originalBorders:o}},ye=(e,t,n)=>{let r=z({origin:t.computed.center,point:e.computed.center,rotation:t.rotation??0}),i=(r[0]-(e.computed.borders.width/2-n.settings.selectionPadding)-(n.originalBorders.x+n.settings.selectionPadding))*n.widthMultiplier,a=(r[1]-(e.computed.borders.height/2-n.settings.selectionPadding)-(n.originalBorders.y+n.settings.selectionPadding))*n.heightMultiplier;return{x:n.newBorderX+n.settings.selectionPadding+(n.isXinverted?n.newBorderWidth-2*n.settings.selectionPadding-(e.computed.borders.width-2*n.settings.selectionPadding||1)*n.widthMultiplier-i:i),y:n.newBorderY+n.settings.selectionPadding+(n.isYinverted?n.newBorderHeight-2*n.settings.selectionPadding-(e.computed.borders.height-2*n.settings.selectionPadding||1)*n.heightMultiplier-a:a)}},be=(e,t,n,r,i)=>z({origin:e.groupCenter,point:[t+r/2,n+i/2],rotation:-e.rotation}),xe=(e,t)=>{let n=Xn(e),r=X(e,Te,t);return{...e,path:n,computed:r,selection:B(n,r,t)}},Se=xe,Ce=(e,n,r,i=0,a=0)=>xe({toolId:e.id,type:e.type,id:t(`${e.type}_`),x:n[0],y:n[1],width:i,height:a,style:{opacity:e.settings.opacity.default,fillColor:e.settings.fillColor.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default}},r),we=(e,t)=>{I(e,t.path,t.style)},Te=(e,t)=>sr(e,t.selectionPadding),Ee=(e,t,n,[r,i]=[!1,!1])=>pr([e[0]===.5?n.x+n.width/2:e[0]===0?n.x+(r?0:n.width):n.x+(r?n.width:0),e[1]===.5?n.y+n.height/2:e[1]===0?n.y+(i?0:n.height):n.y+(i?n.height:0)],n.rotation??0,t),U=(e,t,n,r,i=!1,a=!1)=>{let{borderX:o,borderHeight:s,borderY:c,borderWidth:l}=H(e,t,n,r,i,a);return xe({...t,width:Math.max(0,l-2*r.selectionPadding),height:Math.max(0,s-2*r.selectionPadding),x:o+r.selectionPadding,y:c+r.selectionPadding},r)},De=(e,t,n)=>{let{isXinverted:r,isYinverted:i,settings:a,widthMultiplier:o,heightMultiplier:s}=n,c=(r||i)&&!(r&&i)&&(e.rotation??0)!==0&&n.rotation!==e.rotation,l=ye(e,t,n),u=(e.width||1)*o,d=(e.height||1)*s,f=be(n,l.x,l.y,u,d);return xe({...e,width:u,height:d,x:f[0]-u/2,y:f[1]-d/2,rotation:c?-(e.rotation??0):e.rotation??0},a)},Oe=(e,t,n)=>{if(e.mode===`translate`)return{mode:`translate`,cursorStartPosition:n,originalShape:t,hasBeenDuplicated:!1,dateStart:Date.now(),selectedShapesLengthAtMouseDown:o(t).length};if(e.mode===`rotate`){let{center:e}=t.computed;return{mode:`rotate`,cursorStartPosition:n,originalShape:t,center:[e[0],e[1]],selectedShapesLengthAtMouseDown:o(t).length}}if(e.mode===`resize`)return{mode:`resize`,cursorStartPosition:n,originalShape:t,anchor:e.anchor,selectedShapesLengthAtMouseDown:o(t).length}},ke=(e,t,n,r,i,a,s,c=`replace`)=>{let l=!1;if(i){l=gr(e,i,n,r,!0,a?20:void 0);let t=Oe(l||{mode:`default`},i,n);if(t?.mode===`resize`||t?.mode===`rotate`)return{shape:i,mode:t}}let u=t.find(t=>o(i).find(e=>t.id===e?.id)?l&&gr(e,t,n,r,!0,a?20:void 0):!!br(e,t,n,r))??(l?i:void 0);if(i&&i?.id===u?.id)return{shape:i,mode:{mode:`translate`,cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:i,selectedShapesLengthAtMouseDown:o(i).length}};if(u?.locked&&c===`add`)return{shape:i,mode:{mode:s?`selectionFrame`:`default`}};if(u&&c===`add`&&i?.locked){let e=W([u],r);return{shape:e,mode:{mode:`translate`,cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:e,selectedShapesLengthAtMouseDown:o(i).length}}}if(u){if(c===`add`){let e=W(je(i,[u]),r);return{shape:e,mode:{mode:`translate`,cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:e,selectedShapesLengthAtMouseDown:o(i).length}}}if(c===`remove`){let e=W(Me(i,u),r);return{shape:e,mode:{mode:`translate`,cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:e,selectedShapesLengthAtMouseDown:o(i).length}}}let e=o(i).find(e=>e.id===u?.id)?i:W([u],r);return{shape:e,mode:{mode:`translate`,cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:e,selectedShapesLengthAtMouseDown:o(i).length}}}return{shape:c===`replace`?void 0:i,mode:{mode:s?`selectionFrame`:`default`}}},Ae=(e,t,n)=>{let r=e.map(e=>[[e.computed.borders.x+n.selectionPadding,e.computed.borders.y+n.selectionPadding],[e.computed.borders.x-n.selectionPadding+e.computed.borders.width,e.computed.borders.y+n.selectionPadding],[e.computed.borders.x-n.selectionPadding+e.computed.borders.width,e.computed.borders.y-n.selectionPadding+e.computed.borders.height],[e.computed.borders.x+n.selectionPadding,e.computed.borders.y-n.selectionPadding+e.computed.borders.height]].map(n=>{let r=z({point:[n[0],n[1]],origin:e.computed.center,rotation:-(e.rotation??0)});return z({point:[r[0],r[1]],origin:[0,0],rotation:t})})),i=Math.min(...r.flatMap(e=>[e[0][0],e[1][0],e[2][0],e[3][0]])),a=Math.min(...r.flatMap(e=>[e[0][1],e[1][1],e[2][1],e[3][1]])),o=Math.max(...r.flatMap(e=>[e[0][0],e[1][0],e[2][0],e[3][0]])),s=Math.max(...r.flatMap(e=>[e[0][1],e[1][1],e[2][1],e[3][1]])),c=[(i+o)/2,(a+s)/2],l=z({point:c,origin:[0,0],rotation:-t}),u=[c[0]-l[0],c[1]-l[1]],d=q(i-u[0]),f=q(o-u[0]),p=q(a-u[1]),m=q(s-u[1]);return{width:f-d,height:m-p,x:d,y:p}},W=(e,t)=>{if(!e.length)return;if(e.length===1)return e[0];let n=e.some(t=>t.rotation!==e[0].rotation)?0:e[0]?.rotation??0,r=Ae(e,n,t),i=Ce({id:`group_selection`,type:`rect`,settings:j},[r.x,r.y],t,r.width,r.height),a=e.slice(1).reduce((e,t)=>{let n=t.style??{},r={};for(let t in n)e[t]!==void 0&&n[t]!==void 0&&e[t]===n[t]&&(r[t]=e[t]);return r},e[0].style??{});return{id:e.map(e=>e.id).join(`-`),type:`group`,shapes:e,rotation:n,visible:!0,locked:!1,selection:i.selection,x:i.x,y:i.y,width:i.width,height:i.height,style:a,computed:i.computed,path:i.path}},je=(e,t)=>{let n=o(e);return[...new Set([...n,...t])]},Me=(e,t)=>o(e).filter(e=>e.id!==t.id),Ne=(e,t,n,r,i,a,o)=>{if(t.selection&&(t.shapes.forEach(t=>{P(e,{fillColor:`transparent`,strokeColor:n,lineWidth:r/a.canvasSize.scaleRatio}),F(e,a,t.rotation,t.computed.center),t.selection?.shapePath&&e.stroke(t.selection.shapePath),e.restore()}),i.mode!==`rotate`&&(F(e,a,t.rotation,t.computed.center),a.debug&&(P(e,{fillColor:`transparent`,strokeColor:`red`,lineWidth:r/a.canvasSize.scaleRatio}),e.strokeRect(t.computed.outerBorders.x,t.computed.outerBorders.y,t.computed.outerBorders.width,t.computed.outerBorders.height)),P(e,{fillColor:`transparent`,strokeColor:n,lineWidth:r/a.canvasSize.scaleRatio}),o&&!t.locked))){e.stroke(t.selection.border),t.selection.line&&e.stroke(t.selection.line),P(e,{fillColor:`rgb(255,255,255)`,strokeColor:`rgb(150,150,150)`,lineWidth:2/a.canvasSize.scaleRatio});for(let n of t.selection.anchors)e.fill(n),e.stroke(n)}},Pe=(e,t,n,r)=>({type:`line`,border:Xn(n.borders),shapePath:e,anchors:[...t.points.map(e=>Zn({x:e[0],y:e[1],radius:14/2/r.canvasSize.scaleRatio}))]}),Fe=({ctx:e,shape:t,withAnchors:n,selectionWidth:r,selectionColor:i,hoverMode:a,settings:o})=>{if(t.selection&&(F(e,o,t.rotation,t.computed.center),o.debug&&(P(e,{fillColor:`transparent`,strokeColor:`red`,lineWidth:r/o.canvasSize.scaleRatio}),e.strokeRect(t.computed.outerBorders.x,t.computed.outerBorders.y,t.computed.outerBorders.width,t.computed.outerBorders.height)),P(e,{fillColor:`transparent`,strokeColor:i,lineWidth:r/o.canvasSize.scaleRatio}),t.selection.shapePath&&e.stroke(t.selection.shapePath),!(!n||t.locked))){P(e,{fillColor:`rgb(255,255,255)`,strokeColor:`rgb(150,150,150)`,lineWidth:2/o.canvasSize.scaleRatio,shadowColor:i,shadowBlur:0});for(let n=0;n<t.selection.anchors.length;n++){let r=t.selection.anchors[n];a.mode===`resize`&&a.anchor===n?(e.shadowBlur=10,e.fill(r),e.shadowBlur=0):e.fill(r),e.stroke(r)}}},Ie=(e,t,n)=>{P(e,{fillColor:`rgba(170,170,170, 0.1)`,strokeColor:`rgb(170,170,170)`,lineWidth:1/n.canvasSize.scaleRatio}),e.fillRect(t[0][0],t[0][1],t[1][0]-t[0][0],t[1][1]-t[0][1]),e.strokeRect(t[0][0],t[0][1],t[1][0]-t[0][0],t[1][1]-t[0][1])},G=[.05,.1,.25,.5,1,2,4,8],Le=`#f5f5f5`,Re=({size:e,zoom:t,newOffset:[r,i],canvasSize:a})=>e===`infinite`?{zoom:t,offset:[r,i]}:t<1?{zoom:t,offset:[-(a.realWidth-a.realWidth/t)/2,-(a.realHeight-a.realHeight/t)/2]}:{zoom:t,offset:[n(r,a.realWidth/t-a.realWidth,0),n(i,a.realHeight/t-a.realHeight,0)]},ze=({size:e,canvasSize:t,currentOffset:n,currentZoom:r,zoom:i,centerPoint:a})=>{let o=e===`fixed`&&i<1?[t.realWidth/2,t.realHeight/2]:a,{offset:s}=Re({size:e,zoom:i,newOffset:[n[0]-(o[0]/r-o[0]/i),n[1]-(o[1]/r-o[1]/i)],canvasSize:t});return{offset:s,zoom:i}},Be=({size:e,canvasSize:t,currentOffset:r,currentZoom:i,action:a})=>ze({size:e,canvasSize:t,currentOffset:r,currentZoom:i,zoom:a===`default`?G[4]:a===`zoom`?G[n(G.length-1-G.slice(0).reverse().findIndex(e=>e<=i)+1,0,G.length-1)]:G[n(G.findIndex(e=>e>=i)-1,0,G.length-1)],centerPoint:[t.realWidth/2,t.realHeight/2]}),Ve=({size:e,canvasSize:t,currentOffset:r,currentZoom:i,delta:a,centerPoint:o})=>ze({size:e,canvasSize:t,currentOffset:r,currentZoom:i,zoom:n(i*(1-a/1e3),G[0],G[G.length-1]),centerPoint:o}),He=e=>{let{canvasSize:{width:t,height:n,scaleRatioWithNoZoom:r},canvasZoom:i,canvasOffset:a}=e;return{x:-a[0],y:-a[1],width:t/i/r,height:n/i/r}},Ue=e=>{let{canvasSize:{width:t,height:n,scaleRatioWithNoZoom:r},canvasZoom:i,canvasOffset:a}=e;return{x:a[0]*i*r,y:a[1]*i*r,width:t*i,height:n*i}},We=(e,t)=>{let{canvasZoom:n,size:r}=t;if(r!==`fixed`||n>=1)return;let i=Ue(t);e.beginPath(),e.rect(i.x,i.y,i.width,i.height),e.closePath(),e.clip()},Ge=(e,t)=>{let{canvasZoom:n,size:r,canvasSize:{width:i,height:a}}=t;if(r!==`fixed`||n>=1)return;e.fillStyle=Le,e.fillRect(0,0,i,a);let o=Ue(t);e.clearRect(o.x,o.y,o.width,o.height),We(e,t)},Ke=(e,t)=>t.size!==`fixed`||e[0]>0&&e[0]<t.canvasSize.realWidth&&e[1]>0&&e[1]<t.canvasSize.realHeight,qe=(e,t)=>{let n=Math.abs(e.deltaY)<50&&t<50,r=e.ctrlKey,i=c()&&n&&r;switch(e.deltaMode){case WheelEvent.DOM_DELTA_LINE:return{deltaX:e.deltaX*16,deltaY:e.deltaY*16};case WheelEvent.DOM_DELTA_PAGE:return{deltaX:e.deltaX*window.innerHeight,deltaY:e.deltaY*window.innerHeight};default:return i?{deltaX:e.deltaX*5,deltaY:e.deltaY*5}:{deltaX:e.deltaX,deltaY:e.deltaY}}},Je=(e,{selectionPadding:t})=>{let n=e.points.flat(),r=Math.min(...n.map(e=>e[0])),i=Math.min(...n.map(e=>e[1])),a=n.map(t=>J(t,r,i,e.scaleX,e.scaleY)),o=Math.max(...a.map(e=>e[0])),s=Math.max(...a.map(e=>e[1]));return sr({x:r,y:i,width:o-r,height:s-i},t)},Ye=(e,t)=>{let n=er(e,t),r=X(e,Je,t);return{...e,path:n,selection:B(n,r,t),computed:r}},Xe=Ye,Ze=(e,n,r)=>Ye({toolId:e.id,type:e.type,id:t(`${e.type}_`),points:[[n]],scaleX:1,scaleY:1,style:{opacity:e.settings.opacity.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default}},r),Qe=(e,t)=>{t.points.length<1||e.globalAlpha!==0&&(t.style?.strokeColor===`transparent`||e.globalAlpha===0||e.stroke(t.path))},$e=(e,t,n,r,i,a)=>{let o=Je({...t,scaleX:1,scaleY:1},r),s=t.computed.borders,{borderX:c,borderHeight:l,borderY:u,borderWidth:d,isXinverted:f,isYinverted:p}=H(e,t,n,r,i,a),m=Math.max(0,o.width-2*r.selectionPadding),h=Math.max(0,o.height-2*r.selectionPadding),g=Math.max(0,d-2*r.selectionPadding),_=Math.max(0,l-2*r.selectionPadding),v=m?g/m:1,y=h?_/h:1;if(!m||!h)return t;let b=q(c-s.x)+(f?2*s.x+o.width:0),x=q(u-s.y)+(p?2*s.y+o.height:0);return Ye({...t,points:t.points.map(e=>e.map(([e,t])=>[f?-e+b:e+b,p?-t+x:t+x])),scaleX:v,scaleY:y},r)},et=(e,t,n)=>{let{isXinverted:r,isYinverted:i,settings:a,widthMultiplier:o,heightMultiplier:s}=n,c=Je({...e,scaleX:1,scaleY:1},a),l=c.width-2*a.selectionPadding,u=c.height-2*a.selectionPadding,d=e.scaleX??1?(e.scaleX??1)*o:o/l,f=e.scaleY??1?(e.scaleY??1)*s:s/u,p=l*d,m=u*f,h=ye(e,t,n),g=be(n,h.x,h.y,p,m),_=q(g[0]-p/2-e.computed.borders.x-a.selectionPadding)+(r?2*e.computed.borders.x+c.width:0),v=q(g[1]-m/2-e.computed.borders.y-a.selectionPadding)+(i?2*e.computed.borders.y+c.height:0),y=(r||i)&&!(r&&i)&&(e.rotation??0)!==0&&n.rotation!==e.rotation;return Ye({...e,points:e.points.map(e=>e.map(([e,t])=>[r?-e+_:e+_,i?-t+v:t+v])),scaleX:d,scaleY:f,rotation:y?-(e.rotation??0):e.rotation??0},n.settings)},tt=(e,t,n)=>Ye({...e,points:i(e.points.length-1,[...e.points[e.points.length-1],[Math.round(t[0]),Math.round(t[1])]],e.points)},n),nt=(e,t,n)=>Ye({...e,points:i(e.points.length,[[Math.round(t[0]),Math.round(t[1])]],e.points)},n),rt=(e,t)=>sr({x:e.x-e.radius,y:e.y-e.radius,width:e.radius*2,height:e.radius*2},t.selectionPadding),it=(e,t)=>{let n=Zn(e),r=X(e,rt,t);return{...e,path:n,selection:B(n,r,t),computed:r}},at=it,ot=(e,n,r)=>it({toolId:e.id,type:e.type,id:t(`${e.type}_`),x:n[0],y:n[1],radius:0,style:{opacity:e.settings.opacity.default,fillColor:e.settings.fillColor.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default}},r),st=(e,t)=>{I(e,t.path,t.style)},ct=(e,t,n,r,i)=>{let{borderX:a,borderHeight:o,borderY:s,borderWidth:c}=H(e,t,n,r,!0,i);return it({...t,radius:Math.max(0,c/2-r.selectionPadding),x:a+c/2,y:s+o/2},r)},lt=(e,t,n)=>{let r=ye(e,t,n),i=(e.radius||.5)*n.widthMultiplier,a=be(n,r.x,r.y,i*2,i*2);return it({...e,radius:i,x:a[0],y:a[1]},n.settings)},ut=(e,t)=>{let n=ar(e),r=X(e,mt,t);return{...e,path:n,selection:Pe(n,e,r,t),computed:r}},dt=ut,ft=(e,n,r)=>ut({toolId:e.id,type:e.type,id:t(`${e.type}_`),points:[n],style:{opacity:e.settings.opacity.default,fillColor:e.settings.fillColor.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default,closedPoints:e.settings.closedPoints.default}},r),pt=(e,t)=>{I(e,t.path,t.style)},mt=(e,t)=>{let n=Math.min(...e.points.map(e=>e[0])),r=Math.max(...e.points.map(e=>e[0])),i=Math.min(...e.points.map(e=>e[1])),a=Math.max(...e.points.map(e=>e[1]));return sr({x:n,width:r-n,y:i,height:a-i},t.selectionPadding)},ht=(e,t,n,r)=>{let a=Q([Y(e[0],r),Y(e[1],r)],t.rotation??0,t.computed.center);return ut(i([`points`,n.anchor],a,t),r)},gt=(e,t,n,r)=>{if(t<0||t>e.points.length-1)return e;let i=[...e.points.slice(0,t+1),n,...e.points.slice(t+1)];return ut({...e,points:i},r)},_t=(e,t,n,r=!1)=>{let i=Q([Y(t[0],n),Y(t[1],n)],e.rotation??0,e.computed.center);return ut({...e,points:r?e.points:[...e.points,i],tempPoint:r?i:void 0},n)},vt=(e,t,n)=>t<0||t>e.points.length-1?e:ut({...e,points:e.points.filter((e,n)=>n!==t)},n),yt=(e,t,n)=>{let r=e.tempPoint?[...e.points,e.tempPoint]:e.points;if(r.length<2){let e=r[0]??[0,0],t=n.selectionPadding;return{x:e[0]-t,y:e[1]-t,width:2*t,height:2*t}}if(r.length<3)return mt({...e,points:r},n);let i=nr(e,r),a=1/0,o=-1/0,s=1/0,c=-1/0;for(let e=1;e<i.length-2;e++){let t=i[e-1],n=i[e],r=i[e+1],l=i[e+2],{cp1:u,cp2:d}=rr(t,n,r,l),f=tr(n,u,d,r);a=Math.min(a,f.minX),o=Math.max(o,f.maxX),s=Math.min(s,f.minY),c=Math.max(c,f.maxY)}return Te({x:a,y:s,width:o-a,height:c-s},n)},bt=(e,t)=>{let n=ir(e),r=X(e,mt,t,yt);return{...e,path:n,selection:Pe(n,e,r,t),computed:r}},xt=bt,St=(e,n,r)=>bt({toolId:e.id,type:e.type,id:t(`${e.type}_`),points:[n],style:{opacity:e.settings.opacity.default,fillColor:e.settings.fillColor.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default,closedPoints:e.settings.closedPoints.default}},r),Ct=(e,t,n,r)=>{let a=[Y(e[0],r),Y(e[1],r)],o=t.computed.center,s=Q(a,t.rotation??0,o);return bt(i([`points`,n.anchor],s,t),r)},wt=(e,t)=>{I(e,t.path,t.style)},Tt=(e,t,n,r)=>{if(t<0||t>e.points.length-1)return e;let i=[...e.points.slice(0,t+1),n,...e.points.slice(t+1)];return bt({...e,points:i},r)},Et=(e,t,n,r=!1)=>{let i=[Y(t[0],n),Y(t[1],n)],a=e.computed.center,o=Q(i,e.rotation??0,a);return bt({...e,points:r?e.points:[...e.points,o],tempPoint:r?o:void 0},n)},Dt=(e,t,n)=>t<0||t>e.points.length-1?e:bt({...e,points:e.points.filter((e,n)=>n!==t)},n),Ot=(e,t)=>sr({x:e.x-e.radiusX,y:e.y-e.radiusY,width:e.radiusX*2,height:e.radiusY*2},t.selectionPadding),kt=(e,t)=>{let n=Qn(e),r=X(e,Ot,t);return{...e,path:n,selection:B(n,r,t),computed:r}},At=kt,jt=(e,n,r)=>kt({toolId:e.id,type:e.type,id:t(`${e.type}_`),x:n[0],y:n[1],radiusX:0,radiusY:0,style:{opacity:e.settings.opacity.default,fillColor:e.settings.fillColor.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default}},r),Mt=(e,t)=>{I(e,t.path,t.style)},Nt=(e,t,n,r,i=!1,a=!1)=>{let{borderX:o,borderHeight:s,borderY:c,borderWidth:l}=H(e,t,n,r,i,a);return kt({...t,radiusX:Math.max(0,l/2-r.selectionPadding),radiusY:Math.max(0,s/2-r.selectionPadding),x:o+l/2,y:c+s/2},r)},Pt=(e,t,n)=>{let{isXinverted:r,isYinverted:i,settings:a,widthMultiplier:o,heightMultiplier:s}=n,c=(r||i)&&!(r&&i)&&(e.rotation??0)!==0&&n.rotation!==e.rotation,l=ye(e,t,n),u=(e.radiusX||.5)*o,d=(e.radiusY||.5)*s,f=be(n,l.x,l.y,u*2,d*2);return kt({...e,radiusX:u,radiusY:d,x:f[0],y:f[1],rotation:c?-(e.rotation??0):e.rotation??0},a)},Ft=(e,t)=>({...e,path:or(e),computed:X(e,mt,t)}),It=(e,n)=>Ft({...e,id:t(`triangle_`),type:`triangle`},n),Lt=(e,t)=>{I(e,t.path,t.style)},Rt=(e,t)=>({x:Math.min(e.points[0][0],e.points[1][0])-t.selectionPadding,width:Math.abs(e.points[0][0]-e.points[1][0])+t.selectionPadding*2,y:Math.min(e.points[0][1],e.points[1][1])-t.selectionPadding,height:Math.abs(e.points[0][1]-e.points[1][1])+t.selectionPadding*2}),zt=(e,t)=>{let n=[],r;if(e.style?.lineArrow===1||e.style?.lineArrow===2||e.style?.lineArrow===3){let i=Math.PI/2-le({targetVector:[e.points[0],e.points[1]]});(e.style?.lineArrow===1||e.style?.lineArrow===3)&&n.push(It(Ht(e.points[0],i,e.style),t)),(e.style?.lineArrow===2||e.style?.lineArrow===3)&&n.push(It(Ht(e.points[1],i+Math.PI,e.style),t)),r=$n(Yn({line:e,size:10+(e.style?.lineWidth??0)*2,direction:e.style?.lineArrow===1?`start`:e.style?.lineArrow===2?`end`:`both`}))}else r=$n(e);let i=X(e,Rt,t);return{...e,path:r,selection:Pe(r,e,i,t),arrows:n,style:{...e.style,lineCap:e.style?.lineArrow?`butt`:`round`},computed:i}},Bt=zt,Vt=(e,n,r)=>zt({toolId:e.id,type:e.type,id:t(`${e.type}_`),points:[n,n],style:{opacity:e.settings.opacity.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default,lineArrow:e.settings.lineArrow.default}},r),Ht=(e,t,n)=>{let r=[z({point:[0,0],rotation:t}),z({point:[-(5+(n.lineWidth??0)),10+(n.lineWidth??0)*2],rotation:t}),z({point:[5+(n.lineWidth??0),10+(n.lineWidth??0)*2],rotation:t})];return{points:[[e[0]+r[0][0],e[1]+r[0][1]],[e[0]+r[1][0],e[1]+r[1][1]],[e[0]+r[2][0],e[1]+r[2][1]]],style:{...n,fillColor:n.strokeColor,strokeColor:`transparent`}}},Ut=(e,t)=>{I(e,t.path,t.style);for(let n of t.arrows??[])P(e,n.style),Lt(e,n)},Wt=(e,t,n,r)=>{let a=Q([Y(e[0],r),Y(e[1],r)],t.rotation??0,t.computed.center);return zt(i([`points`,n.anchor],a,t),r)},Gt=(e,t)=>e.type===`line`?zt(e,t):e.type===`polygon`?dt(e,t):xt(e,t),Kt=(e,t,n)=>{let{isXinverted:r,isYinverted:i,settings:a,widthMultiplier:o,heightMultiplier:s}=n,c=e.computed.borders.width-2*a.selectionPadding,l=e.computed.borders.height-2*a.selectionPadding,u=c*o,d=l*s,f=ye(e,t,n),p=be(n,f.x,f.y,u,d),m=e.computed.center[0]-c/2,h=e.computed.center[1]-l/2,g=p[0]-u/2,_=p[1]-d/2;return Gt({...e,points:e.points.map(([e,t])=>[g+(r?u-(e-m)*o:(e-m)*o),_+(i?d-(t-h)*s:(t-h)*s)])},n.settings)},qt=t=>{let n=[`img`,`id`,`selection`,`path`,`arrows`,`tempPoint`,`computed`,[`flipX`,[void 0,!1]],[`flipY`,[void 0,!1]]];return t.map(t=>t.type===`picture`&&!t.src.startsWith(`http`)?e(n,{...t,src:tn(t)}):e(n,t))},Jt=(e,t,n)=>({shapes:qt(e),config:{width:t,height:n}}),Yt=(e,n)=>K({...e,id:t(`${e.type}_`)},n),Xt=e=>{let t=new DOMParser().parseFromString(e,`text/xml`).getElementsByTagName(`svg`)[0];if(!t)return``;let n=t.getAttribute(`width`),r=t.getAttribute(`height`),i;if(n||r)i=e;else{let[,,e,n]=(t.getAttribute(`viewBox`)??`0 0 300 300`).split(` `);t.setAttribute(`width`,e??`300`),t.setAttribute(`height`,n??`300`),i=new XMLSerializer().serializeToString(t)}let a=new Blob([i],{type:`image/svg+xml`});return URL.createObjectURL(a)},Zt=e=>(e instanceof File?e.name:e).includes(`.svg`),Qt=e=>Zt(e)?fetch(e).then(e=>e.text()).then(e=>Xt(e)):fetch(e).then(e=>e.blob()).then(e=>URL.createObjectURL(e)),$t=(e,t)=>{let n=document.createElement(`a`);n.href=e,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n)},en=e=>{let t=document.createElement(`canvas`);t.width=e.width,t.height=e.height;let n=t.getContext(`2d`);return n?(n.drawImage(e,0,0),t.toDataURL(`image/png`)):``},tn=e=>e.src.includes(`<svg`)?e.src:en(e.img),nn=e=>`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(e))}`,rn=({shapes:e,settings:t})=>{let n=document.createElement(`canvas`),r=n.getContext(`2d`);if(!r)throw Error(`No context found for canvas`);let{realHeight:i,realWidth:a}=t.canvasSize;n.width=a,n.height=i,r.clearRect(0,0,a,i),oe(r);for(let n=e.length-1;n>=0;n--)Fn(r,e[n],t);return n.toDataURL(`image/png`)},an=({shapes:e,settings:t,view:n})=>{if(n===`fitToShapes`&&!e.length)throw Error(`No image found to export`);if(n===`fitToShapes`){let n=Math.min(...e.map(e=>e.computed.boundingBox.x)),r=Math.max(...e.map(e=>e.computed.boundingBox.x+e.computed.boundingBox.width)),i=Math.min(...e.map(e=>e.computed.boundingBox.y)),a=Math.max(...e.map(e=>e.computed.boundingBox.y+e.computed.boundingBox.height));return rn({shapes:e,settings:{...t,canvasOffset:[-n,-i],canvasZoom:1,canvasSize:{realWidth:r-n,realHeight:a-i,width:r-n,height:a-i,scaleRatio:1,scaleRatioWithNoZoom:1}}})}return rn(n===`defaultView`?{shapes:e,settings:{...t,canvasOffset:[0,0],canvasZoom:1,canvasSize:{...t.canvasSize,width:t.canvasSize.realWidth,height:t.canvasSize.realHeight,scaleRatio:1,scaleRatioWithNoZoom:1}}}:{shapes:e,settings:{...t,canvasSize:{...t.canvasSize,width:t.canvasSize.realWidth,height:t.canvasSize.realHeight,scaleRatio:t.canvasZoom,scaleRatioWithNoZoom:1}}})},on=(e,t,n)=>nn(Jt(e,t,n)),sn=async e=>new Promise((t,n)=>{let r=new FileReader;r.onload=e=>{let r=e.target?.result;if(!r)return n(Error(`Impossible de récupérer les données du fichier`));try{t(JSON.parse(r))}catch{n(Error(`Invalid JSON file`))}},r.onerror=()=>n(Error(`Failed to read file`)),r.readAsText(e)}),cn=async(e,t)=>{if(!e)return[];let n=[],r=s(e.map(e=>{if(!e||!ee.includes(e.type))return null;if(e.type===`picture`){let r=new Image,i=new Promise((e,t)=>{r.onload=()=>{URL.revokeObjectURL(r.src),e()},r.onerror=()=>{t(Error(`Some images could not be loaded`))}});if(n.push(i),e.src.startsWith(`http`))Qt(e.src).then(e=>{r.src=e}).catch(()=>{r.src=``});else if(e.src.includes(`<svg`)){let t=new Blob([e.src],{type:`image/svg+xml`});r.src=URL.createObjectURL(t)}else r.src=e.src;return Yt({...e,img:r},t)}return Yt(e,t)}));return await Promise.all(n),r},ln=(e,t)=>{let n=X(e,Te,t),r=Xn(e);return{...e,path:r,selection:B(void 0,n,t),computed:n}},un=ln,dn=(e,n,r,i,a)=>{let[o,s]=Jn(e.width,e.height,r,i,!0);return ln({toolId:ne,type:`picture`,id:t(`picture_`),x:-a.canvasOffset[0]+a.canvasSize.realWidth/a.canvasZoom/2-o/2,y:-a.canvasOffset[1]+a.canvasSize.realHeight/a.canvasZoom/2-s/2,width:o,height:s,ratio:s===0?1:o/s,src:n,img:e},a)},fn=(e,t,n,r,i,a)=>{Zt(n)?n.text().then(n=>{let o=Xt(n);e.onload=async()=>{URL.revokeObjectURL(e.src),t(dn(e,n,r,i,a))},e.src=o}):(e.onload=async()=>{URL.revokeObjectURL(e.src),t(dn(e,e.src,r,i,a))},e.src=URL.createObjectURL(n))},pn=(e,t,n,r,i,a)=>{e.onload=()=>{URL.revokeObjectURL(e.src),t(dn(e,n,r,i,a))},Qt(n).then(t=>{e.src=t}).catch(()=>{e.src=``})},mn=(e,t,n,r)=>new Promise((i,a)=>{let o=new Image,s=setTimeout(()=>{a(Error(`Timeout while loading images`))},4e3),c=e=>{clearTimeout(s),i(e)};o.onerror=()=>{clearTimeout(s),a(Error(`Some images could not be loaded`))},e instanceof File?fn(o,c,e,t,n,r):pn(o,c,e,t,n,r)}),hn=(e,t)=>{e.globalAlpha!==0&&(e.beginPath(),e.scale(t.flipX?-1:1,t.flipY?-1:1),e.drawImage(t.img,t.flipX?-t.x-t.width:t.x,t.flipY?-t.y-t.height:t.y,t.width,t.height))},gn=(e,t,n,r,i)=>{let{borderX:a,borderHeight:o,borderY:s,borderWidth:c,isXinverted:l,isYinverted:u}=H(e,t,n,r,!0,i),d=Math.max(0,c-2*r.selectionPadding),f=Math.max(0,o-2*r.selectionPadding);return ln({...t,width:d,height:f,x:a+r.selectionPadding,y:s+r.selectionPadding,flipX:l?!t.flipX:!!t.flipX,flipY:u?!t.flipY:!!t.flipY},r)},_n=(e,t,n)=>{let{isXinverted:r,isYinverted:i,settings:a,widthMultiplier:o,heightMultiplier:s}=n,c=ye(e,t,n),l=(e.width===0||e.height===0?e.ratio??1:e.width)*o,u=(e.width===0||e.height===0?e.ratio??1:e.height)*s,d=be(n,c.x,c.y,l,u),f=(r||i)&&!(r&&i)&&(e.rotation??0)!==0&&n.rotation!==e.rotation;return ln({...e,width:l,height:u,x:d[0]-l/2,y:d[1]-u/2,flipX:r?!e.flipX:!!e.flipX,flipY:i?!e.flipY:!!e.flipY,rotation:f?-(e.rotation??0):e.rotation??0},a)},vn=[`Texte`],yn=150,bn=(e,t)=>X(e,En,t),xn=(e,t)=>{let n=bn(e,t),r=Xn(e);return{...e,path:r,selection:B(void 0,n,t),computed:n}},Sn=xn,Cn=(e,t,n,r,i,a=ae)=>{e.font=`${i?`italic`:``} ${r?`bold`:``} 1px ${a}`;let o=t.map(t=>n/e.measureText(t).width);return Math.min(...o)||36},wn=(e,n,r,i)=>{let a=Cn(e,vn,yn,n.settings?.fontBold.default??!1,n.settings?.fontItalic.default??!1,n.settings.fontFamily.default),o=yn,s=a*(vn.length||1);return xn({toolId:n.id,type:n.type,id:t(`${n.type}_`),x:r[0]-o,y:r[1]-s,value:vn,fontSize:a,width:o,height:s,ratio:o/s,style:{opacity:n.settings.opacity.default,strokeColor:n.settings.strokeColor.default,fontFamily:n.settings.fontFamily.default,fontItalic:n.settings.fontItalic.default,fontBold:n.settings.fontBold.default}},i)},Tn=(e,t)=>{if(!(e.globalAlpha===0||!t.style?.strokeColor||t.style.strokeColor===`transparent`)){e.scale(t.flipX?-1:1,t.flipY?-1:1),e.font=`${t.style?.fontItalic?`italic`:``} ${t.style?.fontBold?`bold`:``} ${t.fontSize}px ${t.style?.fontFamily??`serif`}`,e.textBaseline=`top`,e.fillStyle=t.style.strokeColor;for(let n=0;n<t.value.length;n++)e.fillText(t.value[n],t.flipX?-t.x-t.width:t.x,(t.flipY?-t.y-t.height:t.y)+n*t.fontSize,t.width)}},En=(e,t)=>sr({x:e.x,y:e.y,width:e.width,height:e.height},t.selectionPadding),Dn=(e,t,n,r,i,a)=>{let{borderX:o,borderHeight:s,borderY:c,borderWidth:l,isXinverted:u,isYinverted:d}=H(t,n,r,i,!0,a),f=Math.max(0,l-2*i.selectionPadding),p=Math.max(0,s-2*i.selectionPadding),m=xn({...n,width:f,height:p,x:o+i.selectionPadding,y:c+i.selectionPadding,flipX:u?!n.flipX:!!n.flipX,flipY:d?!n.flipY:!!n.flipY},i);return{...m,fontSize:Cn(e,m.value,m.width,m.style?.fontBold??!1,m.style?.fontItalic??!1,m.style?.fontFamily)}},On=(e,t,n,r)=>{let{isXinverted:i,isYinverted:a,settings:o,widthMultiplier:s,heightMultiplier:c}=r,l=(i||a)&&!(i&&a)&&(t.rotation??0)!==0&&r.rotation!==t.rotation,u=ye(t,n,r),d=(t.width===0||t.height===0?t.ratio??1:t.width)*s,f=(t.width===0||t.height===0?t.ratio??1:t.height)*c,p=be(r,u.x,u.y,d,f),m=xn({...t,width:d,height:f,x:p[0]-d/2,y:p[1]-f/2,flipX:i?!t.flipX:!!t.flipX,flipY:a?!t.flipY:!!t.flipY,rotation:l?-(t.rotation??0):t.rotation??0},o);return{...m,fontSize:Cn(e,m.value,m.width,m.style?.fontBold??!1,m.style?.fontItalic??!1,m.style?.fontFamily)}},kn=(e,t,n,r,i,a=ae)=>{e.font=`${i?`italic`:``} ${r?`bold`:``} ${n}px ${a}`;let o=t.map(t=>e.measureText(t).width);return Math.max(...o)||20},An=(e,t,n,r)=>{let i={...t,value:n},a=kn(e,i.value,i.fontSize,i.style?.fontBold??!1,i.style?.fontItalic??!1,i.style?.fontFamily),o=i.fontSize*i.value.length,s=a/o,c={...i,width:a,height:o,ratio:s},{center:l}=bn(c,r),[u,d]=Ee([1,1],t.computed.center,t),[f,p]=Ee([1,1],l,c,[!1,!1]);return{...c,x:c.x-(f-u),y:c.y-(p-d)}},jn=(e,t,n,r)=>{let i=[Y(n[0],r),Y(n[1],r)];switch(t.type){case`brush`:return Ze(t,i,r);case`line`:return Vt(t,i,r);case`polygon`:return ft(t,i,r);case`curve`:return St(t,i,r);case`rect`:case`square`:return Ce(t,i,r);case`text`:return wn(e,t,i,r);case`ellipse`:return jt(t,i,r);case`circle`:return ot(t,i,r)}},Mn=(e,t)=>{switch(t.type){case`brush`:Qe(e,t);break;case`text`:Tn(e,t);break;case`line`:Ut(e,t);break;case`polygon`:pt(e,t);break;case`curve`:wt(e,t);break;case`circle`:st(e,t);break;case`ellipse`:Mt(e,t);break;case`rect`:we(e,t);break;case`square`:we(e,t);break;case`picture`:hn(e,t);break}},Nn=(e,t)=>{let{outerBorders:n}=t.computed,r={width:n.width*2,height:n.height*2};if(r.width===0||r.height===0)return;let i=document.createElement(`canvas`),a=i.getContext(`2d`);if(!a)throw Error(`No context found for canvas`);i.width=r.width,i.height=r.height,a.translate(r.width/4-n.x,r.height/4-n.y),P(a,{...t.style,opacity:100}),Mn(a,t),e.drawImage(i,n.x-r.width/4,n.y-r.height/4)},Pn=(e,t,n)=>!!xr(e.computed.boundingBox,n??He(t)),Fn=(e,t,n,r)=>{if(t.visible!==!1&&Pn(t,n,r)){if(F(e,n,t.rotation,t.computed.center),P(e,t.style),e.globalAlpha!==1){Nn(e,t),e.restore();return}Mn(e,t),e.restore()}},In=(e,t,n)=>{if(e.locked)return e;let r=z({origin:n,point:e.computed.center,rotation:-t});if(`points`in e){if(e.type===`brush`){let n=e.points.map(t=>t.map(t=>[t[0]+r[0]-e.computed.center[0],t[1]+r[1]-e.computed.center[1]]));return{...e,points:n,rotation:(e.rotation??0)+t}}let i=e.points.map(e=>z({origin:n,point:e,rotation:-t}));return{...e,points:i}}return{...e,x:e.x+r[0]-e.computed.center[0],y:e.y+r[1]-e.computed.center[1],rotation:(e.rotation??0)+t}},Ln=(e,t,n,r,i,a,o)=>{if(n.locked)return n;switch(n.type){case`line`:return Wt(t,n,r,i);case`polygon`:return ht(t,n,r,i);case`curve`:return Ct(t,n,r,i);case`brush`:return $e(t,n,r,i,a,o);case`circle`:return ct(t,n,r,i,o);case`ellipse`:return Nt(t,n,r,i,a,o);case`rect`:case`square`:return U(t,n,r,i,n.type===`square`||a,o);case`text`:return Dn(e,t,n,r,i,o);case`picture`:return gn(t,n,r,i,o);default:return n}},Rn=(e,t,n,r,i,a,s)=>{if(n.type!==`group`)return o(n).map(n=>Ln(e,t,n,r,i,a,s));let c=n,l=o(c),u=l.filter(e=>w.includes(e.type)),d=!u.some(e=>(e.rotation??0)!==(u[0]?.rotation??0)),f=(u[0]?.rotation??0)!==0&&u.length!==l.length,p=l.some(e=>T.includes(e.type)),m=ve(t,c,r,i,a||!d||p||f,s);return l.map(n=>{if(n.locked)return n;switch(n.type){case`rect`:case`square`:return De(n,c,m);case`picture`:return _n(n,c,m);case`text`:return On(e,n,c,m);case`ellipse`:return Pt(n,c,m);case`circle`:return lt(n,c,m);case`brush`:return et(n,c,m);case`line`:case`polygon`:case`curve`:return Kt(n,c,m);default:return Ln(e,t,n,r,i,a,s)}})},zn=(e,t,n,r,i,a)=>{if(n.length===0)return t;let o=W(n,a),s=o.computed.borders,c={newBorderX:s.x,newBorderY:s.y,newBorderWidth:s.width,newBorderHeight:s.height,widthMultiplier:1,heightMultiplier:1,isXinverted:i===`flipHorizontally`,isYinverted:i===`flipVertically`,groupCenter:r,rotation:0,settings:a,originalBorders:s},l=new Set(n.map(e=>e.id));return t.map(t=>{if(t.locked||!l.has(t.id))return t;switch(t.type){case`rect`:case`square`:return De(t,o,c);case`picture`:return _n(t,o,c);case`text`:return On(e,t,o,c);case`ellipse`:return Pt(t,o,c);case`circle`:return lt(t,o,c);case`brush`:return et(t,o,c);case`line`:case`polygon`:case`curve`:return Kt(t,o,c);default:return t}})},Bn=(e,t,n,r)=>{if(e.locked)return e;switch(e.type){case`rect`:case`square`:case`ellipse`:case`circle`:case`picture`:case`text`:return K({...e,x:e.x+t,y:e.y+n},r);case`line`:case`polygon`:case`curve`:return K({...e,points:e.points.map(([e,r])=>[e+t,r+n])},r);case`brush`:return K({...e,points:e.points.map(e=>e.map(([e,r])=>[e+t,r+n]))},r);default:return e}},Vn=(e,t,n,r,i)=>{let a=t.computed.borders,s=Kn([e[0]-n[0],e[1]-n[1]],i),c=s[0]===0?0:Y(a.x+r.selectionPadding+s[0],r)-(a.x+r.selectionPadding),l=s[1]===0?0:Y(a.y+r.selectionPadding+s[1],r)-(a.y+r.selectionPadding);return o(t).map(e=>Bn(e,c,l,r))},K=(e,t)=>{switch(e.type){case`rect`:case`square`:return Se(e,t);case`ellipse`:return At(e,t);case`circle`:return at(e,t);case`picture`:return un(e,t);case`text`:return Sn(e,t);case`line`:return Bt(e,t);case`polygon`:return dt(e,t);case`curve`:return xt(e,t);case`brush`:return Xe(e,t);default:return e}},Hn=({ctx:e,shape:t,settings:n,selectionWidth:r,selectionColor:i,hoverMode:a,selectionMode:o,withAnchors:s=!0})=>{switch(n.debug&&fe(e,t,r,n),t.type){case`rect`:case`square`:case`circle`:case`ellipse`:case`picture`:case`text`:case`brush`:pe(e,t,i,r,n,s);break;case`group`:Ne(e,t,i,r,o,n,s);break;case`polygon`:case`line`:case`curve`:Fe({ctx:e,shape:t,withAnchors:s,selectionWidth:r,selectionColor:i,hoverMode:a,settings:n});break}e.restore()},Un=({ctx:e,selectionFrame:t,settings:n})=>{F(e,n),Ie(e,t.frame,n),e.restore()},Wn=(e,n)=>o(e).map(e=>({...Bn(e,20,20,n),id:t(`${e.type}_`)})),q=(e,t=2)=>Math.round(e*10**t)/10**t,J=(e,t,n,r=1,i=1)=>[t+(e[0]-t)*r,n+(e[1]-n)*i],Y=(e,t,n=0)=>{if(!t.gridGap)return q(e);let r=e+n,i=r>=0?t.gridGap:-t.gridGap;return r+i/2-(r+i/2)%i-n},Gn=(e,t,n)=>!t.gridGap&&!n?q(e,3):e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18),Kn=(e,t)=>t?[Math.abs(e[0])>Math.abs(e[1])?e[0]:0,Math.abs(e[1])>Math.abs(e[0])?e[1]:0]:e,qn=(e,t,n,r,i,a,s)=>{if(r.mode===`translate`)return W(Vn(n,r.originalShape,r.cursorStartPosition,i,a),i);if(r.mode===`rotate`){let{originalShape:e,cursorStartPosition:t}=r,s=e.computed.center,[c,l]=s,u=Gn(Math.atan2(l-n[1],c-n[0])-Math.atan2(l-t[1],c-t[0]),i,a);return W(o(e).map(e=>K(In(e,u,s),i)),i)}return r.mode===`resize`?W(Rn(e,n,r.originalShape,r,i,a,s),i):r.mode===`brush`?W(o(t).map(e=>tt(e,n,i)),i):t},Jn=(e,t,n,r,i=!1)=>{if(!e||!t||!r||!n)return[300,300];let a=e/t;if(a>n/r){let t=i?n:Math.min(e,n);return[t,t/a]}let o=i?r:Math.min(t,r);return[o*a,o]},Yn=({line:e,size:t,direction:n})=>{let r=Math.PI/2-le({targetVector:[e.points[0],e.points[1]]}),i=[e.points[0][0]+(e.points[1][0]-e.points[0][0])/2,e.points[0][1]+(e.points[1][1]-e.points[0][1])/2],a;if([`start`,`both`].includes(n)){let n=z({point:e.points[0],origin:i,rotation:-r});a=z({point:[n[0],n[1]+t],origin:i,rotation:r})}else a=[...e.points[0]];let o;if([`end`,`both`].includes(n)){let n=z({point:e.points[1],origin:i,rotation:-r});o=z({point:[n[0],n[1]-t],origin:i,rotation:r})}else o=[...e.points[1]];return{points:[a,o]}},Xn=e=>{let t=new Path2D;return t.rect(e.x,e.y,e.width,e.height),t},Zn=e=>{let t=new Path2D;return t.arc(e.x,e.y,e.radius,0,2*Math.PI),t},Qn=e=>{let t=new Path2D;return t.ellipse(e.x,e.y,e.radiusX,e.radiusY,0,0,2*Math.PI),t},$n=e=>{let t=new Path2D;return t.moveTo(...e.points[0]),t.lineTo(...e.points[1]),t},er=(e,{brushAlgo:t})=>{let n=new Path2D;if(e.points.length<1)return n;let r=e.points.flat(),i=r.map(e=>e[0]),a=r.map(e=>e[1]),o=Math.min(...i),s=Math.min(...a);for(let r of e.points)if(r.length)if(r.length===1)n.rect(...J(r[0],o,s,e.scaleX,e.scaleY),1,1);else switch(n.moveTo(...J(r[0],o,s,e.scaleX,e.scaleY)),t){case`quadratic`:for(let t=0;t<r.slice(1).length-2;t++){let i=J(r[t],o,s,e.scaleX,e.scaleY),a=J(r[t+1],o,s,e.scaleX,e.scaleY),c=(i[0]+a[0])/2,l=(i[1]+a[1])/2;n.quadraticCurveTo(...i,c,l)}n.quadraticCurveTo(...J(r[r.length-2],o,s,e.scaleX,e.scaleY),...J(r[r.length-1],o,s,e.scaleX,e.scaleY));break;default:for(let t of r.slice(1))n.lineTo(...J(t,o,s,e.scaleX,e.scaleY));break}return n},tr=(e,t,n,r)=>{let i=i=>(1-i)**3*e[0]+3*(1-i)**2*i*t[0]+3*(1-i)*i**2*n[0]+i**3*r[0],a=i=>(1-i)**3*e[1]+3*(1-i)**2*i*t[1]+3*(1-i)*i**2*n[1]+i**3*r[1],o=(e,t,n)=>{let r=e-2*t+n,i=-2*e+2*t,a=e;if(Math.abs(r)<1e-10){if(Math.abs(i)<1e-10)return[];let e=-a/i;return e>0&&e<1?[e]:[]}let o=i*i-4*r*a;if(o<0)return[];let s=Math.sqrt(o),c=(-i-s)/(2*r),l=(-i+s)/(2*r),u=[];return c>0&&c<1&&u.push(c),l>0&&l<1&&l!==c&&u.push(l),u},s=e[0],c=t[0],l=n[0],u=r[0],d=e[1],f=t[1],p=n[1],m=r[1],h=o(c-s,l-c,u-l),g=o(f-d,p-f,m-p),_=Math.min(e[0],r[0]),v=Math.max(e[0],r[0]),y=Math.min(e[1],r[1]),b=Math.max(e[1],r[1]);for(let e of h){let t=i(e);_=Math.min(_,t),v=Math.max(v,t)}for(let e of g){let t=a(e);y=Math.min(y,t),b=Math.max(b,t)}return{minX:_,maxX:v,minY:y,maxY:b}},nr=(e,t)=>e.style?.closedPoints===1&&t.length>2?[t[t.length-2],...t,t[0],t[1]]:[t[0],...t,t[t.length-1]],rr=(e,t,n,r)=>({cp1:[t[0]+(n[0]-e[0])/6,t[1]+(n[1]-e[1])/6],cp2:[n[0]-(r[0]-t[0])/6,n[1]-(r[1]-t[1])/6]}),ir=e=>{let t=new Path2D,n=e.tempPoint?[...e.points,e.tempPoint]:e.points;if(n.length<2)return t;if(n.length<3)return ar(e);let r=e.style?.closedPoints===1&&n.length>2;t.moveTo(...n[0]);let i=nr(e,n);for(let e=1;e<i.length-2;e++){let n=i[e-1],r=i[e],a=i[e+1],o=i[e+2],{cp1:s,cp2:c}=rr(n,r,a,o);t.bezierCurveTo(s[0],s[1],c[0],c[1],a[0],a[1])}return r&&t.closePath(),t},ar=e=>{let t=new Path2D,n=e.tempPoint?[...e.points,e.tempPoint]:e.points;if(n.length<2)return t;t.moveTo(...n[0]);for(let e of n.slice(1))t.lineTo(...e);return n.length>2&&e.style?.closedPoints===1&&t.lineTo(...n[0]),t},or=e=>{let t=new Path2D;return t.moveTo(...e.points[0]),t.lineTo(...e.points[1]),t.lineTo(...e.points[2]),t.lineTo(...e.points[0]),t},sr=(e,t)=>({x:e.x-t,y:e.y-t,width:e.width+t*2,height:e.height+t*2}),cr=(e,t)=>({x:t.x-(e.style?.lineWidth??0)/2,y:t.y-(e.style?.lineWidth??0)/2,width:t.width+(e.style?.lineWidth??0),height:t.height+(e.style?.lineWidth??0)}),lr=(e,t,n=0)=>{if(n===0)return e;let r=[[e.x,e.y],[e.x+e.width,e.y],[e.x+e.width,e.y+e.height],[e.x,e.y+e.height]].map(e=>z({point:e,origin:t,rotation:n})),i=Math.min(...r.map(e=>e[0])),a=Math.min(...r.map(e=>e[1])),o=Math.max(...r.map(e=>e[0])),s=Math.max(...r.map(e=>e[1]));return{x:i,y:a,width:o-i,height:s-a}},X=(e,t,n,r=cr)=>{let i=t(e,n),a=r(e,i,n),o=[i.x+i.width/2,i.y+i.height/2];return{borders:i,outerBorders:a,center:o,boundingBox:lr(a,o,e.rotation)}},ur=e=>{let{clientX:t=0,clientY:n=0}=`touches`in e&&e.touches[0]?e.touches[0]:`changedTouches`in e&&e.changedTouches[0]?e.changedTouches[0]:`clientX`in e?e:{};return{clientX:t,clientY:n}},dr=(e,t,n)=>{let{clientX:r,clientY:i}=ur(e),a=t.getBoundingClientRect();return[(r-a.left)/n.scaleRatio,(i-a.top)/n.scaleRatio]},fr=(e,t,n)=>{let{clientX:r,clientY:i}=ur(e),a=t?.getBoundingClientRect()??{left:0,top:0,width:n.canvasSize.width,height:n.canvasSize.height};return[(r-a.left)*(n.canvasSize.width/a.width)/n.canvasSize.scaleRatio-n.canvasOffset[0],(i-a.top)*(n.canvasSize.height/a.height)/n.canvasSize.scaleRatio-n.canvasOffset[1]]},Z=e=>`touches`in e,Q=(e,t,[n,r])=>z({origin:[n,r],point:e,rotation:t}),pr=(e,t,[n,r])=>z({origin:[n,r],point:e,rotation:-t}),mr=(e,t,n)=>n?R(e,{x:t[0],y:t[1],radius:n}):se(e,t),hr=(e,t,n,r=0)=>{let{canvasSize:{scaleRatio:i}}=n,{borders:a}=e.computed;if(e.type===`line`||e.type===`polygon`||e.type===`curve`){for(let n=0;n<e.points.length;n++)if(mr({x:e.points[n][0]-14/2/i,y:e.points[n][1]-14/2/i,width:14/i,height:14/i},t,r))return{mode:`resize`,anchor:n}}else{if(mr({x:a.x+a.width/2-14/2/i,y:a.y-14/i-16/i,width:14/i,height:14/i},t,r))return{mode:`rotate`};for(let e of C)if(mr({x:a.x+a.width*e[0]-14/2/i,y:a.y+a.height*e[1]-14/2/i,width:14/i,height:14/i},t,r))return{mode:`resize`,anchor:e}}return!1},gr=(e,t,n,r,i=!1,a=0)=>{let s=o(t).length>1?t:o(t)[0];if(!s)return!1;let{borders:c,center:l}=s.computed,u=Q(n,s.rotation??0,l);if(i){let e=hr(s,u,r,a);if(e)return e}return s.selection?.type===`line`?(e.lineWidth=(s.style?.lineWidth??0)+15/r.canvasZoom,(yr(s,!0)?e.isPointInPath(s.path,u[0],u[1]):e.isPointInStroke(s.path,u[0],u[1]))?{mode:`translate`}:!1):mr(c,u,(15+a)/r.canvasZoom)?{mode:`translate`}:!1},_r=(e,t,n,r,i=50)=>{if(t.locked||t.points.length<2)return!1;let{center:a}=t.computed,o=Q(n,t.rotation??0,a);e.lineWidth=(t.style?.lineWidth??0)+i/r.canvasZoom;let s=t.style?.closedPoints?[...t.points,t.points[0]]:t.points;for(let t=0;t<s.length-1;t++){let n=$n({points:[s[t],s[t+1]]});if(e.isPointInStroke(n,o[0],o[1]))return{lineIndex:t}}return!1},vr=(e,t,n,r,i=50)=>{if(t.locked||t.points.length<2)return!1;if(t.points.length<3)return _r(e,t,n,r,i);let{center:a}=t.computed,o=Q(n,t.rotation??0,a);e.lineWidth=(t.style?.lineWidth??0)+i/r.canvasZoom;let s=nr(t,t.points),c=new Path2D;c.moveTo(...s[0]);for(let t=1;t<s.length-2;t++){let n=s[t-1],r=s[t],i=s[t+1],a=s[t+2],{cp1:l,cp2:u}=rr(n,r,i,a);if(c.bezierCurveTo(l[0],l[1],u[0],u[1],i[0],i[1]),e.isPointInStroke(c,o[0],o[1]))return{lineIndex:t-1}}return!1},yr=(e,t=!1)=>t&&[`curve`,`polygon`].includes(e.type)?!0:e.style?.fillColor&&e.style?.fillColor!==`transparent`||[`picture`,`text`].includes(e.type),br=(e,t,n,r)=>{let{center:i}=t.computed,a=Q(n,t.rotation??0,i);return e.lineWidth=(t.style?.lineWidth??0)+15/r.canvasZoom,(yr(t)?e.isPointInPath(t.path,a[0],a[1]):e.isPointInStroke(t.path,a[0],a[1]))?{mode:`translate`}:!1};function xr(e,t){let n=Math.max(e.x,t.x),r=Math.max(e.y,t.y),i=Math.min(e.x+(e.width||1),t.x+(t.width||1)),a=Math.min(e.y+(e.height||1),t.y+(t.height||1));if(n<i&&r<a)return{x:n,y:r,width:i-n,height:a-r}}var Sr=({ctx:e,path:t,rect:n,offset:r,center:i,rotation:a=0,checkFill:o})=>{for(let s=0;s<r;s+=r/2)for(let c=0;c<r;c+=r/2)for(let l=s+n.x;l<n.x+n.width;l+=r)for(let s=c+n.y;s<n.y+n.height;s+=r){let n=Q([l,s],a,i);if(o?e.isPointInPath(t,n[0],n[1]):e.isPointInStroke(t,n[0],n[1]))return!0}return!1},Cr=10,wr=(e,t,n)=>{let{borders:r,center:i,boundingBox:a}=t.computed,o=Math.min(n[0][0],n[1][0]),s=Math.max(n[0][0],n[1][0]),c=Math.min(n[0][1],n[1][1]),l=Math.max(n[0][1],n[1][1]),u={x:o,y:c,width:s-o,height:l-c},d=xr(a,u);if(!d)return!1;if(r.width<=1||r.height<=1)return!0;if(e.lineWidth=(t.style?.lineWidth??0)+Cr,t.type===`brush`){let n=t.points.flat(),r=Math.min(...n.map(e=>e[0])),a=Math.min(...n.map(e=>e[1]));for(let n of t.points){if(n.length<1)break;if(n.length<2){let e=J(n[0],r,a,t.scaleX,t.scaleY);if(R(d,{x:e[0],y:e[1],radius:(t.style?.lineWidth??1)/2}))return!0}for(let o=0;o<n.length-1;o++){let s=pr(J(n[o],r,a,t.scaleX,t.scaleY),t.rotation??0,i),c=pr(J(n[o+1],r,a,t.scaleX,t.scaleY),t.rotation??0,i),l=xr({x:Math.min(s[0],c[0]),y:Math.min(s[1],c[1]),width:Math.abs(s[0]-c[0]),height:Math.abs(s[1]-c[1])},u);if(l){let t=new Path2D;if(t.moveTo(...s),t.lineTo(...c),Sr({ctx:e,path:t,rect:l,offset:Cr,center:i,checkFill:!1}))return!0}}}return!1}let f=yr(t);return Sr({ctx:e,path:t.path,rect:d,offset:Cr,center:i,rotation:t.rotation??0,checkFill:f})},Tr=5,Er=(e,t)=>{if(!Z(e))return!0;let{clientX:n,clientY:r}=ur(e),i=n-t.clientX,a=r-t.clientY;return i*i+a*a>Tr*Tr},Dr=(e,t,r,i,a,s,c,l,u,d,f,p,m,h,g,_,v,y)=>{if(y&&Er(e,y.startPosition)&&clearTimeout(y.timeout),Z(e)&&e.touches.length>1)return;let b=t.current?.getContext(`2d`);if(!b)return;let x=fr(e,t.current,m);if(i.mode===`selectionFrame`){p(b,x,m);let r=dr(e,t.current,m.canvasSize);v([Math.ceil(n(r[0]*m.canvasZoom<50?r[0]*m.canvasZoom-50:r[0]*m.canvasZoom>m.canvasSize.width/m.canvasSize.scaleRatioWithNoZoom-50?r[0]*m.canvasZoom-(m.canvasSize.width/m.canvasSize.scaleRatioWithNoZoom-50):0,-100,100)/5/m.canvasZoom),Math.ceil(n(r[1]*m.canvasZoom<50?r[1]*m.canvasZoom-50:r[1]*m.canvasZoom>m.canvasSize.height/m.canvasSize.scaleRatioWithNoZoom-50?r[1]*m.canvasZoom-(m.canvasSize.height/m.canvasSize.scaleRatioWithNoZoom-50):0,-100,100)/5/m.canvasZoom)]);return}if(s!==void 0){f([x[0]+m.canvasOffset[0]-s.start[0],x[1]+m.canvasOffset[1]-s.start[1]]);return}if(i.mode===`preview`){let e=o(r)[0];if(e?.type===`curve`){_(W([Et(e,x,m,!0)],m));return}if(e?.type===`polygon`){_(W([_t(e,x,m,!0)],m));return}}let S=Ke(x,m);if(Z(e)||l(e,b,x,S),r===void 0||r.locked){c({mode:`default`,outOfView:!S});return}if(i.mode===`default`||i.mode===`textedition`||i.mode===`contextMenu`){if(!S){c({mode:`default`});return}c(gr(b,r,x,m,!0)||{mode:`default`})}else{let e=t.current?.getContext(`2d`);if(!e)return;u(o(qn(e,r,x,i,m,h,g)))}i.mode===`translate`&&g&&!i.hasBeenDuplicated&&(a({...i,hasBeenDuplicated:!0}),d(o(i.originalShape)))},Or=e=>{let{shapes:t,settings:n,selectedShape:r,selectionMode:i,activeTool:a,canvasOffsetStartData:s,isInsideComponent:c,isInsideCanvas:l,isShiftPressed:u,isAltPressed:d,isSpacePressed:f,withFrameSelection:m,withContextMenu:h,setSelectedShape:g,setSelectionFrame:_,setSelectionMode:b,setActiveTool:x,setCanvasOffsetStartData:S,setCanvasOffset:C,setCanvasMoveAcceleration:w,addShapes:T,updateSingleShape:E,duplicateShapes:D,saveShapes:O,refreshHoveredShape:te,refreshSelectedShapes:ne}=k(),j=v(null),[M,ie]=y({mode:`default`});p(()=>()=>{j.current&&clearTimeout(j.current.timeout)},[]);let{registerDoubleClickEvent:ae,unRegisterDoubleClickEvent:oe}=re(),P=(i,o)=>{let s=o?.getContext(`2d`);if(s){if(a!==A||!h)g(void 0),b({mode:`default`});else{let a=fr(i,e.current,n),{shape:o,mode:c}=ke(s,t,a,n,r,Z(i),!1);g(o),b({mode:`contextMenu`,cursorStartPosition:a,originalShape:o,anchor:`anchor`in c?c.anchor:void 0})}x(A),_(void 0)}},F=v(null);F.current=t=>Dr(t,e,r,i,b,s,ie,te,E,D,C,ne,n,u,d,g,w,j.current);let I=c?document:null;N(I,`mousemove`,e=>F.current?.(e)),N(I,`touchmove`,e=>F.current?.(e));let{isBrushShapeDoneOnMouseUp:L}=n,se=v(null);se.current=a=>{if(j.current&&clearTimeout(j.current.timeout),Z(a)&&a.touches.length>1)return;let c=e.current?.getContext(`2d`);if(!c)return;if(`button`in a&&a.button===2){P(a,e.current);return}if(s){S(void 0);return}if(i.mode===`contextMenu`||i.mode===`textedition`||i.mode===`preview`)return;let l=fr(a,e.current,n);if(i.mode===`translate`&&Date.now()-i.dateStart<=500&&l[0]===i.cursorStartPosition[0]&&l[1]===i.cursorStartPosition[1]){if(a.ctrlKey||a.shiftKey||a.metaKey){let{shape:e}=ke(c,t,l,n,r,Z(a),m,`remove`);o(e).length!==i.selectedShapesLengthAtMouseDown&&g(e)}b({mode:`default`}),_(void 0),O();return}i.mode!==`default`&&(i.mode===`brush`&&L&&g(void 0),b({mode:`default`}),_(void 0),O())};let R=l?document:null;N(R,`mouseup`,e=>se.current?.(e)),N(R,`touchend`,e=>se.current?.(e));let z=!n.features.edition&&n.features.zoom,ce=!n.features.edition&&!n.features.zoom,le=v(null);return le.current=(s,c,l)=>{if(s.preventDefault(),Z(s)&&s.touches.length>1)return;let u=c?.getContext(`2d`);if(!u)return;c.focus();let d=fr(s,e.current,n),f=`button`in s&&s.button===1,p=`button`in s&&s.button===2;if(f||l||a.type===`move`&&!p){S({start:d,originalOffset:n.canvasOffset});return}if(!z){if(!Ke(d,n)){g(void 0),b({mode:`default`});return}if(p){if(a.type===`selection`){let{shape:e}=ke(u,t,d,n,r,Z(s),!1);g(e),b({mode:`default`})}return}if(Z(s)&&(j.current&&clearTimeout(j.current.timeout),j.current={timeout:setTimeout(()=>{P(s,e.current)},500),startPosition:ur(s)}),a.type===`selection`){let e=s.ctrlKey||s.shiftKey||s.metaKey?`add`:`replace`,{shape:i,mode:a}=ke(u,t,d,n,r,Z(s),m,e);g(i),b(a),a.mode===`selectionFrame`&&_({oldSelection:i,frame:[[d[0],d[1]],[d[0],d[1]]]})}else if(ee.some(e=>e===a.type)){let t=o(r)[0],s=e.current?.getContext(`2d`);if(!s)return;if(a.type===`brush`){if(t?.type===`brush`)E([nt(t,d,n)]);else{let e=jn(s,a,d,n);if(!e)return;T([e]),g(W([e],n))}b({mode:`brush`})}else if(i.mode===`preview`&&(t?.type===`polygon`||t?.type===`curve`)){let e=t.type===`polygon`?_t(t,d,n):Et(t,d,n);g(W([e],n)),E([e],!0)}else if(a.type!==`picture`){let e=jn(s,a,d,n);if(!e)return;T([e]);let t=W([e],n);g(t),e.type===`polygon`||e.type===`curve`?b({mode:`preview`}):(x(A),b({mode:`resize`,cursorStartPosition:[d[0]+n.selectionPadding,d[1]+n.selectionPadding],originalShape:t,anchor:e.type===`line`?0:[1,1],selectedShapesLengthAtMouseDown:o(t).length}))}}}},p(()=>{if(ce)return;let t=e.current;if(!t)return;let n=e=>le.current?.(e,t,f);return t.addEventListener(`mousedown`,n,{passive:!1}),t.addEventListener(`touchstart`,n,{passive:!1}),()=>{t.removeEventListener(`mousedown`,n),t.removeEventListener(`touchstart`,n)}},[ce,e,f]),p(()=>{let t=e.current,i=e.current?.getContext(`2d`);if(!t||!i)return;let s=t=>{if(a.type!==`selection`)return;let s=o(r);if(s.length!==1)return;let c=s[0];if(c?.locked)return;let l=fr(t,e.current,n);if(Ke(l,n)){if(c?.type===`text`){gr(i,r,l,n)&&b({mode:`textedition`,defaultValue:c.value});return}if(c?.type===`polygon`){let e=_r(i,c,l,n);e&&E([gt(c,e.lineIndex,l,n)]);return}if(c?.type===`curve`){let e=vr(i,c,l,n);e&&E([Tt(c,e.lineIndex,l,n)]);return}}};if(l)return ae(t,s),()=>{oe(t)}},[E,ae,oe,l,e,a,r,b,n]),{hoverMode:M}},kr=(e,t)=>{let{canvasSize:{width:n,height:r},gridGap:i,canvasOffset:a,canvasSize:{scaleRatio:o}}=t;if(!i)return;e.strokeStyle=`rgb(220,220,220)`,e.lineWidth=1,e.save(),e.scale(o,o),e.beginPath();let s=a[0]%i,c=a[1]%i,l=Math.ceil(n/o/i)+2,u=Math.ceil(r/o/i)+2;for(let t=-5;t<l;t++)e.moveTo(s+(t+1)*i,c-i),e.lineTo(s+(t+1)*i,c+r/o+i);for(let t=-5;t<u;t++)e.moveTo(s-i,c+(t+1)*i),e.lineTo(s+n/o+i,c+(t+1)*i);e.stroke(),e.restore()},Ar=e=>e.childNodes.length?Array.from(e.childNodes).map(e=>Ar(e)).join(``):e.nodeValue??``,jr=({disabled:e=!1,shape:t,defaultValue:n,updateValue:r,saveShapes:i,settings:a})=>{let o=v(null),s=v(i),c=e=>{r(Array.from(e.target.childNodes).map(e=>Ar(e)))};p(()=>{if(!o.current)return;let e=o.current,t=t=>{t.preventDefault();let n=t.clipboardData?.getData(`text/plain`);if(!n)return;let r=window.getSelection();if(!r||r.rangeCount===0)return;r.deleteFromDocument();let i=r.getRangeAt(0);i.insertNode(document.createTextNode(n)),i.collapse(!1),r.removeAllRanges(),r.addRange(i),e.dispatchEvent(new Event(`input`,{bubbles:!0}))};e.addEventListener(`paste`,t),e.innerText=``;for(let t of n){let n=document.createElement(`div`);t===``?n.innerHTML=`<br/>`:n.innerText=t,e.appendChild(n)}return e.focus(),()=>{e.removeEventListener(`paste`,t)}},[n]),p(()=>{let e=s.current;return()=>{e()}},[]);let l=g(()=>{let{borders:e,center:n}=t.computed;return z({point:[e.x,e.y],rotation:-(t.rotation??0),origin:n})},[t]),u=[`translate3D(${(l[0]+a.canvasOffset[0])*a.canvasSize.scaleRatio}px, ${(l[1]+a.canvasOffset[1])*a.canvasSize.scaleRatio}px, 0)`,`rotate(${L(t.rotation??0)}deg)`,t.flipX||t.flipY?`scale(${t.flipX?-1:1}, ${t.flipY?-1:1})`:void 0,t.flipX||t.flipY?`translate3D(${t.flipX?-100:0}%,${t.flipY?-100:0}%,0)`:void 0].filter(Boolean).join(` `),d=!e;return b(`div`,{className:`react-paint-editor-toolbox-edittextbox`,ref:o,"data-fontbold":t.style?.fontBold??!1,"data-fontitalic":t.style?.fontItalic??!1,contentEditable:d,role:`textbox`,tabIndex:d?0:void 0,onInput:c,style:{"--react-paint-editor-toolbox-edittextbox-transform":u,"--react-paint-editor-toolbox-edittextbox-fontsize":`${t.fontSize*a.canvasSize.scaleRatio}px`,"--react-paint-editor-toolbox-edittextbox-padding":`${a.selectionPadding*a.canvasSize.scaleRatio}px`,"--react-paint-editor-toolbox-edittextbox-color":t.style?.strokeColor??`inherit`,"--react-paint-editor-toolbox-edittextbox-opacity":(t.style?.opacity??100)/100,"--react-paint-editor-toolbox-edittextbox-fontfamily":t.style?.fontFamily??`serif`}})},Mr=(e,t,n,r,i)=>{oe(e),Ge(e,n),kr(e,n);let a=He(n);for(let s=r.length-1;s>=0;s--)t.mode===`textedition`&&r[s]===i||Fn(e,o(i).find(e=>e.id===r[s].id)??r[s],n,a)},Nr=(e,t,n,r,i,a,s,c,l,u,d)=>{e.reset(),We(e,n),d&&c&&!o(s).find(e=>e.id===c.id)&&r.type===`selection`&&(t.mode===`default`||t.mode===`contextMenu`||t.mode===`textedition`)&&Hn({ctx:e,shape:c,settings:n,selectionWidth:i,selectionColor:a,hoverMode:l,selectionMode:t,withAnchors:!1}),s&&r.type!==`brush`&&Hn({ctx:e,shape:s,settings:n,selectionWidth:i,selectionColor:a,hoverMode:l,selectionMode:t,withAnchors:t.mode!==`textedition`}),u&&Un({ctx:e,selectionFrame:u,settings:n})},Pr=l.forwardRef((e,t)=>{let{shapes:n,settings:r,selectedShape:i,hoveredShape:a,selectionFrame:s,selectionMode:c,activeTool:l,canvasOffsetStartData:u,isSpacePressed:f,selectionColor:h,selectionWidth:g,isEditMode:_,canGrow:y,withSkeleton:S,updateSingleShape:C,saveShapes:ee}=k(),w=v(null),T=v(null),D=r.canvasSize,O=_,te=_?0:-1;m(t,()=>w.current);let{hoverMode:A}=Or(w),ne=d(e=>{let t=o(i)[0];if(t?.type!==`text`)return;let n=w.current?.getContext(`2d`);n&&C([K(An(n,t,e,r),r)])},[C,i,r]),j=e=>{if(_)return e.preventDefault(),e.stopPropagation(),!1};return p(()=>{let e=w.current?.getContext(`2d`);e&&window.requestAnimationFrame(()=>Mr(e,c,r,n,i))},[n,c,i,r]),p(()=>{let e=T.current?.getContext(`2d`);e&&window.requestAnimationFrame(()=>Nr(e,c,r,l,g,h,i,a,A,s,S))},[a,A,s,c,i,l,r,g,h,S]),b(`div`,{className:`react-paint-canvas-box`,style:{"--react-paint-canvas-cursor":u?`grabbing`:A.outOfView?`default`:A.mode===`resize`?`pointer`:l.type!==`selection`&&l.type!==`move`?`crosshair`:A.mode===`translate`?`move`:A.mode===`rotate`||l.type===`move`||f?`grab`:`default`},children:x(`div`,{className:`react-paint-canvas-container`,"data-grow":y,children:[b(`canvas`,{className:E,ref:w,"data-grow":y,width:D.width,height:D.height,onContextMenu:j,tabIndex:te}),O&&b(`canvas`,{className:`react-paint-canvas-selectioncanvas`,ref:T,width:D.width,height:D.height,"data-grow":y,onContextMenu:j}),_&&c.mode===`textedition`&&o(i)[0]?.type===`text`&&b(jr,{disabled:!r.features.edition,shape:o(i)[0],defaultValue:c.defaultValue,updateValue:ne,saveShapes:ee,settings:r})]})})}),$={ArrowUp:`ArrowUp`,ArrowDown:`ArrowDown`,ArrowLeft:`ArrowLeft`,ArrowRight:`ArrowRight`,Delete:`Delete`,Backspace:`Backspace`,Escape:`Escape`,Shift:`Shift`,Alt:`Alt`,Option:`Option`,Space:` `,A:`A`,a:`a`,z:`z`,Z:`Z`,y:`y`,Y:`Y`,Plus:`+`,Minus:`-`,Zero:`0`},Fr={Cut:`cut`,Copy:`copy`,Paste:`paste`},Ir=({isInsideComponent:e,isInsideCanvas:t,selectedShape:n,isEditingText:r,settings:i,copiedShape:a,setCopiedShape:s,setSelectedShape:l,setActiveTool:u,setCanvasZoom:d,resetZoom:f,setSelectionMode:m,setSelectionFrame:h,selectAllShapes:g,removeShape:_,pasteShapes:v,updateShapes:y,backwardShape:b,forwardShape:x,setShiftPressed:S,setAltPressed:C,setIsSpacePressed:ee})=>(p(()=>{let p=e=>{n&&(r||(e.preventDefault(),s({...n})))},w=e=>{n&&(r||(e.preventDefault(),s({...n}),_(o(n))))},T=e=>{a&&(r||(e.preventDefault(),v(Wn(a,i))))},E=e=>{switch(e.key){case $.Shift:S(!1);break;case $.Alt:case $.Option:C(!1);break;case $.Space:ee(!1);break}},D=e=>{if(e.metaKey||e.ctrlKey){if(e.key===$.Z||e.key===$.z){e.preventDefault(),e.stopPropagation(),e.shiftKey?x():b();return}if(!c()&&(e.key===$.Y||e.key===$.y)){e.preventDefault(),e.stopPropagation(),x();return}if(e.key===$.A||e.key===$.a){e.preventDefault(),e.stopPropagation(),g();return}if(e.key===$.Plus){e.preventDefault(),e.stopPropagation(),d(`zoom`);return}if(e.key===$.Minus){e.preventDefault(),e.stopPropagation(),d(`unzoom`);return}if(e.key===$.Zero){e.preventDefault(),e.stopPropagation(),f();return}}if(e.key===$.Shift){e.preventDefault(),e.stopPropagation(),S(!0);return}if(e.key===$.Space&&t){e.preventDefault(),e.stopPropagation(),ee(!0);return}if(e.key===$.Alt||e.key===$.Option){e.preventDefault(),e.stopPropagation(),C(!0);return}if(!n)return;if(e.key===$.Escape){l(void 0),u(A),m({mode:`default`}),h(void 0);return}if(r)return;let a={[$.ArrowLeft]:[i.gridGap?-i.gridGap:-1,0],[$.ArrowRight]:[i.gridGap?i.gridGap:1,0],[$.ArrowDown]:[0,i.gridGap?i.gridGap:1],[$.ArrowUp]:[0,i.gridGap?-i.gridGap:-1]};switch(e.key){case $.ArrowLeft:case $.ArrowRight:case $.ArrowDown:case $.ArrowUp:e.preventDefault(),e.stopPropagation(),y(Vn(a[e.key],n,[0,0],i,!0));break;case $.Delete:case $.Backspace:e.preventDefault(),e.stopPropagation(),_(o(n));break}};if(e)return document.addEventListener(`keydown`,D),document.addEventListener(`keyup`,E),document.addEventListener(Fr.Copy,p),document.addEventListener(Fr.Paste,T),document.addEventListener(Fr.Cut,w),()=>{document.removeEventListener(`keydown`,D),document.removeEventListener(`keyup`,E),document.removeEventListener(Fr.Copy,p),document.removeEventListener(Fr.Paste,T),document.removeEventListener(Fr.Cut,w)}},[e,t,a,r,n,i,y,_,l,v,b,x,S,C,u,m,h,s,d,f,ee,g]),{}),Lr=({onResized:e,element:t})=>{p(()=>{let n=t.current;if(!n)return;let r=new ResizeObserver(t=>{let n=t?.[0]?.borderBoxSize?.[0],{width:r,height:i}=n?{width:n.inlineSize,height:n.blockSize}:t?.[0]?.contentRect??{};r!==void 0&&i!==void 0&&e(r,i)});return r.observe(n),()=>{r.unobserve(n)}},[t,e])},Rr=({settings:e,componentRef:t,canvasRef:n})=>{let[r,i]=y(!1),[a,o]=y(!1),s=!e.features.edition&&!e.features.zoom;return p(()=>{if(s)i(!1),o(!1);else{let e=()=>i(!0),r=()=>i(!1),a=()=>o(!0),s=()=>o(!1);return t.current?.addEventListener(`focusin`,e),t.current?.addEventListener(`focusout`,r),n.current?.addEventListener(`focusin`,a),n.current?.addEventListener(`focusout`,s),()=>{t.current?.removeEventListener(`focusin`,e),t.current?.removeEventListener(`focusout`,r),n.current?.removeEventListener(`focusin`,a),n.current?.removeEventListener(`focusout`,s)}}},[s,t,n]),{isInsideComponent:r,isInsideCanvas:a}},zr=(e,t,n,r)=>a(e.states[e.cursor]?.shapes,t)?e:{states:[...e.states.slice(0,e.cursor+1),{shapes:t,selectedShape:n,source:r}],cursor:e.cursor+1},Br=(t,n)=>{switch(n.type){case`ADD`:return{...t,shapes:[...n.newShapes,...t.shapes]};case`UPDATE`:{let e=new Map(n.updatedShapes.map(e=>[e.id,e])),r=t.shapes.map(t=>e.get(t.id)??t),i={...t,shapes:r,selectedShape:n.newSelectedShape};return n.save?{...i,history:zr(i.history,r,n.newSelectedShape,`user`)}:i}case`REMOVE`:{let e=t.shapes.filter(e=>!n.ids.has(e.id));return{...t,shapes:e,selectedShape:n.newSelectedShape,history:zr(t.history,e,n.newSelectedShape,`user`)}}case`DUPLICATE`:{let e=t.shapes.flatMap(e=>{let t=n.newShapesMap.get(e.id);return t?[t,e]:[e]});return{...t,shapes:e,selectedShape:n.newSelectedShape??t.selectedShape}}case`RESET_AND_SAVE`:{let r=n.shapes.map(t=>e([`chosen`],t));return{...t,shapes:r,selectedShape:n.newSelectedShape,history:zr(t.history,r,n.newSelectedShape,`user`)}}case`SET_SELECTION`:return{...t,selectedShape:n.newSelectedShape};case`SAVE`:return{...t,history:zr(t.history,t.shapes,t.selectedShape,`user`)};case`UNDO`:{if(t.history.cursor<=0)return t;let e=t.history.cursor-1,{shapes:n,selectedShape:r}=t.history.states[e];return{...t,shapes:n,selectedShape:r,history:{...t.history,cursor:e}}}case`REDO`:{if(t.history.cursor>=t.history.states.length-1)return t;let e=t.history.cursor+1,{shapes:n,selectedShape:r}=t.history.states[e];return{...t,shapes:n,selectedShape:r,history:{...t.history,cursor:e}}}case`CLEAR`:return n.clearHistory?{shapes:n.shapes,selectedShape:void 0,history:{states:[{shapes:n.shapes,selectedShape:void 0,source:n.source}],cursor:0}}:{...t,shapes:n.shapes,selectedShape:void 0,history:zr(t.history,n.shapes,void 0,n.source)};case`REFRESH_ALL`:return{...t,shapes:n.shapes,selectedShape:n.newSelectedShape};default:return t}},Vr=(e,n,a,s)=>{let[c,l]=_(Br,{shapes:[],selectedShape:void 0,history:{states:[{shapes:[],selectedShape:void 0,source:`remote`}],cursor:0}}),u=v([]),f=v(void 0),m=v({dataChanged:[]});h(()=>{u.current=c.shapes,f.current=c.selectedShape},[c.shapes,c.selectedShape]);let[g,b]=y(void 0),[x,S]=y(void 0),[C,ee]=y(void 0),w=d(e=>{l({type:`SET_SELECTION`,newSelectedShape:typeof e==`function`?e(f.current):e})},[]),T=c.history.cursor>0,E=c.history.cursor<c.history.states.length-1,D=c.shapes.length>0,O=d(()=>{l({type:`SAVE`})},[]),te=d(e=>{l({type:`ADD`,newShapes:e})},[]),k=d((n,r=!1,i=!1)=>{let a=new Map,o=[];for(let i of u.current){let s=n.find(e=>e.id===i.id);if(s){let n=r?Wn(W([s],e),e)[0]:{...s,id:t(`${i.type}_`)};a.set(i.id,n),o.push(n)}}l({type:`DUPLICATE`,newShapesMap:a,newSelectedShape:i?W(o,e):f.current})},[e]),A=d((t,n,r,i)=>{if(t.target&&`className`in t.target&&![`react-paint-canvas-drawcanvas`,`react-paint-canvas-selectioncanvas`].includes(t.target.className)||!i){S(void 0);return}S(u.current.filter(e=>!e.locked&&se(e.computed.boundingBox,r)).find(t=>o(c.selectedShape)?.map(e=>e.id).includes(t.id)?!!gr(n,t,r,e):!!br(n,t,r,e)))},[e,c.selectedShape]),ne=d(async(t,n=300,r=300)=>{let i=await mn(t,n,r,e);return l({type:`ADD`,newShapes:[i]}),l({type:`SAVE`}),i},[e]),j=d((t,n=!1)=>{let r=new Map(t.map(e=>[e.id,e])),i=f.current;l({type:`UPDATE`,updatedShapes:t,newSelectedShape:i&&W(o(i).map(e=>r.get(e.id)??e),e),save:n})},[e]),M=d((e,t=f.current)=>{l({type:`RESET_AND_SAVE`,shapes:e,newSelectedShape:t})},[]),re=d(e=>{let t=new Set(e.map(e=>e.id)),n=f.current;l({type:`REMOVE`,ids:t,newSelectedShape:o(n).map(e=>e.id).find(e=>t.has(e))?void 0:n})},[]),N=d(()=>{l({type:`UNDO`})},[]),ie=d(()=>{l({type:`REDO`})},[]),ae=d((e,t)=>{l({type:`CLEAR`,shapes:e,clearHistory:t.clearHistory,source:t.source})},[]),oe=d((e,t)=>{let n=u.current;M(r(n,n.findIndex(t=>t.id===e),n.findIndex(e=>e.id===t)))},[M]),P=d((e,t)=>{let n=[...u.current],i=new Set(e.map(e=>e.id)),a=n.map((e,t)=>i.has(e.id)?t:-1).filter(e=>e>=0);if(a.length!==0)switch(t){case`first`:case`last`:{let e=a.map(e=>n[e]).filter(Boolean),r=n.filter((e,t)=>!a.includes(t));M(t===`first`?[...e,...r]:[...r,...e]);break}case`backward`:{let e=[...n],t=a.sort((e,t)=>t-e).map(e=>n[e].id);for(let n of t){let t=e.findIndex(e=>e.id===n);if(t<e.length-1){let n=t+1;i.has(e[n].id)||(e=r(e,t,n))}}M(e);break}case`forward`:{let e=[...n],t=a.sort((e,t)=>e-t).map(e=>n[e].id);for(let n of t){let t=e.findIndex(e=>e.id===n);if(t>0){let n=t-1;i.has(e[n].id)||(e=r(e,t,n))}}M(e);break}}},[M]),F=d((t,n,r,i)=>{let a=new Set(n.map(e=>e.id)),o=i===`rotateClockwise`||i===`rotateCounterclockwise`?u.current.map(t=>a.has(t.id)?K(In(t,i===`rotateClockwise`?Math.PI/2:-Math.PI/2,r),e):t):zn(t,u.current,n,r,i,e);M(o,W(o.filter(e=>a.has(e.id)),e))},[e,M]),I=d(t=>{let n=new Set(t.map(e=>e.id)),r=u.current.map(e=>n.has(e.id)?i(`visible`,e.visible===!1,e):e);M(r,W(r.filter(e=>o(f.current)?.map(e=>e.id).includes(e.id)),e))},[M,e]),L=d(t=>{let n=new Set(t.map(e=>e.id)),r=u.current.map(e=>n.has(e.id)?i(`locked`,!e.locked,e):e);M(r,W(r.filter(e=>o(f.current)?.map(e=>e.id).includes(e.id)),e))},[M,e]),R=d((e,t)=>{m.current.hasOwnProperty(e)&&(m.current[e]=[...m.current[e],t])},[]),z=d((e,t)=>{if(m.current.hasOwnProperty(e))if(t){let n=m.current[e].indexOf(t);m.current[e]=[...m.current[e].slice(0,n),...m.current[e].slice(n+1)]}else m.current[e]=[]},[]);p(()=>{let e=c.history.states[c.history.cursor],t=Jt(e.shapes,n,a);for(let n of m.current.dataChanged)n(t,e.source)},[n,a,c.history]),p(()=>{let t=u.current.map(t=>K(t,e)),n=f.current;l({type:`REFRESH_ALL`,shapes:t,newSelectedShape:n===void 0?void 0:W(o(n).map(t=>K(t,e)),e)})},[e]);let ce=d((t,n)=>{b(r=>{let i=[r?.frame[0]??[n[0],n[1]],[n[0],n[1]]],a=u.current.filter(e=>e.locked?!1:wr(t,e,i)),o=W(a,e);return w(s?W(je(r?.oldSelection,a),e):o),{oldSelection:r?.oldSelection,frame:i}})},[e,s,w]);return{registerEvent:R,unregisterEvent:z,shapes:c.shapes,shapesRef:u,selectedShape:c.selectedShape,hoveredShape:x,selectionFrame:g,setSelectionFrame:b,copiedShape:C,setCopiedShape:ee,refreshSelectedShapes:ce,addShapes:te,duplicateShapes:k,addPictureShape:ne,moveShapes:P,swapShapes:oe,saveShapes:O,setSelectedShape:w,refreshHoveredShape:A,toggleShapeVisibility:I,toggleShapeLock:L,removeShape:re,updateShape:j,transformShape:F,backwardShape:N,forwardShape:ie,clearShapes:ae,canGoBackward:T,canGoForward:E,canClear:D}},Hr=(e,t)=>Math.abs(e-t.startDiff)>30,Ur=(e,t)=>Math.abs(ue(e,t.startCenter))>10,Wr=e=>{let t=[e[0].clientX,e[0].clientY],n=[e[1].clientX,e[1].clientY];return{diff:ue(t,n),center:de(t,n)}},Gr=({canvasBoundingRect:e,canvasSize:t,size:r,startDiff:i,startZoom:a,startCenter:o,startOffset:s,currentDiff:c,currentCenter:l,isMoving:u,isZooming:d})=>{let f=d?n(c/i*a,G[0],G[G.length-1]):a;return ze({size:r,canvasSize:t,currentOffset:u?[s[0]+(l[0]-o[0])*(t.width/e.width)/t.scaleRatio/a,s[1]+(l[1]-o[1])*(t.height/e.height)/t.scaleRatio/a]:[s[0],s[1]],currentZoom:a,zoom:f,centerPoint:[(l[0]-e.left)/t.scaleRatio,(l[1]-e.top)/t.scaleRatio]})},Kr=({canvasElt:e,canvasTransformation:t,canvasSize:n,size:r,setCanvasTransformation:i})=>{let a=v([]),[o,s]=y(a.current.length>0),c=v(null),l=v(t);l.current=t;let u=d(({startDiff:t,startZoom:a,startCenter:o,startOffset:s,currentDiff:c,currentCenter:l,isMoving:u,isZooming:d})=>{!e||!c||!t||i(Gr({canvasBoundingRect:e.getBoundingClientRect(),canvasSize:n,size:r,startDiff:t,startZoom:a,startCenter:o,startOffset:s,currentDiff:c,currentCenter:l,isMoving:u,isZooming:d}))},[e,n,r,i]),f=e=>{if(a.current=[...a.current,e],s(a.current.length>0),a.current.length===2){e.stopPropagation();let{diff:t,center:n}=Wr(a.current);c.current={startDiff:t,startCenter:n,startZoom:l.current.zoom,startOffset:l.current.offset,isMoving:!1,isZooming:!1}}},p=e=>{let t=a.current.findIndex(t=>t.pointerId===e.pointerId);if(t>-1&&(a.current[t]=e),a.current.length===2&&c.current){let{diff:e,center:t}=Wr(a.current),n=c.current.isZooming||Hr(e,c.current),r=c.current.isMoving||n||Ur(t,c.current);c.current={...c.current,isMoving:r,isZooming:n},u({...c.current,currentDiff:e,currentCenter:t})}},m=e=>{a.current=a.current.filter(t=>t.pointerId!==e.pointerId),s(a.current.length>0)};N(e,`pointerdown`,f);let h=o?document:null;N(h,`pointermove`,p),N(h,`pointerup`,m),N(h,`pointerout`,m),N(h,`pointercancel`,m),N(h,`pointerleave`,m)},qr={offset:[0,0],zoom:1},Jr=({canvasSize:e,size:t,zoomEnabled:n,canvasElt:r})=>{let[i,a]=y(qr),o=v(0),s=d(n=>{a(({zoom:r})=>Re({zoom:r,size:t,canvasSize:e,newOffset:n}))},[e,t]),c=d(n=>{a(({offset:r,zoom:i})=>Be({size:t,canvasSize:e,currentOffset:r,currentZoom:i,action:n}))},[e,t]);Kr({canvasElt:r,canvasTransformation:i,canvasSize:e,size:t,setCanvasTransformation:a});let l=d(()=>{a(qr)},[]);return p(()=>{if(!n||!r)return;let i=n=>{let i=n.ctrlKey,{deltaX:s,deltaY:c}=qe(n,n.timeStamp-o.current);if(o.current=n.timeStamp,i){n.preventDefault();let i=dr(n,r,e);a(({offset:n,zoom:r})=>Ve({size:t,canvasSize:e,currentOffset:n,currentZoom:r,delta:c,centerPoint:i}));return}let[l,u]=n.shiftKey?[c,s]:[s,c];a(({offset:r,zoom:i})=>{let a=Re({zoom:i,size:t,canvasSize:e,newOffset:[r[0]-l/i,r[1]-u/i]});return(a.offset[0]!==r[0]||a.offset[1]!==r[1])&&n.preventDefault(),a})};return r.addEventListener(`wheel`,i,{passive:!1}),()=>{r.removeEventListener(`wheel`,i)}},[r,t,e,n]),{setCanvasTransformation:a,setCanvasOffset:s,setCanvasZoom:c,resetZoom:l,canvasTransformation:i}},Yr=({width:e=1e3,height:t=600,shapes:n,mode:r=`editor`,disabled:i=!1,options:a=D}={})=>{let{layersManipulation:o,brushAlgo:s,isBrushShapeDoneOnMouseUp:c,debug:l,grid:u,canGrow:f,canShrink:m,withExport:h,withLoadAndSave:_,withUploadPicture:b,withUrlPicture:x,withSkeleton:S,withFrameSelection:C,withContextMenu:ee,clearCallback:w,availableTools:T,canvasSelectionPadding:E,size:O,canZoom:te}={...D,...a},k=r!==`viewer`,ne=ee&&k&&!i,j=v(null),M=v(null),re=v(!1),N=d(e=>{j.current=e},[]),[ie,ae]=y(void 0),[oe,P]=y(A),[F,I]=y({mode:`default`}),[L,se]=y(u),[R,z]=y({realWidth:e,realHeight:t,width:e,height:t,scaleRatio:1}),ce=te===`always`&&!i,{canvasTransformation:le,setCanvasTransformation:ue,setCanvasOffset:de,setCanvasZoom:B,resetZoom:fe}=Jr({canvasSize:R,size:O,canvasElt:M.current,zoomEnabled:ce}),{offset:pe,zoom:me}=le,V=g(()=>({brushAlgo:s,isBrushShapeDoneOnMouseUp:c,debug:l,canvasSize:{realWidth:R.realWidth,realHeight:R.realHeight,width:R.width,height:R.height,scaleRatioWithNoZoom:R.scaleRatio,scaleRatio:R.scaleRatio*me},size:O,canvasOffset:pe,canvasZoom:me,gridGap:L,selectionPadding:E,features:{edition:k&&!i,zoom:ce}}),[E,L,s,c,l,me,pe,R,O,i,ce,k]),[he,ge]=y(T),{isInsideComponent:_e,isInsideCanvas:H}=Rr({settings:V,componentRef:j,canvasRef:M}),[ve,ye]=y(!1),[be,xe]=y(!1),[Se,Ce]=y(!1),{registerEvent:we,unregisterEvent:Te,shapes:Ee,shapesRef:U,selectedShape:De,selectionFrame:Oe,hoveredShape:ke,copiedShape:Ae,setCopiedShape:je,addShapes:Me,addPictureShape:Ne,moveShapes:Pe,swapShapes:Fe,setSelectedShape:Ie,setSelectionFrame:G,refreshSelectedShapes:Le,refreshHoveredShape:ze,duplicateShapes:Be,removeShape:Ve,updateShape:He,backwardShape:Ue,forwardShape:We,clearShapes:Ge,saveShapes:Ke,toggleShapeVisibility:qe,toggleShapeLock:Je,transformShape:Ye,canGoBackward:Xe,canGoForward:Ze,canClear:Qe}=Vr(V,e,t,ve),$e=d(e=>{Ie(void 0),P(e)},[Ie]),[et,tt]=y([0,0]),nt=F.mode===`preview`;p(()=>{if(nt)return()=>I(e=>e.mode===`preview`?{mode:`default`}:e)},[De?.id,nt]);let rt=F.mode===`selectionFrame`;p(()=>{if(rt)return()=>tt([0,0])},[rt]),p(()=>{if(et[0]!==0||et[1]!==0){let e=setInterval(()=>{ue(({offset:e,zoom:t})=>Re({zoom:t,size:O,canvasSize:R,newOffset:[e[0]-et[0],e[1]-et[1]]}))},20);return()=>clearInterval(e)}},[et[0],et[1],ue,O,R]);let it=d((e,t)=>{Ge(e,t),$e(A),ue({offset:[0,0],zoom:1})},[$e,Ge,ue]),at=d(e=>{Ie(t=>(t?.id!==e.map(e=>e.id).join(`-`)&&P(A),W(e,V)))},[Ie,V]),ot=d(e=>{Me(e),at(e)},[Me,at]),st=d(()=>{at(U.current.filter(e=>!e.locked))},[at,U]),ct=d(e=>W(e,V),[V]),lt=d(e=>Wn(e,V),[V]),ut=d(e=>K(e,V),[V]),dt=d(()=>{let n=on(U.current,e,t);if(!n)throw Error(`L'encodage a échoué`);$t(n,`drawing.json`)},[U,e,t]),ft=d(e=>{$t(an({shapes:U.current,settings:V,view:e}),`drawing.png`)},[U,V]),pt=d(e=>an({shapes:U.current,settings:V,view:e}),[U,V]),mt=d(()=>Jt(U.current,e,t),[U,e,t]),ht=d(async(e,t)=>{it(await cn(e,V),t)},[it,V]),gt=v(ht);gt.current=ht;let _t=d((e=[],t=!0)=>{gt.current?.(e,{clearHistory:t,source:`remote`})},[]);p(()=>{re.current||(re.current=!0,n&&gt.current?.(n,{clearHistory:!0,source:`remote`}))},[n]);let yt=d(async e=>{await ht((await sn(e)).shapes??[],{clearHistory:!0,source:`remote`})},[ht]),bt=d(()=>{typeof w==`string`?w===`defaultShapes`&&n!==void 0?ht(n,{clearHistory:!1,source:`user`}):it([],{clearHistory:!1,source:`user`}):ht(w(),{clearHistory:!1,source:`user`})},[it,ht,n,w]),xt=d((e,t)=>{He([e.type===`curve`?Dt(e,t,V):vt(e,t,V)],!0)},[V,He]);p(()=>{ge(T)},[T]);let St={canvas:M,editor:j,setEditor:N};return{annotationsProps:{style:{userSelect:`none`,touchAction:`none`,transformOrigin:`left top`,transform:`scale(var(--react-paint-canvas-zoom)) translate(calc(var(--react-paint-canvas-offset-x) * 100% / var(--react-paint-app-canvaswidth)),      calc(var(--react-paint-canvas-offset-y) * 100% / var(--react-paint-app-canvasheight)))`,"--react-paint-canvas-zoom":V.canvasZoom,"--react-paint-canvas-offset-x":V.canvasOffset[0],"--react-paint-canvas-offset-y":V.canvasOffset[1],"--react-paint-app-canvaswidth":e,"--react-paint-app-canvasheight":t}},editorProps:{shapes:Ee,addPictureShape:Ne,moveShapes:Pe,swapShapes:Fe,toggleShapeVisibility:qe,toggleShapeLock:Je,duplicateShapes:Be,canGoBackward:Xe,canGoForward:Ze,canClear:Qe,selectedShape:De,copiedShape:Ae,setCopiedShape:je,pasteShapes:ot,saveShapes:Ke,removeShape:Ve,updateShape:He,backwardShape:Ue,forwardShape:We,removeShapePoint:xt,transformShape:Ye,refs:St,width:e,height:t,selectTool:$e,selectShapes:at,selectAllShapes:st,activeTool:oe,setActiveTool:P,setAvailableTools:ge,isEditMode:k,availableTools:he,gridGap:L,setGridGap:se,loadFile:yt,exportPicture:ft,exportData:dt,clearCanvas:bt,selectionMode:F,setSelectionMode:I,settings:V,setCanvasZoom:B,resetZoom:fe,buildShapesGroup:ct,copyShapes:lt,refreshShape:ut,calculateTextFontSize:Cn,canvas:{canGrow:f,canShrink:m,layersManipulation:o,withExport:h,withLoadAndSave:_,withUploadPicture:b,withUrlPicture:x,withContextMenu:ne}},canvasProps:{shapes:Ee,selectedShape:De,selectionFrame:Oe,hoveredShape:ke,copiedShape:Ae,pasteShapes:ot,setCopiedShape:je,addShape:Me,setSelectedShape:Ie,setSelectionFrame:G,refreshSelectedShapes:Le,refreshHoveredShape:ze,removeShape:Ve,updateShape:He,duplicateShapes:Be,backwardShape:Ue,forwardShape:We,saveShapes:Ke,refs:St,width:e,height:t,settings:V,setCanvasSize:z,setCanvasOffset:de,setCanvasZoom:B,resetZoom:fe,selectShapes:at,selectAllShapes:st,activeTool:oe,setActiveTool:P,isInsideComponent:_e,isInsideCanvas:H,isEditMode:k,canvas:{withSkeleton:S,withFrameSelection:C,withContextMenu:ne,canGrow:f,canShrink:m},canvasOffsetStartData:ie,setCanvasOffsetStartData:ae,selectionMode:F,setSelectionMode:I,setCanvasMoveAcceleration:tt,isShiftPressed:ve,isAltPressed:be,isSpacePressed:Se,setShiftPressed:ye,setAltPressed:xe,setIsSpacePressed:Ce},registerEvent:we,unregisterEvent:Te,resetCanvas:_t,resetZoom:fe,getCurrentImage:pt,getCurrentData:mt,setCanvasOffset:de,setCanvasZoom:B}},Xr=({options:e,className:t,style:n,canvasProps:r})=>{let{shapes:i,selectedShape:a,selectionFrame:o,hoveredShape:s,addShape:c,setSelectedShape:l,selectAllShapes:u,setSelectionFrame:f,refreshSelectedShapes:p,refreshHoveredShape:m,duplicateShapes:h,removeShape:_,updateShape:y,backwardShape:x,forwardShape:S,saveShapes:C,refs:ee,width:w,height:T,settings:E,setCanvasSize:D,setCanvasOffset:k,pasteShapes:A,activeTool:ne,setActiveTool:j,isInsideComponent:M,isInsideCanvas:re,isEditMode:N,canvas:{withSkeleton:ie,withFrameSelection:ae,withContextMenu:oe,canGrow:P,canShrink:F},canvasOffsetStartData:I,setCanvasOffsetStartData:L,selectionMode:se,setSelectionMode:R,setCanvasMoveAcceleration:z,isShiftPressed:ce,isAltPressed:le,isSpacePressed:ue,copiedShape:de,setCopiedShape:B,setShiftPressed:fe,setAltPressed:pe,setCanvasZoom:me,resetZoom:V,setIsSpacePressed:he}=r,{canvasBackgroundColor:ge,canvasSelectionColor:_e,canvasSelectionWidth:H}={...O,...e},ve=v(null),ye=d(e=>{D({realWidth:w,realHeight:T,width:e,height:T*e/w,scaleRatio:e/w})},[w,T,D]);Ir({isInsideComponent:M,isInsideCanvas:re,isEditingText:se.mode===`textedition`,settings:E,selectedShape:a,copiedShape:de,setCopiedShape:B,selectAllShapes:u,setSelectedShape:l,removeShape:_,pasteShapes:A,updateShapes:y,backwardShape:x,forwardShape:S,setShiftPressed:fe,setAltPressed:pe,setActiveTool:j,setSelectionMode:R,setSelectionFrame:f,setCanvasZoom:me,resetZoom:V,setIsSpacePressed:he}),Lr({element:ve,onResized:ye});let be=g(()=>({shapes:i,settings:E,selectedShape:a,hoveredShape:s,selectionFrame:o,selectionMode:se,activeTool:ne,canvasOffsetStartData:I,isInsideComponent:M,isInsideCanvas:re,isShiftPressed:ce,isAltPressed:le,isSpacePressed:ue,selectionColor:_e,selectionWidth:H,isEditMode:N,canGrow:P,withFrameSelection:ae,withSkeleton:ie,withContextMenu:oe,setSelectedShape:l,setSelectionFrame:f,setSelectionMode:R,setActiveTool:j,setCanvasOffsetStartData:L,setCanvasOffset:k,setCanvasMoveAcceleration:z,addShapes:c,updateSingleShape:y,duplicateShapes:h,saveShapes:C,refreshHoveredShape:m,refreshSelectedShapes:p}),[i,E,a,s,o,se,ne,I,M,re,ce,le,ue,_e,H,N,P,ae,ie,oe,l,f,R,j,L,k,z,c,y,h,C,m,p]);return b(`div`,{ref:ve,className:`react-paint-app-row${t?` ${t}`:``}`,"data-grow":P,"data-shrink":F,style:{"--react-paint-app-row-width":E.canvasSize.width,"--react-paint-app-canvaswidth":w,"--react-paint-app-canvasheight":T,"--react-paint-app-row-aspectratio":`calc(${E.canvasSize.width} / ${E.canvasSize.height})`,"--react-paint-app-canvas-bg":ge,...n},children:b(te.Provider,{value:be,children:b(Pr,{ref:ee.canvas})})})};export{Yr as n,D as r,Xr as t};

package/dist/_chunks/editor-CNTO8aYs.js

@@ -0,0 +1 @@
+import{c as e,d as t,o as n,s as r,t as i}from"./array-DuJem3vg.js";import a,{useCallback as o,useEffect as s,useImperativeHandle as c,useRef as l,useState as u,useTransition as d}from"react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";var h=[`transparent`,`black`,`white`,`red`,`green`,`blue`,`yellow`],g=[0,1,2],_=[0,1,2,3],v=[`arial`,`serif`,`monospace`],y=`serif`,b={LOADING:2,PANEL:3,SNACKBAR:4},x=({isLoading:e=!1})=>{let[t,n]=u(`hidden`);return s(()=>{if(e)n(`visible`);else{n(`fadeOut`);let e=setTimeout(()=>n(`hidden`),300);return()=>{clearTimeout(e)}}},[e]),t===`hidden`?null:p(`div`,{className:`react-paint-editor-loading`,"data-loading":t,style:{"--react-paint-editor-loading-zindex":b.LOADING,"--react-paint-editor-loading-transition-duration":`300ms`},children:m(`div`,{className:`react-paint-editor-loader`,children:[p(`div`,{}),p(`div`,{}),p(`div`,{}),p(`div`,{})]})})},S={type:`infos`,duration:4e3},C=({type:e,text:t,duration:n})=>{let[r,i]=u(!1);return s(()=>{let e=setTimeout(()=>{i(!0)},100),t=setTimeout(()=>{i(!1)},n-500-100);return()=>{clearTimeout(e),clearTimeout(t)}},[n]),p(`div`,{className:`react-paint-editor-snackbar`,"data-is-shown":+r,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":`500ms`},children:t})},w=({snackbarList:e})=>p(`div`,{className:`react-paint-editor-snackbar-container`,style:{"--react-paint-editor-snackbar-zindex":b.SNACKBAR},children:e.map(e=>p(C,{...e},e.id))}),T=a.forwardRef((e,t)=>{let{hidden:n=!1,disabled:r=!1,selected:i=!1,icon:a,children:o,className:s=``,title:u,onClick:d,...f}=e,h=r?-1:0,g=l(null);c(t,()=>g.current);let _=e=>{e.key===` `&&(e.preventDefault(),e.stopPropagation())},v=e=>{e.preventDefault(),e.stopPropagation(),e.key===` `&&g.current?.click()};return m(`label`,{className:`react-paint-editor-button ${s}`,title:u,onClick:d,"data-disabled":+r,"data-selected":+i,"data-hidden":+n,tabIndex:h,onKeyDown:_,onKeyUp:v,children:[p(`input`,{ref:g,disabled:r,...f}),m(`span`,{className:`react-paint-editor-button-content`,children:[o&&p(`span`,{className:`react-paint-editor-button-children`,children:o}),a&&p(`span`,{className:`react-paint-editor-button-icon`,dangerouslySetInnerHTML:{__html:a}})]})]})}),E=a.forwardRef((e,t)=>{if(e.type===`file`||e.type===`color`)return p(T,{...e,ref:t});let{hidden:n=!1,disabled:r=!1,selected:i=!1,icon:a,children:o,type:s=`button`,className:c=``,...l}=e;return p(`button`,{className:`react-paint-editor-button ${c}`,ref:t,disabled:r,"data-disabled":+r,"data-selected":+i,"data-hidden":+n,type:s,...l,children:m(`span`,{className:`react-paint-editor-button-content`,children:[o&&p(`span`,{className:`react-paint-editor-button-children`,children:o}),a&&p(`span`,{className:`react-paint-editor-button-icon`,dangerouslySetInnerHTML:{__html:a}})]})})}),D=({children:e,title:t=``,className:n=``,position:r,fitContainer:i=!1,alignment:a,style:o,...s})=>m(`div`,{className:`react-paint-editor-panel ${n}`,"data-fitcontainer":i,"data-position":r??`unset`,"data-alignment":a??`unset`,style:{...o,"--react-paint-editor-panel-zindex":b.PANEL},...s,children:[t&&p(`h3`,{className:`react-paint-editor-panel-title`,children:t}),e]}),O=`<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>`,k=`<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>`,A=`<svg><path d="M5.333 9.292 10.021 1.646 14.708 9.292ZM14.562 18.333Q13 18.333 11.896 17.229Q10.792 16.125 10.792 14.562Q10.792 13 11.896 11.896Q13 10.792 14.562 10.792Q16.125 10.792 17.229 11.896Q18.333 13 18.333 14.562Q18.333 16.125 17.229 17.229Q16.125 18.333 14.562 18.333ZM2.5 17.917V11.188H9.229V17.917ZM14.562 16.583Q15.438 16.583 16.01 16.01Q16.583 15.438 16.583 14.562Q16.583 13.688 16.01 13.115Q15.438 12.542 14.562 12.542Q13.688 12.542 13.115 13.115Q12.542 13.688 12.542 14.562Q12.542 15.438 13.115 16.01Q13.688 16.583 14.562 16.583ZM4.25 16.167H7.479V12.938H4.25ZM8.458 7.542H11.583L10.021 5ZM10.021 7.542ZM7.479 12.938ZM14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Z"/></svg>`,j=`<svg><path d="M10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333ZM10 16.583Q12.75 16.583 14.667 14.667Q16.583 12.75 16.583 10Q16.583 7.25 14.667 5.333Q12.75 3.417 10 3.417Q7.25 3.417 5.333 5.333Q3.417 7.25 3.417 10Q3.417 12.75 5.333 14.667Q7.25 16.583 10 16.583ZM10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Z"/></svg>`,M=`<svg><path d="M12.25 18.333V16.167L6.833 13.458H2.5V8.208H6.25L8.25 5.917V1.667H13.5V6.917H9.708L7.75 9.146V11.958L12.25 14.208V13.083H17.5V18.333Z"/></svg>`,N=`<svg><path d="M4.125 5.083V3.333H7.062L7.896 2.5H12.104L12.938 3.333H15.875V5.083ZM6.75 17.5Q6.021 17.5 5.51 16.99Q5 16.479 5 15.75V5.958H15V15.75Q15 16.479 14.49 16.99Q13.979 17.5 13.25 17.5Z"/></svg>`,P=`<svg><path d="M11.708 15.833H5.854V14.083H11.708Q13 14.083 13.958 13.292Q14.917 12.5 14.917 11.271Q14.917 10.042 13.958 9.24Q13 8.438 11.708 8.438H6.667L8.792 10.562L7.562 11.792L3.333 7.562L7.562 3.333L8.792 4.562L6.667 6.688H11.708Q13.729 6.688 15.198 7.99Q16.667 9.292 16.667 11.25Q16.667 13.208 15.198 14.521Q13.729 15.833 11.708 15.833Z"/></svg>`,F=`<svg><path d="M8.292 15.833Q6.271 15.833 4.802 14.521Q3.333 13.208 3.333 11.25Q3.333 9.292 4.802 7.99Q6.271 6.688 8.292 6.688H13.333L11.208 4.562L12.438 3.333L16.667 7.562L12.438 11.792L11.208 10.562L13.333 8.438H8.292Q7 8.438 6.042 9.229Q5.083 10.021 5.083 11.25Q5.083 12.5 6.042 13.292Q7 14.083 8.292 14.083H14.146V15.833Z"/></svg>`,I=`<svg><path d="M10 17.646 2.438 11.75 3.875 10.646 10 15.396 16.125 10.646 17.562 11.75ZM10 13.188 2.5 7.354 10 1.521 17.5 7.354Z"/></svg>`,L=`<svg><path d="M7.854 13.812 10 11.688 12.125 13.812 13.354 12.604 11.208 10.458 13.354 8.312 12.125 7.104 10 9.229 7.854 7.104 6.625 8.312 8.771 10.458 6.625 12.604ZM5.896 17.5Q5.167 17.5 4.656 16.99Q4.146 16.479 4.146 15.75V5.125H3.333V3.375H7.542V2.5H12.458V3.375H16.667V5.125H15.833V15.75Q15.833 16.479 15.323 16.99Q14.812 17.5 14.083 17.5Z"/></svg>`,R=`<svg><path d="M17.5 5.833V15.75Q17.5 16.479 16.99 16.99Q16.479 17.5 15.75 17.5H4.25Q3.521 17.5 3.01 16.99Q2.5 16.479 2.5 15.75V4.25Q2.5 3.521 3.01 3.01Q3.521 2.5 4.25 2.5H14.167ZM10 14.917Q11.062 14.917 11.823 14.156Q12.583 13.396 12.583 12.333Q12.583 11.271 11.823 10.51Q11.062 9.75 10 9.75Q8.938 9.75 8.177 10.51Q7.417 11.271 7.417 12.333Q7.417 13.396 8.177 14.156Q8.938 14.917 10 14.917ZM5.021 8.396H12.521V5.021H5.021Z"/></svg>`,z=`<svg><path d="M10 13.271 5.708 8.979 6.958 7.729 9.125 9.896V3.333H10.875V9.896L13.042 7.729L14.292 8.979ZM5.083 16.667Q4.354 16.667 3.844 16.156Q3.333 15.646 3.333 14.917V12.5H5.083V14.917Q5.083 14.917 5.083 14.917Q5.083 14.917 5.083 14.917H14.917Q14.917 14.917 14.917 14.917Q14.917 14.917 14.917 14.917V12.5H16.667V14.917Q16.667 15.646 16.156 16.156Q15.646 16.667 14.917 16.667Z"/></svg>`,B=`<svg><path d="M3.417 16.667Q2.729 16.667 2.198 16.135Q1.667 15.604 1.667 14.917V5.083Q1.667 4.396 2.198 3.865Q2.729 3.333 3.417 3.333H8.25L9.917 5H16.667Q17.354 5 17.844 5.531Q18.333 6.062 18.333 6.75H3.417V14.917Q3.417 14.917 3.417 14.917Q3.417 14.917 3.417 14.917L5.438 8.5H19.583L17.396 15.479Q17.229 16.021 16.802 16.344Q16.375 16.667 15.833 16.667Z"/></svg>`,V=`<svg><path d="M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z"/></svg>`,ee=`<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>`,te=`<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>`,ne=`<svg><path d="M8.0145 11.1707C8.38484 10.9914 8.82183 11.1558 8.99959 11.5295L10.7031 15.2591L12.0363 14.6238L10.3254 10.9017C10.1476 10.528 10.3106 10.0795 10.6809 9.90761L10.8883 9.84782L12.5918 9.51148L6.48133 4.33192V12.389L7.82934 11.2903L8.0145 11.1707ZM10.6587 16.9258C10.2883 17.1052 9.84395 16.9482 9.67359 16.5745L8.05894 13.0318L6.19988 14.5416C6.07396 14.6462 5.91842 14.706 5.74066 14.706C5.54423 14.706 5.35584 14.6272 5.21694 14.4871C5.07803 14.3469 5 14.1568 5 13.9586V2.74741C5 2.54919 5.07803 2.35908 5.21694 2.21891C5.35584 2.07874 5.54423 2 5.74066 2C5.91842 2 6.08878 2.06727 6.21469 2.1719L6.2221 2.16443L14.7323 9.36947C15.0508 9.63854 15.0879 10.1094 14.8286 10.4233C14.7175 10.5579 14.562 10.6475 14.4064 10.6774L12.0659 11.1408L13.6954 14.6761C13.888 15.0498 13.7102 15.4908 13.3399 15.6627L10.6587 16.9258Z"/></svg>`,re=`<svg viewBox="0 -960 960 960"><path d="M412-48q-21.95 0-40.98-9Q352-66 338-83L48-434l27-28q17-17 41.5-20.5T162-473l126 74v-381q0-15.3 10.29-25.65Q308.58-816 323.79-816t25.71 10.35Q360-795.3 360-780v300h80v-396q0-15.3 10.29-25.65Q460.58-912 475.79-912t25.71 10.35Q512-891.3 512-876v396h80v-348q0-15.3 10.29-25.65Q612.58-864 627.79-864t25.71 10.35Q664-843.3 664-828v348h80v-252q0-15.3 10.29-25.65Q764.58-768 779.79-768t25.71 10.35Q816-747.3 816-732v540q0 60-42 102T672-48H412Z"/></svg>`,ie=`<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>`,ae=`<svg><path d="M10 13.354Q11.583 13.354 12.688 12.25Q13.792 11.146 13.792 9.562Q13.792 7.979 12.688 6.875Q11.583 5.771 10 5.771Q8.417 5.771 7.312 6.875Q6.208 7.979 6.208 9.562Q6.208 11.146 7.312 12.25Q8.417 13.354 10 13.354ZM10 11.812Q9.062 11.812 8.406 11.156Q7.75 10.5 7.75 9.562Q7.75 8.625 8.406 7.969Q9.062 7.312 10 7.312Q10.938 7.312 11.594 7.969Q12.25 8.625 12.25 9.562Q12.25 10.5 11.594 11.156Q10.938 11.812 10 11.812ZM10 15.833Q6.938 15.833 4.448 14.125Q1.958 12.417 0.833 9.562Q1.958 6.708 4.458 5.021Q6.958 3.333 10 3.333Q13.042 3.333 15.542 5.021Q18.042 6.708 19.167 9.562Q18.042 12.417 15.552 14.125Q13.062 15.833 10 15.833ZM10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562ZM10 14.083Q12.333 14.083 14.281 12.865Q16.229 11.646 17.25 9.562Q16.229 7.479 14.281 6.281Q12.333 5.083 10 5.083Q7.667 5.083 5.708 6.281Q3.75 7.479 2.729 9.562Q3.75 11.646 5.708 12.865Q7.667 14.083 10 14.083Z"/></svg>`,oe=`<svg><path d="M13.521 11.021 12.25 9.75Q12.333 8.75 11.604 7.979Q10.875 7.208 9.812 7.312L8.542 6.042Q8.896 5.896 9.26 5.833Q9.625 5.771 10 5.771Q11.583 5.771 12.688 6.875Q13.792 7.979 13.792 9.562Q13.792 9.979 13.719 10.354Q13.646 10.729 13.521 11.021ZM16.167 13.646 14.917 12.417Q15.667 11.833 16.25 11.146Q16.833 10.458 17.25 9.562Q16.229 7.479 14.292 6.281Q12.354 5.083 10 5.083Q9.396 5.083 8.885 5.156Q8.375 5.229 7.875 5.375L6.5 4Q7.354 3.646 8.208 3.49Q9.062 3.333 10 3.333Q13.146 3.333 15.615 5.052Q18.083 6.771 19.167 9.562Q18.688 10.792 17.917 11.823Q17.146 12.854 16.167 13.646ZM16.396 18.854 12.938 15.396Q12.208 15.625 11.479 15.729Q10.75 15.833 10 15.833Q6.833 15.833 4.375 14.094Q1.917 12.354 0.833 9.562Q1.25 8.479 1.917 7.552Q2.583 6.625 3.417 5.875L1.125 3.562L2.375 2.354L17.625 17.625ZM4.604 7.062Q4.021 7.604 3.542 8.219Q3.062 8.833 2.729 9.562Q3.75 11.646 5.688 12.865Q7.625 14.083 10 14.083Q10.354 14.083 10.74 14.052Q11.125 14.021 11.479 13.938L10.812 13.271Q10.625 13.312 10.417 13.333Q10.208 13.354 10 13.354Q8.417 13.354 7.312 12.25Q6.208 11.146 6.208 9.562Q6.208 9.354 6.24 9.167Q6.271 8.979 6.312 8.771ZM11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875ZM8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Z"/></svg>`,se=`<svg><path d="M10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H5.792V5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833ZM10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042V6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>`,ce=`<svg><path d="M5.792 5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>`,le=`<svg><path d="M18.333 15.854 16.583 14.104V13.354H15.833L14.083 11.604H16.583V8.375H13.375V10.896L11.625 9.146V8.375H10.875L9.125 6.625H11.625V3.417H8.396V5.896L6.646 4.146V3.417H5.896L4.146 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417ZM13.375 6.625H16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H13.375ZM16.771 19.229 15.854 18.333H3.417Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V4.125L0.812 3.271L2.042 2.021L18 18ZM13.375 16.583H14.104L13.375 15.833ZM8.396 11.604H9.125L8.396 10.854ZM8.396 16.583H11.625V14.083L10.875 13.354H8.396ZM3.417 6.625H4.167L3.417 5.875ZM3.417 11.604H6.646V9.104L5.917 8.375H3.417ZM6.646 16.583V13.354H3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Z"/></svg>`,ue=`<svg><path d="M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z"/></svg>`,de=`<svg><path d="M3 16V14.5H4.5V16ZM6.125 16V14.5H7.625V16ZM9.25 16V14.5H10.75V16ZM12.375 16V14.5H13.875V16ZM15.5 16V14.5H17V16ZM3 13V11.5H6.5V13ZM8.25 13V11.5H11.75V13ZM13.5 13V11.5H17V13ZM3 10V8.5H9.25V10ZM10.75 10V8.5H17V10ZM3 7V4H17V7Z"/></svg>`,H=`<svg><path d="M5.312 14.979H7.125L8.042 12.479H11.979L12.896 14.979H14.708L10.917 5H9.083ZM8.542 10.958 9.958 6.958H10.042L11.458 10.958ZM3.417 18.333Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V3.417Q1.667 2.688 2.177 2.177Q2.688 1.667 3.417 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417V16.583Q18.333 17.312 17.823 17.823Q17.312 18.333 16.583 18.333ZM3.417 16.583H16.583Q16.583 16.583 16.583 16.583Q16.583 16.583 16.583 16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583ZM3.417 3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583V3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417Z"/></svg>`,fe=`<svg><path d="M6 17 2 13 6 9 7.062 10.062 4.875 12.25H17V13.75H4.875L7.062 15.938ZM14 11 12.938 9.938 15.125 7.75H3V6.25H15.125L12.938 4.062L14 3L18 7Z"/></svg>`,pe=`<svg><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM10 16.583Q10.896 16.583 11.708 16.365Q12.521 16.146 13.25 15.729L4.292 6.75Q3.875 7.479 3.646 8.292Q3.417 9.104 3.417 10Q3.417 12.729 5.344 14.656Q7.271 16.583 10 16.583ZM17 14.562 15.708 13.271Q16.125 12.542 16.354 11.719Q16.583 10.896 16.583 10Q16.583 7.271 14.656 5.344Q12.729 3.417 10 3.417Q9.104 3.417 8.292 3.646Q7.479 3.875 6.75 4.292L5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562ZM11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771ZM8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Z"/></svg>`,me=`<svg><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM17 14.562 5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562Z"/></svg>`,he=`<svg viewBox="0 -960 960 960" width="24px"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>`,ge=`<svg><path d="M3.333 17.5V16.667H7.5V17.5ZM3.333 14.167V13.333H9.167V14.167ZM3.333 10.833V10H10.833V10.833ZM3.333 7.5V6.667H12.5V7.5ZM3.333 4.167V3.333H13.333V4.167ZM3.333 0.833V0H16.667V0.833Z"/></svg>`,_e=({disabled:e=!1,ref:t,shape:n,layoutDragging:r,setLayoutDragging:i,handleSelect:a,onSwapShapes:o})=>{let[c,l]=u(!1);return s(()=>{r||l(!1)},[r]),s(()=>{let s=t.current;if(!s)return;let c=()=>{i(void 0)},u=e=>(e.preventDefault&&e.preventDefault(),!1),d=e=>{a([n]),e.dataTransfer&&(e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`draggableShapeId`,n.id),i(n.id))},f=()=>{r!==n.id&&l(!0)},p=()=>{l(!1)},m=e=>(e.stopPropagation(),e.dataTransfer&&o(e.dataTransfer.getData(`draggableShapeId`),n.id),!1);return e||(s.addEventListener(`dragstart`,d),s.addEventListener(`dragend`,c),s.addEventListener(`dragover`,u),s.addEventListener(`dragenter`,f),s.addEventListener(`dragleave`,p),s.addEventListener(`drop`,m)),()=>{e||(s.removeEventListener(`dragstart`,d),s.removeEventListener(`dragend`,c),s.removeEventListener(`dragover`,u),s.removeEventListener(`dragenter`,f),s.removeEventListener(`dragleave`,p),s.removeEventListener(`drop`,m))}},[e,t,n,i,a,o,r]),{isOver:c}},ve=e=>{switch(e){case`brush`:return O;case`line`:return te;case`polygon`:return M;case`curve`:return ue;case`rect`:return k;case`square`:return k;case`circle`:return j;case`ellipse`:return j;case`text`:return ee;case`picture`:return V;case`group`:return ge;case`triangle`:return``}},ye=({disabled:e=!1,shape:t,selected:n,layoutDragging:r,toggleShapeVisibility:i,toggleShapeLock:a,setLayoutDragging:o,handleRemove:s,handleSelect:c,onSwapShapes:u})=>{let d=l(null),f=n=>{e||(n.preventDefault(),n.stopPropagation(),s([t]))},h=n=>{e||(n.preventDefault(),c([t]))},g=n=>{e||(n.preventDefault(),n.stopPropagation(),i([t]))},_=n=>{e||(n.preventDefault(),n.stopPropagation(),a([t]))},{isOver:v}=_e({disabled:e,ref:d,shape:t,layoutDragging:r,setLayoutDragging:o,handleSelect:c,onSwapShapes:u});return m(`div`,{className:`react-paint-editor-layout`,"data-disabled":+e,draggable:!e,"data-is-dragging":+(r===t.id),"data-is-over":+v,onClick:h,"data-selected":+n,ref:d,tabIndex:-1,children:[p(`span`,{dangerouslySetInnerHTML:{__html:ve(t.type)}}),p(`span`,{children:t.id}),p(`div`,{className:`react-paint-editor-layouts-separator`}),p(E,{className:`react-paint-editor-layouts-visible-button`,title:t.visible?`Hide`:`Show`,"data-visible":t.visible!==!1,disabled:e,selected:n,onClick:g,icon:t.visible===!1?oe:ae}),p(E,{className:`react-paint-editor-layouts-locked-button`,title:t.locked?`Locked`:`Unlocked`,"data-locked":!!t.locked,disabled:e,selected:n,onClick:_,icon:t.locked?se:ce}),p(E,{className:`react-paint-editor-layouts-remove-button`,title:`Remove`,disabled:e,onClick:f,icon:N})]})},be=({gridFormat:e,setGridFormat:t,settings:n,shapes:i,removeShape:a,toggleShapeVisibility:o,toggleShapeLock:s,selectedShapes:c,swapShapes:l,selectShapes:d,isLayoutPanelShown:f})=>{let[h,g]=u(void 0),_=!n.features.edition;return f?p(D,{alignment:`right`,className:`react-paint-editor-layouts-panel`,position:`bottom`,children:p(`div`,{className:`react-paint-editor-layouts-panel-content`,children:m(`div`,{className:`react-paint-editor-layouts-scrolling-content`,children:[m(`div`,{className:`react-paint-editor-layouts-row`,children:[p(`span`,{className:`react-paint-editor-layouts-subtitle`,children:`Grid`}),p(E,{icon:le,className:`react-paint-editor-layouts-grid-button`,selected:e===`none`,disabled:_,onClick:()=>t(`none`)}),[`small`,`medium`,`large`].map(n=>p(E,{className:`react-paint-editor-layouts-grid-button`,selected:e===n,disabled:_,onClick:()=>t(n),children:n.charAt(0).toUpperCase()},n))]}),p(`hr`,{}),p(`div`,{className:`react-paint-editor-layouts`,children:i.length===0?p(`div`,{className:`react-paint-editor-layouts-placeholder`,children:`No layer yet`}):i.map(e=>p(ye,{shape:e,disabled:_,layoutDragging:h,setLayoutDragging:g,selected:r(c).some(t=>t.id===e.id)??!1,handleSelect:d,handleRemove:a,onSwapShapes:l,toggleShapeVisibility:o,toggleShapeLock:s},e.id))})]})})}):null},xe=({children:e,onClose:t,position:n=`center`,title:r,className:i=``})=>m(`div`,{className:`react-paint-editor-modal`,"data-position":n,style:{"--react-paint-editor-modal-zindex":b.PANEL},role:`dialog`,"aria-modal":`true`,"aria-labelledby":r,children:[p(`div`,{className:`react-paint-editor-modal-mask`,onClick:t}),p(`div`,{className:`react-paint-editor-modal-panel ${i}`,children:e})]}),U=({selectedSettings:e,setSelectedSettings:n,title:r=`Choisissez une couleur`,mode:i=`fill`,disabled:a=!1,values:o,field:s,value:c=``,valueChanged:l})=>{let[d]=u(t(`settings_`)),h=e=>{let t=+e.target.value;l(s,Number.isNaN(t)?e.target.value:t)},g=e=>{l(s,e)},_=()=>{n(e=>e===d?void 0:d)},v=e===d;return o.length?m(f,{children:[p(E,{selected:v,title:r,disabled:a,onClick:_,icon:c===`transparent`?i===`fill`?me:pe:void 0,children:c!==`transparent`&&p(`div`,{className:`react-paint-editor-colorfield-color`,"data-mode":i,style:{"--react-paint-editor-colorfield-color-value":c}})}),v&&p(D,{title:r,alignment:`left`,position:`bottom`,children:m(`div`,{className:`react-paint-editor-colorfield-wrapper`,children:[o.map(e=>p(E,{title:e,selected:e===c,color:e,icon:e===`transparent`?i===`fill`?`<svg><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM17 14.562 5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562Z"/></svg>`:`<svg><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM10 16.583Q10.896 16.583 11.708 16.365Q12.521 16.146 13.25 15.729L4.292 6.75Q3.875 7.479 3.646 8.292Q3.417 9.104 3.417 10Q3.417 12.729 5.344 14.656Q7.271 16.583 10 16.583ZM17 14.562 15.708 13.271Q16.125 12.542 16.354 11.719Q16.583 10.896 16.583 10Q16.583 7.271 14.656 5.344Q12.729 3.417 10 3.417Q9.104 3.417 8.292 3.646Q7.479 3.875 6.75 4.292L5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562ZM11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771ZM8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Z"/></svg>`:void 0,onClick:()=>g(e),children:e!==`transparent`&&p(`div`,{className:`react-paint-editor-colorfield-color`,color:e,"data-mode":i,style:{"--react-paint-editor-colorfield-color-value":e}})},e)),p(E,{type:`color`,title:`Custom color`,selected:c!==``&&!o.includes(c),value:c,onChange:h,children:p(`div`,{className:`react-paint-editor-colorfield-customcolor`,style:{"--react-paint-editor-colorfield-color-value":o.includes(c)?`var(--react-paint-editor-app-font-color)`:c},children:p(`span`,{dangerouslySetInnerHTML:{__html:`<svg><path d="M9.958 18.333Q8.25 18.333 6.74 17.677Q5.229 17.021 4.104 15.885Q2.979 14.75 2.323 13.229Q1.667 11.708 1.667 10Q1.667 8.271 2.333 6.75Q3 5.229 4.156 4.104Q5.312 2.979 6.854 2.323Q8.396 1.667 10.125 1.667Q11.771 1.667 13.26 2.25Q14.75 2.833 15.875 3.854Q17 4.875 17.667 6.26Q18.333 7.646 18.333 9.25Q18.333 11.688 16.792 12.948Q15.25 14.208 13.188 14.208H11.75Q11.625 14.208 11.562 14.281Q11.5 14.354 11.5 14.458Q11.5 14.688 11.812 15.219Q12.125 15.75 12.125 16.458Q12.125 17.458 11.51 17.896Q10.896 18.333 9.958 18.333ZM5.458 10.875Q6 10.875 6.375 10.5Q6.75 10.125 6.75 9.583Q6.75 9.042 6.375 8.667Q6 8.292 5.458 8.292Q4.917 8.292 4.542 8.667Q4.167 9.042 4.167 9.583Q4.167 10.125 4.542 10.5Q4.917 10.875 5.458 10.875ZM7.917 7.583Q8.458 7.583 8.833 7.208Q9.208 6.833 9.208 6.292Q9.208 5.75 8.833 5.375Q8.458 5 7.917 5Q7.375 5 7 5.375Q6.625 5.75 6.625 6.292Q6.625 6.833 7 7.208Q7.375 7.583 7.917 7.583ZM12.021 7.583Q12.562 7.583 12.938 7.208Q13.312 6.833 13.312 6.292Q13.312 5.75 12.938 5.375Q12.562 5 12.021 5Q11.479 5 11.104 5.375Q10.729 5.75 10.729 6.292Q10.729 6.833 11.104 7.208Q11.479 7.583 12.021 7.583ZM14.479 10.875Q15.021 10.875 15.396 10.5Q15.771 10.125 15.771 9.583Q15.771 9.042 15.396 8.667Q15.021 8.292 14.479 8.292Q13.938 8.292 13.562 8.667Q13.188 9.042 13.188 9.583Q13.188 10.125 13.562 10.5Q13.938 10.875 14.479 10.875Z"/></svg>`}})})})]})})]}):null},Se=({disabled:e=!1,selectedShape:t,removeShape:n})=>{let i=()=>{n(r(t))};return p(E,{title:`Delete`,disabled:e,"data-disabled":+e,onClick:i,icon:N})},W=({CustomOption:e,selectedSettings:n,setSelectedSettings:r,title:i=`Choisissez l'option`,disabled:a=!1,field:o,icon:s,values:c,defaultValue:l,valueChanged:d})=>{let[h]=u(t(`settings_`)),g=e=>{d(o,e)},_=()=>{r(e=>e===h?void 0:h)},v=n===h;return c.length?m(f,{children:[p(E,{selected:v,title:i,icon:s,disabled:a,onClick:_}),v&&p(D,{title:i,alignment:`left`,fitContainer:!0,position:`bottom`,children:p(`div`,{className:`react-paint-editor-selectfield-wrapper`,children:c.map(t=>p(E,{title:`${t}`,onClick:()=>g(t),selected:l===t,style:{"--react-paint-editor-button-padding":`16px`},children:p(e,{children:t})},t))})})]}):null},Ce=({children:e})=>p(`span`,{className:`react-paint-editor-fontfamily-option`,style:{"--react-paint-editor-fontfamily-family":e},children:e}),we=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:r,defaultValue:i,valueChanged:a})=>r.length?p(W,{selectedSettings:e,setSelectedSettings:t,CustomOption:Ce,title:`Police`,icon:H,disabled:n,field:`fontFamily`,values:r,defaultValue:i,valueChanged:a}):null,Te=({disabled:e,toggleLayoutPanel:t})=>p(E,{title:`Toggle layers panel`,disabled:e,onClick:t,icon:I,className:`react-paint-editor-layout-button`}),Ee=({children:e})=>m(`span`,{className:`react-paint-editor-linearrow-option`,"data-type":e,children:[p(`span`,{className:`react-paint-editor-linearrow-left`}),p(`span`,{className:`react-paint-editor-linearrow-right`})]}),De=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:r,defaultValue:i,valueChanged:a})=>r.length?p(W,{selectedSettings:e,setSelectedSettings:t,CustomOption:Ee,title:`Flèches`,icon:fe,disabled:n,field:`lineArrow`,values:r,defaultValue:i,valueChanged:a}):null,Oe=({children:e})=>m(`span`,{className:`react-paint-editor-linetype-option`,"data-type":e,children:[p(`span`,{}),p(`span`,{}),p(`span`,{}),p(`span`,{}),p(`span`,{}),p(`span`,{}),p(`span`,{})]}),ke=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:r,defaultValue:i,valueChanged:a})=>r.length?p(W,{selectedSettings:e,setSelectedSettings:t,CustomOption:Oe,icon:de,title:`Type de traits`,disabled:n,field:`lineDash`,values:r,defaultValue:i,valueChanged:a}):null,Ae=(e,t=500)=>{let n=l(null),r=o((...r)=>{n.current&&clearTimeout(n.current),n.current=setTimeout(()=>e(...r),t)},[e,t]);return s(()=>()=>{n.current&&clearTimeout(n.current)},[]),r},G=({selectedSettings:e,setSelectedSettings:n,title:r=`Choisissez l'intervalle`,icon:i,disabled:a=!1,field:o,value:s,min:c=1,max:l=20,step:d=1,unity:h=``,valueChanged:g,saveShapes:_})=>{let v=s===void 0,y=v?`N/A`:`${Math.round(s)}${h}`,[b]=u(t(`settings_`)),x=Ae(_),S=e=>{let t=+e.target.value;g(o,Number.isNaN(t)?e.target.value:t,!1),x()},C=()=>{n(e=>e===b?void 0:b)},w=e===b;return c===l?null:m(f,{children:[p(E,{selected:w,title:r,disabled:a,icon:i,onClick:C}),w&&p(D,{title:r,alignment:`left`,fitContainer:!0,position:`bottom`,children:p(`div`,{children:m(`label`,{className:`react-paint-editor-rangefield`,children:[p(`input`,{type:`range`,min:c,max:l,step:d,value:s??(l+c)/2,"data-indeterminate":+v,onChange:S}),p(`span`,{children:y})]})})})]})},je=({children:e})=>p(`span`,{children:e===0?`Non`:`Oui`}),Me=[0,1],Ne=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,defaultValue:r,valueChanged:i})=>p(W,{selectedSettings:e,setSelectedSettings:t,CustomOption:je,title:`Fermer les points`,icon:M,disabled:n,field:`closedPoints`,values:Me,defaultValue:r,valueChanged:i}),Pe=({disabled:e=!1,className:t,toggleZoomPanel:n})=>p(E,{title:`Toggle zoom panel`,disabled:e,onClick:n,icon:he,className:`${t?` ${t}`:``}`}),K=({setSelectedSettings:e,disabled:n=!1,field:r,icon:i,values:a,value:o=!1,valueChanged:s})=>{let[c]=u(t(`settings_`));return a.length===2?p(E,{onClick:()=>{e(e=>e===c?void 0:c),s(r,!o)},selected:o,disabled:n,icon:i}):null},q=40,Fe=({activeTool:e,selectedShape:t,selectedShapeTool:n,disabled:r,selectedSettings:i,setSelectedSettings:a,saveShapes:o,handleShapeStyleChange:s,handleShapeFontFamilyChange:c})=>t?n&&m(f,{children:[`strokeColor`in n.settings&&!n.settings.strokeColor.hidden&&p(U,{selectedSettings:i,setSelectedSettings:a,title:`Couleur du trait`,mode:`stroke`,disabled:r,field:`strokeColor`,value:t.style?.strokeColor,valueChanged:s,values:n.settings.strokeColor.values}),`fillColor`in n.settings&&!n.settings.fillColor.hidden&&p(U,{selectedSettings:i,setSelectedSettings:a,title:`Couleur de fond`,disabled:r,field:`fillColor`,value:t.style?.fillColor,valueChanged:s,values:n.settings.fillColor.values}),`lineWidth`in n.settings&&!n.settings.lineWidth.hidden&&p(G,{saveShapes:o,selectedSettings:i,setSelectedSettings:a,title:`Epaisseur du trait`,icon:`<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>`,disabled:r,field:`lineWidth`,value:t.style?.lineWidth,valueChanged:s,unity:`px`,min:n.settings.lineWidth.min,max:n.settings.lineWidth.max,step:n.settings.lineWidth.step}),`lineDash`in n.settings&&!n.settings.lineDash.hidden&&p(ke,{selectedSettings:i,setSelectedSettings:a,disabled:r,defaultValue:t.style?.lineDash,valueChanged:s,values:n.settings.lineDash.values}),`lineArrow`in n.settings&&!n.settings.lineArrow.hidden&&p(De,{selectedSettings:i,setSelectedSettings:a,disabled:r,defaultValue:t.style?.lineArrow,valueChanged:s,values:n.settings.lineArrow.values}),`closedPoints`in n.settings&&!n.settings.closedPoints.hidden&&p(Ne,{selectedSettings:i,setSelectedSettings:a,disabled:r,valueChanged:s,defaultValue:t.style?.closedPoints}),`fontFamily`in n.settings&&!n.settings.fontFamily.hidden&&p(we,{selectedSettings:i,setSelectedSettings:a,disabled:r,valueChanged:c,values:n.settings.fontFamily.values,defaultValue:t.style?.fontFamily}),`fontBold`in n.settings&&!n.settings.fontBold.hidden&&p(K,{setSelectedSettings:a,disabled:r,field:`fontBold`,icon:`<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>`,valueChanged:c,values:n.settings.fontBold.values,value:t.style?.fontBold}),`fontItalic`in n.settings&&!n.settings.fontItalic.hidden&&p(K,{setSelectedSettings:a,disabled:r,field:`fontItalic`,icon:`<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>`,valueChanged:c,values:n.settings.fontItalic.values,value:t.style?.fontItalic}),`opacity`in n.settings&&!n.settings.opacity.hidden&&p(G,{saveShapes:o,selectedSettings:i,setSelectedSettings:a,title:`Opacité`,icon:`<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>`,min:n.settings.opacity.min,max:n.settings.opacity.max,step:n.settings.opacity.step,unity:`%`,disabled:r,field:`opacity`,value:t.style?.opacity,valueChanged:s})]}):`settings`in e?m(f,{children:[`strokeColor`in e.settings&&!e.settings.strokeColor.hidden&&p(U,{selectedSettings:i,setSelectedSettings:a,title:`Couleur du trait`,mode:`stroke`,disabled:r,field:`strokeColor`,value:e.settings.strokeColor.default,valueChanged:s,values:e.settings.strokeColor.values}),`fillColor`in e.settings&&!e.settings.fillColor.hidden&&p(U,{selectedSettings:i,setSelectedSettings:a,title:`Couleur de fond`,disabled:r,field:`fillColor`,value:e.settings.fillColor.default,valueChanged:s,values:e.settings.fillColor.values}),`lineWidth`in e.settings&&!e.settings.lineWidth.hidden&&p(G,{saveShapes:o,selectedSettings:i,setSelectedSettings:a,title:`Epaisseur du trait`,disabled:r,field:`lineWidth`,icon:`<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>`,value:e.settings.lineWidth.default,valueChanged:s,unity:`px`,min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),`lineDash`in e.settings&&!e.settings.lineDash.hidden&&p(ke,{selectedSettings:i,setSelectedSettings:a,disabled:r,defaultValue:e.settings.lineDash.default,valueChanged:s,values:e.settings.lineDash.values}),`lineArrow`in e.settings&&!e.settings.lineArrow.hidden&&p(De,{selectedSettings:i,setSelectedSettings:a,disabled:r,defaultValue:e.settings.lineArrow.default,valueChanged:s,values:e.settings.lineArrow.values}),`closedPoints`in e.settings&&!e.settings.closedPoints.hidden&&p(Ne,{selectedSettings:i,setSelectedSettings:a,disabled:r,valueChanged:s,defaultValue:e.settings?.closedPoints.default}),`fontFamily`in e.settings&&!e.settings.fontFamily.hidden&&p(we,{selectedSettings:i,setSelectedSettings:a,disabled:r,valueChanged:c,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),`fontBold`in e.settings&&!e.settings.fontBold.hidden&&p(K,{setSelectedSettings:a,disabled:r,field:`fontBold`,icon:`<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>`,valueChanged:c,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),`fontItalic`in e.settings&&!e.settings.fontItalic.hidden&&p(K,{setSelectedSettings:a,disabled:r,field:`fontItalic`,icon:`<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>`,valueChanged:c,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),`opacity`in e.settings&&!e.settings.opacity.hidden&&p(G,{saveShapes:o,selectedSettings:i,setSelectedSettings:a,title:`Opacité`,icon:`<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>`,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:`%`,disabled:r,field:`opacity`,value:e.settings.opacity.default,valueChanged:s})]}):null,Ie=({width:t,availableTools:i,updateToolSettings:a,layersManipulation:o=!1,toggleLayoutPanel:s,activeTool:c,saveShapes:l,selectedShape:d,canvas:h,settings:g,updateShape:_,removeShape:v,isZoomPanelShown:y,setIsZoomPanelShown:b,refreshShape:x,calculateTextFontSize:S})=>{let[C,w]=u(void 0),[T,D]=u(!1),O=g.size===`infinite`||g.features.zoom,k=!g.features.edition,A=()=>{D(e=>!e)},j=()=>{b(e=>!e)},M=e(d,i),N=(M?Object.keys(M.settings).length+1:`settings`in c?Object.keys(c.settings).length:0)+ +o+ +O,P=t<N*q,F=(e,t,i=!0)=>{r(d).length?(_(r(d).map(r=>x(n([`style`,e],t,r))),i),M&&a(M.id,e,t)):a(c.id,e,t)},I=(e,t)=>{r(d).length?(_(r(d).map(r=>{if(r.type!==`text`)return r;let i=h?.getContext(`2d`);if(!i)return r;let a=n([`style`,e],t,r),o=S(i,a.value,a.width,a.style?.fontBold??!1,a.style?.fontItalic??!1,a.style?.fontFamily);return x({...a,fontSize:o,height:o*a.value.length})}),!0),M&&a(M.id,e,t)):a(c.id,e,t)};return m(f,{children:[m(`div`,{className:`react-paint-editor-settings-bar`,children:[m(`div`,{className:`react-paint-editor-settings-shrinkable`,children:[O&&p(Pe,{className:y?`react-paint-editor-bar-zoom-button-opened`:void 0,toggleZoomPanel:j}),P&&N>2&&p(E,{disabled:k,onClick:A,title:`Toggle settings`,icon:`<svg><path d="M2.5 15.833V14.083H7.667V15.833ZM2.5 5.917V4.167H10.771V5.917ZM9.208 17.5V12.438H10.958V14.083H17.5V15.833H10.958V17.5ZM5.917 12.542V10.875H2.5V9.125H5.917V7.479H7.667V12.542ZM9.208 10.875V9.125H17.5V10.875ZM12.333 7.562V2.5H14.083V4.167H17.5V5.917H14.083V7.562Z"/></svg>`}),d?M&&m(f,{children:[!P&&p(Fe,{saveShapes:l,activeTool:c,selectedShape:d,selectedShapeTool:M,disabled:k,selectedSettings:C,setSelectedSettings:w,handleShapeStyleChange:F,handleShapeFontFamilyChange:I}),c.type===`selection`&&p(Se,{disabled:k,selectedShape:d,removeShape:v})]}):!P&&p(Fe,{saveShapes:l,activeTool:c,selectedShape:d,selectedShapeTool:M,disabled:k,selectedSettings:C,setSelectedSettings:w,handleShapeStyleChange:F,handleShapeFontFamilyChange:I})]}),p(`div`,{className:`react-paint-editor-settings-separator`}),o&&p(Te,{disabled:k,toggleLayoutPanel:s})]}),T&&p(xe,{className:`react-paint-editor-settings-modal`,onClose:A,position:`bottom`,title:`Settings`,children:p(Fe,{saveShapes:l,activeTool:c,selectedShape:d,selectedShapeTool:M,disabled:k,selectedSettings:C,setSelectedSettings:w,handleShapeStyleChange:F,handleShapeFontFamilyChange:I})})]})},J=`react-paint-`,Le={strokeColor:{values:h,default:`black`},fillColor:{values:h,default:`transparent`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:g,default:0}},Re={strokeColor:{values:h,default:`black`},fillColor:{values:h,default:`transparent`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:g,default:0}},ze={strokeColor:{values:h,default:`black`},fillColor:{values:h,default:`transparent`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:g,default:0}},Be={strokeColor:{values:h,default:`black`},fillColor:{values:h,default:`transparent`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:g,default:0}},Ve={opacity:{min:0,max:100,step:1,default:100}},He={strokeColor:{values:h,default:`black`},opacity:{min:0,max:100,step:1,default:100},fontFamily:{values:v,default:y},fontBold:{values:[!1,!0],default:!1},fontItalic:{values:[!1,!0],default:!1}},Y={strokeColor:{values:h,default:`black`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:g,default:0}},Ue={strokeColor:{values:h,default:`black`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:g,default:0},lineArrow:{values:_,default:0}},We={strokeColor:{values:h,default:`black`},fillColor:{values:h,default:`transparent`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:g,default:0},closedPoints:{default:0}},Ge={strokeColor:{values:h,default:`black`},fillColor:{values:h,default:`transparent`},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:g,default:0},closedPoints:{default:0}},Ke={type:`picture`,id:`${J}picture`,icon:V,label:`Image`,settings:Ve},qe=[{type:`brush`,id:`${J}brush`,icon:O,label:`Brosse`,settings:Y},{type:`line`,id:`${J}line`,icon:te,label:`Ligne`,settings:Ue},{type:`polygon`,id:`${J}polygon`,icon:M,label:`Polygone`,settings:We},{type:`curve`,id:`${J}curve`,icon:ue,label:`Courbe`,settings:Ge},{type:`rect`,id:`${J}rect`,icon:k,label:`Rectangle`,settings:Le},{type:`square`,id:`${J}square`,icon:k,label:`Carré`,settings:Re},{type:`circle`,id:`${J}circle`,icon:j,label:`Cercle`,settings:ze},{type:`ellipse`,id:`${J}ellipse`,icon:j,label:`Ellipse`,settings:Be},Ke,{type:`text`,id:`${J}text`,icon:ee,label:`Texte`,settings:He}],Je={id:`${J}selection`,type:`selection`,icon:ne,label:`Sélection`},X={id:`${J}undo`,type:`undo`,icon:P,label:`Undo`},Z={id:`${J}redo`,type:`redo`,icon:F,label:`Redo`},Q={id:`${J}clear`,type:`clear`,icon:L,label:`Clear`},Ye={id:`${J}export`,type:`export`,icon:z,label:`Export PNG`},Xe={id:`${J}load`,type:`loadfile`,icon:B,label:`Load project`},Ze={id:`${J}save`,type:`savefile`,icon:R,label:`Save project`},Qe={id:`${J}move`,type:`move`,icon:re,label:`Move`},$e={id:`${J}upload-picture`,type:`uploadpicture`,icon:V,label:`Upload picture`};`${J}`;var et=(e,t)=>i(t.flatMap(t=>{if(typeof t!=`object`)return e.filter(e=>e.type===t);let n=e.filter(e=>t.toolsType.includes(e.type));return n?{...t,toolsType:n}:null})),tt=({alignment:e,children:t,className:n,style:r,position:i})=>p(D,{alignment:e,position:i,className:n,style:r,children:p(`div`,{className:`react-paint-editor-menu`,role:`menu`,children:t})}),nt=({disabled:e=!1,withText:t=!1,loadFile:n,type:r,img:i,accept:a})=>{let o=l(null);return p(E,{ref:o,type:`file`,onClick:()=>{o.current&&(o.current.value=``)},onChange:e=>{let t=e.target.files?.item(0);t&&n(t)},accept:a,title:r.label??r.type,icon:i,disabled:e,children:t?r.label:void 0})},rt=(e,t)=>!(e.target instanceof Node)||!t?!1:t.contains(e.target),it=({trigger:e=`click`,disabled:t=!1,buttonElt:n})=>{let[r,i]=u(!1),[,a]=d(),c=o(()=>{a(()=>{i(!1)})},[]);return s(()=>{if(!n||t)return;if(r){let t=e=>{rt(e,n)||a(()=>{i(!1)})},r=()=>{a(()=>{i(!1)})};return e===`hover`?(n.addEventListener(`mouseleave`,r),()=>{n.removeEventListener(`mouseleave`,r)}):(document.addEventListener(`click`,t),()=>{document.removeEventListener(`click`,t)})}let o=()=>{a(()=>{i(!0)})};return e===`hover`?(n.addEventListener(`mouseenter`,o),()=>{n.removeEventListener(`mouseenter`,o)}):(n.addEventListener(`click`,o),()=>{n.removeEventListener(`click`,o)})},[n,r,t,e]),{isOpen:r,trigger:e,closeMenu:c}},$=({type:e,img:t,isActive:n,withText:r=!1,disabled:i=!1,setActive:a})=>p(E,{disabled:i,selected:n,onClick:()=>{a(e)},title:e.label??e.type,icon:t,children:r?e.label:void 0}),at=({activeTool:e,withActionsInMenu:t,hasActionToUndo:n=!1,hasActionToRedo:r=!1,hasActionToClear:i=!1,undoAction:a,redoAction:o,clearCanvas:s,disabled:c=!1,withLoadAndSave:u,withExport:d,addPicture:h,loadFile:g,togglePictureUrlModal:_,saveFile:v,toggleExportModal:y,withUploadPicture:b,withUrlPicture:x})=>{let S=l(null),{isOpen:C,closeMenu:w}=it({buttonElt:S.current}),T=e=>async(...t)=>{await e(...t),w()};return t||b||x||u||d?p(`div`,{className:`react-paint-editor-toolbox-relative`,children:m(`div`,{ref:S,children:[p(E,{title:`Menu`,disabled:c,icon:ie}),C&&m(tt,{alignment:`right`,position:`top`,children:[t&&m(f,{children:[p($,{withText:!0,type:X,disabled:c||!n,img:X.icon,isActive:e.id===X.id,setActive:T(a)}),p($,{withText:!0,type:Z,disabled:c||!r,img:Z.icon,isActive:e.id===Z.id,setActive:T(o)}),p($,{withText:!0,type:Q,disabled:c||!i,img:Q.icon,isActive:e.id===Q.id,setActive:T(s)}),(b||x||u)&&p(`hr`,{})]}),b&&p(nt,{withText:!0,type:$e,disabled:c,loadFile:T(h),img:$e.icon,accept:`image/png, image/gif, image/jpeg, image/svg+xml, image/webp`}),x&&p(E,{disabled:c,selected:!1,onClick:T(_),title:`Add picture from URL`,icon:`<svg><path d="M9.188 16.542V14.938Q8.5 14.938 8.021 14.458Q7.542 13.979 7.542 13.292V12.458L3.583 8.5Q3.5 8.875 3.458 9.25Q3.417 9.625 3.417 10Q3.417 12.5 5.062 14.365Q6.708 16.229 9.188 16.542ZM14.854 14.438Q15.708 13.521 16.146 12.385Q16.583 11.25 16.583 10Q16.583 7.979 15.469 6.313Q14.354 4.646 12.479 3.917V4.229Q12.479 4.917 12 5.396Q11.521 5.875 10.833 5.875H9.188V7.521Q9.188 7.875 8.948 8.115Q8.708 8.354 8.354 8.354H6.708V10H11.646Q12 10 12.24 10.229Q12.479 10.458 12.479 10.812V13.292H13.292Q13.833 13.292 14.26 13.604Q14.688 13.917 14.854 14.438ZM10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333Z"/></svg>`,children:`Add picture from URL`}),(b||x)&&u&&p(`hr`,{}),u&&m(f,{children:[p(nt,{withText:!0,type:Xe,disabled:c,loadFile:T(g),img:Xe.icon,accept:`application/JSON`}),p($,{withText:!0,disabled:c,type:Ze,img:Ze.icon,isActive:e.id===Ze.id,setActive:T(v)})]}),d&&p($,{withText:!0,disabled:c,type:Ye,img:Ye.icon,isActive:e.id===Ye.id,setActive:T(y)})]})]})}):null},ot=({togglePictureUrlModal:e,addPicture:t})=>{let n=l(null);return s(()=>{n.current&&n.current.focus()},[]),p(xe,{className:`react-paint-editor-toolbox-pictureinput-modal`,onClose:e,title:`Add picture from URL`,children:m(`form`,{onSubmit:async r=>{r.preventDefault();let i=n.current?.value;i&&(await t(i),e())},children:[m(`label`,{children:[`URL\xA0`,p(`input`,{type:`text`,ref:n})]}),p(E,{onClick:e,children:`Annuler`}),p(E,{type:`submit`,selected:!0,children:`Ajouter`})]})})},st=`Choose export settings`,ct=({toggleExportModal:e,exportCanvasInFile:t})=>{let n=async n=>{t(n),e()};return m(xe,{className:`react-paint-editor-toolbox-export-modal`,onClose:e,title:st,children:[p(`h3`,{children:st}),p(`hr`,{}),p(E,{onClick:()=>n(`currentZoom`),children:`Exporter la vue actuelle`}),p(E,{onClick:()=>n(`defaultView`),children:`Exporter le canevas par défaut`}),p(E,{onClick:()=>n(`fitToShapes`),children:`Exporter le dessin entier`}),p(E,{selected:!0,onClick:e,children:`Annuler`})]})},lt=({activeTool:e,group:t,disabled:n=!1,setActiveToolFromId:r})=>{let i=l(null),[a,o]=u(!1),[,c]=d(),[f,h]=u(void 0),g=e=>{h(e),r(e.id)};if(s(()=>{if(!a)return;let e=e=>{!rt(e,i.current)&&o(!1)};return document.addEventListener(`mousedown`,e,{passive:!1}),document.addEventListener(`touchstart`,e,{passive:!1}),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`touchstart`,e)}},[a]),`type`in t)return p($,{disabled:n,type:t,img:t.icon,isActive:e.id===t.id,setActive:g});if(!t.toolsType.length)return null;if(t.toolsType?.length===1)return p($,{disabled:n,type:t.toolsType[0],img:t.toolsType[0].icon,isActive:e.id===t.toolsType[0].id,setActive:g});let _=t?.toolsType.find(t=>t.type===e.type)!==void 0,v=(f?f.icon:t.toolsType?.[0]?.icon)??t.title;return m(`div`,{className:`react-paint-editor-toolbargroup-relative`,children:[p(E,{selected:_,title:t.title,disabled:n,onClick:()=>{f?r(f.id):t.toolsType?.[0]&&g(t.toolsType[0]),c(()=>{o(!0)})},icon:v}),a&&p(D,{alignment:`center`,position:`top`,children:p(`div`,{className:`react-paint-editor-toolbargroup-panel-content`,"data-vertical":+t.vertical,ref:i,children:t.toolsType.map(t=>p($,{disabled:n,type:t,img:t.icon,isActive:e.id===t.id,setActive:g},t.id))})})]})},ut=40,dt=[{title:`brush`,toolsType:[`brush`],vertical:!1},{title:`lines`,toolsType:[`line`,`curve`,`polygon`],vertical:!1},{title:`shapes`,toolsType:[`rect`,`square`,`circle`,`ellipse`],vertical:!1},`text`],ft=({settings:e,width:t,activeTool:n,hasActionToUndo:r=!1,hasActionToRedo:i=!1,hasActionToClear:a=!1,withLoadAndSave:o,withExport:s,clearCanvas:c,setActiveTool:l,undoAction:d,redoAction:h,addPicture:g,loadFile:_,saveFile:v,exportCanvasInFile:y,availableTools:b,withUrlPicture:x,withUploadPicture:S})=>{let C=et(b,dt),w=!e.features.edition,T=t<(6+C.length)*ut,D=t<(3+C.length)*ut,O=4*ut,[k,j]=u(!1),[M,N]=u(!1),[P,F]=u(!1),I=()=>{j(e=>!e)},L=()=>{N(!0)},R=()=>{N(e=>!e)},z=()=>{F(e=>!e)},B=e=>{l(e),j(!1)},V=e=>{B(b.find(t=>t.id===e)??n)},ee=b.find(e=>e.type===n.type)!==void 0;return m(f,{children:[m(`div`,{className:`react-paint-editor-toolbar-toolbox`,style:{"--react-paint-editor-toolbar-minwidth":`${O}px`},children:[m(`div`,{className:`react-paint-editor-toolbar-shrinkable`,children:[p($,{type:Je,disabled:w,img:Je.icon,isActive:n.id===Je.id,setActive:B}),(e.size===`infinite`||e.features.zoom)&&p($,{type:Qe,disabled:w,img:Qe.icon,isActive:n.id===Qe.id,setActive:B}),D?p(E,{disabled:w,onClick:I,title:`Toggle tools`,icon:A,selected:ee}):C.map(e=>p(lt,{disabled:w,activeTool:n,group:e,setActiveToolFromId:V},`id`in e?e.id:e.title))]}),!T&&m(f,{children:[p($,{type:X,disabled:w||!r,img:X.icon,isActive:n.id===X.id,setActive:d}),p($,{type:Z,disabled:w||!i,img:Z.icon,isActive:n.id===Z.id,setActive:h}),p($,{type:Q,disabled:w||!a,img:Q.icon,isActive:n.id===Q.id,setActive:c})]}),p(at,{withActionsInMenu:T,disabled:w,activeTool:n,addPicture:g,loadFile:_,saveFile:v,togglePictureUrlModal:L,toggleExportModal:z,withUploadPicture:S,withUrlPicture:x,withLoadAndSave:o,withExport:s,hasActionToUndo:r,hasActionToRedo:i,hasActionToClear:a,undoAction:d,redoAction:h,clearCanvas:c})]}),k&&p(xe,{className:`react-paint-editor-toolbar-modal`,onClose:I,title:`Outils`,children:b.map(e=>e.type===`picture`?null:p($,{disabled:w,type:e,img:e.icon,withText:!1,isActive:n.id===e.id,setActive:B},e.id))}),M&&p(ot,{togglePictureUrlModal:R,addPicture:g}),P&&p(ct,{toggleExportModal:z,exportCanvasInFile:y})]})},pt={none:0,small:10,medium:20,large:40},mt={toolbarBackgroundColor:`white`,dividerColor:`#36418129`,fontRadius:8,fontDisabledColor:`#3641812b`,fontDisabledBackgroundColor:`transparent`,fontColor:`#364181`,fontBackgroundColor:`transparent`,fontSelectedColor:`white`,fontSelectedBackgroundColor:`#364181`,fontHoverColor:`#364181`,fontHoverBackgroundColor:`#afd8d8`},ht=()=>{let e=l([]),[n,r]=u([]),i=e=>{r(t=>t.filter(t=>t.id!==e))};return s(()=>()=>{for(let t of e.current)clearTimeout(t)},[]),{snackbarList:n,addSnackbar:({type:n=S.type,duration:a=S.duration,text:o})=>{let s={id:t(`snackbar_`),duration:a,type:n,text:o};r(e=>[...e,s]);let c=setTimeout(()=>{i(s.id),e.current=e.current.filter(e=>e!==c)},a);e.current=[...e.current,c]}}},gt=36,_t=36,vt=16,yt=8,bt=176,xt=200,St=({moveShapes:e,selectAllShapes:t,selectionMode:n,transformShape:i,settings:a,canvasRef:o,closeContextMenu:c,toggleShapeVisibility:d,toggleShapeLock:h,removeShape:g,duplicateShapes:_,copiedShape:v,setCopiedShape:y,pasteShapes:b,removeShapePoint:x,buildShapesGroup:S,copyShapes:C})=>{let w=l(null),T=l(null),{originalShape:D,cursorStartPosition:O,anchor:k}=n,A=r(D),j=A.length>0,M=A.length===1&&(A[0]?.type===`polygon`||A[0]?.type===`curve`)&&k!==void 0&&A[0]?.points?.length>2,N=!A.some(e=>e.visible===!1),P=A.some(e=>e.locked),{isOpen:F}=it({trigger:`hover`,buttonElt:w.current}),{isOpen:I}=it({trigger:`hover`,buttonElt:T.current,disabled:P}),L=yt*2+_t*(2+(j?8:0)+(M?1:0))+vt*(j?3:1),[R]=u(()=>[(O[0]+a.canvasOffset[0])*a.canvasSize.scaleRatio,gt+(O[1]+a.canvasOffset[1])*a.canvasSize.scaleRatio]),[z,B]=u();return s(()=>{let e=o?.current?.getBoundingClientRect();if(!e)return;let t=e.left+R[0],n=e.top+R[1],r=Math.max(0,Math.min(t,window.innerWidth-bt))-e.left;B({x:r,y:Math.max(0,Math.min(n,window.innerHeight-L))-e.top,subMenuPosition:r>window.innerWidth-bt-Math.min(r,xt)?`left`:`right`})},[o,R,L]),m(tt,{className:`react-paint-editor-toolbox-contextmenu`,style:z?{"--react-paint-editor-toolbox-contextmenu-transform":`translate3D(${z.x}px, ${z.y}px, 0)`}:{display:`none`},children:[j&&m(f,{children:[M&&p(E,{onClick:()=>{M&&x(A[0],k),c()},children:`Delete point`}),m(`div`,{className:`react-paint-editor-toolbox-contextmenu-group`,ref:w,children:[p(E,{icon:`<svg viewBox="0 -960 960 960"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`,children:`Organize`}),F&&m(tt,{position:z?.subMenuPosition,children:[p(E,{onClick:()=>{j&&e(A,`forward`),c()},children:`Move forward`}),p(E,{onClick:()=>{j&&e(A,`first`),c()},children:`Put on first`}),p(E,{onClick:()=>{j&&e(A,`backward`),c()},children:`Move backward`}),p(E,{onClick:()=>{j&&e(A,`last`),c()},children:`Put on last`})]})]}),m(`div`,{className:`react-paint-editor-toolbox-contextmenu-group`,ref:T,children:[p(E,{icon:`<svg viewBox="0 -960 960 960"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>`,disabled:P,children:`Transform`}),I&&m(tt,{position:z?.subMenuPosition,children:[p(E,{onClick:()=>{let e=o?.current?.getContext(`2d`);e&&j&&i(e,A,D.computed.center,`flipHorizontally`),c()},children:`Flip horizontally`}),p(E,{onClick:()=>{let e=o?.current?.getContext(`2d`);e&&j&&i(e,A,D.computed.center,`flipVertically`),c()},children:`Flip vertically`}),p(E,{onClick:()=>{let e=o?.current?.getContext(`2d`);e&&j&&i(e,A,D.computed.center,`rotateClockwise`),c()},children:`Rotate clockwise`}),p(E,{onClick:()=>{let e=o?.current?.getContext(`2d`);e&&j&&i(e,A,D.computed.center,`rotateCounterclockwise`),c()},children:`Rotate counterclockwise`})]})]}),p(`hr`,{}),p(E,{onClick:()=>{j&&(y(S(A)),g(A)),c()},children:`Cut`}),p(E,{onClick:()=>{j&&y(S(A)),c()},children:`Copy`})]}),p(E,{onClick:()=>{v&&b(C(v)),c()},disabled:!v,children:`Paste`}),p(`hr`,{}),j&&m(f,{children:[p(E,{onClick:()=>{j&&_(A,!0,!0),c()},children:`Duplicate`}),p(E,{onClick:()=>{j&&d(A.filter(e=>N?e.visible!==!1:e.visible===!1)),c()},children:N?`Hide`:`Show`}),p(E,{onClick:()=>{j&&h(A.filter(e=>P?e.locked:!e.locked)),c()},children:P?`Unlock`:`Lock`}),p(E,{onClick:()=>{j&&g(A),c()},children:`Delete`}),p(`hr`,{})]}),p(E,{onClick:()=>{t(),c()},children:`Select all`})]})},Ct=({editorProps:e,className:t,style:r,options:i,children:a})=>{let{selectionMode:s,setSelectionMode:c,shapes:l,addPictureShape:d,moveShapes:h,swapShapes:g,toggleShapeVisibility:_,toggleShapeLock:v,canGoBackward:y,canGoForward:b,canClear:S,selectedShape:C,copiedShape:T,setCopiedShape:O,pasteShapes:k,removeShape:A,duplicateShapes:j,updateShape:M,backwardShape:N,forwardShape:P,removeShapePoint:F,transformShape:I,refs:L,width:R,height:z,selectTool:B,selectShapes:V,selectAllShapes:ee,activeTool:te,setActiveTool:ne,setAvailableTools:re,isEditMode:ie,availableTools:ae,gridGap:oe,setGridGap:se,loadFile:ce,exportPicture:le,exportData:ue,clearCanvas:de,settings:H,setCanvasZoom:fe,saveShapes:pe,buildShapesGroup:me,copyShapes:he,refreshShape:ge,calculateTextFontSize:_e,canvas:{canGrow:ve,layersManipulation:ye,withExport:xe,withLoadAndSave:U,withUploadPicture:Se,withUrlPicture:W,withContextMenu:Ce}}=e,{toolbarBackgroundColor:we,dividerColor:Te,fontRadius:Ee,fontDisabledColor:De,fontDisabledBackgroundColor:Oe,fontColor:ke,fontBackgroundColor:Ae,fontSelectedColor:G,fontSelectedBackgroundColor:je,fontHoverColor:Me,fontHoverBackgroundColor:Ne}={...mt,...i},Pe=H.size===`infinite`||H.features.zoom,[K,q]=u(!1),[Fe,J]=u(!1),[Le,Re]=u(Pe),ze=Pe&&Le,Be=oe>=pt.large?`large`:oe>=pt.medium?`medium`:oe>=pt.small?`small`:`none`,Ve=e=>{se(pt[e])},{snackbarList:He,addSnackbar:Y}=ht(),Ue=o((e,t,r)=>{re(i=>i.map(i=>i.id===e?n([`settings`,t,`default`],r,i):i)),ne(i=>i.id===e?n([`settings`,t,`default`],r,i):i)},[ne,re]),We=o(e=>{q(!0);try{le(e)}catch(e){e instanceof Error&&Y({type:`error`,text:`L'export a échoué : ${e.message}`}),console.warn(e)}finally{q(!1)}},[le,Y]),Ge=o(()=>{q(!0);try{ue(),q(!1)}catch(e){e instanceof Error&&Y({type:`error`,text:`L'enregistrement a échoué`}),console.warn(e)}finally{q(!1)}},[ue,Y]),Ke=o(async e=>{q(!0);try{await ce(e),Y({type:`success`,text:`Fichier chargé !`})}catch(e){e instanceof Error&&Y({type:`error`,text:`Le chargement a échoué`}),console.warn(e)}finally{q(!1)}},[ce,Y]),qe=o(async e=>{q(!0);try{V([await d(e,R,z)])}catch(e){e instanceof Error&&Y({type:`error`,text:`Le chargement a échoué`}),console.warn(e)}finally{q(!1)}},[d,V,Y,R,z]),Je=`${t?`${t} `:``}${Fe?`react-paint-editor-layout-opened `:``}react-paint-editor-app`,X=()=>{c({mode:`default`}),L.canvas.current?.focus()};return m(`div`,{ref:L.setEditor,className:Je,style:{"--react-paint-editor-app-maxWidth":ve?`100%`:`${R}px`,"--react-paint-editor-app-toolbar-bg":we,"--react-paint-editor-app-divider-color":Te,"--react-paint-editor-app-font-radius":`${Ee}px`,"--react-paint-editor-app-font-disabled-color":De,"--react-paint-editor-app-font-disabled-bg":Oe,"--react-paint-editor-app-font-color":ke,"--react-paint-editor-app-font-bg":Ae,"--react-paint-editor-app-font-selected-color":G,"--react-paint-editor-app-font-selected-bg":je,"--react-paint-editor-app-font-hover-color":Me,"--react-paint-editor-app-font-hover-bg":Ne,...r},children:[ie&&p(ft,{settings:H,width:H.canvasSize.width,activeTool:te,clearCanvas:de,setActiveTool:B,exportCanvasInFile:We,saveFile:Ge,loadFile:Ke,addPicture:qe,hasActionToUndo:y,hasActionToRedo:b,hasActionToClear:S,undoAction:N,redoAction:P,availableTools:ae,withExport:xe,withLoadAndSave:U,withUploadPicture:Se,withUrlPicture:W}),a,ie&&ye&&p(be,{gridFormat:Be,setGridFormat:Ve,shapes:l,swapShapes:g,selectedShapes:C,removeShape:A,selectShapes:V,toggleShapeVisibility:_,toggleShapeLock:v,isLayoutPanelShown:Fe,settings:H}),ze&&m(D,{alignment:`left`,position:`bottom`,className:`react-paint-editor-layouts-panel`,"data-edit":+ie,children:[p(E,{className:`react-paint-editor-zoom-button`,icon:`<svg viewBox="0 -960 960 960" width="24px"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z"/></svg>`,onClick:()=>fe(`unzoom`)}),m(E,{className:`react-paint-editor-zoom-button react-paint-editor-zoom-button-value`,onClick:()=>fe(`default`),children:[Math.round(H.canvasZoom*100),`%`]}),p(E,{className:`react-paint-editor-zoom-button`,icon:`<svg viewBox="0 -960 960 960" width="24px"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>`,onClick:()=>fe(`zoom`)})]}),ie&&m(f,{children:[p(Ie,{saveShapes:pe,setCanvasZoom:fe,width:H.canvasSize.width,activeTool:te,availableTools:ae,selectedShape:C,settings:H,removeShape:A,updateShape:M,canvas:L.canvas.current,layersManipulation:ye,toggleLayoutPanel:()=>{J(e=>!e)},isZoomPanelShown:ze,setIsZoomPanelShown:Re,updateToolSettings:Ue,refreshShape:ge,calculateTextFontSize:_e}),p(x,{isLoading:K}),p(w,{snackbarList:He})]}),s.mode===`contextMenu`&&Ce&&p(St,{selectionMode:s,settings:H,canvasRef:L.canvas,closeContextMenu:X,selectAllShapes:ee,removeShape:A,moveShapes:h,duplicateShapes:j,toggleShapeLock:v,toggleShapeVisibility:_,setCopiedShape:O,copiedShape:T,pasteShapes:k,removeShapePoint:F,transformShape:I,buildShapesGroup:me,copyShapes:he})]})};export{qe as n,Ct as t};

package/dist/canvas/components/Canvas.d.ts

@@ -1,55 +1,4 @@
-import { type UtilsSettings } from './../../canvas/constants/app';
-import type { SelectionModeData } from './../../common/types/Mode';
-import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
-import type { ToolsType } from './../../common/types/tools';
 import React from 'react';
 import './Canvas.css';
-type DrawerType = {
-    canGrow?: boolean;
-    selectionColor: string;
-    selectionWidth: number;
-    settings: UtilsSettings;
-    isEditMode: boolean;
-    shapes: ShapeEntity[];
-    duplicateShapes: (shapesToDuplicate: ShapeEntity[]) => void;
-    saveShapes: () => void;
-    addShapes: (newShape: ShapeEntity[]) => void;
-    updateSingleShape: (updatedShape: ShapeEntity[], withSave?: boolean) => void;
-    selectedShape: SelectionType | undefined;
-    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
-    setSelectionFrame: React.Dispatch<React.SetStateAction<{
-        oldSelection: SelectionType | undefined;
-        frame: [Point, Point];
-    } | undefined>>;
-    hoveredShape: ShapeEntity | undefined;
-    selectionFrame: {
-        oldSelection: SelectionType | undefined;
-        frame: [Point, Point];
-    } | undefined;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
-    activeTool: ToolsType;
-    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
-    canvasOffsetStartData: {
-        start: Point;
-        originalOffset: Point;
-    } | undefined;
-    setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
-        start: Point;
-        originalOffset: Point;
-    } | undefined>>;
-    setCanvasOffset: (offset: Point) => void;
-    isInsideComponent: boolean;
-    isInsideCanvas: boolean;
-    selectionMode: SelectionModeData<number | Point>;
-    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
-    isShiftPressed: boolean;
-    isAltPressed: boolean;
-    isSpacePressed: boolean;
-    withFrameSelection: boolean;
-    withContextMenu: boolean;
-    withSkeleton: boolean;
-    setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
-};
-declare const Canvas: React.ForwardRefExoticComponent<DrawerType & React.RefAttributes<HTMLCanvasElement>>;
+declare const Canvas: React.ForwardRefExoticComponent<React.RefAttributes<HTMLCanvasElement>>;
 export default Canvas;

package/dist/canvas/constants/app.d.ts

@@ -1,33 +1,12 @@
 import type { Size } from './../../common/types/Canvas';
-import type { ExportedDrawableShape, Point } from './../../common/types/Shapes';
+import type { ExportedDrawableShape } from './../../common/types/Shapes';
 import type { CustomToolInput } from './../../common/types/tools';
 import type { RecursivePartial } from './../../common/types/utils';
 export declare const APP_NAME = "react_paint";
 export declare const DRAWCANVAS_CLASSNAME = "react-paint-canvas-drawcanvas";
 export declare const SELECTIONCANVAS_CLASSNAME = "react-paint-canvas-selectioncanvas";
-export type BrushAlgo = 'simple' | 'quadratic';
-export type UtilsSettings = {
-    brushAlgo: BrushAlgo;
-    isBrushShapeDoneOnMouseUp: boolean;
-    gridGap: number;
-    canvasOffset: Point;
-    canvasZoom: number;
-    canvasSize: {
-        realWidth: number;
-        realHeight: number;
-        width: number;
-        height: number;
-        scaleRatio: number;
-        scaleRatioWithNoZoom: number;
-    };
-    selectionPadding: number;
-    size: 'infinite' | 'fixed';
-    features: {
-        zoom: boolean;
-        edition: boolean;
-    };
-    debug: boolean;
-};
+import type { BrushAlgo } from './../../common/types/Settings';
+export type { BrushAlgo, UtilsSettings } from './../../common/types/Settings';
 type AppOptionsType = {
     layersManipulation: boolean;
     grid: number;
@@ -56,4 +35,3 @@ export declare const DEFAULT_CANVAS_OPTIONS: {
     canvasSelectionColor: string;
     canvasSelectionWidth: number;
 };
-export {};

package/dist/canvas/constants/rendering.d.ts

@@ -0,0 +1,3 @@
+export declare const LINE_DASH_DATA: number[][];
+export declare const STYLE_FONT_DEFAULT = "serif";
+export declare const STYLE_FONT_SIZE_DEFAULT = 36;

package/dist/canvas/constants/tools.d.ts

@@ -0,0 +1,4 @@
+import type { ActionsTool, ToolsRectSettings } from './../../common/types/tools';
+export declare const SELECTION_TOOL: ActionsTool;
+export declare const PICTURE_TOOL_ID = "react-paint-picture";
+export declare const CANVAS_DEFAULT_RECT_SETTINGS: ToolsRectSettings;

package/dist/canvas/context/CanvasContext.d.ts

@@ -0,0 +1,55 @@
+import type { UtilsSettings } from './../../canvas/constants/app';
+import type { SelectionModeData } from './../../common/types/Mode';
+import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
+import type { ToolsType } from './../../common/types/tools';
+import type React from 'react';
+export type CanvasContextType = {
+    shapes: ShapeEntity[];
+    settings: UtilsSettings;
+    selectedShape: SelectionType | undefined;
+    hoveredShape: ShapeEntity | undefined;
+    selectionFrame: {
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined;
+    selectionMode: SelectionModeData<number | Point>;
+    activeTool: ToolsType;
+    canvasOffsetStartData: {
+        start: Point;
+        originalOffset: Point;
+    } | undefined;
+    isInsideComponent: boolean;
+    isInsideCanvas: boolean;
+    isShiftPressed: boolean;
+    isAltPressed: boolean;
+    isSpacePressed: boolean;
+    selectionColor: string;
+    selectionWidth: number;
+    isEditMode: boolean;
+    canGrow: boolean | undefined;
+    withFrameSelection: boolean;
+    withSkeleton: boolean;
+    withContextMenu: boolean;
+    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
+    setSelectionFrame: React.Dispatch<React.SetStateAction<{
+        oldSelection: SelectionType | undefined;
+        frame: [Point, Point];
+    } | undefined>>;
+    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
+    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
+    setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
+        start: Point;
+        originalOffset: Point;
+    } | undefined>>;
+    setCanvasOffset: (offset: Point) => void;
+    setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
+    addShapes: (newShapes: ShapeEntity[]) => void;
+    updateSingleShape: (updatedShape: ShapeEntity[], withSave?: boolean) => void;
+    duplicateShapes: (shapesToDuplicate: ShapeEntity[]) => void;
+    saveShapes: () => void;
+    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
+    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
+};
+declare const CanvasContext: React.Context<CanvasContextType | undefined>;
+export declare const useCanvasContext: () => CanvasContextType;
+export default CanvasContext;

package/dist/canvas/hooks/useDrawableCanvas.d.ts

@@ -1,47 +1,6 @@
-import type { UtilsSettings } from './../../canvas/constants/app';
-import type { HoverModeData, SelectionModeData } from './../../common/types/Mode';
-import type { Point, SelectionType, ShapeEntity } from './../../common/types/Shapes';
-import type { ToolsType } from './../../common/types/tools';
+import type { HoverModeData } from './../../common/types/Mode';
 import type React from 'react';
-type UseCanvasType = {
-    shapes: ShapeEntity[];
-    saveShapes: () => void;
-    addShapes: (newShape: ShapeEntity[]) => void;
-    updateSingleShape: (updatedShape: ShapeEntity[], withSave?: boolean) => void;
-    selectedShape: SelectionType | undefined;
-    setSelectedShape: React.Dispatch<React.SetStateAction<SelectionType | undefined>>;
-    activeTool: ToolsType;
-    setActiveTool: React.Dispatch<React.SetStateAction<ToolsType>>;
-    refreshHoveredShape: (e: MouseEvent | TouchEvent, ctx: CanvasRenderingContext2D, cursorPosition: Point, isInsideMask: boolean) => void;
-    refreshSelectedShapes: (ctx: CanvasRenderingContext2D, cursorPosition: Point, settings: UtilsSettings) => void;
-    duplicateShapes: (shapesToDuplicate: ShapeEntity[]) => void;
-    canvasOffsetStartData: {
-        start: Point;
-        originalOffset: Point;
-    } | undefined;
-    setCanvasOffsetStartData: React.Dispatch<React.SetStateAction<{
-        start: Point;
-        originalOffset: Point;
-    } | undefined>>;
-    setCanvasOffset: (offset: Point) => void;
-    isInsideComponent: boolean;
-    isInsideCanvas: boolean;
-    selectionMode: SelectionModeData<number | Point>;
-    setSelectionMode: React.Dispatch<React.SetStateAction<SelectionModeData<number | Point>>>;
-    setSelectionFrame: React.Dispatch<React.SetStateAction<{
-        oldSelection: SelectionType | undefined;
-        frame: [Point, Point];
-    } | undefined>>;
-    setCanvasMoveAcceleration: React.Dispatch<React.SetStateAction<Point>>;
-    drawCanvasRef: React.RefObject<HTMLCanvasElement | null>;
-    isShiftPressed: boolean;
-    isAltPressed: boolean;
-    withFrameSelection: boolean;
-    withContextMenu: boolean;
-    settings: UtilsSettings;
-    isSpacePressed: boolean;
-};
-declare const useDrawableCanvas: ({ addShapes, drawCanvasRef, setActiveTool, refreshHoveredShape, shapes, selectionMode, activeTool, isInsideComponent, isInsideCanvas, setCanvasOffset, selectedShape, canvasOffsetStartData, refreshSelectedShapes, setSelectedShape, setSelectionFrame, setCanvasOffsetStartData, updateSingleShape, duplicateShapes, saveShapes, setSelectionMode, setCanvasMoveAcceleration, settings, isShiftPressed, isAltPressed, withFrameSelection, withContextMenu, isSpacePressed }: UseCanvasType) => {
+declare const useDrawableCanvas: (drawCanvasRef: React.RefObject<HTMLCanvasElement | null>) => {
     hoverMode: HoverModeData;
 };
 export default useDrawableCanvas;

package/dist/canvas/hooks/useEventListener.d.ts

@@ -0,0 +1,2 @@
+declare const useEventListener: <T extends Event>(target: EventTarget | null | undefined, event: string, handler: (e: T) => void) => void;
+export default useEventListener;