@yorab/react-paint 0.16.2 → 0.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/utils/file.d.ts +11 -11
- package/dist/canvas/utils/intersect.d.ts +1 -1
- package/dist/canvas/utils/selection.d.ts +1 -1
- package/dist/canvas/utils/shapes/path.d.ts +3 -3
- package/dist/common/types/Mode.d.ts +3 -0
- package/dist/common/types/Shapes.d.ts +3 -1
- package/dist/react-paint.js +857 -847
- package/dist/react-paint.umd.cjs +1 -1
- package/package.json +25 -8
package/dist/react-paint.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(Re,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],y):y((Re=typeof globalThis<"u"?globalThis:Re||self)["react-paint"]={},Re.React,Re.jsxRuntime)})(this,function(Re,y,h){"use strict";const xn='<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>',Dt='<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>',It='<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>',Wt='<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>',Qn='<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>',bn='<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>',Nt='<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>',wn='<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>',Cn='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',Mn='<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>',kn='<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>',Pn='<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>',jn='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',Ln='<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>',Vn='<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>',Zn='<svg viewBox="0 -960 960 960" width="24px"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>',Se=["transparent","black","white","red","green","blue","yellow"],Ie=[0,1,2],Hn=[[1,0],[1,2],[4,6]],ut="serif",pa=2,zn=3,ga=4,re="react-paint-",Tn={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:Ie,default:0}},Ft={type:"picture",id:`${re}picture`,icon:Nt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},An={type:"brush",id:`${re}brush`,icon:xn,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:Ie,default:0}}},En={type:"line",id:`${re}line`,icon:Cn,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:Ie,default:0},lineArrow:{values:[0,1,2,3],default:0}}},Rn={type:"polygon",id:`${re}polygon`,icon:Wt,label:"Polygone",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:Ie,default:0},closedPoints:{default:0}}},Dn={type:"curve",id:`${re}curve`,icon:Mn,label:"Courbe",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:Ie,default:0},closedPoints:{default:0}}},In={type:"rect",id:`${re}rect`,icon:Dt,label:"Rectangle",settings:Tn},Wn={type:"square",id:`${re}square`,icon:Dt,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:Ie,default:0}}},Nn={type:"circle",id:`${re}circle`,icon:It,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:Ie,default:0}}},Fn={type:"ellipse",id:`${re}ellipse`,icon:It,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:Ie,default:0}}},On={type:"text",id:`${re}text`,icon:wn,label:"Texte",settings:{strokeColor:{values:Se,default:"black"},opacity:{min:0,max:100,step:1,default:100},fontFamily:{values:["arial","serif","monospace"],default:ut},fontBold:{values:[!1,!0],default:!1},fontItalic:{values:[!1,!0],default:!1}}},De={id:`${re}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"},et={id:`${re}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"},tt={id:`${re}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"},nt={id:`${re}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"},Ot={id:`${re}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"},Bn={id:`${re}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"},Bt={id:`${re}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"},Yt={id:`${re}move`,type:"move",icon:'<svg viewBox="0 -960 960 960"><path d="M412-48q-21.95 0-40.98-9Q352-66 338-83L48-434l27-28q17-17 41.5-20.5T162-473l126 74v-381q0-15.3 10.29-25.65Q308.58-816 323.79-816t25.71 10.35Q360-795.3 360-780v300h80v-396q0-15.3 10.29-25.65Q460.58-912 475.79-912t25.71 10.35Q512-891.3 512-876v396h80v-348q0-15.3 10.29-25.65Q612.58-864 627.79-864t25.71 10.35Q664-843.3 664-828v348h80v-252q0-15.3 10.29-25.65Q764.58-768 779.79-768t25.71 10.35Q816-747.3 816-732v540q0 60-42 102T672-48H412Z"/></svg>',label:"Move"},Yn={id:`${re}upload-picture`,type:"uploadpicture",icon:Nt,label:"Upload picture"},Xn=2,$n="blue",Be=14,Un=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],qn=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle","group"],fa=["rect","square","circle","ellipse","picture","text","triangle","brush","group"],va=["square","circle","picture","text"],Gn="react-paint-canvas-drawcanvas",_n="react-paint-canvas-selectioncanvas",Kn={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[An,En,Rn,Dn,In,Wn,Nn,Fn,Ft,On],clearCallback:"empty",brushAlgo:"simple",isBrushShapeDoneOnMouseUp:!0,withFrameSelection:!0,withSkeleton:!0,canvasSelectionPadding:0,size:"fixed",canZoom:"never",debug:!1},ma={canvasBackgroundColor:"white",canvasSelectionColor:$n,canvasSelectionWidth:Xn},Jn=300,Xt=(e,t)=>{const n={...t};for(const s of e)Array.isArray(s)?s[1].includes(n[s[0]])&&delete n[s[0]]:delete n[s];return n},Qe=(e,t,n)=>{const s=Array.isArray(n)?[...n]:{...n},a=Array.isArray(e)?e:typeof e=="string"?e.split("."):[e];return a.reduce((i,c,r)=>(i[c]=$t(i[c])?{...i[c]}:Array.isArray(i[c])?[...i[c]]:i[c]===void 0||i[c]===null?{}:i[c],r===a.length-1&&(i[c]=t),i[c]),s),s},$t=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,He=(e,t,n)=>{if(!$t(t)||!$t(n))return n;const s={...t};for(const a in n)n.hasOwnProperty(a)&&(s.hasOwnProperty(a)?s[a]=e(s[a],n[a],a)??He(e,s[a],n[a]):s[a]=n[a]);return s},es=(e,t)=>{if(e===t)return!0;if(typeof e!="object"||typeof t!="object"||e===null||t===null)return!1;const n=Object.keys(e),s=Object.keys(t);if(n.length!==s.length)return!1;for(const a of n)if(!s.includes(a)||!es(e[a],t[a]))return!1;return!0},Ut={},le=(e="")=>(Ut[e]||(Ut[e]=0),`${e}${++Ut[e]}`),ze=(e,t,n)=>Math.max(t,Math.min(e,n)),ts=()=>typeof navigator<"u"&&navigator.userAgent.includes("Macintosh"),ns=e=>{e.reset(),e.lineCap="round",e.lineJoin="round"},xe=(e,t={})=>{const{lineCap:n="round",fillColor:s="transparent",opacity:a=100,strokeColor:i=$n,lineWidth:c=Xn,lineDash:r=0,shadowColor:o="transparent",shadowBlur:l=0}=t;e.lineCap=n,e.globalAlpha=a/100,e.fillStyle=s,e.strokeStyle=i,e.lineWidth=c,e.setLineDash(r===0?[]:[Hn[r][0]*c,Hn[r][1]*c]),e.shadowColor=o,e.shadowBlur=l},st=(e,t,n,s)=>{e.save(),e.scale(t.canvasSize.scaleRatio,t.canvasSize.scaleRatio),e.translate(t.canvasOffset[0],t.canvasOffset[1]),n&&s&&(e.translate(s[0],s[1]),e.rotate(n),e.translate(-s[0],-s[1]))},qt=e=>180*e/Math.PI,ss=(e,t)=>{const n=t.x-Math.min(Math.max(t.x,e.x),e.x+e.width),s=t.y-Math.min(Math.max(t.y,e.y),e.y+e.height);return Math.sqrt(n*n+s*s)<=t.radius},ne=({origin:e=[0,0],point:t,rotation:n=0})=>{if(n===0)return t;const s=[t[0]-e[0],t[1]-e[1]],a=s[1]*Math.cos(n)-s[0]*Math.sin(n);return[s[1]*Math.sin(n)+s[0]*Math.cos(n)+e[0],a+e[1]]},as=e=>(e+2*Math.PI)%(2*Math.PI),is=({targetVector:[e,t],radian:n=!0,originVector:s})=>{const a=as(Math.atan2(t[1]-e[1],t[0]-e[0]));if(s){const[i,c]=s,r=Math.atan2(c[1]-i[1],c[0]-i[0]),o=as(a-r);return n?o:qt(o)}return n?a:qt(a)},os=(e,t)=>Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2),Ye=(e,t,n)=>{const s=ne({origin:t.computed.center,point:e.computed.center,rotation:t.rotation??0}),a=(s[0]-(e.computed.borders.width/2-n.settings.selectionPadding)-(n.originalBorders.x+n.settings.selectionPadding))*n.widthMultiplier,i=(s[1]-(e.computed.borders.height/2-n.settings.selectionPadding)-(n.originalBorders.y+n.settings.selectionPadding))*n.heightMultiplier;return{x:n.newBorderX+n.settings.selectionPadding+(n.isXinverted?n.newBorderWidth-2*n.settings.selectionPadding-(e.computed.borders.width-2*n.settings.selectionPadding||1)*n.widthMultiplier-a:a),y:n.newBorderY+n.settings.selectionPadding+(n.isYinverted?n.newBorderHeight-2*n.settings.selectionPadding-(e.computed.borders.height-2*n.settings.selectionPadding||1)*n.heightMultiplier-i:i)}},Xe=(e,t,n,s,a)=>ne({origin:e.groupCenter,point:[t+s/2,n+a/2],rotation:-e.rotation}),Gt=(e,{selectionPadding:t})=>{const n=e.points.flat(),s=Math.min(...n.map(o=>o[0])),a=Math.min(...n.map(o=>o[1])),i=n.map(o=>Ve(o,s,a,e.scaleX,e.scaleY)),c=Math.max(...i.map(o=>o[0]))+t,r=Math.max(...i.map(o=>o[1]))+t;return{x:s-t,width:c-s+t,y:a-t,height:r-a+t}},at=(e,t)=>{const n=xa(e,t),s=((a,i)=>Te(a,Gt,i))(e,t);return{...e,path:n,selection:it(n,s,t),computed:s}},ya=at,be=(e,t=2)=>Math.round(e*10**t)/10**t,Ve=(e,t,n,s=1,a=1)=>[t+(e[0]-t)*s,n+(e[1]-n)*a],ge=(e,t,n=0)=>{if(!t.gridGap)return be(e);const s=e+n,a=s>=0?t.gridGap:-t.gridGap;return s+a/2-(s+a/2)%a-n},Sa=(e,t,n,s,a,i,c)=>{if(s.mode==="translate")return ce(zs(n,s.originalShape,s.cursorStartPosition,a,i),a);if(s.mode==="rotate"){const r=s.originalShape.computed.center[0]-s.cursorStartPosition[0],o=s.originalShape.computed.center[1]-s.cursorStartPosition[1],l=s.originalShape.computed.center[0]-n[0],d=s.originalShape.computed.center[1]-n[1],u=((m,v,f)=>v.gridGap||f?m+Math.PI/18/2-(m+Math.PI/18/2)%(Math.PI/18):be(m,3))(Math.atan2(d,l)-Math.atan2(o,r),a,i),p=U(s.originalShape).map(m=>Ee(Xa(m,u,s.originalShape.computed.center),a));return ce(p,a)}return s.mode==="resize"?ce($a(e,n,s.originalShape,s,a,i,c),a):s.mode==="brush"?ce(U(t).map(r=>((o,l,d)=>{const u={...o,points:Qe(o.points.length-1,[...o.points[o.points.length-1],[Math.round(l[0]),Math.round(l[1])]],o.points)};return at(u,d)})(r,n,a)),a):t},ht=e=>{const t=new Path2D;return t.rect(e.x,e.y,e.width,e.height),t},mt=e=>{const t=new Path2D;return t.arc(e.x,e.y,e.radius,0,2*Math.PI),t},yt=e=>{const t=new Path2D;return t.moveTo(...e.points[0]),t.lineTo(...e.points[1]),t},xa=(e,{brushAlgo:t})=>{if(e.points.length<1||e.style?.strokeColor==="transparent")return;const n=e.points.flat(),s=n.map(o=>o[0]),a=n.map(o=>o[1]),i=Math.min(...s),c=Math.min(...a),r=new Path2D;for(const o of e.points){if(!o.length)return;if(o.length===1)r.rect(...Ve(o[0],i,c,e.scaleX,e.scaleY),1,1);else if(r.moveTo(...Ve(o[0],i,c,e.scaleX,e.scaleY)),t==="quadratic"){for(let l=0;l<o.slice(1).length-2;l++){const d=Ve(o[l],i,c,e.scaleX,e.scaleY),u=Ve(o[l+1],i,c,e.scaleX,e.scaleY),p=(d[0]+u[0])/2,m=(d[1]+u[1])/2;r.quadraticCurveTo(...d,p,m)}r.quadraticCurveTo(...Ve(o[o.length-2],i,c,e.scaleX,e.scaleY),...Ve(o[o.length-1],i,c,e.scaleX,e.scaleY))}else for(const l of o.slice(1))r.lineTo(...Ve(l,i,c,e.scaleX,e.scaleY))}return r},Qa=(e,t,n,s)=>{const a=w=>(1-w)**3*e[0]+3*(1-w)**2*w*t[0]+3*(1-w)*w**2*n[0]+w**3*s[0],i=w=>(1-w)**3*e[1]+3*(1-w)**2*w*t[1]+3*(1-w)*w**2*n[1]+w**3*s[1],c=(w,L,R)=>{const V=w-2*L+R,C=-2*w+2*L,Z=w;if(Math.abs(V)<1e-10){if(Math.abs(C)<1e-10)return[];const X=-Z/C;return X>0&&X<1?[X]:[]}const A=C*C-4*V*Z;if(A<0)return[];const H=Math.sqrt(A),B=(-C-H)/(2*V),D=(-C+H)/(2*V),I=[];return B>0&&B<1&&I.push(B),D>0&&D<1&&D!==B&&I.push(D),I},r=e[0],o=t[0],l=n[0],d=s[0],u=e[1],p=t[1],m=n[1],v=s[1],f=c(o-r,l-o,d-l),Q=c(p-u,m-p,v-m);let k=Math.min(e[0],s[0]),b=Math.max(e[0],s[0]),x=Math.min(e[1],s[1]),g=Math.max(e[1],s[1]);for(const w of f){const L=a(w);k=Math.min(k,L),b=Math.max(b,L)}for(const w of Q){const L=i(w);x=Math.min(x,L),g=Math.max(g,L)}return{minX:k,maxX:b,minY:x,maxY:g}},_t=(e,t)=>e.style?.closedPoints===1&&t.length>2?[t[t.length-2],...t,t[0],t[1]]:[t[0],...t,t[t.length-1]],Kt=(e,t,n,s)=>({cp1:[t[0]+(n[0]-e[0])/6,t[1]+(n[1]-e[1])/6],cp2:[n[0]-(s[0]-t[0])/6,n[1]-(s[1]-t[1])/6]}),rs=e=>{const t=e.tempPoint?[...e.points,e.tempPoint]:e.points;if(t.length<2)return;const n=new Path2D;n.moveTo(...t[0]);for(const s of t.slice(1))n.lineTo(...s);return t.length>2&&e.style?.closedPoints===1&&n.lineTo(...t[0]),n},ba=e=>{const t=new Path2D;return t.moveTo(...e.points[0]),t.lineTo(...e.points[1]),t.lineTo(...e.points[2]),t.lineTo(...e.points[0]),t},wa=(e,t)=>({x:t.x-(e.style?.lineWidth??0)/2,y:t.y-(e.style?.lineWidth??0)/2,width:t.width+(e.style?.lineWidth??0),height:t.height+(e.style?.lineWidth??0)}),Te=(e,t,n,s=wa)=>{const a=t(e,n),i=s(e,a,n),c=[a.x+a.width/2,a.y+a.height/2],r=((o,l,d=0)=>{if(d===0)return o;const u=[[o.x,o.y],[o.x+o.width,o.y],[o.x+o.width,o.y+o.height],[o.x,o.y+o.height]].map(v=>ne({point:v,origin:l,rotation:d})),p=Math.min(...u.map(v=>v[0])),m=Math.min(...u.map(v=>v[1]));return{x:p,y:m,width:Math.max(...u.map(v=>v[0]))-p,height:Math.max(...u.map(v=>v[1]))-m}})(i,c,e.rotation);return{borders:a,outerBorders:i,center:c,boundingBox:r}},it=(e,t,n)=>{const{borders:s}=t;return{border:ht(s),shapePath:e,line:yt({points:[[s.x+s.width/2,s.y],[s.x+s.width/2,s.y-23/n.canvasSize.scaleRatio]]}),anchors:[mt({x:s.x+s.width/2,y:s.y-23/n.canvasSize.scaleRatio,radius:7/n.canvasSize.scaleRatio}),...Un.map(a=>mt({x:s.x+s.width*a[0],y:s.y+s.height*a[1],radius:7/n.canvasSize.scaleRatio}))]}},ls=({borderStart:e,borderSize:t,vector:n,settings:s,invertedAxe:a,anchor:i})=>{switch(i){case 0:{if(a){const r=Math.max(0,n-t)+2*s.selectionPadding;return[e+t-2*s.selectionPadding,r]}const c=Math.max(2*s.selectionPadding,t-n);return[e+t-c,c]}case .5:return[e,t];case 1:if(a){const c=Math.min(e,e+t+n);return[c,e-c+2*s.selectionPadding]}return[e,Math.max(2*s.selectionPadding,t+n)];default:return[0,0]}},Ca=({borderX:e,borderWidth:t,borderY:n,borderHeight:s,center:a,originalShape:i})=>{const c=[e+t/2-a[0],n+s/2-a[1]],[r,o]=ne({point:c,rotation:-(i.rotation??0)});return{borderX:be(e+r-c[0]),borderWidth:be(t),borderY:be(n+o-c[1]),borderHeight:be(s)}},Ma=(e,t,n,s)=>{const a=t.x+t.width/2,i=t.y+t.height/2,c=n?2*e.borderWidth+t.width:Math.abs(t.width+2*(e.borderWidth-t.width)),r=s?2*e.borderHeight+t.height:Math.abs(t.height+2*(e.borderHeight-t.height));return{...e,borderHeight:r,borderWidth:c,borderX:a-c/2,borderY:i-r/2}},$e=(e,t,n,s,a=!1,i=!1)=>{const{center:c,borders:r}=t.computed,o=ne({origin:c,point:e,rotation:t.rotation}),l=n.anchor[0]===0&&o[0]>=r.x+r.width-s.selectionPadding||n.anchor[0]===1&&o[0]<=r.x+s.selectionPadding,d=n.anchor[1]===0&&o[1]>=r.y+r.height-s.selectionPadding||n.anchor[1]===1&&o[1]<=r.y+s.selectionPadding,u=[ge(o[0],s,n.anchor[0]===0&&!l||n.anchor[0]===1&&l?s.selectionPadding:-s.selectionPadding),ge(o[1],s,n.anchor[1]===0&&!d||n.anchor[1]===1&&d?s.selectionPadding:-s.selectionPadding)],p=s.gridGap?[n.anchor[0]===0?r.x:n.anchor[0]===.5?r.x+r.width/2:r.x+r.width,n.anchor[1]===0?r.y:n.anchor[1]===.5?r.y+r.height/2:r.y+r.height]:ne({origin:c,point:n.cursorStartPosition,rotation:t.rotation}),m=[u[0]-p[0],u[1]-p[1]],[v,f]=ls({borderStart:r.x,borderSize:r.width,vector:m[0],settings:s,invertedAxe:l,anchor:n.anchor[0]}),[Q,k]=ls({borderStart:r.y,borderSize:r.height,vector:m[1],settings:s,invertedAxe:d,anchor:n.anchor[1]}),b=a?((x,g,w,L,R,V,C,Z,A,H,B)=>{const{selectionPadding:D}=B,I="ratio"in A&&A.ratio?A.ratio:(x.width-2*D||1)/(x.height-2*D||1),X=(L-2*D)/(V-2*D);let $,z,S,M;return H.anchor[0]!==.5&&H.anchor[1]!==.5?X<I?(z=R,M=V,S=(V-2*D)*I+2*D,$=H.anchor[0]===0?C?x.x+x.width-2*D:x.x+(x.width-S):C?x.x-S+2*D:x.x):($=w,S=L,M=(L-2*D)/I+2*D,z=H.anchor[1]===0?Z?x.y+x.height-2*D:x.y+(x.height-M):Z?x.y-M+2*D:x.y):H.anchor[0]!==.5?($=w,S=L,M=(L-2*D)/I+2*D,z=x.y+(x.height-M)/2):(z=R,M=V,S=(V-2*D)*I+2*D,$=x.x+(x.width-S)/2),{borderX:$,borderWidth:S,borderY:z,borderHeight:M,center:g,originalShape:A}})(r,c,v,f,Q,k,l,d,t,n,s):{borderX:v,borderWidth:f,borderY:Q,borderHeight:k,center:c,originalShape:t};return{...Ca(i?Ma(b,r,l,d):b),isXinverted:l,isYinverted:d}},St=(e,t)=>{const n=ht(e),s=((a,i)=>Te(a,Jt,i))(e,t);return{...e,path:n,computed:s,selection:it(n,s,t)}},ka=St,cs=(e,t,n,s=0,a=0)=>{const i={toolId:e.id,type:e.type,id:le(`${e.type}_`),x:t[0],y:t[1],width:s,height:a,style:{opacity:e.settings.opacity.default,fillColor:e.settings.fillColor.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default}};return St(i,n)},Pa=(e,t)=>{e.globalAlpha!==0&&t.path&&(t.style?.fillColor!=="transparent"&&e.fill(t.path),t.style?.strokeColor!=="transparent"&&e.stroke(t.path))},Jt=(e,t)=>({x:e.x-t.selectionPadding,width:e.width+2*t.selectionPadding,y:e.y-t.selectionPadding,height:e.height+2*t.selectionPadding}),ds=(e,t,n,[s,a]=[!1,!1])=>{const i=e[0]===.5?n.x+n.width/2:e[0]===0?n.x+(s?0:n.width):n.x+(s?n.width:0),c=e[1]===.5?n.y+n.height/2:e[1]===0?n.y+(a?0:n.height):n.y+(a?n.height:0);return en([i,c],n.rotation??0,t)},us=(e,t,n,s,a,i,c,r)=>{let o=!1;if(a){o=lt(e,a,n,s,!0,i?20:void 0);const d=((u,p,m)=>{if(u.mode==="translate")return{mode:"translate",cursorStartPosition:m,originalShape:p,hasBeenDuplicated:!1,dateStart:Date.now()};if(u.mode==="rotate"){const{center:v}=p.computed;return{mode:"rotate",cursorStartPosition:m,originalShape:p,center:[v[0],v[1]]}}return u.mode==="resize"?{mode:"resize",cursorStartPosition:m,originalShape:p,anchor:u.anchor}:void 0})(o||{mode:"default"},a,n);if(d?.mode==="resize"||d?.mode==="rotate")return{shape:a,mode:d}}const l=t.find(d=>U(a).find(u=>d.id===u?.id)?o&&r?lt(e,d,n,s,!0,i?20:void 0):!!o:!!ms(e,d,n,s));if(l){if(r){const u=U(a).find(p=>p.id===l?.id)?ce(ja(a,l),s):ce(ps(a,[l]),s);return{shape:u,mode:{mode:"translate",cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:u}}}const d=U(a).find(u=>u.id===l?.id)?a:ce([l],s);return{shape:d,mode:{mode:"translate",cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:d}}}return r?{shape:a,mode:{mode:c?"selectionFrame":"default"}}:{shape:void 0,mode:{mode:c?"selectionFrame":"default"}}},ce=(e,t)=>{if(!e.length)return;if(e.length===1)return e[0];const n=e.some(c=>c.rotation!==e[0].rotation)?0:e[0]?.rotation??0,s=((c,r,o)=>{const l=c.map(g=>[[g.computed.borders.x+o.selectionPadding,g.computed.borders.y+o.selectionPadding],[g.computed.borders.x-o.selectionPadding+g.computed.borders.width,g.computed.borders.y+o.selectionPadding],[g.computed.borders.x-o.selectionPadding+g.computed.borders.width,g.computed.borders.y-o.selectionPadding+g.computed.borders.height],[g.computed.borders.x+o.selectionPadding,g.computed.borders.y-o.selectionPadding+g.computed.borders.height]].map(w=>{const L=ne({point:[w[0],w[1]],origin:g.computed.center,rotation:-(g.rotation??0)});return ne({point:[L[0],L[1]],origin:[0,0],rotation:r})})),d=Math.min(...l.flatMap(g=>[g[0][0],g[1][0],g[2][0],g[3][0]])),u=Math.min(...l.flatMap(g=>[g[0][1],g[1][1],g[2][1],g[3][1]])),p=Math.max(...l.flatMap(g=>[g[0][0],g[1][0],g[2][0],g[3][0]])),m=Math.max(...l.flatMap(g=>[g[0][1],g[1][1],g[2][1],g[3][1]])),v=[(d+p)/2,(u+m)/2],f=ne({point:v,origin:[0,0],rotation:-r}),Q=[v[0]-f[0],v[1]-f[1]],k=be(d-Q[0]),b=be(p-Q[0]),x=be(u-Q[1]);return{width:b-k,height:be(m-Q[1])-x,x:k,y:x}})(e,n,t),a=cs({id:"group_selection",type:"rect",settings:Tn},[s.x,s.y],t,s.width,s.height),i=e.slice(1).reduce((c,r)=>{const o=r.style??{},l={};for(const d in o)c[d]!==void 0&&o[d]!==void 0&&c[d]===o[d]&&(l[d]=c[d]);return l},e[0].style??{});return{id:e.map(c=>c.id).join("-"),type:"group",shapes:e,rotation:n,visible:!0,locked:!1,selection:a.selection,x:a.x,y:a.y,width:a.width,height:a.height,style:i,computed:a.computed}},hs=(e,t)=>n=>{if(!n)return;const s=n.type==="group"?n.shapes.map(a=>e(a,t)):[e(n,t)];return ce(s,t)},U=e=>e?e.type==="group"?e.shapes:[e]:[],ps=(e,t)=>{const n=U(e);return[...new Set([...n,...t])]},ja=(e,t)=>U(e).filter(n=>n.id!==t.id),gs=e=>{const{clientX:t=0,clientY:n=0}="touches"in e&&e.touches[0]?e.touches[0]:"changedTouches"in e&&e.changedTouches[0]?e.changedTouches[0]:"clientX"in e?e:{};return{clientX:t,clientY:n}},fs=(e,t,n)=>{const{clientX:s,clientY:a}=gs(e),i=t.getBoundingClientRect();return[(s-i.left)/n.scaleRatio,(a-i.top)/n.scaleRatio]},ot=(e,t,n)=>{const{clientX:s,clientY:a}=gs(e),i=t?.getBoundingClientRect()??{left:0,top:0,width:n.canvasSize.width,height:n.canvasSize.height};return[(s-i.left)*(n.canvasSize.width/i.width)/n.canvasSize.scaleRatio-n.canvasOffset[0],(a-i.top)*(n.canvasSize.height/i.height)/n.canvasSize.scaleRatio-n.canvasOffset[1]]},rt=e=>"touches"in e,Ae=(e,t,[n,s])=>ne({origin:[n,s],point:e,rotation:t}),en=(e,t,[n,s])=>ne({origin:[n,s],point:e,rotation:-t}),xt=(e,t,n)=>n?ss(e,{x:t[0],y:t[1],radius:n}):((s,a)=>a[0]>=s.x&&a[0]<=s.x+s.width&&a[1]>=s.y&&a[1]<=s.y+s.height)(e,t),lt=(e,t,n,s,a=!1,i=0)=>{if(t.locked)return!1;const{canvasSize:{scaleRatio:c}}=s,{borders:r,center:o}=t.computed,l=Ae(n,t.rotation??0,o),d=U(t).length>1?t:U(t)[0];if(d&&a)if(d.type==="line"||d.type==="polygon"||d.type==="curve"){for(let u=0;u<d.points.length;u++)if(xt({x:d.points[u][0]-7/c,y:d.points[u][1]-7/c,width:Be/c,height:Be/c},l,i))return{mode:"resize",anchor:u}}else{if(xt({x:r.x+r.width/2-7/c,y:r.y-Be/c-16/c,width:Be/c,height:Be/c},l,i))return{mode:"rotate"};for(const u of Un)if(xt({x:r.x+r.width*u[0]-7/c,y:r.y+r.height*u[1]-7/c,width:Be/c,height:Be/c},l,i))return{mode:"resize",anchor:u}}return(xt(r,l,i)||!(t.type!=="curve"||!t.path||!e.isPointInPath(t.path,l[0],l[1])))&&{mode:"translate"}},vs=(e,t,n,s,a=50)=>{if(t.locked||t.points.length<2)return!1;const{center:i}=t.computed,c=Ae(n,t.rotation??0,i);e.lineWidth=(t.style?.lineWidth??0)+a/s.canvasZoom;const r=t.style?.closedPoints?[...t.points,t.points[0]]:t.points;for(let o=0;o<r.length-1;o++){const l=yt({points:[r[o],r[o+1]]});if(e.isPointInStroke(l,c[0],c[1]))return{lineIndex:o}}return!1},ms=(e,t,n,s)=>{if(t.locked)return!1;const{center:a}=t.computed,i=Ae(n,t.rotation??0,a);return t.path?t.style?.fillColor&&t.style?.fillColor!=="transparent"||["picture","text"].includes(t.type)?!!e.isPointInPath(t.path,i[0],i[1])&&{mode:"translate"}:(e.lineWidth=(t.style?.lineWidth??0)+15/s.canvasZoom,!!e.isPointInStroke(t.path,i[0],i[1])&&{mode:"translate"}):lt(e,t,n,s,!1)};function tn(e,t){const n=Math.max(e.x,t.x),s=Math.max(e.y,t.y),a=Math.min(e.x+(e.width||1),t.x+(t.width||1)),i=Math.min(e.y+(e.height||1),t.y+(t.height||1));if(n<a&&s<i)return{x:n,y:s,width:a-n,height:i-s}}const ys=({ctx:e,path:t,rect:n,offset:s,center:a,rotation:i=0,checkFill:c})=>{for(let r=0;r<s;r+=s/2)for(let o=0;o<s;o+=s/2)for(let l=r+n.x;l<n.x+n.width;l+=s)for(let d=o+n.y;d<n.y+n.height;d+=s){const u=Ae([l,d],i,a);if(c?e.isPointInPath(t,u[0],u[1]):e.isPointInStroke(t,u[0],u[1]))return!0}return!1},nn=(e,t,n,s)=>({border:ht(n.borders),shapePath:e,anchors:[...t.points.map(a=>mt({x:a[0],y:a[1],radius:7/s.canvasSize.scaleRatio}))]}),we=[.05,.1,.25,.5,1,2,4,8],sn=({size:e,zoom:t,newOffset:[n,s],canvasSize:a})=>e==="infinite"?{zoom:t,offset:[n,s]}:t<1?{zoom:t,offset:[-(a.realWidth-a.realWidth/t)/2,-(a.realHeight-a.realHeight/t)/2]}:{zoom:t,offset:[ze(n,a.realWidth/t-a.realWidth,0),ze(s,a.realHeight/t-a.realHeight,0)]},an=({size:e,canvasSize:t,currentOffset:n,currentZoom:s,zoom:a,centerPoint:i})=>{const c=e==="fixed"&&a<1?[t.realWidth/2,t.realHeight/2]:i,r=n[0]-(c[0]/s-c[0]/a),o=n[1]-(c[1]/s-c[1]/a);return{offset:e==="infinite"?[r,o]:a<1?[-(t.realWidth-t.realWidth/a)/2,-(t.realHeight-t.realHeight/a)/2]:[ze(r,t.realWidth/a-t.realWidth,0),ze(o,t.realHeight/a-t.realHeight,0)],zoom:a}},Ss=e=>{const{canvasSize:{width:t,height:n,scaleRatioWithNoZoom:s},canvasZoom:a,canvasOffset:i}=e;return{x:i[0]*a*s,y:i[1]*a*s,width:t*a,height:n*a}},xs=(e,t)=>{const{canvasZoom:n,size:s}=t;if(s!=="fixed"||n>=1)return;const a=Ss(t);e.beginPath(),e.rect(a.x,a.y,a.width,a.height),e.closePath(),e.clip()},pt=(e,t)=>t.size!=="fixed"||e[0]>0&&e[0]<t.canvasSize.realWidth&&e[1]>0&&e[1]<t.canvasSize.realHeight,La=(e,t)=>({x:e.x-e.radius-t.selectionPadding,width:2*(e.radius+t.selectionPadding),y:e.y-e.radius-t.selectionPadding,height:2*(e.radius+t.selectionPadding)}),Qt=(e,t)=>{const n=mt(e),s=((a,i)=>Te(a,La,i))(e,t);return{...e,path:n,selection:it(n,s,t),computed:s}},Va=Qt,gt=(e,t)=>{const n=rs(e),s=((a,i)=>Te(a,bt,i))(e,t);return{...e,path:n,selection:nn(n,e,s,t),computed:s}},Qs=gt,bt=(e,t)=>{const n=Math.min(...e.points.map(i=>i[0]))-t.selectionPadding,s=Math.max(...e.points.map(i=>i[0]))+t.selectionPadding,a=Math.min(...e.points.map(i=>i[1]))-t.selectionPadding;return{x:n,width:s-n,y:a,height:Math.max(...e.points.map(i=>i[1]))+t.selectionPadding-a}},Za=(e,t,n,s)=>{if(t<0||t>e.points.length-1)return e;const a=[...e.points.slice(0,t+1),n,...e.points.slice(t+1)];return gt({...e,points:a},s)},bs=(e,t,n,s=!1)=>{const a=[ge(t[0],n),ge(t[1],n)],i=Ae(a,e.rotation??0,e.computed.center),c={...e,points:s?e.points:[...e.points,i],tempPoint:s?i:void 0};return gt(c,n)},Ha=(e,t,n)=>{const s=e.tempPoint?[...e.points,e.tempPoint]:e.points;if(s.length<2){const l=s[0]??[0,0],d=n.selectionPadding;return{x:l[0]-d,y:l[1]-d,width:2*d,height:2*d}}if(s.length<3)return bt({...e,points:s},n);const a=_t(e,s);let i=Number.POSITIVE_INFINITY,c=Number.NEGATIVE_INFINITY,r=Number.POSITIVE_INFINITY,o=Number.NEGATIVE_INFINITY;for(let l=1;l<a.length-2;l++){const d=a[l-1],u=a[l],p=a[l+1],m=a[l+2],{cp1:v,cp2:f}=Kt(d,u,p,m),Q=Qa(u,v,f,p);i=Math.min(i,Q.minX),c=Math.max(c,Q.maxX),r=Math.min(r,Q.minY),o=Math.max(o,Q.maxY)}return Jt({x:i,y:r,width:c-i,height:o-r},n)},ft=(e,t)=>{const n=(a=>{const i=a.tempPoint?[...a.points,a.tempPoint]:a.points;if(i.length<2)return;if(i.length<3)return rs(a);const c=a.style?.closedPoints===1&&i.length>2,r=new Path2D;r.moveTo(...i[0]);const o=_t(a,i);for(let l=1;l<o.length-2;l++){const d=o[l-1],u=o[l],p=o[l+1],m=o[l+2],{cp1:v,cp2:f}=Kt(d,u,p,m);r.bezierCurveTo(v[0],v[1],f[0],f[1],p[0],p[1])}return c&&r.closePath(),r})(e),s=((a,i)=>Te(a,bt,i,Ha))(e,t);return{...e,path:n,selection:nn(n,e,s,t),computed:s}},ws=ft,za=(e,t,n,s)=>{if(t<0||t>e.points.length-1)return e;const a=[...e.points.slice(0,t+1),n,...e.points.slice(t+1)];return ft({...e,points:a},s)},Cs=(e,t,n,s=!1)=>{const a=[ge(t[0],n),ge(t[1],n)],i=e.computed.center,c=Ae(a,e.rotation??0,i),r={...e,points:s?e.points:[...e.points,c],tempPoint:s?c:void 0};return ft(r,n)},Ta=(e,t)=>({x:e.x-e.radiusX-t.selectionPadding,width:2*(e.radiusX+t.selectionPadding),y:e.y-e.radiusY-t.selectionPadding,height:2*(e.radiusY+t.selectionPadding)}),wt=(e,t)=>{const n=(a=>{const i=new Path2D;return i.ellipse(a.x,a.y,a.radiusX,a.radiusY,0,0,2*Math.PI),i})(e),s=((a,i)=>Te(a,Ta,i))(e,t);return{...e,path:n,selection:it(n,s,t),computed:s}},Aa=wt,Ea=(e,t)=>Te(e,bt,t),Ms=(e,t)=>((n,s)=>({...n,path:ba(n),computed:Ea(n,s)}))({...e,id:le("triangle_"),type:"triangle"},t),Ra=(e,t)=>{e.globalAlpha!==0&&t.path&&(t.style?.fillColor!=="transparent"&&e.fill(t.path),t.style?.strokeColor!=="transparent"&&e.stroke(t.path))},Da=(e,t)=>({x:Math.min(e.points[0][0],e.points[1][0])-t.selectionPadding,width:Math.abs(e.points[0][0]-e.points[1][0])+2*t.selectionPadding,y:Math.min(e.points[0][1],e.points[1][1])-t.selectionPadding,height:Math.abs(e.points[0][1]-e.points[1][1])+2*t.selectionPadding}),Ct=(e,t)=>{const n=[];let s;if(e.style?.lineArrow===1||e.style?.lineArrow===2||e.style?.lineArrow===3){const i=Math.PI/2-is({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3||n.push(Ms(ks(e.points[0],i,e.style),t)),e.style?.lineArrow!==2&&e.style?.lineArrow!==3||n.push(Ms(ks(e.points[1],i+Math.PI,e.style),t));const c=(({line:r,size:o,direction:l})=>{const d=Math.PI/2-is({targetVector:[r.points[0],r.points[1]]}),u=[r.points[0][0]+(r.points[1][0]-r.points[0][0])/2,r.points[0][1]+(r.points[1][1]-r.points[0][1])/2];let p,m;if(["start","both"].includes(l)){const v=ne({point:r.points[0],origin:u,rotation:-d});p=ne({point:[v[0],v[1]+o],origin:u,rotation:d})}else p=[...r.points[0]];if(["end","both"].includes(l)){const v=ne({point:r.points[1],origin:u,rotation:-d});m=ne({point:[v[0],v[1]-o],origin:u,rotation:d})}else m=[...r.points[1]];return{points:[p,m]}})({line:e,size:10+2*(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});s=yt(c)}else s=yt(e);const a=((i,c)=>Te(i,Da,c))(e,t);return{...e,path:s,selection:nn(s,e,a,t),arrows:n,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"},computed:a}},Ia=Ct,ks=(e,t,n)=>{const s=[ne({point:[0,0],rotation:t}),ne({point:[-(5+(n.lineWidth??0)),10+2*(n.lineWidth??0)],rotation:t}),ne({point:[5+(n.lineWidth??0),10+2*(n.lineWidth??0)],rotation:t})];return{points:[[e[0]+s[0][0],e[1]+s[0][1]],[e[0]+s[1][0],e[1]+s[1][1]],[e[0]+s[2][0],e[1]+s[2][1]]],style:{...n,fillColor:n.strokeColor,strokeColor:"transparent"}}},Wa=(e,t,n)=>{const{isXinverted:s,isYinverted:a,settings:i,widthMultiplier:c,heightMultiplier:r}=n,o=e.computed.borders.width-2*i.selectionPadding,l=e.computed.borders.height-2*i.selectionPadding,d=o*c,u=l*r,p=Ye(e,t,n),m=Xe(n,p.x,p.y,d,u),v=e.computed.center[0]-o/2,f=e.computed.center[1]-l/2,Q=m[0]-d/2,k=m[1]-u/2;return((b,x)=>b.type==="line"?Ct(b,x):b.type==="polygon"?Qs(b,x):ws(b,x))({...e,points:e.points.map(([b,x])=>[Q+(s?d-(b-v)*c:(b-v)*c),k+(a?u-(x-f)*r:(x-f)*r)])},n.settings)},Mt=(e,t)=>{const n=((a,i)=>Te(a,Jt,i))(e,t),s=ht(e);return{...e,path:s,selection:it(void 0,n,t),computed:n}},Na=Mt,on=(e,t,n,s,a)=>{const[i,c]=((r,o,l,d,u=!1)=>{if(!(r&&o&&d&&l))return[Jn,Jn];const p=r/o;if(p>l/d){const v=u?l:Math.min(r,l);return[v,v/p]}const m=u?d:Math.min(o,d);return[m*p,m]})(e.width,e.height,n,s,!0);return Mt({toolId:Ft.id,type:"picture",id:le("picture_"),x:-a.canvasOffset[0]+a.canvasSize.realWidth/a.canvasZoom/2-i/2,y:-a.canvasOffset[1]+a.canvasSize.realHeight/a.canvasZoom/2-c/2,width:i,height:c,ratio:i/c,src:t,img:e},a)},Fa=(e,t,n,s)=>new Promise((a,i)=>{const c=new Image;c.onerror=()=>{i(new Error("Some images could not be loaded"))},setTimeout(()=>{i(new Error("Timeout while loading images"))},4e3),e instanceof File?((r,o,l,d,u,p)=>{Es(l)?l.text().then(m=>{const v=As(m);r.onload=async()=>{URL.revokeObjectURL(r.src);const f=on(r,m,d,u,p);o(f)},r.src=v}):(r.onload=async()=>{URL.revokeObjectURL(r.src);const m=on(r,r.src,d,u,p);o(m)},r.src=URL.createObjectURL(l))})(c,a,e,t,n,s):((r,o,l,d,u,p)=>{r.onload=()=>{URL.revokeObjectURL(r.src);const m=on(r,l,d,u,p);o(m)},Rs(l).then(m=>{r.src=m}).catch(()=>{r.src=""})})(c,a,e,t,n,s)}),rn=["Texte"],Ps=(e,t)=>Te(e,Ba,t),kt=(e,t)=>{const n=Ps(e,t),s=ht(e);return{...e,path:s,selection:it(void 0,n,t),computed:n}},Oa=kt,Pt=(e,t,n,s,a,i=ut)=>{e.font=`${a?"italic":""} ${s?"bold":""} 1px ${i}`;const c=t.map(r=>n/e.measureText(r).width);return Math.min(...c)||36},Ba=(e,t)=>({x:e.x-t.selectionPadding,width:e.width+2*t.selectionPadding,y:e.y-t.selectionPadding,height:e.height+2*t.selectionPadding}),Ya=(e,t,n,s)=>{const a={...t,value:n},i=((v,f,Q,k,b,x=ut)=>{v.font=`${b?"italic":""} ${k?"bold":""} ${Q}px ${x}`;const g=f.map(w=>v.measureText(w).width);return Math.max(...g)||20})(e,a.value,a.fontSize,a.style?.fontBold??!1,a.style?.fontItalic??!1,a.style?.fontFamily),c=a.fontSize*a.value.length,r=i/c,o={...a,width:i,height:c,ratio:r},{center:l}=Ps(o,s),[d,u]=ds([1,1],t.computed.center,t),[p,m]=ds([1,1],l,o,[!1,!1]);return{...o,x:o.x-(p-d),y:o.y-(m-u)}},js=(e,t,n,s)=>{const a=[ge(n[0],s),ge(n[1],s)];switch(t.type){case"brush":return((i,c,r)=>at({toolId:i.id,type:i.type,id:le(`${i.type}_`),points:[[c]],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))(t,a,s);case"line":return((i,c,r)=>{const o={toolId:i.id,type:i.type,id:le(`${i.type}_`),points:[c,c],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 Ct(o,r)})(t,a,s);case"polygon":return((i,c,r)=>gt({toolId:i.id,type:i.type,id:le(`${i.type}_`),points:[c],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,closedPoints:i.settings.closedPoints.default}},r))(t,a,s);case"curve":return((i,c,r)=>ft({toolId:i.id,type:i.type,id:le(`${i.type}_`),points:[c],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,closedPoints:i.settings.closedPoints.default}},r))(t,a,s);case"rect":case"square":return cs(t,a,s);case"text":return((i,c,r,o)=>{const l=Pt(i,rn,150,c.settings?.fontBold.default??!1,c.settings?.fontItalic.default??!1,c.settings.fontFamily.default),d=l*(rn.length||1);return kt({toolId:c.id,type:c.type,id:le(`${c.type}_`),x:r[0]-150,y:r[1]-d,value:rn,fontSize:l,width:150,height:d,ratio:150/d,style:{opacity:c.settings.opacity.default,strokeColor:c.settings.strokeColor.default,fontFamily:c.settings.fontFamily.default,fontItalic:c.settings.fontItalic.default,fontBold:c.settings.fontBold.default}},o)})(e,t,a,s);case"ellipse":return((i,c,r)=>wt({toolId:i.id,type:i.type,id:le(`${i.type}_`),x:c[0],y:c[1],radiusX:0,radiusY: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))(t,a,s);case"circle":return((i,c,r)=>Qt({toolId:i.id,type:i.type,id:le(`${i.type}_`),x:c[0],y:c[1],radius: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))(t,a,s)}},Ls=(e,t)=>{switch(t.type){case"brush":((n,s)=>{s.points.length<1||!s.path||n.globalAlpha!==0&&s.style?.strokeColor!=="transparent"&&n.globalAlpha!==0&&n.stroke(s.path)})(e,t);break;case"text":((n,s)=>{if(n.globalAlpha!==0&&s.style?.strokeColor&&s.style.strokeColor!=="transparent"){n.scale(s.flipX?-1:1,s.flipY?-1:1),n.font=`${s.style?.fontItalic?"italic":""} ${s.style?.fontBold?"bold":""} ${s.fontSize}px ${s.style?.fontFamily??ut}`,n.textBaseline="top",n.fillStyle=s.style.strokeColor;for(let a=0;a<s.value.length;a++)n.fillText(s.value[a],s.flipX?-s.x-s.width:s.x,(s.flipY?-s.y-s.height:s.y)+a*s.fontSize,s.width)}})(e,t);break;case"line":((n,s)=>{if(n.globalAlpha!==0&&s.path){s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path);for(const a of s.arrows??[])xe(n,a.style),Ra(n,a)}})(e,t);break;case"polygon":((n,s)=>{s.path&&n.globalAlpha!==0&&(s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path))})(e,t);break;case"curve":((n,s)=>{s.path&&n.globalAlpha!==0&&(s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path))})(e,t);break;case"circle":((n,s)=>{n.globalAlpha!==0&&s.path&&(s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path))})(e,t);break;case"ellipse":((n,s)=>{n.globalAlpha!==0&&s.path&&(s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path))})(e,t);break;case"rect":case"square":Pa(e,t);break;case"picture":((n,s)=>{n.globalAlpha!==0&&(n.beginPath(),n.scale(s.flipX?-1:1,s.flipY?-1:1),n.drawImage(s.img,s.flipX?-s.x-s.width:s.x,s.flipY?-s.y-s.height:s.y,s.width,s.height))})(e,t)}},Vs=(e,t,n)=>{if(t.visible===!1)return;if(((a,i)=>{const c=(r=>{const{canvasSize:{width:o,height:l,scaleRatioWithNoZoom:d},canvasZoom:u,canvasOffset:p}=r;return{x:-p[0],y:-p[1],width:o/u/d,height:l/u/d}})(i);return!!tn(a.computed.boundingBox,c)})(t,n)){if(st(e,n,t.rotation,t.computed.center),xe(e,t.style),e.globalAlpha!==1)return((a,i)=>{const{outerBorders:c}=i.computed,r={width:2*c.width,height:2*c.height};if(r.width===0||r.height===0)return;const o=document.createElement("canvas"),l=o.getContext("2d");if(!l)throw new Error("No context found for canvas");o.width=r.width,o.height=r.height,l.translate(r.width/4-c.x,r.height/4-c.y),xe(l,{...i.style,opacity:100}),Ls(l,i),a.drawImage(o,c.x-r.width/4,c.y-r.height/4)})(e,t),void e.restore();Ls(e,t),e.restore()}},Xa=(e,t,n)=>{const s=ne({origin:n,point:e.computed.center,rotation:-t});if("points"in e){if(e.type==="brush"){const i=e.points.map(c=>c.map(r=>[r[0]+s[0]-e.computed.center[0],r[1]+s[1]-e.computed.center[1]]));return{...e,points:i,rotation:(e.rotation??0)+t}}const a=e.points.map(i=>ne({origin:n,point:i,rotation:-t}));return{...e,points:a}}return{...e,x:e.x+s[0]-e.computed.center[0],y:e.y+s[1]-e.computed.center[1],rotation:(e.rotation??0)+t}},Zs=(e,t,n,s,a,i,c)=>{switch(n.type){case"line":return((r,o,l,d)=>{const u=[ge(r[0],d),ge(r[1],d)],p=Ae(u,o.rotation??0,o.computed.center),m=Qe(["points",l.anchor],p,o);return Ct(m,d)})(t,n,s,a);case"polygon":return((r,o,l,d)=>{const u=[ge(r[0],d),ge(r[1],d)],p=Ae(u,o.rotation??0,o.computed.center),m=Qe(["points",l.anchor],p,o);return gt(m,d)})(t,n,s,a);case"curve":return((r,o,l,d)=>{const u=[ge(r[0],d),ge(r[1],d)],p=o.computed.center,m=Ae(u,o.rotation??0,p),v=Qe(["points",l.anchor],m,o);return ft(v,d)})(t,n,s,a);case"brush":return((r,o,l,d,u,p)=>{const m=Gt({...o,scaleX:1,scaleY:1},d),v=o.computed.borders,{borderX:f,borderHeight:Q,borderY:k,borderWidth:b,isXinverted:x,isYinverted:g}=$e(r,o,l,d,u,p),w=Math.max(0,m.width-2*d.selectionPadding),L=Math.max(0,m.height-2*d.selectionPadding),R=Math.max(0,b-2*d.selectionPadding),V=Math.max(0,Q-2*d.selectionPadding),C=w?R/w:1,Z=L?V/L:1;if(!w||!L)return o;const A=be(f-v.x)+(x?2*v.x+m.width:0),H=be(k-v.y)+(g?2*v.y+m.height:0);return at({...o,points:o.points.map(B=>B.map(([D,I])=>[x?-D+A:D+A,g?-I+H:I+H])),scaleX:C,scaleY:Z},d)})(t,n,s,a,i,c);case"circle":return((r,o,l,d,u)=>{const{borderX:p,borderHeight:m,borderY:v,borderWidth:f}=$e(r,o,l,d,!0,u);return Qt({...o,radius:Math.max(0,f/2-d.selectionPadding),x:p+f/2,y:v+m/2},d)})(t,n,s,a,c);case"ellipse":return((r,o,l,d,u=!1,p=!1)=>{const{borderX:m,borderHeight:v,borderY:f,borderWidth:Q}=$e(r,o,l,d,u,p);return wt({...o,radiusX:Math.max(0,Q/2-d.selectionPadding),radiusY:Math.max(0,v/2-d.selectionPadding),x:m+Q/2,y:f+v/2},d)})(t,n,s,a,i,c);case"rect":case"square":return((r,o,l,d,u=!1,p=!1)=>{const{borderX:m,borderHeight:v,borderY:f,borderWidth:Q}=$e(r,o,l,d,u,p);return St({...o,width:Math.max(0,Q-2*d.selectionPadding),height:Math.max(0,v-2*d.selectionPadding),x:m+d.selectionPadding,y:f+d.selectionPadding},d)})(t,n,s,a,n.type==="square"||i,c);case"text":return((r,o,l,d,u,p)=>{const{borderX:m,borderHeight:v,borderY:f,borderWidth:Q,isXinverted:k,isYinverted:b}=$e(o,l,d,u,!0,p),x=Math.max(0,Q-2*u.selectionPadding),g=Math.max(0,v-2*u.selectionPadding),w=kt({...l,width:x,height:g,x:m+u.selectionPadding,y:f+u.selectionPadding,flipX:k?!l.flipX:!!l.flipX,flipY:b?!l.flipY:!!l.flipY},u);return{...w,fontSize:Pt(r,w.value,w.width,w.style?.fontBold??!1,w.style?.fontItalic??!1,w.style?.fontFamily)}})(e,t,n,s,a,c);case"picture":return((r,o,l,d,u)=>{const{borderX:p,borderHeight:m,borderY:v,borderWidth:f,isXinverted:Q,isYinverted:k}=$e(r,o,l,d,!0,u),b=Math.max(0,f-2*d.selectionPadding),x=Math.max(0,m-2*d.selectionPadding);return Mt({...o,width:b,height:x,x:p+d.selectionPadding,y:v+d.selectionPadding,flipX:Q?!o.flipX:!!o.flipX,flipY:k?!o.flipY:!!o.flipY},d)})(t,n,s,a,c);default:return n}},$a=(e,t,n,s,a,i,c)=>{if(n.type!=="group")return U(n).map(v=>Zs(e,t,v,s,a,i,c));const r=n,o=U(r),l=o.filter(v=>fa.includes(v.type)),d=!l.some(v=>(v.rotation??0)!==(l[0]?.rotation??0)),u=(l[0]?.rotation??0)!==0&&l.length!==o.length,p=o.some(v=>va.includes(v.type)),m=((v,f,Q,k,b,x)=>{const{borders:g}=f.computed,{borderX:w,borderHeight:L,borderY:R,borderWidth:V,isXinverted:C,isYinverted:Z}=$e(v,f,Q,k,b,x);return{newBorderX:w,newBorderY:R,newBorderWidth:V,newBorderHeight:L,widthMultiplier:(V-2*k.selectionPadding)/(g.width-2*k.selectionPadding||1),heightMultiplier:(L-2*k.selectionPadding)/(g.height-2*k.selectionPadding||1),isXinverted:C,isYinverted:Z,groupCenter:[w+V/2,R+L/2],rotation:f.rotation??0,settings:k,originalBorders:g}})(t,r,s,a,i||!d||p||u,c);return o.map(v=>{switch(v.type){case"rect":case"square":return((f,Q,k)=>{const{isXinverted:b,isYinverted:x,settings:g,widthMultiplier:w,heightMultiplier:L}=k,R=(b||x)&&!(b&&x)&&(f.rotation??0)!==0&&Q.rotation!==f.rotation,V=Ye(f,Q,k),C=(f.width||1)*w,Z=(f.height||1)*L,A=Xe(k,V.x,V.y,C,Z);return St({...f,width:C,height:Z,x:A[0]-C/2,y:A[1]-Z/2,rotation:R?-(f.rotation??0):f.rotation??0},g)})(v,r,m);case"picture":return((f,Q,k)=>{const{isXinverted:b,isYinverted:x,settings:g,widthMultiplier:w,heightMultiplier:L}=k,R=Ye(f,Q,k),V=(f.width===0||f.height===0?f.ratio??1:f.width)*w,C=(f.width===0||f.height===0?f.ratio??1:f.height)*L,Z=Xe(k,R.x,R.y,V,C),A=(b||x)&&!(b&&x)&&(f.rotation??0)!==0&&Q.rotation!==f.rotation;return Mt({...f,width:V,height:C,x:Z[0]-V/2,y:Z[1]-C/2,flipX:b?!f.flipX:!!f.flipX,flipY:x?!f.flipY:!!f.flipY,rotation:A?-(f.rotation??0):f.rotation??0},g)})(v,r,m);case"text":return((f,Q,k,b)=>{const{isXinverted:x,isYinverted:g,settings:w,widthMultiplier:L,heightMultiplier:R}=b,V=(x||g)&&!(x&&g)&&(Q.rotation??0)!==0&&k.rotation!==Q.rotation,C=Ye(Q,k,b),Z=(Q.width===0||Q.height===0?Q.ratio??1:Q.width)*L,A=(Q.width===0||Q.height===0?Q.ratio??1:Q.height)*R,H=Xe(b,C.x,C.y,Z,A),B=kt({...Q,width:Z,height:A,x:H[0]-Z/2,y:H[1]-A/2,flipX:x?!Q.flipX:!!Q.flipX,flipY:g?!Q.flipY:!!Q.flipY,rotation:V?-(Q.rotation??0):Q.rotation??0},w);return{...B,fontSize:Pt(f,B.value,B.width,B.style?.fontBold??!1,B.style?.fontItalic??!1,B.style?.fontFamily)}})(e,v,r,m);case"ellipse":return((f,Q,k)=>{const{isXinverted:b,isYinverted:x,settings:g,widthMultiplier:w,heightMultiplier:L}=k,R=(b||x)&&!(b&&x)&&(f.rotation??0)!==0&&Q.rotation!==f.rotation,V=Ye(f,Q,k),C=(f.radiusX||.5)*w,Z=(f.radiusY||.5)*L,A=Xe(k,V.x,V.y,2*C,2*Z);return wt({...f,radiusX:C,radiusY:Z,x:A[0],y:A[1],rotation:R?-(f.rotation??0):f.rotation??0},g)})(v,r,m);case"circle":return((f,Q,k)=>{const b=Ye(f,Q,k),x=(f.radius||.5)*k.widthMultiplier,g=Xe(k,b.x,b.y,2*x,2*x);return Qt({...f,radius:x,x:g[0],y:g[1]},k.settings)})(v,r,m);case"brush":return((f,Q,k)=>{const{isXinverted:b,isYinverted:x,settings:g,widthMultiplier:w,heightMultiplier:L}=k,R=Gt({...f,scaleX:1,scaleY:1},g),V=R.width-2*g.selectionPadding,C=R.height-2*g.selectionPadding,Z=f.scaleX??1?(f.scaleX??1)*w:w/V,A=f.scaleY??1?(f.scaleY??1)*L:L/C,H=V*Z,B=C*A,D=Ye(f,Q,k),I=Xe(k,D.x,D.y,H,B),X=be(I[0]-H/2-f.computed.borders.x-g.selectionPadding)+(b?2*f.computed.borders.x+R.width:0),$=be(I[1]-B/2-f.computed.borders.y-g.selectionPadding)+(x?2*f.computed.borders.y+R.height:0),z=(b||x)&&!(b&&x)&&(f.rotation??0)!==0&&Q.rotation!==f.rotation;return at({...f,points:f.points.map(S=>S.map(([M,P])=>[b?-M+X:M+X,x?-P+$:P+$])),scaleX:Z,scaleY:A,rotation:z?-(f.rotation??0):f.rotation??0},k.settings)})(v,r,m);case"line":case"polygon":case"curve":return Wa(v,r,m);default:return Zs(e,t,v,s,a,i,c)}})},Hs=(e,t,n,s)=>{switch(e.type){case"rect":case"square":case"ellipse":case"circle":case"picture":case"text":return Ee({...e,x:e.x+t,y:e.y+n},s);case"line":case"polygon":case"curve":return Ee({...e,points:e.points.map(([a,i])=>[a+t,i+n])},s);case"brush":return Ee({...e,points:e.points.map(a=>a.map(([i,c])=>[i+t,c+n]))},s);default:return e}},zs=(e,t,n,s,a)=>{const i=t.computed.borders,c=((l,d)=>d?[Math.abs(l[0])>Math.abs(l[1])?l[0]:0,Math.abs(l[1])>Math.abs(l[0])?l[1]:0]:l)([e[0]-n[0],e[1]-n[1]],a),r=c[0]===0?0:ge(i.x+s.selectionPadding+c[0],s)-(i.x+s.selectionPadding),o=c[1]===0?0:ge(i.y+s.selectionPadding+c[1],s)-(i.y+s.selectionPadding);return U(t).map(l=>Hs(l,r,o,s))},Ee=(e,t)=>{switch(e.type){case"rect":case"square":return ka(e,t);case"ellipse":return Aa(e,t);case"circle":return Va(e,t);case"picture":return Na(e,t);case"text":return Oa(e,t);case"line":return Ia(e,t);case"polygon":return Qs(e,t);case"curve":return ws(e,t);case"brush":return ya(e,t);default:return e}},Ts=({ctx:e,shape:t,settings:n,selectionWidth:s,selectionColor:a,hoverMode:i,selectionMode:c,withAnchors:r=!0})=>{switch(n.debug&&((o,l,d,u)=>{l.selection&&u.debug&&(o.save(),o.scale(u.canvasSize.scaleRatio,u.canvasSize.scaleRatio),o.translate(u.canvasOffset[0],u.canvasOffset[1]),xe(o,{fillColor:"transparent",strokeColor:"green",lineWidth:d/u.canvasSize.scaleRatio}),o.strokeRect(l.computed.boundingBox.x,l.computed.boundingBox.y,l.computed.boundingBox.width,l.computed.boundingBox.height),o.restore())})(e,t,s,n),t.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((o,l,d,u,p,m)=>{if(l.selection&&(st(o,p,l.rotation,l.computed.center),p.debug&&(xe(o,{fillColor:"transparent",strokeColor:"red",lineWidth:u/p.canvasSize.scaleRatio}),o.strokeRect(l.computed.outerBorders.x,l.computed.outerBorders.y,l.computed.outerBorders.width,l.computed.outerBorders.height)),xe(o,{fillColor:"transparent",strokeColor:d,lineWidth:u/p.canvasSize.scaleRatio}),l.selection.shapePath?o.stroke(l.selection.shapePath):o.stroke(l.selection.border),m&&!l.locked)){l.selection.shapePath&&o.stroke(l.selection.border),l.selection.line&&o.stroke(l.selection.line),xe(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio,shadowColor:d,shadowBlur:0});for(const v of l.selection.anchors)o.fill(v),o.stroke(v)}})(e,t,a,s,n,r);break;case"group":((o,l,d,u,p,m,v)=>{if(l.selection&&(l.shapes.forEach(f=>{xe(o,{fillColor:"transparent",strokeColor:d,lineWidth:u/m.canvasSize.scaleRatio}),st(o,m,f.rotation,f.computed.center),f.selection?.shapePath&&o.stroke(f.selection.shapePath),o.restore()}),p.mode!=="rotate"&&(st(o,m,l.rotation,l.computed.center),m.debug&&(xe(o,{fillColor:"transparent",strokeColor:"red",lineWidth:u/m.canvasSize.scaleRatio}),o.strokeRect(l.computed.outerBorders.x,l.computed.outerBorders.y,l.computed.outerBorders.width,l.computed.outerBorders.height)),xe(o,{fillColor:"transparent",strokeColor:d,lineWidth:u/m.canvasSize.scaleRatio}),v&&!l.locked))){o.stroke(l.selection.border),l.selection.line&&o.stroke(l.selection.line),xe(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/m.canvasSize.scaleRatio});for(const f of l.selection.anchors)o.fill(f),o.stroke(f)}})(e,t,a,s,c,n,r);break;case"polygon":case"line":case"curve":(({ctx:o,shape:l,withAnchors:d,selectionWidth:u,selectionColor:p,hoverMode:m,settings:v})=>{if(l.selection&&(st(o,v,l.rotation,l.computed.center),v.debug&&(xe(o,{fillColor:"transparent",strokeColor:"red",lineWidth:u/v.canvasSize.scaleRatio}),o.strokeRect(l.computed.outerBorders.x,l.computed.outerBorders.y,l.computed.outerBorders.width,l.computed.outerBorders.height)),xe(o,{fillColor:"transparent",strokeColor:p,lineWidth:u/v.canvasSize.scaleRatio}),l.selection.shapePath&&o.stroke(l.selection.shapePath),d&&!l.locked)){xe(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/v.canvasSize.scaleRatio,shadowColor:p,shadowBlur:0});for(let f=0;f<l.selection.anchors.length;f++){const Q=l.selection.anchors[f];m.mode==="resize"&&m.anchor===f?(o.shadowBlur=10,o.fill(Q),o.shadowBlur=0):o.fill(Q),o.stroke(Q)}}})({ctx:e,shape:t,withAnchors:r,selectionWidth:s,selectionColor:a,hoverMode:i,settings:n})}e.restore()},Ua=({ctx:e,selectionFrame:t,settings:n})=>{st(e,n),((s,a,i)=>{xe(s,{fillColor:"rgba(170,170,170, 0.1)",strokeColor:"rgb(170,170,170)",lineWidth:1/i.canvasSize.scaleRatio}),s.fillRect(a[0][0],a[0][1],a[1][0]-a[0][0],a[1][1]-a[0][1]),s.strokeRect(a[0][0],a[0][1],a[1][0]-a[0][0],a[1][1]-a[0][1])})(e,t.frame,n),e.restore()},ln=e=>e.filter(t=>t!=null),As=e=>{const t=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0];if(!t)return"";const n=t.getAttribute("width"),s=t.getAttribute("height");let a;if(n||s)a=e;else{const c=t.getAttribute("viewBox")??"0 0 300 300",[,,r,o]=c.split(" ");t.setAttribute("width",r??"300"),t.setAttribute("height",o??"300"),a=new XMLSerializer().serializeToString(t)}const i=new Blob([a],{type:"image/svg+xml"});return URL.createObjectURL(i)},Es=e=>(e instanceof File?e.name:e).includes(".svg"),Rs=e=>Es(e)?fetch(e).then(t=>t.text()).then(t=>As(t)):fetch(e).then(t=>t.blob()).then(t=>URL.createObjectURL(t)),Ds=(e,t)=>{const n=document.createElement("a");n.href=e,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n)},qa=e=>e.src.includes("<svg")?e.src:(t=>{const n=document.createElement("canvas");n.width=t.width,n.height=t.height;const s=n.getContext("2d");return s?(s.drawImage(t,0,0),n.toDataURL("image/png")):""})(e.img),cn=({shapes:e,settings:t})=>{const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)throw new Error("No context found for canvas");const{realHeight:a,realWidth:i}=t.canvasSize;n.width=i,n.height=a,s.clearRect(0,0,i,a),ns(s);for(let c=e.length-1;c>=0;c--)Vs(s,e[c],t);return n.toDataURL("image/png")},Is=({shapes:e,settings:t,view:n})=>{if(n==="fitToShapes"&&!e.length)throw new Error("No image found to export");if(n==="fitToShapes"){const a=Math.min(...e.map(l=>l.computed.boundingBox.x)),i=Math.max(...e.map(l=>l.computed.boundingBox.x+l.computed.boundingBox.width)),c=Math.min(...e.map(l=>l.computed.boundingBox.y)),r=Math.max(...e.map(l=>l.computed.boundingBox.y+l.computed.boundingBox.height)),o={...t,canvasOffset:[-a,-c],canvasZoom:1,canvasSize:{realWidth:i-a,realHeight:r-c,width:i-a,height:r-c,scaleRatio:1,scaleRatioWithNoZoom:1}};return cn({shapes:e,settings:o})}if(n==="defaultView"){const a={...t,canvasOffset:[0,0],canvasZoom:1,canvasSize:{...t.canvasSize,width:t.canvasSize.realWidth,height:t.canvasSize.realHeight,scaleRatio:1,scaleRatioWithNoZoom:1}};return cn({shapes:e,settings:a})}const s={...t,canvasSize:{...t.canvasSize,width:t.canvasSize.realWidth,height:t.canvasSize.realHeight,scaleRatio:t.canvasZoom,scaleRatioWithNoZoom:1}};return cn({shapes:e,settings:s})},Ga=(e,t,n)=>{return a=dn(e,t,n),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(a))}`;var a},_a=e=>{const t=["img","id","selection","path","arrows","tempPoint","computed",["flipX",[void 0,!1]],["flipY",[void 0,!1]]];return e.map(n=>n.type!=="picture"||n.src.startsWith("http")?Xt(t,n):Xt(t,{...n,src:qa(n)}))},dn=(e,t,n)=>({shapes:_a(e),config:{width:t,height:n}}),Ws=(e,t)=>Ee({...e,id:le(`${e.type}_`)},t),Ka=(e,t,n,s)=>{const a=y.useRef([]),i=y.useRef({dataChanged:[]}),[c,r]=y.useState(void 0),[o,l]=y.useState(void 0),[d,u]=y.useState(void 0),[p,m]=y.useState({states:[{shapes:[],selectedShape:void 0,source:"remote"}],cursor:0}),v=p.cursor>0,f=p.cursor<p.states.length-1,Q=a.current.length>0,k=y.useCallback(()=>{m(S=>es(S.states[S.cursor]?.shapes,a.current)?S:{states:[...S.states.slice(0,S.cursor+1),{shapes:a.current,selectedShape:o,source:"user"}],cursor:S.cursor+1})},[o]),b=y.useCallback(S=>{a.current=[...S,...a.current]},[]),x=y.useCallback(S=>{a.current=a.current.flatMap(M=>{const P=S.find(T=>T.id===M.id);return P?[{...P,id:le(`${M.type}_`)},M]:M})},[]),g=y.useCallback((S,M,P,T)=>{if(S.target&&"className"in S.target&&![Gn,_n].includes(S.target.className)||!T)return void u(void 0);const j=a.current.find(O=>U(o)?.map(W=>W.id).includes(O.id)?!!lt(M,O,P,e):!!ms(M,O,P,e));u(j)},[e,o]),w=y.useCallback(async(S,M=300,P=300)=>{const T=await Fa(S,M,P,e);return b([T]),k(),T},[b,k,e]),L=y.useCallback((S,M=!1)=>{a.current=a.current.map(P=>S.find(T=>T.id===P.id)??P),l(P=>P&&ce(U(P).map(T=>S.find(j=>j.id===T.id)??T),e)),M&&k()},[k,e]),R=y.useCallback(S=>{const M=S.map(P=>Xt(["chosen"],P));a.current=M,k()},[k]),V=y.useCallback(S=>{const M=new Set(S.map(P=>P.id));l(P=>{const T=U(P).map(j=>j.id);return T&&M.size&&T.find(j=>M.has(j))?void 0:P}),a.current=a.current.filter(P=>!M?.has(P.id)),k()},[k]),C=y.useCallback(S=>{m(M=>{const P=S(M);return a.current=M.states[P]?.shapes??[],l(M.states[P]?.selectedShape),Qe("cursor",P,M)})},[]),Z=y.useCallback(()=>{C(S=>Math.max(0,S.cursor-1))},[C]),A=y.useCallback(()=>{C(S=>Math.min(S.states.length-1,S.cursor+1))},[C]),H=y.useCallback((S,M)=>{l(void 0),a.current=S,m(P=>M.clearHistory?{states:[{shapes:S,selectedShape:void 0,source:M.source}],cursor:0}:{states:[...P.states.slice(0,P.cursor+1),{shapes:S,selectedShape:void 0,source:M.source}],cursor:P.cursor+1})},[]),B=y.useCallback((S,M)=>{const P=a.current,T=P.findIndex(E=>E.id===S),j=P.findIndex(E=>E.id===M);var O,W,F;R((O=P,F=j,(W=T)<0||F<0||W>O.length-1||F>O.length-1?O:W<F?[...O.slice(0,W),...O.slice(W+1,F+1),O[W],...O.slice(F+1,O.length)]:[...O.slice(0,F),O[W],...O.slice(F,W),...O.slice(W+1,O.length)]))},[R]),D=y.useCallback(S=>{const M=a.current,P=new Set(S.map(j=>j.id)),T=M.map(j=>P.has(j.id)?Qe("visible",j.visible===!1,j):j);l(hs(j=>Qe("visible",j.visible===!1,j),e)),R(T)},[R,e]),I=y.useCallback(S=>{const M=a.current,P=new Set(S.map(j=>j.id)),T=M.map(j=>P.has(j.id)?Qe("locked",!j.locked,j):j);l(hs(j=>Qe("locked",!j.locked,j),e)),R(T)},[R,e]),X=y.useCallback((S,M)=>{i.current.hasOwnProperty(S)&&(i.current[S]=[...i.current[S],M])},[]),$=y.useCallback((S,M)=>{if(i.current.hasOwnProperty(S))if(M){const P=i.current[S].indexOf(M);i.current[S]=[...i.current[S].slice(0,P),...i.current[S].slice(P+1)]}else i.current[S]=[]},[]);y.useEffect(()=>{const S=p.states[p.cursor],M=dn(S.shapes,t,n);for(const P of i.current.dataChanged)P(M,S.source)},[t,n,p]),y.useEffect(()=>{a.current=a.current.map(S=>Ee(S,e)),l(S=>S===void 0?void 0:ce(U(S).map(M=>Ee(M,e)),e))},[e]);const z=y.useCallback((S,M)=>{r(P=>{const T=[P?.frame[0]??[M[0],M[1]],[M[0],M[1]]],j=a.current.filter(W=>((F,E,_)=>{const{borders:ie,center:se,boundingBox:q}=E.computed,N=Math.min(_[0][0],_[1][0]),de=Math.max(_[0][0],_[1][0]),te=Math.min(_[0][1],_[1][1]),fe={x:N,y:te,width:de-N,height:Math.max(_[0][1],_[1][1])-te},ve=tn(q,fe);if(!ve)return!1;if(ie.width<=1||ie.height<=1||!E.path)return!0;if(F.lineWidth=(E.style?.lineWidth??0)+10,E.type==="brush"){const K=E.points.flat(),ue=Math.min(...K.map(ee=>ee[0])),Y=Math.min(...K.map(ee=>ee[1]));for(const ee of E.points){if(ee.length<1)break;if(ee.length<2){const Me=Ve(ee[0],ue,Y,E.scaleX,E.scaleY);if(ss(ve,{x:Me[0],y:Me[1],radius:(E.style?.lineWidth??1)/2}))return!0}for(let Me=0;Me<ee.length-1;Me++){const ke=en(Ve(ee[Me],ue,Y,E.scaleX,E.scaleY),E.rotation??0,se),ae=en(Ve(ee[Me+1],ue,Y,E.scaleX,E.scaleY),E.rotation??0,se),Le=tn({x:Math.min(ke[0],ae[0]),y:Math.min(ke[1],ae[1]),width:Math.abs(ke[0]-ae[0]),height:Math.abs(ke[1]-ae[1])},fe);if(Le){const qe=new Path2D;if(qe.moveTo(...ke),qe.lineTo(...ae),ys({ctx:F,path:qe,rect:Le,offset:10,center:se,checkFill:!1}))return!0}}}return!1}const me=E.style?.fillColor&&E.style?.fillColor!=="transparent"||["picture","text"].includes(E.type);return ys({ctx:F,path:E.path,rect:ve,offset:10,center:se,rotation:E.rotation??0,checkFill:me})})(S,W,T)),O=ce(j,e);return l(s?ce(ps(P?.oldSelection,j),e):O),{oldSelection:P?.oldSelection,frame:T}})},[e,s]);return{registerEvent:X,unregisterEvent:$,shapesRef:a,selectedShape:o,hoveredShape:d,selectionFrame:c,setSelectionFrame:r,refreshSelectedShapes:z,addShapes:b,duplicateShapes:x,addPictureShape:w,moveShapes:B,saveShapes:k,setSelectedShape:l,refreshHoveredShape:g,toggleShapeVisibility:D,toggleShapeLock:I,removeShape:V,updateShape:L,backwardShape:Z,forwardShape:A,clearShapes:H,canGoBackward:v,canGoForward:f,canClear:Q}},Ns=e=>{const t=[e[0].clientX,e[0].clientY],n=[e[1].clientX,e[1].clientY];var s,a;return{diff:os(t,n),center:(a=n,[((s=t)[0]+a[0])/2,(s[1]+a[1])/2])}},Ja=({canvasElt:e,canvasTransformation:t,canvasSize:n,size:s,setCanvasTransformation:a})=>{const i=y.useRef([]),[c,r]=y.useState(i.current.length>0),o=y.useRef(null),l=y.useRef(t);l.current=t;const d=y.useCallback(({startDiff:u,startZoom:p,startCenter:m,startOffset:v,currentDiff:f,currentCenter:Q,isMoving:k,isZooming:b})=>{if(!e||!f||!u)return;const x=(({canvasBoundingRect:g,canvasSize:w,size:L,startDiff:R,startZoom:V,startCenter:C,startOffset:Z,currentDiff:A,currentCenter:H,isMoving:B,isZooming:D})=>{const I=D?ze(A/R*V,we[0],we[we.length-1]):V,X=B?[Z[0]+(H[0]-C[0])*(w.width/g.width)/w.scaleRatio/V,Z[1]+(H[1]-C[1])*(w.height/g.height)/w.scaleRatio/V]:[Z[0],Z[1]],$=[(H[0]-g.left)/w.scaleRatio,(H[1]-g.top)/w.scaleRatio];return an({size:L,canvasSize:w,currentOffset:X,currentZoom:V,zoom:I,centerPoint:$})})({canvasBoundingRect:e.getBoundingClientRect(),canvasSize:n,size:s,startDiff:u,startZoom:p,startCenter:m,startOffset:v,currentDiff:f,currentCenter:Q,isMoving:k,isZooming:b});a(x)},[e,n,s,a]);y.useEffect(()=>{if(!e)return;const u=p=>{if(i.current=[...i.current,p],r(i.current.length>0),i.current.length===2){p.stopPropagation();const{diff:m,center:v}=Ns(i.current);o.current={startDiff:m,startCenter:v,startZoom:l.current.zoom,startOffset:l.current.offset,isMoving:!1,isZooming:!1}}};return e.addEventListener("pointerdown",u),()=>{e.removeEventListener("pointerdown",u)}},[e]),y.useEffect(()=>{if(!c)return;const u=m=>{const v=i.current.findIndex(f=>f.pointerId===m.pointerId);if(v>-1&&(i.current[v]=m),i.current.length===2&&o.current){const{diff:f,center:Q}=Ns(i.current),k=o.current.isZooming||((x,g)=>Math.abs(x-g.startDiff)>30)(f,o.current),b=o.current.isMoving||k||((x,g)=>Math.abs(os(x,g.startCenter))>10)(Q,o.current);o.current={...o.current,isMoving:b,isZooming:k},d({...o.current,currentDiff:f,currentCenter:Q})}},p=m=>{i.current=i.current.filter(v=>v.pointerId!==m.pointerId),r(i.current.length>0)};return document.addEventListener("pointermove",u),document.addEventListener("pointerup",p),document.addEventListener("pointerout",p),document.addEventListener("pointercancel",p),document.addEventListener("pointerleave",p),()=>{document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",p),document.removeEventListener("pointerout",p),document.removeEventListener("pointercancel",p),document.removeEventListener("pointerleave",p)}},[c,d])},Fs={offset:[0,0],zoom:1},ei=({canvasSize:e,size:t,zoomEnabled:n,canvasElt:s})=>{const[a,i]=y.useState(Fs),c=y.useRef(0),r=y.useCallback(d=>{i(({zoom:u})=>sn({zoom:u,size:t,canvasSize:e,newOffset:d}))},[e,t]),o=y.useCallback(d=>{i(({offset:u,zoom:p})=>(({size:m,canvasSize:v,currentOffset:f,currentZoom:Q,action:k})=>{const b=k==="default"?we[4]:k==="zoom"?we[ze(we.length-1-we.slice(0).reverse().findIndex(g=>g<=Q)+1,0,we.length-1)]:we[ze(we.findIndex(g=>g>=Q)-1,0,we.length-1)],x=[v.realWidth/2,v.realHeight/2];return an({size:m,canvasSize:v,currentOffset:f,currentZoom:Q,zoom:b,centerPoint:x})})({size:t,canvasSize:e,currentOffset:u,currentZoom:p,action:d}))},[e,t]);Ja({canvasElt:s,canvasTransformation:a,canvasSize:e,size:t,setCanvasTransformation:i});const l=y.useCallback(()=>{i(Fs)},[]);return y.useEffect(()=>{if(!n||!s)return;const d=u=>{const p=u.ctrlKey,{deltaX:m,deltaY:v}=((b,x)=>{const g=Math.abs(b.deltaY)<50&&x<50,w=b.ctrlKey,L=ts()&&g&&w;switch(b.deltaMode){case WheelEvent.DOM_DELTA_LINE:return{deltaX:16*b.deltaX,deltaY:16*b.deltaY};case WheelEvent.DOM_DELTA_PAGE:return{deltaX:b.deltaX*window.innerHeight,deltaY:b.deltaY*window.innerHeight};default:return L?{deltaX:5*b.deltaX,deltaY:5*b.deltaY}:{deltaX:b.deltaX,deltaY:b.deltaY}}})(u,u.timeStamp-c.current);if(c.current=u.timeStamp,p){u.preventDefault();const b=fs(u,s,e);return void i(({offset:x,zoom:g})=>(({size:w,canvasSize:L,currentOffset:R,currentZoom:V,delta:C,centerPoint:Z})=>{const A=ze(V*(1-C/1e3),we[0],we[we.length-1]);return an({size:w,canvasSize:L,currentOffset:R,currentZoom:V,zoom:A,centerPoint:Z})})({size:t,canvasSize:e,currentOffset:x,currentZoom:g,delta:v,centerPoint:b}))}const f=u.shiftKey,[Q,k]=f?[v,m]:[m,v];i(({offset:b,zoom:x})=>{const g=[b[0]-Q/x,b[1]-k/x],w=sn({zoom:x,size:t,canvasSize:e,newOffset:g});return w.offset[0]===b[0]&&w.offset[1]===b[1]||u.preventDefault(),w})};return s.addEventListener("wheel",d,{passive:!1}),()=>{s.removeEventListener("wheel",d)}},[s,t,e,n]),{setCanvasTransformation:i,setCanvasOffset:r,setCanvasZoom:o,resetZoom:l,canvasTransformation:a}},Os=(e,t=!1)=>{const n=(a,i)=>{if(Array.isArray(a))return i},s=e.map(a=>{if(typeof a!="object")return null;switch(a.type){case"brush":return He(n,An,a);case"circle":return He(n,Nn,a);case"curve":return He(n,Dn,a);case"ellipse":return He(n,Fn,a);case"line":return He(n,En,a);case"polygon":return He(n,Rn,a);case"rect":return He(n,In,a);case"square":return He(n,Wn,a);case"text":return He(n,On,a)}return null});return ln(t?[...s,Ft]:s)},ti=({addShapes:e,drawCanvasRef:t,setActiveTool:n,refreshHoveredShape:s,shapes:a,selectionMode:i,activeTool:c,isInsideComponent:r,setCanvasOffset:o,selectedShape:l,canvasOffsetStartData:d,refreshSelectedShapes:u,setSelectedShape:p,setSelectionFrame:m,setCanvasOffsetStartData:v,updateSingleShape:f,duplicateShapes:Q,saveShapes:k,setSelectionMode:b,setCanvasMoveAcceleration:x,settings:g,isShiftPressed:w,isAltPressed:L,withFrameSelection:R,isSpacePressed:V})=>{const[C,Z]=y.useState({mode:"default"}),{registerDoubleClickEvent:A,unRegisterDoubleClickEvent:H}=(()=>{const S=y.useRef(void 0),M=y.useRef(void 0),P=T=>{const j=Date.now();S.current&&j<S.current+300&&M.current?.(T),S.current=Date.now()};return{registerDoubleClickEvent:(T,j)=>{M.current=j,T.addEventListener("click",P),T.addEventListener("touchend",P)},unRegisterDoubleClickEvent:T=>{T.removeEventListener("click",P),T.removeEventListener("touchend",P)}}})(),B=y.useRef(null);B.current=S=>((M,P,T,j,O,W,F,E,_,ie,se,q,N,de,te,fe,ve)=>{if(rt(M)&&M.touches.length>1)return;const me=P.current?.getContext("2d");if(!me)return;const K=ot(M,P.current,N);if(j.mode==="selectionFrame"){q(me,K,N);const Y=fs(M,P.current,N.canvasSize);return void ve([Math.ceil(ze(Y[0]*N.canvasZoom<50?Y[0]*N.canvasZoom-50:Y[0]*N.canvasZoom>N.canvasSize.width/N.canvasSize.scaleRatioWithNoZoom-50?Y[0]*N.canvasZoom-(N.canvasSize.width/N.canvasSize.scaleRatioWithNoZoom-50):0,-100,100)/5/N.canvasZoom),Math.ceil(ze(Y[1]*N.canvasZoom<50?Y[1]*N.canvasZoom-50:Y[1]*N.canvasZoom>N.canvasSize.height/N.canvasSize.scaleRatioWithNoZoom-50?Y[1]*N.canvasZoom-(N.canvasSize.height/N.canvasSize.scaleRatioWithNoZoom-50):0,-100,100)/5/N.canvasZoom)])}if(W!==void 0)return void se([K[0]+N.canvasOffset[0]-W.start[0],K[1]+N.canvasOffset[1]-W.start[1]]);if(j.mode==="preview"){const Y=U(T)[0];if(Y?.type==="curve"){const ee=Cs(Y,K,N,!0);return void fe(ce([ee],N))}if(Y?.type==="polygon"){const ee=bs(Y,K,N,!0);return void fe(ce([ee],N))}}const ue=pt(K,N);if(rt(M)||E(M,me,K,ue),T===void 0||T.locked)F({mode:"default",outOfView:!ue});else{if(j.mode==="default"||j.mode==="textedition"){if(!ue)return void F({mode:"default"});F(lt(me,T,K,N,!0)||{mode:"default"})}else{const Y=P.current?.getContext("2d");if(!Y)return;const ee=Sa(Y,T,K,j,N,de,te);_(U(ee))}j.mode==="translate"&&te&&!j.hasBeenDuplicated&&(O({...j,hasBeenDuplicated:!0}),ie(U(j.originalShape)))}})(S,t,l,i,b,d,Z,s,f,Q,o,u,g,w,L,p,x),y.useEffect(()=>{if(r){const S=M=>B.current?.(M);return document.addEventListener("mousemove",S),document.addEventListener("touchmove",S),()=>{document.removeEventListener("mousemove",S),document.removeEventListener("touchmove",S)}}},[r]);const{isBrushShapeDoneOnMouseUp:D}=g,I=y.useRef(null);I.current=S=>{if(rt(S)&&S.touches.length>1)return;const M=t.current?.getContext("2d");if(!M)return;if("button"in S&&S.button===2)return p(void 0),n(De),b({mode:"default"}),void m(void 0);if(d)return void v(void 0);if(i.mode==="textedition"||i.mode==="preview")return;const P=ot(S,t.current,g);if(i.mode==="translate"&&Date.now()-i.dateStart<=500&&P[0]===i.cursorStartPosition[0]&&P[1]===i.cursorStartPosition[1]){if(!(S.ctrlKey||S.shiftKey||S.metaKey)){const{shape:T}=us(M,a,P,g,void 0,rt(S),R,!1);p(T)}return b({mode:"default"}),m(void 0),void k()}i.mode!=="default"&&(i.mode==="brush"&&D&&p(void 0),b({mode:"default"}),m(void 0),k())},y.useEffect(()=>{if(r){const S=M=>I.current?.(M);return document.addEventListener("mouseup",S),document.addEventListener("touchend",S),()=>{document.removeEventListener("mouseup",S),document.removeEventListener("touchend",S)}}},[r]);const X=!g.features.edition&&g.features.zoom,$=!g.features.edition&&!g.features.zoom,z=y.useRef(null);return z.current=(S,M,P)=>{if(S.preventDefault(),rt(S)&&S.touches.length>1)return;const T=M?.getContext("2d");if(!T)return;M.focus();const j=ot(S,t.current,g),O="button"in S&&S.button===1;if(!("button"in S&&S.button===2)){if(O||P||c.type==="move")v({start:j,originalOffset:g.canvasOffset});else if(!X){if(!pt(j,g))return p(void 0),void b({mode:"default"});if(c.type==="selection"){const W=S.ctrlKey||S.shiftKey||S.metaKey,{shape:F,mode:E}=us(T,a,j,g,l,rt(S),R,W);p(F),b(E),E.mode==="selectionFrame"&&m({oldSelection:F,frame:[[j[0],j[1]],[j[0],j[1]]]})}else if(qn.some(W=>W===c.type)){const W=U(l)[0],F=t.current?.getContext("2d");if(!F)return;if(c.type==="brush"){if(W?.type==="brush"){const E=((_,ie,se)=>{const q={..._,points:Qe(_.points.length,[[Math.round(ie[0]),Math.round(ie[1])]],_.points)};return at(q,se)})(W,j,g);f([E])}else{const E=js(F,c,j,g);if(!E)return;e([E]),p(ce([E],g))}b({mode:"brush"})}else if(i.mode!=="preview"||W?.type!=="polygon"&&W?.type!=="curve"){if(c.type!=="picture"){const E=js(F,c,j,g);if(!E)return;e([E]);const _=ce([E],g);p(_),E.type==="polygon"||E.type==="curve"?b({mode:"preview"}):(n(De),b({mode:"resize",cursorStartPosition:[j[0]+g.selectionPadding,j[1]+g.selectionPadding],originalShape:_,anchor:E.type==="line"?0:[1,1]}))}}else{const E=W.type==="polygon"?bs(W,j,g):Cs(W,j,g);p(ce([E],g)),f([E],!0)}}}}},y.useEffect(()=>{if($)return;const S=t.current;if(!S)return;const M=P=>z.current?.(P,S,V);return S.addEventListener("mousedown",M,{passive:!1}),S.addEventListener("touchstart",M,{passive:!1}),()=>{S.removeEventListener("mousedown",M),S.removeEventListener("touchstart",M)}},[$,t,V]),y.useEffect(()=>{const S=t.current,M=t.current?.getContext("2d");if(!(!S||!M))return r?(A(S,P=>{if(c.type==="selection"){if(U(l).length!==1)return;const T=U(l)[0];if(T?.type==="text"){const j=ot(P,t.current,g);return pt(j,g)?void(lt(M,l,j,g)&&b({mode:"textedition",defaultValue:T.value})):void 0}if(T?.type==="polygon"){const j=ot(P,t.current,g);if(!pt(j,g))return;const O=vs(M,T,j,g);return void(O&&f([Za(T,O.lineIndex,j,g)]))}if(T?.type==="curve"){const j=ot(P,t.current,g);if(!pt(j,g))return;const O=((W,F,E,_,ie=50)=>{if(F.locked||F.points.length<2)return!1;if(F.points.length<3)return vs(W,F,E,_,ie);const{center:se}=F.computed,q=Ae(E,F.rotation??0,se);W.lineWidth=(F.style?.lineWidth??0)+ie/_.canvasZoom;const N=_t(F,F.points),de=new Path2D;de.moveTo(...N[0]);for(let te=1;te<N.length-2;te++){const fe=N[te-1],ve=N[te],me=N[te+1],K=N[te+2],{cp1:ue,cp2:Y}=Kt(fe,ve,me,K);if(de.bezierCurveTo(ue[0],ue[1],Y[0],Y[1],me[0],me[1]),W.isPointInStroke(de,q[0],q[1]))return{lineIndex:te-1}}return!1})(M,T,j,g);return void(O&&f([za(T,O.lineIndex,j,g)]))}}}),()=>{H(S)}):void 0},[f,A,H,r,t,c,l,b,g]),{hoverMode:C}},Bs=e=>e.childNodes.length?Array.from(e.childNodes).map(t=>Bs(t)).join(""):e.nodeValue??"",ni=({disabled:e=!1,shape:t,defaultValue:n,updateValue:s,saveShapes:a,settings:i})=>{const c=y.useRef(null),r=y.useRef(a);y.useEffect(()=>{if(!c.current)return;const d=c.current,u=p=>{p.preventDefault();const m=p.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,m)};d.addEventListener("paste",u),d.innerText="";for(const p of n){const m=document.createElement("div");p===""?m.innerHTML="<br/>":m.innerText=p,d.appendChild(m)}return d.focus(),()=>{d.removeEventListener("paste",u)}},[n]),y.useEffect(()=>{const d=r.current;return()=>{d()}},[]);const o=y.useMemo(()=>{const{borders:d,center:u}=t.computed;return ne({point:[d.x,d.y],rotation:-(t.rotation??0),origin:u})},[t]),l=[`translate3D(${(o[0]+i.canvasOffset[0])*i.canvasSize.scaleRatio}px, ${(o[1]+i.canvasOffset[1])*i.canvasSize.scaleRatio}px, 0)`,`rotate(${qt(t.rotation??0)}deg)`,t.flipX||t.flipY?`scale(${t.flipX?-1:1}, ${t.flipY?-1:1})`:void 0,t.flipX||t.flipY?`translate3D(${t.flipX?-100:0}%,${t.flipY?-100:0}%,0)`:void 0].filter(Boolean).join(" ");return h.jsx("div",{className:"react-paint-editor-toolbox-edittextbox",ref:c,"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=>Bs(p));s(u)},style:{"--react-paint-editor-toolbox-edittextbox-transform":l,"--react-paint-editor-toolbox-edittextbox-fontsize":t.fontSize*i.canvasSize.scaleRatio+"px","--react-paint-editor-toolbox-edittextbox-padding":i.selectionPadding*i.canvasSize.scaleRatio+"px","--react-paint-editor-toolbox-edittextbox-color":t.style?.strokeColor??"inherit","--react-paint-editor-toolbox-edittextbox-opacity":(t.style?.opacity??100)/100,"--react-paint-editor-toolbox-edittextbox-fontfamily":t.style?.fontFamily??ut}})},si=(e,t,n,s,a)=>{ns(e),((i,c)=>{const{canvasZoom:r,size:o,canvasSize:{width:l,height:d}}=c;if(o!=="fixed"||r>=1)return;i.fillStyle="#f5f5f5",i.fillRect(0,0,l,d);const u=Ss(c);i.clearRect(u.x,u.y,u.width,u.height),xs(i,c)})(e,n),((i,c)=>{const{canvasSize:{width:r,height:o},gridGap:l,canvasOffset:d,canvasSize:{scaleRatio:u}}=c;if(!l)return;i.strokeStyle="rgb(220,220,220)",i.lineWidth=1,i.save(),i.scale(u,u),i.beginPath();const p=d[0]%l,m=d[1]%l,v=Math.ceil(r/u/l)+2,f=Math.ceil(o/u/l)+2;for(let Q=-5;Q<v;Q++)i.moveTo(p+(Q+1)*l,m-l),i.lineTo(p+(Q+1)*l,m+o/u+l);for(let Q=-5;Q<f;Q++)i.moveTo(p-l,m+(Q+1)*l),i.lineTo(p+r/u+l,m+(Q+1)*l);i.stroke(),i.restore()})(e,n);for(let i=s.length-1;i>=0;i--)t.mode==="textedition"&&s[i]===a||Vs(e,U(a).find(c=>c.id===s[i].id)??s[i],n)},ai=y.forwardRef(({canGrow:e,shapes:t,duplicateShapes:n,addShapes:s,updateSingleShape:a,selectedShape:i,setSelectedShape:c,setSelectionFrame:r,hoveredShape:o,selectionFrame:l,refreshHoveredShape:d,refreshSelectedShapes:u,saveShapes:p,activeTool:m,setActiveTool:v,canvasOffsetStartData:f,setCanvasOffsetStartData:Q,setCanvasOffset:k,setCanvasMoveAcceleration:b,isInsideComponent:x,selectionMode:g,setSelectionMode:w,selectionWidth:L,selectionColor:R,settings:V,isEditMode:C,isShiftPressed:Z,isAltPressed:A,isSpacePressed:H,withFrameSelection:B,withSkeleton:D},I)=>{const X=y.useRef(null),$=y.useRef(null),z=V.canvasSize,S=C,M=C?0:-1;y.useImperativeHandle(I,()=>X.current);const{hoverMode:P}=ti({addShapes:s,drawCanvasRef:X,setActiveTool:v,shapes:t,selectionMode:g,activeTool:m,isInsideComponent:x,setCanvasOffset:k,selectedShape:i,canvasOffsetStartData:f,setCanvasOffsetStartData:Q,setSelectedShape:c,setSelectionFrame:r,refreshHoveredShape:d,refreshSelectedShapes:u,updateSingleShape:a,duplicateShapes:n,saveShapes:p,setSelectionMode:w,setCanvasMoveAcceleration:b,isShiftPressed:Z,isAltPressed:A,withFrameSelection:B,settings:V,isSpacePressed:H}),T=y.useCallback(O=>{const W=U(i)[0];if(W?.type!=="text")return;const F=X.current?.getContext("2d");if(!F)return;const E=Ee(Ya(F,W,O,V),V);a([E])},[a,i,V]),j=O=>{if(C)return O.preventDefault(),O.stopPropagation(),!1};return y.useEffect(()=>{const O=X.current?.getContext("2d");O&&window.requestAnimationFrame(()=>si(O,g,V,t,i))},[t,g,i,V]),y.useEffect(()=>{const O=$.current?.getContext("2d");O&&window.requestAnimationFrame(()=>((W,F,E,_,ie,se,q,N,de,te,fe)=>{W.reset(),xs(W,E),fe&&N&&!U(q).find(ve=>ve.id===N.id)&&_.type==="selection"&&F.mode==="default"&&Ts({ctx:W,shape:N,settings:E,selectionWidth:ie,selectionColor:se,hoverMode:de,selectionMode:F,withAnchors:!1}),q&&_.type!=="brush"&&Ts({ctx:W,shape:q,settings:E,selectionWidth:ie,selectionColor:se,hoverMode:de,selectionMode:F,withAnchors:F.mode!=="textedition"}),te&&Ua({ctx:W,selectionFrame:te,settings:E})})(O,g,V,m,L,R,i,o,P,l,D))},[o,P,l,g,i,m,V,L,R,D]),h.jsx("div",{className:"react-paint-canvas-box",style:{"--react-paint-canvas-cursor":f?"grabbing":P.outOfView?"default":P.mode==="resize"?"pointer":m.type!=="selection"&&m.type!=="move"?"crosshair":P.mode==="translate"?"move":P.mode==="rotate"||m.type==="move"||H?"grab":"default"},children:h.jsxs("div",{className:"react-paint-canvas-container","data-grow":e,children:[h.jsx("canvas",{className:Gn,ref:X,"data-grow":e,width:z.width,height:z.height,onContextMenu:j,tabIndex:M}),S&&h.jsx("canvas",{className:_n,ref:$,width:z.width,height:z.height,"data-grow":e,onContextMenu:j}),C&&g.mode==="textedition"&&U(i)[0]?.type==="text"&&h.jsx(ni,{disabled:!V.features.edition,shape:U(i)[0],defaultValue:g.defaultValue,updateValue:T,saveShapes:p,settings:V})]})})}),Ys="ArrowUp",Xs="ArrowDown",$s="ArrowLeft",Us="ArrowRight",ii="Delete",oi="Backspace",ri="Escape",qs="Shift",Gs="Alt",_s="Option",jt=" ",li="z",ci="Z",di="y",ui="Y",hi="+",pi="-",gi="0",Ks="copy",Js="paste",fi=({isInsideComponent:e,isInsideCanvas:t,selectedShape:n,isEditingText:s,settings:a,setSelectedShape:i,setActiveTool:c,setCanvasZoom:r,resetZoom:o,setSelectionMode:l,setSelectionFrame:d,removeShape:u,pasteShapes:p,updateShapes:m,backwardShape:v,forwardShape:f,setShiftPressed:Q,setAltPressed:k,setIsSpacePressed:b})=>{const[x,g]=y.useState(void 0);return y.useEffect(()=>{const w=C=>{n&&(s||(C.preventDefault(),g({...n})))},L=C=>{x&&(s||(C.preventDefault(),p(((Z,A)=>U(Z).map(H=>({...Hs(H,20,20,A),id:le(`${H.type}_`)})))(x,a))))},R=C=>{switch(C.key){case qs:Q(!1);break;case Gs:case _s:k(!1);break;case jt:b(!1)}},V=C=>{if(C.metaKey||C.ctrlKey){if(C.key===ci||C.key===li)return C.preventDefault(),C.stopPropagation(),void(C.shiftKey?f():v());if(!ts()&&(C.key===ui||C.key===di))return C.preventDefault(),C.stopPropagation(),void f();if(C.key===hi)return C.preventDefault(),C.stopPropagation(),void r("zoom");if(C.key===pi)return C.preventDefault(),C.stopPropagation(),void r("unzoom");if(C.key===gi)return C.preventDefault(),C.stopPropagation(),void o()}if(C.key===qs)return C.preventDefault(),C.stopPropagation(),void Q(!0);if(C.key===jt&&t)return C.preventDefault(),C.stopPropagation(),void b(!0);if(C.key===Gs||C.key===_s)return C.preventDefault(),C.stopPropagation(),void k(!0);if(!n)return;if(C.key===ri)return i(void 0),c(De),l({mode:"default"}),void d(void 0);if(s)return;const Z={[$s]:[a.gridGap?-a.gridGap:-1,0],[Us]:[a.gridGap?a.gridGap:1,0],[Xs]:[0,a.gridGap?a.gridGap:1],[Ys]:[0,a.gridGap?-a.gridGap:-1]};switch(C.key){case $s:case Us:case Xs:case Ys:C.preventDefault(),C.stopPropagation(),m(zs(Z[C.key],n,[0,0],a,!0));break;case ii:case oi:C.preventDefault(),C.stopPropagation(),u(U(n))}};if(e)return document.addEventListener("keydown",V),document.addEventListener("keyup",R),document.addEventListener(Ks,w),document.addEventListener(Js,L),()=>{document.removeEventListener("keydown",V),document.removeEventListener("keyup",R),document.removeEventListener(Ks,w),document.removeEventListener(Js,L)}},[e,t,x,s,n,a,m,u,i,p,v,f,Q,k,c,l,d,r,o,b]),{}},vi=({isLoading:e=!1})=>{const[t,n]=y.useState("hidden");return y.useEffect(()=>{if(!e){n("fadeOut");const s=setTimeout(()=>n("hidden"),300);return()=>{clearTimeout(s)}}n("visible")},[e]),t==="hidden"?null:h.jsx("div",{className:"react-paint-editor-loading","data-loading":t,style:{"--react-paint-editor-loading-zindex":pa,"--react-paint-editor-loading-transition-duration":"300ms"},children:h.jsxs("div",{className:"react-paint-editor-loader",children:[h.jsx("div",{}),h.jsx("div",{}),h.jsx("div",{}),h.jsx("div",{})]})})},mi="infos",yi=4e3,Si=({type:e,text:t,duration:n})=>{const[s,a]=y.useState(!1);return y.useEffect(()=>{const i=setTimeout(()=>{a(!0)},100),c=setTimeout(()=>{a(!1)},n-500-100);return()=>{clearTimeout(i),clearTimeout(c)}},[n]),h.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+s,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:t})},xi=({snackbarList:e})=>h.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":ga},children:e.map(t=>h.jsx(Si,{...t},t.id))}),Qi=y.forwardRef((e,t)=>{const{hidden:n=!1,disabled:s=!1,selected:a=!1,icon:i,children:c,className:r="",title:o,onClick:l,...d}=e,u=s?-1:0,p=y.useRef(null);return y.useImperativeHandle(t,()=>p.current),h.jsxs("label",{className:`react-paint-editor-button ${r}`,title:o,onClick:l,"data-disabled":+s,"data-selected":+a,"data-hidden":+n,tabIndex:u,onKeyDown:m=>{m.key===jt&&(m.preventDefault(),m.stopPropagation())},onKeyUp:m=>{m.preventDefault(),m.stopPropagation(),m.key===jt&&p.current?.click()},children:[h.jsx("input",{ref:p,disabled:s,...d}),h.jsxs("span",{className:"react-paint-editor-button-content",children:[c&&h.jsx("span",{className:"react-paint-editor-button-children",children:c}),i&&h.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:i}})]})]})}),G=y.forwardRef((e,t)=>{if(e.type==="file"||e.type==="color")return h.jsx(Qi,{...e,ref:t});const{hidden:n=!1,disabled:s=!1,selected:a=!1,icon:i,children:c,type:r="button",className:o="",...l}=e;return h.jsx("button",{className:`react-paint-editor-button ${o}`,ref:t,disabled:s,"data-disabled":+s,"data-selected":+a,"data-hidden":+n,type:r,...l,children:h.jsxs("span",{className:"react-paint-editor-button-content",children:[c&&h.jsx("span",{className:"react-paint-editor-button-children",children:c}),i&&h.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:i}})]})})}),Ue=({children:e,title:t="",className:n="",position:s="bottom",fitContainer:a=!1,alignment:i="center",style:c,...r})=>h.jsxs("div",{className:`react-paint-editor-panel ${n}`,"data-fitcontainer":a,"data-position":s,"data-alignment":i,style:{...c,"--react-paint-editor-panel-zindex":zn},...r,children:[t&&h.jsx("h3",{className:"react-paint-editor-panel-title",children:t}),e]}),bi=e=>{switch(e){case"brush":return xn;case"line":return Cn;case"polygon":return Wt;case"curve":return Mn;case"rect":case"square":return Dt;case"circle":case"ellipse":return It;case"text":return wn;case"picture":return Nt;case"group":return'<svg><path d="M3.333 17.5V16.667H7.5V17.5ZM3.333 14.167V13.333H9.167V14.167ZM3.333 10.833V10H10.833V10.833ZM3.333 7.5V6.667H12.5V7.5ZM3.333 4.167V3.333H13.333V4.167ZM3.333 0.833V0H16.667V0.833Z"/></svg>';case"triangle":return""}},wi=({disabled:e=!1,shape:t,selected:n,layoutDragging:s,toggleShapeVisibility:a,toggleShapeLock:i,setLayoutDragging:c,handleRemove:r,handleSelect:o,onMoveShapes:l})=>{const d=y.useRef(null),{isOver:u}=(({disabled:p=!1,ref:m,shape:v,layoutDragging:f,setLayoutDragging:Q,handleSelect:k,onMoveShapes:b})=>{const[x,g]=y.useState(!1);return y.useEffect(()=>{f||g(!1)},[f]),y.useEffect(()=>{const w=m.current;if(!w)return;const L=()=>{Q(void 0)},R=H=>(H.preventDefault&&H.preventDefault(),!1),V=H=>{k([v]),H.dataTransfer&&(H.dataTransfer.effectAllowed="move",H.dataTransfer.setData("draggableShapeId",v.id),Q(v.id))},C=()=>{f!==v.id&&g(!0)},Z=()=>{g(!1)},A=H=>(H.stopPropagation(),H.dataTransfer&&b(H.dataTransfer.getData("draggableShapeId"),v.id),!1);return p||(w.addEventListener("dragstart",V),w.addEventListener("dragend",L),w.addEventListener("dragover",R),w.addEventListener("dragenter",C),w.addEventListener("dragleave",Z),w.addEventListener("drop",A)),()=>{p||(w.removeEventListener("dragstart",V),w.removeEventListener("dragend",L),w.removeEventListener("dragover",R),w.removeEventListener("dragenter",C),w.removeEventListener("dragleave",Z),w.removeEventListener("drop",A))}},[p,m,v,Q,k,b,f]),{isOver:x}})({disabled:e,ref:d,shape:t,layoutDragging:s,setLayoutDragging:c,handleSelect:o,onMoveShapes:l});return h.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(s===t.id),"data-is-over":+u,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),o([t]))},"data-selected":+n,ref:d,tabIndex:-1,children:[h.jsx("span",{dangerouslySetInnerHTML:{__html:bi(t.type)}}),h.jsx("span",{children:t.id}),h.jsx("div",{className:"react-paint-editor-layouts-separator"}),h.jsx(G,{className:"react-paint-editor-layouts-visible-button",title:t.visible?"Hide":"Show","data-visible":t.visible!==!1,disabled:e,selected:n,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),a([t]))},icon:t.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>'}),h.jsx(G,{className:"react-paint-editor-layouts-locked-button",title:t.locked?"Locked":"Unlocked","data-locked":!!t.locked,disabled:e,selected:n,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),i([t]))},icon:t.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>'}),h.jsx(G,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),r([t]))},icon:Qn})]})},Ci=({gridFormat:e,setGridFormat:t,settings:n,shapes:s,removeShape:a,toggleShapeVisibility:i,toggleShapeLock:c,selectedShapes:r,moveShapes:o,selectShapes:l,isLayoutPanelShown:d})=>{const[u,p]=y.useState(void 0),m=!n.features.edition;return d?h.jsx(Ue,{alignment:"right",className:"react-paint-editor-layouts-panel",children:h.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:h.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[h.jsxs("div",{className:"react-paint-editor-layouts-row",children:[h.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),h.jsx(G,{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:m,onClick:()=>t("none")}),["small","medium","large"].map(v=>h.jsx(G,{className:"react-paint-editor-layouts-grid-button",selected:e===v,disabled:m,onClick:()=>t(v),children:v.charAt(0).toUpperCase()},v))]}),h.jsx("hr",{}),h.jsx("div",{className:"react-paint-editor-layouts",children:s.length===0?h.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):s.map(v=>h.jsx(wi,{shape:v,disabled:m,layoutDragging:u,setLayoutDragging:p,selected:U(r).some(f=>f.id===v.id)??!1,handleSelect:l,handleRemove:a,onMoveShapes:o,toggleShapeVisibility:i,toggleShapeLock:c},v.id))})]})})}):null},Lt=({children:e,onClose:t,position:n="center",title:s,className:a=""})=>h.jsxs("div",{className:"react-paint-editor-modal","data-position":n,style:{"--react-paint-editor-modal-zindex":zn},role:"dialog","aria-modal":"true","aria-labelledby":s,children:[h.jsx("div",{className:"react-paint-editor-modal-mask",onClick:t}),h.jsx("div",{className:`react-paint-editor-modal-panel ${a}`,children:e})]}),Vt=({selectedSettings:e,setSelectedSettings:t,title:n="Choisissez une couleur",mode:s="fill",disabled:a=!1,values:i,field:c,value:r="",valueChanged:o})=>{const[l]=y.useState(le("settings_")),d=e===l;return i.length?h.jsxs(h.Fragment,{children:[h.jsx(G,{selected:d,title:n,disabled:a,onClick:()=>{t(u=>u===l?void 0:l)},icon:r==="transparent"?s==="fill"?Vn:Ln:void 0,children:r!=="transparent"&&h.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":s,style:{"--react-paint-editor-colorfield-color-value":r}})}),d&&h.jsx(Ue,{title:n,alignment:"left",children:h.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[i.map(u=>h.jsx(G,{title:u,selected:u===r,color:u,icon:u==="transparent"?s==="fill"?Vn:Ln:void 0,onClick:()=>{o(c,u)},children:u!=="transparent"&&h.jsx("div",{className:"react-paint-editor-colorfield-color",color:u,"data-mode":s,style:{"--react-paint-editor-colorfield-color-value":u}})},u)),h.jsx(G,{type:"color",title:"Custom color",selected:r!==""&&!i.includes(r),value:r,onChange:u=>{const p=+u.target.value;o(c,Number.isNaN(p)?u.target.value:p)},children:h.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:h.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},Mi=({disabled:e=!1,selectedShape:t,removeShape:n})=>h.jsx(G,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{n(U(t))},icon:Qn}),Zt=({CustomOption:e,selectedSettings:t,setSelectedSettings:n,title:s="Choisissez l'option",disabled:a=!1,field:i,icon:c,values:r,defaultValue:o,valueChanged:l})=>{const[d]=y.useState(le("settings_")),u=t===d;return r.length?h.jsxs(h.Fragment,{children:[h.jsx(G,{selected:u,title:s,icon:c,disabled:a,onClick:()=>{n(p=>p===d?void 0:d)}}),u&&h.jsx(Ue,{title:s,alignment:"left",fitContainer:!0,children:h.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:r.map(p=>h.jsx(G,{title:`${p}`,onClick:()=>(m=>{l(i,m)})(p),selected:o===p,style:{"--react-paint-editor-button-padding":"16px"},children:h.jsx(e,{children:p})},p))})})]}):null},ki=({children:e})=>h.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),ea=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?h.jsx(Zt,{selectedSettings:e,setSelectedSettings:t,CustomOption:ki,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:n,field:"fontFamily",values:s,defaultValue:a,valueChanged:i}):null,Pi=({disabled:e,toggleLayoutPanel:t})=>h.jsx(G,{title:"Toggle layers panel",disabled:e,onClick:t,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"}),ji=({children:e})=>h.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[h.jsx("span",{className:"react-paint-editor-linearrow-left"}),h.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),ta=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?h.jsx(Zt,{selectedSettings:e,setSelectedSettings:t,CustomOption:ji,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:n,field:"lineArrow",values:s,defaultValue:a,valueChanged:i}):null,Li=({children:e})=>h.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{})]}),na=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?h.jsx(Zt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Li,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:n,field:"lineDash",values:s,defaultValue:a,valueChanged:i}):null,Ht=({selectedSettings:e,setSelectedSettings:t,title:n="Choisissez l'intervalle",icon:s,disabled:a=!1,field:i,value:c,min:r=1,max:o=20,step:l=1,unity:d="",valueChanged:u,saveShapes:p})=>{const m=c===void 0,v=m?"N/A":`${Math.round(c)}${d}`,[f]=y.useState(le("settings_")),Q=((b,x=500)=>{const g=y.useRef(null),w=y.useCallback((...L)=>{g.current&&clearTimeout(g.current),g.current=setTimeout(()=>b(...L),x)},[b,x]);return y.useEffect(()=>()=>{g.current&&clearTimeout(g.current)},[]),w})(p),k=e===f;return r===o?null:h.jsxs(h.Fragment,{children:[h.jsx(G,{selected:k,title:n,disabled:a,icon:s,onClick:()=>{t(b=>b===f?void 0:f)}}),k&&h.jsx(Ue,{title:n,alignment:"left",fitContainer:!0,children:h.jsx("div",{children:h.jsxs("label",{className:"react-paint-editor-rangefield",children:[h.jsx("input",{type:"range",min:r,max:o,step:l,value:c??(o+r)/2,"data-indeterminate":+m,onChange:b=>{const x=+b.target.value,g=Number.isNaN(x)?b.target.value:x;u(i,g,!1),Q()}}),h.jsx("span",{children:v})]})})})]})},Vi=({children:e})=>h.jsx("span",{children:e===0?"Non":"Oui"}),Zi=[0,1],sa=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,defaultValue:s,valueChanged:a})=>h.jsx(Zt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Vi,title:"Fermer les points",icon:Wt,disabled:n,field:"closedPoints",values:Zi,defaultValue:s,valueChanged:a}),Hi=({disabled:e=!1,className:t,toggleZoomPanel:n})=>h.jsx(G,{title:"Toggle zoom panel",disabled:e,onClick:n,icon:Zn,className:t?` ${t}`:""}),zt=({setSelectedSettings:e,disabled:t=!1,field:n,icon:s,values:a,value:i=!1,valueChanged:c})=>{const[r]=y.useState(le("settings_"));return a.length!==2?null:h.jsx(G,{onClick:()=>{e(o=>o===r?void 0:r),c(n,!i)},selected:i,disabled:t,icon:s})},un=({activeTool:e,selectedShape:t,selectedShapeTool:n,disabled:s,selectedSettings:a,setSelectedSettings:i,saveShapes:c,handleShapeStyleChange:r,handleShapeFontFamilyChange:o})=>t?n&&h.jsxs(h.Fragment,{children:["strokeColor"in n.settings&&!n.settings.strokeColor.hidden&&h.jsx(Vt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:s,field:"strokeColor",value:t.style?.strokeColor,valueChanged:r,values:n.settings.strokeColor.values}),"fillColor"in n.settings&&!n.settings.fillColor.hidden&&h.jsx(Vt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:s,field:"fillColor",value:t.style?.fillColor,valueChanged:r,values:n.settings.fillColor.values}),"lineWidth"in n.settings&&!n.settings.lineWidth.hidden&&h.jsx(Ht,{saveShapes:c,selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",icon:jn,disabled:s,field:"lineWidth",value:t.style?.lineWidth,valueChanged:r,unity:"px",min:n.settings.lineWidth.min,max:n.settings.lineWidth.max,step:n.settings.lineWidth.step}),"lineDash"in n.settings&&!n.settings.lineDash.hidden&&h.jsx(na,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:t.style?.lineDash,valueChanged:r,values:n.settings.lineDash.values}),"lineArrow"in n.settings&&!n.settings.lineArrow.hidden&&h.jsx(ta,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:t.style?.lineArrow,valueChanged:r,values:n.settings.lineArrow.values}),"closedPoints"in n.settings&&!n.settings.closedPoints.hidden&&h.jsx(sa,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:r,defaultValue:t.style?.closedPoints}),"fontFamily"in n.settings&&!n.settings.fontFamily.hidden&&h.jsx(ea,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:o,values:n.settings.fontFamily.values,defaultValue:t.style?.fontFamily}),"fontBold"in n.settings&&!n.settings.fontBold.hidden&&h.jsx(zt,{setSelectedSettings:i,disabled:s,field:"fontBold",icon:kn,valueChanged:o,values:n.settings.fontBold.values,value:t.style?.fontBold}),"fontItalic"in n.settings&&!n.settings.fontItalic.hidden&&h.jsx(zt,{setSelectedSettings:i,disabled:s,field:"fontItalic",icon:Pn,valueChanged:o,values:n.settings.fontItalic.values,value:t.style?.fontItalic}),"opacity"in n.settings&&!n.settings.opacity.hidden&&h.jsx(Ht,{saveShapes:c,selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:bn,min:n.settings.opacity.min,max:n.settings.opacity.max,step:n.settings.opacity.step,unity:"%",disabled:s,field:"opacity",value:t.style?.opacity,valueChanged:r})]}):"settings"in e?h.jsxs(h.Fragment,{children:["strokeColor"in e.settings&&!e.settings.strokeColor.hidden&&h.jsx(Vt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:s,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:r,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&!e.settings.fillColor.hidden&&h.jsx(Vt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:s,field:"fillColor",value:e.settings.fillColor.default,valueChanged:r,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&!e.settings.lineWidth.hidden&&h.jsx(Ht,{saveShapes:c,selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",disabled:s,field:"lineWidth",icon:jn,value:e.settings.lineWidth.default,valueChanged:r,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&!e.settings.lineDash.hidden&&h.jsx(na,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:e.settings.lineDash.default,valueChanged:r,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&!e.settings.lineArrow.hidden&&h.jsx(ta,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:e.settings.lineArrow.default,valueChanged:r,values:e.settings.lineArrow.values}),"closedPoints"in e.settings&&!e.settings.closedPoints.hidden&&h.jsx(sa,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:r,defaultValue:e.settings?.closedPoints.default}),"fontFamily"in e.settings&&!e.settings.fontFamily.hidden&&h.jsx(ea,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:o,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&!e.settings.fontBold.hidden&&h.jsx(zt,{setSelectedSettings:i,disabled:s,field:"fontBold",icon:kn,valueChanged:o,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&!e.settings.fontItalic.hidden&&h.jsx(zt,{setSelectedSettings:i,disabled:s,field:"fontItalic",icon:Pn,valueChanged:o,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&!e.settings.opacity.hidden&&h.jsx(Ht,{saveShapes:c,selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:bn,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:"%",disabled:s,field:"opacity",value:e.settings.opacity.default,valueChanged:r})]}):null,zi=({width:e,availableTools:t,updateToolSettings:n,layersManipulation:s=!1,toggleLayoutPanel:a,activeTool:i,saveShapes:c,selectedShape:r,canvas:o,settings:l,updateShape:d,removeShape:u,isZoomPanelShown:p,setIsZoomPanelShown:m})=>{const[v,f]=y.useState(void 0),[Q,k]=y.useState(!1),b=l.size==="infinite"||l.features.zoom,x=!l.features.edition,g=()=>{k(Z=>!Z)},w=((Z,A)=>{const H=U(Z).map(D=>A.find(I=>I.id===D?.toolId)||A.find(I=>I.type===D?.type)).filter(D=>D!==void 0);if(!H.length)return;if(H.length===1)return H[0];const B=H.slice(1).reduce((D,I)=>{const X={};for(const $ in I.settings){if(D[$]===void 0||I.settings[$]?.hidden||D[$]?.hidden)continue;const z=D[$],S=I.settings[$],M={};"min"in S&&"min"in z&&S.min===z.min&&"max"in S&&"max"in z&&S.max===z.max&&"step"in S&&"step"in z&&S.step===z.step&&(M.min=S.min,M.max=S.max,M.step=S.step),"values"in S&&"values"in z&&S.values?.join(",")===z.values?.join(",")&&(M.values=S.values),(Object.keys(M).length>0||$==="closedPoints")&&(X[$]=M)}return X},H[0].settings);return{id:H.map(D=>D.id).join("-"),icon:"",label:"group",type:"group",settings:B}})(r,t),L=(w?Object.keys(w.settings).length+1:"settings"in i?Object.keys(i.settings).length:0)+ +s+ +b,R=e<40*L,V=(Z,A,H=!0)=>{if(U(r).length){const B=U(r).map(D=>Ee(Qe(["style",Z],A,D),l));d(B,H),w&&n(w.id,Z,A)}else n(i.id,Z,A)},C=(Z,A)=>{if(U(r).length){const H=U(r).map(B=>{if(B.type!=="text")return B;const D=o?.getContext("2d");if(!D)return B;const I=Qe(["style",Z],A,B),X=Pt(D,I.value,I.width,I.style?.fontBold??!1,I.style?.fontItalic??!1,I.style?.fontFamily);return Ee({...I,fontSize:X,height:X*I.value.length},l)});d(H,!0),w&&n(w.id,Z,A)}else n(i.id,Z,A)};return h.jsxs(h.Fragment,{children:[h.jsxs("div",{className:"react-paint-editor-settings-bar",children:[h.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[b&&h.jsx(Hi,{className:p?"react-paint-editor-bar-zoom-button-opened":void 0,toggleZoomPanel:()=>{m(Z=>!Z)}}),R&&L>2&&h.jsx(G,{disabled:x,onClick:g,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?w&&h.jsxs(h.Fragment,{children:[!R&&h.jsx(un,{saveShapes:c,activeTool:i,selectedShape:r,selectedShapeTool:w,disabled:x,selectedSettings:v,setSelectedSettings:f,handleShapeStyleChange:V,handleShapeFontFamilyChange:C}),i.type==="selection"&&h.jsx(Mi,{disabled:x,selectedShape:r,removeShape:u})]}):!R&&h.jsx(un,{saveShapes:c,activeTool:i,selectedShape:r,selectedShapeTool:w,disabled:x,selectedSettings:v,setSelectedSettings:f,handleShapeStyleChange:V,handleShapeFontFamilyChange:C})]}),h.jsx("div",{className:"react-paint-editor-settings-separator"}),s&&h.jsx(Pi,{disabled:x,toggleLayoutPanel:a})]}),Q&&h.jsx(Lt,{className:"react-paint-editor-settings-modal",onClose:g,position:"bottom",title:"Settings",children:h.jsx(un,{saveShapes:c,activeTool:i,selectedShape:r,selectedShapeTool:w,disabled:x,selectedSettings:v,setSelectedSettings:f,handleShapeStyleChange:V,handleShapeFontFamilyChange:C})})]})},aa=({disabled:e=!1,withText:t=!1,loadFile:n,type:s,img:a,accept:i})=>{const c=y.useRef(null);return h.jsx(G,{ref:c,type:"file",onClick:r=>{r.stopPropagation(),c.current&&(c.current.value="")},onChange:r=>{const o=r.target.files?.item(0);o&&n(o)},accept:i,title:s.label??s.type,icon:a,disabled:e,children:t?s.label:void 0})},Ce=({type:e,img:t,isActive:n,withText:s=!1,disabled:a=!1,setActive:i})=>h.jsx(G,{disabled:a,selected:n,onClick:()=>{i(e)},title:e.label??e.type,icon:t,children:s?e.label:void 0}),Ti=({activeTool:e,withActionsInMenu:t,hasActionToUndo:n=!1,hasActionToRedo:s=!1,hasActionToClear:a=!1,undoAction:i,redoAction:c,clearCanvas:r,alignment:o,group:l,vertical:d=!1,disabled:u=!1,withLoadAndSave:p,withExport:m,addPicture:v,loadFile:f,togglePictureUrlModal:Q,saveFile:k,toggleExportModal:b,withUploadPicture:x,withUrlPicture:g})=>{const[w,L]=y.useState(!1),[,R]=y.useTransition(),V=l?.tools?.some(Z=>Z===e.type),C=(V?e.icon:l.img)??l.title;return y.useEffect(()=>{if(!w)return;const Z=()=>{L(!1)};return document.addEventListener("click",Z),()=>{document.removeEventListener("click",Z)}},[w]),t||x||g||p||m?h.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[h.jsx(G,{selected:V,title:l.title,disabled:u,onClick:()=>{R(()=>{L(!0)})},icon:C}),w&&h.jsx(Ue,{alignment:o,position:"top",children:h.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+d,children:[t&&h.jsxs(h.Fragment,{children:[h.jsx(Ce,{withText:!0,type:et,disabled:u||!n,img:et.icon,isActive:e.id===et.id,setActive:i}),h.jsx(Ce,{withText:!0,type:tt,disabled:u||!s,img:tt.icon,isActive:e.id===tt.id,setActive:c}),h.jsx(Ce,{withText:!0,type:nt,disabled:u||!a,img:nt.icon,isActive:e.id===nt.id,setActive:r}),(x||g||p)&&h.jsx("hr",{})]}),x&&h.jsx(aa,{withText:!0,type:Yn,disabled:u,loadFile:async Z=>{L(!1),await v(Z)},img:Yn.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml, image/webp"}),g&&h.jsx(G,{disabled:u,selected:!1,onClick:Q,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"}),(x||g)&&p&&h.jsx("hr",{}),p&&h.jsxs(h.Fragment,{children:[h.jsx(aa,{withText:!0,type:Bn,disabled:u,loadFile:Z=>{L(!1),f(Z)},img:Bn.icon,accept:"application/JSON"}),h.jsx(Ce,{withText:!0,disabled:u,type:Bt,img:Bt.icon,isActive:e.id===Bt.id,setActive:k})]}),m&&h.jsx(Ce,{withText:!0,disabled:u,type:Ot,img:Ot.icon,isActive:e.id===Ot.id,setActive:b})]})})]}):null},Ai=({togglePictureUrlModal:e,addPicture:t})=>{const n=y.useRef(null);return y.useEffect(()=>{n.current&&n.current.focus()},[]),h.jsx(Lt,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,title:"Add picture from URL",children:h.jsxs("form",{onSubmit:async s=>{s.preventDefault();const a=n.current?.value;a&&(await t(a),e())},children:[h.jsxs("label",{children:["URL ",h.jsx("input",{type:"text",ref:n})]}),h.jsx(G,{onClick:e,children:"Annuler"}),h.jsx(G,{type:"submit",selected:!0,children:"Ajouter"})]})})},ia="Choose export settings",Ei=({toggleExportModal:e,exportCanvasInFile:t})=>{const n=async s=>{t(s),e()};return h.jsxs(Lt,{className:"react-paint-editor-toolbox-export-modal",onClose:e,title:ia,children:[h.jsx("h3",{children:ia}),h.jsx("hr",{}),h.jsx(G,{onClick:()=>n("currentZoom"),children:"Exporter la vue actuelle"}),h.jsx(G,{onClick:()=>n("defaultView"),children:"Exporter le canevas par défaut"}),h.jsx(G,{onClick:()=>n("fitToShapes"),children:"Exporter le dessin entier"}),h.jsx(G,{selected:!0,onClick:e,children:"Annuler"})]})},Ri=({activeTool:e,alignment:t,group:n,disabled:s=!1,setActiveToolFromId:a})=>{const i=y.useRef(null),[c,r]=y.useState(!1),[,o]=y.useTransition(),[l,d]=y.useState(void 0),u=v=>{d(v),a(v.id)};if(y.useEffect(()=>{if(!c)return;const v=f=>{!((k,b)=>!!(k.target instanceof Node&&b)&&b.contains(k.target))(f,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)}},[c]),"type"in n)return h.jsx(Ce,{disabled:s,type:n,img:n.icon,isActive:e.id===n.id,setActive:u});if(!n.toolsType.length)return null;if(n.toolsType?.length===1)return h.jsx(Ce,{disabled:s,type:n.toolsType[0],img:n.toolsType[0].icon,isActive:e.id===n.toolsType[0].id,setActive:u});const p=n?.toolsType.find(v=>v.type===e.type)!==void 0,m=(l?l.icon:n.toolsType?.[0]?.icon)??n.title;return h.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[h.jsx(G,{selected:p,title:n.title,disabled:s,onClick:()=>{l?a(l.id):n.toolsType?.[0]&&u(n.toolsType[0]),o(()=>{r(!0)})},icon:m}),c&&h.jsx(Ue,{alignment:t,position:"top",children:h.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+n.vertical,ref:i,children:n.toolsType.map(v=>h.jsx(Ce,{disabled:s,type:v,img:v.icon,isActive:e.id===v.id,setActive:u},v.id))})})]})},Di=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],Ii=({settings:e,width:t,activeTool:n,hasActionToUndo:s=!1,hasActionToRedo:a=!1,hasActionToClear:i=!1,withLoadAndSave:c,withExport:r,clearCanvas:o,setActiveTool:l,undoAction:d,redoAction:u,addPicture:p,loadFile:m,saveFile:v,exportCanvasInFile:f,availableTools:Q,withUrlPicture:k,withUploadPicture:b})=>{const x=((z,S)=>{const M=S.flatMap(P=>{if(typeof P!="object")return z.filter(j=>j.type===P);const T=z.filter(j=>P.toolsType.includes(j.type));return T?{...P,toolsType:T}:null});return ln(M)})(Q,Di),g=!e.features.edition,w=t<40*(6+x.length),L=t<40*(3+x.length),[R,V]=y.useState(!1),[C,Z]=y.useState(!1),[A,H]=y.useState(!1),B=()=>{V(z=>!z)},D=()=>{H(z=>!z)},I=z=>{l(z),V(!1)},X=z=>{I(Q.find(S=>S.id===z)??n)},$=Q.find(z=>z.type===n.type)!==void 0;return h.jsxs(h.Fragment,{children:[h.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",style:{"--react-paint-editor-toolbar-minwidth":"160px"},children:[h.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[h.jsx(Ce,{type:De,disabled:g,img:De.icon,isActive:n.id===De.id,setActive:I}),(e.size==="infinite"||e.features.zoom)&&h.jsx(Ce,{type:Yt,disabled:g,img:Yt.icon,isActive:n.id===Yt.id,setActive:I}),L?h.jsx(G,{disabled:g,onClick:B,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:$}):x.map(z=>h.jsx(Ri,{disabled:g,activeTool:n,group:z,setActiveToolFromId:X},"id"in z?z.id:z.title))]}),!w&&h.jsxs(h.Fragment,{children:[h.jsx(Ce,{type:et,disabled:g||!s,img:et.icon,isActive:n.id===et.id,setActive:d}),h.jsx(Ce,{type:tt,disabled:g||!a,img:tt.icon,isActive:n.id===tt.id,setActive:u}),h.jsx(Ce,{type:nt,disabled:g||!i,img:nt.icon,isActive:n.id===nt.id,setActive:o})]}),h.jsx(Ti,{withActionsInMenu:w,disabled:g,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:n,addPicture:p,loadFile:m,saveFile:v,togglePictureUrlModal:()=>{Z(!0)},toggleExportModal:D,withUploadPicture:b,withUrlPicture:k,withLoadAndSave:c,withExport:r,hasActionToUndo:s,hasActionToRedo:a,hasActionToClear:i,undoAction:d,redoAction:u,clearCanvas:o})]}),R&&h.jsx(Lt,{className:"react-paint-editor-toolbar-modal",onClose:B,title:"Outils",children:Q.map(z=>z.type==="picture"?null:h.jsx(Ce,{disabled:g,type:z,img:z.icon,withText:!1,isActive:n.id===z.id,setActive:I},z.id))}),C&&h.jsx(Ai,{togglePictureUrlModal:()=>{Z(z=>!z)},addPicture:p}),A&&h.jsx(Ei,{toggleExportModal:D,exportCanvasInFile:f})]})},Tt={none:0,small:10,medium:20,large:40},Wi={toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8"},Ni=()=>{const e=y.useRef([]),[t,n]=y.useState([]);return y.useEffect(()=>()=>{for(const s of e.current)clearTimeout(s)},[]),{snackbarList:t,addSnackbar:({type:s=mi,duration:a=yi,text:i})=>{const c={id:le("snackbar_"),duration:a,type:s,text:i};n(r=>[...r,c]),e.current=[...e.current,setTimeout(()=>{return r=c.id,void n(o=>o.filter(l=>l.id!==r));var r},a)]}}};Re.Canvas=({options:e,className:t,style:n,canvasProps:s})=>{const{shapesRef:a,selectedShape:i,selectionFrame:c,hoveredShape:r,addShape:o,setSelectedShape:l,setSelectionFrame:d,refreshSelectedShapes:u,refreshHoveredShape:p,duplicateShapes:m,removeShape:v,updateShape:f,backwardShape:Q,forwardShape:k,saveShapes:b,refs:x,width:g,height:w,settings:L,setCanvasSize:R,setCanvasOffset:V,selectShapes:C,activeTool:Z,setActiveTool:A,isInsideComponent:H,isInsideCanvas:B,isEditMode:D,canvas:{withSkeleton:I,withFrameSelection:X,canGrow:$,canShrink:z},canvasOffsetStartData:S,setCanvasOffsetStartData:M,selectionMode:P,setSelectionMode:T,setCanvasMoveAcceleration:j,isShiftPressed:O,isAltPressed:W,isSpacePressed:F,setShiftPressed:E,setAltPressed:_,setCanvasZoom:ie,resetZoom:se,setIsSpacePressed:q}=s,{canvasBackgroundColor:N,canvasSelectionColor:de,canvasSelectionWidth:te}={...ma,...e},fe=y.useRef(null),ve=y.useCallback(K=>{o(K),C(K)},[o,C]),me=y.useCallback(K=>{R({realWidth:g,realHeight:w,width:K,height:w*K/g,scaleRatio:K/g})},[g,w,R]);return fi({isInsideComponent:H,isInsideCanvas:B,isEditingText:P.mode==="textedition",settings:L,selectedShape:i,setSelectedShape:l,removeShape:v,pasteShapes:ve,updateShapes:f,backwardShape:Q,forwardShape:k,setShiftPressed:E,setAltPressed:_,setActiveTool:A,setSelectionMode:T,setSelectionFrame:d,setCanvasZoom:ie,resetZoom:se,setIsSpacePressed:q}),(({onResized:K,element:ue})=>{y.useEffect(()=>{const Y=ue.current;if(!Y)return;const ee=new ResizeObserver(Me=>{const ke=Me?.[0]?.borderBoxSize?.[0],{width:ae,height:Le}=ke?{width:ke.inlineSize,height:ke.blockSize}:Me?.[0]?.contentRect??{};ae!==void 0&&Le!==void 0&&K(ae,Le)});return ee.observe(Y),()=>{ee.unobserve(Y)}},[ue,K])})({element:fe,onResized:me}),h.jsx("div",{ref:fe,className:"react-paint-app-row"+(t?` ${t}`:""),"data-grow":$,"data-shrink":z,style:{"--react-paint-app-row-width":L.canvasSize.width,"--react-paint-app-canvaswidth":g,"--react-paint-app-canvasheight":w,"--react-paint-app-row-aspectratio":`calc(${L.canvasSize.width} / ${L.canvasSize.height})`,"--react-paint-app-canvas-bg":N,...n},children:h.jsx(ai,{duplicateShapes:m,isSpacePressed:F,ref:x.canvas,canGrow:$,isInsideComponent:H,activeTool:Z,setActiveTool:A,canvasOffsetStartData:S,setCanvasOffsetStartData:M,shapes:a.current,addShapes:o,updateSingleShape:f,selectedShape:i,selectionFrame:c,setSelectedShape:l,setSelectionFrame:d,hoveredShape:r,refreshHoveredShape:p,refreshSelectedShapes:u,settings:L,setCanvasOffset:V,saveShapes:b,selectionMode:P,setSelectionMode:T,setCanvasMoveAcceleration:j,selectionColor:de,selectionWidth:te,isEditMode:D,isShiftPressed:O,isAltPressed:W,withFrameSelection:X,withSkeleton:I})})},Re.Editor=({editorProps:e,className:t,style:n,options:s,children:a})=>{const{shapesRef:i,addPictureShape:c,moveShapes:r,toggleShapeVisibility:o,toggleShapeLock:l,canGoBackward:d,canGoForward:u,canClear:p,selectedShape:m,removeShape:v,updateShape:f,backwardShape:Q,forwardShape:k,refs:b,width:x,height:g,selectTool:w,selectShapes:L,activeTool:R,setActiveTool:V,setAvailableTools:C,isEditMode:Z,availableTools:A,gridGap:H,setGridGap:B,loadFile:D,exportPicture:I,exportData:X,clearCanvas:$,settings:z,setCanvasZoom:S,saveShapes:M,canvas:{canGrow:P,layersManipulation:T,withExport:j,withLoadAndSave:O,withUploadPicture:W,withUrlPicture:F}}=e,{toolbarBackgroundColor:E,dividerColor:_,fontRadius:ie,fontDisabledColor:se,fontDisabledBackgroundColor:q,fontColor:N,fontBackgroundColor:de,fontSelectedColor:te,fontSelectedBackgroundColor:fe,fontHoverColor:ve,fontHoverBackgroundColor:me}={...Wi,...s},K=z.size==="infinite"||z.features.zoom,[ue,Y]=y.useState(!1),[ee,Me]=y.useState(!1),[ke,ae]=y.useState(K),Le=K&&ke,qe=H>=Tt.large?"large":H>=Tt.medium?"medium":H>=Tt.small?"small":"none",{snackbarList:hn,addSnackbar:Ze}=Ni(),pn=y.useCallback((he,pe,vt)=>{C(We=>We.map(ct=>ct.id===he?Qe(["settings",pe,"default"],vt,ct):ct)),V(We=>We.id===he?Qe(["settings",pe,"default"],vt,We):We)},[V,C]),gn=y.useCallback(he=>{Y(!0);try{I(he)}catch(pe){pe instanceof Error&&Ze({type:"error",text:`L'export a échoué : ${pe.message}`}),console.warn(pe)}finally{Y(!1)}},[I,Ze]),Ge=y.useCallback(()=>{Y(!0);try{X(),Y(!1)}catch(he){he instanceof Error&&Ze({type:"error",text:"L'enregistrement a échoué"}),console.warn(he)}finally{Y(!1)}},[X,Ze]),fn=y.useCallback(async he=>{Y(!0);try{await D(he),Ze({type:"success",text:"Fichier chargé !"})}catch(pe){pe instanceof Error&&Ze({type:"error",text:"Le chargement a échoué"}),console.warn(pe)}finally{Y(!1)}},[D,Ze]),vn=y.useCallback(async he=>{Y(!0);try{const pe=await c(he,x,g);L([pe])}catch(pe){pe instanceof Error&&Ze({type:"error",text:"Le chargement a échoué"}),console.warn(pe)}finally{Y(!1)}},[c,L,Ze,x,g]),mn=`${t?`${t} `:""}${ee?"react-paint-editor-layout-opened ":""}react-paint-editor-app`;return h.jsxs("div",{ref:b.setEditor,className:mn,style:{"--react-paint-editor-app-maxWidth":P?"100%":`${x}px`,"--react-paint-editor-app-toolbar-bg":E,"--react-paint-editor-app-divider-color":_,"--react-paint-editor-app-font-radius":ie,"--react-paint-editor-app-font-disabled-color":se,"--react-paint-editor-app-font-disabled-bg":q,"--react-paint-editor-app-font-color":N,"--react-paint-editor-app-font-bg":de,"--react-paint-editor-app-font-selected-color":te,"--react-paint-editor-app-font-selected-bg":fe,"--react-paint-editor-app-font-hover-color":ve,"--react-paint-editor-app-font-hover-bg":me,...n},children:[Z&&h.jsx(Ii,{settings:z,width:z.canvasSize.width,activeTool:R,clearCanvas:$,setActiveTool:w,exportCanvasInFile:gn,saveFile:Ge,loadFile:fn,addPicture:vn,hasActionToUndo:d,hasActionToRedo:u,hasActionToClear:p,undoAction:Q,redoAction:k,availableTools:A,withExport:j,withLoadAndSave:O,withUploadPicture:W,withUrlPicture:F}),a,Z&&T&&h.jsx(Ci,{gridFormat:qe,setGridFormat:he=>{B(Tt[he])},shapes:i.current,moveShapes:r,selectedShapes:m,removeShape:v,selectShapes:L,toggleShapeVisibility:o,toggleShapeLock:l,isLayoutPanelShown:ee,settings:z}),Le&&h.jsxs(Ue,{alignment:"left",className:"react-paint-editor-layouts-panel","data-edit":+Z,children:[h.jsx(G,{className:"react-paint-editor-zoom-button",icon:'<svg viewBox="0 -960 960 960" width="24px"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z"/></svg>',onClick:()=>S("unzoom")}),h.jsxs(G,{className:"react-paint-editor-zoom-button react-paint-editor-zoom-button-value",onClick:()=>S("default"),children:[Math.round(100*z.canvasZoom),"%"]}),h.jsx(G,{className:"react-paint-editor-zoom-button",icon:Zn,onClick:()=>S("zoom")})]}),Z&&h.jsxs(h.Fragment,{children:[h.jsx(zi,{saveShapes:M,setCanvasZoom:S,width:z.canvasSize.width,activeTool:R,availableTools:A,selectedShape:m,settings:z,removeShape:v,updateShape:f,canvas:b.canvas.current,layersManipulation:T,toggleLayoutPanel:()=>{Me(he=>!he)},isZoomPanelShown:Le,setIsZoomPanelShown:ae,updateToolSettings:pn}),h.jsx(vi,{isLoading:ue}),h.jsx(xi,{snackbarList:hn})]})]})},Re.useReactPaint=({width:e=1e3,height:t=600,shapes:n,mode:s="editor",disabled:a=!1,options:i=Kn}={})=>{const{layersManipulation:c,brushAlgo:r,isBrushShapeDoneOnMouseUp:o,debug:l,grid:d,canGrow:u,canShrink:p,withExport:m,withLoadAndSave:v,withUploadPicture:f,withUrlPicture:Q,withSkeleton:k,withFrameSelection:b,clearCallback:x,availableTools:g,canvasSelectionPadding:w,size:L,canZoom:R}={...Kn,...i},V=s!=="viewer",C=y.useRef(null),Z=y.useRef(null),A=y.useRef(!1),H=y.useCallback(J=>{C.current=J},[]),[B,D]=y.useState(void 0),[I,X]=y.useState(De),[$,z]=y.useState({mode:"default"}),[S,M]=y.useState(d),[P,T]=y.useState({realWidth:e,realHeight:t,width:e,height:t,scaleRatio:1}),j=R==="always"&&!a,{canvasTransformation:O,setCanvasTransformation:W,setCanvasOffset:F,setCanvasZoom:E,resetZoom:_}=ei({canvasSize:P,size:L,canvasElt:Z.current,zoomEnabled:j}),{offset:ie,zoom:se}=O,q=y.useMemo(()=>({brushAlgo:r,isBrushShapeDoneOnMouseUp:o,debug:l,canvasSize:{realWidth:P.realWidth,realHeight:P.realHeight,width:P.width,height:P.height,scaleRatioWithNoZoom:P.scaleRatio,scaleRatio:P.scaleRatio*se},size:L,canvasOffset:ie,canvasZoom:se,gridGap:S,selectionPadding:w,features:{edition:V&&!a,zoom:j}}),[w,S,r,o,l,se,ie,P,L,a,j,V]),[N,de]=y.useState(Os(g,f||Q)),{isInsideComponent:te,isInsideCanvas:fe}=(({settings:J,componentRef:oe,canvasRef:Pe})=>{const[Ne,Fe]=y.useState(!1),[Ke,Je]=y.useState(!1),ye=!J.features.edition&&!J.features.zoom;return y.useEffect(()=>{if(!ye){const je=()=>Fe(!0),Et=()=>Fe(!1),Oe=()=>Je(!0),Rt=()=>Je(!1);return oe.current?.addEventListener("focusin",je),oe.current?.addEventListener("focusout",Et),Pe.current?.addEventListener("focusin",Oe),Pe.current?.addEventListener("focusout",Rt),()=>{oe.current?.removeEventListener("focusin",je),oe.current?.removeEventListener("focusout",Et),Pe.current?.removeEventListener("focusin",Oe),Pe.current?.removeEventListener("focusout",Rt)}}Fe(!1),Je(!1)},[ye,oe,Pe]),{isInsideComponent:Ne,isInsideCanvas:Ke}})({settings:q,componentRef:C,canvasRef:Z}),[ve,me]=y.useState(!1),[K,ue]=y.useState(!1),[Y,ee]=y.useState(!1),{registerEvent:Me,unregisterEvent:ke,shapesRef:ae,selectedShape:Le,selectionFrame:qe,hoveredShape:hn,addShapes:Ze,addPictureShape:pn,moveShapes:gn,setSelectedShape:Ge,setSelectionFrame:fn,refreshSelectedShapes:vn,refreshHoveredShape:mn,duplicateShapes:he,removeShape:pe,updateShape:vt,backwardShape:We,forwardShape:ct,clearShapes:oa,saveShapes:ra,toggleShapeVisibility:Fi,toggleShapeLock:Oi,canGoBackward:Bi,canGoForward:Yi,canClear:Xi}=Ka(q,e,t,ve),yn=y.useCallback(J=>{Ge(void 0),X(J)},[Ge]),[dt,la]=y.useState([0,0]),ca=$.mode==="preview";y.useEffect(()=>{if(ca)return()=>z(J=>J.mode==="preview"?{mode:"default"}:J)},[Le?.id,ca]);const da=$.mode==="selectionFrame";y.useEffect(()=>{if(da)return()=>la([0,0])},[da]),y.useEffect(()=>{if(dt[0]!==0||dt[1]!==0){const J=setInterval(()=>{W(({offset:oe,zoom:Pe})=>{const Ne=[oe[0]-dt[0],oe[1]-dt[1]];return sn({zoom:Pe,size:L,canvasSize:P,newOffset:Ne})})},20);return()=>clearInterval(J)}},[dt[0],dt[1],W,L,P]);const At=y.useCallback((J,oe)=>{oa(J,oe),yn(De),W({offset:[0,0],zoom:1})},[yn,oa,W]),ua=y.useCallback(J=>{Ge(oe=>(oe?.id!==J.map(Pe=>Pe.id).join("-")&&X(De),ce(J,q)))},[Ge,q]),$i=y.useCallback(()=>{const J=Ga(ae.current,e,t);if(!J)throw new Error("L'encodage a échoué");Ds(J,"drawing.json")},[ae,e,t]),Ui=y.useCallback(J=>{const oe=Is({shapes:ae.current,settings:q,view:J});Ds(oe,"drawing.png")},[ae,q]),qi=y.useCallback(J=>Is({shapes:ae.current,settings:q,view:J}),[ae,q]),Gi=y.useCallback(()=>dn(ae.current,e,t),[ae,e,t]),_e=y.useCallback(async(J,oe)=>{const Pe=await(async(Ne,Fe)=>{if(!Ne)return[];const Ke=[],Je=ln(Ne.map(ye=>{if(!ye||!qn.includes(ye.type))return null;if(ye.type==="picture"){const je=new Image,Et=new Promise((Oe,Rt)=>{je.onload=()=>{URL.revokeObjectURL(je.src),Oe()},je.onerror=()=>{Rt(new Error("Some images could not be loaded"))}});if(Ke.push(Et),ye.src.startsWith("http"))Rs(ye.src).then(Oe=>{je.src=Oe}).catch(()=>{je.src=""});else if(ye.src.includes("<svg")){const Oe=new Blob([ye.src],{type:"image/svg+xml"});je.src=URL.createObjectURL(Oe)}else je.src=ye.src;return Ws({...ye,img:je},Fe)}return Ws(ye,Fe)}));return await Promise.all(Ke),Je})(J,q);At(Pe,oe)},[At,q]),Sn=y.useRef(_e);Sn.current=_e;const _i=y.useCallback((J=[],oe=!0)=>{Sn.current?.(J,{clearHistory:oe,source:"remote"})},[]);y.useEffect(()=>{A.current||(A.current=!0,n&&Sn.current?.(n,{clearHistory:!0,source:"remote"}))},[n]);const Ki=y.useCallback(async J=>{const oe=await(async Pe=>new Promise((Ne,Fe)=>{const Ke=new FileReader;Ke.onload=Je=>{const ye=Je.target?.result;if(!ye)return Fe("Impossible de récupérer les données du fichier");const je=JSON.parse(ye);Ne(je)},Ke.readAsText(Pe)}))(J);await _e(oe.shapes??[],{clearHistory:!0,source:"remote"})},[_e]),Ji=y.useCallback(()=>{typeof x!="string"?_e(x(),{clearHistory:!1,source:"user"}):x==="defaultShapes"&&n!==void 0?_e(n,{clearHistory:!1,source:"user"}):At([],{clearHistory:!1,source:"user"})},[At,_e,n,x]);y.useEffect(()=>{de(Os(g,f||Q))},[g,f,Q]);const ha={canvas:Z,editor:C,setEditor:H};return{annotationsProps:{style:{userSelect:"none",touchAction:"none",transformOrigin:"left top",transform:"scale(var(--react-paint-canvas-zoom)) translate(calc(var(--react-paint-canvas-offset-x) * 100% / var(--react-paint-app-canvaswidth)), calc(var(--react-paint-canvas-offset-y) * 100% / var(--react-paint-app-canvasheight)))","--react-paint-canvas-zoom":q.canvasZoom,"--react-paint-canvas-offset-x":q.canvasOffset[0],"--react-paint-canvas-offset-y":q.canvasOffset[1],"--react-paint-app-canvaswidth":e,"--react-paint-app-canvasheight":t}},editorProps:{shapesRef:ae,addPictureShape:pn,moveShapes:gn,toggleShapeVisibility:Fi,toggleShapeLock:Oi,canGoBackward:Bi,canGoForward:Yi,canClear:Xi,selectedShape:Le,saveShapes:ra,removeShape:pe,updateShape:vt,backwardShape:We,forwardShape:ct,refs:ha,width:e,height:t,selectTool:yn,selectShapes:ua,activeTool:I,setActiveTool:X,setAvailableTools:de,isEditMode:V,availableTools:N,gridGap:S,setGridGap:M,loadFile:Ki,exportPicture:Ui,exportData:$i,clearCanvas:Ji,settings:q,setCanvasZoom:E,resetZoom:_,canvas:{canGrow:u,canShrink:p,layersManipulation:c,withExport:m,withLoadAndSave:v,withUploadPicture:f,withUrlPicture:Q}},canvasProps:{shapesRef:ae,selectedShape:Le,selectionFrame:qe,hoveredShape:hn,addShape:Ze,setSelectedShape:Ge,setSelectionFrame:fn,refreshSelectedShapes:vn,refreshHoveredShape:mn,removeShape:pe,updateShape:vt,duplicateShapes:he,backwardShape:We,forwardShape:ct,saveShapes:ra,refs:ha,width:e,height:t,settings:q,setCanvasSize:T,setCanvasOffset:F,setCanvasZoom:E,resetZoom:_,selectShapes:ua,activeTool:I,setActiveTool:X,isInsideComponent:te,isInsideCanvas:fe,isEditMode:V,canvas:{withSkeleton:k,withFrameSelection:b,canGrow:u,canShrink:p},canvasOffsetStartData:B,setCanvasOffsetStartData:D,selectionMode:$,setSelectionMode:z,setCanvasMoveAcceleration:la,isShiftPressed:ve,isAltPressed:K,isSpacePressed:Y,setShiftPressed:me,setAltPressed:ue,setIsSpacePressed:ee},registerEvent:Me,unregisterEvent:ke,resetCanvas:_i,resetZoom:_,getCurrentImage:qi,getCurrentData:Gi,setCanvasOffset:F,setCanvasZoom:E}},Object.defineProperty(Re,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(De,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],y):y((De=typeof globalThis<"u"?globalThis:De||self)["react-paint"]={},De.React,De.jsxRuntime)})(this,function(De,y,h){"use strict";const Qn='<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>',Rt='<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>',It='<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>',Wt='<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>',bn='<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>',wn='<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>',Nt='<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>',Cn='<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>',Mn='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',kn='<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>',Pn='<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>',Ln='<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>',jn='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',Vn='<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>',Zn='<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>',Hn='<svg viewBox="0 -960 960 960" width="24px"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>',Se=["transparent","black","white","red","green","blue","yellow"],Ie=[0,1,2],zn=[[1,0],[1,2],[4,6]],dt="serif",ga=2,Tn=3,fa=4,re="react-paint-",An={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:Ie,default:0}},Ft={type:"picture",id:`${re}picture`,icon:Nt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},En={type:"brush",id:`${re}brush`,icon:Qn,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:Ie,default:0}}},Dn={type:"line",id:`${re}line`,icon:Mn,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:Ie,default:0},lineArrow:{values:[0,1,2,3],default:0}}},Rn={type:"polygon",id:`${re}polygon`,icon:Wt,label:"Polygone",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:Ie,default:0},closedPoints:{default:0}}},In={type:"curve",id:`${re}curve`,icon:kn,label:"Courbe",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:Ie,default:0},closedPoints:{default:0}}},Wn={type:"rect",id:`${re}rect`,icon:Rt,label:"Rectangle",settings:An},Nn={type:"square",id:`${re}square`,icon:Rt,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:Ie,default:0}}},Fn={type:"circle",id:`${re}circle`,icon:It,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:Ie,default:0}}},Bn={type:"ellipse",id:`${re}ellipse`,icon:It,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:Ie,default:0}}},On={type:"text",id:`${re}text`,icon:Cn,label:"Texte",settings:{strokeColor:{values:Se,default:"black"},opacity:{min:0,max:100,step:1,default:100},fontFamily:{values:["arial","serif","monospace"],default:dt},fontBold:{values:[!1,!0],default:!1},fontItalic:{values:[!1,!0],default:!1}}},Re={id:`${re}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"},et={id:`${re}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"},tt={id:`${re}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"},nt={id:`${re}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:`${re}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"},Yn={id:`${re}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"},Ot={id:`${re}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"},Yt={id:`${re}move`,type:"move",icon:'<svg viewBox="0 -960 960 960"><path d="M412-48q-21.95 0-40.98-9Q352-66 338-83L48-434l27-28q17-17 41.5-20.5T162-473l126 74v-381q0-15.3 10.29-25.65Q308.58-816 323.79-816t25.71 10.35Q360-795.3 360-780v300h80v-396q0-15.3 10.29-25.65Q460.58-912 475.79-912t25.71 10.35Q512-891.3 512-876v396h80v-348q0-15.3 10.29-25.65Q612.58-864 627.79-864t25.71 10.35Q664-843.3 664-828v348h80v-252q0-15.3 10.29-25.65Q764.58-768 779.79-768t25.71 10.35Q816-747.3 816-732v540q0 60-42 102T672-48H412Z"/></svg>',label:"Move"},Xn={id:`${re}upload-picture`,type:"uploadpicture",icon:Nt,label:"Upload picture"},$n=2,Un="blue",Oe=14,qn=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],Gn=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle","group"],va=["rect","square","circle","ellipse","picture","text","triangle","brush","group"],ma=["square","circle","picture","text"],_n="react-paint-canvas-drawcanvas",Kn="react-paint-canvas-selectioncanvas",Jn={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[En,Dn,Rn,In,Wn,Nn,Fn,Bn,Ft,On],clearCallback:"empty",brushAlgo:"simple",isBrushShapeDoneOnMouseUp:!0,withFrameSelection:!0,withSkeleton:!0,canvasSelectionPadding:0,size:"fixed",canZoom:"never",debug:!1},ya={canvasBackgroundColor:"white",canvasSelectionColor:Un,canvasSelectionWidth:$n},es=300,Xt=(e,t)=>{const n={...t};for(const s of e)Array.isArray(s)?s[1].includes(n[s[0]])&&delete n[s[0]]:delete n[s];return n},Qe=(e,t,n)=>{const s=Array.isArray(n)?[...n]:{...n},a=Array.isArray(e)?e:typeof e=="string"?e.split("."):[e];return a.reduce((o,c,r)=>(o[c]=$t(o[c])?{...o[c]}:Array.isArray(o[c])?[...o[c]]:o[c]===void 0||o[c]===null?{}:o[c],r===a.length-1&&(o[c]=t),o[c]),s),s},$t=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,He=(e,t,n)=>{if(!$t(t)||!$t(n))return n;const s={...t};for(const a in n)n.hasOwnProperty(a)&&(s.hasOwnProperty(a)?s[a]=e(s[a],n[a],a)??He(e,s[a],n[a]):s[a]=n[a]);return s},ts=(e,t)=>{if(e===t)return!0;if(typeof e!="object"||typeof t!="object"||e===null||t===null)return!1;const n=Object.keys(e),s=Object.keys(t);if(n.length!==s.length)return!1;for(const a of n)if(!s.includes(a)||!ts(e[a],t[a]))return!1;return!0},Ut={},le=(e="")=>(Ut[e]||(Ut[e]=0),`${e}${++Ut[e]}`),ze=(e,t,n)=>Math.max(t,Math.min(e,n)),ns=()=>typeof navigator<"u"&&navigator.userAgent.includes("Macintosh"),ss=e=>{e.reset(),e.lineCap="round",e.lineJoin="round"},xe=(e,t={})=>{const{lineCap:n="round",fillColor:s="transparent",opacity:a=100,strokeColor:o=Un,lineWidth:c=$n,lineDash:r=0,shadowColor:i="transparent",shadowBlur:l=0}=t;e.lineCap=n,e.globalAlpha=a/100,e.fillStyle=s,e.strokeStyle=o,e.lineWidth=c,e.setLineDash(r===0?[]:[zn[r][0]*c,zn[r][1]*c]),e.shadowColor=i,e.shadowBlur=l},st=(e,t,n,s)=>{e.save(),e.scale(t.canvasSize.scaleRatio,t.canvasSize.scaleRatio),e.translate(t.canvasOffset[0],t.canvasOffset[1]),n&&s&&(e.translate(s[0],s[1]),e.rotate(n),e.translate(-s[0],-s[1]))},qt=e=>180*e/Math.PI,as=(e,t)=>{const n=t.x-Math.min(Math.max(t.x,e.x),e.x+e.width),s=t.y-Math.min(Math.max(t.y,e.y),e.y+e.height);return Math.sqrt(n*n+s*s)<=t.radius},ne=({origin:e=[0,0],point:t,rotation:n=0})=>{if(n===0)return t;const s=[t[0]-e[0],t[1]-e[1]],a=s[1]*Math.cos(n)-s[0]*Math.sin(n);return[s[1]*Math.sin(n)+s[0]*Math.cos(n)+e[0],a+e[1]]},os=e=>(e+2*Math.PI)%(2*Math.PI),is=({targetVector:[e,t],radian:n=!0,originVector:s})=>{const a=os(Math.atan2(t[1]-e[1],t[0]-e[0]));if(s){const[o,c]=s,r=Math.atan2(c[1]-o[1],c[0]-o[0]),i=os(a-r);return n?i:qt(i)}return n?a:qt(a)},rs=(e,t)=>Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2),Ye=(e,t,n)=>{const s=ne({origin:t.computed.center,point:e.computed.center,rotation:t.rotation??0}),a=(s[0]-(e.computed.borders.width/2-n.settings.selectionPadding)-(n.originalBorders.x+n.settings.selectionPadding))*n.widthMultiplier,o=(s[1]-(e.computed.borders.height/2-n.settings.selectionPadding)-(n.originalBorders.y+n.settings.selectionPadding))*n.heightMultiplier;return{x:n.newBorderX+n.settings.selectionPadding+(n.isXinverted?n.newBorderWidth-2*n.settings.selectionPadding-(e.computed.borders.width-2*n.settings.selectionPadding||1)*n.widthMultiplier-a:a),y:n.newBorderY+n.settings.selectionPadding+(n.isYinverted?n.newBorderHeight-2*n.settings.selectionPadding-(e.computed.borders.height-2*n.settings.selectionPadding||1)*n.heightMultiplier-o:o)}},Xe=(e,t,n,s,a)=>ne({origin:e.groupCenter,point:[t+s/2,n+a/2],rotation:-e.rotation}),Gt=(e,{selectionPadding:t})=>{const n=e.points.flat(),s=Math.min(...n.map(i=>i[0])),a=Math.min(...n.map(i=>i[1])),o=n.map(i=>Ve(i,s,a,e.scaleX,e.scaleY)),c=Math.max(...o.map(i=>i[0]))+t,r=Math.max(...o.map(i=>i[1]))+t;return{x:s-t,width:c-s+t,y:a-t,height:r-a+t}},at=(e,t)=>{const n=Qa(e,t),s=((a,o)=>Te(a,Gt,o))(e,t);return{...e,path:n,selection:ot(n,s,t),computed:s}},Sa=at,be=(e,t=2)=>Math.round(e*10**t)/10**t,Ve=(e,t,n,s=1,a=1)=>[t+(e[0]-t)*s,n+(e[1]-n)*a],ge=(e,t,n=0)=>{if(!t.gridGap)return be(e);const s=e+n,a=s>=0?t.gridGap:-t.gridGap;return s+a/2-(s+a/2)%a-n},xa=(e,t,n,s,a,o,c)=>{if(s.mode==="translate")return ce(Ts(n,s.originalShape,s.cursorStartPosition,a,o),a);if(s.mode==="rotate"){const r=s.originalShape.computed.center[0]-s.cursorStartPosition[0],i=s.originalShape.computed.center[1]-s.cursorStartPosition[1],l=s.originalShape.computed.center[0]-n[0],u=s.originalShape.computed.center[1]-n[1],d=((m,v,g)=>v.gridGap||g?m+Math.PI/18/2-(m+Math.PI/18/2)%(Math.PI/18):be(m,3))(Math.atan2(u,l)-Math.atan2(i,r),a,o),p=Y(s.originalShape).map(m=>Ee($a(m,d,s.originalShape.computed.center),a));return ce(p,a)}return s.mode==="resize"?ce(Ua(e,n,s.originalShape,s,a,o,c),a):s.mode==="brush"?ce(Y(t).map(r=>((i,l,u)=>{const d={...i,points:Qe(i.points.length-1,[...i.points[i.points.length-1],[Math.round(l[0]),Math.round(l[1])]],i.points)};return at(d,u)})(r,n,a)),a):t},ut=e=>{const t=new Path2D;return t.rect(e.x,e.y,e.width,e.height),t},mt=e=>{const t=new Path2D;return t.arc(e.x,e.y,e.radius,0,2*Math.PI),t},yt=e=>{const t=new Path2D;return t.moveTo(...e.points[0]),t.lineTo(...e.points[1]),t},Qa=(e,{brushAlgo:t})=>{const n=new Path2D;if(e.points.length<1)return n;const s=e.points.flat(),a=s.map(i=>i[0]),o=s.map(i=>i[1]),c=Math.min(...a),r=Math.min(...o);for(const i of e.points)if(i.length)if(i.length===1)n.rect(...Ve(i[0],c,r,e.scaleX,e.scaleY),1,1);else if(n.moveTo(...Ve(i[0],c,r,e.scaleX,e.scaleY)),t==="quadratic"){for(let l=0;l<i.slice(1).length-2;l++){const u=Ve(i[l],c,r,e.scaleX,e.scaleY),d=Ve(i[l+1],c,r,e.scaleX,e.scaleY),p=(u[0]+d[0])/2,m=(u[1]+d[1])/2;n.quadraticCurveTo(...u,p,m)}n.quadraticCurveTo(...Ve(i[i.length-2],c,r,e.scaleX,e.scaleY),...Ve(i[i.length-1],c,r,e.scaleX,e.scaleY))}else for(const l of i.slice(1))n.lineTo(...Ve(l,c,r,e.scaleX,e.scaleY));return n},ba=(e,t,n,s)=>{const a=w=>(1-w)**3*e[0]+3*(1-w)**2*w*t[0]+3*(1-w)*w**2*n[0]+w**3*s[0],o=w=>(1-w)**3*e[1]+3*(1-w)**2*w*t[1]+3*(1-w)*w**2*n[1]+w**3*s[1],c=(w,j,E)=>{const V=w-2*j+E,C=-2*w+2*j,Z=w;if(Math.abs(V)<1e-10){if(Math.abs(C)<1e-10)return[];const $=-Z/C;return $>0&&$<1?[$]:[]}const A=C*C-4*V*Z;if(A<0)return[];const H=Math.sqrt(A),O=(-C-H)/(2*V),D=(-C+H)/(2*V),I=[];return O>0&&O<1&&I.push(O),D>0&&D<1&&D!==O&&I.push(D),I},r=e[0],i=t[0],l=n[0],u=s[0],d=e[1],p=t[1],m=n[1],v=s[1],g=c(i-r,l-i,u-l),x=c(p-d,m-p,v-m);let M=Math.min(e[0],s[0]),b=Math.max(e[0],s[0]),Q=Math.min(e[1],s[1]),f=Math.max(e[1],s[1]);for(const w of g){const j=a(w);M=Math.min(M,j),b=Math.max(b,j)}for(const w of x){const j=o(w);Q=Math.min(Q,j),f=Math.max(f,j)}return{minX:M,maxX:b,minY:Q,maxY:f}},_t=(e,t)=>e.style?.closedPoints===1&&t.length>2?[t[t.length-2],...t,t[0],t[1]]:[t[0],...t,t[t.length-1]],Kt=(e,t,n,s)=>({cp1:[t[0]+(n[0]-e[0])/6,t[1]+(n[1]-e[1])/6],cp2:[n[0]-(s[0]-t[0])/6,n[1]-(s[1]-t[1])/6]}),ls=e=>{const t=new Path2D,n=e.tempPoint?[...e.points,e.tempPoint]:e.points;if(n.length<2)return t;t.moveTo(...n[0]);for(const s of n.slice(1))t.lineTo(...s);return n.length>2&&e.style?.closedPoints===1&&t.lineTo(...n[0]),t},wa=e=>{const t=new Path2D;return t.moveTo(...e.points[0]),t.lineTo(...e.points[1]),t.lineTo(...e.points[2]),t.lineTo(...e.points[0]),t},Ca=(e,t)=>({x:t.x-(e.style?.lineWidth??0)/2,y:t.y-(e.style?.lineWidth??0)/2,width:t.width+(e.style?.lineWidth??0),height:t.height+(e.style?.lineWidth??0)}),Te=(e,t,n,s=Ca)=>{const a=t(e,n),o=s(e,a,n),c=[a.x+a.width/2,a.y+a.height/2],r=((i,l,u=0)=>{if(u===0)return i;const d=[[i.x,i.y],[i.x+i.width,i.y],[i.x+i.width,i.y+i.height],[i.x,i.y+i.height]].map(v=>ne({point:v,origin:l,rotation:u})),p=Math.min(...d.map(v=>v[0])),m=Math.min(...d.map(v=>v[1]));return{x:p,y:m,width:Math.max(...d.map(v=>v[0]))-p,height:Math.max(...d.map(v=>v[1]))-m}})(o,c,e.rotation);return{borders:a,outerBorders:o,center:c,boundingBox:r}},ot=(e,t,n)=>{const{borders:s}=t;return{type:"rect",border:ut(s),shapePath:e,line:yt({points:[[s.x+s.width/2,s.y],[s.x+s.width/2,s.y-23/n.canvasSize.scaleRatio]]}),anchors:[mt({x:s.x+s.width/2,y:s.y-23/n.canvasSize.scaleRatio,radius:7/n.canvasSize.scaleRatio}),...qn.map(a=>mt({x:s.x+s.width*a[0],y:s.y+s.height*a[1],radius:7/n.canvasSize.scaleRatio}))]}},cs=({borderStart:e,borderSize:t,vector:n,settings:s,invertedAxe:a,anchor:o})=>{switch(o){case 0:{if(a){const r=Math.max(0,n-t)+2*s.selectionPadding;return[e+t-2*s.selectionPadding,r]}const c=Math.max(2*s.selectionPadding,t-n);return[e+t-c,c]}case .5:return[e,t];case 1:if(a){const c=Math.min(e,e+t+n);return[c,e-c+2*s.selectionPadding]}return[e,Math.max(2*s.selectionPadding,t+n)];default:return[0,0]}},Ma=({borderX:e,borderWidth:t,borderY:n,borderHeight:s,center:a,originalShape:o})=>{const c=[e+t/2-a[0],n+s/2-a[1]],[r,i]=ne({point:c,rotation:-(o.rotation??0)});return{borderX:be(e+r-c[0]),borderWidth:be(t),borderY:be(n+i-c[1]),borderHeight:be(s)}},ka=(e,t,n,s)=>{const a=t.x+t.width/2,o=t.y+t.height/2,c=n?2*e.borderWidth+t.width:Math.abs(t.width+2*(e.borderWidth-t.width)),r=s?2*e.borderHeight+t.height:Math.abs(t.height+2*(e.borderHeight-t.height));return{...e,borderHeight:r,borderWidth:c,borderX:a-c/2,borderY:o-r/2}},$e=(e,t,n,s,a=!1,o=!1)=>{const{center:c,borders:r}=t.computed,i=ne({origin:c,point:e,rotation:t.rotation}),l=n.anchor[0]===0&&i[0]>=r.x+r.width-s.selectionPadding||n.anchor[0]===1&&i[0]<=r.x+s.selectionPadding,u=n.anchor[1]===0&&i[1]>=r.y+r.height-s.selectionPadding||n.anchor[1]===1&&i[1]<=r.y+s.selectionPadding,d=[ge(i[0],s,n.anchor[0]===0&&!l||n.anchor[0]===1&&l?s.selectionPadding:-s.selectionPadding),ge(i[1],s,n.anchor[1]===0&&!u||n.anchor[1]===1&&u?s.selectionPadding:-s.selectionPadding)],p=s.gridGap?[n.anchor[0]===0?r.x:n.anchor[0]===.5?r.x+r.width/2:r.x+r.width,n.anchor[1]===0?r.y:n.anchor[1]===.5?r.y+r.height/2:r.y+r.height]:ne({origin:c,point:n.cursorStartPosition,rotation:t.rotation}),m=[d[0]-p[0],d[1]-p[1]],[v,g]=cs({borderStart:r.x,borderSize:r.width,vector:m[0],settings:s,invertedAxe:l,anchor:n.anchor[0]}),[x,M]=cs({borderStart:r.y,borderSize:r.height,vector:m[1],settings:s,invertedAxe:u,anchor:n.anchor[1]}),b=a?((Q,f,w,j,E,V,C,Z,A,H,O)=>{const{selectionPadding:D}=O,I="ratio"in A&&A.ratio?A.ratio:(Q.width-2*D||1)/(Q.height-2*D||1),$=(j-2*D)/(V-2*D);let U,z,S,k;return H.anchor[0]!==.5&&H.anchor[1]!==.5?$<I?(z=E,k=V,S=(V-2*D)*I+2*D,U=H.anchor[0]===0?C?Q.x+Q.width-2*D:Q.x+(Q.width-S):C?Q.x-S+2*D:Q.x):(U=w,S=j,k=(j-2*D)/I+2*D,z=H.anchor[1]===0?Z?Q.y+Q.height-2*D:Q.y+(Q.height-k):Z?Q.y-k+2*D:Q.y):H.anchor[0]!==.5?(U=w,S=j,k=(j-2*D)/I+2*D,z=Q.y+(Q.height-k)/2):(z=E,k=V,S=(V-2*D)*I+2*D,U=Q.x+(Q.width-S)/2),{borderX:U,borderWidth:S,borderY:z,borderHeight:k,center:f,originalShape:A}})(r,c,v,g,x,M,l,u,t,n,s):{borderX:v,borderWidth:g,borderY:x,borderHeight:M,center:c,originalShape:t};return{...Ma(o?ka(b,r,l,u):b),isXinverted:l,isYinverted:u}},St=(e,t)=>{const n=ut(e),s=((a,o)=>Te(a,Jt,o))(e,t);return{...e,path:n,computed:s,selection:ot(n,s,t)}},Pa=St,ds=(e,t,n,s=0,a=0)=>{const o={toolId:e.id,type:e.type,id:le(`${e.type}_`),x:t[0],y:t[1],width:s,height:a,style:{opacity:e.settings.opacity.default,fillColor:e.settings.fillColor.default,strokeColor:e.settings.strokeColor.default,lineWidth:e.settings.lineWidth.default,lineDash:e.settings.lineDash.default}};return St(o,n)},La=(e,t)=>{e.globalAlpha!==0&&(t.style?.fillColor!=="transparent"&&e.fill(t.path),t.style?.strokeColor!=="transparent"&&e.stroke(t.path))},Jt=(e,t)=>({x:e.x-t.selectionPadding,width:e.width+2*t.selectionPadding,y:e.y-t.selectionPadding,height:e.height+2*t.selectionPadding}),us=(e,t,n,[s,a]=[!1,!1])=>{const o=e[0]===.5?n.x+n.width/2:e[0]===0?n.x+(s?0:n.width):n.x+(s?n.width:0),c=e[1]===.5?n.y+n.height/2:e[1]===0?n.y+(a?0:n.height):n.y+(a?n.height:0);return en([o,c],n.rotation??0,t)},hs=(e,t,n,s,a,o,c,r="replace")=>{let i=!1;if(a){i=ht(e,a,n,s,!0,o?20:void 0);const u=((d,p,m)=>{if(d.mode==="translate")return{mode:"translate",cursorStartPosition:m,originalShape:p,hasBeenDuplicated:!1,dateStart:Date.now(),selectedShapesLengthAtMouseDown:Y(p).length};if(d.mode==="rotate"){const{center:v}=p.computed;return{mode:"rotate",cursorStartPosition:m,originalShape:p,center:[v[0],v[1]],selectedShapesLengthAtMouseDown:Y(p).length}}return d.mode==="resize"?{mode:"resize",cursorStartPosition:m,originalShape:p,anchor:d.anchor,selectedShapesLengthAtMouseDown:Y(p).length}:void 0})(i||{mode:"default"},a,n);if(u?.mode==="resize"||u?.mode==="rotate")return{shape:a,mode:u}}const l=t.find(u=>Y(a).find(d=>u.id===d?.id)?i&&ht(e,u,n,s,!0,o?20:void 0):!!ys(e,u,n,s))??(i?a:void 0);if(a&&a?.id===l?.id)return{shape:a,mode:{mode:"translate",cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:a,selectedShapesLengthAtMouseDown:Y(a).length}};if(l){if(r==="add"){const d=ce(gs(a,[l]),s);return{shape:d,mode:{mode:"translate",cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:d,selectedShapesLengthAtMouseDown:Y(a).length}}}if(r==="remove"){const d=ce(ja(a,l),s);return{shape:d,mode:{mode:"translate",cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:d,selectedShapesLengthAtMouseDown:Y(a).length}}}const u=Y(a).find(d=>d.id===l?.id)?a:ce([l],s);return{shape:u,mode:{mode:"translate",cursorStartPosition:n,hasBeenDuplicated:!1,dateStart:Date.now(),originalShape:u,selectedShapesLengthAtMouseDown:Y(a).length}}}return{shape:r!=="replace"?a:void 0,mode:{mode:c?"selectionFrame":"default"}}},ce=(e,t)=>{if(!e.length)return;if(e.length===1)return e[0];const n=e.some(c=>c.rotation!==e[0].rotation)?0:e[0]?.rotation??0,s=((c,r,i)=>{const l=c.map(f=>[[f.computed.borders.x+i.selectionPadding,f.computed.borders.y+i.selectionPadding],[f.computed.borders.x-i.selectionPadding+f.computed.borders.width,f.computed.borders.y+i.selectionPadding],[f.computed.borders.x-i.selectionPadding+f.computed.borders.width,f.computed.borders.y-i.selectionPadding+f.computed.borders.height],[f.computed.borders.x+i.selectionPadding,f.computed.borders.y-i.selectionPadding+f.computed.borders.height]].map(w=>{const j=ne({point:[w[0],w[1]],origin:f.computed.center,rotation:-(f.rotation??0)});return ne({point:[j[0],j[1]],origin:[0,0],rotation:r})})),u=Math.min(...l.flatMap(f=>[f[0][0],f[1][0],f[2][0],f[3][0]])),d=Math.min(...l.flatMap(f=>[f[0][1],f[1][1],f[2][1],f[3][1]])),p=Math.max(...l.flatMap(f=>[f[0][0],f[1][0],f[2][0],f[3][0]])),m=Math.max(...l.flatMap(f=>[f[0][1],f[1][1],f[2][1],f[3][1]])),v=[(u+p)/2,(d+m)/2],g=ne({point:v,origin:[0,0],rotation:-r}),x=[v[0]-g[0],v[1]-g[1]],M=be(u-x[0]),b=be(p-x[0]),Q=be(d-x[1]);return{width:b-M,height:be(m-x[1])-Q,x:M,y:Q}})(e,n,t),a=ds({id:"group_selection",type:"rect",settings:An},[s.x,s.y],t,s.width,s.height),o=e.slice(1).reduce((c,r)=>{const i=r.style??{},l={};for(const u in i)c[u]!==void 0&&i[u]!==void 0&&c[u]===i[u]&&(l[u]=c[u]);return l},e[0].style??{});return{id:e.map(c=>c.id).join("-"),type:"group",shapes:e,rotation:n,visible:!0,locked:!1,selection:a.selection,x:a.x,y:a.y,width:a.width,height:a.height,style:o,computed:a.computed,path:a.path}},ps=(e,t)=>n=>{if(!n)return;const s=n.type==="group"?n.shapes.map(a=>e(a,t)):[e(n,t)];return ce(s,t)},Y=e=>e?e.type==="group"?e.shapes:[e]:[],gs=(e,t)=>{const n=Y(e);return[...new Set([...n,...t])]},ja=(e,t)=>Y(e).filter(n=>n.id!==t.id),fs=e=>{const{clientX:t=0,clientY:n=0}="touches"in e&&e.touches[0]?e.touches[0]:"changedTouches"in e&&e.changedTouches[0]?e.changedTouches[0]:"clientX"in e?e:{};return{clientX:t,clientY:n}},vs=(e,t,n)=>{const{clientX:s,clientY:a}=fs(e),o=t.getBoundingClientRect();return[(s-o.left)/n.scaleRatio,(a-o.top)/n.scaleRatio]},it=(e,t,n)=>{const{clientX:s,clientY:a}=fs(e),o=t?.getBoundingClientRect()??{left:0,top:0,width:n.canvasSize.width,height:n.canvasSize.height};return[(s-o.left)*(n.canvasSize.width/o.width)/n.canvasSize.scaleRatio-n.canvasOffset[0],(a-o.top)*(n.canvasSize.height/o.height)/n.canvasSize.scaleRatio-n.canvasOffset[1]]},rt=e=>"touches"in e,Ae=(e,t,[n,s])=>ne({origin:[n,s],point:e,rotation:t}),en=(e,t,[n,s])=>ne({origin:[n,s],point:e,rotation:-t}),xt=(e,t,n)=>n?as(e,{x:t[0],y:t[1],radius:n}):((s,a)=>a[0]>=s.x&&a[0]<=s.x+s.width&&a[1]>=s.y&&a[1]<=s.y+s.height)(e,t),ht=(e,t,n,s,a=!1,o=0)=>{const c=Y(t).length>1?t:Y(t)[0];if(!c||c.locked)return!1;const{borders:r,center:i}=c.computed,l=Ae(n,c.rotation??0,i);if(a){const u=((d,p,m,v=0)=>{const{canvasSize:{scaleRatio:g}}=m,{borders:x}=d.computed;if(d.type==="line"||d.type==="polygon"||d.type==="curve"){for(let M=0;M<d.points.length;M++)if(xt({x:d.points[M][0]-7/g,y:d.points[M][1]-7/g,width:Oe/g,height:Oe/g},p,v))return{mode:"resize",anchor:M}}else{if(xt({x:x.x+x.width/2-7/g,y:x.y-Oe/g-16/g,width:Oe/g,height:Oe/g},p,v))return{mode:"rotate"};for(const M of qn)if(xt({x:x.x+x.width*M[0]-7/g,y:x.y+x.height*M[1]-7/g,width:Oe/g,height:Oe/g},p,v))return{mode:"resize",anchor:M}}return!1})(c,l,s,o);if(u)return u}return c.selection?.type==="line"?(e.lineWidth=(c.style?.lineWidth??0)+15/s.canvasZoom,!!(tn(c,!0)?e.isPointInPath(c.path,l[0],l[1]):e.isPointInStroke(c.path,l[0],l[1]))&&{mode:"translate"}):!!xt(r,l,15+o)&&{mode:"translate"}},ms=(e,t,n,s,a=50)=>{if(t.locked||t.points.length<2)return!1;const{center:o}=t.computed,c=Ae(n,t.rotation??0,o);e.lineWidth=(t.style?.lineWidth??0)+a/s.canvasZoom;const r=t.style?.closedPoints?[...t.points,t.points[0]]:t.points;for(let i=0;i<r.length-1;i++){const l=yt({points:[r[i],r[i+1]]});if(e.isPointInStroke(l,c[0],c[1]))return{lineIndex:i}}return!1},tn=(e,t=!1)=>!(!t||!["curve","polygon"].includes(e.type))||e.style?.fillColor&&e.style?.fillColor!=="transparent"||["picture","text"].includes(e.type),ys=(e,t,n,s)=>{if(t.locked)return!1;const{center:a}=t.computed,o=Ae(n,t.rotation??0,a);return e.lineWidth=(t.style?.lineWidth??0)+15/s.canvasZoom,!!(tn(t)?e.isPointInPath(t.path,o[0],o[1]):e.isPointInStroke(t.path,o[0],o[1]))&&{mode:"translate"}};function nn(e,t){const n=Math.max(e.x,t.x),s=Math.max(e.y,t.y),a=Math.min(e.x+(e.width||1),t.x+(t.width||1)),o=Math.min(e.y+(e.height||1),t.y+(t.height||1));if(n<a&&s<o)return{x:n,y:s,width:a-n,height:o-s}}const Ss=({ctx:e,path:t,rect:n,offset:s,center:a,rotation:o=0,checkFill:c})=>{for(let r=0;r<s;r+=s/2)for(let i=0;i<s;i+=s/2)for(let l=r+n.x;l<n.x+n.width;l+=s)for(let u=i+n.y;u<n.y+n.height;u+=s){const d=Ae([l,u],o,a);if(c?e.isPointInPath(t,d[0],d[1]):e.isPointInStroke(t,d[0],d[1]))return!0}return!1},sn=(e,t,n,s)=>({type:"line",border:ut(n.borders),shapePath:e,anchors:[...t.points.map(a=>mt({x:a[0],y:a[1],radius:7/s.canvasSize.scaleRatio}))]}),we=[.05,.1,.25,.5,1,2,4,8],an=({size:e,zoom:t,newOffset:[n,s],canvasSize:a})=>e==="infinite"?{zoom:t,offset:[n,s]}:t<1?{zoom:t,offset:[-(a.realWidth-a.realWidth/t)/2,-(a.realHeight-a.realHeight/t)/2]}:{zoom:t,offset:[ze(n,a.realWidth/t-a.realWidth,0),ze(s,a.realHeight/t-a.realHeight,0)]},on=({size:e,canvasSize:t,currentOffset:n,currentZoom:s,zoom:a,centerPoint:o})=>{const c=e==="fixed"&&a<1?[t.realWidth/2,t.realHeight/2]:o,r=n[0]-(c[0]/s-c[0]/a),i=n[1]-(c[1]/s-c[1]/a);return{offset:e==="infinite"?[r,i]:a<1?[-(t.realWidth-t.realWidth/a)/2,-(t.realHeight-t.realHeight/a)/2]:[ze(r,t.realWidth/a-t.realWidth,0),ze(i,t.realHeight/a-t.realHeight,0)],zoom:a}},xs=e=>{const{canvasSize:{width:t,height:n,scaleRatioWithNoZoom:s},canvasZoom:a,canvasOffset:o}=e;return{x:o[0]*a*s,y:o[1]*a*s,width:t*a,height:n*a}},Qs=(e,t)=>{const{canvasZoom:n,size:s}=t;if(s!=="fixed"||n>=1)return;const a=xs(t);e.beginPath(),e.rect(a.x,a.y,a.width,a.height),e.closePath(),e.clip()},pt=(e,t)=>t.size!=="fixed"||e[0]>0&&e[0]<t.canvasSize.realWidth&&e[1]>0&&e[1]<t.canvasSize.realHeight,Va=(e,t)=>({x:e.x-e.radius-t.selectionPadding,width:2*(e.radius+t.selectionPadding),y:e.y-e.radius-t.selectionPadding,height:2*(e.radius+t.selectionPadding)}),Qt=(e,t)=>{const n=mt(e),s=((a,o)=>Te(a,Va,o))(e,t);return{...e,path:n,selection:ot(n,s,t),computed:s}},Za=Qt,gt=(e,t)=>{const n=ls(e),s=((a,o)=>Te(a,bt,o))(e,t);return{...e,path:n,selection:sn(n,e,s,t),computed:s}},bs=gt,bt=(e,t)=>{const n=Math.min(...e.points.map(o=>o[0]))-t.selectionPadding,s=Math.max(...e.points.map(o=>o[0]))+t.selectionPadding,a=Math.min(...e.points.map(o=>o[1]))-t.selectionPadding;return{x:n,width:s-n,y:a,height:Math.max(...e.points.map(o=>o[1]))+t.selectionPadding-a}},Ha=(e,t,n,s)=>{if(t<0||t>e.points.length-1)return e;const a=[...e.points.slice(0,t+1),n,...e.points.slice(t+1)];return gt({...e,points:a},s)},ws=(e,t,n,s=!1)=>{const a=[ge(t[0],n),ge(t[1],n)],o=Ae(a,e.rotation??0,e.computed.center),c={...e,points:s?e.points:[...e.points,o],tempPoint:s?o:void 0};return gt(c,n)},za=(e,t,n)=>{const s=e.tempPoint?[...e.points,e.tempPoint]:e.points;if(s.length<2){const l=s[0]??[0,0],u=n.selectionPadding;return{x:l[0]-u,y:l[1]-u,width:2*u,height:2*u}}if(s.length<3)return bt({...e,points:s},n);const a=_t(e,s);let o=Number.POSITIVE_INFINITY,c=Number.NEGATIVE_INFINITY,r=Number.POSITIVE_INFINITY,i=Number.NEGATIVE_INFINITY;for(let l=1;l<a.length-2;l++){const u=a[l-1],d=a[l],p=a[l+1],m=a[l+2],{cp1:v,cp2:g}=Kt(u,d,p,m),x=ba(d,v,g,p);o=Math.min(o,x.minX),c=Math.max(c,x.maxX),r=Math.min(r,x.minY),i=Math.max(i,x.maxY)}return Jt({x:o,y:r,width:c-o,height:i-r},n)},ft=(e,t)=>{const n=(a=>{const o=new Path2D,c=a.tempPoint?[...a.points,a.tempPoint]:a.points;if(c.length<2)return o;if(c.length<3)return ls(a);const r=a.style?.closedPoints===1&&c.length>2;o.moveTo(...c[0]);const i=_t(a,c);for(let l=1;l<i.length-2;l++){const u=i[l-1],d=i[l],p=i[l+1],m=i[l+2],{cp1:v,cp2:g}=Kt(u,d,p,m);o.bezierCurveTo(v[0],v[1],g[0],g[1],p[0],p[1])}return r&&o.closePath(),o})(e),s=((a,o)=>Te(a,bt,o,za))(e,t);return{...e,path:n,selection:sn(n,e,s,t),computed:s}},Cs=ft,Ta=(e,t,n,s)=>{if(t<0||t>e.points.length-1)return e;const a=[...e.points.slice(0,t+1),n,...e.points.slice(t+1)];return ft({...e,points:a},s)},Ms=(e,t,n,s=!1)=>{const a=[ge(t[0],n),ge(t[1],n)],o=e.computed.center,c=Ae(a,e.rotation??0,o),r={...e,points:s?e.points:[...e.points,c],tempPoint:s?c:void 0};return ft(r,n)},Aa=(e,t)=>({x:e.x-e.radiusX-t.selectionPadding,width:2*(e.radiusX+t.selectionPadding),y:e.y-e.radiusY-t.selectionPadding,height:2*(e.radiusY+t.selectionPadding)}),wt=(e,t)=>{const n=(a=>{const o=new Path2D;return o.ellipse(a.x,a.y,a.radiusX,a.radiusY,0,0,2*Math.PI),o})(e),s=((a,o)=>Te(a,Aa,o))(e,t);return{...e,path:n,selection:ot(n,s,t),computed:s}},Ea=wt,Da=(e,t)=>Te(e,bt,t),ks=(e,t)=>((n,s)=>({...n,path:wa(n),computed:Da(n,s)}))({...e,id:le("triangle_"),type:"triangle"},t),Ra=(e,t)=>{e.globalAlpha!==0&&(t.style?.fillColor!=="transparent"&&e.fill(t.path),t.style?.strokeColor!=="transparent"&&e.stroke(t.path))},Ia=(e,t)=>({x:Math.min(e.points[0][0],e.points[1][0])-t.selectionPadding,width:Math.abs(e.points[0][0]-e.points[1][0])+2*t.selectionPadding,y:Math.min(e.points[0][1],e.points[1][1])-t.selectionPadding,height:Math.abs(e.points[0][1]-e.points[1][1])+2*t.selectionPadding}),Ct=(e,t)=>{const n=[];let s;if(e.style?.lineArrow===1||e.style?.lineArrow===2||e.style?.lineArrow===3){const o=Math.PI/2-is({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3||n.push(ks(Ps(e.points[0],o,e.style),t)),e.style?.lineArrow!==2&&e.style?.lineArrow!==3||n.push(ks(Ps(e.points[1],o+Math.PI,e.style),t));const c=(({line:r,size:i,direction:l})=>{const u=Math.PI/2-is({targetVector:[r.points[0],r.points[1]]}),d=[r.points[0][0]+(r.points[1][0]-r.points[0][0])/2,r.points[0][1]+(r.points[1][1]-r.points[0][1])/2];let p,m;if(["start","both"].includes(l)){const v=ne({point:r.points[0],origin:d,rotation:-u});p=ne({point:[v[0],v[1]+i],origin:d,rotation:u})}else p=[...r.points[0]];if(["end","both"].includes(l)){const v=ne({point:r.points[1],origin:d,rotation:-u});m=ne({point:[v[0],v[1]-i],origin:d,rotation:u})}else m=[...r.points[1]];return{points:[p,m]}})({line:e,size:10+2*(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});s=yt(c)}else s=yt(e);const a=((o,c)=>Te(o,Ia,c))(e,t);return{...e,path:s,selection:sn(s,e,a,t),arrows:n,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"},computed:a}},Wa=Ct,Ps=(e,t,n)=>{const s=[ne({point:[0,0],rotation:t}),ne({point:[-(5+(n.lineWidth??0)),10+2*(n.lineWidth??0)],rotation:t}),ne({point:[5+(n.lineWidth??0),10+2*(n.lineWidth??0)],rotation:t})];return{points:[[e[0]+s[0][0],e[1]+s[0][1]],[e[0]+s[1][0],e[1]+s[1][1]],[e[0]+s[2][0],e[1]+s[2][1]]],style:{...n,fillColor:n.strokeColor,strokeColor:"transparent"}}},Na=(e,t,n)=>{const{isXinverted:s,isYinverted:a,settings:o,widthMultiplier:c,heightMultiplier:r}=n,i=e.computed.borders.width-2*o.selectionPadding,l=e.computed.borders.height-2*o.selectionPadding,u=i*c,d=l*r,p=Ye(e,t,n),m=Xe(n,p.x,p.y,u,d),v=e.computed.center[0]-i/2,g=e.computed.center[1]-l/2,x=m[0]-u/2,M=m[1]-d/2;return((b,Q)=>b.type==="line"?Ct(b,Q):b.type==="polygon"?bs(b,Q):Cs(b,Q))({...e,points:e.points.map(([b,Q])=>[x+(s?u-(b-v)*c:(b-v)*c),M+(a?d-(Q-g)*r:(Q-g)*r)])},n.settings)},Mt=(e,t)=>{const n=((a,o)=>Te(a,Jt,o))(e,t),s=ut(e);return{...e,path:s,selection:ot(void 0,n,t),computed:n}},Fa=Mt,rn=(e,t,n,s,a)=>{const[o,c]=((r,i,l,u,d=!1)=>{if(!(r&&i&&u&&l))return[es,es];const p=r/i;if(p>l/u){const v=d?l:Math.min(r,l);return[v,v/p]}const m=d?u:Math.min(i,u);return[m*p,m]})(e.width,e.height,n,s,!0);return Mt({toolId:Ft.id,type:"picture",id:le("picture_"),x:-a.canvasOffset[0]+a.canvasSize.realWidth/a.canvasZoom/2-o/2,y:-a.canvasOffset[1]+a.canvasSize.realHeight/a.canvasZoom/2-c/2,width:o,height:c,ratio:o/c,src:t,img:e},a)},Ba=(e,t,n,s)=>new Promise((a,o)=>{const c=new Image;c.onerror=()=>{o(new Error("Some images could not be loaded"))},setTimeout(()=>{o(new Error("Timeout while loading images"))},4e3),e instanceof File?((r,i,l,u,d,p)=>{Ds(l)?l.text().then(m=>{const v=Es(m);r.onload=async()=>{URL.revokeObjectURL(r.src);const g=rn(r,m,u,d,p);i(g)},r.src=v}):(r.onload=async()=>{URL.revokeObjectURL(r.src);const m=rn(r,r.src,u,d,p);i(m)},r.src=URL.createObjectURL(l))})(c,a,e,t,n,s):((r,i,l,u,d,p)=>{r.onload=()=>{URL.revokeObjectURL(r.src);const m=rn(r,l,u,d,p);i(m)},Rs(l).then(m=>{r.src=m}).catch(()=>{r.src=""})})(c,a,e,t,n,s)}),ln=["Texte"],Ls=(e,t)=>Te(e,Ya,t),kt=(e,t)=>{const n=Ls(e,t),s=ut(e);return{...e,path:s,selection:ot(void 0,n,t),computed:n}},Oa=kt,Pt=(e,t,n,s,a,o=dt)=>{e.font=`${a?"italic":""} ${s?"bold":""} 1px ${o}`;const c=t.map(r=>n/e.measureText(r).width);return Math.min(...c)||36},Ya=(e,t)=>({x:e.x-t.selectionPadding,width:e.width+2*t.selectionPadding,y:e.y-t.selectionPadding,height:e.height+2*t.selectionPadding}),Xa=(e,t,n,s)=>{const a={...t,value:n},o=((v,g,x,M,b,Q=dt)=>{v.font=`${b?"italic":""} ${M?"bold":""} ${x}px ${Q}`;const f=g.map(w=>v.measureText(w).width);return Math.max(...f)||20})(e,a.value,a.fontSize,a.style?.fontBold??!1,a.style?.fontItalic??!1,a.style?.fontFamily),c=a.fontSize*a.value.length,r=o/c,i={...a,width:o,height:c,ratio:r},{center:l}=Ls(i,s),[u,d]=us([1,1],t.computed.center,t),[p,m]=us([1,1],l,i,[!1,!1]);return{...i,x:i.x-(p-u),y:i.y-(m-d)}},js=(e,t,n,s)=>{const a=[ge(n[0],s),ge(n[1],s)];switch(t.type){case"brush":return((o,c,r)=>at({toolId:o.id,type:o.type,id:le(`${o.type}_`),points:[[c]],scaleX:1,scaleY:1,style:{opacity:o.settings.opacity.default,strokeColor:o.settings.strokeColor.default,lineWidth:o.settings.lineWidth.default,lineDash:o.settings.lineDash.default}},r))(t,a,s);case"line":return((o,c,r)=>{const i={toolId:o.id,type:o.type,id:le(`${o.type}_`),points:[c,c],style:{opacity:o.settings.opacity.default,strokeColor:o.settings.strokeColor.default,lineWidth:o.settings.lineWidth.default,lineDash:o.settings.lineDash.default,lineArrow:o.settings.lineArrow.default}};return Ct(i,r)})(t,a,s);case"polygon":return((o,c,r)=>gt({toolId:o.id,type:o.type,id:le(`${o.type}_`),points:[c],style:{opacity:o.settings.opacity.default,fillColor:o.settings.fillColor.default,strokeColor:o.settings.strokeColor.default,lineWidth:o.settings.lineWidth.default,lineDash:o.settings.lineDash.default,closedPoints:o.settings.closedPoints.default}},r))(t,a,s);case"curve":return((o,c,r)=>ft({toolId:o.id,type:o.type,id:le(`${o.type}_`),points:[c],style:{opacity:o.settings.opacity.default,fillColor:o.settings.fillColor.default,strokeColor:o.settings.strokeColor.default,lineWidth:o.settings.lineWidth.default,lineDash:o.settings.lineDash.default,closedPoints:o.settings.closedPoints.default}},r))(t,a,s);case"rect":case"square":return ds(t,a,s);case"text":return((o,c,r,i)=>{const l=Pt(o,ln,150,c.settings?.fontBold.default??!1,c.settings?.fontItalic.default??!1,c.settings.fontFamily.default),u=l*(ln.length||1);return kt({toolId:c.id,type:c.type,id:le(`${c.type}_`),x:r[0]-150,y:r[1]-u,value:ln,fontSize:l,width:150,height:u,ratio:150/u,style:{opacity:c.settings.opacity.default,strokeColor:c.settings.strokeColor.default,fontFamily:c.settings.fontFamily.default,fontItalic:c.settings.fontItalic.default,fontBold:c.settings.fontBold.default}},i)})(e,t,a,s);case"ellipse":return((o,c,r)=>wt({toolId:o.id,type:o.type,id:le(`${o.type}_`),x:c[0],y:c[1],radiusX:0,radiusY:0,style:{opacity:o.settings.opacity.default,fillColor:o.settings.fillColor.default,strokeColor:o.settings.strokeColor.default,lineWidth:o.settings.lineWidth.default,lineDash:o.settings.lineDash.default}},r))(t,a,s);case"circle":return((o,c,r)=>Qt({toolId:o.id,type:o.type,id:le(`${o.type}_`),x:c[0],y:c[1],radius:0,style:{opacity:o.settings.opacity.default,fillColor:o.settings.fillColor.default,strokeColor:o.settings.strokeColor.default,lineWidth:o.settings.lineWidth.default,lineDash:o.settings.lineDash.default}},r))(t,a,s)}},Vs=(e,t)=>{switch(t.type){case"brush":((n,s)=>{s.points.length<1||n.globalAlpha!==0&&s.style?.strokeColor!=="transparent"&&n.globalAlpha!==0&&n.stroke(s.path)})(e,t);break;case"text":((n,s)=>{if(n.globalAlpha!==0&&s.style?.strokeColor&&s.style.strokeColor!=="transparent"){n.scale(s.flipX?-1:1,s.flipY?-1:1),n.font=`${s.style?.fontItalic?"italic":""} ${s.style?.fontBold?"bold":""} ${s.fontSize}px ${s.style?.fontFamily??dt}`,n.textBaseline="top",n.fillStyle=s.style.strokeColor;for(let a=0;a<s.value.length;a++)n.fillText(s.value[a],s.flipX?-s.x-s.width:s.x,(s.flipY?-s.y-s.height:s.y)+a*s.fontSize,s.width)}})(e,t);break;case"line":((n,s)=>{if(n.globalAlpha!==0){s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path);for(const a of s.arrows??[])xe(n,a.style),Ra(n,a)}})(e,t);break;case"polygon":((n,s)=>{n.globalAlpha!==0&&(s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path))})(e,t);break;case"curve":((n,s)=>{n.globalAlpha!==0&&(s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path))})(e,t);break;case"circle":((n,s)=>{n.globalAlpha!==0&&(s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path))})(e,t);break;case"ellipse":((n,s)=>{n.globalAlpha!==0&&(s.style?.fillColor!=="transparent"&&n.fill(s.path),s.style?.strokeColor!=="transparent"&&n.stroke(s.path))})(e,t);break;case"rect":case"square":La(e,t);break;case"picture":((n,s)=>{n.globalAlpha!==0&&(n.beginPath(),n.scale(s.flipX?-1:1,s.flipY?-1:1),n.drawImage(s.img,s.flipX?-s.x-s.width:s.x,s.flipY?-s.y-s.height:s.y,s.width,s.height))})(e,t)}},Zs=(e,t,n)=>{if(t.visible===!1)return;if(((a,o)=>{const c=(r=>{const{canvasSize:{width:i,height:l,scaleRatioWithNoZoom:u},canvasZoom:d,canvasOffset:p}=r;return{x:-p[0],y:-p[1],width:i/d/u,height:l/d/u}})(o);return!!nn(a.computed.boundingBox,c)})(t,n)){if(st(e,n,t.rotation,t.computed.center),xe(e,t.style),e.globalAlpha!==1)return((a,o)=>{const{outerBorders:c}=o.computed,r={width:2*c.width,height:2*c.height};if(r.width===0||r.height===0)return;const i=document.createElement("canvas"),l=i.getContext("2d");if(!l)throw new Error("No context found for canvas");i.width=r.width,i.height=r.height,l.translate(r.width/4-c.x,r.height/4-c.y),xe(l,{...o.style,opacity:100}),Vs(l,o),a.drawImage(i,c.x-r.width/4,c.y-r.height/4)})(e,t),void e.restore();Vs(e,t),e.restore()}},$a=(e,t,n)=>{const s=ne({origin:n,point:e.computed.center,rotation:-t});if("points"in e){if(e.type==="brush"){const o=e.points.map(c=>c.map(r=>[r[0]+s[0]-e.computed.center[0],r[1]+s[1]-e.computed.center[1]]));return{...e,points:o,rotation:(e.rotation??0)+t}}const a=e.points.map(o=>ne({origin:n,point:o,rotation:-t}));return{...e,points:a}}return{...e,x:e.x+s[0]-e.computed.center[0],y:e.y+s[1]-e.computed.center[1],rotation:(e.rotation??0)+t}},Hs=(e,t,n,s,a,o,c)=>{switch(n.type){case"line":return((r,i,l,u)=>{const d=[ge(r[0],u),ge(r[1],u)],p=Ae(d,i.rotation??0,i.computed.center),m=Qe(["points",l.anchor],p,i);return Ct(m,u)})(t,n,s,a);case"polygon":return((r,i,l,u)=>{const d=[ge(r[0],u),ge(r[1],u)],p=Ae(d,i.rotation??0,i.computed.center),m=Qe(["points",l.anchor],p,i);return gt(m,u)})(t,n,s,a);case"curve":return((r,i,l,u)=>{const d=[ge(r[0],u),ge(r[1],u)],p=i.computed.center,m=Ae(d,i.rotation??0,p),v=Qe(["points",l.anchor],m,i);return ft(v,u)})(t,n,s,a);case"brush":return((r,i,l,u,d,p)=>{const m=Gt({...i,scaleX:1,scaleY:1},u),v=i.computed.borders,{borderX:g,borderHeight:x,borderY:M,borderWidth:b,isXinverted:Q,isYinverted:f}=$e(r,i,l,u,d,p),w=Math.max(0,m.width-2*u.selectionPadding),j=Math.max(0,m.height-2*u.selectionPadding),E=Math.max(0,b-2*u.selectionPadding),V=Math.max(0,x-2*u.selectionPadding),C=w?E/w:1,Z=j?V/j:1;if(!w||!j)return i;const A=be(g-v.x)+(Q?2*v.x+m.width:0),H=be(M-v.y)+(f?2*v.y+m.height:0);return at({...i,points:i.points.map(O=>O.map(([D,I])=>[Q?-D+A:D+A,f?-I+H:I+H])),scaleX:C,scaleY:Z},u)})(t,n,s,a,o,c);case"circle":return((r,i,l,u,d)=>{const{borderX:p,borderHeight:m,borderY:v,borderWidth:g}=$e(r,i,l,u,!0,d);return Qt({...i,radius:Math.max(0,g/2-u.selectionPadding),x:p+g/2,y:v+m/2},u)})(t,n,s,a,c);case"ellipse":return((r,i,l,u,d=!1,p=!1)=>{const{borderX:m,borderHeight:v,borderY:g,borderWidth:x}=$e(r,i,l,u,d,p);return wt({...i,radiusX:Math.max(0,x/2-u.selectionPadding),radiusY:Math.max(0,v/2-u.selectionPadding),x:m+x/2,y:g+v/2},u)})(t,n,s,a,o,c);case"rect":case"square":return((r,i,l,u,d=!1,p=!1)=>{const{borderX:m,borderHeight:v,borderY:g,borderWidth:x}=$e(r,i,l,u,d,p);return St({...i,width:Math.max(0,x-2*u.selectionPadding),height:Math.max(0,v-2*u.selectionPadding),x:m+u.selectionPadding,y:g+u.selectionPadding},u)})(t,n,s,a,n.type==="square"||o,c);case"text":return((r,i,l,u,d,p)=>{const{borderX:m,borderHeight:v,borderY:g,borderWidth:x,isXinverted:M,isYinverted:b}=$e(i,l,u,d,!0,p),Q=Math.max(0,x-2*d.selectionPadding),f=Math.max(0,v-2*d.selectionPadding),w=kt({...l,width:Q,height:f,x:m+d.selectionPadding,y:g+d.selectionPadding,flipX:M?!l.flipX:!!l.flipX,flipY:b?!l.flipY:!!l.flipY},d);return{...w,fontSize:Pt(r,w.value,w.width,w.style?.fontBold??!1,w.style?.fontItalic??!1,w.style?.fontFamily)}})(e,t,n,s,a,c);case"picture":return((r,i,l,u,d)=>{const{borderX:p,borderHeight:m,borderY:v,borderWidth:g,isXinverted:x,isYinverted:M}=$e(r,i,l,u,!0,d),b=Math.max(0,g-2*u.selectionPadding),Q=Math.max(0,m-2*u.selectionPadding);return Mt({...i,width:b,height:Q,x:p+u.selectionPadding,y:v+u.selectionPadding,flipX:x?!i.flipX:!!i.flipX,flipY:M?!i.flipY:!!i.flipY},u)})(t,n,s,a,c);default:return n}},Ua=(e,t,n,s,a,o,c)=>{if(n.type!=="group")return Y(n).map(v=>Hs(e,t,v,s,a,o,c));const r=n,i=Y(r),l=i.filter(v=>va.includes(v.type)),u=!l.some(v=>(v.rotation??0)!==(l[0]?.rotation??0)),d=(l[0]?.rotation??0)!==0&&l.length!==i.length,p=i.some(v=>ma.includes(v.type)),m=((v,g,x,M,b,Q)=>{const{borders:f}=g.computed,{borderX:w,borderHeight:j,borderY:E,borderWidth:V,isXinverted:C,isYinverted:Z}=$e(v,g,x,M,b,Q);return{newBorderX:w,newBorderY:E,newBorderWidth:V,newBorderHeight:j,widthMultiplier:(V-2*M.selectionPadding)/(f.width-2*M.selectionPadding||1),heightMultiplier:(j-2*M.selectionPadding)/(f.height-2*M.selectionPadding||1),isXinverted:C,isYinverted:Z,groupCenter:[w+V/2,E+j/2],rotation:g.rotation??0,settings:M,originalBorders:f}})(t,r,s,a,o||!u||p||d,c);return i.map(v=>{switch(v.type){case"rect":case"square":return((g,x,M)=>{const{isXinverted:b,isYinverted:Q,settings:f,widthMultiplier:w,heightMultiplier:j}=M,E=(b||Q)&&!(b&&Q)&&(g.rotation??0)!==0&&x.rotation!==g.rotation,V=Ye(g,x,M),C=(g.width||1)*w,Z=(g.height||1)*j,A=Xe(M,V.x,V.y,C,Z);return St({...g,width:C,height:Z,x:A[0]-C/2,y:A[1]-Z/2,rotation:E?-(g.rotation??0):g.rotation??0},f)})(v,r,m);case"picture":return((g,x,M)=>{const{isXinverted:b,isYinverted:Q,settings:f,widthMultiplier:w,heightMultiplier:j}=M,E=Ye(g,x,M),V=(g.width===0||g.height===0?g.ratio??1:g.width)*w,C=(g.width===0||g.height===0?g.ratio??1:g.height)*j,Z=Xe(M,E.x,E.y,V,C),A=(b||Q)&&!(b&&Q)&&(g.rotation??0)!==0&&x.rotation!==g.rotation;return Mt({...g,width:V,height:C,x:Z[0]-V/2,y:Z[1]-C/2,flipX:b?!g.flipX:!!g.flipX,flipY:Q?!g.flipY:!!g.flipY,rotation:A?-(g.rotation??0):g.rotation??0},f)})(v,r,m);case"text":return((g,x,M,b)=>{const{isXinverted:Q,isYinverted:f,settings:w,widthMultiplier:j,heightMultiplier:E}=b,V=(Q||f)&&!(Q&&f)&&(x.rotation??0)!==0&&M.rotation!==x.rotation,C=Ye(x,M,b),Z=(x.width===0||x.height===0?x.ratio??1:x.width)*j,A=(x.width===0||x.height===0?x.ratio??1:x.height)*E,H=Xe(b,C.x,C.y,Z,A),O=kt({...x,width:Z,height:A,x:H[0]-Z/2,y:H[1]-A/2,flipX:Q?!x.flipX:!!x.flipX,flipY:f?!x.flipY:!!x.flipY,rotation:V?-(x.rotation??0):x.rotation??0},w);return{...O,fontSize:Pt(g,O.value,O.width,O.style?.fontBold??!1,O.style?.fontItalic??!1,O.style?.fontFamily)}})(e,v,r,m);case"ellipse":return((g,x,M)=>{const{isXinverted:b,isYinverted:Q,settings:f,widthMultiplier:w,heightMultiplier:j}=M,E=(b||Q)&&!(b&&Q)&&(g.rotation??0)!==0&&x.rotation!==g.rotation,V=Ye(g,x,M),C=(g.radiusX||.5)*w,Z=(g.radiusY||.5)*j,A=Xe(M,V.x,V.y,2*C,2*Z);return wt({...g,radiusX:C,radiusY:Z,x:A[0],y:A[1],rotation:E?-(g.rotation??0):g.rotation??0},f)})(v,r,m);case"circle":return((g,x,M)=>{const b=Ye(g,x,M),Q=(g.radius||.5)*M.widthMultiplier,f=Xe(M,b.x,b.y,2*Q,2*Q);return Qt({...g,radius:Q,x:f[0],y:f[1]},M.settings)})(v,r,m);case"brush":return((g,x,M)=>{const{isXinverted:b,isYinverted:Q,settings:f,widthMultiplier:w,heightMultiplier:j}=M,E=Gt({...g,scaleX:1,scaleY:1},f),V=E.width-2*f.selectionPadding,C=E.height-2*f.selectionPadding,Z=g.scaleX??1?(g.scaleX??1)*w:w/V,A=g.scaleY??1?(g.scaleY??1)*j:j/C,H=V*Z,O=C*A,D=Ye(g,x,M),I=Xe(M,D.x,D.y,H,O),$=be(I[0]-H/2-g.computed.borders.x-f.selectionPadding)+(b?2*g.computed.borders.x+E.width:0),U=be(I[1]-O/2-g.computed.borders.y-f.selectionPadding)+(Q?2*g.computed.borders.y+E.height:0),z=(b||Q)&&!(b&&Q)&&(g.rotation??0)!==0&&x.rotation!==g.rotation;return at({...g,points:g.points.map(S=>S.map(([k,P])=>[b?-k+$:k+$,Q?-P+U:P+U])),scaleX:Z,scaleY:A,rotation:z?-(g.rotation??0):g.rotation??0},M.settings)})(v,r,m);case"line":case"polygon":case"curve":return Na(v,r,m);default:return Hs(e,t,v,s,a,o,c)}})},zs=(e,t,n,s)=>{switch(e.type){case"rect":case"square":case"ellipse":case"circle":case"picture":case"text":return Ee({...e,x:e.x+t,y:e.y+n},s);case"line":case"polygon":case"curve":return Ee({...e,points:e.points.map(([a,o])=>[a+t,o+n])},s);case"brush":return Ee({...e,points:e.points.map(a=>a.map(([o,c])=>[o+t,c+n]))},s);default:return e}},Ts=(e,t,n,s,a)=>{const o=t.computed.borders,c=((l,u)=>u?[Math.abs(l[0])>Math.abs(l[1])?l[0]:0,Math.abs(l[1])>Math.abs(l[0])?l[1]:0]:l)([e[0]-n[0],e[1]-n[1]],a),r=c[0]===0?0:ge(o.x+s.selectionPadding+c[0],s)-(o.x+s.selectionPadding),i=c[1]===0?0:ge(o.y+s.selectionPadding+c[1],s)-(o.y+s.selectionPadding);return Y(t).map(l=>zs(l,r,i,s))},Ee=(e,t)=>{switch(e.type){case"rect":case"square":return Pa(e,t);case"ellipse":return Ea(e,t);case"circle":return Za(e,t);case"picture":return Fa(e,t);case"text":return Oa(e,t);case"line":return Wa(e,t);case"polygon":return bs(e,t);case"curve":return Cs(e,t);case"brush":return Sa(e,t);default:return e}},As=({ctx:e,shape:t,settings:n,selectionWidth:s,selectionColor:a,hoverMode:o,selectionMode:c,withAnchors:r=!0})=>{switch(n.debug&&((i,l,u,d)=>{l.selection&&d.debug&&(i.save(),i.scale(d.canvasSize.scaleRatio,d.canvasSize.scaleRatio),i.translate(d.canvasOffset[0],d.canvasOffset[1]),xe(i,{fillColor:"transparent",strokeColor:"green",lineWidth:u/d.canvasSize.scaleRatio}),i.strokeRect(l.computed.boundingBox.x,l.computed.boundingBox.y,l.computed.boundingBox.width,l.computed.boundingBox.height),i.restore())})(e,t,s,n),t.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((i,l,u,d,p,m)=>{if(l.selection&&(st(i,p,l.rotation,l.computed.center),p.debug&&(xe(i,{fillColor:"transparent",strokeColor:"red",lineWidth:d/p.canvasSize.scaleRatio}),i.strokeRect(l.computed.outerBorders.x,l.computed.outerBorders.y,l.computed.outerBorders.width,l.computed.outerBorders.height)),xe(i,{fillColor:"transparent",strokeColor:u,lineWidth:d/p.canvasSize.scaleRatio}),l.selection.shapePath?i.stroke(l.selection.shapePath):i.stroke(l.selection.border),m&&!l.locked)){l.selection.shapePath&&i.stroke(l.selection.border),l.selection.line&&i.stroke(l.selection.line),xe(i,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio,shadowColor:u,shadowBlur:0});for(const v of l.selection.anchors)i.fill(v),i.stroke(v)}})(e,t,a,s,n,r);break;case"group":((i,l,u,d,p,m,v)=>{if(l.selection&&(l.shapes.forEach(g=>{xe(i,{fillColor:"transparent",strokeColor:u,lineWidth:d/m.canvasSize.scaleRatio}),st(i,m,g.rotation,g.computed.center),g.selection?.shapePath&&i.stroke(g.selection.shapePath),i.restore()}),p.mode!=="rotate"&&(st(i,m,l.rotation,l.computed.center),m.debug&&(xe(i,{fillColor:"transparent",strokeColor:"red",lineWidth:d/m.canvasSize.scaleRatio}),i.strokeRect(l.computed.outerBorders.x,l.computed.outerBorders.y,l.computed.outerBorders.width,l.computed.outerBorders.height)),xe(i,{fillColor:"transparent",strokeColor:u,lineWidth:d/m.canvasSize.scaleRatio}),v&&!l.locked))){i.stroke(l.selection.border),l.selection.line&&i.stroke(l.selection.line),xe(i,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/m.canvasSize.scaleRatio});for(const g of l.selection.anchors)i.fill(g),i.stroke(g)}})(e,t,a,s,c,n,r);break;case"polygon":case"line":case"curve":(({ctx:i,shape:l,withAnchors:u,selectionWidth:d,selectionColor:p,hoverMode:m,settings:v})=>{if(l.selection&&(st(i,v,l.rotation,l.computed.center),v.debug&&(xe(i,{fillColor:"transparent",strokeColor:"red",lineWidth:d/v.canvasSize.scaleRatio}),i.strokeRect(l.computed.outerBorders.x,l.computed.outerBorders.y,l.computed.outerBorders.width,l.computed.outerBorders.height)),xe(i,{fillColor:"transparent",strokeColor:p,lineWidth:d/v.canvasSize.scaleRatio}),l.selection.shapePath&&i.stroke(l.selection.shapePath),u&&!l.locked)){xe(i,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/v.canvasSize.scaleRatio,shadowColor:p,shadowBlur:0});for(let g=0;g<l.selection.anchors.length;g++){const x=l.selection.anchors[g];m.mode==="resize"&&m.anchor===g?(i.shadowBlur=10,i.fill(x),i.shadowBlur=0):i.fill(x),i.stroke(x)}}})({ctx:e,shape:t,withAnchors:r,selectionWidth:s,selectionColor:a,hoverMode:o,settings:n})}e.restore()},qa=({ctx:e,selectionFrame:t,settings:n})=>{st(e,n),((s,a,o)=>{xe(s,{fillColor:"rgba(170,170,170, 0.1)",strokeColor:"rgb(170,170,170)",lineWidth:1/o.canvasSize.scaleRatio}),s.fillRect(a[0][0],a[0][1],a[1][0]-a[0][0],a[1][1]-a[0][1]),s.strokeRect(a[0][0],a[0][1],a[1][0]-a[0][0],a[1][1]-a[0][1])})(e,t.frame,n),e.restore()},cn=e=>e.filter(t=>t!=null),Es=e=>{const t=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0];if(!t)return"";const n=t.getAttribute("width"),s=t.getAttribute("height");let a;if(n||s)a=e;else{const c=t.getAttribute("viewBox")??"0 0 300 300",[,,r,i]=c.split(" ");t.setAttribute("width",r??"300"),t.setAttribute("height",i??"300"),a=new XMLSerializer().serializeToString(t)}const o=new Blob([a],{type:"image/svg+xml"});return URL.createObjectURL(o)},Ds=e=>(e instanceof File?e.name:e).includes(".svg"),Rs=e=>Ds(e)?fetch(e).then(t=>t.text()).then(t=>Es(t)):fetch(e).then(t=>t.blob()).then(t=>URL.createObjectURL(t)),Is=(e,t)=>{const n=document.createElement("a");n.href=e,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n)},Ga=e=>e.src.includes("<svg")?e.src:(t=>{const n=document.createElement("canvas");n.width=t.width,n.height=t.height;const s=n.getContext("2d");return s?(s.drawImage(t,0,0),n.toDataURL("image/png")):""})(e.img),dn=({shapes:e,settings:t})=>{const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)throw new Error("No context found for canvas");const{realHeight:a,realWidth:o}=t.canvasSize;n.width=o,n.height=a,s.clearRect(0,0,o,a),ss(s);for(let c=e.length-1;c>=0;c--)Zs(s,e[c],t);return n.toDataURL("image/png")},Ws=({shapes:e,settings:t,view:n})=>{if(n==="fitToShapes"&&!e.length)throw new Error("No image found to export");if(n==="fitToShapes"){const a=Math.min(...e.map(l=>l.computed.boundingBox.x)),o=Math.max(...e.map(l=>l.computed.boundingBox.x+l.computed.boundingBox.width)),c=Math.min(...e.map(l=>l.computed.boundingBox.y)),r=Math.max(...e.map(l=>l.computed.boundingBox.y+l.computed.boundingBox.height)),i={...t,canvasOffset:[-a,-c],canvasZoom:1,canvasSize:{realWidth:o-a,realHeight:r-c,width:o-a,height:r-c,scaleRatio:1,scaleRatioWithNoZoom:1}};return dn({shapes:e,settings:i})}if(n==="defaultView"){const a={...t,canvasOffset:[0,0],canvasZoom:1,canvasSize:{...t.canvasSize,width:t.canvasSize.realWidth,height:t.canvasSize.realHeight,scaleRatio:1,scaleRatioWithNoZoom:1}};return dn({shapes:e,settings:a})}const s={...t,canvasSize:{...t.canvasSize,width:t.canvasSize.realWidth,height:t.canvasSize.realHeight,scaleRatio:t.canvasZoom,scaleRatioWithNoZoom:1}};return dn({shapes:e,settings:s})},_a=(e,t,n)=>{return a=un(e,t,n),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(a))}`;var a},Ka=e=>{const t=["img","id","selection","path","arrows","tempPoint","computed",["flipX",[void 0,!1]],["flipY",[void 0,!1]]];return e.map(n=>n.type!=="picture"||n.src.startsWith("http")?Xt(t,n):Xt(t,{...n,src:Ga(n)}))},un=(e,t,n)=>({shapes:Ka(e),config:{width:t,height:n}}),Ns=(e,t)=>Ee({...e,id:le(`${e.type}_`)},t),Ja=(e,t,n,s)=>{const a=y.useRef([]),o=y.useRef({dataChanged:[]}),[c,r]=y.useState(void 0),[i,l]=y.useState(void 0),[u,d]=y.useState(void 0),[p,m]=y.useState({states:[{shapes:[],selectedShape:void 0,source:"remote"}],cursor:0}),v=p.cursor>0,g=p.cursor<p.states.length-1,x=a.current.length>0,M=y.useCallback(()=>{m(S=>ts(S.states[S.cursor]?.shapes,a.current)?S:{states:[...S.states.slice(0,S.cursor+1),{shapes:a.current,selectedShape:i,source:"user"}],cursor:S.cursor+1})},[i]),b=y.useCallback(S=>{a.current=[...S,...a.current]},[]),Q=y.useCallback(S=>{a.current=a.current.flatMap(k=>{const P=S.find(T=>T.id===k.id);return P?[{...P,id:le(`${k.type}_`)},k]:k})},[]),f=y.useCallback((S,k,P,T)=>{if(S.target&&"className"in S.target&&![_n,Kn].includes(S.target.className)||!T)return void d(void 0);const L=a.current.find(B=>Y(i)?.map(W=>W.id).includes(B.id)?!!ht(k,B,P,e):!!ys(k,B,P,e));d(L)},[e,i]),w=y.useCallback(async(S,k=300,P=300)=>{const T=await Ba(S,k,P,e);return b([T]),M(),T},[b,M,e]),j=y.useCallback((S,k=!1)=>{a.current=a.current.map(P=>S.find(T=>T.id===P.id)??P),l(P=>P&&ce(Y(P).map(T=>S.find(L=>L.id===T.id)??T),e)),k&&M()},[M,e]),E=y.useCallback(S=>{const k=S.map(P=>Xt(["chosen"],P));a.current=k,M()},[M]),V=y.useCallback(S=>{const k=new Set(S.map(P=>P.id));l(P=>{const T=Y(P).map(L=>L.id);return T&&k.size&&T.find(L=>k.has(L))?void 0:P}),a.current=a.current.filter(P=>!k?.has(P.id)),M()},[M]),C=y.useCallback(S=>{m(k=>{const P=S(k);return a.current=k.states[P]?.shapes??[],l(k.states[P]?.selectedShape),Qe("cursor",P,k)})},[]),Z=y.useCallback(()=>{C(S=>Math.max(0,S.cursor-1))},[C]),A=y.useCallback(()=>{C(S=>Math.min(S.states.length-1,S.cursor+1))},[C]),H=y.useCallback((S,k)=>{l(void 0),a.current=S,m(P=>k.clearHistory?{states:[{shapes:S,selectedShape:void 0,source:k.source}],cursor:0}:{states:[...P.states.slice(0,P.cursor+1),{shapes:S,selectedShape:void 0,source:k.source}],cursor:P.cursor+1})},[]),O=y.useCallback((S,k)=>{const P=a.current,T=P.findIndex(R=>R.id===S),L=P.findIndex(R=>R.id===k);var B,W,F;E((B=P,F=L,(W=T)<0||F<0||W>B.length-1||F>B.length-1?B:W<F?[...B.slice(0,W),...B.slice(W+1,F+1),B[W],...B.slice(F+1,B.length)]:[...B.slice(0,F),B[W],...B.slice(F,W),...B.slice(W+1,B.length)]))},[E]),D=y.useCallback(S=>{const k=a.current,P=new Set(S.map(L=>L.id)),T=k.map(L=>P.has(L.id)?Qe("visible",L.visible===!1,L):L);l(ps(L=>Qe("visible",L.visible===!1,L),e)),E(T)},[E,e]),I=y.useCallback(S=>{const k=a.current,P=new Set(S.map(L=>L.id)),T=k.map(L=>P.has(L.id)?Qe("locked",!L.locked,L):L);l(ps(L=>Qe("locked",!L.locked,L),e)),E(T)},[E,e]),$=y.useCallback((S,k)=>{o.current.hasOwnProperty(S)&&(o.current[S]=[...o.current[S],k])},[]),U=y.useCallback((S,k)=>{if(o.current.hasOwnProperty(S))if(k){const P=o.current[S].indexOf(k);o.current[S]=[...o.current[S].slice(0,P),...o.current[S].slice(P+1)]}else o.current[S]=[]},[]);y.useEffect(()=>{const S=p.states[p.cursor],k=un(S.shapes,t,n);for(const P of o.current.dataChanged)P(k,S.source)},[t,n,p]),y.useEffect(()=>{a.current=a.current.map(S=>Ee(S,e)),l(S=>S===void 0?void 0:ce(Y(S).map(k=>Ee(k,e)),e))},[e]);const z=y.useCallback((S,k)=>{r(P=>{const T=[P?.frame[0]??[k[0],k[1]],[k[0],k[1]]],L=a.current.filter(W=>((F,R,q)=>{const{borders:oe,center:se,boundingBox:G}=R.computed,N=Math.min(q[0][0],q[1][0]),de=Math.max(q[0][0],q[1][0]),te=Math.min(q[0][1],q[1][1]),fe={x:N,y:te,width:de-N,height:Math.max(q[0][1],q[1][1])-te},ve=nn(G,fe);if(!ve)return!1;if(oe.width<=1||oe.height<=1)return!0;if(F.lineWidth=(R.style?.lineWidth??0)+10,R.type==="brush"){const K=R.points.flat(),ue=Math.min(...K.map(ee=>ee[0])),X=Math.min(...K.map(ee=>ee[1]));for(const ee of R.points){if(ee.length<1)break;if(ee.length<2){const Me=Ve(ee[0],ue,X,R.scaleX,R.scaleY);if(as(ve,{x:Me[0],y:Me[1],radius:(R.style?.lineWidth??1)/2}))return!0}for(let Me=0;Me<ee.length-1;Me++){const ke=en(Ve(ee[Me],ue,X,R.scaleX,R.scaleY),R.rotation??0,se),ae=en(Ve(ee[Me+1],ue,X,R.scaleX,R.scaleY),R.rotation??0,se),je=nn({x:Math.min(ke[0],ae[0]),y:Math.min(ke[1],ae[1]),width:Math.abs(ke[0]-ae[0]),height:Math.abs(ke[1]-ae[1])},fe);if(je){const qe=new Path2D;if(qe.moveTo(...ke),qe.lineTo(...ae),Ss({ctx:F,path:qe,rect:je,offset:10,center:se,checkFill:!1}))return!0}}}return!1}const me=tn(R);return Ss({ctx:F,path:R.path,rect:ve,offset:10,center:se,rotation:R.rotation??0,checkFill:me})})(S,W,T)),B=ce(L,e);return l(s?ce(gs(P?.oldSelection,L),e):B),{oldSelection:P?.oldSelection,frame:T}})},[e,s]);return{registerEvent:$,unregisterEvent:U,shapesRef:a,selectedShape:i,hoveredShape:u,selectionFrame:c,setSelectionFrame:r,refreshSelectedShapes:z,addShapes:b,duplicateShapes:Q,addPictureShape:w,moveShapes:O,saveShapes:M,setSelectedShape:l,refreshHoveredShape:f,toggleShapeVisibility:D,toggleShapeLock:I,removeShape:V,updateShape:j,backwardShape:Z,forwardShape:A,clearShapes:H,canGoBackward:v,canGoForward:g,canClear:x}},Fs=e=>{const t=[e[0].clientX,e[0].clientY],n=[e[1].clientX,e[1].clientY];var s,a;return{diff:rs(t,n),center:(a=n,[((s=t)[0]+a[0])/2,(s[1]+a[1])/2])}},eo=({canvasElt:e,canvasTransformation:t,canvasSize:n,size:s,setCanvasTransformation:a})=>{const o=y.useRef([]),[c,r]=y.useState(o.current.length>0),i=y.useRef(null),l=y.useRef(t);l.current=t;const u=y.useCallback(({startDiff:d,startZoom:p,startCenter:m,startOffset:v,currentDiff:g,currentCenter:x,isMoving:M,isZooming:b})=>{if(!e||!g||!d)return;const Q=(({canvasBoundingRect:f,canvasSize:w,size:j,startDiff:E,startZoom:V,startCenter:C,startOffset:Z,currentDiff:A,currentCenter:H,isMoving:O,isZooming:D})=>{const I=D?ze(A/E*V,we[0],we[we.length-1]):V,$=O?[Z[0]+(H[0]-C[0])*(w.width/f.width)/w.scaleRatio/V,Z[1]+(H[1]-C[1])*(w.height/f.height)/w.scaleRatio/V]:[Z[0],Z[1]],U=[(H[0]-f.left)/w.scaleRatio,(H[1]-f.top)/w.scaleRatio];return on({size:j,canvasSize:w,currentOffset:$,currentZoom:V,zoom:I,centerPoint:U})})({canvasBoundingRect:e.getBoundingClientRect(),canvasSize:n,size:s,startDiff:d,startZoom:p,startCenter:m,startOffset:v,currentDiff:g,currentCenter:x,isMoving:M,isZooming:b});a(Q)},[e,n,s,a]);y.useEffect(()=>{if(!e)return;const d=p=>{if(o.current=[...o.current,p],r(o.current.length>0),o.current.length===2){p.stopPropagation();const{diff:m,center:v}=Fs(o.current);i.current={startDiff:m,startCenter:v,startZoom:l.current.zoom,startOffset:l.current.offset,isMoving:!1,isZooming:!1}}};return e.addEventListener("pointerdown",d),()=>{e.removeEventListener("pointerdown",d)}},[e]),y.useEffect(()=>{if(!c)return;const d=m=>{const v=o.current.findIndex(g=>g.pointerId===m.pointerId);if(v>-1&&(o.current[v]=m),o.current.length===2&&i.current){const{diff:g,center:x}=Fs(o.current),M=i.current.isZooming||((Q,f)=>Math.abs(Q-f.startDiff)>30)(g,i.current),b=i.current.isMoving||M||((Q,f)=>Math.abs(rs(Q,f.startCenter))>10)(x,i.current);i.current={...i.current,isMoving:b,isZooming:M},u({...i.current,currentDiff:g,currentCenter:x})}},p=m=>{o.current=o.current.filter(v=>v.pointerId!==m.pointerId),r(o.current.length>0)};return document.addEventListener("pointermove",d),document.addEventListener("pointerup",p),document.addEventListener("pointerout",p),document.addEventListener("pointercancel",p),document.addEventListener("pointerleave",p),()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",p),document.removeEventListener("pointerout",p),document.removeEventListener("pointercancel",p),document.removeEventListener("pointerleave",p)}},[c,u])},Bs={offset:[0,0],zoom:1},to=({canvasSize:e,size:t,zoomEnabled:n,canvasElt:s})=>{const[a,o]=y.useState(Bs),c=y.useRef(0),r=y.useCallback(u=>{o(({zoom:d})=>an({zoom:d,size:t,canvasSize:e,newOffset:u}))},[e,t]),i=y.useCallback(u=>{o(({offset:d,zoom:p})=>(({size:m,canvasSize:v,currentOffset:g,currentZoom:x,action:M})=>{const b=M==="default"?we[4]:M==="zoom"?we[ze(we.length-1-we.slice(0).reverse().findIndex(f=>f<=x)+1,0,we.length-1)]:we[ze(we.findIndex(f=>f>=x)-1,0,we.length-1)],Q=[v.realWidth/2,v.realHeight/2];return on({size:m,canvasSize:v,currentOffset:g,currentZoom:x,zoom:b,centerPoint:Q})})({size:t,canvasSize:e,currentOffset:d,currentZoom:p,action:u}))},[e,t]);eo({canvasElt:s,canvasTransformation:a,canvasSize:e,size:t,setCanvasTransformation:o});const l=y.useCallback(()=>{o(Bs)},[]);return y.useEffect(()=>{if(!n||!s)return;const u=d=>{const p=d.ctrlKey,{deltaX:m,deltaY:v}=((b,Q)=>{const f=Math.abs(b.deltaY)<50&&Q<50,w=b.ctrlKey,j=ns()&&f&&w;switch(b.deltaMode){case WheelEvent.DOM_DELTA_LINE:return{deltaX:16*b.deltaX,deltaY:16*b.deltaY};case WheelEvent.DOM_DELTA_PAGE:return{deltaX:b.deltaX*window.innerHeight,deltaY:b.deltaY*window.innerHeight};default:return j?{deltaX:5*b.deltaX,deltaY:5*b.deltaY}:{deltaX:b.deltaX,deltaY:b.deltaY}}})(d,d.timeStamp-c.current);if(c.current=d.timeStamp,p){d.preventDefault();const b=vs(d,s,e);return void o(({offset:Q,zoom:f})=>(({size:w,canvasSize:j,currentOffset:E,currentZoom:V,delta:C,centerPoint:Z})=>{const A=ze(V*(1-C/1e3),we[0],we[we.length-1]);return on({size:w,canvasSize:j,currentOffset:E,currentZoom:V,zoom:A,centerPoint:Z})})({size:t,canvasSize:e,currentOffset:Q,currentZoom:f,delta:v,centerPoint:b}))}const g=d.shiftKey,[x,M]=g?[v,m]:[m,v];o(({offset:b,zoom:Q})=>{const f=[b[0]-x/Q,b[1]-M/Q],w=an({zoom:Q,size:t,canvasSize:e,newOffset:f});return w.offset[0]===b[0]&&w.offset[1]===b[1]||d.preventDefault(),w})};return s.addEventListener("wheel",u,{passive:!1}),()=>{s.removeEventListener("wheel",u)}},[s,t,e,n]),{setCanvasTransformation:o,setCanvasOffset:r,setCanvasZoom:i,resetZoom:l,canvasTransformation:a}},Os=(e,t=!1)=>{const n=(a,o)=>{if(Array.isArray(a))return o},s=e.map(a=>{if(typeof a!="object")return null;switch(a.type){case"brush":return He(n,En,a);case"circle":return He(n,Fn,a);case"curve":return He(n,In,a);case"ellipse":return He(n,Bn,a);case"line":return He(n,Dn,a);case"polygon":return He(n,Rn,a);case"rect":return He(n,Wn,a);case"square":return He(n,Nn,a);case"text":return He(n,On,a)}return null});return cn(t?[...s,Ft]:s)},no=({addShapes:e,drawCanvasRef:t,setActiveTool:n,refreshHoveredShape:s,shapes:a,selectionMode:o,activeTool:c,isInsideComponent:r,setCanvasOffset:i,selectedShape:l,canvasOffsetStartData:u,refreshSelectedShapes:d,setSelectedShape:p,setSelectionFrame:m,setCanvasOffsetStartData:v,updateSingleShape:g,duplicateShapes:x,saveShapes:M,setSelectionMode:b,setCanvasMoveAcceleration:Q,settings:f,isShiftPressed:w,isAltPressed:j,withFrameSelection:E,isSpacePressed:V})=>{const[C,Z]=y.useState({mode:"default"}),{registerDoubleClickEvent:A,unRegisterDoubleClickEvent:H}=(()=>{const S=y.useRef(void 0),k=y.useRef(void 0),P=T=>{const L=Date.now();S.current&&L<S.current+300&&k.current?.(T),S.current=Date.now()};return{registerDoubleClickEvent:(T,L)=>{k.current=L,T.addEventListener("click",P),T.addEventListener("touchend",P)},unRegisterDoubleClickEvent:T=>{T.removeEventListener("click",P),T.removeEventListener("touchend",P)}}})(),O=y.useRef(null);O.current=S=>((k,P,T,L,B,W,F,R,q,oe,se,G,N,de,te,fe,ve)=>{if(rt(k)&&k.touches.length>1)return;const me=P.current?.getContext("2d");if(!me)return;const K=it(k,P.current,N);if(L.mode==="selectionFrame"){G(me,K,N);const X=vs(k,P.current,N.canvasSize);return void ve([Math.ceil(ze(X[0]*N.canvasZoom<50?X[0]*N.canvasZoom-50:X[0]*N.canvasZoom>N.canvasSize.width/N.canvasSize.scaleRatioWithNoZoom-50?X[0]*N.canvasZoom-(N.canvasSize.width/N.canvasSize.scaleRatioWithNoZoom-50):0,-100,100)/5/N.canvasZoom),Math.ceil(ze(X[1]*N.canvasZoom<50?X[1]*N.canvasZoom-50:X[1]*N.canvasZoom>N.canvasSize.height/N.canvasSize.scaleRatioWithNoZoom-50?X[1]*N.canvasZoom-(N.canvasSize.height/N.canvasSize.scaleRatioWithNoZoom-50):0,-100,100)/5/N.canvasZoom)])}if(W!==void 0)return void se([K[0]+N.canvasOffset[0]-W.start[0],K[1]+N.canvasOffset[1]-W.start[1]]);if(L.mode==="preview"){const X=Y(T)[0];if(X?.type==="curve"){const ee=Ms(X,K,N,!0);return void fe(ce([ee],N))}if(X?.type==="polygon"){const ee=ws(X,K,N,!0);return void fe(ce([ee],N))}}const ue=pt(K,N);if(rt(k)||R(k,me,K,ue),T===void 0||T.locked)F({mode:"default",outOfView:!ue});else{if(L.mode==="default"||L.mode==="textedition"){if(!ue)return void F({mode:"default"});F(ht(me,T,K,N,!0)||{mode:"default"})}else{const X=P.current?.getContext("2d");if(!X)return;const ee=xa(X,T,K,L,N,de,te);q(Y(ee))}L.mode==="translate"&&te&&!L.hasBeenDuplicated&&(B({...L,hasBeenDuplicated:!0}),oe(Y(L.originalShape)))}})(S,t,l,o,b,u,Z,s,g,x,i,d,f,w,j,p,Q),y.useEffect(()=>{if(r){const S=k=>O.current?.(k);return document.addEventListener("mousemove",S),document.addEventListener("touchmove",S),()=>{document.removeEventListener("mousemove",S),document.removeEventListener("touchmove",S)}}},[r]);const{isBrushShapeDoneOnMouseUp:D}=f,I=y.useRef(null);I.current=S=>{if(rt(S)&&S.touches.length>1)return;const k=t.current?.getContext("2d");if(!k)return;if("button"in S&&S.button===2)return p(void 0),n(Re),b({mode:"default"}),void m(void 0);if(u)return void v(void 0);if(o.mode==="textedition"||o.mode==="preview")return;const P=it(S,t.current,f);if(o.mode==="translate"&&Date.now()-o.dateStart<=500&&P[0]===o.cursorStartPosition[0]&&P[1]===o.cursorStartPosition[1]){if(S.ctrlKey||S.shiftKey||S.metaKey){const{shape:T}=hs(k,a,P,f,l,rt(S),E,"remove");Y(T).length!==o.selectedShapesLengthAtMouseDown&&p(T)}return b({mode:"default"}),m(void 0),void M()}o.mode!=="default"&&(o.mode==="brush"&&D&&p(void 0),b({mode:"default"}),m(void 0),M())},y.useEffect(()=>{if(r){const S=k=>I.current?.(k);return document.addEventListener("mouseup",S),document.addEventListener("touchend",S),()=>{document.removeEventListener("mouseup",S),document.removeEventListener("touchend",S)}}},[r]);const $=!f.features.edition&&f.features.zoom,U=!f.features.edition&&!f.features.zoom,z=y.useRef(null);return z.current=(S,k,P)=>{if(S.preventDefault(),rt(S)&&S.touches.length>1)return;const T=k?.getContext("2d");if(!T)return;k.focus();const L=it(S,t.current,f),B="button"in S&&S.button===1;if(!("button"in S&&S.button===2)){if(B||P||c.type==="move")v({start:L,originalOffset:f.canvasOffset});else if(!$){if(!pt(L,f))return p(void 0),void b({mode:"default"});if(c.type==="selection"){const W=S.ctrlKey||S.shiftKey||S.metaKey?"add":"replace",{shape:F,mode:R}=hs(T,a,L,f,l,rt(S),E,W);p(F),b(R),R.mode==="selectionFrame"&&m({oldSelection:F,frame:[[L[0],L[1]],[L[0],L[1]]]})}else if(Gn.some(W=>W===c.type)){const W=Y(l)[0],F=t.current?.getContext("2d");if(!F)return;if(c.type==="brush"){if(W?.type==="brush"){const R=((q,oe,se)=>{const G={...q,points:Qe(q.points.length,[[Math.round(oe[0]),Math.round(oe[1])]],q.points)};return at(G,se)})(W,L,f);g([R])}else{const R=js(F,c,L,f);if(!R)return;e([R]),p(ce([R],f))}b({mode:"brush"})}else if(o.mode!=="preview"||W?.type!=="polygon"&&W?.type!=="curve"){if(c.type!=="picture"){const R=js(F,c,L,f);if(!R)return;e([R]);const q=ce([R],f);p(q),R.type==="polygon"||R.type==="curve"?b({mode:"preview"}):(n(Re),b({mode:"resize",cursorStartPosition:[L[0]+f.selectionPadding,L[1]+f.selectionPadding],originalShape:q,anchor:R.type==="line"?0:[1,1],selectedShapesLengthAtMouseDown:Y(q).length}))}}else{const R=W.type==="polygon"?ws(W,L,f):Ms(W,L,f);p(ce([R],f)),g([R],!0)}}}}},y.useEffect(()=>{if(U)return;const S=t.current;if(!S)return;const k=P=>z.current?.(P,S,V);return S.addEventListener("mousedown",k,{passive:!1}),S.addEventListener("touchstart",k,{passive:!1}),()=>{S.removeEventListener("mousedown",k),S.removeEventListener("touchstart",k)}},[U,t,V]),y.useEffect(()=>{const S=t.current,k=t.current?.getContext("2d");if(!(!S||!k))return r?(A(S,P=>{if(c.type==="selection"){if(Y(l).length!==1)return;const T=Y(l)[0];if(T?.type==="text"){const L=it(P,t.current,f);return pt(L,f)?void(ht(k,l,L,f)&&b({mode:"textedition",defaultValue:T.value})):void 0}if(T?.type==="polygon"){const L=it(P,t.current,f);if(!pt(L,f))return;const B=ms(k,T,L,f);return void(B&&g([Ha(T,B.lineIndex,L,f)]))}if(T?.type==="curve"){const L=it(P,t.current,f);if(!pt(L,f))return;const B=((W,F,R,q,oe=50)=>{if(F.locked||F.points.length<2)return!1;if(F.points.length<3)return ms(W,F,R,q,oe);const{center:se}=F.computed,G=Ae(R,F.rotation??0,se);W.lineWidth=(F.style?.lineWidth??0)+oe/q.canvasZoom;const N=_t(F,F.points),de=new Path2D;de.moveTo(...N[0]);for(let te=1;te<N.length-2;te++){const fe=N[te-1],ve=N[te],me=N[te+1],K=N[te+2],{cp1:ue,cp2:X}=Kt(fe,ve,me,K);if(de.bezierCurveTo(ue[0],ue[1],X[0],X[1],me[0],me[1]),W.isPointInStroke(de,G[0],G[1]))return{lineIndex:te-1}}return!1})(k,T,L,f);return void(B&&g([Ta(T,B.lineIndex,L,f)]))}}}),()=>{H(S)}):void 0},[g,A,H,r,t,c,l,b,f]),{hoverMode:C}},Ys=e=>e.childNodes.length?Array.from(e.childNodes).map(t=>Ys(t)).join(""):e.nodeValue??"",so=({disabled:e=!1,shape:t,defaultValue:n,updateValue:s,saveShapes:a,settings:o})=>{const c=y.useRef(null),r=y.useRef(a);y.useEffect(()=>{if(!c.current)return;const u=c.current,d=p=>{p.preventDefault();const m=p.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,m)};u.addEventListener("paste",d),u.innerText="";for(const p of n){const m=document.createElement("div");p===""?m.innerHTML="<br/>":m.innerText=p,u.appendChild(m)}return u.focus(),()=>{u.removeEventListener("paste",d)}},[n]),y.useEffect(()=>{const u=r.current;return()=>{u()}},[]);const i=y.useMemo(()=>{const{borders:u,center:d}=t.computed;return ne({point:[u.x,u.y],rotation:-(t.rotation??0),origin:d})},[t]),l=[`translate3D(${(i[0]+o.canvasOffset[0])*o.canvasSize.scaleRatio}px, ${(i[1]+o.canvasOffset[1])*o.canvasSize.scaleRatio}px, 0)`,`rotate(${qt(t.rotation??0)}deg)`,t.flipX||t.flipY?`scale(${t.flipX?-1:1}, ${t.flipY?-1:1})`:void 0,t.flipX||t.flipY?`translate3D(${t.flipX?-100:0}%,${t.flipY?-100:0}%,0)`:void 0].filter(Boolean).join(" ");return h.jsx("div",{className:"react-paint-editor-toolbox-edittextbox",ref:c,"data-fontbold":t.style?.fontBold??!1,"data-fontitalic":t.style?.fontItalic??!1,contentEditable:!e,onInput:u=>{const d=Array.from(u.target.childNodes).map(p=>Ys(p));s(d)},style:{"--react-paint-editor-toolbox-edittextbox-transform":l,"--react-paint-editor-toolbox-edittextbox-fontsize":t.fontSize*o.canvasSize.scaleRatio+"px","--react-paint-editor-toolbox-edittextbox-padding":o.selectionPadding*o.canvasSize.scaleRatio+"px","--react-paint-editor-toolbox-edittextbox-color":t.style?.strokeColor??"inherit","--react-paint-editor-toolbox-edittextbox-opacity":(t.style?.opacity??100)/100,"--react-paint-editor-toolbox-edittextbox-fontfamily":t.style?.fontFamily??dt}})},ao=(e,t,n,s,a)=>{ss(e),((o,c)=>{const{canvasZoom:r,size:i,canvasSize:{width:l,height:u}}=c;if(i!=="fixed"||r>=1)return;o.fillStyle="#f5f5f5",o.fillRect(0,0,l,u);const d=xs(c);o.clearRect(d.x,d.y,d.width,d.height),Qs(o,c)})(e,n),((o,c)=>{const{canvasSize:{width:r,height:i},gridGap:l,canvasOffset:u,canvasSize:{scaleRatio:d}}=c;if(!l)return;o.strokeStyle="rgb(220,220,220)",o.lineWidth=1,o.save(),o.scale(d,d),o.beginPath();const p=u[0]%l,m=u[1]%l,v=Math.ceil(r/d/l)+2,g=Math.ceil(i/d/l)+2;for(let x=-5;x<v;x++)o.moveTo(p+(x+1)*l,m-l),o.lineTo(p+(x+1)*l,m+i/d+l);for(let x=-5;x<g;x++)o.moveTo(p-l,m+(x+1)*l),o.lineTo(p+r/d+l,m+(x+1)*l);o.stroke(),o.restore()})(e,n);for(let o=s.length-1;o>=0;o--)t.mode==="textedition"&&s[o]===a||Zs(e,Y(a).find(c=>c.id===s[o].id)??s[o],n)},oo=y.forwardRef(({canGrow:e,shapes:t,duplicateShapes:n,addShapes:s,updateSingleShape:a,selectedShape:o,setSelectedShape:c,setSelectionFrame:r,hoveredShape:i,selectionFrame:l,refreshHoveredShape:u,refreshSelectedShapes:d,saveShapes:p,activeTool:m,setActiveTool:v,canvasOffsetStartData:g,setCanvasOffsetStartData:x,setCanvasOffset:M,setCanvasMoveAcceleration:b,isInsideComponent:Q,selectionMode:f,setSelectionMode:w,selectionWidth:j,selectionColor:E,settings:V,isEditMode:C,isShiftPressed:Z,isAltPressed:A,isSpacePressed:H,withFrameSelection:O,withSkeleton:D},I)=>{const $=y.useRef(null),U=y.useRef(null),z=V.canvasSize,S=C,k=C?0:-1;y.useImperativeHandle(I,()=>$.current);const{hoverMode:P}=no({addShapes:s,drawCanvasRef:$,setActiveTool:v,shapes:t,selectionMode:f,activeTool:m,isInsideComponent:Q,setCanvasOffset:M,selectedShape:o,canvasOffsetStartData:g,setCanvasOffsetStartData:x,setSelectedShape:c,setSelectionFrame:r,refreshHoveredShape:u,refreshSelectedShapes:d,updateSingleShape:a,duplicateShapes:n,saveShapes:p,setSelectionMode:w,setCanvasMoveAcceleration:b,isShiftPressed:Z,isAltPressed:A,withFrameSelection:O,settings:V,isSpacePressed:H}),T=y.useCallback(B=>{const W=Y(o)[0];if(W?.type!=="text")return;const F=$.current?.getContext("2d");if(!F)return;const R=Ee(Xa(F,W,B,V),V);a([R])},[a,o,V]),L=B=>{if(C)return B.preventDefault(),B.stopPropagation(),!1};return y.useEffect(()=>{const B=$.current?.getContext("2d");B&&window.requestAnimationFrame(()=>ao(B,f,V,t,o))},[t,f,o,V]),y.useEffect(()=>{const B=U.current?.getContext("2d");B&&window.requestAnimationFrame(()=>((W,F,R,q,oe,se,G,N,de,te,fe)=>{W.reset(),Qs(W,R),fe&&N&&!Y(G).find(ve=>ve.id===N.id)&&q.type==="selection"&&F.mode==="default"&&As({ctx:W,shape:N,settings:R,selectionWidth:oe,selectionColor:se,hoverMode:de,selectionMode:F,withAnchors:!1}),G&&q.type!=="brush"&&As({ctx:W,shape:G,settings:R,selectionWidth:oe,selectionColor:se,hoverMode:de,selectionMode:F,withAnchors:F.mode!=="textedition"}),te&&qa({ctx:W,selectionFrame:te,settings:R})})(B,f,V,m,j,E,o,i,P,l,D))},[i,P,l,f,o,m,V,j,E,D]),h.jsx("div",{className:"react-paint-canvas-box",style:{"--react-paint-canvas-cursor":g?"grabbing":P.outOfView?"default":P.mode==="resize"?"pointer":m.type!=="selection"&&m.type!=="move"?"crosshair":P.mode==="translate"?"move":P.mode==="rotate"||m.type==="move"||H?"grab":"default"},children:h.jsxs("div",{className:"react-paint-canvas-container","data-grow":e,children:[h.jsx("canvas",{className:_n,ref:$,"data-grow":e,width:z.width,height:z.height,onContextMenu:L,tabIndex:k}),S&&h.jsx("canvas",{className:Kn,ref:U,width:z.width,height:z.height,"data-grow":e,onContextMenu:L}),C&&f.mode==="textedition"&&Y(o)[0]?.type==="text"&&h.jsx(so,{disabled:!V.features.edition,shape:Y(o)[0],defaultValue:f.defaultValue,updateValue:T,saveShapes:p,settings:V})]})})}),Xs="ArrowUp",$s="ArrowDown",Us="ArrowLeft",qs="ArrowRight",io="Delete",ro="Backspace",lo="Escape",Gs="Shift",_s="Alt",Ks="Option",Lt=" ",co="z",uo="Z",ho="y",po="Y",go="+",fo="-",vo="0",Js="copy",ea="paste",mo=({isInsideComponent:e,isInsideCanvas:t,selectedShape:n,isEditingText:s,settings:a,setSelectedShape:o,setActiveTool:c,setCanvasZoom:r,resetZoom:i,setSelectionMode:l,setSelectionFrame:u,removeShape:d,pasteShapes:p,updateShapes:m,backwardShape:v,forwardShape:g,setShiftPressed:x,setAltPressed:M,setIsSpacePressed:b})=>{const[Q,f]=y.useState(void 0);return y.useEffect(()=>{const w=C=>{n&&(s||(C.preventDefault(),f({...n})))},j=C=>{Q&&(s||(C.preventDefault(),p(((Z,A)=>Y(Z).map(H=>({...zs(H,20,20,A),id:le(`${H.type}_`)})))(Q,a))))},E=C=>{switch(C.key){case Gs:x(!1);break;case _s:case Ks:M(!1);break;case Lt:b(!1)}},V=C=>{if(C.metaKey||C.ctrlKey){if(C.key===uo||C.key===co)return C.preventDefault(),C.stopPropagation(),void(C.shiftKey?g():v());if(!ns()&&(C.key===po||C.key===ho))return C.preventDefault(),C.stopPropagation(),void g();if(C.key===go)return C.preventDefault(),C.stopPropagation(),void r("zoom");if(C.key===fo)return C.preventDefault(),C.stopPropagation(),void r("unzoom");if(C.key===vo)return C.preventDefault(),C.stopPropagation(),void i()}if(C.key===Gs)return C.preventDefault(),C.stopPropagation(),void x(!0);if(C.key===Lt&&t)return C.preventDefault(),C.stopPropagation(),void b(!0);if(C.key===_s||C.key===Ks)return C.preventDefault(),C.stopPropagation(),void M(!0);if(!n)return;if(C.key===lo)return o(void 0),c(Re),l({mode:"default"}),void u(void 0);if(s)return;const Z={[Us]:[a.gridGap?-a.gridGap:-1,0],[qs]:[a.gridGap?a.gridGap:1,0],[$s]:[0,a.gridGap?a.gridGap:1],[Xs]:[0,a.gridGap?-a.gridGap:-1]};switch(C.key){case Us:case qs:case $s:case Xs:C.preventDefault(),C.stopPropagation(),m(Ts(Z[C.key],n,[0,0],a,!0));break;case io:case ro:C.preventDefault(),C.stopPropagation(),d(Y(n))}};if(e)return document.addEventListener("keydown",V),document.addEventListener("keyup",E),document.addEventListener(Js,w),document.addEventListener(ea,j),()=>{document.removeEventListener("keydown",V),document.removeEventListener("keyup",E),document.removeEventListener(Js,w),document.removeEventListener(ea,j)}},[e,t,Q,s,n,a,m,d,o,p,v,g,x,M,c,l,u,r,i,b]),{}},yo=({isLoading:e=!1})=>{const[t,n]=y.useState("hidden");return y.useEffect(()=>{if(!e){n("fadeOut");const s=setTimeout(()=>n("hidden"),300);return()=>{clearTimeout(s)}}n("visible")},[e]),t==="hidden"?null:h.jsx("div",{className:"react-paint-editor-loading","data-loading":t,style:{"--react-paint-editor-loading-zindex":ga,"--react-paint-editor-loading-transition-duration":"300ms"},children:h.jsxs("div",{className:"react-paint-editor-loader",children:[h.jsx("div",{}),h.jsx("div",{}),h.jsx("div",{}),h.jsx("div",{})]})})},So="infos",xo=4e3,Qo=({type:e,text:t,duration:n})=>{const[s,a]=y.useState(!1);return y.useEffect(()=>{const o=setTimeout(()=>{a(!0)},100),c=setTimeout(()=>{a(!1)},n-500-100);return()=>{clearTimeout(o),clearTimeout(c)}},[n]),h.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+s,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:t})},bo=({snackbarList:e})=>h.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":fa},children:e.map(t=>h.jsx(Qo,{...t},t.id))}),wo=y.forwardRef((e,t)=>{const{hidden:n=!1,disabled:s=!1,selected:a=!1,icon:o,children:c,className:r="",title:i,onClick:l,...u}=e,d=s?-1:0,p=y.useRef(null);return y.useImperativeHandle(t,()=>p.current),h.jsxs("label",{className:`react-paint-editor-button ${r}`,title:i,onClick:l,"data-disabled":+s,"data-selected":+a,"data-hidden":+n,tabIndex:d,onKeyDown:m=>{m.key===Lt&&(m.preventDefault(),m.stopPropagation())},onKeyUp:m=>{m.preventDefault(),m.stopPropagation(),m.key===Lt&&p.current?.click()},children:[h.jsx("input",{ref:p,disabled:s,...u}),h.jsxs("span",{className:"react-paint-editor-button-content",children:[c&&h.jsx("span",{className:"react-paint-editor-button-children",children:c}),o&&h.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:o}})]})]})}),_=y.forwardRef((e,t)=>{if(e.type==="file"||e.type==="color")return h.jsx(wo,{...e,ref:t});const{hidden:n=!1,disabled:s=!1,selected:a=!1,icon:o,children:c,type:r="button",className:i="",...l}=e;return h.jsx("button",{className:`react-paint-editor-button ${i}`,ref:t,disabled:s,"data-disabled":+s,"data-selected":+a,"data-hidden":+n,type:r,...l,children:h.jsxs("span",{className:"react-paint-editor-button-content",children:[c&&h.jsx("span",{className:"react-paint-editor-button-children",children:c}),o&&h.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:o}})]})})}),Ue=({children:e,title:t="",className:n="",position:s="bottom",fitContainer:a=!1,alignment:o="center",style:c,...r})=>h.jsxs("div",{className:`react-paint-editor-panel ${n}`,"data-fitcontainer":a,"data-position":s,"data-alignment":o,style:{...c,"--react-paint-editor-panel-zindex":Tn},...r,children:[t&&h.jsx("h3",{className:"react-paint-editor-panel-title",children:t}),e]}),Co=e=>{switch(e){case"brush":return Qn;case"line":return Mn;case"polygon":return Wt;case"curve":return kn;case"rect":case"square":return Rt;case"circle":case"ellipse":return It;case"text":return Cn;case"picture":return Nt;case"group":return'<svg><path d="M3.333 17.5V16.667H7.5V17.5ZM3.333 14.167V13.333H9.167V14.167ZM3.333 10.833V10H10.833V10.833ZM3.333 7.5V6.667H12.5V7.5ZM3.333 4.167V3.333H13.333V4.167ZM3.333 0.833V0H16.667V0.833Z"/></svg>';case"triangle":return""}},Mo=({disabled:e=!1,shape:t,selected:n,layoutDragging:s,toggleShapeVisibility:a,toggleShapeLock:o,setLayoutDragging:c,handleRemove:r,handleSelect:i,onMoveShapes:l})=>{const u=y.useRef(null),{isOver:d}=(({disabled:p=!1,ref:m,shape:v,layoutDragging:g,setLayoutDragging:x,handleSelect:M,onMoveShapes:b})=>{const[Q,f]=y.useState(!1);return y.useEffect(()=>{g||f(!1)},[g]),y.useEffect(()=>{const w=m.current;if(!w)return;const j=()=>{x(void 0)},E=H=>(H.preventDefault&&H.preventDefault(),!1),V=H=>{M([v]),H.dataTransfer&&(H.dataTransfer.effectAllowed="move",H.dataTransfer.setData("draggableShapeId",v.id),x(v.id))},C=()=>{g!==v.id&&f(!0)},Z=()=>{f(!1)},A=H=>(H.stopPropagation(),H.dataTransfer&&b(H.dataTransfer.getData("draggableShapeId"),v.id),!1);return p||(w.addEventListener("dragstart",V),w.addEventListener("dragend",j),w.addEventListener("dragover",E),w.addEventListener("dragenter",C),w.addEventListener("dragleave",Z),w.addEventListener("drop",A)),()=>{p||(w.removeEventListener("dragstart",V),w.removeEventListener("dragend",j),w.removeEventListener("dragover",E),w.removeEventListener("dragenter",C),w.removeEventListener("dragleave",Z),w.removeEventListener("drop",A))}},[p,m,v,x,M,b,g]),{isOver:Q}})({disabled:e,ref:u,shape:t,layoutDragging:s,setLayoutDragging:c,handleSelect:i,onMoveShapes:l});return h.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(s===t.id),"data-is-over":+d,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),i([t]))},"data-selected":+n,ref:u,tabIndex:-1,children:[h.jsx("span",{dangerouslySetInnerHTML:{__html:Co(t.type)}}),h.jsx("span",{children:t.id}),h.jsx("div",{className:"react-paint-editor-layouts-separator"}),h.jsx(_,{className:"react-paint-editor-layouts-visible-button",title:t.visible?"Hide":"Show","data-visible":t.visible!==!1,disabled:e,selected:n,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),a([t]))},icon:t.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>'}),h.jsx(_,{className:"react-paint-editor-layouts-locked-button",title:t.locked?"Locked":"Unlocked","data-locked":!!t.locked,disabled:e,selected:n,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),o([t]))},icon:t.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>'}),h.jsx(_,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),r([t]))},icon:bn})]})},ko=({gridFormat:e,setGridFormat:t,settings:n,shapes:s,removeShape:a,toggleShapeVisibility:o,toggleShapeLock:c,selectedShapes:r,moveShapes:i,selectShapes:l,isLayoutPanelShown:u})=>{const[d,p]=y.useState(void 0),m=!n.features.edition;return u?h.jsx(Ue,{alignment:"right",className:"react-paint-editor-layouts-panel",children:h.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:h.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[h.jsxs("div",{className:"react-paint-editor-layouts-row",children:[h.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),h.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:m,onClick:()=>t("none")}),["small","medium","large"].map(v=>h.jsx(_,{className:"react-paint-editor-layouts-grid-button",selected:e===v,disabled:m,onClick:()=>t(v),children:v.charAt(0).toUpperCase()},v))]}),h.jsx("hr",{}),h.jsx("div",{className:"react-paint-editor-layouts",children:s.length===0?h.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):s.map(v=>h.jsx(Mo,{shape:v,disabled:m,layoutDragging:d,setLayoutDragging:p,selected:Y(r).some(g=>g.id===v.id)??!1,handleSelect:l,handleRemove:a,onMoveShapes:i,toggleShapeVisibility:o,toggleShapeLock:c},v.id))})]})})}):null},jt=({children:e,onClose:t,position:n="center",title:s,className:a=""})=>h.jsxs("div",{className:"react-paint-editor-modal","data-position":n,style:{"--react-paint-editor-modal-zindex":Tn},role:"dialog","aria-modal":"true","aria-labelledby":s,children:[h.jsx("div",{className:"react-paint-editor-modal-mask",onClick:t}),h.jsx("div",{className:`react-paint-editor-modal-panel ${a}`,children:e})]}),Vt=({selectedSettings:e,setSelectedSettings:t,title:n="Choisissez une couleur",mode:s="fill",disabled:a=!1,values:o,field:c,value:r="",valueChanged:i})=>{const[l]=y.useState(le("settings_")),u=e===l;return o.length?h.jsxs(h.Fragment,{children:[h.jsx(_,{selected:u,title:n,disabled:a,onClick:()=>{t(d=>d===l?void 0:l)},icon:r==="transparent"?s==="fill"?Zn:Vn:void 0,children:r!=="transparent"&&h.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":s,style:{"--react-paint-editor-colorfield-color-value":r}})}),u&&h.jsx(Ue,{title:n,alignment:"left",children:h.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[o.map(d=>h.jsx(_,{title:d,selected:d===r,color:d,icon:d==="transparent"?s==="fill"?Zn:Vn:void 0,onClick:()=>{i(c,d)},children:d!=="transparent"&&h.jsx("div",{className:"react-paint-editor-colorfield-color",color:d,"data-mode":s,style:{"--react-paint-editor-colorfield-color-value":d}})},d)),h.jsx(_,{type:"color",title:"Custom color",selected:r!==""&&!o.includes(r),value:r,onChange:d=>{const p=+d.target.value;i(c,Number.isNaN(p)?d.target.value:p)},children:h.jsx("div",{className:"react-paint-editor-colorfield-customcolor",style:{"--react-paint-editor-colorfield-color-value":o.includes(r)?"var(--react-paint-editor-app-font-color)":r},children:h.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},Po=({disabled:e=!1,selectedShape:t,removeShape:n})=>h.jsx(_,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{n(Y(t))},icon:bn}),Zt=({CustomOption:e,selectedSettings:t,setSelectedSettings:n,title:s="Choisissez l'option",disabled:a=!1,field:o,icon:c,values:r,defaultValue:i,valueChanged:l})=>{const[u]=y.useState(le("settings_")),d=t===u;return r.length?h.jsxs(h.Fragment,{children:[h.jsx(_,{selected:d,title:s,icon:c,disabled:a,onClick:()=>{n(p=>p===u?void 0:u)}}),d&&h.jsx(Ue,{title:s,alignment:"left",fitContainer:!0,children:h.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:r.map(p=>h.jsx(_,{title:`${p}`,onClick:()=>(m=>{l(o,m)})(p),selected:i===p,style:{"--react-paint-editor-button-padding":"16px"},children:h.jsx(e,{children:p})},p))})})]}):null},Lo=({children:e})=>h.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),ta=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:o})=>s.length?h.jsx(Zt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Lo,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:n,field:"fontFamily",values:s,defaultValue:a,valueChanged:o}):null,jo=({disabled:e,toggleLayoutPanel:t})=>h.jsx(_,{title:"Toggle layers panel",disabled:e,onClick:t,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"}),Vo=({children:e})=>h.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[h.jsx("span",{className:"react-paint-editor-linearrow-left"}),h.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),na=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:o})=>s.length?h.jsx(Zt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Vo,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:n,field:"lineArrow",values:s,defaultValue:a,valueChanged:o}):null,Zo=({children:e})=>h.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{}),h.jsx("span",{})]}),sa=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:o})=>s.length?h.jsx(Zt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Zo,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:n,field:"lineDash",values:s,defaultValue:a,valueChanged:o}):null,Ht=({selectedSettings:e,setSelectedSettings:t,title:n="Choisissez l'intervalle",icon:s,disabled:a=!1,field:o,value:c,min:r=1,max:i=20,step:l=1,unity:u="",valueChanged:d,saveShapes:p})=>{const m=c===void 0,v=m?"N/A":`${Math.round(c)}${u}`,[g]=y.useState(le("settings_")),x=((b,Q=500)=>{const f=y.useRef(null),w=y.useCallback((...j)=>{f.current&&clearTimeout(f.current),f.current=setTimeout(()=>b(...j),Q)},[b,Q]);return y.useEffect(()=>()=>{f.current&&clearTimeout(f.current)},[]),w})(p),M=e===g;return r===i?null:h.jsxs(h.Fragment,{children:[h.jsx(_,{selected:M,title:n,disabled:a,icon:s,onClick:()=>{t(b=>b===g?void 0:g)}}),M&&h.jsx(Ue,{title:n,alignment:"left",fitContainer:!0,children:h.jsx("div",{children:h.jsxs("label",{className:"react-paint-editor-rangefield",children:[h.jsx("input",{type:"range",min:r,max:i,step:l,value:c??(i+r)/2,"data-indeterminate":+m,onChange:b=>{const Q=+b.target.value,f=Number.isNaN(Q)?b.target.value:Q;d(o,f,!1),x()}}),h.jsx("span",{children:v})]})})})]})},Ho=({children:e})=>h.jsx("span",{children:e===0?"Non":"Oui"}),zo=[0,1],aa=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,defaultValue:s,valueChanged:a})=>h.jsx(Zt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Ho,title:"Fermer les points",icon:Wt,disabled:n,field:"closedPoints",values:zo,defaultValue:s,valueChanged:a}),To=({disabled:e=!1,className:t,toggleZoomPanel:n})=>h.jsx(_,{title:"Toggle zoom panel",disabled:e,onClick:n,icon:Hn,className:t?` ${t}`:""}),zt=({setSelectedSettings:e,disabled:t=!1,field:n,icon:s,values:a,value:o=!1,valueChanged:c})=>{const[r]=y.useState(le("settings_"));return a.length!==2?null:h.jsx(_,{onClick:()=>{e(i=>i===r?void 0:r),c(n,!o)},selected:o,disabled:t,icon:s})},hn=({activeTool:e,selectedShape:t,selectedShapeTool:n,disabled:s,selectedSettings:a,setSelectedSettings:o,saveShapes:c,handleShapeStyleChange:r,handleShapeFontFamilyChange:i})=>t?n&&h.jsxs(h.Fragment,{children:["strokeColor"in n.settings&&!n.settings.strokeColor.hidden&&h.jsx(Vt,{selectedSettings:a,setSelectedSettings:o,title:"Couleur du trait",mode:"stroke",disabled:s,field:"strokeColor",value:t.style?.strokeColor,valueChanged:r,values:n.settings.strokeColor.values}),"fillColor"in n.settings&&!n.settings.fillColor.hidden&&h.jsx(Vt,{selectedSettings:a,setSelectedSettings:o,title:"Couleur de fond",disabled:s,field:"fillColor",value:t.style?.fillColor,valueChanged:r,values:n.settings.fillColor.values}),"lineWidth"in n.settings&&!n.settings.lineWidth.hidden&&h.jsx(Ht,{saveShapes:c,selectedSettings:a,setSelectedSettings:o,title:"Epaisseur du trait",icon:jn,disabled:s,field:"lineWidth",value:t.style?.lineWidth,valueChanged:r,unity:"px",min:n.settings.lineWidth.min,max:n.settings.lineWidth.max,step:n.settings.lineWidth.step}),"lineDash"in n.settings&&!n.settings.lineDash.hidden&&h.jsx(sa,{selectedSettings:a,setSelectedSettings:o,disabled:s,defaultValue:t.style?.lineDash,valueChanged:r,values:n.settings.lineDash.values}),"lineArrow"in n.settings&&!n.settings.lineArrow.hidden&&h.jsx(na,{selectedSettings:a,setSelectedSettings:o,disabled:s,defaultValue:t.style?.lineArrow,valueChanged:r,values:n.settings.lineArrow.values}),"closedPoints"in n.settings&&!n.settings.closedPoints.hidden&&h.jsx(aa,{selectedSettings:a,setSelectedSettings:o,disabled:s,valueChanged:r,defaultValue:t.style?.closedPoints}),"fontFamily"in n.settings&&!n.settings.fontFamily.hidden&&h.jsx(ta,{selectedSettings:a,setSelectedSettings:o,disabled:s,valueChanged:i,values:n.settings.fontFamily.values,defaultValue:t.style?.fontFamily}),"fontBold"in n.settings&&!n.settings.fontBold.hidden&&h.jsx(zt,{setSelectedSettings:o,disabled:s,field:"fontBold",icon:Pn,valueChanged:i,values:n.settings.fontBold.values,value:t.style?.fontBold}),"fontItalic"in n.settings&&!n.settings.fontItalic.hidden&&h.jsx(zt,{setSelectedSettings:o,disabled:s,field:"fontItalic",icon:Ln,valueChanged:i,values:n.settings.fontItalic.values,value:t.style?.fontItalic}),"opacity"in n.settings&&!n.settings.opacity.hidden&&h.jsx(Ht,{saveShapes:c,selectedSettings:a,setSelectedSettings:o,title:"Opacité",icon:wn,min:n.settings.opacity.min,max:n.settings.opacity.max,step:n.settings.opacity.step,unity:"%",disabled:s,field:"opacity",value:t.style?.opacity,valueChanged:r})]}):"settings"in e?h.jsxs(h.Fragment,{children:["strokeColor"in e.settings&&!e.settings.strokeColor.hidden&&h.jsx(Vt,{selectedSettings:a,setSelectedSettings:o,title:"Couleur du trait",mode:"stroke",disabled:s,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:r,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&!e.settings.fillColor.hidden&&h.jsx(Vt,{selectedSettings:a,setSelectedSettings:o,title:"Couleur de fond",disabled:s,field:"fillColor",value:e.settings.fillColor.default,valueChanged:r,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&!e.settings.lineWidth.hidden&&h.jsx(Ht,{saveShapes:c,selectedSettings:a,setSelectedSettings:o,title:"Epaisseur du trait",disabled:s,field:"lineWidth",icon:jn,value:e.settings.lineWidth.default,valueChanged:r,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&!e.settings.lineDash.hidden&&h.jsx(sa,{selectedSettings:a,setSelectedSettings:o,disabled:s,defaultValue:e.settings.lineDash.default,valueChanged:r,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&!e.settings.lineArrow.hidden&&h.jsx(na,{selectedSettings:a,setSelectedSettings:o,disabled:s,defaultValue:e.settings.lineArrow.default,valueChanged:r,values:e.settings.lineArrow.values}),"closedPoints"in e.settings&&!e.settings.closedPoints.hidden&&h.jsx(aa,{selectedSettings:a,setSelectedSettings:o,disabled:s,valueChanged:r,defaultValue:e.settings?.closedPoints.default}),"fontFamily"in e.settings&&!e.settings.fontFamily.hidden&&h.jsx(ta,{selectedSettings:a,setSelectedSettings:o,disabled:s,valueChanged:i,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&!e.settings.fontBold.hidden&&h.jsx(zt,{setSelectedSettings:o,disabled:s,field:"fontBold",icon:Pn,valueChanged:i,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&!e.settings.fontItalic.hidden&&h.jsx(zt,{setSelectedSettings:o,disabled:s,field:"fontItalic",icon:Ln,valueChanged:i,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&!e.settings.opacity.hidden&&h.jsx(Ht,{saveShapes:c,selectedSettings:a,setSelectedSettings:o,title:"Opacité",icon:wn,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:"%",disabled:s,field:"opacity",value:e.settings.opacity.default,valueChanged:r})]}):null,Ao=({width:e,availableTools:t,updateToolSettings:n,layersManipulation:s=!1,toggleLayoutPanel:a,activeTool:o,saveShapes:c,selectedShape:r,canvas:i,settings:l,updateShape:u,removeShape:d,isZoomPanelShown:p,setIsZoomPanelShown:m})=>{const[v,g]=y.useState(void 0),[x,M]=y.useState(!1),b=l.size==="infinite"||l.features.zoom,Q=!l.features.edition,f=()=>{M(Z=>!Z)},w=((Z,A)=>{const H=Y(Z).map(D=>A.find(I=>I.id===D?.toolId)||A.find(I=>I.type===D?.type)).filter(D=>D!==void 0);if(!H.length)return;if(H.length===1)return H[0];const O=H.slice(1).reduce((D,I)=>{const $={};for(const U in I.settings){if(D[U]===void 0||I.settings[U]?.hidden||D[U]?.hidden)continue;const z=D[U],S=I.settings[U],k={};"min"in S&&"min"in z&&S.min===z.min&&"max"in S&&"max"in z&&S.max===z.max&&"step"in S&&"step"in z&&S.step===z.step&&(k.min=S.min,k.max=S.max,k.step=S.step),"values"in S&&"values"in z&&S.values?.join(",")===z.values?.join(",")&&(k.values=S.values),(Object.keys(k).length>0||U==="closedPoints")&&($[U]=k)}return $},H[0].settings);return{id:H.map(D=>D.id).join("-"),icon:"",label:"group",type:"group",settings:O}})(r,t),j=(w?Object.keys(w.settings).length+1:"settings"in o?Object.keys(o.settings).length:0)+ +s+ +b,E=e<40*j,V=(Z,A,H=!0)=>{if(Y(r).length){const O=Y(r).map(D=>Ee(Qe(["style",Z],A,D),l));u(O,H),w&&n(w.id,Z,A)}else n(o.id,Z,A)},C=(Z,A)=>{if(Y(r).length){const H=Y(r).map(O=>{if(O.type!=="text")return O;const D=i?.getContext("2d");if(!D)return O;const I=Qe(["style",Z],A,O),$=Pt(D,I.value,I.width,I.style?.fontBold??!1,I.style?.fontItalic??!1,I.style?.fontFamily);return Ee({...I,fontSize:$,height:$*I.value.length},l)});u(H,!0),w&&n(w.id,Z,A)}else n(o.id,Z,A)};return h.jsxs(h.Fragment,{children:[h.jsxs("div",{className:"react-paint-editor-settings-bar",children:[h.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[b&&h.jsx(To,{className:p?"react-paint-editor-bar-zoom-button-opened":void 0,toggleZoomPanel:()=>{m(Z=>!Z)}}),E&&j>2&&h.jsx(_,{disabled:Q,onClick:f,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?w&&h.jsxs(h.Fragment,{children:[!E&&h.jsx(hn,{saveShapes:c,activeTool:o,selectedShape:r,selectedShapeTool:w,disabled:Q,selectedSettings:v,setSelectedSettings:g,handleShapeStyleChange:V,handleShapeFontFamilyChange:C}),o.type==="selection"&&h.jsx(Po,{disabled:Q,selectedShape:r,removeShape:d})]}):!E&&h.jsx(hn,{saveShapes:c,activeTool:o,selectedShape:r,selectedShapeTool:w,disabled:Q,selectedSettings:v,setSelectedSettings:g,handleShapeStyleChange:V,handleShapeFontFamilyChange:C})]}),h.jsx("div",{className:"react-paint-editor-settings-separator"}),s&&h.jsx(jo,{disabled:Q,toggleLayoutPanel:a})]}),x&&h.jsx(jt,{className:"react-paint-editor-settings-modal",onClose:f,position:"bottom",title:"Settings",children:h.jsx(hn,{saveShapes:c,activeTool:o,selectedShape:r,selectedShapeTool:w,disabled:Q,selectedSettings:v,setSelectedSettings:g,handleShapeStyleChange:V,handleShapeFontFamilyChange:C})})]})},oa=({disabled:e=!1,withText:t=!1,loadFile:n,type:s,img:a,accept:o})=>{const c=y.useRef(null);return h.jsx(_,{ref:c,type:"file",onClick:r=>{r.stopPropagation(),c.current&&(c.current.value="")},onChange:r=>{const i=r.target.files?.item(0);i&&n(i)},accept:o,title:s.label??s.type,icon:a,disabled:e,children:t?s.label:void 0})},Ce=({type:e,img:t,isActive:n,withText:s=!1,disabled:a=!1,setActive:o})=>h.jsx(_,{disabled:a,selected:n,onClick:()=>{o(e)},title:e.label??e.type,icon:t,children:s?e.label:void 0}),Eo=({activeTool:e,withActionsInMenu:t,hasActionToUndo:n=!1,hasActionToRedo:s=!1,hasActionToClear:a=!1,undoAction:o,redoAction:c,clearCanvas:r,alignment:i,group:l,vertical:u=!1,disabled:d=!1,withLoadAndSave:p,withExport:m,addPicture:v,loadFile:g,togglePictureUrlModal:x,saveFile:M,toggleExportModal:b,withUploadPicture:Q,withUrlPicture:f})=>{const[w,j]=y.useState(!1),[,E]=y.useTransition(),V=l?.tools?.some(Z=>Z===e.type),C=(V?e.icon:l.img)??l.title;return y.useEffect(()=>{if(!w)return;const Z=()=>{j(!1)};return document.addEventListener("click",Z),()=>{document.removeEventListener("click",Z)}},[w]),t||Q||f||p||m?h.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[h.jsx(_,{selected:V,title:l.title,disabled:d,onClick:()=>{E(()=>{j(!0)})},icon:C}),w&&h.jsx(Ue,{alignment:i,position:"top",children:h.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+u,children:[t&&h.jsxs(h.Fragment,{children:[h.jsx(Ce,{withText:!0,type:et,disabled:d||!n,img:et.icon,isActive:e.id===et.id,setActive:o}),h.jsx(Ce,{withText:!0,type:tt,disabled:d||!s,img:tt.icon,isActive:e.id===tt.id,setActive:c}),h.jsx(Ce,{withText:!0,type:nt,disabled:d||!a,img:nt.icon,isActive:e.id===nt.id,setActive:r}),(Q||f||p)&&h.jsx("hr",{})]}),Q&&h.jsx(oa,{withText:!0,type:Xn,disabled:d,loadFile:async Z=>{j(!1),await v(Z)},img:Xn.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml, image/webp"}),f&&h.jsx(_,{disabled:d,selected:!1,onClick:x,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"}),(Q||f)&&p&&h.jsx("hr",{}),p&&h.jsxs(h.Fragment,{children:[h.jsx(oa,{withText:!0,type:Yn,disabled:d,loadFile:Z=>{j(!1),g(Z)},img:Yn.icon,accept:"application/JSON"}),h.jsx(Ce,{withText:!0,disabled:d,type:Ot,img:Ot.icon,isActive:e.id===Ot.id,setActive:M})]}),m&&h.jsx(Ce,{withText:!0,disabled:d,type:Bt,img:Bt.icon,isActive:e.id===Bt.id,setActive:b})]})})]}):null},Do=({togglePictureUrlModal:e,addPicture:t})=>{const n=y.useRef(null);return y.useEffect(()=>{n.current&&n.current.focus()},[]),h.jsx(jt,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,title:"Add picture from URL",children:h.jsxs("form",{onSubmit:async s=>{s.preventDefault();const a=n.current?.value;a&&(await t(a),e())},children:[h.jsxs("label",{children:["URL ",h.jsx("input",{type:"text",ref:n})]}),h.jsx(_,{onClick:e,children:"Annuler"}),h.jsx(_,{type:"submit",selected:!0,children:"Ajouter"})]})})},ia="Choose export settings",Ro=({toggleExportModal:e,exportCanvasInFile:t})=>{const n=async s=>{t(s),e()};return h.jsxs(jt,{className:"react-paint-editor-toolbox-export-modal",onClose:e,title:ia,children:[h.jsx("h3",{children:ia}),h.jsx("hr",{}),h.jsx(_,{onClick:()=>n("currentZoom"),children:"Exporter la vue actuelle"}),h.jsx(_,{onClick:()=>n("defaultView"),children:"Exporter le canevas par défaut"}),h.jsx(_,{onClick:()=>n("fitToShapes"),children:"Exporter le dessin entier"}),h.jsx(_,{selected:!0,onClick:e,children:"Annuler"})]})},Io=({activeTool:e,alignment:t,group:n,disabled:s=!1,setActiveToolFromId:a})=>{const o=y.useRef(null),[c,r]=y.useState(!1),[,i]=y.useTransition(),[l,u]=y.useState(void 0),d=v=>{u(v),a(v.id)};if(y.useEffect(()=>{if(!c)return;const v=g=>{!((M,b)=>!!(M.target instanceof Node&&b)&&b.contains(M.target))(g,o.current)&&r(!1)};return document.addEventListener("mousedown",v,{passive:!1}),document.addEventListener("touchstart",v,{passive:!1}),()=>{document.removeEventListener("mousedown",v),document.removeEventListener("touchstart",v)}},[c]),"type"in n)return h.jsx(Ce,{disabled:s,type:n,img:n.icon,isActive:e.id===n.id,setActive:d});if(!n.toolsType.length)return null;if(n.toolsType?.length===1)return h.jsx(Ce,{disabled:s,type:n.toolsType[0],img:n.toolsType[0].icon,isActive:e.id===n.toolsType[0].id,setActive:d});const p=n?.toolsType.find(v=>v.type===e.type)!==void 0,m=(l?l.icon:n.toolsType?.[0]?.icon)??n.title;return h.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[h.jsx(_,{selected:p,title:n.title,disabled:s,onClick:()=>{l?a(l.id):n.toolsType?.[0]&&d(n.toolsType[0]),i(()=>{r(!0)})},icon:m}),c&&h.jsx(Ue,{alignment:t,position:"top",children:h.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+n.vertical,ref:o,children:n.toolsType.map(v=>h.jsx(Ce,{disabled:s,type:v,img:v.icon,isActive:e.id===v.id,setActive:d},v.id))})})]})},Wo=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],No=({settings:e,width:t,activeTool:n,hasActionToUndo:s=!1,hasActionToRedo:a=!1,hasActionToClear:o=!1,withLoadAndSave:c,withExport:r,clearCanvas:i,setActiveTool:l,undoAction:u,redoAction:d,addPicture:p,loadFile:m,saveFile:v,exportCanvasInFile:g,availableTools:x,withUrlPicture:M,withUploadPicture:b})=>{const Q=((z,S)=>{const k=S.flatMap(P=>{if(typeof P!="object")return z.filter(L=>L.type===P);const T=z.filter(L=>P.toolsType.includes(L.type));return T?{...P,toolsType:T}:null});return cn(k)})(x,Wo),f=!e.features.edition,w=t<40*(6+Q.length),j=t<40*(3+Q.length),[E,V]=y.useState(!1),[C,Z]=y.useState(!1),[A,H]=y.useState(!1),O=()=>{V(z=>!z)},D=()=>{H(z=>!z)},I=z=>{l(z),V(!1)},$=z=>{I(x.find(S=>S.id===z)??n)},U=x.find(z=>z.type===n.type)!==void 0;return h.jsxs(h.Fragment,{children:[h.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",style:{"--react-paint-editor-toolbar-minwidth":"160px"},children:[h.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[h.jsx(Ce,{type:Re,disabled:f,img:Re.icon,isActive:n.id===Re.id,setActive:I}),(e.size==="infinite"||e.features.zoom)&&h.jsx(Ce,{type:Yt,disabled:f,img:Yt.icon,isActive:n.id===Yt.id,setActive:I}),j?h.jsx(_,{disabled:f,onClick:O,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:U}):Q.map(z=>h.jsx(Io,{disabled:f,activeTool:n,group:z,setActiveToolFromId:$},"id"in z?z.id:z.title))]}),!w&&h.jsxs(h.Fragment,{children:[h.jsx(Ce,{type:et,disabled:f||!s,img:et.icon,isActive:n.id===et.id,setActive:u}),h.jsx(Ce,{type:tt,disabled:f||!a,img:tt.icon,isActive:n.id===tt.id,setActive:d}),h.jsx(Ce,{type:nt,disabled:f||!o,img:nt.icon,isActive:n.id===nt.id,setActive:i})]}),h.jsx(Eo,{withActionsInMenu:w,disabled:f,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:n,addPicture:p,loadFile:m,saveFile:v,togglePictureUrlModal:()=>{Z(!0)},toggleExportModal:D,withUploadPicture:b,withUrlPicture:M,withLoadAndSave:c,withExport:r,hasActionToUndo:s,hasActionToRedo:a,hasActionToClear:o,undoAction:u,redoAction:d,clearCanvas:i})]}),E&&h.jsx(jt,{className:"react-paint-editor-toolbar-modal",onClose:O,title:"Outils",children:x.map(z=>z.type==="picture"?null:h.jsx(Ce,{disabled:f,type:z,img:z.icon,withText:!1,isActive:n.id===z.id,setActive:I},z.id))}),C&&h.jsx(Do,{togglePictureUrlModal:()=>{Z(z=>!z)},addPicture:p}),A&&h.jsx(Ro,{toggleExportModal:D,exportCanvasInFile:g})]})},Tt={none:0,small:10,medium:20,large:40},Fo={toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8"},Bo=()=>{const e=y.useRef([]),[t,n]=y.useState([]);return y.useEffect(()=>()=>{for(const s of e.current)clearTimeout(s)},[]),{snackbarList:t,addSnackbar:({type:s=So,duration:a=xo,text:o})=>{const c={id:le("snackbar_"),duration:a,type:s,text:o};n(r=>[...r,c]),e.current=[...e.current,setTimeout(()=>{return r=c.id,void n(i=>i.filter(l=>l.id!==r));var r},a)]}}};De.Canvas=({options:e,className:t,style:n,canvasProps:s})=>{const{shapesRef:a,selectedShape:o,selectionFrame:c,hoveredShape:r,addShape:i,setSelectedShape:l,setSelectionFrame:u,refreshSelectedShapes:d,refreshHoveredShape:p,duplicateShapes:m,removeShape:v,updateShape:g,backwardShape:x,forwardShape:M,saveShapes:b,refs:Q,width:f,height:w,settings:j,setCanvasSize:E,setCanvasOffset:V,selectShapes:C,activeTool:Z,setActiveTool:A,isInsideComponent:H,isInsideCanvas:O,isEditMode:D,canvas:{withSkeleton:I,withFrameSelection:$,canGrow:U,canShrink:z},canvasOffsetStartData:S,setCanvasOffsetStartData:k,selectionMode:P,setSelectionMode:T,setCanvasMoveAcceleration:L,isShiftPressed:B,isAltPressed:W,isSpacePressed:F,setShiftPressed:R,setAltPressed:q,setCanvasZoom:oe,resetZoom:se,setIsSpacePressed:G}=s,{canvasBackgroundColor:N,canvasSelectionColor:de,canvasSelectionWidth:te}={...ya,...e},fe=y.useRef(null),ve=y.useCallback(K=>{i(K),C(K)},[i,C]),me=y.useCallback(K=>{E({realWidth:f,realHeight:w,width:K,height:w*K/f,scaleRatio:K/f})},[f,w,E]);return mo({isInsideComponent:H,isInsideCanvas:O,isEditingText:P.mode==="textedition",settings:j,selectedShape:o,setSelectedShape:l,removeShape:v,pasteShapes:ve,updateShapes:g,backwardShape:x,forwardShape:M,setShiftPressed:R,setAltPressed:q,setActiveTool:A,setSelectionMode:T,setSelectionFrame:u,setCanvasZoom:oe,resetZoom:se,setIsSpacePressed:G}),(({onResized:K,element:ue})=>{y.useEffect(()=>{const X=ue.current;if(!X)return;const ee=new ResizeObserver(Me=>{const ke=Me?.[0]?.borderBoxSize?.[0],{width:ae,height:je}=ke?{width:ke.inlineSize,height:ke.blockSize}:Me?.[0]?.contentRect??{};ae!==void 0&&je!==void 0&&K(ae,je)});return ee.observe(X),()=>{ee.unobserve(X)}},[ue,K])})({element:fe,onResized:me}),h.jsx("div",{ref:fe,className:"react-paint-app-row"+(t?` ${t}`:""),"data-grow":U,"data-shrink":z,style:{"--react-paint-app-row-width":j.canvasSize.width,"--react-paint-app-canvaswidth":f,"--react-paint-app-canvasheight":w,"--react-paint-app-row-aspectratio":`calc(${j.canvasSize.width} / ${j.canvasSize.height})`,"--react-paint-app-canvas-bg":N,...n},children:h.jsx(oo,{duplicateShapes:m,isSpacePressed:F,ref:Q.canvas,canGrow:U,isInsideComponent:H,activeTool:Z,setActiveTool:A,canvasOffsetStartData:S,setCanvasOffsetStartData:k,shapes:a.current,addShapes:i,updateSingleShape:g,selectedShape:o,selectionFrame:c,setSelectedShape:l,setSelectionFrame:u,hoveredShape:r,refreshHoveredShape:p,refreshSelectedShapes:d,settings:j,setCanvasOffset:V,saveShapes:b,selectionMode:P,setSelectionMode:T,setCanvasMoveAcceleration:L,selectionColor:de,selectionWidth:te,isEditMode:D,isShiftPressed:B,isAltPressed:W,withFrameSelection:$,withSkeleton:I})})},De.Editor=({editorProps:e,className:t,style:n,options:s,children:a})=>{const{shapesRef:o,addPictureShape:c,moveShapes:r,toggleShapeVisibility:i,toggleShapeLock:l,canGoBackward:u,canGoForward:d,canClear:p,selectedShape:m,removeShape:v,updateShape:g,backwardShape:x,forwardShape:M,refs:b,width:Q,height:f,selectTool:w,selectShapes:j,activeTool:E,setActiveTool:V,setAvailableTools:C,isEditMode:Z,availableTools:A,gridGap:H,setGridGap:O,loadFile:D,exportPicture:I,exportData:$,clearCanvas:U,settings:z,setCanvasZoom:S,saveShapes:k,canvas:{canGrow:P,layersManipulation:T,withExport:L,withLoadAndSave:B,withUploadPicture:W,withUrlPicture:F}}=e,{toolbarBackgroundColor:R,dividerColor:q,fontRadius:oe,fontDisabledColor:se,fontDisabledBackgroundColor:G,fontColor:N,fontBackgroundColor:de,fontSelectedColor:te,fontSelectedBackgroundColor:fe,fontHoverColor:ve,fontHoverBackgroundColor:me}={...Fo,...s},K=z.size==="infinite"||z.features.zoom,[ue,X]=y.useState(!1),[ee,Me]=y.useState(!1),[ke,ae]=y.useState(K),je=K&&ke,qe=H>=Tt.large?"large":H>=Tt.medium?"medium":H>=Tt.small?"small":"none",{snackbarList:pn,addSnackbar:Ze}=Bo(),gn=y.useCallback((he,pe,vt)=>{C(We=>We.map(lt=>lt.id===he?Qe(["settings",pe,"default"],vt,lt):lt)),V(We=>We.id===he?Qe(["settings",pe,"default"],vt,We):We)},[V,C]),fn=y.useCallback(he=>{X(!0);try{I(he)}catch(pe){pe instanceof Error&&Ze({type:"error",text:`L'export a échoué : ${pe.message}`}),console.warn(pe)}finally{X(!1)}},[I,Ze]),Ge=y.useCallback(()=>{X(!0);try{$(),X(!1)}catch(he){he instanceof Error&&Ze({type:"error",text:"L'enregistrement a échoué"}),console.warn(he)}finally{X(!1)}},[$,Ze]),vn=y.useCallback(async he=>{X(!0);try{await D(he),Ze({type:"success",text:"Fichier chargé !"})}catch(pe){pe instanceof Error&&Ze({type:"error",text:"Le chargement a échoué"}),console.warn(pe)}finally{X(!1)}},[D,Ze]),mn=y.useCallback(async he=>{X(!0);try{const pe=await c(he,Q,f);j([pe])}catch(pe){pe instanceof Error&&Ze({type:"error",text:"Le chargement a échoué"}),console.warn(pe)}finally{X(!1)}},[c,j,Ze,Q,f]),yn=`${t?`${t} `:""}${ee?"react-paint-editor-layout-opened ":""}react-paint-editor-app`;return h.jsxs("div",{ref:b.setEditor,className:yn,style:{"--react-paint-editor-app-maxWidth":P?"100%":`${Q}px`,"--react-paint-editor-app-toolbar-bg":R,"--react-paint-editor-app-divider-color":q,"--react-paint-editor-app-font-radius":oe,"--react-paint-editor-app-font-disabled-color":se,"--react-paint-editor-app-font-disabled-bg":G,"--react-paint-editor-app-font-color":N,"--react-paint-editor-app-font-bg":de,"--react-paint-editor-app-font-selected-color":te,"--react-paint-editor-app-font-selected-bg":fe,"--react-paint-editor-app-font-hover-color":ve,"--react-paint-editor-app-font-hover-bg":me,...n},children:[Z&&h.jsx(No,{settings:z,width:z.canvasSize.width,activeTool:E,clearCanvas:U,setActiveTool:w,exportCanvasInFile:fn,saveFile:Ge,loadFile:vn,addPicture:mn,hasActionToUndo:u,hasActionToRedo:d,hasActionToClear:p,undoAction:x,redoAction:M,availableTools:A,withExport:L,withLoadAndSave:B,withUploadPicture:W,withUrlPicture:F}),a,Z&&T&&h.jsx(ko,{gridFormat:qe,setGridFormat:he=>{O(Tt[he])},shapes:o.current,moveShapes:r,selectedShapes:m,removeShape:v,selectShapes:j,toggleShapeVisibility:i,toggleShapeLock:l,isLayoutPanelShown:ee,settings:z}),je&&h.jsxs(Ue,{alignment:"left",className:"react-paint-editor-layouts-panel","data-edit":+Z,children:[h.jsx(_,{className:"react-paint-editor-zoom-button",icon:'<svg viewBox="0 -960 960 960" width="24px"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z"/></svg>',onClick:()=>S("unzoom")}),h.jsxs(_,{className:"react-paint-editor-zoom-button react-paint-editor-zoom-button-value",onClick:()=>S("default"),children:[Math.round(100*z.canvasZoom),"%"]}),h.jsx(_,{className:"react-paint-editor-zoom-button",icon:Hn,onClick:()=>S("zoom")})]}),Z&&h.jsxs(h.Fragment,{children:[h.jsx(Ao,{saveShapes:k,setCanvasZoom:S,width:z.canvasSize.width,activeTool:E,availableTools:A,selectedShape:m,settings:z,removeShape:v,updateShape:g,canvas:b.canvas.current,layersManipulation:T,toggleLayoutPanel:()=>{Me(he=>!he)},isZoomPanelShown:je,setIsZoomPanelShown:ae,updateToolSettings:gn}),h.jsx(yo,{isLoading:ue}),h.jsx(bo,{snackbarList:pn})]})]})},De.useReactPaint=({width:e=1e3,height:t=600,shapes:n,mode:s="editor",disabled:a=!1,options:o=Jn}={})=>{const{layersManipulation:c,brushAlgo:r,isBrushShapeDoneOnMouseUp:i,debug:l,grid:u,canGrow:d,canShrink:p,withExport:m,withLoadAndSave:v,withUploadPicture:g,withUrlPicture:x,withSkeleton:M,withFrameSelection:b,clearCallback:Q,availableTools:f,canvasSelectionPadding:w,size:j,canZoom:E}={...Jn,...o},V=s!=="viewer",C=y.useRef(null),Z=y.useRef(null),A=y.useRef(!1),H=y.useCallback(J=>{C.current=J},[]),[O,D]=y.useState(void 0),[I,$]=y.useState(Re),[U,z]=y.useState({mode:"default"}),[S,k]=y.useState(u),[P,T]=y.useState({realWidth:e,realHeight:t,width:e,height:t,scaleRatio:1}),L=E==="always"&&!a,{canvasTransformation:B,setCanvasTransformation:W,setCanvasOffset:F,setCanvasZoom:R,resetZoom:q}=to({canvasSize:P,size:j,canvasElt:Z.current,zoomEnabled:L}),{offset:oe,zoom:se}=B,G=y.useMemo(()=>({brushAlgo:r,isBrushShapeDoneOnMouseUp:i,debug:l,canvasSize:{realWidth:P.realWidth,realHeight:P.realHeight,width:P.width,height:P.height,scaleRatioWithNoZoom:P.scaleRatio,scaleRatio:P.scaleRatio*se},size:j,canvasOffset:oe,canvasZoom:se,gridGap:S,selectionPadding:w,features:{edition:V&&!a,zoom:L}}),[w,S,r,i,l,se,oe,P,j,a,L,V]),[N,de]=y.useState(Os(f,g||x)),{isInsideComponent:te,isInsideCanvas:fe}=(({settings:J,componentRef:ie,canvasRef:Pe})=>{const[Ne,Fe]=y.useState(!1),[Ke,Je]=y.useState(!1),ye=!J.features.edition&&!J.features.zoom;return y.useEffect(()=>{if(!ye){const Le=()=>Fe(!0),Et=()=>Fe(!1),Be=()=>Je(!0),Dt=()=>Je(!1);return ie.current?.addEventListener("focusin",Le),ie.current?.addEventListener("focusout",Et),Pe.current?.addEventListener("focusin",Be),Pe.current?.addEventListener("focusout",Dt),()=>{ie.current?.removeEventListener("focusin",Le),ie.current?.removeEventListener("focusout",Et),Pe.current?.removeEventListener("focusin",Be),Pe.current?.removeEventListener("focusout",Dt)}}Fe(!1),Je(!1)},[ye,ie,Pe]),{isInsideComponent:Ne,isInsideCanvas:Ke}})({settings:G,componentRef:C,canvasRef:Z}),[ve,me]=y.useState(!1),[K,ue]=y.useState(!1),[X,ee]=y.useState(!1),{registerEvent:Me,unregisterEvent:ke,shapesRef:ae,selectedShape:je,selectionFrame:qe,hoveredShape:pn,addShapes:Ze,addPictureShape:gn,moveShapes:fn,setSelectedShape:Ge,setSelectionFrame:vn,refreshSelectedShapes:mn,refreshHoveredShape:yn,duplicateShapes:he,removeShape:pe,updateShape:vt,backwardShape:We,forwardShape:lt,clearShapes:ra,saveShapes:la,toggleShapeVisibility:Oo,toggleShapeLock:Yo,canGoBackward:Xo,canGoForward:$o,canClear:Uo}=Ja(G,e,t,ve),Sn=y.useCallback(J=>{Ge(void 0),$(J)},[Ge]),[ct,ca]=y.useState([0,0]),da=U.mode==="preview";y.useEffect(()=>{if(da)return()=>z(J=>J.mode==="preview"?{mode:"default"}:J)},[je?.id,da]);const ua=U.mode==="selectionFrame";y.useEffect(()=>{if(ua)return()=>ca([0,0])},[ua]),y.useEffect(()=>{if(ct[0]!==0||ct[1]!==0){const J=setInterval(()=>{W(({offset:ie,zoom:Pe})=>{const Ne=[ie[0]-ct[0],ie[1]-ct[1]];return an({zoom:Pe,size:j,canvasSize:P,newOffset:Ne})})},20);return()=>clearInterval(J)}},[ct[0],ct[1],W,j,P]);const At=y.useCallback((J,ie)=>{ra(J,ie),Sn(Re),W({offset:[0,0],zoom:1})},[Sn,ra,W]),ha=y.useCallback(J=>{Ge(ie=>(ie?.id!==J.map(Pe=>Pe.id).join("-")&&$(Re),ce(J,G)))},[Ge,G]),qo=y.useCallback(()=>{const J=_a(ae.current,e,t);if(!J)throw new Error("L'encodage a échoué");Is(J,"drawing.json")},[ae,e,t]),Go=y.useCallback(J=>{const ie=Ws({shapes:ae.current,settings:G,view:J});Is(ie,"drawing.png")},[ae,G]),_o=y.useCallback(J=>Ws({shapes:ae.current,settings:G,view:J}),[ae,G]),Ko=y.useCallback(()=>un(ae.current,e,t),[ae,e,t]),_e=y.useCallback(async(J,ie)=>{const Pe=await(async(Ne,Fe)=>{if(!Ne)return[];const Ke=[],Je=cn(Ne.map(ye=>{if(!ye||!Gn.includes(ye.type))return null;if(ye.type==="picture"){const Le=new Image,Et=new Promise((Be,Dt)=>{Le.onload=()=>{URL.revokeObjectURL(Le.src),Be()},Le.onerror=()=>{Dt(new Error("Some images could not be loaded"))}});if(Ke.push(Et),ye.src.startsWith("http"))Rs(ye.src).then(Be=>{Le.src=Be}).catch(()=>{Le.src=""});else if(ye.src.includes("<svg")){const Be=new Blob([ye.src],{type:"image/svg+xml"});Le.src=URL.createObjectURL(Be)}else Le.src=ye.src;return Ns({...ye,img:Le},Fe)}return Ns(ye,Fe)}));return await Promise.all(Ke),Je})(J,G);At(Pe,ie)},[At,G]),xn=y.useRef(_e);xn.current=_e;const Jo=y.useCallback((J=[],ie=!0)=>{xn.current?.(J,{clearHistory:ie,source:"remote"})},[]);y.useEffect(()=>{A.current||(A.current=!0,n&&xn.current?.(n,{clearHistory:!0,source:"remote"}))},[n]);const ei=y.useCallback(async J=>{const ie=await(async Pe=>new Promise((Ne,Fe)=>{const Ke=new FileReader;Ke.onload=Je=>{const ye=Je.target?.result;if(!ye)return Fe("Impossible de récupérer les données du fichier");const Le=JSON.parse(ye);Ne(Le)},Ke.readAsText(Pe)}))(J);await _e(ie.shapes??[],{clearHistory:!0,source:"remote"})},[_e]),ti=y.useCallback(()=>{typeof Q!="string"?_e(Q(),{clearHistory:!1,source:"user"}):Q==="defaultShapes"&&n!==void 0?_e(n,{clearHistory:!1,source:"user"}):At([],{clearHistory:!1,source:"user"})},[At,_e,n,Q]);y.useEffect(()=>{de(Os(f,g||x))},[f,g,x]);const pa={canvas:Z,editor:C,setEditor:H};return{annotationsProps:{style:{userSelect:"none",touchAction:"none",transformOrigin:"left top",transform:"scale(var(--react-paint-canvas-zoom)) translate(calc(var(--react-paint-canvas-offset-x) * 100% / var(--react-paint-app-canvaswidth)), calc(var(--react-paint-canvas-offset-y) * 100% / var(--react-paint-app-canvasheight)))","--react-paint-canvas-zoom":G.canvasZoom,"--react-paint-canvas-offset-x":G.canvasOffset[0],"--react-paint-canvas-offset-y":G.canvasOffset[1],"--react-paint-app-canvaswidth":e,"--react-paint-app-canvasheight":t}},editorProps:{shapesRef:ae,addPictureShape:gn,moveShapes:fn,toggleShapeVisibility:Oo,toggleShapeLock:Yo,canGoBackward:Xo,canGoForward:$o,canClear:Uo,selectedShape:je,saveShapes:la,removeShape:pe,updateShape:vt,backwardShape:We,forwardShape:lt,refs:pa,width:e,height:t,selectTool:Sn,selectShapes:ha,activeTool:I,setActiveTool:$,setAvailableTools:de,isEditMode:V,availableTools:N,gridGap:S,setGridGap:k,loadFile:ei,exportPicture:Go,exportData:qo,clearCanvas:ti,settings:G,setCanvasZoom:R,resetZoom:q,canvas:{canGrow:d,canShrink:p,layersManipulation:c,withExport:m,withLoadAndSave:v,withUploadPicture:g,withUrlPicture:x}},canvasProps:{shapesRef:ae,selectedShape:je,selectionFrame:qe,hoveredShape:pn,addShape:Ze,setSelectedShape:Ge,setSelectionFrame:vn,refreshSelectedShapes:mn,refreshHoveredShape:yn,removeShape:pe,updateShape:vt,duplicateShapes:he,backwardShape:We,forwardShape:lt,saveShapes:la,refs:pa,width:e,height:t,settings:G,setCanvasSize:T,setCanvasOffset:F,setCanvasZoom:R,resetZoom:q,selectShapes:ha,activeTool:I,setActiveTool:$,isInsideComponent:te,isInsideCanvas:fe,isEditMode:V,canvas:{withSkeleton:M,withFrameSelection:b,canGrow:d,canShrink:p},canvasOffsetStartData:O,setCanvasOffsetStartData:D,selectionMode:U,setSelectionMode:z,setCanvasMoveAcceleration:ca,isShiftPressed:ve,isAltPressed:K,isSpacePressed:X,setShiftPressed:me,setAltPressed:ue,setIsSpacePressed:ee},registerEvent:Me,unregisterEvent:ke,resetCanvas:Jo,resetZoom:q,getCurrentImage:_o,getCurrentData:Ko,setCanvasOffset:F,setCanvasZoom:R}},Object.defineProperty(De,Symbol.toStringTag,{value:"Module"})});
|