npm - @yorab/react-paint - Versions diffs - 0.11.0 → 0.11.1 - Mend

@yorab/react-paint 0.11.0 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +24 -6
package/dist/canvas/constants/app.d.ts +5 -5
package/dist/canvas/hooks/useReactPaint.d.ts +4 -16
package/dist/canvas/hooks/useShapes.d.ts +6 -3
package/dist/canvas/index.d.ts +2 -0
package/dist/react-paint.js +742 -742
package/dist/react-paint.umd.cjs +1 -1
package/package.json +1 -1

package/dist/react-paint.umd.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- (function(Qe,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],g):g((Qe=typeof globalThis<"u"?globalThis:Qe\|\|self)["react-paint"]={},Qe.React,Qe.jsxRuntime)})(this,function(Qe,g,l){"use strict";const Gt='<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>',Qt='<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>',St='<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>',xt='<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>',Bt='<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>',Xt='<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>',bt='<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>',Yt='<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>',qt='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',_t='<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>',Jt='<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>',Kt='<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>',es='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',ts='<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>',ss='<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>',se=["transparent","black","white","red","green","blue","yellow"],Le=[0,1,2],ns=[[1,0],[1,2],[4,6]],_e="serif",l1=2,is=3,c1=4,B="react-paint-",Ct={type:"picture",id:`${B}picture`,icon:bt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},as={type:"brush",id:`${B}brush`,icon:Gt,label:"Brosse",settings:{strokeColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:Le,default:0}}},os={type:"line",id:`${B}line`,icon:qt,label:"Ligne",settings:{strokeColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Le,default:0},lineArrow:{values:[0,1,2,3],default:0}}},rs={type:"polygon",id:`${B}polygon`,icon:xt,label:"Polygone",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Le,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},ls={type:"curve",id:`${B}curve`,icon:_t,label:"Courbe",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Le,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},cs={type:"rect",id:`${B}rect`,icon:Qt,label:"Rectangle",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Le,default:0}}},ds={type:"square",id:`${B}square`,icon:Qt,label:"Carré",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Le,default:0}}},us={type:"circle",id:`${B}circle`,icon:St,label:"Cercle",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Le,default:0}}},hs={type:"ellipse",id:`${B}ellipse`,icon:St,label:"Ellipse",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Le,default:0}}},ps={type:"text",id:`${B}text`,icon:Yt,label:"Texte",settings:{strokeColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},fontFamily:{values:["arial","serif","monospace"],default:_e},fontBold:{values:[!1,!0],default:!1},fontItalic:{values:[!1,!0],default:!1}}},Se={id:`${B}selection`,type:"selection",icon:'<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>',label:"Sélection"},Ne={id:`${B}undo`,type:"undo",icon:'<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>',label:"Undo"},Ie={id:`${B}redo`,type:"redo",icon:'<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>',label:"Redo"},We={id:`${B}clear`,type:"clear",icon:'<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>',label:"Clear"},wt={id:`${B}export`,type:"export",icon:'<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>',label:"Export PNG"},gs={id:`${B}load`,type:"loadfile",icon:'<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>',label:"Load project"},kt={id:`${B}save`,type:"savefile",icon:'<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>',label:"Save project"},fs={id:`${B}upload-picture`,type:"uploadpicture",icon:bt,label:"Upload picture"},vs=2,ms="blue",xe=14,ys=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],Qs=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle"],Ss="react-paint-canvas-drawcanvas",xs="react-paint-canvas-selectioncanvas",Mt={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[as,os,rs,ls,cs,ds,us,hs,Ct,ps],clearCallback:"empty",brushAlgo:"simple",withFrameSelection:!1,withSkeleton:!1,selection:{canvasSelectionColor:ms,canvasSelectionWidth:vs,canvasSelectionPadding:0}},d1={canvasBackgroundColor:"white"},bs=(e,s)=>!!(e.target instanceof Node&&s)&&s.contains(e.target),nt=300,jt=(e,s)=>{const t={...s};for(const n of e)delete t[n];return t},ne=(e,s,t)=>{const n=Array.isArray(t)?[...t]:{...t},a=Array.isArray(e)?e:typeof e=="string"?e.split("."):[e];return a.reduce((i,o,r)=>(i[o]=Lt(i[o])?{...i[o]}:Array.isArray(i[o])?[...i[o]]:i[o]===void 0\|\|i[o]===null?{}:i[o],r===a.length-1&&(i[o]=s),i[o]),n),n},Lt=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,ve=(e,s,t)=>{if(!Lt(s)\|\|!Lt(t))return t;const n={...s};for(const a in t)Object.hasOwn(t,a)&&(Object.hasOwn(n,a)?n[a]=e(n[a],t[a],a)??ve(e,n[a],t[a]):n[a]=t[a]);return n},Cs=(e,s)=>{if(e===s)return!0;if(typeof e!="object"\|\|typeof s!="object"\|\|e===null\|\|s===null)return!1;const t=Object.keys(e),n=Object.keys(s);if(t.length!==n.length)return!1;for(const a of t)if(!n.includes(a)\|\|!Cs(e[a],s[a]))return!1;return!0},Vt={},ee=(e="")=>(Vt[e]\|\|(Vt[e]=0),`${e}${++Vt[e]}`),it=e=>e.filter(s=>s!=null),ws=e=>{e.lineCap="round",e.lineJoin="round"},Ae=(e,s={})=>{const{lineCap:t="round",fillColor:n="transparent",opacity:a=100,strokeColor:i=ms,lineWidth:o=vs,lineDash:r=0}=s;e.lineCap=t,e.globalAlpha=a/100,e.fillStyle=n,e.strokeStyle=i,e.lineWidth=o,e.setLineDash(r===0?[]:[ns[r][0]o,ns[r][1]o])},Pt=(e,s,t,n)=>{e.save(),e.scale(s.canvasSize.scaleRatio,s.canvasSize.scaleRatio),e.translate(s.canvasOffset[0],s.canvasOffset[1]),t&&n&&(e.translate(n[0],n[1]),e.rotate(t),e.translate(-n[0],-n[1]))},at=e=>{const s=new Path2D;return s.rect(e.x,e.y,e.width,e.height),s},ot=e=>{const s=new Path2D;return s.arc(e.x,e.y,e.radius,0,2Math.PI),s},Ht=e=>{const s=new Path2D;return s.moveTo(...e.points[0]),s.lineTo(...e.points[1]),s},u1=e=>{const s=new Path2D;return s.moveTo(...e.points[0]),s.lineTo(...e.points[1]),s.lineTo(...e.points[2]),s.lineTo(...e.points[0]),s},Tt=(e,s,t,n=!1)=>{const{borders:a}=O(s,t);return{border:at(a),shapePath:e,anchors:[...s.points.map((i,o)=>n&&o>0&&o<s.points.length-1?at({x:i[0]-7,y:i[1]-7,width:xe/t.canvasSize.scaleRatio,height:xe/t.canvasSize.scaleRatio}):ot({x:i[0],y:i[1],radius:7/t.canvasSize.scaleRatio}))]}},ze=(e,s)=>{const t=((n,{brushAlgo:a})=>{if(n.points.length<1\|\|n.style?.strokeColor==="transparent")return;const i=n.points.flat(),o=i.map(h=>h[0]),r=i.map(h=>h[1]),c=Math.min(...o),u=Math.min(...r),d=new Path2D;for(const h of n.points){if(!h.length)return;if(h.length===1)d.rect(...he(h[0],c,u,n.scaleX,n.scaleY),1,1);else if(d.moveTo(...he(h[0],c,u,n.scaleX,n.scaleY)),a==="quadratic"){for(let p=0;p<h.slice(1).length-2;p++){const f=he(h[p],c,u,n.scaleX,n.scaleY),v=he(h[p+1],c,u,n.scaleX,n.scaleY),k=(f[0]+v[0])/2,M=(f[1]+v[1])/2;d.quadraticCurveTo(...f,k,M)}d.quadraticCurveTo(...he(h[h.length-2],c,u,n.scaleX,n.scaleY),...he(h[h.length-1],c,u,n.scaleX,n.scaleY))}else for(const p of h.slice(1))d.lineTo(...he(p,c,u,n.scaleX,n.scaleY))}return d})(e,s);return{...e,path:t,selection:$e(t,e,s)}},h1=ze,At=e=>180e/Math.PI,ks=(e,s)=>{const t=s.x-Math.min(Math.max(s.x,e.x),e.x+e.width),n=s.y-Math.min(Math.max(s.y,e.y),e.y+e.height);return Math.sqrt(tt+nn)<=s.radius},ce=({origin:e=[0,0],point:s,rotation:t})=>{const n=[s[0]-e[0],s[1]-e[1]],a=n[1]Math.cos(t)-n[0]Math.sin(t);return[n[1]Math.sin(t)+n[0]Math.cos(t)+e[0],a+e[1]]},Ms=e=>(e+2Math.PI)%(2Math.PI),js=({targetVector:[e,s],radian:t=!0,originVector:n})=>{const a=Ms(Math.atan2(s[1]-e[1],s[0]-e[0]));if(n){const[i,o]=n,r=Math.atan2(o[1]-i[1],o[0]-i[0]),c=Ms(a-r);return t?c:At(c)}return t?a:At(a)},Ve=(e,s=2)=>Math.round(e10s)/10s,he=(e,s,t,n=1,a=1)=>[s+(e[0]-s)n,t+(e[1]-t)a],I=(e,s,t=0)=>{if(!s.gridGap)return Ve(e);const n=e+t,a=n>=0?s.gridGap:-s.gridGap;return n+a/2-(n+a/2)%a-t},p1=(e,s,t=0)=>s.gridGap?e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18):Ve(e,3),g1=(e,s,t,n,a,i)=>{switch(n.mode){case"brush":return((o,r,c)=>{const u={...o,points:ne(o.points.length-1,[...o.points[o.points.length-1],[Math.round(r[0]),Math.round(r[1])]],o.points)};return ze(u,c)})(s,t,a);case"translate":return Rt(t,n.originalShape,n.cursorStartPosition,a);case"rotate":return V1(s,t,n.originalShape,n.cursorStartPosition,n.center,a);case"resize":return P1(e,s,t,n.originalShape,n,a,i);default:return s}},$e=(e,s,t)=>{const{borders:n}=O(s,t);return{border:at(n),shapePath:e,line:Ht({points:[[n.x+n.width/2,n.y],[n.x+n.width/2,n.y-23/t.canvasSize.scaleRatio]]}),anchors:[ot({x:n.x+n.width/2,y:n.y-23/t.canvasSize.scaleRatio,radius:7/t.canvasSize.scaleRatio}),...ys.map(a=>ot({x:n.x+n.widtha[0],y:n.y+n.heighta[1],radius:7/t.canvasSize.scaleRatio}))]}},Ls=({borderStart:e,borderSize:s,vector:t,settings:n,invertedAxe:a,anchor:i})=>{switch(i){case 0:{if(a){const r=s-2n.selectionPadding;return[e+r,t-r]}const o=Math.max(2n.selectionPadding,s-t);return[e+s-o,o]}case .5:return[e,s];case 1:if(a){const o=s+t;return[e+o,2n.selectionPadding-o]}return[e,Math.max(2n.selectionPadding,s+t)];default:return[0,0]}},Vs=({borderX:e,borderWidth:s,borderY:t,borderHeight:n,center:a,originalShape:i})=>{const o=[e+s/2-a[0],t+n/2-a[1]],[r,c]=ce({point:o,rotation:-i.rotation});return{borderX:Ve(e+r-o[0]),borderWidth:Ve(s),borderY:Ve(t+c-o[1]),borderHeight:Ve(n)}},Oe=(e,s,t,n,a=!1)=>{const{center:i,borders:o}=O(s,n),r=ce({origin:i,point:e,rotation:s.rotation}),c=t.anchor[0]===0&&r[0]>=o.x+o.width\|\|t.anchor[0]===1&&r[0]<=o.x,u=t.anchor[1]===0&&r[1]>=o.y+o.height\|\|t.anchor[1]===1&&r[1]<=o.y,d=[I(r[0],n,t.anchor[0]===0&&!c\|\|t.anchor[0]===1&&c?n.selectionPadding:-n.selectionPadding),I(r[1],n,t.anchor[1]===0&&!u\|\|t.anchor[1]===1&&u?n.selectionPadding:-n.selectionPadding)],h=n.gridGap?[t.anchor[0]===0?o.x:t.anchor[0]===.5?o.x+o.width/2:o.x+o.width,t.anchor[1]===0?o.y:t.anchor[1]===.5?o.y+o.height/2:o.y+o.height]:ce({origin:i,point:t.cursorStartPosition,rotation:s.rotation}),p=[d[0]-h[0],d[1]-h[1]],[f,v]=Ls({borderStart:o.x,borderSize:o.width,vector:p[0],settings:n,invertedAxe:c,anchor:t.anchor[0]}),[k,M]=Ls({borderStart:o.y,borderSize:o.height,vector:p[1],settings:n,invertedAxe:u,anchor:t.anchor[1]});if(a){const Q=((P,S,L,T,E,Z,H,C,V,j)=>{const{selectionPadding:x}=j,F=(S.width-2x\|\|1)/(S.height-2x\|\|1),w=(E-2x)/(H-2x);let A,D,m,y;return V.anchor[0]!==.5&&V.anchor[1]!==.5?w<F?(D=Z,y=H,m=(H-2x)F+2x,A=V.anchor[0]===0?S.width-P[0]>x?S.x+(S.width-m):S.x+S.width-2x:S.width+P[0]>x?S.x:S.x-m+2x):(A=T,m=E,y=(E-2x)/F+2x,D=V.anchor[1]===0?S.height-P[1]>x?S.y+(S.height-y):S.y+S.height-2x:S.height+P[1]>x?S.y:S.y-y+2x):V.anchor[0]!==.5?(A=T,m=E,y=(E-2x)/F+2x,D=S.y+(S.height-y)/2):(D=Z,y=H,m=(H-2x)F+2x,A=S.x+(S.width-m)/2),{borderX:A,borderWidth:m,borderY:D,borderHeight:y,center:L,originalShape:C}})(p,o,i,f,v,k,M,s,t,n);return Vs(Q)}return Vs({borderX:f,borderWidth:v,borderY:k,borderHeight:M,center:i,originalShape:s})},rt=(e,s)=>{const t=ot(e);return{...e,path:t,selection:$e(t,e,s)}},f1=rt,Zt=(e,s,t)=>{const{clientX:n=0,clientY:a=0}="touches"in e&&e.touches[0]?e.touches[0]:"changedTouches"in e&&e.changedTouches[0]?e.changedTouches[0]:"clientX"in e?e:{},i=s?.getBoundingClientRect()??{left:0,top:0,width:t.canvasSize.width,height:t.canvasSize.height};return[(n-i.left)(t.canvasSize.width/i.width)/t.canvasSize.scaleRatio,(a-i.top)(t.canvasSize.height/i.height)/t.canvasSize.scaleRatio]},Ps=e=>"touches"in e,Ze=(e,s,[t,n],[a,i])=>ce({origin:[t-a,n-i],point:e,rotation:s}),lt=(e,s,t)=>t?ks(e,{x:s[0],y:s[1],radius:t}):((n,a)=>a[0]>=n.x&&a[0]<=n.x+n.width&&a[1]>=n.y&&a[1]<=n.y+n.height)(e,s),Je=(e,s,t,n=!1,a=0)=>{if(e.locked)return!1;const{canvasSize:{scaleRatio:i}}=t,{borders:o,center:r}=O(e,t),c=Ze(s,e.rotation,r,t.canvasOffset);if(n)if(e.type==="line"\|\|e.type==="polygon"\|\|e.type==="curve"){for(let u=0;u<e.points.length;u++)if(lt({x:e.points[u][0]-7/i,y:e.points[u][1]-7/i,width:xe/i,height:xe/i},c,a))return{mode:"resize",anchor:u}}else{if(lt({x:o.x+o.width/2-7/i,y:o.y-xe/i-16/i,width:xe/i,height:xe/i},c,a))return{mode:"rotate"};for(const u of ys)if(lt({x:o.x+o.widthu[0]-7/i,y:o.y+o.heightu[1]-7/i,width:xe/i,height:xe/i},c,a))return{mode:"resize",anchor:u}}return!!lt(o,c,a)&&{mode:"translate"}},Hs=(e,s,t,n)=>{if(s.locked)return!1;const{center:a}=O(s,n),i=Ze(t,s.rotation,a,n.canvasOffset);return"path"in s&&s.path?s.style?.fillColor&&s.style?.fillColor!=="transparent"?!!e.isPointInPath(s.path,i[0],i[1])&&{mode:"translate"}:(e.lineWidth=(s.style?.lineWidth??0)+15,!!e.isPointInStroke(s.path,i[0],i[1])&&{mode:"translate"}):Je(s,t,n,!1)};function Ts(e,s){const t=Math.max(e.x,s.x),n=Math.max(e.y,s.y),a=Math.min(e.x+(e.width\|\|1),s.x+(s.width\|\|1)),i=Math.min(e.y+(e.height\|\|1),s.y+(s.height\|\|1));if(t<a&&n<i)return{x:t,y:n,width:a-t,height:i-n}}const As=({ctx:e,path:s,rect:t,offset:n,checkFill:a})=>{for(let i=0;i<n;i+=n/2)for(let o=0;o<n;o+=n/2)for(let r=i+t.x;r<t.x+t.width;r+=n)for(let c=o+t.y;c<t.y+t.height;c+=n)if(a?e.isPointInPath(s,r,c):e.isPointInStroke(s,r,c))return!0;return!1},Ue=(e,s)=>{const t=(n=>{if(n.points.length<1)return;const a=new Path2D;a.moveTo(...n.points[0]);for(const i of n.points.slice(1))a.lineTo(...i);return a.lineTo(...n.points[0]),a})(e);return{...e,path:t,selection:Tt(t,e,s)}},v1=Ue,Zs=(e,s)=>{const t=Math.min(...e.points.map(i=>i[0]))-s.selectionPadding,n=Math.max(...e.points.map(i=>i[0]))+s.selectionPadding,a=Math.min(...e.points.map(i=>i[1]))-s.selectionPadding;return{x:t,width:n-t,y:a,height:Math.max(...e.points.map(i=>i[1]))+s.selectionPadding-a}},Ge=(e,s)=>{const t=(n=>{if(n.points.length<3)return;const a=new Path2D;a.moveTo(...n.points[0]);for(let i=1;i<n.points.length-1;i++)a.quadraticCurveTo(...n.points[i],n.points.length-2===i?n.points[i+1][0]:(n.points[i+1][0]-n.points[i][0])/2+n.points[i][0],n.points.length-2===i?n.points[i+1][1]:(n.points[i+1][1]-n.points[i][1])/2+n.points[i][1]);return a})(e);return{...e,path:t,selection:Tt(t,e,s,!0)}},m1=Ge,y1=Zs,ct=(e,s)=>{const t=(n=>{const a=new Path2D;return a.ellipse(n.x,n.y,n.radiusX,n.radiusY,0,0,2Math.PI),a})(e);return{...e,path:t,selection:$e(t,e,s)}},Q1=ct,Es=e=>{return t={...e,type:"triangle"},{...t,path:u1(t)};var t},S1=(e,s)=>{e.globalAlpha!==0&&s.path&&(s.style?.fillColor!=="transparent"&&e.fill(s.path),s.style?.strokeColor!=="transparent"&&e.stroke(s.path))},dt=(e,s)=>{const t=[];let n;if(e.style?.lineArrow===1\|\|e.style?.lineArrow===2\|\|e.style?.lineArrow===3){const a=Math.PI/2-js({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3\|\|t.push(Es(Fs(e.points[0],a,e.style))),e.style?.lineArrow!==2&&e.style?.lineArrow!==3\|\|t.push(Es(Fs(e.points[1],a+Math.PI,e.style)));const i=(({line:o,size:r,direction:c})=>{const u=Math.PI/2-js({targetVector:[o.points[0],o.points[1]]}),d=[o.points[0][0]+(o.points[1][0]-o.points[0][0])/2,o.points[0][1]+(o.points[1][1]-o.points[0][1])/2];let h,p;if(["start","both"].includes(c)){const f=ce({point:o.points[0],origin:d,rotation:-u});h=ce({point:[f[0],f[1]+r],origin:d,rotation:u})}else h=[...o.points[0]];if(["end","both"].includes(c)){const f=ce({point:o.points[1],origin:d,rotation:-u});p=ce({point:[f[0],f[1]-r],origin:d,rotation:u})}else p=[...o.points[1]];return{points:[h,p]}})({line:e,size:10+2(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});n=Ht(i)}else n=Ht(e);return{...e,path:n,selection:Tt(n,e,s),arrows:t,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"}}},x1=dt,Fs=(e,s,t)=>{const n=[ce({point:[0,0],rotation:s}),ce({point:[-(5+(t.lineWidth??0)),10+2(t.lineWidth??0)],rotation:s}),ce({point:[5+(t.lineWidth??0),10+2(t.lineWidth??0)],rotation:s})];return{points:[[e[0]+n[0][0],e[1]+n[0][1]],[e[0]+n[1][0],e[1]+n[1][1]],[e[0]+n[2][0],e[1]+n[2][1]]],style:{...t,fillColor:t.strokeColor,strokeColor:"transparent"}}},ut=(e,s)=>{const t=at(e);return{...e,path:t,selection:$e(t,e,s)}},b1=ut,C1=(e,s)=>{e.globalAlpha!==0&&s.path&&(s.style?.fillColor!=="transparent"&&e.fill(s.path),s.style?.strokeColor!=="transparent"&&e.stroke(s.path))},Rs=(e,s)=>({x:e.x-s.selectionPadding,width:e.width+2s.selectionPadding,y:e.y-s.selectionPadding,height:e.height+2s.selectionPadding}),Ds=(e,s,t,n,[a,i]=[!1,!1])=>((o,r,[c,u],[d,h])=>ce({origin:[c-d,u-h],point:o,rotation:-r}))([e[0]===.5?t.x+t.width/2:e[0]===0?t.x+(a?0:t.width):t.x+(a?t.width:0),e[1]===.5?t.y+t.height/2:e[1]===0?t.y+(i?0:t.height):t.y+(i?t.height:0)],t.rotation,s,n.canvasOffset),ht=(e,s)=>({...e,selection:$e(void 0,e,s)}),w1=ht,Ns=(e,s,t,n,a)=>{const[i,o]=((r,c,u,d,h=!1)=>{if(!(r&&c&&d&&u))return[nt,nt];const p=r/c;if(p>u/d){const v=h?u:Math.min(r,u);return[v,v/p]}const f=h?d:Math.min(c,d);return[fp,f]})(e.width,e.height,t,n,!0);return ht({toolId:Ct.id,type:"picture",id:ee("picture_"),x:(t-i)/2,y:(n-o)/2,width:i,height:o,src:s,img:e,rotation:0},a)},k1=(e,s,t,n)=>new Promise((a,i)=>{const o=new Image;o.onerror=()=>{i(new Error("Some images could not be loaded"))},setTimeout(()=>{i(new Error("Timeout while loading images"))},4e3),e instanceof File?((r,c,u,d,h,p)=>{const f=URL.createObjectURL(u);r.onload=async()=>{if(URL.revokeObjectURL(r.src),Os(u)&&!r.width&&!r.height){const k=await u.text(),M=$s(k);if(f===r.src)return void(r.src=M)}const v=Ns(r,r.src,d,h,p);c(v)},r.src=f})(o,a,e,s,t,n):((r,c,u,d,h,p)=>{r.onload=()=>{URL.revokeObjectURL(r.src);const f=Ns(r,u,d,h,p);c(f)},Us(u).then(f=>{r.src=f}).catch(()=>{r.src=""})})(o,a,e,s,t,n)}),Et=["Texte"],pt=(e,s)=>({...e,selection:$e(void 0,e,s)}),M1=pt,Ft=(e,s,t,n,a,i=_e)=>{e.font=`${a?"italic":""} ${n?"bold":""} 1px ${i}`;const o=s.map(r=>t/e.measureText(r).width);return Math.min(...o)\|\|36},j1=(e,s,t,n)=>{const a={...s,value:t},i=((v,k,M,Q,P,S=_e)=>{v.font=`${P?"italic":""} ${Q?"bold":""} ${M}px ${S}`;const L=k.map(T=>v.measureText(T).width);return Math.max(...L)\|\|20})(e,a.value,a.fontSize,a.style?.fontBold??!1,a.style?.fontItalic??!1,a.style?.fontFamily),o=a.fontSizea.value.length,r={...a,width:i,height:o},{center:c}=O(s,n),{center:u}=O(r,n),[d,h]=Ds([1,1],c,s,n),[p,f]=Ds([1,1],u,r,n,[!1,!1]);return{...r,x:r.x-(p-d),y:r.y-(f-h)}},Is=(e,s,t,n)=>{const a=[I(t[0],n),I(t[1],n)];switch(s.type){case"brush":return((i,o,r)=>ze({toolId:i.id,type:i.type,id:ee(`${i.type}_`),points:[[o]],rotation:0,scaleX:1,scaleY:1,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(s,a,n);case"line":return((i,o,r)=>{const c={toolId:i.id,type:i.type,id:ee(`${i.type}_`),points:[o,o],rotation:0,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,lineArrow:i.settings.lineArrow.default}};return dt(c,r)})(s,a,n);case"polygon":return((i,o,r)=>Ue({toolId:i.id,type:i.type,id:ee(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(o),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},r))(s,a,n);case"curve":return((i,o,r)=>Ge({toolId:i.id,type:i.type,id:ee(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(o),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},r))(s,a,n);case"rect":case"square":return((i,o,r,c=0,u=0)=>{const d={toolId:i.id,type:i.type,id:ee(`${i.type}_`),x:o[0],y:o[1],width:c,height:u,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}};return ut(d,r)})(s,a,n);case"text":return((i,o,r,c)=>{const u=Ft(i,Et,50,o.settings?.fontBold.default??!1,o.settings?.fontItalic.default??!1,o.settings.fontFamily.default);return pt({toolId:o.id,type:o.type,id:ee(`${o.type}_`),x:r[0],y:r[1],value:Et,fontSize:u,width:50,height:u(Et.length\|\|1),rotation:0,style:{opacity:o.settings.opacity.default,strokeColor:o.settings.strokeColor.default,fontFamily:o.settings.fontFamily.default,fontItalic:o.settings.fontItalic.default,fontBold:o.settings.fontBold.default}},c)})(e,s,a,n);case"ellipse":return((i,o,r)=>ct({toolId:i.id,type:i.type,id:ee(`${i.type}_`),x:o[0],y:o[1],radiusX:0,radiusY:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(s,a,n);case"circle":return((i,o,r)=>rt({toolId:i.id,type:i.type,id:ee(`${i.type}_`),x:o[0],y:o[1],radius:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(s,a,n)}},Ws=(e,s,t)=>{if(s.visible===!1)return;const{center:n}=O(s,t);switch(Pt(e,t,s.rotation,n),Ae(e,s.style),s.type){case"brush":((a,i)=>{i.points.length<1\|\|!i.path\|\|a.globalAlpha!==0&&i.style?.strokeColor!=="transparent"&&a.globalAlpha!==0&&a.stroke(i.path)})(e,s);break;case"text":((a,i)=>{if(a.globalAlpha!==0&&i.style?.strokeColor&&i.style.strokeColor!=="transparent"){a.font=`${i.style?.fontItalic?"italic":""} ${i.style?.fontBold?"bold":""} ${i.fontSize}px ${i.style?.fontFamily??_e}`,a.textBaseline="top",a.fillStyle=i.style.strokeColor;for(let o=0;o<i.value.length;o++)a.fillText(i.value[o],i.x,i.y+oi.fontSize,i.width)}})(e,s);break;case"line":((a,i)=>{if(a.globalAlpha!==0&&i.path){i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path);for(const o of i.arrows??[])Ae(a,o.style),S1(a,o)}})(e,s);break;case"polygon":((a,i)=>{i.path&&a.globalAlpha!==0&&(i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path))})(e,s);break;case"curve":((a,i)=>{i.path&&a.globalAlpha!==0&&(i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path))})(e,s);break;case"circle":((a,i)=>{a.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path))})(e,s);break;case"ellipse":((a,i)=>{a.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path))})(e,s);break;case"rect":case"square":C1(e,s);break;case"picture":((a,i)=>{a.globalAlpha!==0&&(a.beginPath(),a.drawImage(i.img,i.x,i.y,i.width,i.height))})(e,s)}e.restore()},L1=(e,s)=>{switch(e.type){case"brush":return((t,{selectionPadding:n})=>{const a=t.points.flat(),i=Math.min(...a.map(d=>d[0])),o=Math.min(...a.map(d=>d[1])),r=a.map(d=>he(d,i,o,t.scaleX,t.scaleY)),c=Math.max(...r.map(d=>d[0]))+n,u=Math.max(...r.map(d=>d[1]))+n;return{x:i-n,width:c-i+n,y:o-n,height:u-o+n}})(e,s);case"line":return((t,n)=>({x:Math.min(t.points[0][0],t.points[1][0])-n.selectionPadding,width:Math.abs(t.points[0][0]-t.points[1][0])+2n.selectionPadding,y:Math.min(t.points[0][1],t.points[1][1])-n.selectionPadding,height:Math.abs(t.points[0][1]-t.points[1][1])+2n.selectionPadding}))(e,s);case"polygon":return Zs(e,s);case"curve":return y1(e,s);case"circle":return((t,n)=>({x:t.x-t.radius-n.selectionPadding,width:2(t.radius+n.selectionPadding),y:t.y-t.radius-n.selectionPadding,height:2(t.radius+n.selectionPadding)}))(e,s);case"ellipse":return((t,n)=>({x:t.x-t.radiusX-n.selectionPadding,width:2(t.radiusX+n.selectionPadding),y:t.y-t.radiusY-n.selectionPadding,height:2(t.radiusY+n.selectionPadding)}))(e,s);case"rect":case"square":return Rs(e,s);case"text":return((t,n)=>({x:t.x-n.selectionPadding,width:t.width+2n.selectionPadding,y:t.y-n.selectionPadding,height:t.height+2n.selectionPadding}))(e,s);case"picture":return((t,n)=>Rs(t,n))(e,s);default:return{x:0,y:0,width:100,height:100}}},O=(e,s)=>{const t=L1(e,s),n=(a=>[a.x+a.width/2,a.y+a.height/2])(t);return{borders:t,center:n}},V1=(e,s,t,n,a,i)=>{const o=a[0]-n[0],r=a[1]-n[1],c=a[0]-s[0],u=a[1]-s[1],d=t.rotation+Math.atan2(u,c)-Math.atan2(r,o);return{...e,rotation:p1(d,i)}},P1=(e,s,t,n,a,i,o)=>{switch(n.type){case"line":return((r,c,u,d)=>{const h=[I(r[0],d),I(r[1],d)],{center:p}=O(c,d),f=Ze(h,c.rotation,p,d.canvasOffset),v=ne(["points",u.anchor],f,c);return dt(v,d)})(t,n,a,i);case"polygon":return((r,c,u,d)=>{const h=[I(r[0],d),I(r[1],d)],{center:p}=O(c,d),f=Ze(h,c.rotation,p,d.canvasOffset),v=ne(["points",u.anchor],f,c);return Ue(v,d)})(t,n,a,i);case"curve":return((r,c,u,d)=>{const h=[I(r[0],d),I(r[1],d)],{center:p}=O(c,d),f=Ze(h,c.rotation,p,d.canvasOffset),v=ne(["points",u.anchor],f,c);return Ge(v,d)})(t,n,a,i);case"brush":return((r,c,u,d,h)=>{const{borders:p}=O({...c,scaleX:1,scaleY:1},d),{borders:f}=O(c,d),{borderX:v,borderHeight:k,borderY:M,borderWidth:Q}=Oe(r,c,u,d,h),P=Math.max(0,p.width-2d.selectionPadding),S=Math.max(0,p.height-2d.selectionPadding),L=Math.max(0,Q-2d.selectionPadding),T=Math.max(0,k-2d.selectionPadding),E=P?L/P:1,Z=S?T/S:1;if(!P\|\|!S)return c;const H=Ve(v-f.x),C=Ve(M-f.y);return ze({...c,points:c.points.map(V=>V.map(([j,x])=>[j+H,x+C])),scaleX:E,scaleY:Z},d)})(t,n,a,i,o);case"circle":return((r,c,u,d)=>{const{borderX:h,borderHeight:p,borderY:f,borderWidth:v}=Oe(r,c,u,d,!0);return rt({...c,radius:Math.max(0,v/2-d.selectionPadding),x:h+v/2,y:f+p/2},d)})(t,n,a,i);case"ellipse":return((r,c,u,d,h=!1)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:k}=Oe(r,c,u,d,h);return ct({...c,radiusX:Math.max(0,k/2-d.selectionPadding),radiusY:Math.max(0,f/2-d.selectionPadding),x:p+k/2,y:v+f/2},d)})(t,n,a,i,o);case"rect":case"square":return((r,c,u,d,h=!1)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:k}=Oe(r,c,u,d,h);return ut({...c,width:Math.max(0,k-2d.selectionPadding),height:Math.max(0,f-2d.selectionPadding),x:p+d.selectionPadding,y:v+d.selectionPadding},d)})(t,n,a,i,s.type==="square"\|\|o);case"text":return((r,c,u,d,h)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:k}=Oe(c,u,d,h,!0),M=pt({...u,width:Math.max(0,k-2h.selectionPadding),height:Math.max(0,f-2h.selectionPadding),x:p+h.selectionPadding,y:v+h.selectionPadding},h);return{...M,fontSize:Ft(r,M.value,M.width,M.style?.fontBold??!1,M.style?.fontItalic??!1,M.style?.fontFamily)}})(e,t,n,a,i);case"picture":return((r,c,u,d,h)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:k}=Oe(r,c,u,d,!0);return ht({...c,width:Math.max(0,k-2d.selectionPadding),height:Math.max(0,f-2d.selectionPadding),x:p+d.selectionPadding,y:v+d.selectionPadding},d)})(t,n,a,i);default:return n}},Rt=(e,s,t,n)=>{switch(s.type){case"rect":case"square":return((a,i,o,r)=>ut({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"ellipse":return((a,i,o,r)=>ct({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"circle":return((a,i,o,r)=>rt({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"picture":return((a,i,o,r)=>ht({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"text":return((a,i,o,r)=>pt({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"line":return((a,i,o,r)=>dt({...i,points:i.points.map(([c,u])=>[I(c+a[0]-o[0],r),I(u+a[1]-o[1],r)])},r))(e,s,t,n);case"polygon":return((a,i,o,r)=>{const{borders:c}=O(i,r);return Ue({...i,points:i.points.map(([u,d])=>r.gridGap?[u+I(c.x+a[0]-o[0],r)-c.x,d+I(c.y+a[1]-o[1],r)-c.y]:[I(u+a[0]-o[0],r),I(d+a[1]-o[1],r)])},r)})(e,s,t,n);case"curve":return((a,i,o,r)=>{const{borders:c}=O(i,r);return Ge({...i,points:i.points.map(([u,d])=>r.gridGap?[u+I(c.x+a[0]-o[0],r)-c.x,d+I(c.y+a[1]-o[1],r)-c.y]:[I(u+a[0]-o[0],r),I(d+a[1]-o[1],r)])},r)})(e,s,t,n);case"brush":return((a,i,o,r)=>{const{borders:c}=O(i,r),u=r.gridGap?I(c.x+a[0]-o[0],r)-c.x:a[0]-o[0],d=r.gridGap?I(c.y+a[1]-o[1],r)-c.y:a[1]-o[1];return ze({...i,points:i.points.map(h=>h.map(([p,f])=>[p+u,f+d]))},r)})(e,s,t,n);default:return s}},Ke=(e,s)=>{switch(e.type){case"rect":case"square":return b1(e,s);case"ellipse":return Q1(e,s);case"circle":return f1(e,s);case"picture":return w1(e,s);case"text":return M1(e,s);case"line":return x1(e,s);case"polygon":return v1(e,s);case"curve":return m1(e,s);case"brush":return h1(e,s);default:return e}},zs=({ctx:e,shape:s,settings:t,selectionWidth:n,selectionColor:a,withAnchors:i=!0})=>{const{center:o}=O(s,t);switch(Pt(e,t,s.rotation,o),s.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((r,c,u,d,h,p)=>{if(c.selection&&(Ae(r,{fillColor:"transparent",strokeColor:u,lineWidth:d/h.canvasSize.scaleRatio}),c.selection.shapePath?r.stroke(c.selection.shapePath):r.stroke(c.selection.border),p&&!c.locked)){c.selection.shapePath&&r.stroke(c.selection.border),r.stroke(c.selection.line),Ae(r,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/h.canvasSize.scaleRatio});for(const f of c.selection.anchors)r.fill(f),r.stroke(f)}})(e,s,a,n,t,i);break;case"polygon":case"line":case"curve":(({ctx:r,shape:c,withAnchors:u,selectionWidth:d,selectionColor:h,settings:p})=>{if(c.selection&&(Ae(r,{fillColor:"transparent",strokeColor:h,lineWidth:d/p.canvasSize.scaleRatio}),c.selection.shapePath&&r.stroke(c.selection.shapePath),u&&!c.locked)){Ae(r,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio});for(const f of c.selection.anchors)r.fill(f),r.stroke(f)}})({ctx:e,shape:s,withAnchors:i,selectionWidth:n,selectionColor:a,settings:t})}e.restore()},H1=({ctx:e,selectionFrame:s,settings:t})=>{Pt(e,t),((n,a,i)=>{Ae(n,{fillColor:"rgba(170,170,170, 0.1)",strokeColor:"rgb(170,170,170)",lineWidth:1/i.canvasSize.scaleRatio}),n.fillRect(a[0][0],a[0][1],a[1][0]-a[0][0],a[1][1]-a[0][1]),n.strokeRect(a[0][0],a[0][1],a[1][0]-a[0][0],a[1][1]-a[0][1])})(e,s,t),e.restore()},$s=e=>{const s=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0],t=s.getAttribute("width"),n=s.getAttribute("height");let a;if(t\|\|n)a=e;else{const o=s.getAttribute("viewBox")??"0 0 300 300",[,,r,c]=o.split(" ");s.setAttribute("width",r??nt),s.setAttribute("height",c??nt),a=new XMLSerializer().serializeToString(s)}const i=new Blob([a],{type:"image/svg+xml"});return URL.createObjectURL(i)},Os=e=>(e instanceof File?e.name:e).includes(".svg"),Us=e=>Os(e)?fetch(e).then(s=>s.text()).then(s=>$s(s)):fetch(e).then(s=>s.blob()).then(s=>URL.createObjectURL(s)),Gs=(e,s)=>{const t=document.createElement("a");t.href=e,t.download=s,document.body.appendChild(t),t.click(),document.body.removeChild(t)},T1=e=>{const s=document.createElement("canvas");s.width=e.width,s.height=e.height;const t=s.getContext("2d");return t?(t.drawImage(e,0,0),s.toDataURL("image/png")):""},Bs=(e,s,t,n)=>{const a=document.createElement("canvas");a.width=s,a.height=t;const i=a.getContext("2d");if(!i)return"";i.clearRect(0,0,s,t),ws(i);for(let o=e.length-1;o>=0;o--)Ws(i,e[o],ne(["canvasSize","scaleRatio"],1,n));return a.toDataURL("image/png")},A1=(e,s,t)=>{return a=Dt(e,s,t),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(a))}`;var a},Z1=e=>{const s=["img","id","selection","path","arrows"];return e.map(t=>t.type!=="picture"\|\|t.src.startsWith("http")?jt(s,t):jt(s,{...t,src:T1(t.img)}))},Dt=(e,s,t)=>({shapes:Z1(e),config:{width:s,height:t}}),Xs=(e,s)=>Ke({...e,id:ee(`${e.type}_`)},s),E1=e=>{const s=g.useRef([]),t=g.useRef({dataChanged:[]}),[n,a]=g.useState(void 0),[i,o]=g.useState(void 0),[r,c]=g.useState(void 0),[u,d]=g.useState({states:[{shapes:[],selectedShape:void 0}],cursor:0}),h=u.cursor>0,p=u.cursor<u.states.length-1,f=s.current.length>0,v=g.useCallback(()=>{d(m=>Cs(m.states[m.cursor].shapes,s.current)?m:{states:[...m.states.slice(0,m.cursor+1),{shapes:s.current,selectedShape:i}],cursor:m.cursor+1})},[i]),k=g.useCallback(m=>{s.current=[m,...s.current]},[]),M=g.useCallback((m,y,b)=>{if(m.target&&"className"in m.target&&![Ss,xs].includes(m.target.className))return void c(void 0);const N=s.current.find(R=>R.id===i?.id?!!Je(i,b,e):!!Hs(y,R,b,e));c(N)},[e,i]),Q=g.useCallback(async(m,y=300,b=300)=>{const N=await k1(m,y,b,e);return k(N),v(),N},[k,v,e]),P=g.useCallback((m,y=!1)=>{s.current=s.current.map(b=>b.id===i?.id?m:b),o(b=>b?.id===m.id?m:b),y&&v()},[i,v]),S=g.useCallback(m=>{const y=m.map(b=>jt(["chosen"],b));s.current=y,v()},[v]),L=g.useCallback(m=>{o(y=>y?.id===m.id?void 0:y),s.current=s.current.filter(y=>y.id!==m.id),v()},[v]),T=g.useCallback(m=>{d(y=>{const b=m(y);return s.current=y.states[b].shapes,o(y.states[b].selectedShape),ne("cursor",b,y)})},[]),E=g.useCallback(()=>{T(m=>Math.max(0,m.cursor-1))},[T]),Z=g.useCallback(()=>{T(m=>Math.min(m.states.length-1,m.cursor+1))},[T]),H=g.useCallback((m=[],y=!1)=>{o(void 0),s.current=m,d(b=>y?{states:[{shapes:m,selectedShape:void 0}],cursor:0}:{states:[...b.states.slice(0,b.cursor+1),{shapes:m,selectedShape:void 0}],cursor:b.cursor+1})},[]),C=g.useCallback((m,y)=>{const b=s.current,N=b.findIndex(X=>X.id===m),R=b.findIndex(X=>X.id===y);S(N<R?[...b.slice(0,N),...b.slice(N+1,R+1),b[N],...b.slice(R+1,b.length)]:[...b.slice(0,R),b[N],...b.slice(R,N),...b.slice(N+1,b.length)])},[S]),V=g.useCallback(m=>{const y=s.current,b=y.findIndex(R=>R.id===m.id);if(b<0)return;const N=ne("visible",m.visible===!1,m);o(R=>R?.id===N.id?N:R),S(ne(b,N,y))},[S]),j=g.useCallback(m=>{const y=s.current,b=y.findIndex(R=>R.id===m.id);if(b<0)return;const N=ne("locked",!m.locked,m);o(R=>R?.id===N.id?N:R),S(ne(b,N,y))},[S]),x=g.useCallback((m,y)=>{Object.hasOwn(t.current,m)&&(t.current[m]=[...t.current[m],y])},[]),F=g.useCallback((m,y)=>{if(Object.hasOwn(t.current,m))if(y){const b=t.current[m].findIndex(N=>N===y);t.current[m]=[...t.current[m].slice(0,b),...t.current[m].slice(b+1)]}else t.current[m]=[]},[]),{canvasSize:{width:w,height:A}}=e;g.useEffect(()=>{const m=Dt(s.current,w,A);for(const y of t.current.dataChanged)y(m)},[w,A,u]),g.useEffect(()=>{s.current=s.current.map(m=>Ke(m,e)),o(m=>m===void 0?void 0:s.current.find(y=>y.id===m.id))},[e]);const D=g.useCallback((m,y)=>{a(b=>{const N=[b?.[0]??[y[0],y[1]],[y[0],y[1]]],R=s.current.filter(X=>((ie,W,G,oe)=>{const{selectionPadding:z,canvasOffset:Y}=oe,{center:pe,borders:ue}=O(W,oe),J=Ze(G[0],W.rotation,pe,Y),re=Ze(G[1],W.rotation,pe,Y),me=Math.round(Math.min(J[0],re[0])-z/2),le=Math.round(Math.max(J[0],re[0])+z),be=Math.round(Math.min(J[1],re[1])-z/2),ye={x:me,y:be,width:le-me,height:Math.round(Math.max(J[1],re[1])+z)-be},Ce=Ts(ue,ye);if(!Ce)return!1;if(ue.width<=1\|\|ue.height<=1\|\|!("path"in W)\|\|!W.path)return!0;if(ie.lineWidth=(W.style?.lineWidth??0)+10,W.type==="brush"){const te=W.points.flat(),we=Math.min(...te.map(ae=>ae[0])),He=Math.min(...te.map(ae=>ae[1]));for(const ae of W.points){if(ae.length<1)break;if(ae.length<2){const ge=he(ae[0],we,He,W.scaleX,W.scaleY);if(ks(Ce,{x:ge[0],y:ge[1],radius:(W.style?.lineWidth??1)/2}))return!0}for(let ge=0;ge<ae.length-1;ge++){const K=he(ae[ge],we,He,W.scaleX,W.scaleY),ke=he(ae[ge+1],we,He,W.scaleX,W.scaleY),Xe=Ts({x:Math.min(K[0],ke[0]),y:Math.min(K[1],ke[1]),width:Math.abs(K[0]-ke[0]),height:Math.abs(K[1]-ke[1])},ye);if(Xe){const Ee=new Path2D;if(Ee.moveTo(...K),Ee.lineTo(...ke),As({ctx:ie,path:Ee,rect:Xe,offset:10,checkFill:!1}))return!0}}}return!1}const Pe=!(!W.style?.fillColor\|\|W.style?.fillColor==="transparent");return As({ctx:ie,path:W.path,rect:Ce,offset:10,checkFill:Pe})})(m,X,N,e));return o(R?.[0]),N})},[e]);return{registerEvent:x,unregisterEvent:F,shapesRef:s,selectedShape:i,hoveredShape:r,selectionFrame:n,setSelectionFrame:a,refreshSelectedShapes:D,addShape:k,addPictureShape:Q,moveShapes:C,saveShapes:v,setSelectedShape:o,refreshHoveredShape:M,toggleShapeVisibility:V,toggleShapeLock:j,removeShape:L,updateShape:P,backwardShape:E,forwardShape:Z,clearShapes:H,canGoBackward:h,canGoForward:p,canClear:f}},Ys=(e,s=!1)=>{const t=(a,i)=>{if(Array.isArray(a))return i},n=e.map(a=>{if(typeof a!="object")return null;switch(a.type){case"brush":return ve(t,as,a);case"circle":return ve(t,us,a);case"curve":return ve(t,ls,a);case"ellipse":return ve(t,hs,a);case"line":return ve(t,os,a);case"polygon":return ve(t,rs,a);case"rect":return ve(t,cs,a);case"square":return ve(t,ds,a);case"text":return ve(t,ps,a)}return null});return it(s?[...n,Ct]:n)},F1=(e,s,t,n,a,i,o)=>{let r=!1;if(a){r=Je(a,t,n,!0,i?20:void 0);const u=((d,h,p,f)=>{if(d.mode==="translate")return{mode:"translate",cursorStartPosition:p,originalShape:h};if(d.mode==="rotate"){const{center:v}=O(h,f);return{mode:"rotate",cursorStartPosition:p,originalShape:h,center:[v[0],v[1]]}}return d.mode==="resize"?{mode:"resize",cursorStartPosition:p,originalShape:h,anchor:d.anchor}:void 0})(r\|\|{mode:"default"},a,t,n);if(u?.mode==="resize"\|\|u?.mode==="rotate")return{shape:a,mode:u}}const c=s.find(u=>u.id===a?.id?!!r:!!Hs(e,u,t,n));return c?{shape:c,mode:{mode:"translate",cursorStartPosition:t,originalShape:c}}:{shape:void 0,mode:{mode:o?"selectionFrame":"default"}}},R1=({disabled:e=!1,addShape:s,drawCanvasRef:t,setActiveTool:n,refreshHoveredShape:a,shapes:i,selectionMode:o,activeTool:r,isInsideComponent:c,setCanvasOffset:u,selectedShape:d,selectionCanvasRef:h,canvasOffsetStartPosition:p,refreshSelectedShapes:f,setSelectedShape:v,setSelectionFrame:k,setCanvasOffsetStartPosition:M,updateSingleShape:Q,saveShapes:P,setSelectionMode:S,settings:L,isShiftPressed:T,withFrameSelection:E})=>{const[Z,H]=g.useState({mode:"default"}),{registerDoubleClickEvent:C,unRegisterDoubleClickEvent:V}=(()=>{const j=g.useRef(void 0),x=g.useRef(void 0),F=w=>{const A=new Date().getTime();j.current&&A<j.current+300&&x.current?.(w),j.current=new Date().getTime()};return{registerDoubleClickEvent:(w,A)=>{x.current=A,w.addEventListener("click",F),w.addEventListener("touchend",F)},unRegisterDoubleClickEvent:w=>{w.removeEventListener("click",F),w.removeEventListener("touchend",F)}}})();return g.useEffect(()=>{const j=x=>window.requestAnimationFrame(()=>((F,w,A,D,m,y,b,N,R,X,ie,W,G,oe)=>{const z=w.current?.getContext("2d");if(!z)return;const Y=Zt(F,w.current,G);if(A.type!=="move"\|\|y===void 0)if(m.mode!=="selectionFrame"){if(Ps(F)\|\|N(F,z,Y,G),D!==void 0&&!D.locked)if(m.mode==="default"\|\|m.mode==="textedition")b(Je(D,Y,G,!0)\|\|{mode:"default"});else{const pe=w.current?.getContext("2d");if(!pe)return;const ue=g1(pe,D,Y,m,G,oe);R(ue),ie(ue)}}else W(z,Y,G);else X([Y[0]-y[0],Y[1]-y[1]])})(x,h,r,d,o,p,H,a,Q,u,v,f,L,T));if(c)return document.addEventListener("mousemove",j),document.addEventListener("touchmove",j),()=>{document.removeEventListener("mousemove",j),document.removeEventListener("touchmove",j)}},[c,h,d,o,p,Q,r,u,v,a,f,L,T]),g.useEffect(()=>{const j=()=>{o.mode!=="textedition"&&o.mode!=="default"&&(S({mode:"default"}),k(void 0),P())};return c&&(document.addEventListener("mouseup",j),document.addEventListener("touchend",j)),()=>{c&&(document.removeEventListener("mouseup",j),document.removeEventListener("touchend",j))}},[c,o,P,k,S]),g.useEffect(()=>{const j=h.current;if(!j)return;const x=j.getContext("2d");if(!x\|\|e)return;const F=w=>{w.preventDefault();const A=Zt(w,h.current,L);if(r.type==="selection"){const{shape:D,mode:m}=F1(x,i,A,L,d,Ps(w),E);v(D),S(m),m.mode==="selectionFrame"&&k([[A[0],A[1]],[A[0],A[1]]])}else if(r.type==="move")M(A);else if(Qs.some(D=>D===r.type)){const D=t.current?.getContext("2d");if(!D)return;if(r.type==="brush"){if(d&&d.type==="brush"){const m=((y,b,N)=>{const R={...y,points:ne(y.points.length,[[Math.round(b[0]),Math.round(b[1])]],y.points)};return ze(R,N)})(d,A,L);Q(m),v(m)}else{const m=Is(D,r,A,L);if(!m)return;s(m),v(m)}S({mode:"brush"})}else if(r.type!=="picture"){const m=Is(D,r,A,L);s(m),n(Se),v(m),S({mode:"resize",cursorStartPosition:[A[0]+L.selectionPadding,A[1]+L.selectionPadding],originalShape:m,anchor:r.type==="line"\|\|r.type==="polygon"\|\|r.type==="curve"?0:[1,1]})}}};return j.addEventListener("mousedown",F,{passive:!1}),j.addEventListener("touchstart",F,{passive:!1}),()=>{j.removeEventListener("mousedown",F),j.removeEventListener("touchstart",F)}},[e,h,t,d,r,M,i,Q,s,n,v,S,k,L,E]),g.useEffect(()=>{const j=h.current;if(j)return c?(C(j,x=>{if(r.type==="selection"&&d?.type==="text"){const F=Zt(x,h.current,L);Je(d,F,L)&&S({mode:"textedition",defaultValue:d.value})}}),()=>{V(j)}):void 0},[C,V,c,h,r,d,S,L]),{hoverMode:Z}},D1=/(<([^>]+)>)/gi,N1=/<(\/)?div(\/?\s?)>/gi,I1=e=>{const s=(t=>{const n=document.createElement("textarea");return n.innerHTML=t,n.value})(e).split("<div>").flatMap(t=>{const n=t.replaceAll(N1,"");return n===""?void 0:n.replaceAll(D1,"")});return it(s)},W1=({disabled:e=!1,scaleRatio:s,shape:t,defaultValue:n,updateValue:a,saveShapes:i,settings:o})=>{const r=g.useRef(null),c=g.useRef(i);g.useEffect(()=>{if(!r.current)return;const d=r.current,h=p=>{p.preventDefault();const f=p.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,f)};return d.addEventListener("paste",h),d.innerHTML=n.map(p=>`<div>${p===""?"<br/>":p}</div>`).join(""),d.focus(),()=>{d.removeEventListener("paste",h)}},[n]),g.useEffect(()=>{const d=c.current;return()=>{d()}},[]);const u=g.useMemo(()=>{const{borders:d,center:h}=O(t,o);return ce({point:[d.x,d.y],rotation:-t.rotation,origin:h})},[t,o]);return l.jsx("div",{className:"react-paint-editor-toolbox-edittextbox",ref:r,"data-fontbold":t.style?.fontBold??!1,"data-fontitalic":t.style?.fontItalic??!1,contentEditable:!e,onInput:d=>{a(I1(d.target.innerHTML))},style:{"--react-paint-editor-toolbox-edittextbox-transform":`translate3D(${u[0]s}px, ${u[1]s}px, 0) rotate(${At(t.rotation)}deg)`,"--react-paint-editor-toolbox-edittextbox-fontsize":t.fontSizes+"px","--react-paint-editor-toolbox-edittextbox-padding":o.selectionPaddings+"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??_e}})},z1=(e,s,t,n,a)=>{const{canvasSize:{width:i,height:o}}=t;e.clearRect(0,0,i,o),ws(e),t.gridGap&&((r,c,u,d)=>{const{gridGap:h,canvasOffset:p,canvasSize:{scaleRatio:f}}=d;r.strokeStyle="rgb(220,220,220)",r.lineWidth=1,r.save(),r.scale(f,f),r.beginPath();const v=-p[0]%h,k=-p[1]%h,M=Math.ceil(c/f/h),Q=Math.ceil(u/f/h);for(let P=0;P<M;P++)r.moveTo(v+(P+1)h,k),r.lineTo(v+(P+1)h,k+u/f);for(let P=0;P<Q;P++)r.moveTo(v,k+(P+1)h),r.lineTo(v+c/f,k+(P+1)h);r.stroke(),r.restore()})(e,i,o,t);for(let r=n.length-1;r>=0;r--)s.mode==="textedition"&&n[r]===a\|\|Ws(e,n[r],t)},$1=g.forwardRef(({canGrow:e,disabled:s=!1,canvasSize:t,shapes:n,addShape:a,updateSingleShape:i,selectedShape:o,setSelectedShape:r,setSelectionFrame:c,hoveredShape:u,selectionFrame:d,refreshHoveredShape:h,refreshSelectedShapes:p,saveShapes:f,activeTool:v,setActiveTool:k,canvasOffsetStartPosition:M,setCanvasOffsetStartPosition:Q,setCanvasOffset:P,isInsideComponent:S,selectionMode:L,setSelectionMode:T,selectionWidth:E,selectionColor:Z,settings:H,isEditMode:C,isShiftPressed:V,withFrameSelection:j,withSkeleton:x},F)=>{const w=g.useRef(null),A=g.useRef(null);g.useImperativeHandle(F,()=>w.current);const{hoverMode:D}=R1({disabled:s,addShape:a,drawCanvasRef:w,setActiveTool:k,shapes:n,selectionMode:L,activeTool:v,isInsideComponent:S,setCanvasOffset:P,selectedShape:o,selectionCanvasRef:A,canvasOffsetStartPosition:M,setSelectedShape:r,setSelectionFrame:c,refreshHoveredShape:h,refreshSelectedShapes:p,setCanvasOffsetStartPosition:Q,updateSingleShape:i,saveShapes:f,setSelectionMode:T,isShiftPressed:V,withFrameSelection:j,settings:H}),m=g.useCallback(y=>{if(o?.type!=="text")return;const b=w.current?.getContext("2d");if(!b)return;const N=Ke(j1(b,o,y,H),H);i(N)},[i,o,H]);return g.useEffect(()=>{const y=w.current?.getContext("2d");y&&window.requestAnimationFrame(()=>z1(y,L,H,n,o))},[n,L,o,H]),g.useEffect(()=>{const y=A.current?.getContext("2d");y&&window.requestAnimationFrame(()=>((b,N,R,X,ie,W,G,oe,z,Y)=>{b.clearRect(0,0,R.canvasSize.width,R.canvasSize.height),Y&&oe&&oe.id!==G?.id&&X.type==="selection"&&N.mode==="default"&&zs({ctx:b,shape:oe,settings:R,selectionWidth:ie,selectionColor:W,withAnchors:!1}),G&&X.type!=="brush"&&zs({ctx:b,shape:G,settings:R,selectionWidth:ie,selectionColor:W,withAnchors:N.mode!=="textedition"}),z&&H1({ctx:b,selectionFrame:z,settings:R})})(y,L,H,v,E,Z,o,u,d,x))},[u,d,L,o,v,H,E,Z,x]),l.jsx("div",{className:"react-paint-canvas-box",children:l.jsxs("div",{className:"react-paint-canvas-container","data-grow":e,children:[l.jsx("canvas",{className:Ss,ref:w,"data-grow":e,width:t.width,height:t.height}),C&&l.jsx("canvas",{className:xs,ref:A,width:t.width,height:t.height,"data-grow":e,style:{"--react-paint-canvas-cursor":v.type!=="selection"&&v.type!=="move"\|\|D.mode==="resize"?"crosshair":v.type==="move"\|\|D.mode==="translate"?"move":D.mode==="rotate"?"grab":"default"}}),C&&L.mode==="textedition"&&o?.type==="text"&&l.jsx(W1,{scaleRatio:t.scaleRatio,disabled:s,shape:o,defaultValue:L.defaultValue,updateValue:m,saveShapes:f,settings:H})]})})}),qs="ArrowUp",_s="ArrowDown",Js="ArrowLeft",Ks="ArrowRight",O1="Delete",U1="Backspace",G1="Escape",e1="Shift",B1="z",X1="Z",Y1="y",q1="Y",t1="copy",s1="paste",_1=({isInsideComponent:e,selectedShape:s,isEditingText:t,settings:n,setSelectedShape:a,removeShape:i,pasteShape:o,updateShape:r,backwardShape:c,forwardShape:u,setShiftPressed:d})=>{const[h,p]=g.useState(void 0);return g.useEffect(()=>{const f=Q=>{s&&(t\|\|(Q.preventDefault(),p({...s})))},v=Q=>{h&&(t\|\|(Q.preventDefault(),o(((P,S)=>({...Rt([20,20],P,[0,0],S),id:ee(`${P.type}_`)}))(h,n))))},k=Q=>{Q.key===e1&&d(!1)},M=Q=>{if(Q.metaKey\|\|Q.ctrlKey){if(Q.key===X1\|\|Q.key===B1)return Q.preventDefault(),Q.stopPropagation(),void c();if(Q.key===q1\|\|Q.key===Y1)return Q.preventDefault(),Q.stopPropagation(),void u()}if(Q.key===e1)return void d(!0);if(!s)return;if(Q.key===G1)return void a(void 0);if(t)return;const P={[Js]:[n.gridGap?-n.gridGap:-1,0],[Ks]:[n.gridGap?n.gridGap:1,0],[_s]:[0,n.gridGap?n.gridGap:1],[qs]:[0,n.gridGap?-n.gridGap:-1]};switch(Q.key){case Js:case Ks:case _s:case qs:r(Rt(P[Q.key],s,[0,0],n));break;case O1:case U1:i(s)}};if(e)return document.addEventListener("keydown",M),document.addEventListener("keyup",k),document.addEventListener(t1,f),document.addEventListener(s1,v),()=>{document.removeEventListener("keydown",M),document.removeEventListener("keyup",k),document.removeEventListener(t1,f),document.removeEventListener(s1,v)}},[e,h,t,s,n,r,i,a,o,c,u,d]),{}},J1=({isLoading:e=!1})=>{const[s,t]=g.useState("hidden");return g.useEffect(()=>{if(!e){t("fadeOut");const n=setTimeout(()=>t("hidden"),300);return()=>{clearTimeout(n)}}t("visible")},[e]),s==="hidden"?null:l.jsx("div",{className:"react-paint-editor-loading","data-loading":s,style:{"--react-paint-editor-loading-zindex":l1,"--react-paint-editor-loading-transition-duration":"300ms"},children:l.jsxs("div",{className:"react-paint-editor-loader",children:[l.jsx("div",{}),l.jsx("div",{}),l.jsx("div",{}),l.jsx("div",{})]})})},K1="infos",en=4e3,tn=({type:e,text:s,duration:t})=>{const[n,a]=g.useState(!1);return g.useEffect(()=>{const i=setTimeout(()=>{a(!0)},100),o=setTimeout(()=>{a(!1)},t-500-100);return()=>{clearTimeout(i),clearTimeout(o)}},[t]),l.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+n,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:s})},sn=({snackbarList:e})=>l.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":c1},children:e.map(s=>l.jsx(tn,{...s},s.id))}),$=g.forwardRef((e,s)=>{if(e.type==="file"\|\|e.type==="color"){const{hidden:d=!1,disabled:h=!1,selected:p=!1,icon:f,children:v,className:k="",title:M,onClick:Q,...P}=e;return l.jsxs("label",{className:`react-paint-editor-button ${k}`,title:M,onClick:Q,"data-disabled":+h,"data-selected":+p,"data-hidden":+d,children:[l.jsx("input",{ref:s,disabled:h,...P}),l.jsxs("span",{className:"react-paint-editor-button-content",children:[v&&l.jsx("span",{className:"react-paint-editor-button-children",children:v}),f&&l.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:f}})]})]})}const{hidden:t=!1,disabled:n=!1,selected:a=!1,icon:i,children:o,type:r="button",className:c="",...u}=e;return l.jsx("button",{className:`react-paint-editor-button ${c}`,ref:s,disabled:n,"data-disabled":+n,"data-selected":+a,"data-hidden":+t,type:r,...u,children:l.jsxs("span",{className:"react-paint-editor-button-content",children:[o&&l.jsx("span",{className:"react-paint-editor-button-children",children:o}),i&&l.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:i}})]})})}),Be=({children:e,title:s="",className:t="",position:n="bottom",fitContainer:a=!1,alignment:i="center"})=>l.jsxs("div",{className:`react-paint-editor-panel ${t}`,"data-fitcontainer":a,"data-position":n,"data-alignment":i,style:{"--react-paint-editor-panel-zindex":is},children:[s&&l.jsx("h3",{className:"react-paint-editor-panel-title",children:s}),e]}),nn=e=>{switch(e){case"brush":return Gt;case"line":return qt;case"polygon":return xt;case"curve":return _t;case"rect":case"square":return Qt;case"circle":case"ellipse":return St;case"text":return Yt;case"picture":return bt;case"triangle":return""}},an=({disabled:e=!1,shape:s,selected:t,layoutDragging:n,toggleShapeVisibility:a,toggleShapeLock:i,setLayoutDragging:o,handleRemove:r,handleSelect:c,onMoveShapes:u})=>{const d=g.useRef(null),{isOver:h}=(({disabled:p=!1,ref:f,shape:v,layoutDragging:k,setLayoutDragging:M,handleSelect:Q,onMoveShapes:P})=>{const[S,L]=g.useState(!1);return g.useEffect(()=>{k\|\|L(!1)},[k]),g.useEffect(()=>{const T=f.current;if(!T)return;const E=()=>{M(void 0)},Z=x=>(x.preventDefault&&x.preventDefault(),!1),H=x=>{Q(v),x.dataTransfer&&(x.dataTransfer.effectAllowed="move",x.dataTransfer.setData("draggableShapeId",v.id),M(v.id))},C=()=>{k!==v.id&&L(!0)},V=()=>{L(!1)},j=x=>(x.stopPropagation(),x.dataTransfer&&P(x.dataTransfer.getData("draggableShapeId"),v.id),!1);return p\|\|(T.addEventListener("dragstart",H),T.addEventListener("dragend",E),T.addEventListener("dragover",Z),T.addEventListener("dragenter",C),T.addEventListener("dragleave",V),T.addEventListener("drop",j)),()=>{p\|\|(T.removeEventListener("dragstart",H),T.removeEventListener("dragend",E),T.removeEventListener("dragover",Z),T.removeEventListener("dragenter",C),T.removeEventListener("dragleave",V),T.removeEventListener("drop",j))}},[p,f,v,M,Q,P,k]),{isOver:S}})({disabled:e,ref:d,shape:s,layoutDragging:n,setLayoutDragging:o,handleSelect:c,onMoveShapes:u});return l.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(n===s.id),"data-is-over":+h,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),c(s))},"data-selected":+t,ref:d,children:[l.jsx("span",{dangerouslySetInnerHTML:{__html:nn(s.type)}}),l.jsx("span",{children:s.id}),l.jsx("div",{className:"react-paint-editor-layouts-separator"}),l.jsx($,{className:"react-paint-editor-layouts-visible-button",title:s.visible?"Hide":"Show","data-visible":s.visible!==!1,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),a(s))},icon:s.visible===!1?'<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>':'<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>'}),l.jsx($,{className:"react-paint-editor-layouts-locked-button",title:s.locked?"Locked":"Unlocked","data-locked":!!s.locked,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),i(s))},icon:s.locked?'<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>':'<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>'}),l.jsx($,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),r(s))},icon:Bt})]})},on=({gridFormat:e,setGridFormat:s,disabled:t=!1,shapes:n,removeShape:a,toggleShapeVisibility:i,toggleShapeLock:o,selectedShape:r,moveShapes:c,selectShape:u,isLayoutPanelShown:d})=>{const[h,p]=g.useState(void 0);return d?l.jsx(Be,{alignment:"right",className:"react-paint-editor-layouts-panel",children:l.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:l.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[l.jsxs("div",{className:"react-paint-editor-layouts-row",children:[l.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),l.jsx($,{icon:'<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>',className:"react-paint-editor-layouts-grid-button",selected:e==="none",disabled:t,onClick:()=>s("none")}),["small","medium","large"].map(f=>l.jsx($,{className:"react-paint-editor-layouts-grid-button",selected:e===f,disabled:t,onClick:()=>s(f),children:f.charAt(0).toUpperCase()},f))]}),l.jsx("hr",{}),l.jsx("div",{className:"react-paint-editor-layouts",children:n.length===0?l.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):n.map(f=>l.jsx(an,{shape:f,disabled:t,layoutDragging:h,setLayoutDragging:p,selected:r?.id===f.id,handleSelect:u,handleRemove:a,onMoveShapes:c,toggleShapeVisibility:i,toggleShapeLock:o},f.id))})]})})}):null},Nt=({children:e,onClose:s,position:t="center",className:n=""})=>l.jsxs("div",{className:"react-paint-editor-modal","data-position":t,style:{"--react-paint-editor-modal-zindex":is},children:[l.jsx("div",{className:"react-paint-editor-modal-mask",onClick:s}),l.jsx("div",{className:`react-paint-editor-modal-panel ${n}`,children:e})]}),gt=({selectedSettings:e,setSelectedSettings:s,title:t="Choisissez une couleur",mode:n="fill",disabled:a=!1,values:i,field:o,value:r="",valueChanged:c})=>{const[u]=g.useState(ee("settings_")),d=e===u;return i.length?l.jsxs(l.Fragment,{children:[l.jsx($,{selected:d,title:t,disabled:a,onClick:()=>{s(h=>h===u?void 0:u)},icon:r==="transparent"?n==="fill"?ss:ts:void 0,children:r!=="transparent"&&l.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":n,style:{"--react-paint-editor-colorfield-color-value":r}})}),d&&l.jsx(Be,{title:t,alignment:"left",children:l.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[i.map((h,p)=>l.jsx($,{title:h,selected:h===r,color:h,icon:h==="transparent"?n==="fill"?ss:ts:void 0,onClick:()=>{c(o,h)},children:h!=="transparent"&&l.jsx("div",{className:"react-paint-editor-colorfield-color",color:h,"data-mode":n,style:{"--react-paint-editor-colorfield-color-value":h}})},h)),l.jsx($,{type:"color",title:"Custom color",selected:!i.includes(r),value:r,onChange:h=>{const p=+h.target.value;c(o,Number.isNaN(p)?h.target.value:p)},children:l.jsx("div",{className:"react-paint-editor-colorfield-customcolor",style:{"--react-paint-editor-colorfield-color-value":i.includes(r)?"var(--react-paint-editor-app-font-color)":r},children:l.jsx("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},rn=({disabled:e=!1,selectedShape:s,removeShape:t})=>l.jsx($,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{t(s)},icon:Bt}),It=({CustomOption:e,selectedSettings:s,setSelectedSettings:t,title:n="Choisissez l'option",disabled:a=!1,field:i,icon:o,values:r,defaultValue:c,valueChanged:u})=>{const[d]=g.useState(ee("settings_")),h=s===d;return r.length?l.jsxs(l.Fragment,{children:[l.jsx($,{selected:h,title:n,icon:o,disabled:a,onClick:()=>{t(p=>p===d?void 0:d)}}),h&&l.jsx(Be,{title:n,alignment:"left",fitContainer:!0,children:l.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:r.map(p=>l.jsx($,{title:`${p}`,onClick:()=>(f=>{u(i,f)})(p),selected:c===p,style:{"--react-paint-editor-button-padding":"16px"},children:l.jsx(e,{children:p})},p))})})]}):null},ln=({children:e})=>l.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),n1=({selectedSettings:e,setSelectedSettings:s,disabled:t=!1,values:n,defaultValue:a,valueChanged:i})=>n.length?l.jsx(It,{selectedSettings:e,setSelectedSettings:s,CustomOption:ln,title:"Police",icon:'<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>',disabled:t,field:"fontFamily",values:n,defaultValue:a,valueChanged:i}):null,cn=({disabled:e,toggleLayoutPanel:s})=>l.jsx($,{title:"Toggle layers panel",disabled:e,onClick:s,icon:'<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>',className:"react-paint-editor-layout-button"}),dn=({children:e})=>l.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[l.jsx("span",{className:"react-paint-editor-linearrow-left"}),l.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),i1=({selectedSettings:e,setSelectedSettings:s,disabled:t=!1,values:n,defaultValue:a,valueChanged:i})=>n.length?l.jsx(It,{selectedSettings:e,setSelectedSettings:s,CustomOption:dn,title:"Flèches",icon:'<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>',disabled:t,field:"lineArrow",values:n,defaultValue:a,valueChanged:i}):null,un=({children:e})=>l.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{})]}),a1=({selectedSettings:e,setSelectedSettings:s,disabled:t=!1,values:n,defaultValue:a,valueChanged:i})=>n.length?l.jsx(It,{selectedSettings:e,setSelectedSettings:s,CustomOption:un,icon:'<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>',title:"Type de traits",disabled:t,field:"lineDash",values:n,defaultValue:a,valueChanged:i}):null,et=({selectedSettings:e,setSelectedSettings:s,title:t="Choisissez l'intervalle",icon:n,disabled:a=!1,field:i,value:o=1,min:r=1,max:c=20,step:u=1,unity:d="",valueChanged:h})=>{const p=Math.round(o),[f]=g.useState(ee("settings_")),v=g.useRef(null);g.useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const k=e===f;return r===c?null:l.jsxs(l.Fragment,{children:[l.jsx($,{selected:k,title:t,disabled:a,icon:n,onClick:()=>{s(M=>M===f?void 0:f)}}),k&&l.jsx(Be,{title:t,alignment:"left",fitContainer:!0,children:l.jsx("div",{children:l.jsxs("label",{className:"react-paint-editor-rangefield",children:[l.jsx("input",{type:"range",min:r,max:c,step:u,value:o,onChange:M=>{const Q=+M.target.value;h(i,Number.isNaN(Q)?M.target.value:Q,!1),v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{h(i,Number.isNaN(Q)?M.target.value:Q,!0)},1e3)}}),l.jsxs("span",{children:[p,d]})]})})})]})},o1=({selectedSettings:e,setSelectedSettings:s,disabled:t=!1,min:n,max:a,step:i,value:o,valueChanged:r})=>n===a?null:l.jsx(et,{selectedSettings:e,setSelectedSettings:s,icon:xt,title:"Nombre de points",disabled:t,field:"pointsCount",min:n,max:a,step:i,unity:"",value:o,valueChanged:r}),ft=({setSelectedSettings:e,disabled:s=!1,field:t,icon:n,values:a,value:i=!1,valueChanged:o})=>{const[r]=g.useState(ee("settings_"));return a.length!==2?null:l.jsx($,{onClick:()=>{e(c=>c===r?void 0:r),o(t,!i)},selected:i,disabled:s,icon:n})},Wt=({activeTool:e,selectedShape:s,selectedShapeTool:t,disabled:n,selectedSettings:a,setSelectedSettings:i,handleShapeStyleChange:o,handlePolygonLinesCount:r,handleShapeFontFamilyChange:c})=>s?l.jsx(l.Fragment,{children:t&&l.jsxs(l.Fragment,{children:["strokeColor"in t.settings&&l.jsx(gt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:s.style?.strokeColor,valueChanged:o,values:t.settings.strokeColor.values}),"fillColor"in t.settings&&l.jsx(gt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:n,field:"fillColor",value:s.style?.fillColor,valueChanged:o,values:t.settings.fillColor.values}),"lineWidth"in t.settings&&l.jsx(et,{selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",icon:es,disabled:n,field:"lineWidth",value:s.style?.lineWidth,valueChanged:o,unity:"px",min:t.settings.lineWidth.min,max:t.settings.lineWidth.max,step:t.settings.lineWidth.step}),"lineDash"in t.settings&&l.jsx(a1,{selectedSettings:a,setSelectedSettings:i,disabled:n,defaultValue:s.style?.lineDash,valueChanged:o,values:t.settings.lineDash.values}),"lineArrow"in t.settings&&l.jsx(i1,{selectedSettings:a,setSelectedSettings:i,disabled:n,defaultValue:s.style?.lineArrow,valueChanged:o,values:t.settings.lineArrow.values}),"pointsCount"in t.settings&&l.jsx(o1,{selectedSettings:a,setSelectedSettings:i,disabled:n,valueChanged:r,min:t.settings.pointsCount.min,max:t.settings.pointsCount.max,step:t.settings.pointsCount.step,value:s.style?.pointsCount}),"fontFamily"in t.settings&&l.jsx(n1,{selectedSettings:a,setSelectedSettings:i,disabled:n,valueChanged:c,values:t.settings.fontFamily.values,defaultValue:s.style?.fontFamily}),"fontBold"in t.settings&&l.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontBold",icon:Jt,valueChanged:c,values:t.settings.fontBold.values,value:s.style?.fontBold}),"fontItalic"in t.settings&&l.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontItalic",icon:Kt,valueChanged:c,values:t.settings.fontItalic.values,value:s.style?.fontItalic}),"opacity"in t.settings&&l.jsx(et,{selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:Xt,min:t.settings.opacity.min,max:t.settings.opacity.max,step:t.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:s.style?.opacity??100,valueChanged:o})]})}):"settings"in e?l.jsxs(l.Fragment,{children:["strokeColor"in e.settings&&l.jsx(gt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:o,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&l.jsx(gt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:n,field:"fillColor",value:e.settings.fillColor.default,valueChanged:o,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&l.jsx(et,{selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",disabled:n,field:"lineWidth",icon:es,value:e.settings.lineWidth.default,valueChanged:o,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&l.jsx(a1,{selectedSettings:a,setSelectedSettings:i,disabled:n,defaultValue:e.settings.lineDash.default,valueChanged:o,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&l.jsx(i1,{selectedSettings:a,setSelectedSettings:i,disabled:n,defaultValue:e.settings.lineArrow.default,valueChanged:o,values:e.settings.lineArrow.values}),"pointsCount"in e.settings&&l.jsx(o1,{selectedSettings:a,setSelectedSettings:i,disabled:n,valueChanged:r,min:e.settings.pointsCount.min,max:e.settings.pointsCount.max,step:e.settings.pointsCount.step,value:e.settings.pointsCount.default}),"fontFamily"in e.settings&&l.jsx(n1,{selectedSettings:a,setSelectedSettings:i,disabled:n,valueChanged:c,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&l.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontBold",icon:Jt,valueChanged:c,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&l.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontItalic",icon:Kt,valueChanged:c,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&l.jsx(et,{selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:Xt,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:e.settings.opacity.default,valueChanged:o})]}):null,hn=({width:e,disabled:s=!1,availableTools:t,updateToolSettings:n,layersManipulation:a,toggleLayoutPanel:i,activeTool:o,selectedShape:r,canvas:c,settings:u,updateShape:d,removeShape:h})=>{const[p,f]=g.useState(void 0),[v,k]=g.useState(!1),M=()=>{k(Z=>!Z)},Q=r?t.find(Z=>Z.id===r.toolId)\|\|t.find(Z=>Z.type===r.type):void 0,P=(Q?Object.keys(Q.settings).length+1:"settings"in o?Object.keys(o.settings).length:0)+(a?1:0),S=e<40P,L=(Z,H,C=!0)=>{r?(d(Ke(ne(["style",Z],H,r),u),C),Q&&n(Q.id,Z,H)):n(o.id,Z,H)},T=(Z,H)=>{if(r){if(r.type!=="text")return;const C=c?.getContext("2d");if(!C)return;const V=ne(["style",Z],H,r),j=Ft(C,V.value,V.width,V.style?.fontBold??!1,V.style?.fontItalic??!1,V.style?.fontFamily),x=Ke({...V,fontSize:j,height:jV.value.length},u);d(x,!0),Q&&n(Q.id,Z,H)}else n(o.id,Z,H)},E=(Z,H)=>{if(r){if(r.type!=="polygon"&&r.type!=="curve")return;d(r.type==="polygon"?((C,V,j)=>{const x=C.points.length;if(x===V)return C;if(x>V){const D=C.points.slice(0,V);return Ue({...C,points:D,style:{...C.style,pointsCount:D.length}},j)}const F=V-x,w=new Array(F).fill(void 0).map((D,m)=>[C.points[0][0]+(C.points[1][0]-C.points[0][0])(m+1)/(F+1),C.points[0][1]+(C.points[1][1]-C.points[0][1])(m+1)/(F+1)]),A=[C.points[0],...w,...C.points.slice(1,C.points.length)];return Ue({...C,points:A,style:{...C.style,pointsCount:A.length}},j)})(r,H,u):((C,V,j)=>{const x=C.points.length;if(x===V)return C;if(x>V){const D=C.points.slice(0,V);return Ge({...C,points:D,style:{...C.style,pointsCount:D.length}},j)}const F=V-x,w=new Array(F).fill(void 0).map((D,m)=>[C.points[0][0]+(C.points[1][0]-C.points[0][0])(m+1)/(F+1),C.points[0][1]+(C.points[1][1]-C.points[0][1])(m+1)/(F+1)]),A=[C.points[0],...w,...C.points.slice(1,C.points.length)];return Ge({...C,points:A,style:{...C.style,pointsCount:A.length}},j)})(r,H,u),!0),Q&&n(Q.id,Z,H)}else n(o.id,Z,H)};return l.jsxs(l.Fragment,{children:[l.jsxs("div",{className:"react-paint-editor-settings-bar",children:[l.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[S&&P>2&&l.jsx($,{disabled:s,onClick:M,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>'}),r?l.jsx(l.Fragment,{children:Q&&l.jsxs(l.Fragment,{children:[!S&&l.jsx(Wt,{activeTool:o,selectedShape:r,selectedShapeTool:Q,disabled:s,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:L,handlePolygonLinesCount:E,handleShapeFontFamilyChange:T}),l.jsx(rn,{disabled:s,selectedShape:r,removeShape:h})]})}):!S&&l.jsx(Wt,{activeTool:o,selectedShape:r,selectedShapeTool:Q,disabled:s,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:L,handlePolygonLinesCount:E,handleShapeFontFamilyChange:T})]}),l.jsx("div",{className:"react-paint-editor-settings-separator"}),a&&l.jsx(cn,{disabled:s,toggleLayoutPanel:i})]}),v&&l.jsx(Nt,{className:"react-paint-editor-settings-modal",onClose:M,position:"bottom",children:l.jsx(Wt,{activeTool:o,selectedShape:r,selectedShapeTool:Q,disabled:s,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:L,handlePolygonLinesCount:E,handleShapeFontFamilyChange:T})})]})},r1=({disabled:e=!1,withText:s=!1,loadFile:t,type:n,img:a,accept:i})=>{const o=g.useRef(null);return l.jsx($,{ref:o,type:"file",onClick:r=>{r.stopPropagation(),o.current&&(o.current.value="")},onChange:r=>{const c=r.target.files?.item(0);c&&t(c)},accept:i,title:n.label??n.type,icon:a,disabled:e,children:s?n.label:void 0})},de=({type:e,img:s,isActive:t,withText:n=!1,disabled:a=!1,setActive:i})=>l.jsx($,{disabled:a,selected:t,onClick:()=>{i(e)},title:e.label??e.type,icon:s,children:n?e.label:void 0}),pn=({activeTool:e,withActionsInMenu:s,hasActionToUndo:t=!1,hasActionToRedo:n=!1,hasActionToClear:a=!1,undoAction:i,redoAction:o,clearCanvas:r,alignment:c,group:u,vertical:d=!1,disabled:h=!1,withLoadAndSave:p,withExport:f,addPicture:v,loadFile:k,togglePictureUrlModal:M,saveFile:Q,exportCanvasInFile:P,withUploadPicture:S,withUrlPicture:L})=>{const[T,E]=g.useState(!1),[,Z]=g.useTransition(),H=u?.tools?.some(V=>V===e.type),C=(H?e.icon:u.img)??u.title;return g.useEffect(()=>{if(!T)return;const V=()=>{E(!1)};return document.addEventListener("click",V),()=>{document.removeEventListener("click",V)}},[T]),s\|\|S\|\|L\|\|p\|\|f?l.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[l.jsx($,{selected:H,title:u.title,disabled:h,onClick:()=>{Z(()=>{E(!0)})},icon:C}),T&&l.jsx(Be,{alignment:c,position:"top",children:l.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+d,children:[s&&l.jsxs(l.Fragment,{children:[l.jsx(de,{withText:!0,type:Ne,disabled:h\|\|!t,img:Ne.icon,isActive:e.id===Ne.id,setActive:i}),l.jsx(de,{withText:!0,type:Ie,disabled:h\|\|!n,img:Ie.icon,isActive:e.id===Ie.id,setActive:o}),l.jsx(de,{withText:!0,type:We,disabled:h\|\|!a,img:We.icon,isActive:e.id===We.id,setActive:r}),(S\|\|L\|\|p)&&l.jsx("hr",{})]}),S&&l.jsx(r1,{withText:!0,type:fs,disabled:h,loadFile:async V=>{E(!1),await v(V)},img:fs.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml"}),L&&l.jsx($,{disabled:h,selected:!1,onClick:M,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"}),(S\|\|L)&&p&&l.jsx("hr",{}),p&&l.jsxs(l.Fragment,{children:[l.jsx(r1,{withText:!0,type:gs,disabled:h,loadFile:V=>{E(!1),k(V)},img:gs.icon,accept:"application/JSON"}),l.jsx(de,{withText:!0,disabled:h,type:kt,img:kt.icon,isActive:e.id===kt.id,setActive:Q})]}),f&&l.jsx(de,{withText:!0,disabled:h,type:wt,img:wt.icon,isActive:e.id===wt.id,setActive:P})]})})]}):null},gn=({togglePictureUrlModal:e,addPicture:s})=>{const t=g.useRef(null);return g.useEffect(()=>{t.current&&t.current.focus()},[]),l.jsx(Nt,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,children:l.jsxs("form",{onSubmit:async n=>{n.preventDefault();const a=t.current?.value;a&&(await s(a),e())},children:[l.jsxs("label",{children:["URL ",l.jsx("input",{type:"text",ref:t})]}),l.jsx($,{onClick:e,children:"Annuler"}),l.jsx($,{type:"submit",selected:!0,children:"Ajouter"})]})})},fn=({activeTool:e,alignment:s,group:t,disabled:n=!1,setActiveToolFromId:a})=>{const i=g.useRef(null),[o,r]=g.useState(!1),[,c]=g.useTransition(),[u,d]=g.useState(void 0),h=v=>{d(v),a(v.id)};if(g.useEffect(()=>{if(!o)return;const v=k=>{!bs(k,i.current)&&r(!1)};return document.addEventListener("mousedown",v,{passive:!1}),document.addEventListener("touchstart",v,{passive:!1}),()=>{document.removeEventListener("mousedown",v),document.removeEventListener("touchstart",v)}},[o]),"type"in t)return l.jsx(de,{disabled:n,type:t,img:t.icon,isActive:e.id===t.id,setActive:h});if(!t.toolsType.length)return null;if(t.toolsType?.length===1)return l.jsx(de,{disabled:n,type:t.toolsType[0],img:t.toolsType[0].icon,isActive:e.id===t.toolsType[0].id,setActive:h});const p=t?.toolsType.find(v=>v.type===e.type)!==void 0,f=(u?u.icon:t.toolsType?.[0]?.icon)??t.title;return l.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[l.jsx($,{selected:p,title:t.title,disabled:n,onClick:()=>{u?a(u.id):t.toolsType?.[0]&&h(t.toolsType[0]),c(()=>{r(!0)})},icon:f}),o&&l.jsx(Be,{alignment:s,position:"top",children:l.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+t.vertical,ref:i,children:t.toolsType.map((v,k)=>l.jsx(de,{disabled:n,type:v,img:v.icon,isActive:e.id===v.id,setActive:h},v.id))})})]})},vn=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],mn=({width:e,disabled:s=!1,activeTool:t,hasActionToUndo:n=!1,hasActionToRedo:a=!1,hasActionToClear:i=!1,withLoadAndSave:o,withExport:r,clearCanvas:c,setActiveTool:u,undoAction:d,redoAction:h,addPicture:p,loadFile:f,saveFile:v,exportCanvasInFile:k,availableTools:M,withUrlPicture:Q,withUploadPicture:P})=>{const S=((w,A)=>{const D=A.flatMap(m=>{if(typeof m!="object")return w.filter(b=>b.type===m);const y=w.filter(b=>m.toolsType.includes(b.type));return y?{...m,toolsType:y}:null});return it(D)})(M,vn),L=e<40(5+S.length),T=e<40(2+S.length),[E,Z]=g.useState(!1),[H,C]=g.useState(!1),V=()=>{Z(w=>!w)},j=w=>{u(w),Z(!1)},x=w=>{j(M.find(A=>A.id===w)??t)},F=M.find(w=>w.type===t.type)!==void 0;return l.jsxs(l.Fragment,{children:[l.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",children:[l.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[l.jsx(de,{type:Se,disabled:s,img:Se.icon,isActive:t.id===Se.id,setActive:j}),T?l.jsx($,{disabled:s,onClick:V,title:"Toggle tools",icon:'<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>',selected:F}):S.map((w,A)=>l.jsx(fn,{disabled:s,activeTool:t,group:w,setActiveToolFromId:x},"id"in w?w.id:w.title))]}),!L&&l.jsxs(l.Fragment,{children:[l.jsx(de,{type:Ne,disabled:s\|\|!n,img:Ne.icon,isActive:t.id===Ne.id,setActive:d}),l.jsx(de,{type:Ie,disabled:s\|\|!a,img:Ie.icon,isActive:t.id===Ie.id,setActive:h}),l.jsx(de,{type:We,disabled:s\|\|!i,img:We.icon,isActive:t.id===We.id,setActive:c})]}),l.jsx(pn,{withActionsInMenu:L,disabled:s,vertical:!0,alignment:"right",group:{title:"Menu",img:'<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>'},activeTool:t,addPicture:p,loadFile:f,saveFile:v,togglePictureUrlModal:()=>{C(!0)},exportCanvasInFile:k,withUploadPicture:P,withUrlPicture:Q,withLoadAndSave:o,withExport:r,hasActionToUndo:n,hasActionToRedo:a,hasActionToClear:i,undoAction:d,redoAction:h,clearCanvas:c})]}),E&&l.jsx(Nt,{className:"react-paint-editor-toolbar-modal",onClose:V,children:M.map((w,A)=>w.type==="picture"?null:l.jsx(de,{disabled:s,type:w,img:w.icon,withText:!1,isActive:t.id===w.id,setActive:j},w.id))}),H&&l.jsx(gn,{togglePictureUrlModal:()=>{C(w=>!w)},addPicture:p})]})},vt={none:0,small:10,medium:20,large:40},yn={toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8"},Qn=()=>{const e=g.useRef([]),[s,t]=g.useState([]);return g.useEffect(()=>()=>{for(const n of e.current)clearTimeout(n)},[]),{snackbarList:s,addSnackbar:({type:n=K1,duration:a=en,text:i})=>{const o={id:ee("snackbar_"),duration:a,type:n,text:i};t(r=>[...r,o]),e.current=[...e.current,setTimeout(()=>{return r=o.id,void t(c=>c.filter(u=>u.id!==r));var r},a)]}}};Qe.Canvas=({options:e,className:s,style:t,canvasProps:n})=>{const{shapesRef:a,selectedShape:i,selectionFrame:o,hoveredShape:r,addShape:c,setSelectedShape:u,setSelectionFrame:d,refreshSelectedShapes:h,refreshHoveredShape:p,removeShape:f,updateShape:v,backwardShape:k,forwardShape:M,saveShapes:Q,refs:P,width:S,height:L,settings:T,canvasSize:E,setCanvasSize:Z,setCanvasOffset:H,selectShape:C,activeTool:V,setActiveTool:j,isInsideComponent:x,isEditMode:F,isDisabled:w,canvas:{selection:{canvasSelectionColor:A,canvasSelectionWidth:D},withSkeleton:m,withFrameSelection:y,canGrow:b,canShrink:N}}=n,{canvasBackgroundColor:R}={...d1,...e},X=g.useRef(null),[ie,W]=g.useState(void 0),[G,oe]=g.useState({mode:"default"}),[z,Y]=g.useState(!1),pe=g.useCallback(J=>{c(J),C(J)},[c,C]),ue=g.useCallback(J=>{const re=J/S;Z({width:J,height:Lre,scaleRatio:re})},[S,L,Z]);return _1({isInsideComponent:x,isEditingText:G.mode==="textedition",settings:T,selectedShape:i,setSelectedShape:u,removeShape:f,pasteShape:pe,updateShape:v,backwardShape:k,forwardShape:M,setShiftPressed:Y}),(({onResized:J,element:re})=>{g.useEffect(()=>{const me=re.current;if(!me)return;const le=new ResizeObserver(be=>{const ye=be?.[0]?.borderBoxSize?.[0],{width:Ce,height:Pe}=ye?{width:ye.inlineSize,height:ye.blockSize}:be?.[0].contentRect??{};J(Ce,Pe)});return le.observe(me),()=>{le.unobserve(me)}},[re,J])})({element:X,onResized:ue}),l.jsx("div",{ref:X,className:"react-paint-app-row"+(s?` ${s}`:""),"data-grow":b,"data-shrink":N,style:{"--react-paint-app-row-width":E.width,"--react-paint-app-canvaswidth":`${S}px`,"--react-paint-app-row-aspectratio":`calc(${E.width} / ${E.height})`,"--react-paint-app-canvas-bg":R,...t},children:l.jsx($1,{ref:P.canvas,canGrow:b,disabled:w,isInsideComponent:x,activeTool:V,setActiveTool:j,canvasOffsetStartPosition:ie,setCanvasOffsetStartPosition:W,shapes:a.current,addShape:c,updateSingleShape:v,selectedShape:i,selectionFrame:o,setSelectedShape:u,setSelectionFrame:d,hoveredShape:r,refreshHoveredShape:p,refreshSelectedShapes:h,settings:T,setCanvasOffset:H,saveShapes:Q,canvasSize:E,selectionMode:G,setSelectionMode:oe,selectionColor:A,selectionWidth:D,isEditMode:F,isShiftPressed:z,withFrameSelection:y,withSkeleton:m})})},Qe.Editor=({editorProps:e,className:s,style:t,options:n,children:a})=>{const{shapesRef:i,addPictureShape:o,moveShapes:r,toggleShapeVisibility:c,toggleShapeLock:u,canGoBackward:d,canGoForward:h,canClear:p,selectedShape:f,removeShape:v,updateShape:k,backwardShape:M,forwardShape:Q,refs:P,width:S,height:L,canvasSize:T,selectTool:E,selectShape:Z,activeTool:H,setActiveTool:C,setAvailableTools:V,isEditMode:j,isDisabled:x,availableTools:F,gridGap:w,setGridGap:A,loadFile:D,exportPicture:m,exportData:y,clearCanvas:b,settings:N,canvas:{canGrow:R,layersManipulation:X,withExport:ie,withLoadAndSave:W,withUploadPicture:G,withUrlPicture:oe}}=e,{toolbarBackgroundColor:z,dividerColor:Y,fontRadius:pe,fontDisabledColor:ue,fontDisabledBackgroundColor:J,fontColor:re,fontBackgroundColor:me,fontSelectedColor:le,fontSelectedBackgroundColor:be,fontHoverColor:ye,fontHoverBackgroundColor:Ce}={...yn,...n},[Pe,te]=g.useState(!1),[we,He]=g.useState(!1),ae=w>=vt.large?"large":w>=vt.medium?"medium":w>=vt.small?"small":"none",{snackbarList:ge,addSnackbar:K}=Qn(),ke=g.useCallback((q,_,yt)=>{V(Fe=>Fe.map(qe=>qe.id===q?ne(["settings",_,"default"],yt,qe):qe)),C(Fe=>Fe.id===q?ne(["settings",_,"default"],yt,Fe):Fe)},[C,V]),Xe=g.useCallback(()=>{E(Se),M()},[E,M]),Ee=g.useCallback(()=>{E(Se),Q()},[E,Q]),zt=g.useCallback(()=>{te(!0);try{m(),te(!1)}catch(q){q instanceof Error&&K({type:"error",text:"L'export a échoué"}),console.warn(q)}finally{te(!1)}},[m,K]),tt=g.useCallback(()=>{te(!0);try{y(),te(!1)}catch(q){q instanceof Error&&K({type:"error",text:"L'enregistrement a échoué"}),console.warn(q)}finally{te(!1)}},[y,K]),Ye=g.useCallback(async q=>{te(!0);try{await D(q),K({type:"success",text:"Fichier chargé !"})}catch(_){_ instanceof Error&&K({type:"error",text:"Le chargement a échoué"}),console.warn(_)}finally{te(!1)}},[D,K]),mt=g.useCallback(async q=>{te(!0);try{const _=await o(q,S,L);Z(_)}catch(_){_ instanceof Error&&K({type:"error",text:"Le chargement a échoué"}),console.warn(_)}finally{te(!1)}},[o,Z,K,S,L]),$t=`${s?`${s} `:""}${we?"react-paint-editor-layout-opened ":""}react-paint-editor-app`;return l.jsxs("div",{ref:P.setEditor,className:$t,style:{"--react-paint-editor-app-maxWidth":R?"100%":`${S}px`,"--react-paint-editor-app-toolbar-bg":z,"--react-paint-editor-app-divider-color":Y,"--react-paint-editor-app-font-radius":pe,"--react-paint-editor-app-font-disabled-color":ue,"--react-paint-editor-app-font-disabled-bg":J,"--react-paint-editor-app-font-color":re,"--react-paint-editor-app-font-bg":me,"--react-paint-editor-app-font-selected-color":le,"--react-paint-editor-app-font-selected-bg":be,"--react-paint-editor-app-font-hover-color":ye,"--react-paint-editor-app-font-hover-bg":Ce,...t},children:[j&&l.jsx(mn,{width:T.width,disabled:x,activeTool:H,clearCanvas:b,setActiveTool:E,exportCanvasInFile:zt,saveFile:tt,loadFile:Ye,addPicture:mt,hasActionToUndo:d,hasActionToRedo:h,hasActionToClear:p,undoAction:Xe,redoAction:Ee,availableTools:F,withExport:ie,withLoadAndSave:W,withUploadPicture:G,withUrlPicture:oe}),a,j&&X&&l.jsx(on,{gridFormat:ae,setGridFormat:q=>{A(vt[q])},disabled:x,shapes:i.current,moveShapes:r,selectedShape:f,removeShape:v,selectShape:Z,toggleShapeVisibility:c,toggleShapeLock:u,isLayoutPanelShown:we}),j&&l.jsxs(l.Fragment,{children:[l.jsx(hn,{width:T.width,disabled:x,activeTool:H,availableTools:F,selectedShape:f,settings:N,removeShape:v,updateShape:k,canvas:P.canvas.current,layersManipulation:X,toggleLayoutPanel:()=>{He(q=>!q)},updateToolSettings:ke}),l.jsx(J1,{isLoading:Pe}),l.jsx(sn,{snackbarList:ge})]})]})},Qe.useReactPaint=({width:e=1e3,height:s=600,shapes:t,mode:n="editor",disabled:a=!1,options:i=Mt})=>{const{layersManipulation:o,brushAlgo:r,grid:c,canGrow:u,canShrink:d,withExport:h,withLoadAndSave:p,withUploadPicture:f,withUrlPicture:v,withSkeleton:k,withFrameSelection:M,clearCallback:Q,availableTools:P}={...Mt,...i},{canvasSelectionColor:S,canvasSelectionWidth:L,canvasSelectionPadding:T}={...Mt.selection,...i?.selection},E=n!=="viewer",Z=a\|\|!E,H=g.useRef(null),C=g.useRef(null),[V,j]=g.useState(!1),x=g.useCallback(U=>{H.current=U},[]),[F,w]=g.useState(Se),[A,D]=g.useState(c),[m,y]=g.useState({width:e,height:s,scaleRatio:1}),[b,N]=g.useState([0,0]),R=g.useMemo(()=>({brushAlgo:r,canvasSize:m,canvasOffset:b,gridGap:A,selectionPadding:T}),[T,A,r,b,m]),[X,ie]=g.useState(Ys(P,f\|\|v)),{isInsideComponent:W}=(({disabled:U,componentRef:Te})=>{const[st,Re]=g.useState(!1);return g.useEffect(()=>{if(!U){const Me=De=>{Re(bs(De,Te.current))};return document.addEventListener("mousedown",Me,{passive:!0}),document.addEventListener("touchstart",Me,{passive:!0}),()=>{document.removeEventListener("mousedown",Me),document.removeEventListener("touchstart",Me)}}Re(!1)},[U,Te]),{isInsideComponent:st}})({disabled:Z,componentRef:H}),{registerEvent:G,unregisterEvent:oe,shapesRef:z,selectedShape:Y,selectionFrame:pe,hoveredShape:ue,addShape:J,addPictureShape:re,moveShapes:me,setSelectedShape:le,setSelectionFrame:be,refreshSelectedShapes:ye,refreshHoveredShape:Ce,removeShape:Pe,updateShape:te,backwardShape:we,forwardShape:He,clearShapes:ae,saveShapes:ge,toggleShapeVisibility:K,toggleShapeLock:ke,canGoBackward:Xe,canGoForward:Ee,canClear:zt}=E1(R),tt=g.useCallback(U=>{le(void 0),w(U)},[le]),Ye=g.useCallback((U=[],Te=!1)=>{ae(U,Te),tt(Se),N([0,0])},[tt,ae]),mt=g.useCallback(U=>{w(Se),le(U)},[le]),$t=g.useCallback(()=>{const U=A1(z.current,e,s);if(!U)throw new Error("L'encodage a échoué");Gs(U,"drawing.json")},[z,e,s]),q=g.useCallback(()=>{const U=Bs(z.current,e,s,R);if(!U)throw new Error;Gs(U,"drawing.png")},[z,e,s,R]);g.useEffect(()=>{W\|\|le(void 0)},[W,le]);const _=g.useCallback(async(U,Te=!0)=>{const st=await(async(Re,Me)=>{if(!Re)return[];const De=[],Ot=it(Re.map(fe=>{if(!fe\|\|!Qs.includes(fe.type))return null;if(fe.type==="picture"){const je=new Image,Sn=new Promise((Ut,xn)=>{je.onload=()=>{URL.revokeObjectURL(je.src),Ut()},je.onerror=()=>{xn(new Error("Some images could not be loaded"))}});return De.push(Sn),fe.src.startsWith("http")?Us(fe.src).then(Ut=>{je.src=Ut}).catch(()=>{je.src=""}):je.src=fe.src,Xs({...fe,img:je},Me)}return Xs(fe,Me)}));return await Promise.all(De),Ot})(U,R);Ye(st,Te)},[Ye,R]);V\|\|t===void 0\|\|(j(!0),_(t));const yt=g.useCallback(async U=>{const Te=await(async st=>new Promise((Re,Me)=>{const De=new FileReader;De.onload=Ot=>{const fe=Ot.target?.result;if(!fe)return Me("Impossible de récupérer les données du fichier");const je=JSON.parse(fe);Re(je)},De.readAsText(st)}))(U);await _(Te.shapes??[])},[_]),Fe=g.useCallback(()=>{typeof Q!="string"?_(Q(),!1):Q==="defaultShapes"&&t!==void 0?_(t,!1):Ye()},[Ye,_,t,Q]);g.useEffect(()=>{ie(Ys(P,f\|\|v))},[P,f,v]);const qe={canvas:C,editor:H,setEditor:x};return{editorProps:{shapesRef:z,addPictureShape:re,moveShapes:me,toggleShapeVisibility:K,toggleShapeLock:ke,canGoBackward:Xe,canGoForward:Ee,canClear:zt,selectedShape:Y,removeShape:Pe,updateShape:te,backwardShape:we,forwardShape:He,refs:qe,width:e,height:s,canvasSize:m,selectTool:tt,selectShape:mt,activeTool:F,setActiveTool:w,setAvailableTools:ie,isEditMode:E,isDisabled:Z,availableTools:X,gridGap:A,setGridGap:D,loadFile:yt,exportPicture:q,exportData:$t,clearCanvas:Fe,settings:R,canvas:{selection:{canvasSelectionColor:S,canvasSelectionWidth:L,canvasSelectionPadding:T},withSkeleton:k,withFrameSelection:M,canGrow:u,canShrink:d,layersManipulation:o,withExport:h,withLoadAndSave:p,withUploadPicture:f,withUrlPicture:v,clearCallback:Q}},canvasProps:{shapesRef:z,selectedShape:Y,selectionFrame:pe,hoveredShape:ue,addShape:J,setSelectedShape:le,setSelectionFrame:be,refreshSelectedShapes:ye,refreshHoveredShape:Ce,removeShape:Pe,updateShape:te,backwardShape:we,forwardShape:He,saveShapes:ge,refs:qe,width:e,height:s,settings:R,canvasSize:m,setCanvasSize:y,setCanvasOffset:N,selectShape:mt,activeTool:F,setActiveTool:w,isInsideComponent:W,isEditMode:E,isDisabled:Z,canvas:{selection:{canvasSelectionColor:S,canvasSelectionWidth:L},withSkeleton:k,withFrameSelection:M,canGrow:u,canShrink:d}},registerEvent:G,unregisterEvent:oe,resetCanvas:_,getCurrentImage:()=>C.current?Bs(z.current,e,s,R):void 0,getCurrentData:()=>Dt(z.current,e,s)}},Object.defineProperty(Qe,Symbol.toStringTag,{value:"Module"})});
1	+ (function(Se,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],g):g((Se=typeof globalThis<"u"?globalThis:Se\|\|self)["react-paint"]={},Se.React,Se.jsxRuntime)})(this,function(Se,g,l){"use strict";const $t='<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>',mt='<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>',yt='<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>',Qt='<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>',Ut='<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>',Gt='<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>',St='<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>',Bt='<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>',Xt='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',Yt='<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>',_t='<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>',qt='<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>',Jt='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',Kt='<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>',es='<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>',se=["transparent","black","white","red","green","blue","yellow"],Pe=[0,1,2],ts=[[1,0],[1,2],[4,6]],qe="serif",r1=2,ss=3,l1=4,X="react-paint-",xt={type:"picture",id:`${X}picture`,icon:St,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},ns={type:"brush",id:`${X}brush`,icon:$t,label:"Brosse",settings:{strokeColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:Pe,default:0}}},is={type:"line",id:`${X}line`,icon:Xt,label:"Ligne",settings:{strokeColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Pe,default:0},lineArrow:{values:[0,1,2,3],default:0}}},as={type:"polygon",id:`${X}polygon`,icon:Qt,label:"Polygone",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Pe,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},os={type:"curve",id:`${X}curve`,icon:Yt,label:"Courbe",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Pe,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},rs={type:"rect",id:`${X}rect`,icon:mt,label:"Rectangle",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Pe,default:0}}},ls={type:"square",id:`${X}square`,icon:mt,label:"Carré",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Pe,default:0}}},cs={type:"circle",id:`${X}circle`,icon:yt,label:"Cercle",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Pe,default:0}}},ds={type:"ellipse",id:`${X}ellipse`,icon:yt,label:"Ellipse",settings:{strokeColor:{values:se,default:"black"},fillColor:{values:se,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Pe,default:0}}},us={type:"text",id:`${X}text`,icon:Bt,label:"Texte",settings:{strokeColor:{values:se,default:"black"},opacity:{min:0,max:100,step:1,default:100},fontFamily:{values:["arial","serif","monospace"],default:qe},fontBold:{values:[!1,!0],default:!1},fontItalic:{values:[!1,!0],default:!1}}},xe={id:`${X}selection`,type:"selection",icon:'<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>',label:"Sélection"},Ie={id:`${X}undo`,type:"undo",icon:'<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>',label:"Undo"},ze={id:`${X}redo`,type:"redo",icon:'<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>',label:"Redo"},We={id:`${X}clear`,type:"clear",icon:'<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>',label:"Clear"},bt={id:`${X}export`,type:"export",icon:'<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>',label:"Export PNG"},hs={id:`${X}load`,type:"loadfile",icon:'<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>',label:"Load project"},Ct={id:`${X}save`,type:"savefile",icon:'<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>',label:"Save project"},ps={id:`${X}upload-picture`,type:"uploadpicture",icon:St,label:"Upload picture"},gs=2,fs="blue",be=14,vs=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],ms=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle"],ys="react-paint-canvas-drawcanvas",Qs="react-paint-canvas-selectioncanvas",Ss={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[ns,is,as,os,rs,ls,cs,ds,xt,us],clearCallback:"empty",brushAlgo:"simple",isBrushShapeDoneOnMouseUp:!0,withFrameSelection:!1,withSkeleton:!0,canvasSelectionPadding:0},c1={canvasBackgroundColor:"white",canvasSelectionColor:fs,canvasSelectionWidth:gs},xs=(e,s)=>!!(e.target instanceof Node&&s)&&s.contains(e.target),st=300,wt=(e,s)=>{const t={...s};for(const n of e)delete t[n];return t},ne=(e,s,t)=>{const n=Array.isArray(t)?[...t]:{...t},a=Array.isArray(e)?e:typeof e=="string"?e.split("."):[e];return a.reduce((i,o,r)=>(i[o]=kt(i[o])?{...i[o]}:Array.isArray(i[o])?[...i[o]]:i[o]===void 0\|\|i[o]===null?{}:i[o],r===a.length-1&&(i[o]=s),i[o]),n),n},kt=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,fe=(e,s,t)=>{if(!kt(s)\|\|!kt(t))return t;const n={...s};for(const a in t)Object.hasOwn(t,a)&&(Object.hasOwn(n,a)?n[a]=e(n[a],t[a],a)??fe(e,n[a],t[a]):n[a]=t[a]);return n},bs=(e,s)=>{if(e===s)return!0;if(typeof e!="object"\|\|typeof s!="object"\|\|e===null\|\|s===null)return!1;const t=Object.keys(e),n=Object.keys(s);if(t.length!==n.length)return!1;for(const a of t)if(!n.includes(a)\|\|!bs(e[a],s[a]))return!1;return!0},Mt={},ee=(e="")=>(Mt[e]\|\|(Mt[e]=0),`${e}${++Mt[e]}`),jt=e=>e.filter(s=>s!=null),Cs=e=>{e.lineCap="round",e.lineJoin="round"},Ee=(e,s={})=>{const{lineCap:t="round",fillColor:n="transparent",opacity:a=100,strokeColor:i=fs,lineWidth:o=gs,lineDash:r=0}=s;e.lineCap=t,e.globalAlpha=a/100,e.fillStyle=n,e.strokeStyle=i,e.lineWidth=o,e.setLineDash(r===0?[]:[ts[r][0]o,ts[r][1]o])},Lt=(e,s,t,n)=>{e.save(),e.scale(s.canvasSize.scaleRatio,s.canvasSize.scaleRatio),e.translate(s.canvasOffset[0],s.canvasOffset[1]),t&&n&&(e.translate(n[0],n[1]),e.rotate(t),e.translate(-n[0],-n[1]))},nt=e=>{const s=new Path2D;return s.rect(e.x,e.y,e.width,e.height),s},it=e=>{const s=new Path2D;return s.arc(e.x,e.y,e.radius,0,2Math.PI),s},Vt=e=>{const s=new Path2D;return s.moveTo(...e.points[0]),s.lineTo(...e.points[1]),s},d1=e=>{const s=new Path2D;return s.moveTo(...e.points[0]),s.lineTo(...e.points[1]),s.lineTo(...e.points[2]),s.lineTo(...e.points[0]),s},Pt=(e,s,t,n=!1)=>{const{borders:a}=G(s,t);return{border:nt(a),shapePath:e,anchors:[...s.points.map((i,o)=>n&&o>0&&o<s.points.length-1?nt({x:i[0]-7,y:i[1]-7,width:be/t.canvasSize.scaleRatio,height:be/t.canvasSize.scaleRatio}):it({x:i[0],y:i[1],radius:7/t.canvasSize.scaleRatio}))]}},Oe=(e,s)=>{const t=((n,{brushAlgo:a})=>{if(n.points.length<1\|\|n.style?.strokeColor==="transparent")return;const i=n.points.flat(),o=i.map(u=>u[0]),r=i.map(u=>u[1]),c=Math.min(...o),h=Math.min(...r),d=new Path2D;for(const u of n.points){if(!u.length)return;if(u.length===1)d.rect(...de(u[0],c,h,n.scaleX,n.scaleY),1,1);else if(d.moveTo(...de(u[0],c,h,n.scaleX,n.scaleY)),a==="quadratic"){for(let p=0;p<u.slice(1).length-2;p++){const f=de(u[p],c,h,n.scaleX,n.scaleY),v=de(u[p+1],c,h,n.scaleX,n.scaleY),w=(f[0]+v[0])/2,M=(f[1]+v[1])/2;d.quadraticCurveTo(...f,w,M)}d.quadraticCurveTo(...de(u[u.length-2],c,h,n.scaleX,n.scaleY),...de(u[u.length-1],c,h,n.scaleX,n.scaleY))}else for(const p of u.slice(1))d.lineTo(...de(p,c,h,n.scaleX,n.scaleY))}return d})(e,s);return{...e,path:t,selection:$e(t,e,s)}},u1=Oe,Ht=e=>180e/Math.PI,ws=(e,s)=>{const t=s.x-Math.min(Math.max(s.x,e.x),e.x+e.width),n=s.y-Math.min(Math.max(s.y,e.y),e.y+e.height);return Math.sqrt(tt+nn)<=s.radius},re=({origin:e=[0,0],point:s,rotation:t})=>{const n=[s[0]-e[0],s[1]-e[1]],a=n[1]Math.cos(t)-n[0]Math.sin(t);return[n[1]Math.sin(t)+n[0]Math.cos(t)+e[0],a+e[1]]},ks=e=>(e+2Math.PI)%(2Math.PI),Ms=({targetVector:[e,s],radian:t=!0,originVector:n})=>{const a=ks(Math.atan2(s[1]-e[1],s[0]-e[0]));if(n){const[i,o]=n,r=Math.atan2(o[1]-i[1],o[0]-i[0]),c=ks(a-r);return t?c:Ht(c)}return t?a:Ht(a)},He=(e,s=2)=>Math.round(e10s)/10s,de=(e,s,t,n=1,a=1)=>[s+(e[0]-s)n,t+(e[1]-t)a],I=(e,s,t=0)=>{if(!s.gridGap)return He(e);const n=e+t,a=n>=0?s.gridGap:-s.gridGap;return n+a/2-(n+a/2)%a-t},h1=(e,s,t=0)=>s.gridGap?e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18):He(e,3),p1=(e,s,t,n,a,i)=>{switch(n.mode){case"brush":return((o,r,c)=>{const h={...o,points:ne(o.points.length-1,[...o.points[o.points.length-1],[Math.round(r[0]),Math.round(r[1])]],o.points)};return Oe(h,c)})(s,t,a);case"translate":return Et(t,n.originalShape,n.cursorStartPosition,a);case"rotate":return L1(s,t,n.originalShape,n.cursorStartPosition,n.center,a);case"resize":return V1(e,s,t,n.originalShape,n,a,i);default:return s}},$e=(e,s,t)=>{const{borders:n}=G(s,t);return{border:nt(n),shapePath:e,line:Vt({points:[[n.x+n.width/2,n.y],[n.x+n.width/2,n.y-23/t.canvasSize.scaleRatio]]}),anchors:[it({x:n.x+n.width/2,y:n.y-23/t.canvasSize.scaleRatio,radius:7/t.canvasSize.scaleRatio}),...vs.map(a=>it({x:n.x+n.widtha[0],y:n.y+n.heighta[1],radius:7/t.canvasSize.scaleRatio}))]}},js=({borderStart:e,borderSize:s,vector:t,settings:n,invertedAxe:a,anchor:i})=>{switch(i){case 0:{if(a){const r=s-2n.selectionPadding;return[e+r,t-r]}const o=Math.max(2n.selectionPadding,s-t);return[e+s-o,o]}case .5:return[e,s];case 1:if(a){const o=s+t;return[e+o,2n.selectionPadding-o]}return[e,Math.max(2n.selectionPadding,s+t)];default:return[0,0]}},Ls=({borderX:e,borderWidth:s,borderY:t,borderHeight:n,center:a,originalShape:i})=>{const o=[e+s/2-a[0],t+n/2-a[1]],[r,c]=re({point:o,rotation:-i.rotation});return{borderX:He(e+r-o[0]),borderWidth:He(s),borderY:He(t+c-o[1]),borderHeight:He(n)}},Ue=(e,s,t,n,a=!1)=>{const{center:i,borders:o}=G(s,n),r=re({origin:i,point:e,rotation:s.rotation}),c=t.anchor[0]===0&&r[0]>=o.x+o.width\|\|t.anchor[0]===1&&r[0]<=o.x,h=t.anchor[1]===0&&r[1]>=o.y+o.height\|\|t.anchor[1]===1&&r[1]<=o.y,d=[I(r[0],n,t.anchor[0]===0&&!c\|\|t.anchor[0]===1&&c?n.selectionPadding:-n.selectionPadding),I(r[1],n,t.anchor[1]===0&&!h\|\|t.anchor[1]===1&&h?n.selectionPadding:-n.selectionPadding)],u=n.gridGap?[t.anchor[0]===0?o.x:t.anchor[0]===.5?o.x+o.width/2:o.x+o.width,t.anchor[1]===0?o.y:t.anchor[1]===.5?o.y+o.height/2:o.y+o.height]:re({origin:i,point:t.cursorStartPosition,rotation:s.rotation}),p=[d[0]-u[0],d[1]-u[1]],[f,v]=js({borderStart:o.x,borderSize:o.width,vector:p[0],settings:n,invertedAxe:c,anchor:t.anchor[0]}),[w,M]=js({borderStart:o.y,borderSize:o.height,vector:p[1],settings:n,invertedAxe:h,anchor:t.anchor[1]});if(a){const x=((L,b,j,P,E,A,H,C,V,N)=>{const{selectionPadding:Q}=N,F=(b.width-2Q\|\|1)/(b.height-2Q\|\|1),k=(E-2Q)/(H-2Q);let T,Z,m,y;return V.anchor[0]!==.5&&V.anchor[1]!==.5?k<F?(Z=A,y=H,m=(H-2Q)F+2Q,T=V.anchor[0]===0?b.width-L[0]>Q?b.x+(b.width-m):b.x+b.width-2Q:b.width+L[0]>Q?b.x:b.x-m+2Q):(T=P,m=E,y=(E-2Q)/F+2Q,Z=V.anchor[1]===0?b.height-L[1]>Q?b.y+(b.height-y):b.y+b.height-2Q:b.height+L[1]>Q?b.y:b.y-y+2Q):V.anchor[0]!==.5?(T=P,m=E,y=(E-2Q)/F+2Q,Z=b.y+(b.height-y)/2):(Z=A,y=H,m=(H-2Q)F+2Q,T=b.x+(b.width-m)/2),{borderX:T,borderWidth:m,borderY:Z,borderHeight:y,center:j,originalShape:C}})(p,o,i,f,v,w,M,s,t,n);return Ls(x)}return Ls({borderX:f,borderWidth:v,borderY:w,borderHeight:M,center:i,originalShape:s})},at=(e,s)=>{const t=it(e);return{...e,path:t,selection:$e(t,e,s)}},g1=at,Tt=(e,s,t)=>{const{clientX:n=0,clientY:a=0}="touches"in e&&e.touches[0]?e.touches[0]:"changedTouches"in e&&e.changedTouches[0]?e.changedTouches[0]:"clientX"in e?e:{},i=s?.getBoundingClientRect()??{left:0,top:0,width:t.canvasSize.width,height:t.canvasSize.height};return[(n-i.left)(t.canvasSize.width/i.width)/t.canvasSize.scaleRatio,(a-i.top)(t.canvasSize.height/i.height)/t.canvasSize.scaleRatio]},Vs=e=>"touches"in e,Re=(e,s,[t,n],[a,i])=>re({origin:[t-a,n-i],point:e,rotation:s}),ot=(e,s,t)=>t?ws(e,{x:s[0],y:s[1],radius:t}):((n,a)=>a[0]>=n.x&&a[0]<=n.x+n.width&&a[1]>=n.y&&a[1]<=n.y+n.height)(e,s),Je=(e,s,t,n=!1,a=0)=>{if(e.locked)return!1;const{canvasSize:{scaleRatio:i}}=t,{borders:o,center:r}=G(e,t),c=Re(s,e.rotation,r,t.canvasOffset);if(n)if(e.type==="line"\|\|e.type==="polygon"\|\|e.type==="curve"){for(let h=0;h<e.points.length;h++)if(ot({x:e.points[h][0]-7/i,y:e.points[h][1]-7/i,width:be/i,height:be/i},c,a))return{mode:"resize",anchor:h}}else{if(ot({x:o.x+o.width/2-7/i,y:o.y-be/i-16/i,width:be/i,height:be/i},c,a))return{mode:"rotate"};for(const h of vs)if(ot({x:o.x+o.widthh[0]-7/i,y:o.y+o.heighth[1]-7/i,width:be/i,height:be/i},c,a))return{mode:"resize",anchor:h}}return!!ot(o,c,a)&&{mode:"translate"}},Ps=(e,s,t,n)=>{if(s.locked)return!1;const{center:a}=G(s,n),i=Re(t,s.rotation,a,n.canvasOffset);return"path"in s&&s.path?s.style?.fillColor&&s.style?.fillColor!=="transparent"?!!e.isPointInPath(s.path,i[0],i[1])&&{mode:"translate"}:(e.lineWidth=(s.style?.lineWidth??0)+15,!!e.isPointInStroke(s.path,i[0],i[1])&&{mode:"translate"}):Je(s,t,n,!1)};function Hs(e,s){const t=Math.max(e.x,s.x),n=Math.max(e.y,s.y),a=Math.min(e.x+(e.width\|\|1),s.x+(s.width\|\|1)),i=Math.min(e.y+(e.height\|\|1),s.y+(s.height\|\|1));if(t<a&&n<i)return{x:t,y:n,width:a-t,height:i-n}}const Ts=({ctx:e,path:s,rect:t,offset:n,checkFill:a})=>{for(let i=0;i<n;i+=n/2)for(let o=0;o<n;o+=n/2)for(let r=i+t.x;r<t.x+t.width;r+=n)for(let c=o+t.y;c<t.y+t.height;c+=n)if(a?e.isPointInPath(s,r,c):e.isPointInStroke(s,r,c))return!0;return!1},Ge=(e,s)=>{const t=(n=>{if(n.points.length<1)return;const a=new Path2D;a.moveTo(...n.points[0]);for(const i of n.points.slice(1))a.lineTo(...i);return a.lineTo(...n.points[0]),a})(e);return{...e,path:t,selection:Pt(t,e,s)}},f1=Ge,As=(e,s)=>{const t=Math.min(...e.points.map(i=>i[0]))-s.selectionPadding,n=Math.max(...e.points.map(i=>i[0]))+s.selectionPadding,a=Math.min(...e.points.map(i=>i[1]))-s.selectionPadding;return{x:t,width:n-t,y:a,height:Math.max(...e.points.map(i=>i[1]))+s.selectionPadding-a}},Be=(e,s)=>{const t=(n=>{if(n.points.length<3)return;const a=new Path2D;a.moveTo(...n.points[0]);for(let i=1;i<n.points.length-1;i++)a.quadraticCurveTo(...n.points[i],n.points.length-2===i?n.points[i+1][0]:(n.points[i+1][0]-n.points[i][0])/2+n.points[i][0],n.points.length-2===i?n.points[i+1][1]:(n.points[i+1][1]-n.points[i][1])/2+n.points[i][1]);return a})(e);return{...e,path:t,selection:Pt(t,e,s,!0)}},v1=Be,m1=As,rt=(e,s)=>{const t=(n=>{const a=new Path2D;return a.ellipse(n.x,n.y,n.radiusX,n.radiusY,0,0,2Math.PI),a})(e);return{...e,path:t,selection:$e(t,e,s)}},y1=rt,Zs=e=>{return t={...e,type:"triangle"},{...t,path:d1(t)};var t},Q1=(e,s)=>{e.globalAlpha!==0&&s.path&&(s.style?.fillColor!=="transparent"&&e.fill(s.path),s.style?.strokeColor!=="transparent"&&e.stroke(s.path))},lt=(e,s)=>{const t=[];let n;if(e.style?.lineArrow===1\|\|e.style?.lineArrow===2\|\|e.style?.lineArrow===3){const a=Math.PI/2-Ms({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3\|\|t.push(Zs(Es(e.points[0],a,e.style))),e.style?.lineArrow!==2&&e.style?.lineArrow!==3\|\|t.push(Zs(Es(e.points[1],a+Math.PI,e.style)));const i=(({line:o,size:r,direction:c})=>{const h=Math.PI/2-Ms({targetVector:[o.points[0],o.points[1]]}),d=[o.points[0][0]+(o.points[1][0]-o.points[0][0])/2,o.points[0][1]+(o.points[1][1]-o.points[0][1])/2];let u,p;if(["start","both"].includes(c)){const f=re({point:o.points[0],origin:d,rotation:-h});u=re({point:[f[0],f[1]+r],origin:d,rotation:h})}else u=[...o.points[0]];if(["end","both"].includes(c)){const f=re({point:o.points[1],origin:d,rotation:-h});p=re({point:[f[0],f[1]-r],origin:d,rotation:h})}else p=[...o.points[1]];return{points:[u,p]}})({line:e,size:10+2(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});n=Vt(i)}else n=Vt(e);return{...e,path:n,selection:Pt(n,e,s),arrows:t,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"}}},S1=lt,Es=(e,s,t)=>{const n=[re({point:[0,0],rotation:s}),re({point:[-(5+(t.lineWidth??0)),10+2(t.lineWidth??0)],rotation:s}),re({point:[5+(t.lineWidth??0),10+2(t.lineWidth??0)],rotation:s})];return{points:[[e[0]+n[0][0],e[1]+n[0][1]],[e[0]+n[1][0],e[1]+n[1][1]],[e[0]+n[2][0],e[1]+n[2][1]]],style:{...t,fillColor:t.strokeColor,strokeColor:"transparent"}}},ct=(e,s)=>{const t=nt(e);return{...e,path:t,selection:$e(t,e,s)}},x1=ct,b1=(e,s)=>{e.globalAlpha!==0&&s.path&&(s.style?.fillColor!=="transparent"&&e.fill(s.path),s.style?.strokeColor!=="transparent"&&e.stroke(s.path))},Rs=(e,s)=>({x:e.x-s.selectionPadding,width:e.width+2s.selectionPadding,y:e.y-s.selectionPadding,height:e.height+2s.selectionPadding}),Fs=(e,s,t,n,[a,i]=[!1,!1])=>((o,r,[c,h],[d,u])=>re({origin:[c-d,h-u],point:o,rotation:-r}))([e[0]===.5?t.x+t.width/2:e[0]===0?t.x+(a?0:t.width):t.x+(a?t.width:0),e[1]===.5?t.y+t.height/2:e[1]===0?t.y+(i?0:t.height):t.y+(i?t.height:0)],t.rotation,s,n.canvasOffset),dt=(e,s)=>({...e,selection:$e(void 0,e,s)}),C1=dt,Ds=(e,s,t,n,a)=>{const[i,o]=((r,c,h,d,u=!1)=>{if(!(r&&c&&d&&h))return[st,st];const p=r/c;if(p>h/d){const v=u?h:Math.min(r,h);return[v,v/p]}const f=u?d:Math.min(c,d);return[fp,f]})(e.width,e.height,t,n,!0);return dt({toolId:xt.id,type:"picture",id:ee("picture_"),x:(t-i)/2,y:(n-o)/2,width:i,height:o,src:s,img:e,rotation:0},a)},w1=(e,s,t,n)=>new Promise((a,i)=>{const o=new Image;o.onerror=()=>{i(new Error("Some images could not be loaded"))},setTimeout(()=>{i(new Error("Timeout while loading images"))},4e3),e instanceof File?((r,c,h,d,u,p)=>{const f=URL.createObjectURL(h);r.onload=async()=>{if(URL.revokeObjectURL(r.src),Os(h)&&!r.width&&!r.height){const w=await h.text(),M=Ws(w);if(f===r.src)return void(r.src=M)}const v=Ds(r,r.src,d,u,p);c(v)},r.src=f})(o,a,e,s,t,n):((r,c,h,d,u,p)=>{r.onload=()=>{URL.revokeObjectURL(r.src);const f=Ds(r,h,d,u,p);c(f)},$s(h).then(f=>{r.src=f}).catch(()=>{r.src=""})})(o,a,e,s,t,n)}),At=["Texte"],ut=(e,s)=>({...e,selection:$e(void 0,e,s)}),k1=ut,Zt=(e,s,t,n,a,i=qe)=>{e.font=`${a?"italic":""} ${n?"bold":""} 1px ${i}`;const o=s.map(r=>t/e.measureText(r).width);return Math.min(...o)\|\|36},M1=(e,s,t,n)=>{const a={...s,value:t},i=((v,w,M,x,L,b=qe)=>{v.font=`${L?"italic":""} ${x?"bold":""} ${M}px ${b}`;const j=w.map(P=>v.measureText(P).width);return Math.max(...j)\|\|20})(e,a.value,a.fontSize,a.style?.fontBold??!1,a.style?.fontItalic??!1,a.style?.fontFamily),o=a.fontSizea.value.length,r={...a,width:i,height:o},{center:c}=G(s,n),{center:h}=G(r,n),[d,u]=Fs([1,1],c,s,n),[p,f]=Fs([1,1],h,r,n,[!1,!1]);return{...r,x:r.x-(p-d),y:r.y-(f-u)}},Ns=(e,s,t,n)=>{const a=[I(t[0],n),I(t[1],n)];switch(s.type){case"brush":return((i,o,r)=>Oe({toolId:i.id,type:i.type,id:ee(`${i.type}_`),points:[[o]],rotation:0,scaleX:1,scaleY:1,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(s,a,n);case"line":return((i,o,r)=>{const c={toolId:i.id,type:i.type,id:ee(`${i.type}_`),points:[o,o],rotation:0,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,lineArrow:i.settings.lineArrow.default}};return lt(c,r)})(s,a,n);case"polygon":return((i,o,r)=>Ge({toolId:i.id,type:i.type,id:ee(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(o),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},r))(s,a,n);case"curve":return((i,o,r)=>Be({toolId:i.id,type:i.type,id:ee(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(o),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},r))(s,a,n);case"rect":case"square":return((i,o,r,c=0,h=0)=>{const d={toolId:i.id,type:i.type,id:ee(`${i.type}_`),x:o[0],y:o[1],width:c,height:h,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}};return ct(d,r)})(s,a,n);case"text":return((i,o,r,c)=>{const h=Zt(i,At,50,o.settings?.fontBold.default??!1,o.settings?.fontItalic.default??!1,o.settings.fontFamily.default);return ut({toolId:o.id,type:o.type,id:ee(`${o.type}_`),x:r[0],y:r[1],value:At,fontSize:h,width:50,height:h(At.length\|\|1),rotation:0,style:{opacity:o.settings.opacity.default,strokeColor:o.settings.strokeColor.default,fontFamily:o.settings.fontFamily.default,fontItalic:o.settings.fontItalic.default,fontBold:o.settings.fontBold.default}},c)})(e,s,a,n);case"ellipse":return((i,o,r)=>rt({toolId:i.id,type:i.type,id:ee(`${i.type}_`),x:o[0],y:o[1],radiusX:0,radiusY:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(s,a,n);case"circle":return((i,o,r)=>at({toolId:i.id,type:i.type,id:ee(`${i.type}_`),x:o[0],y:o[1],radius:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(s,a,n)}},Is=(e,s,t)=>{if(s.visible===!1)return;const{center:n}=G(s,t);switch(Lt(e,t,s.rotation,n),Ee(e,s.style),s.type){case"brush":((a,i)=>{i.points.length<1\|\|!i.path\|\|a.globalAlpha!==0&&i.style?.strokeColor!=="transparent"&&a.globalAlpha!==0&&a.stroke(i.path)})(e,s);break;case"text":((a,i)=>{if(a.globalAlpha!==0&&i.style?.strokeColor&&i.style.strokeColor!=="transparent"){a.font=`${i.style?.fontItalic?"italic":""} ${i.style?.fontBold?"bold":""} ${i.fontSize}px ${i.style?.fontFamily??qe}`,a.textBaseline="top",a.fillStyle=i.style.strokeColor;for(let o=0;o<i.value.length;o++)a.fillText(i.value[o],i.x,i.y+oi.fontSize,i.width)}})(e,s);break;case"line":((a,i)=>{if(a.globalAlpha!==0&&i.path){i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path);for(const o of i.arrows??[])Ee(a,o.style),Q1(a,o)}})(e,s);break;case"polygon":((a,i)=>{i.path&&a.globalAlpha!==0&&(i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path))})(e,s);break;case"curve":((a,i)=>{i.path&&a.globalAlpha!==0&&(i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path))})(e,s);break;case"circle":((a,i)=>{a.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path))})(e,s);break;case"ellipse":((a,i)=>{a.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&a.fill(i.path),i.style?.strokeColor!=="transparent"&&a.stroke(i.path))})(e,s);break;case"rect":case"square":b1(e,s);break;case"picture":((a,i)=>{a.globalAlpha!==0&&(a.beginPath(),a.drawImage(i.img,i.x,i.y,i.width,i.height))})(e,s)}e.restore()},j1=(e,s)=>{switch(e.type){case"brush":return((t,{selectionPadding:n})=>{const a=t.points.flat(),i=Math.min(...a.map(d=>d[0])),o=Math.min(...a.map(d=>d[1])),r=a.map(d=>de(d,i,o,t.scaleX,t.scaleY)),c=Math.max(...r.map(d=>d[0]))+n,h=Math.max(...r.map(d=>d[1]))+n;return{x:i-n,width:c-i+n,y:o-n,height:h-o+n}})(e,s);case"line":return((t,n)=>({x:Math.min(t.points[0][0],t.points[1][0])-n.selectionPadding,width:Math.abs(t.points[0][0]-t.points[1][0])+2n.selectionPadding,y:Math.min(t.points[0][1],t.points[1][1])-n.selectionPadding,height:Math.abs(t.points[0][1]-t.points[1][1])+2n.selectionPadding}))(e,s);case"polygon":return As(e,s);case"curve":return m1(e,s);case"circle":return((t,n)=>({x:t.x-t.radius-n.selectionPadding,width:2(t.radius+n.selectionPadding),y:t.y-t.radius-n.selectionPadding,height:2(t.radius+n.selectionPadding)}))(e,s);case"ellipse":return((t,n)=>({x:t.x-t.radiusX-n.selectionPadding,width:2(t.radiusX+n.selectionPadding),y:t.y-t.radiusY-n.selectionPadding,height:2(t.radiusY+n.selectionPadding)}))(e,s);case"rect":case"square":return Rs(e,s);case"text":return((t,n)=>({x:t.x-n.selectionPadding,width:t.width+2n.selectionPadding,y:t.y-n.selectionPadding,height:t.height+2n.selectionPadding}))(e,s);case"picture":return((t,n)=>Rs(t,n))(e,s);default:return{x:0,y:0,width:100,height:100}}},G=(e,s)=>{const t=j1(e,s),n=(a=>[a.x+a.width/2,a.y+a.height/2])(t);return{borders:t,center:n}},L1=(e,s,t,n,a,i)=>{const o=a[0]-n[0],r=a[1]-n[1],c=a[0]-s[0],h=a[1]-s[1],d=t.rotation+Math.atan2(h,c)-Math.atan2(r,o);return{...e,rotation:h1(d,i)}},V1=(e,s,t,n,a,i,o)=>{switch(n.type){case"line":return((r,c,h,d)=>{const u=[I(r[0],d),I(r[1],d)],{center:p}=G(c,d),f=Re(u,c.rotation,p,d.canvasOffset),v=ne(["points",h.anchor],f,c);return lt(v,d)})(t,n,a,i);case"polygon":return((r,c,h,d)=>{const u=[I(r[0],d),I(r[1],d)],{center:p}=G(c,d),f=Re(u,c.rotation,p,d.canvasOffset),v=ne(["points",h.anchor],f,c);return Ge(v,d)})(t,n,a,i);case"curve":return((r,c,h,d)=>{const u=[I(r[0],d),I(r[1],d)],{center:p}=G(c,d),f=Re(u,c.rotation,p,d.canvasOffset),v=ne(["points",h.anchor],f,c);return Be(v,d)})(t,n,a,i);case"brush":return((r,c,h,d,u)=>{const{borders:p}=G({...c,scaleX:1,scaleY:1},d),{borders:f}=G(c,d),{borderX:v,borderHeight:w,borderY:M,borderWidth:x}=Ue(r,c,h,d,u),L=Math.max(0,p.width-2d.selectionPadding),b=Math.max(0,p.height-2d.selectionPadding),j=Math.max(0,x-2d.selectionPadding),P=Math.max(0,w-2d.selectionPadding),E=L?j/L:1,A=b?P/b:1;if(!L\|\|!b)return c;const H=He(v-f.x),C=He(M-f.y);return Oe({...c,points:c.points.map(V=>V.map(([N,Q])=>[N+H,Q+C])),scaleX:E,scaleY:A},d)})(t,n,a,i,o);case"circle":return((r,c,h,d)=>{const{borderX:u,borderHeight:p,borderY:f,borderWidth:v}=Ue(r,c,h,d,!0);return at({...c,radius:Math.max(0,v/2-d.selectionPadding),x:u+v/2,y:f+p/2},d)})(t,n,a,i);case"ellipse":return((r,c,h,d,u=!1)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:w}=Ue(r,c,h,d,u);return rt({...c,radiusX:Math.max(0,w/2-d.selectionPadding),radiusY:Math.max(0,f/2-d.selectionPadding),x:p+w/2,y:v+f/2},d)})(t,n,a,i,o);case"rect":case"square":return((r,c,h,d,u=!1)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:w}=Ue(r,c,h,d,u);return ct({...c,width:Math.max(0,w-2d.selectionPadding),height:Math.max(0,f-2d.selectionPadding),x:p+d.selectionPadding,y:v+d.selectionPadding},d)})(t,n,a,i,s.type==="square"\|\|o);case"text":return((r,c,h,d,u)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:w}=Ue(c,h,d,u,!0),M=ut({...h,width:Math.max(0,w-2u.selectionPadding),height:Math.max(0,f-2u.selectionPadding),x:p+u.selectionPadding,y:v+u.selectionPadding},u);return{...M,fontSize:Zt(r,M.value,M.width,M.style?.fontBold??!1,M.style?.fontItalic??!1,M.style?.fontFamily)}})(e,t,n,a,i);case"picture":return((r,c,h,d,u)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:w}=Ue(r,c,h,d,!0);return dt({...c,width:Math.max(0,w-2d.selectionPadding),height:Math.max(0,f-2d.selectionPadding),x:p+d.selectionPadding,y:v+d.selectionPadding},d)})(t,n,a,i);default:return n}},Et=(e,s,t,n)=>{switch(s.type){case"rect":case"square":return((a,i,o,r)=>ct({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"ellipse":return((a,i,o,r)=>rt({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"circle":return((a,i,o,r)=>at({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"picture":return((a,i,o,r)=>dt({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"text":return((a,i,o,r)=>ut({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,s,t,n);case"line":return((a,i,o,r)=>lt({...i,points:i.points.map(([c,h])=>[I(c+a[0]-o[0],r),I(h+a[1]-o[1],r)])},r))(e,s,t,n);case"polygon":return((a,i,o,r)=>{const{borders:c}=G(i,r);return Ge({...i,points:i.points.map(([h,d])=>r.gridGap?[h+I(c.x+a[0]-o[0],r)-c.x,d+I(c.y+a[1]-o[1],r)-c.y]:[I(h+a[0]-o[0],r),I(d+a[1]-o[1],r)])},r)})(e,s,t,n);case"curve":return((a,i,o,r)=>{const{borders:c}=G(i,r);return Be({...i,points:i.points.map(([h,d])=>r.gridGap?[h+I(c.x+a[0]-o[0],r)-c.x,d+I(c.y+a[1]-o[1],r)-c.y]:[I(h+a[0]-o[0],r),I(d+a[1]-o[1],r)])},r)})(e,s,t,n);case"brush":return((a,i,o,r)=>{const{borders:c}=G(i,r),h=r.gridGap?I(c.x+a[0]-o[0],r)-c.x:a[0]-o[0],d=r.gridGap?I(c.y+a[1]-o[1],r)-c.y:a[1]-o[1];return Oe({...i,points:i.points.map(u=>u.map(([p,f])=>[p+h,f+d]))},r)})(e,s,t,n);default:return s}},Ke=(e,s)=>{switch(e.type){case"rect":case"square":return x1(e,s);case"ellipse":return y1(e,s);case"circle":return g1(e,s);case"picture":return C1(e,s);case"text":return k1(e,s);case"line":return S1(e,s);case"polygon":return f1(e,s);case"curve":return v1(e,s);case"brush":return u1(e,s);default:return e}},zs=({ctx:e,shape:s,settings:t,selectionWidth:n,selectionColor:a,withAnchors:i=!0})=>{const{center:o}=G(s,t);switch(Lt(e,t,s.rotation,o),s.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((r,c,h,d,u,p)=>{if(c.selection&&(Ee(r,{fillColor:"transparent",strokeColor:h,lineWidth:d/u.canvasSize.scaleRatio}),c.selection.shapePath?r.stroke(c.selection.shapePath):r.stroke(c.selection.border),p&&!c.locked)){c.selection.shapePath&&r.stroke(c.selection.border),r.stroke(c.selection.line),Ee(r,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/u.canvasSize.scaleRatio});for(const f of c.selection.anchors)r.fill(f),r.stroke(f)}})(e,s,a,n,t,i);break;case"polygon":case"line":case"curve":(({ctx:r,shape:c,withAnchors:h,selectionWidth:d,selectionColor:u,settings:p})=>{if(c.selection&&(Ee(r,{fillColor:"transparent",strokeColor:u,lineWidth:d/p.canvasSize.scaleRatio}),c.selection.shapePath&&r.stroke(c.selection.shapePath),h&&!c.locked)){Ee(r,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio});for(const f of c.selection.anchors)r.fill(f),r.stroke(f)}})({ctx:e,shape:s,withAnchors:i,selectionWidth:n,selectionColor:a,settings:t})}e.restore()},P1=({ctx:e,selectionFrame:s,settings:t})=>{Lt(e,t),((n,a,i)=>{Ee(n,{fillColor:"rgba(170,170,170, 0.1)",strokeColor:"rgb(170,170,170)",lineWidth:1/i.canvasSize.scaleRatio}),n.fillRect(a[0][0],a[0][1],a[1][0]-a[0][0],a[1][1]-a[0][1]),n.strokeRect(a[0][0],a[0][1],a[1][0]-a[0][0],a[1][1]-a[0][1])})(e,s,t),e.restore()},Ws=e=>{const s=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0],t=s.getAttribute("width"),n=s.getAttribute("height");let a;if(t\|\|n)a=e;else{const o=s.getAttribute("viewBox")??"0 0 300 300",[,,r,c]=o.split(" ");s.setAttribute("width",r??st),s.setAttribute("height",c??st),a=new XMLSerializer().serializeToString(s)}const i=new Blob([a],{type:"image/svg+xml"});return URL.createObjectURL(i)},Os=e=>(e instanceof File?e.name:e).includes(".svg"),$s=e=>Os(e)?fetch(e).then(s=>s.text()).then(s=>Ws(s)):fetch(e).then(s=>s.blob()).then(s=>URL.createObjectURL(s)),Us=(e,s)=>{const t=document.createElement("a");t.href=e,t.download=s,document.body.appendChild(t),t.click(),document.body.removeChild(t)},H1=e=>{const s=document.createElement("canvas");s.width=e.width,s.height=e.height;const t=s.getContext("2d");return t?(t.drawImage(e,0,0),s.toDataURL("image/png")):""},Gs=(e,s,t,n)=>{const a=document.createElement("canvas");a.width=s,a.height=t;const i=a.getContext("2d");if(!i)return"";i.clearRect(0,0,s,t),Cs(i);for(let o=e.length-1;o>=0;o--)Is(i,e[o],ne(["canvasSize","scaleRatio"],1,n));return a.toDataURL("image/png")},T1=(e,s,t)=>{return a=Rt(e,s,t),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(a))}`;var a},A1=e=>{const s=["img","id","selection","path","arrows"];return e.map(t=>t.type!=="picture"\|\|t.src.startsWith("http")?wt(s,t):wt(s,{...t,src:H1(t.img)}))},Rt=(e,s,t)=>({shapes:A1(e),config:{width:s,height:t}}),Bs=(e,s)=>Ke({...e,id:ee(`${e.type}_`)},s),Z1=e=>{const s=g.useRef([]),t=g.useRef({dataChanged:[]}),[n,a]=g.useState(void 0),[i,o]=g.useState(void 0),[r,c]=g.useState(void 0),[h,d]=g.useState({states:[{shapes:[],selectedShape:void 0,source:"user"}],cursor:0}),u=h.cursor>0,p=h.cursor<h.states.length-1,f=s.current.length>0,v=g.useCallback(()=>{d(m=>bs(m.states[m.cursor].shapes,s.current)?m:{states:[...m.states.slice(0,m.cursor+1),{shapes:s.current,selectedShape:i,source:"user"}],cursor:m.cursor+1})},[i]),w=g.useCallback(m=>{s.current=[m,...s.current]},[]),M=g.useCallback((m,y,S)=>{if(m.target&&"className"in m.target&&![ys,Qs].includes(m.target.className))return void c(void 0);const R=s.current.find(D=>D.id===i?.id?!!Je(i,S,e):!!Ps(y,D,S,e));c(R)},[e,i]),x=g.useCallback(async(m,y=300,S=300)=>{const R=await w1(m,y,S,e);return w(R),v(),R},[w,v,e]),L=g.useCallback((m,y=!1)=>{s.current=s.current.map(S=>S.id===i?.id?m:S),o(S=>S?.id===m.id?m:S),y&&v()},[i,v]),b=g.useCallback(m=>{const y=m.map(S=>wt(["chosen"],S));s.current=y,v()},[v]),j=g.useCallback(m=>{o(y=>y?.id===m.id?void 0:y),s.current=s.current.filter(y=>y.id!==m.id),v()},[v]),P=g.useCallback(m=>{d(y=>{const S=m(y);return s.current=y.states[S].shapes,o(y.states[S].selectedShape),ne("cursor",S,y)})},[]),E=g.useCallback(()=>{P(m=>Math.max(0,m.cursor-1))},[P]),A=g.useCallback(()=>{P(m=>Math.min(m.states.length-1,m.cursor+1))},[P]),H=g.useCallback((m,y)=>{o(void 0),s.current=m,d(S=>y.clearHistory?{states:[{shapes:m,selectedShape:void 0,source:y.source}],cursor:0}:{states:[...S.states.slice(0,S.cursor+1),{shapes:m,selectedShape:void 0,source:y.source}],cursor:S.cursor+1})},[]),C=g.useCallback((m,y)=>{const S=s.current,R=S.findIndex(U=>U.id===m),D=S.findIndex(U=>U.id===y);b(R<D?[...S.slice(0,R),...S.slice(R+1,D+1),S[R],...S.slice(D+1,S.length)]:[...S.slice(0,D),S[R],...S.slice(D,R),...S.slice(R+1,S.length)])},[b]),V=g.useCallback(m=>{const y=s.current,S=y.findIndex(D=>D.id===m.id);if(S<0)return;const R=ne("visible",m.visible===!1,m);o(D=>D?.id===R.id?R:D),b(ne(S,R,y))},[b]),N=g.useCallback(m=>{const y=s.current,S=y.findIndex(D=>D.id===m.id);if(S<0)return;const R=ne("locked",!m.locked,m);o(D=>D?.id===R.id?R:D),b(ne(S,R,y))},[b]),Q=g.useCallback((m,y)=>{Object.hasOwn(t.current,m)&&(t.current[m]=[...t.current[m],y])},[]),F=g.useCallback((m,y)=>{if(Object.hasOwn(t.current,m))if(y){const S=t.current[m].findIndex(R=>R===y);t.current[m]=[...t.current[m].slice(0,S),...t.current[m].slice(S+1)]}else t.current[m]=[]},[]),{canvasSize:{width:k,height:T}}=e;g.useEffect(()=>{const m=h.states[h.cursor],y=Rt(m.shapes,k,T);for(const S of t.current.dataChanged)S(y,m.source)},[k,T,h]),g.useEffect(()=>{s.current=s.current.map(m=>Ke(m,e)),o(m=>m===void 0?void 0:s.current.find(y=>y.id===m.id))},[e]);const Z=g.useCallback((m,y)=>{a(S=>{const R=[S?.[0]??[y[0],y[1]],[y[0],y[1]]],D=s.current.filter(U=>((ae,z,W,ie)=>{const{selectionPadding:_,canvasOffset:q}=ie,{center:ue,borders:Ce}=G(z,ie),J=Re(W[0],z.rotation,ue,q),B=Re(W[1],z.rotation,ue,q),ve=Math.round(Math.min(J[0],B[0])-_/2),Te=Math.round(Math.max(J[0],B[0])+_),we=Math.round(Math.min(J[1],B[1])-_/2),he={x:ve,y:we,width:Te-ve,height:Math.round(Math.max(J[1],B[1])+_)-we},me=Hs(Ce,he);if(!me)return!1;if(Ce.width<=1\|\|Ce.height<=1\|\|!("path"in z)\|\|!z.path)return!0;if(ae.lineWidth=(z.style?.lineWidth??0)+10,z.type==="brush"){const te=z.points.flat(),ke=Math.min(...te.map(oe=>oe[0])),Fe=Math.min(...te.map(oe=>oe[1]));for(const oe of z.points){if(oe.length<1)break;if(oe.length<2){const pe=de(oe[0],ke,Fe,z.scaleX,z.scaleY);if(ws(me,{x:pe[0],y:pe[1],radius:(z.style?.lineWidth??1)/2}))return!0}for(let pe=0;pe<oe.length-1;pe++){const K=de(oe[pe],ke,Fe,z.scaleX,z.scaleY),Me=de(oe[pe+1],ke,Fe,z.scaleX,z.scaleY),Ye=Hs({x:Math.min(K[0],Me[0]),y:Math.min(K[1],Me[1]),width:Math.abs(K[0]-Me[0]),height:Math.abs(K[1]-Me[1])},he);if(Ye){const je=new Path2D;if(je.moveTo(...K),je.lineTo(...Me),Ts({ctx:ae,path:je,rect:Ye,offset:10,checkFill:!1}))return!0}}}return!1}const Ae=!(!z.style?.fillColor\|\|z.style?.fillColor==="transparent");return Ts({ctx:ae,path:z.path,rect:me,offset:10,checkFill:Ae})})(m,U,R,e));return o(D?.[0]),R})},[e]);return{registerEvent:Q,unregisterEvent:F,shapesRef:s,selectedShape:i,hoveredShape:r,selectionFrame:n,setSelectionFrame:a,refreshSelectedShapes:Z,addShape:w,addPictureShape:x,moveShapes:C,saveShapes:v,setSelectedShape:o,refreshHoveredShape:M,toggleShapeVisibility:V,toggleShapeLock:N,removeShape:j,updateShape:L,backwardShape:E,forwardShape:A,clearShapes:H,canGoBackward:u,canGoForward:p,canClear:f}},Xs=(e,s=!1)=>{const t=(a,i)=>{if(Array.isArray(a))return i},n=e.map(a=>{if(typeof a!="object")return null;switch(a.type){case"brush":return fe(t,ns,a);case"circle":return fe(t,cs,a);case"curve":return fe(t,os,a);case"ellipse":return fe(t,ds,a);case"line":return fe(t,is,a);case"polygon":return fe(t,as,a);case"rect":return fe(t,rs,a);case"square":return fe(t,ls,a);case"text":return fe(t,us,a)}return null});return jt(s?[...n,xt]:n)},E1=(e,s,t,n,a,i,o)=>{let r=!1;if(a){r=Je(a,t,n,!0,i?20:void 0);const h=((d,u,p,f)=>{if(d.mode==="translate")return{mode:"translate",cursorStartPosition:p,originalShape:u};if(d.mode==="rotate"){const{center:v}=G(u,f);return{mode:"rotate",cursorStartPosition:p,originalShape:u,center:[v[0],v[1]]}}return d.mode==="resize"?{mode:"resize",cursorStartPosition:p,originalShape:u,anchor:d.anchor}:void 0})(r\|\|{mode:"default"},a,t,n);if(h?.mode==="resize"\|\|h?.mode==="rotate")return{shape:a,mode:h}}const c=s.find(h=>h.id===a?.id?!!r:!!Ps(e,h,t,n));return c?{shape:c,mode:{mode:"translate",cursorStartPosition:t,originalShape:c}}:{shape:void 0,mode:{mode:o?"selectionFrame":"default"}}},R1=({disabled:e=!1,addShape:s,drawCanvasRef:t,setActiveTool:n,refreshHoveredShape:a,shapes:i,selectionMode:o,activeTool:r,isInsideComponent:c,setCanvasOffset:h,selectedShape:d,selectionCanvasRef:u,canvasOffsetStartPosition:p,refreshSelectedShapes:f,setSelectedShape:v,setSelectionFrame:w,setCanvasOffsetStartPosition:M,updateSingleShape:x,saveShapes:L,setSelectionMode:b,settings:j,isShiftPressed:P,withFrameSelection:E})=>{const[A,H]=g.useState({mode:"default"}),{registerDoubleClickEvent:C,unRegisterDoubleClickEvent:V}=(()=>{const Q=g.useRef(void 0),F=g.useRef(void 0),k=T=>{const Z=new Date().getTime();Q.current&&Z<Q.current+300&&F.current?.(T),Q.current=new Date().getTime()};return{registerDoubleClickEvent:(T,Z)=>{F.current=Z,T.addEventListener("click",k),T.addEventListener("touchend",k)},unRegisterDoubleClickEvent:T=>{T.removeEventListener("click",k),T.removeEventListener("touchend",k)}}})();g.useEffect(()=>{const Q=F=>((k,T,Z,m,y,S,R,D,U,ae,z,W,ie)=>{const _=T.current?.getContext("2d");if(!_)return;const q=Tt(k,T.current,W);if(Z.type!=="move"\|\|S===void 0)if(y.mode!=="selectionFrame"){if(Vs(k)\|\|D(k,_,q,W),m!==void 0&&!m.locked)if(y.mode==="default"\|\|y.mode==="textedition")R(Je(m,q,W,!0)\|\|{mode:"default"});else{const ue=T.current?.getContext("2d");if(!ue)return;U(p1(ue,m,q,y,W,ie))}}else z(_,q,W);else ae([q[0]-S[0],q[1]-S[1]])})(F,u,r,d,o,p,H,a,x,h,f,j,P);if(c)return document.addEventListener("mousemove",Q),document.addEventListener("touchmove",Q),()=>{document.removeEventListener("mousemove",Q),document.removeEventListener("touchmove",Q)}},[c,u,d,o,p,x,r,h,a,f,j,P]);const{isBrushShapeDoneOnMouseUp:N}=j;return g.useEffect(()=>{const Q=()=>{o.mode!=="textedition"&&o.mode!=="default"&&(o.mode==="brush"&&N&&v(void 0),b({mode:"default"}),w(void 0),L())};return c&&(document.addEventListener("mouseup",Q),document.addEventListener("touchend",Q)),()=>{c&&(document.removeEventListener("mouseup",Q),document.removeEventListener("touchend",Q))}},[c,o,N,L,w,b,v]),g.useEffect(()=>{const Q=u.current;if(!Q)return;const F=Q.getContext("2d");if(!F\|\|e)return;const k=T=>{T.preventDefault();const Z=Tt(T,u.current,j);if(r.type==="selection"){const{shape:m,mode:y}=E1(F,i,Z,j,d,Vs(T),E);v(m),b(y),y.mode==="selectionFrame"&&w([[Z[0],Z[1]],[Z[0],Z[1]]])}else if(r.type==="move")M(Z);else if(ms.some(m=>m===r.type)){const m=t.current?.getContext("2d");if(!m)return;if(r.type==="brush"){if(d?.type==="brush"){const y=((S,R,D)=>{const U={...S,points:ne(S.points.length,[[Math.round(R[0]),Math.round(R[1])]],S.points)};return Oe(U,D)})(d,Z,j);x(y)}else{const y=Ns(m,r,Z,j);if(!y)return;s(y),v(y)}b({mode:"brush"})}else if(r.type!=="picture"){const y=Ns(m,r,Z,j);s(y),n(xe),v(y),b({mode:"resize",cursorStartPosition:[Z[0]+j.selectionPadding,Z[1]+j.selectionPadding],originalShape:y,anchor:r.type==="line"\|\|r.type==="polygon"\|\|r.type==="curve"?0:[1,1]})}}};return Q.addEventListener("mousedown",k,{passive:!1}),Q.addEventListener("touchstart",k,{passive:!1}),()=>{Q.removeEventListener("mousedown",k),Q.removeEventListener("touchstart",k)}},[e,u,t,d,r,M,i,x,s,n,v,b,w,j,E]),g.useEffect(()=>{const Q=u.current;if(Q)return c?(C(Q,F=>{if(r.type==="selection"&&d?.type==="text"){const k=Tt(F,u.current,j);Je(d,k,j)&&b({mode:"textedition",defaultValue:d.value})}}),()=>{V(Q)}):void 0},[C,V,c,u,r,d,b,j]),{hoverMode:A}},F1=({disabled:e=!1,scaleRatio:s,shape:t,defaultValue:n,updateValue:a,saveShapes:i,settings:o})=>{const r=g.useRef(null),c=g.useRef(i);g.useEffect(()=>{if(!r.current)return;const d=r.current,u=p=>{p.preventDefault();const f=p.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,f)};d.addEventListener("paste",u),d.innerText="";for(const p of n){const f=document.createElement("div");p===""?f.innerHTML="<br/>":f.innerText=p,d.appendChild(f)}return d.focus(),()=>{d.removeEventListener("paste",u)}},[n]),g.useEffect(()=>{const d=c.current;return()=>{d()}},[]);const h=g.useMemo(()=>{const{borders:d,center:u}=G(t,o);return re({point:[d.x,d.y],rotation:-t.rotation,origin:u})},[t,o]);return l.jsx("div",{className:"react-paint-editor-toolbox-edittextbox",ref:r,"data-fontbold":t.style?.fontBold??!1,"data-fontitalic":t.style?.fontItalic??!1,contentEditable:!e,onInput:d=>{const u=Array.from(d.target.childNodes).map(p=>p.childNodes[0].nodeValue??"");a(u)},style:{"--react-paint-editor-toolbox-edittextbox-transform":`translate3D(${h[0]s}px, ${h[1]s}px, 0) rotate(${Ht(t.rotation)}deg)`,"--react-paint-editor-toolbox-edittextbox-fontsize":t.fontSizes+"px","--react-paint-editor-toolbox-edittextbox-padding":o.selectionPaddings+"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??qe}})},D1=(e,s,t,n,a)=>{const{canvasSize:{width:i,height:o}}=t;e.clearRect(0,0,i,o),Cs(e),t.gridGap&&((r,c,h,d)=>{const{gridGap:u,canvasOffset:p,canvasSize:{scaleRatio:f}}=d;r.strokeStyle="rgb(220,220,220)",r.lineWidth=1,r.save(),r.scale(f,f),r.beginPath();const v=-p[0]%u,w=-p[1]%u,M=Math.ceil(c/f/u),x=Math.ceil(h/f/u);for(let L=0;L<M;L++)r.moveTo(v+(L+1)u,w),r.lineTo(v+(L+1)u,w+h/f);for(let L=0;L<x;L++)r.moveTo(v,w+(L+1)u),r.lineTo(v+c/f,w+(L+1)u);r.stroke(),r.restore()})(e,i,o,t);for(let r=n.length-1;r>=0;r--)s.mode==="textedition"&&n[r]===a\|\|Is(e,n[r],t)},N1=g.forwardRef(({canGrow:e,disabled:s=!1,canvasSize:t,shapes:n,addShape:a,updateSingleShape:i,selectedShape:o,setSelectedShape:r,setSelectionFrame:c,hoveredShape:h,selectionFrame:d,refreshHoveredShape:u,refreshSelectedShapes:p,saveShapes:f,activeTool:v,setActiveTool:w,canvasOffsetStartPosition:M,setCanvasOffsetStartPosition:x,setCanvasOffset:L,isInsideComponent:b,selectionMode:j,setSelectionMode:P,selectionWidth:E,selectionColor:A,settings:H,isEditMode:C,isShiftPressed:V,withFrameSelection:N,withSkeleton:Q},F)=>{const k=g.useRef(null),T=g.useRef(null);g.useImperativeHandle(F,()=>k.current);const{hoverMode:Z}=R1({disabled:s,addShape:a,drawCanvasRef:k,setActiveTool:w,shapes:n,selectionMode:j,activeTool:v,isInsideComponent:b,setCanvasOffset:L,selectedShape:o,selectionCanvasRef:T,canvasOffsetStartPosition:M,setSelectedShape:r,setSelectionFrame:c,refreshHoveredShape:u,refreshSelectedShapes:p,setCanvasOffsetStartPosition:x,updateSingleShape:i,saveShapes:f,setSelectionMode:P,isShiftPressed:V,withFrameSelection:N,settings:H}),m=g.useCallback(y=>{if(o?.type!=="text")return;const S=k.current?.getContext("2d");if(!S)return;const R=Ke(M1(S,o,y,H),H);i(R)},[i,o,H]);return g.useEffect(()=>{const y=k.current?.getContext("2d");y&&window.requestAnimationFrame(()=>D1(y,j,H,n,o))},[n,j,o,H]),g.useEffect(()=>{const y=T.current?.getContext("2d");y&&window.requestAnimationFrame(()=>((S,R,D,U,ae,z,W,ie,_,q)=>{S.clearRect(0,0,D.canvasSize.width,D.canvasSize.height),q&&ie&&ie.id!==W?.id&&U.type==="selection"&&R.mode==="default"&&zs({ctx:S,shape:ie,settings:D,selectionWidth:ae,selectionColor:z,withAnchors:!1}),W&&U.type!=="brush"&&zs({ctx:S,shape:W,settings:D,selectionWidth:ae,selectionColor:z,withAnchors:R.mode!=="textedition"}),_&&P1({ctx:S,selectionFrame:_,settings:D})})(y,j,H,v,E,A,o,h,d,Q))},[h,d,j,o,v,H,E,A,Q]),l.jsx("div",{className:"react-paint-canvas-box",children:l.jsxs("div",{className:"react-paint-canvas-container","data-grow":e,children:[l.jsx("canvas",{className:ys,ref:k,"data-grow":e,width:t.width,height:t.height}),C&&l.jsx("canvas",{className:Qs,ref:T,width:t.width,height:t.height,"data-grow":e,style:{"--react-paint-canvas-cursor":v.type!=="selection"&&v.type!=="move"\|\|Z.mode==="resize"?"crosshair":v.type==="move"\|\|Z.mode==="translate"?"move":Z.mode==="rotate"?"grab":"default"}}),C&&j.mode==="textedition"&&o?.type==="text"&&l.jsx(F1,{scaleRatio:t.scaleRatio,disabled:s,shape:o,defaultValue:j.defaultValue,updateValue:m,saveShapes:f,settings:H})]})})}),Ys="ArrowUp",_s="ArrowDown",qs="ArrowLeft",Js="ArrowRight",I1="Delete",z1="Backspace",W1="Escape",Ks="Shift",O1="z",$1="Z",U1="y",G1="Y",e1="copy",t1="paste",B1=({isInsideComponent:e,selectedShape:s,isEditingText:t,settings:n,setSelectedShape:a,removeShape:i,pasteShape:o,updateShape:r,backwardShape:c,forwardShape:h,setShiftPressed:d})=>{const[u,p]=g.useState(void 0);return g.useEffect(()=>{const f=x=>{s&&(t\|\|(x.preventDefault(),p({...s})))},v=x=>{u&&(t\|\|(x.preventDefault(),o(((L,b)=>({...Et([20,20],L,[0,0],b),id:ee(`${L.type}_`)}))(u,n))))},w=x=>{x.key===Ks&&d(!1)},M=x=>{if(x.metaKey\|\|x.ctrlKey){if(x.key===$1\|\|x.key===O1)return x.preventDefault(),x.stopPropagation(),void c();if(x.key===G1\|\|x.key===U1)return x.preventDefault(),x.stopPropagation(),void h()}if(x.key===Ks)return void d(!0);if(!s)return;if(x.key===W1)return void a(void 0);if(t)return;const L={[qs]:[n.gridGap?-n.gridGap:-1,0],[Js]:[n.gridGap?n.gridGap:1,0],[_s]:[0,n.gridGap?n.gridGap:1],[Ys]:[0,n.gridGap?-n.gridGap:-1]};switch(x.key){case qs:case Js:case _s:case Ys:x.preventDefault(),x.stopPropagation(),r(Et(L[x.key],s,[0,0],n));break;case I1:case z1:x.preventDefault(),x.stopPropagation(),i(s)}};if(e)return document.addEventListener("keydown",M),document.addEventListener("keyup",w),document.addEventListener(e1,f),document.addEventListener(t1,v),()=>{document.removeEventListener("keydown",M),document.removeEventListener("keyup",w),document.removeEventListener(e1,f),document.removeEventListener(t1,v)}},[e,u,t,s,n,r,i,a,o,c,h,d]),{}},X1=({isLoading:e=!1})=>{const[s,t]=g.useState("hidden");return g.useEffect(()=>{if(!e){t("fadeOut");const n=setTimeout(()=>t("hidden"),300);return()=>{clearTimeout(n)}}t("visible")},[e]),s==="hidden"?null:l.jsx("div",{className:"react-paint-editor-loading","data-loading":s,style:{"--react-paint-editor-loading-zindex":r1,"--react-paint-editor-loading-transition-duration":"300ms"},children:l.jsxs("div",{className:"react-paint-editor-loader",children:[l.jsx("div",{}),l.jsx("div",{}),l.jsx("div",{}),l.jsx("div",{})]})})},Y1="infos",_1=4e3,q1=({type:e,text:s,duration:t})=>{const[n,a]=g.useState(!1);return g.useEffect(()=>{const i=setTimeout(()=>{a(!0)},100),o=setTimeout(()=>{a(!1)},t-500-100);return()=>{clearTimeout(i),clearTimeout(o)}},[t]),l.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+n,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:s})},J1=({snackbarList:e})=>l.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":l1},children:e.map(s=>l.jsx(q1,{...s},s.id))}),$=g.forwardRef((e,s)=>{if(e.type==="file"\|\|e.type==="color"){const{hidden:d=!1,disabled:u=!1,selected:p=!1,icon:f,children:v,className:w="",title:M,onClick:x,...L}=e;return l.jsxs("label",{className:`react-paint-editor-button ${w}`,title:M,onClick:x,"data-disabled":+u,"data-selected":+p,"data-hidden":+d,children:[l.jsx("input",{ref:s,disabled:u,...L}),l.jsxs("span",{className:"react-paint-editor-button-content",children:[v&&l.jsx("span",{className:"react-paint-editor-button-children",children:v}),f&&l.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:f}})]})]})}const{hidden:t=!1,disabled:n=!1,selected:a=!1,icon:i,children:o,type:r="button",className:c="",...h}=e;return l.jsx("button",{className:`react-paint-editor-button ${c}`,ref:s,disabled:n,"data-disabled":+n,"data-selected":+a,"data-hidden":+t,type:r,...h,children:l.jsxs("span",{className:"react-paint-editor-button-content",children:[o&&l.jsx("span",{className:"react-paint-editor-button-children",children:o}),i&&l.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:i}})]})})}),Xe=({children:e,title:s="",className:t="",position:n="bottom",fitContainer:a=!1,alignment:i="center"})=>l.jsxs("div",{className:`react-paint-editor-panel ${t}`,"data-fitcontainer":a,"data-position":n,"data-alignment":i,style:{"--react-paint-editor-panel-zindex":ss},children:[s&&l.jsx("h3",{className:"react-paint-editor-panel-title",children:s}),e]}),K1=e=>{switch(e){case"brush":return $t;case"line":return Xt;case"polygon":return Qt;case"curve":return Yt;case"rect":case"square":return mt;case"circle":case"ellipse":return yt;case"text":return Bt;case"picture":return St;case"triangle":return""}},en=({disabled:e=!1,shape:s,selected:t,layoutDragging:n,toggleShapeVisibility:a,toggleShapeLock:i,setLayoutDragging:o,handleRemove:r,handleSelect:c,onMoveShapes:h})=>{const d=g.useRef(null),{isOver:u}=(({disabled:p=!1,ref:f,shape:v,layoutDragging:w,setLayoutDragging:M,handleSelect:x,onMoveShapes:L})=>{const[b,j]=g.useState(!1);return g.useEffect(()=>{w\|\|j(!1)},[w]),g.useEffect(()=>{const P=f.current;if(!P)return;const E=()=>{M(void 0)},A=Q=>(Q.preventDefault&&Q.preventDefault(),!1),H=Q=>{x(v),Q.dataTransfer&&(Q.dataTransfer.effectAllowed="move",Q.dataTransfer.setData("draggableShapeId",v.id),M(v.id))},C=()=>{w!==v.id&&j(!0)},V=()=>{j(!1)},N=Q=>(Q.stopPropagation(),Q.dataTransfer&&L(Q.dataTransfer.getData("draggableShapeId"),v.id),!1);return p\|\|(P.addEventListener("dragstart",H),P.addEventListener("dragend",E),P.addEventListener("dragover",A),P.addEventListener("dragenter",C),P.addEventListener("dragleave",V),P.addEventListener("drop",N)),()=>{p\|\|(P.removeEventListener("dragstart",H),P.removeEventListener("dragend",E),P.removeEventListener("dragover",A),P.removeEventListener("dragenter",C),P.removeEventListener("dragleave",V),P.removeEventListener("drop",N))}},[p,f,v,M,x,L,w]),{isOver:b}})({disabled:e,ref:d,shape:s,layoutDragging:n,setLayoutDragging:o,handleSelect:c,onMoveShapes:h});return l.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(n===s.id),"data-is-over":+u,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),c(s))},"data-selected":+t,ref:d,children:[l.jsx("span",{dangerouslySetInnerHTML:{__html:K1(s.type)}}),l.jsx("span",{children:s.id}),l.jsx("div",{className:"react-paint-editor-layouts-separator"}),l.jsx($,{className:"react-paint-editor-layouts-visible-button",title:s.visible?"Hide":"Show","data-visible":s.visible!==!1,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),a(s))},icon:s.visible===!1?'<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>':'<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>'}),l.jsx($,{className:"react-paint-editor-layouts-locked-button",title:s.locked?"Locked":"Unlocked","data-locked":!!s.locked,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),i(s))},icon:s.locked?'<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>':'<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>'}),l.jsx($,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),r(s))},icon:Ut})]})},tn=({gridFormat:e,setGridFormat:s,disabled:t=!1,shapes:n,removeShape:a,toggleShapeVisibility:i,toggleShapeLock:o,selectedShape:r,moveShapes:c,selectShape:h,isLayoutPanelShown:d})=>{const[u,p]=g.useState(void 0);return d?l.jsx(Xe,{alignment:"right",className:"react-paint-editor-layouts-panel",children:l.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:l.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[l.jsxs("div",{className:"react-paint-editor-layouts-row",children:[l.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),l.jsx($,{icon:'<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>',className:"react-paint-editor-layouts-grid-button",selected:e==="none",disabled:t,onClick:()=>s("none")}),["small","medium","large"].map(f=>l.jsx($,{className:"react-paint-editor-layouts-grid-button",selected:e===f,disabled:t,onClick:()=>s(f),children:f.charAt(0).toUpperCase()},f))]}),l.jsx("hr",{}),l.jsx("div",{className:"react-paint-editor-layouts",children:n.length===0?l.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):n.map(f=>l.jsx(en,{shape:f,disabled:t,layoutDragging:u,setLayoutDragging:p,selected:r?.id===f.id,handleSelect:h,handleRemove:a,onMoveShapes:c,toggleShapeVisibility:i,toggleShapeLock:o},f.id))})]})})}):null},Ft=({children:e,onClose:s,position:t="center",className:n=""})=>l.jsxs("div",{className:"react-paint-editor-modal","data-position":t,style:{"--react-paint-editor-modal-zindex":ss},children:[l.jsx("div",{className:"react-paint-editor-modal-mask",onClick:s}),l.jsx("div",{className:`react-paint-editor-modal-panel ${n}`,children:e})]}),ht=({selectedSettings:e,setSelectedSettings:s,title:t="Choisissez une couleur",mode:n="fill",disabled:a=!1,values:i,field:o,value:r="",valueChanged:c})=>{const[h]=g.useState(ee("settings_")),d=e===h;return i.length?l.jsxs(l.Fragment,{children:[l.jsx($,{selected:d,title:t,disabled:a,onClick:()=>{s(u=>u===h?void 0:h)},icon:r==="transparent"?n==="fill"?es:Kt:void 0,children:r!=="transparent"&&l.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":n,style:{"--react-paint-editor-colorfield-color-value":r}})}),d&&l.jsx(Xe,{title:t,alignment:"left",children:l.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[i.map((u,p)=>l.jsx($,{title:u,selected:u===r,color:u,icon:u==="transparent"?n==="fill"?es:Kt:void 0,onClick:()=>{c(o,u)},children:u!=="transparent"&&l.jsx("div",{className:"react-paint-editor-colorfield-color",color:u,"data-mode":n,style:{"--react-paint-editor-colorfield-color-value":u}})},u)),l.jsx($,{type:"color",title:"Custom color",selected:!i.includes(r),value:r,onChange:u=>{const p=+u.target.value;c(o,Number.isNaN(p)?u.target.value:p)},children:l.jsx("div",{className:"react-paint-editor-colorfield-customcolor",style:{"--react-paint-editor-colorfield-color-value":i.includes(r)?"var(--react-paint-editor-app-font-color)":r},children:l.jsx("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},sn=({disabled:e=!1,selectedShape:s,removeShape:t})=>l.jsx($,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{t(s)},icon:Ut}),Dt=({CustomOption:e,selectedSettings:s,setSelectedSettings:t,title:n="Choisissez l'option",disabled:a=!1,field:i,icon:o,values:r,defaultValue:c,valueChanged:h})=>{const[d]=g.useState(ee("settings_")),u=s===d;return r.length?l.jsxs(l.Fragment,{children:[l.jsx($,{selected:u,title:n,icon:o,disabled:a,onClick:()=>{t(p=>p===d?void 0:d)}}),u&&l.jsx(Xe,{title:n,alignment:"left",fitContainer:!0,children:l.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:r.map(p=>l.jsx($,{title:`${p}`,onClick:()=>(f=>{h(i,f)})(p),selected:c===p,style:{"--react-paint-editor-button-padding":"16px"},children:l.jsx(e,{children:p})},p))})})]}):null},nn=({children:e})=>l.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),s1=({selectedSettings:e,setSelectedSettings:s,disabled:t=!1,values:n,defaultValue:a,valueChanged:i})=>n.length?l.jsx(Dt,{selectedSettings:e,setSelectedSettings:s,CustomOption:nn,title:"Police",icon:'<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>',disabled:t,field:"fontFamily",values:n,defaultValue:a,valueChanged:i}):null,an=({disabled:e,toggleLayoutPanel:s})=>l.jsx($,{title:"Toggle layers panel",disabled:e,onClick:s,icon:'<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>',className:"react-paint-editor-layout-button"}),on=({children:e})=>l.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[l.jsx("span",{className:"react-paint-editor-linearrow-left"}),l.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),n1=({selectedSettings:e,setSelectedSettings:s,disabled:t=!1,values:n,defaultValue:a,valueChanged:i})=>n.length?l.jsx(Dt,{selectedSettings:e,setSelectedSettings:s,CustomOption:on,title:"Flèches",icon:'<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>',disabled:t,field:"lineArrow",values:n,defaultValue:a,valueChanged:i}):null,rn=({children:e})=>l.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{})]}),i1=({selectedSettings:e,setSelectedSettings:s,disabled:t=!1,values:n,defaultValue:a,valueChanged:i})=>n.length?l.jsx(Dt,{selectedSettings:e,setSelectedSettings:s,CustomOption:rn,icon:'<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>',title:"Type de traits",disabled:t,field:"lineDash",values:n,defaultValue:a,valueChanged:i}):null,et=({selectedSettings:e,setSelectedSettings:s,title:t="Choisissez l'intervalle",icon:n,disabled:a=!1,field:i,value:o=1,min:r=1,max:c=20,step:h=1,unity:d="",valueChanged:u})=>{const p=Math.round(o),[f]=g.useState(ee("settings_")),v=g.useRef(null);g.useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const w=e===f;return r===c?null:l.jsxs(l.Fragment,{children:[l.jsx($,{selected:w,title:t,disabled:a,icon:n,onClick:()=>{s(M=>M===f?void 0:f)}}),w&&l.jsx(Xe,{title:t,alignment:"left",fitContainer:!0,children:l.jsx("div",{children:l.jsxs("label",{className:"react-paint-editor-rangefield",children:[l.jsx("input",{type:"range",min:r,max:c,step:h,value:o,onChange:M=>{const x=+M.target.value;u(i,Number.isNaN(x)?M.target.value:x,!1),v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{u(i,Number.isNaN(x)?M.target.value:x,!0)},1e3)}}),l.jsxs("span",{children:[p,d]})]})})})]})},a1=({selectedSettings:e,setSelectedSettings:s,disabled:t=!1,min:n,max:a,step:i,value:o,valueChanged:r})=>n===a?null:l.jsx(et,{selectedSettings:e,setSelectedSettings:s,icon:Qt,title:"Nombre de points",disabled:t,field:"pointsCount",min:n,max:a,step:i,unity:"",value:o,valueChanged:r}),pt=({setSelectedSettings:e,disabled:s=!1,field:t,icon:n,values:a,value:i=!1,valueChanged:o})=>{const[r]=g.useState(ee("settings_"));return a.length!==2?null:l.jsx($,{onClick:()=>{e(c=>c===r?void 0:r),o(t,!i)},selected:i,disabled:s,icon:n})},Nt=({activeTool:e,selectedShape:s,selectedShapeTool:t,disabled:n,selectedSettings:a,setSelectedSettings:i,handleShapeStyleChange:o,handlePolygonLinesCount:r,handleShapeFontFamilyChange:c})=>s?l.jsx(l.Fragment,{children:t&&l.jsxs(l.Fragment,{children:["strokeColor"in t.settings&&l.jsx(ht,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:s.style?.strokeColor,valueChanged:o,values:t.settings.strokeColor.values}),"fillColor"in t.settings&&l.jsx(ht,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:n,field:"fillColor",value:s.style?.fillColor,valueChanged:o,values:t.settings.fillColor.values}),"lineWidth"in t.settings&&l.jsx(et,{selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",icon:Jt,disabled:n,field:"lineWidth",value:s.style?.lineWidth,valueChanged:o,unity:"px",min:t.settings.lineWidth.min,max:t.settings.lineWidth.max,step:t.settings.lineWidth.step}),"lineDash"in t.settings&&l.jsx(i1,{selectedSettings:a,setSelectedSettings:i,disabled:n,defaultValue:s.style?.lineDash,valueChanged:o,values:t.settings.lineDash.values}),"lineArrow"in t.settings&&l.jsx(n1,{selectedSettings:a,setSelectedSettings:i,disabled:n,defaultValue:s.style?.lineArrow,valueChanged:o,values:t.settings.lineArrow.values}),"pointsCount"in t.settings&&l.jsx(a1,{selectedSettings:a,setSelectedSettings:i,disabled:n,valueChanged:r,min:t.settings.pointsCount.min,max:t.settings.pointsCount.max,step:t.settings.pointsCount.step,value:s.style?.pointsCount}),"fontFamily"in t.settings&&l.jsx(s1,{selectedSettings:a,setSelectedSettings:i,disabled:n,valueChanged:c,values:t.settings.fontFamily.values,defaultValue:s.style?.fontFamily}),"fontBold"in t.settings&&l.jsx(pt,{setSelectedSettings:i,disabled:n,field:"fontBold",icon:_t,valueChanged:c,values:t.settings.fontBold.values,value:s.style?.fontBold}),"fontItalic"in t.settings&&l.jsx(pt,{setSelectedSettings:i,disabled:n,field:"fontItalic",icon:qt,valueChanged:c,values:t.settings.fontItalic.values,value:s.style?.fontItalic}),"opacity"in t.settings&&l.jsx(et,{selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:Gt,min:t.settings.opacity.min,max:t.settings.opacity.max,step:t.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:s.style?.opacity??100,valueChanged:o})]})}):"settings"in e?l.jsxs(l.Fragment,{children:["strokeColor"in e.settings&&l.jsx(ht,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:o,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&l.jsx(ht,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:n,field:"fillColor",value:e.settings.fillColor.default,valueChanged:o,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&l.jsx(et,{selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",disabled:n,field:"lineWidth",icon:Jt,value:e.settings.lineWidth.default,valueChanged:o,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&l.jsx(i1,{selectedSettings:a,setSelectedSettings:i,disabled:n,defaultValue:e.settings.lineDash.default,valueChanged:o,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&l.jsx(n1,{selectedSettings:a,setSelectedSettings:i,disabled:n,defaultValue:e.settings.lineArrow.default,valueChanged:o,values:e.settings.lineArrow.values}),"pointsCount"in e.settings&&l.jsx(a1,{selectedSettings:a,setSelectedSettings:i,disabled:n,valueChanged:r,min:e.settings.pointsCount.min,max:e.settings.pointsCount.max,step:e.settings.pointsCount.step,value:e.settings.pointsCount.default}),"fontFamily"in e.settings&&l.jsx(s1,{selectedSettings:a,setSelectedSettings:i,disabled:n,valueChanged:c,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&l.jsx(pt,{setSelectedSettings:i,disabled:n,field:"fontBold",icon:_t,valueChanged:c,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&l.jsx(pt,{setSelectedSettings:i,disabled:n,field:"fontItalic",icon:qt,valueChanged:c,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&l.jsx(et,{selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:Gt,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:e.settings.opacity.default,valueChanged:o})]}):null,ln=({width:e,disabled:s=!1,availableTools:t,updateToolSettings:n,layersManipulation:a,toggleLayoutPanel:i,activeTool:o,selectedShape:r,canvas:c,settings:h,updateShape:d,removeShape:u})=>{const[p,f]=g.useState(void 0),[v,w]=g.useState(!1),M=()=>{w(A=>!A)},x=r?t.find(A=>A.id===r.toolId)\|\|t.find(A=>A.type===r.type):void 0,L=(x?Object.keys(x.settings).length+1:"settings"in o?Object.keys(o.settings).length:0)+(a?1:0),b=e<40L,j=(A,H,C=!0)=>{r?(d(Ke(ne(["style",A],H,r),h),C),x&&n(x.id,A,H)):n(o.id,A,H)},P=(A,H)=>{if(r){if(r.type!=="text")return;const C=c?.getContext("2d");if(!C)return;const V=ne(["style",A],H,r),N=Zt(C,V.value,V.width,V.style?.fontBold??!1,V.style?.fontItalic??!1,V.style?.fontFamily),Q=Ke({...V,fontSize:N,height:NV.value.length},h);d(Q,!0),x&&n(x.id,A,H)}else n(o.id,A,H)},E=(A,H)=>{if(r){if(r.type!=="polygon"&&r.type!=="curve")return;d(r.type==="polygon"?((C,V,N)=>{const Q=C.points.length;if(Q===V)return C;if(Q>V){const Z=C.points.slice(0,V);return Ge({...C,points:Z,style:{...C.style,pointsCount:Z.length}},N)}const F=V-Q,k=new Array(F).fill(void 0).map((Z,m)=>[C.points[0][0]+(C.points[1][0]-C.points[0][0])(m+1)/(F+1),C.points[0][1]+(C.points[1][1]-C.points[0][1])(m+1)/(F+1)]),T=[C.points[0],...k,...C.points.slice(1,C.points.length)];return Ge({...C,points:T,style:{...C.style,pointsCount:T.length}},N)})(r,H,h):((C,V,N)=>{const Q=C.points.length;if(Q===V)return C;if(Q>V){const Z=C.points.slice(0,V);return Be({...C,points:Z,style:{...C.style,pointsCount:Z.length}},N)}const F=V-Q,k=new Array(F).fill(void 0).map((Z,m)=>[C.points[0][0]+(C.points[1][0]-C.points[0][0])(m+1)/(F+1),C.points[0][1]+(C.points[1][1]-C.points[0][1])(m+1)/(F+1)]),T=[C.points[0],...k,...C.points.slice(1,C.points.length)];return Be({...C,points:T,style:{...C.style,pointsCount:T.length}},N)})(r,H,h),!0),x&&n(x.id,A,H)}else n(o.id,A,H)};return l.jsxs(l.Fragment,{children:[l.jsxs("div",{className:"react-paint-editor-settings-bar",children:[l.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[b&&L>2&&l.jsx($,{disabled:s,onClick:M,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>'}),r?l.jsx(l.Fragment,{children:x&&l.jsxs(l.Fragment,{children:[!b&&l.jsx(Nt,{activeTool:o,selectedShape:r,selectedShapeTool:x,disabled:s,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P}),o.type==="selection"&&l.jsx(sn,{disabled:s,selectedShape:r,removeShape:u})]})}):!b&&l.jsx(Nt,{activeTool:o,selectedShape:r,selectedShapeTool:x,disabled:s,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P})]}),l.jsx("div",{className:"react-paint-editor-settings-separator"}),a&&l.jsx(an,{disabled:s,toggleLayoutPanel:i})]}),v&&l.jsx(Ft,{className:"react-paint-editor-settings-modal",onClose:M,position:"bottom",children:l.jsx(Nt,{activeTool:o,selectedShape:r,selectedShapeTool:x,disabled:s,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P})})]})},o1=({disabled:e=!1,withText:s=!1,loadFile:t,type:n,img:a,accept:i})=>{const o=g.useRef(null);return l.jsx($,{ref:o,type:"file",onClick:r=>{r.stopPropagation(),o.current&&(o.current.value="")},onChange:r=>{const c=r.target.files?.item(0);c&&t(c)},accept:i,title:n.label??n.type,icon:a,disabled:e,children:s?n.label:void 0})},le=({type:e,img:s,isActive:t,withText:n=!1,disabled:a=!1,setActive:i})=>l.jsx($,{disabled:a,selected:t,onClick:()=>{i(e)},title:e.label??e.type,icon:s,children:n?e.label:void 0}),cn=({activeTool:e,withActionsInMenu:s,hasActionToUndo:t=!1,hasActionToRedo:n=!1,hasActionToClear:a=!1,undoAction:i,redoAction:o,clearCanvas:r,alignment:c,group:h,vertical:d=!1,disabled:u=!1,withLoadAndSave:p,withExport:f,addPicture:v,loadFile:w,togglePictureUrlModal:M,saveFile:x,exportCanvasInFile:L,withUploadPicture:b,withUrlPicture:j})=>{const[P,E]=g.useState(!1),[,A]=g.useTransition(),H=h?.tools?.some(V=>V===e.type),C=(H?e.icon:h.img)??h.title;return g.useEffect(()=>{if(!P)return;const V=()=>{E(!1)};return document.addEventListener("click",V),()=>{document.removeEventListener("click",V)}},[P]),s\|\|b\|\|j\|\|p\|\|f?l.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[l.jsx($,{selected:H,title:h.title,disabled:u,onClick:()=>{A(()=>{E(!0)})},icon:C}),P&&l.jsx(Xe,{alignment:c,position:"top",children:l.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+d,children:[s&&l.jsxs(l.Fragment,{children:[l.jsx(le,{withText:!0,type:Ie,disabled:u\|\|!t,img:Ie.icon,isActive:e.id===Ie.id,setActive:i}),l.jsx(le,{withText:!0,type:ze,disabled:u\|\|!n,img:ze.icon,isActive:e.id===ze.id,setActive:o}),l.jsx(le,{withText:!0,type:We,disabled:u\|\|!a,img:We.icon,isActive:e.id===We.id,setActive:r}),(b\|\|j\|\|p)&&l.jsx("hr",{})]}),b&&l.jsx(o1,{withText:!0,type:ps,disabled:u,loadFile:async V=>{E(!1),await v(V)},img:ps.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml"}),j&&l.jsx($,{disabled:u,selected:!1,onClick:M,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\|\|j)&&p&&l.jsx("hr",{}),p&&l.jsxs(l.Fragment,{children:[l.jsx(o1,{withText:!0,type:hs,disabled:u,loadFile:V=>{E(!1),w(V)},img:hs.icon,accept:"application/JSON"}),l.jsx(le,{withText:!0,disabled:u,type:Ct,img:Ct.icon,isActive:e.id===Ct.id,setActive:x})]}),f&&l.jsx(le,{withText:!0,disabled:u,type:bt,img:bt.icon,isActive:e.id===bt.id,setActive:L})]})})]}):null},dn=({togglePictureUrlModal:e,addPicture:s})=>{const t=g.useRef(null);return g.useEffect(()=>{t.current&&t.current.focus()},[]),l.jsx(Ft,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,children:l.jsxs("form",{onSubmit:async n=>{n.preventDefault();const a=t.current?.value;a&&(await s(a),e())},children:[l.jsxs("label",{children:["URL ",l.jsx("input",{type:"text",ref:t})]}),l.jsx($,{onClick:e,children:"Annuler"}),l.jsx($,{type:"submit",selected:!0,children:"Ajouter"})]})})},un=({activeTool:e,alignment:s,group:t,disabled:n=!1,setActiveToolFromId:a})=>{const i=g.useRef(null),[o,r]=g.useState(!1),[,c]=g.useTransition(),[h,d]=g.useState(void 0),u=v=>{d(v),a(v.id)};if(g.useEffect(()=>{if(!o)return;const v=w=>{!xs(w,i.current)&&r(!1)};return document.addEventListener("mousedown",v,{passive:!1}),document.addEventListener("touchstart",v,{passive:!1}),()=>{document.removeEventListener("mousedown",v),document.removeEventListener("touchstart",v)}},[o]),"type"in t)return l.jsx(le,{disabled:n,type:t,img:t.icon,isActive:e.id===t.id,setActive:u});if(!t.toolsType.length)return null;if(t.toolsType?.length===1)return l.jsx(le,{disabled:n,type:t.toolsType[0],img:t.toolsType[0].icon,isActive:e.id===t.toolsType[0].id,setActive:u});const p=t?.toolsType.find(v=>v.type===e.type)!==void 0,f=(h?h.icon:t.toolsType?.[0]?.icon)??t.title;return l.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[l.jsx($,{selected:p,title:t.title,disabled:n,onClick:()=>{h?a(h.id):t.toolsType?.[0]&&u(t.toolsType[0]),c(()=>{r(!0)})},icon:f}),o&&l.jsx(Xe,{alignment:s,position:"top",children:l.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+t.vertical,ref:i,children:t.toolsType.map((v,w)=>l.jsx(le,{disabled:n,type:v,img:v.icon,isActive:e.id===v.id,setActive:u},v.id))})})]})},hn=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],pn=({width:e,disabled:s=!1,activeTool:t,hasActionToUndo:n=!1,hasActionToRedo:a=!1,hasActionToClear:i=!1,withLoadAndSave:o,withExport:r,clearCanvas:c,setActiveTool:h,undoAction:d,redoAction:u,addPicture:p,loadFile:f,saveFile:v,exportCanvasInFile:w,availableTools:M,withUrlPicture:x,withUploadPicture:L})=>{const b=((k,T)=>{const Z=T.flatMap(m=>{if(typeof m!="object")return k.filter(S=>S.type===m);const y=k.filter(S=>m.toolsType.includes(S.type));return y?{...m,toolsType:y}:null});return jt(Z)})(M,hn),j=e<40(5+b.length),P=e<40(2+b.length),[E,A]=g.useState(!1),[H,C]=g.useState(!1),V=()=>{A(k=>!k)},N=k=>{h(k),A(!1)},Q=k=>{N(M.find(T=>T.id===k)??t)},F=M.find(k=>k.type===t.type)!==void 0;return l.jsxs(l.Fragment,{children:[l.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",children:[l.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[l.jsx(le,{type:xe,disabled:s,img:xe.icon,isActive:t.id===xe.id,setActive:N}),P?l.jsx($,{disabled:s,onClick:V,title:"Toggle tools",icon:'<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>',selected:F}):b.map((k,T)=>l.jsx(un,{disabled:s,activeTool:t,group:k,setActiveToolFromId:Q},"id"in k?k.id:k.title))]}),!j&&l.jsxs(l.Fragment,{children:[l.jsx(le,{type:Ie,disabled:s\|\|!n,img:Ie.icon,isActive:t.id===Ie.id,setActive:d}),l.jsx(le,{type:ze,disabled:s\|\|!a,img:ze.icon,isActive:t.id===ze.id,setActive:u}),l.jsx(le,{type:We,disabled:s\|\|!i,img:We.icon,isActive:t.id===We.id,setActive:c})]}),l.jsx(cn,{withActionsInMenu:j,disabled:s,vertical:!0,alignment:"right",group:{title:"Menu",img:'<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>'},activeTool:t,addPicture:p,loadFile:f,saveFile:v,togglePictureUrlModal:()=>{C(!0)},exportCanvasInFile:w,withUploadPicture:L,withUrlPicture:x,withLoadAndSave:o,withExport:r,hasActionToUndo:n,hasActionToRedo:a,hasActionToClear:i,undoAction:d,redoAction:u,clearCanvas:c})]}),E&&l.jsx(Ft,{className:"react-paint-editor-toolbar-modal",onClose:V,children:M.map((k,T)=>k.type==="picture"?null:l.jsx(le,{disabled:s,type:k,img:k.icon,withText:!1,isActive:t.id===k.id,setActive:N},k.id))}),H&&l.jsx(dn,{togglePictureUrlModal:()=>{C(k=>!k)},addPicture:p})]})},gt={none:0,small:10,medium:20,large:40},gn={toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8"},fn=()=>{const e=g.useRef([]),[s,t]=g.useState([]);return g.useEffect(()=>()=>{for(const n of e.current)clearTimeout(n)},[]),{snackbarList:s,addSnackbar:({type:n=Y1,duration:a=_1,text:i})=>{const o={id:ee("snackbar_"),duration:a,type:n,text:i};t(r=>[...r,o]),e.current=[...e.current,setTimeout(()=>{return r=o.id,void t(c=>c.filter(h=>h.id!==r));var r},a)]}}};Se.Canvas=({options:e,className:s,style:t,canvasProps:n})=>{const{shapesRef:a,selectedShape:i,selectionFrame:o,hoveredShape:r,addShape:c,setSelectedShape:h,setSelectionFrame:d,refreshSelectedShapes:u,refreshHoveredShape:p,removeShape:f,updateShape:v,backwardShape:w,forwardShape:M,saveShapes:x,refs:L,width:b,height:j,settings:P,canvasSize:E,setCanvasSize:A,setCanvasOffset:H,selectShape:C,activeTool:V,setActiveTool:N,isInsideComponent:Q,isEditMode:F,isDisabled:k,canvas:{withSkeleton:T,withFrameSelection:Z,canGrow:m,canShrink:y}}=n,{canvasBackgroundColor:S,canvasSelectionColor:R,canvasSelectionWidth:D}={...c1,...e},U=g.useRef(null),[ae,z]=g.useState(void 0),[W,ie]=g.useState({mode:"default"}),[_,q]=g.useState(!1),ue=g.useCallback(J=>{c(J),C(J)},[c,C]),Ce=g.useCallback(J=>{const B=J/b;A({width:J,height:jB,scaleRatio:B})},[b,j,A]);return B1({isInsideComponent:Q,isEditingText:W.mode==="textedition",settings:P,selectedShape:i,setSelectedShape:h,removeShape:f,pasteShape:ue,updateShape:v,backwardShape:w,forwardShape:M,setShiftPressed:q}),(({onResized:J,element:B})=>{g.useEffect(()=>{const ve=B.current;if(!ve)return;const Te=new ResizeObserver(we=>{const he=we?.[0]?.borderBoxSize?.[0],{width:me,height:Ae}=he?{width:he.inlineSize,height:he.blockSize}:we?.[0].contentRect??{};J(me,Ae)});return Te.observe(ve),()=>{Te.unobserve(ve)}},[B,J])})({element:U,onResized:Ce}),l.jsx("div",{ref:U,className:"react-paint-app-row"+(s?` ${s}`:""),"data-grow":m,"data-shrink":y,style:{"--react-paint-app-row-width":E.width,"--react-paint-app-canvaswidth":`${b}px`,"--react-paint-app-row-aspectratio":`calc(${E.width} / ${E.height})`,"--react-paint-app-canvas-bg":S,...t},children:l.jsx(N1,{ref:L.canvas,canGrow:m,disabled:k,isInsideComponent:Q,activeTool:V,setActiveTool:N,canvasOffsetStartPosition:ae,setCanvasOffsetStartPosition:z,shapes:a.current,addShape:c,updateSingleShape:v,selectedShape:i,selectionFrame:o,setSelectedShape:h,setSelectionFrame:d,hoveredShape:r,refreshHoveredShape:p,refreshSelectedShapes:u,settings:P,setCanvasOffset:H,saveShapes:x,canvasSize:E,selectionMode:W,setSelectionMode:ie,selectionColor:R,selectionWidth:D,isEditMode:F,isShiftPressed:_,withFrameSelection:Z,withSkeleton:T})})},Se.Editor=({editorProps:e,className:s,style:t,options:n,children:a})=>{const{shapesRef:i,addPictureShape:o,moveShapes:r,toggleShapeVisibility:c,toggleShapeLock:h,canGoBackward:d,canGoForward:u,canClear:p,selectedShape:f,removeShape:v,updateShape:w,backwardShape:M,forwardShape:x,refs:L,width:b,height:j,canvasSize:P,selectTool:E,selectShape:A,activeTool:H,setActiveTool:C,setAvailableTools:V,isEditMode:N,isDisabled:Q,availableTools:F,gridGap:k,setGridGap:T,loadFile:Z,exportPicture:m,exportData:y,clearCanvas:S,settings:R,canvas:{canGrow:D,layersManipulation:U,withExport:ae,withLoadAndSave:z,withUploadPicture:W,withUrlPicture:ie}}=e,{toolbarBackgroundColor:_,dividerColor:q,fontRadius:ue,fontDisabledColor:Ce,fontDisabledBackgroundColor:J,fontColor:B,fontBackgroundColor:ve,fontSelectedColor:Te,fontSelectedBackgroundColor:we,fontHoverColor:he,fontHoverBackgroundColor:me}={...gn,...n},[Ae,te]=g.useState(!1),[ke,Fe]=g.useState(!1),oe=k>=gt.large?"large":k>=gt.medium?"medium":k>=gt.small?"small":"none",{snackbarList:pe,addSnackbar:K}=fn(),Me=g.useCallback((Y,ce,vt)=>{V(Ze=>Ze.map(O=>O.id===Y?ne(["settings",ce,"default"],vt,O):O)),C(Ze=>Ze.id===Y?ne(["settings",ce,"default"],vt,Ze):Ze)},[C,V]),Ye=g.useCallback(()=>{E(xe),M()},[E,M]),je=g.useCallback(()=>{E(xe),x()},[E,x]),_e=g.useCallback(()=>{te(!0);try{m(),te(!1)}catch(Y){Y instanceof Error&&K({type:"error",text:"L'export a échoué"}),console.warn(Y)}finally{te(!1)}},[m,K]),ft=g.useCallback(()=>{te(!0);try{y(),te(!1)}catch(Y){Y instanceof Error&&K({type:"error",text:"L'enregistrement a échoué"}),console.warn(Y)}finally{te(!1)}},[y,K]),It=g.useCallback(async Y=>{te(!0);try{await Z(Y),K({type:"success",text:"Fichier chargé !"})}catch(ce){ce instanceof Error&&K({type:"error",text:"Le chargement a échoué"}),console.warn(ce)}finally{te(!1)}},[Z,K]),zt=g.useCallback(async Y=>{te(!0);try{const ce=await o(Y,b,j);A(ce)}catch(ce){ce instanceof Error&&K({type:"error",text:"Le chargement a échoué"}),console.warn(ce)}finally{te(!1)}},[o,A,K,b,j]),ye=`${s?`${s} `:""}${ke?"react-paint-editor-layout-opened ":""}react-paint-editor-app`;return l.jsxs("div",{ref:L.setEditor,className:ye,style:{"--react-paint-editor-app-maxWidth":D?"100%":`${b}px`,"--react-paint-editor-app-toolbar-bg":_,"--react-paint-editor-app-divider-color":q,"--react-paint-editor-app-font-radius":ue,"--react-paint-editor-app-font-disabled-color":Ce,"--react-paint-editor-app-font-disabled-bg":J,"--react-paint-editor-app-font-color":B,"--react-paint-editor-app-font-bg":ve,"--react-paint-editor-app-font-selected-color":Te,"--react-paint-editor-app-font-selected-bg":we,"--react-paint-editor-app-font-hover-color":he,"--react-paint-editor-app-font-hover-bg":me,...t},children:[N&&l.jsx(pn,{width:P.width,disabled:Q,activeTool:H,clearCanvas:S,setActiveTool:E,exportCanvasInFile:_e,saveFile:ft,loadFile:It,addPicture:zt,hasActionToUndo:d,hasActionToRedo:u,hasActionToClear:p,undoAction:Ye,redoAction:je,availableTools:F,withExport:ae,withLoadAndSave:z,withUploadPicture:W,withUrlPicture:ie}),a,N&&U&&l.jsx(tn,{gridFormat:oe,setGridFormat:Y=>{T(gt[Y])},disabled:Q,shapes:i.current,moveShapes:r,selectedShape:f,removeShape:v,selectShape:A,toggleShapeVisibility:c,toggleShapeLock:h,isLayoutPanelShown:ke}),N&&l.jsxs(l.Fragment,{children:[l.jsx(ln,{width:P.width,disabled:Q,activeTool:H,availableTools:F,selectedShape:f,settings:R,removeShape:v,updateShape:w,canvas:L.canvas.current,layersManipulation:U,toggleLayoutPanel:()=>{Fe(Y=>!Y)},updateToolSettings:Me}),l.jsx(X1,{isLoading:Ae}),l.jsx(J1,{snackbarList:pe})]})]})},Se.useReactPaint=({width:e=1e3,height:s=600,shapes:t,mode:n="editor",disabled:a=!1,options:i=Ss})=>{const{layersManipulation:o,brushAlgo:r,isBrushShapeDoneOnMouseUp:c,grid:h,canGrow:d,canShrink:u,withExport:p,withLoadAndSave:f,withUploadPicture:v,withUrlPicture:w,withSkeleton:M,withFrameSelection:x,clearCallback:L,availableTools:b,canvasSelectionPadding:j}={...Ss,...i},P=n!=="viewer",E=a\|\|!P,A=g.useRef(null),H=g.useRef(null),C=g.useRef(!1),V=g.useCallback(O=>{A.current=O},[]),[N,Q]=g.useState(xe),[F,k]=g.useState(h),[T,Z]=g.useState({width:e,height:s,scaleRatio:1}),[m,y]=g.useState([0,0]),S=g.useMemo(()=>({brushAlgo:r,isBrushShapeDoneOnMouseUp:c,canvasSize:T,canvasOffset:m,gridGap:F,selectionPadding:j}),[j,F,r,c,m,T]),[R,D]=g.useState(Xs(b,v\|\|w)),{isInsideComponent:U}=(({disabled:O,componentRef:Qe})=>{const[tt,De]=g.useState(!1);return g.useEffect(()=>{if(!O){const Le=Ne=>{De(xs(Ne,Qe.current))};return document.addEventListener("mousedown",Le,{passive:!0}),document.addEventListener("touchstart",Le,{passive:!0}),()=>{document.removeEventListener("mousedown",Le),document.removeEventListener("touchstart",Le)}}De(!1)},[O,Qe]),{isInsideComponent:tt}})({disabled:E,componentRef:A}),{registerEvent:ae,unregisterEvent:z,shapesRef:W,selectedShape:ie,selectionFrame:_,hoveredShape:q,addShape:ue,addPictureShape:Ce,moveShapes:J,setSelectedShape:B,setSelectionFrame:ve,refreshSelectedShapes:Te,refreshHoveredShape:we,removeShape:he,updateShape:me,backwardShape:Ae,forwardShape:te,clearShapes:ke,saveShapes:Fe,toggleShapeVisibility:oe,toggleShapeLock:pe,canGoBackward:K,canGoForward:Me,canClear:Ye}=Z1(S),je=g.useCallback(O=>{B(void 0),Q(O)},[B]),_e=g.useCallback((O,Qe)=>{ke(O,Qe),je(xe),y([0,0])},[je,ke]),ft=g.useCallback(O=>{Q(xe),B(O)},[B]),It=g.useCallback(()=>{const O=T1(W.current,e,s);if(!O)throw new Error("L'encodage a échoué");Us(O,"drawing.json")},[W,e,s]),zt=g.useCallback(()=>{const O=Gs(W.current,e,s,S);if(!O)throw new Error;Us(O,"drawing.png")},[W,e,s,S]);g.useEffect(()=>{U\|\|B(void 0)},[U,B]);const ye=g.useCallback(async(O,Qe)=>{const tt=await(async(De,Le)=>{if(!De)return[];const Ne=[],Wt=jt(De.map(ge=>{if(!ge\|\|!ms.includes(ge.type))return null;if(ge.type==="picture"){const Ve=new Image,vn=new Promise((Ot,mn)=>{Ve.onload=()=>{URL.revokeObjectURL(Ve.src),Ot()},Ve.onerror=()=>{mn(new Error("Some images could not be loaded"))}});return Ne.push(vn),ge.src.startsWith("http")?$s(ge.src).then(Ot=>{Ve.src=Ot}).catch(()=>{Ve.src=""}):Ve.src=ge.src,Bs({...ge,img:Ve},Le)}return Bs(ge,Le)}));return await Promise.all(Ne),Wt})(O,S);_e(tt,Qe)},[_e,S]),Y=g.useCallback((O=[],Qe=!0)=>{ye(O,{clearHistory:Qe,source:"remote"})},[ye]);C.current\|\|(C.current=!0,t&&ye(t,{clearHistory:!0,source:"remote"}));const ce=g.useCallback(async O=>{const Qe=await(async tt=>new Promise((De,Le)=>{const Ne=new FileReader;Ne.onload=Wt=>{const ge=Wt.target?.result;if(!ge)return Le("Impossible de récupérer les données du fichier");const Ve=JSON.parse(ge);De(Ve)},Ne.readAsText(tt)}))(O);await ye(Qe.shapes??[],{clearHistory:!0,source:"remote"})},[ye]),vt=g.useCallback(()=>{typeof L!="string"?ye(L(),{clearHistory:!1,source:"user"}):L==="defaultShapes"&&t!==void 0?ye(t,{clearHistory:!1,source:"user"}):_e([],{clearHistory:!1,source:"user"})},[_e,ye,t,L]);g.useEffect(()=>{D(Xs(b,v\|\|w))},[b,v,w]);const Ze={canvas:H,editor:A,setEditor:V};return{editorProps:{shapesRef:W,addPictureShape:Ce,moveShapes:J,toggleShapeVisibility:oe,toggleShapeLock:pe,canGoBackward:K,canGoForward:Me,canClear:Ye,selectedShape:ie,removeShape:he,updateShape:me,backwardShape:Ae,forwardShape:te,refs:Ze,width:e,height:s,canvasSize:T,selectTool:je,selectShape:ft,activeTool:N,setActiveTool:Q,setAvailableTools:D,isEditMode:P,isDisabled:E,availableTools:R,gridGap:F,setGridGap:k,loadFile:ce,exportPicture:zt,exportData:It,clearCanvas:vt,settings:S,canvas:{canGrow:d,canShrink:u,layersManipulation:o,withExport:p,withLoadAndSave:f,withUploadPicture:v,withUrlPicture:w}},canvasProps:{shapesRef:W,selectedShape:ie,selectionFrame:_,hoveredShape:q,addShape:ue,setSelectedShape:B,setSelectionFrame:ve,refreshSelectedShapes:Te,refreshHoveredShape:we,removeShape:he,updateShape:me,backwardShape:Ae,forwardShape:te,saveShapes:Fe,refs:Ze,width:e,height:s,settings:S,canvasSize:T,setCanvasSize:Z,setCanvasOffset:y,selectShape:ft,activeTool:N,setActiveTool:Q,isInsideComponent:U,isEditMode:P,isDisabled:E,canvas:{withSkeleton:M,withFrameSelection:x,canGrow:d,canShrink:u}},registerEvent:ae,unregisterEvent:z,resetCanvas:Y,getCurrentImage:()=>H.current?Gs(W.current,e,s,S):void 0,getCurrentData:()=>Rt(W.current,e,s)}},Object.defineProperty(Se,Symbol.toStringTag,{value:"Module"})});

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "type": "module",
   "keywords": [],
   "author": "Yohann Rabatel",