@yorab/react-paint 0.12.0 → 0.13.0
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/README.md +5 -8
- package/dist/canvas/components/Canvas.d.ts +2 -1
- package/dist/canvas/hooks/useDrawableCanvas.d.ts +3 -2
- package/dist/canvas/hooks/useKeyboard.d.ts +8 -2
- package/dist/canvas/utils/intersect.d.ts +3 -0
- package/dist/canvas/utils/selection/lineSelection.d.ts +1 -1
- package/dist/canvas/utils/selection/rectSelection.d.ts +1 -1
- package/dist/canvas/utils/shapes/brush.d.ts +2 -2
- package/dist/canvas/utils/shapes/circle.d.ts +2 -2
- package/dist/canvas/utils/shapes/curve.d.ts +3 -2
- package/dist/canvas/utils/shapes/ellipse.d.ts +2 -2
- package/dist/canvas/utils/shapes/index.d.ts +3 -3
- package/dist/canvas/utils/shapes/line.d.ts +1 -1
- package/dist/canvas/utils/shapes/path.d.ts +1 -1
- package/dist/canvas/utils/shapes/picture.d.ts +2 -2
- package/dist/canvas/utils/shapes/polygon.d.ts +3 -2
- package/dist/canvas/utils/shapes/rectangle.d.ts +2 -2
- package/dist/canvas/utils/shapes/text.d.ts +2 -2
- package/dist/canvas/utils/transform.d.ts +3 -2
- package/dist/common/types/Mode.d.ts +5 -1
- package/dist/common/types/Shapes.d.ts +3 -1
- package/dist/common/types/tools.d.ts +4 -7
- package/dist/editor/components/settings/ClosedPointsField.d.ts +10 -0
- package/dist/react-paint.js +950 -886
- package/dist/react-paint.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/react-paint.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(we,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],g):g((we=typeof globalThis<"u"?globalThis:we||self)["react-paint"]={},we.React,we.jsxRuntime)})(this,function(we,g,c){"use strict";const on='<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>',Mt='<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>',kt='<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>',Lt='<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>',rn='<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>',ln='<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>',jt='<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>',dn='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',un='<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>',hn='<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>',gn='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',fn='<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>',mn='<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>',ae=["transparent","black","white","red","green","blue","yellow"],je=[0,1,2],yn=[[1,0],[1,2],[4,6]],Je="serif",Hs=2,Qn=3,Ps=4,q="react-paint-",Vt={type:"picture",id:`${q}picture`,icon:jt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},xn={type:"brush",id:`${q}brush`,icon:on,label:"Brosse",settings:{strokeColor:{values:ae,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:je,default:0}}},Sn={type:"line",id:`${q}line`,icon:dn,label:"Ligne",settings:{strokeColor:{values:ae,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:je,default:0},lineArrow:{values:[0,1,2,3],default:0}}},bn={type:"polygon",id:`${q}polygon`,icon:Lt,label:"Polygone",settings:{strokeColor:{values:ae,default:"black"},fillColor:{values:ae,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:je,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},Cn={type:"curve",id:`${q}curve`,icon:un,label:"Courbe",settings:{strokeColor:{values:ae,default:"black"},fillColor:{values:ae,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:je,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},wn={type:"rect",id:`${q}rect`,icon:Mt,label:"Rectangle",settings:{strokeColor:{values:ae,default:"black"},fillColor:{values:ae,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:je,default:0}}},Mn={type:"square",id:`${q}square`,icon:Mt,label:"Carré",settings:{strokeColor:{values:ae,default:"black"},fillColor:{values:ae,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:je,default:0}}},kn={type:"circle",id:`${q}circle`,icon:kt,label:"Cercle",settings:{strokeColor:{values:ae,default:"black"},fillColor:{values:ae,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:je,default:0}}},Ln={type:"ellipse",id:`${q}ellipse`,icon:kt,label:"Ellipse",settings:{strokeColor:{values:ae,default:"black"},fillColor:{values:ae,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:je,default:0}}},jn={type:"text",id:`${q}text`,icon:cn,label:"Texte",settings:{strokeColor:{values:ae,default:"black"},opacity:{min:0,max:100,step:1,default:100},fontFamily:{values:["arial","serif","monospace"],default:Je},fontBold:{values:[!1,!0],default:!1},fontItalic:{values:[!1,!0],default:!1}}},Me={id:`${q}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"},Oe={id:`${q}undo`,type:"undo",icon:'<svg><path d="M11.708 15.833H5.854V14.083H11.708Q13 14.083 13.958 13.292Q14.917 12.5 14.917 11.271Q14.917 10.042 13.958 9.24Q13 8.438 11.708 8.438H6.667L8.792 10.562L7.562 11.792L3.333 7.562L7.562 3.333L8.792 4.562L6.667 6.688H11.708Q13.729 6.688 15.198 7.99Q16.667 9.292 16.667 11.25Q16.667 13.208 15.198 14.521Q13.729 15.833 11.708 15.833Z"/></svg>',label:"Undo"},Ie={id:`${q}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"},$e={id:`${q}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"},Ht={id:`${q}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"},Vn={id:`${q}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"},Pt={id:`${q}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"},Tt={id:`${q}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"},Hn={id:`${q}upload-picture`,type:"uploadpicture",icon:jt,label:"Upload picture"},Pn=2,Tn="blue",ke=14,Zn=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],zn=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle"],An="react-paint-canvas-drawcanvas",En="react-paint-canvas-selectioncanvas",Rn={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[xn,Sn,bn,Cn,wn,Mn,kn,Ln,Vt,jn],clearCallback:"empty",brushAlgo:"simple",isBrushShapeDoneOnMouseUp:!0,withFrameSelection:!1,withSkeleton:!0,canvasSelectionPadding:0,size:"fixed",canZoom:"never"},Ts={canvasBackgroundColor:"white",canvasSelectionColor:Tn,canvasSelectionWidth:Pn},Dn=(e,t)=>!!(e.target instanceof Node&&t)&&t.contains(e.target),lt=300,Zt=(e,t)=>{const n={...t};for(const s of e)delete n[s];return n},le=(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,o,r)=>(i[o]=zt(i[o])?{...i[o]}:Array.isArray(i[o])?[...i[o]]:i[o]===void 0||i[o]===null?{}:i[o],r===a.length-1&&(i[o]=t),i[o]),s),s},zt=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,ye=(e,t,n)=>{if(!zt(t)||!zt(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)??ye(e,s[a],n[a]):s[a]=n[a]);return s},Wn=(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)||!Wn(e[a],t[a]))return!1;return!0},At={},te=(e="")=>(At[e]||(At[e]=0),`${e}${++At[e]}`),Ve=(e,t,n)=>Math.max(t,Math.min(e,n)),Nn=e=>{e.reset(),e.lineCap="round",e.lineJoin="round"},Ae=(e,t={})=>{const{lineCap:n="round",fillColor:s="transparent",opacity:a=100,strokeColor:i=Tn,lineWidth:o=Pn,lineDash:r=0}=t;e.lineCap=n,e.globalAlpha=a/100,e.fillStyle=s,e.strokeStyle=i,e.lineWidth=o,e.setLineDash(r===0?[]:[yn[r][0]*o,yn[r][1]*o])},Et=(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]))},ct=e=>{const t=new Path2D;return t.rect(e.x,e.y,e.width,e.height),t},dt=e=>{const t=new Path2D;return t.arc(e.x,e.y,e.radius,0,2*Math.PI),t},Rt=e=>{const t=new Path2D;return t.moveTo(...e.points[0]),t.lineTo(...e.points[1]),t},Zs=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},Dt=e=>180*e/Math.PI,Fn=(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},he=({origin:e=[0,0],point:t,rotation:n})=>{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]]},On=e=>(e+2*Math.PI)%(2*Math.PI),In=({targetVector:[e,t],radian:n=!0,originVector:s})=>{const a=On(Math.atan2(t[1]-e[1],t[0]-e[0]));if(s){const[i,o]=s,r=Math.atan2(o[1]-i[1],o[0]-i[0]),l=On(a-r);return n?l:Dt(l)}return n?a:Dt(a)},$n=(e,t)=>Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2),Be=(e,t,n)=>{const{borders:s}=Y(t,n);return{border:ct(s),shapePath:e,line:Rt({points:[[s.x+s.width/2,s.y],[s.x+s.width/2,s.y-23/n.canvasSize.scaleRatio]]}),anchors:[dt({x:s.x+s.width/2,y:s.y-23/n.canvasSize.scaleRatio,radius:7/n.canvasSize.scaleRatio}),...Zn.map(a=>dt({x:s.x+s.width*a[0],y:s.y+s.height*a[1],radius:7/n.canvasSize.scaleRatio}))]}},Bn=({borderStart:e,borderSize:t,vector:n,settings:s,invertedAxe:a,anchor:i})=>{switch(i){case 0:{if(a){const r=t-2*s.selectionPadding;return[e+r,n-r]}const o=Math.max(2*s.selectionPadding,t-n);return[e+t-o,o]}case .5:return[e,t];case 1:if(a){const o=t+n;return[e+o,2*s.selectionPadding-o]}return[e,Math.max(2*s.selectionPadding,t+n)];default:return[0,0]}},Un=({borderX:e,borderWidth:t,borderY:n,borderHeight:s,center:a,originalShape:i})=>{const o=[e+t/2-a[0],n+s/2-a[1]],[r,l]=he({point:o,rotation:-i.rotation});return{borderX:He(e+r-o[0]),borderWidth:He(t),borderY:He(n+l-o[1]),borderHeight:He(s)}},Ue=(e,t,n,s,a=!1)=>{const{center:i,borders:o}=Y(t,s),r=he({origin:i,point:e,rotation:t.rotation}),l=n.anchor[0]===0&&r[0]>=o.x+o.width||n.anchor[0]===1&&r[0]<=o.x,u=n.anchor[1]===0&&r[1]>=o.y+o.height||n.anchor[1]===1&&r[1]<=o.y,d=[I(r[0],s,n.anchor[0]===0&&!l||n.anchor[0]===1&&l?s.selectionPadding:-s.selectionPadding),I(r[1],s,n.anchor[1]===0&&!u||n.anchor[1]===1&&u?s.selectionPadding:-s.selectionPadding)],h=s.gridGap?[n.anchor[0]===0?o.x:n.anchor[0]===.5?o.x+o.width/2:o.x+o.width,n.anchor[1]===0?o.y:n.anchor[1]===.5?o.y+o.height/2:o.y+o.height]:he({origin:i,point:n.cursorStartPosition,rotation:t.rotation}),p=[d[0]-h[0],d[1]-h[1]],[v,m]=Bn({borderStart:o.x,borderSize:o.width,vector:p[0],settings:s,invertedAxe:l,anchor:n.anchor[0]}),[L,C]=Bn({borderStart:o.y,borderSize:o.height,vector:p[1],settings:s,invertedAxe:u,anchor:n.anchor[1]});if(a){const b=((x,w,k,j,T,z,Z,F,V,D)=>{const{selectionPadding:Q}=D,E=(w.width-2*Q||1)/(w.height-2*Q||1),O=(T-2*Q)/(Z-2*Q);let M,P,y,f;return V.anchor[0]!==.5&&V.anchor[1]!==.5?O<E?(P=z,f=Z,y=(Z-2*Q)*E+2*Q,M=V.anchor[0]===0?w.width-x[0]>Q?w.x+(w.width-y):w.x+w.width-2*Q:w.width+x[0]>Q?w.x:w.x-y+2*Q):(M=j,y=T,f=(T-2*Q)/E+2*Q,P=V.anchor[1]===0?w.height-x[1]>Q?w.y+(w.height-f):w.y+w.height-2*Q:w.height+x[1]>Q?w.y:w.y-f+2*Q):V.anchor[0]!==.5?(M=j,y=T,f=(T-2*Q)/E+2*Q,P=w.y+(w.height-f)/2):(P=z,f=Z,y=(Z-2*Q)*E+2*Q,M=w.x+(w.width-y)/2),{borderX:M,borderWidth:y,borderY:P,borderHeight:f,center:k,originalShape:F}})(p,o,i,v,m,L,C,t,n,s);return Un(b)}return Un({borderX:v,borderWidth:m,borderY:L,borderHeight:C,center:i,originalShape:t})},Xe=(e,t)=>{const n=((s,{brushAlgo:a})=>{if(s.points.length<1||s.style?.strokeColor==="transparent")return;const i=s.points.flat(),o=i.map(h=>h[0]),r=i.map(h=>h[1]),l=Math.min(...o),u=Math.min(...r),d=new Path2D;for(const h of s.points){if(!h.length)return;if(h.length===1)d.rect(...ve(h[0],l,u,s.scaleX,s.scaleY),1,1);else if(d.moveTo(...ve(h[0],l,u,s.scaleX,s.scaleY)),a==="quadratic"){for(let p=0;p<h.slice(1).length-2;p++){const v=ve(h[p],l,u,s.scaleX,s.scaleY),m=ve(h[p+1],l,u,s.scaleX,s.scaleY),L=(v[0]+m[0])/2,C=(v[1]+m[1])/2;d.quadraticCurveTo(...v,L,C)}d.quadraticCurveTo(...ve(h[h.length-2],l,u,s.scaleX,s.scaleY),...ve(h[h.length-1],l,u,s.scaleX,s.scaleY))}else for(const p of h.slice(1))d.lineTo(...ve(p,l,u,s.scaleX,s.scaleY))}return d})(e,t);return{...e,path:n,selection:Be(n,e,t)}},zs=Xe,He=(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],I=(e,t,n=0)=>{if(!t.gridGap)return He(e);const s=e+n,a=s>=0?t.gridGap:-t.gridGap;return s+a/2-(s+a/2)%a-n},As=(e,t)=>t.gridGap?e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18):He(e,3),Es=(e,t,n,s,a,i)=>{switch(s.mode){case"brush":return((o,r,l)=>{const u={...o,points:le(o.points.length-1,[...o.points[o.points.length-1],[Math.round(r[0]),Math.round(r[1])]],o.points)};return Xe(u,l)})(t,n,a);case"translate":return Xt(n,s.originalShape,s.cursorStartPosition,a);case"rotate":return Ks(t,n,s.originalShape,s.cursorStartPosition,s.center,a);case"resize":return Js(e,t,n,s.originalShape,s,a,i);default:return t}},Xn=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}},Wt=(e,t,n)=>{const{clientX:s,clientY:a}=Xn(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]]},et=e=>"touches"in e,Ee=(e,t,[n,s])=>he({origin:[n,s],point:e,rotation:t}),ut=(e,t,n)=>n?Fn(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),tt=(e,t,n,s=!1,a=0)=>{if(e.locked)return!1;const{canvasSize:{scaleRatio:i}}=n,{borders:o,center:r}=Y(e,n),l=Ee(t,e.rotation,r);if(s)if(e.type==="line"||e.type==="polygon"||e.type==="curve"){for(let u=0;u<e.points.length;u++)if(ut({x:e.points[u][0]-7/i,y:e.points[u][1]-7/i,width:ke/i,height:ke/i},l,a))return{mode:"resize",anchor:u}}else{if(ut({x:o.x+o.width/2-7/i,y:o.y-ke/i-16/i,width:ke/i,height:ke/i},l,a))return{mode:"rotate"};for(const u of Zn)if(ut({x:o.x+o.width*u[0]-7/i,y:o.y+o.height*u[1]-7/i,width:ke/i,height:ke/i},l,a))return{mode:"resize",anchor:u}}return!!ut(o,l,a)&&{mode:"translate"}},Yn=(e,t,n,s)=>{if(t.locked)return!1;const{center:a}=Y(t,s),i=Ee(n,t.rotation,a);return"path"in t&&t.path?t.style?.fillColor&&t.style?.fillColor!=="transparent"?!!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"}):tt(t,n,s,!1)};function Nt(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 qn=({ctx:e,path:t,rect:n,offset:s,checkFill:a})=>{for(let i=0;i<s;i+=s/2)for(let o=0;o<s;o+=s/2)for(let r=i+n.x;r<n.x+n.width;r+=s)for(let l=o+n.y;l<n.y+n.height;l+=s)if(a?e.isPointInPath(t,r,l):e.isPointInStroke(t,r,l))return!0;return!1},Ft=(e,t,n,s=!1)=>{const{borders:a}=Y(t,n);return{border:ct(a),shapePath:e,anchors:[...t.points.map((i,o)=>s&&o>0&&o<t.points.length-1?ct({x:i[0]-7,y:i[1]-7,width:ke/n.canvasSize.scaleRatio,height:ke/n.canvasSize.scaleRatio}):dt({x:i[0],y:i[1],radius:7/n.canvasSize.scaleRatio}))]}},ce=[.05,.1,.25,.5,1,2,4,8],Gn=({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:[Ve(n,a.realWidth/t-a.realWidth,0),Ve(s,a.realHeight/t-a.realHeight,0)]},Ot=({size:e,canvasSize:t,currentOffset:n,currentZoom:s,zoom:a,centerPoint:i})=>{const o=e==="fixed"&&a<1?[t.realWidth/2,t.realHeight/2]:i,r=n[0]-(o[0]/s-o[0]/a),l=n[1]-(o[1]/s-o[1]/a);return{offset:e==="infinite"?[r,l]:a<1?[-(t.realWidth-t.realWidth/a)/2,-(t.realHeight-t.realHeight/a)/2]:[Ve(r,t.realWidth/a-t.realWidth,0),Ve(l,t.realHeight/a-t.realHeight,0)],zoom:a}},_n=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}},Kn=(e,t)=>{const{canvasZoom:n,size:s}=t;if(s!=="fixed"||n>=1)return;const a=_n(t);e.beginPath(),e.rect(a.x,a.y,a.width,a.height),e.closePath(),e.clip()},It=(e,t)=>t.size!=="fixed"||e[0]>0&&e[0]<t.canvasSize.realWidth&&e[1]>0&&e[1]<t.canvasSize.realHeight,Rs=(e,t)=>{const n=Math.abs(e.deltaY)<50&&t<50,s=e.ctrlKey,a=typeof navigator<"u"&&navigator.userAgent.includes("Macintosh")&&n&&s;switch(e.deltaMode){case WheelEvent.DOM_DELTA_LINE:return{deltaX:16*e.deltaX,deltaY:16*e.deltaY};case WheelEvent.DOM_DELTA_PAGE:return{deltaX:e.deltaX*window.innerHeight,deltaY:e.deltaY*window.innerHeight};default:return a?{deltaX:5*e.deltaX,deltaY:5*e.deltaY}:{deltaX:e.deltaX,deltaY:e.deltaY}}},ht=(e,t)=>{const n=dt(e);return{...e,path:n,selection:Be(n,e,t)}},Ds=ht,Ye=(e,t)=>{const n=(s=>{if(s.points.length<1)return;const a=new Path2D;a.moveTo(...s.points[0]);for(const i of s.points.slice(1))a.lineTo(...i);return a.lineTo(...s.points[0]),a})(e);return{...e,path:n,selection:Ft(n,e,t)}},Ws=Ye,Jn=(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}},qe=(e,t)=>{const n=(s=>{if(s.points.length<3)return;const a=new Path2D;a.moveTo(...s.points[0]);for(let i=1;i<s.points.length-1;i++)a.quadraticCurveTo(...s.points[i],s.points.length-2===i?s.points[i+1][0]:(s.points[i+1][0]-s.points[i][0])/2+s.points[i][0],s.points.length-2===i?s.points[i+1][1]:(s.points[i+1][1]-s.points[i][1])/2+s.points[i][1]);return a})(e);return{...e,path:n,selection:Ft(n,e,t,!0)}},Ns=qe,Fs=Jn,pt=(e,t)=>{const n=(s=>{const a=new Path2D;return a.ellipse(s.x,s.y,s.radiusX,s.radiusY,0,0,2*Math.PI),a})(e);return{...e,path:n,selection:Be(n,e,t)}},Os=pt,es=e=>{return n={...e,type:"triangle"},{...n,path:Zs(n)};var n},Is=(e,t)=>{e.globalAlpha!==0&&t.path&&(t.style?.fillColor!=="transparent"&&e.fill(t.path),t.style?.strokeColor!=="transparent"&&e.stroke(t.path))},gt=(e,t)=>{const n=[];let s;if(e.style?.lineArrow===1||e.style?.lineArrow===2||e.style?.lineArrow===3){const a=Math.PI/2-In({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3||n.push(es(ts(e.points[0],a,e.style))),e.style?.lineArrow!==2&&e.style?.lineArrow!==3||n.push(es(ts(e.points[1],a+Math.PI,e.style)));const i=(({line:o,size:r,direction:l})=>{const u=Math.PI/2-In({targetVector:[o.points[0],o.points[1]]}),d=[o.points[0][0]+(o.points[1][0]-o.points[0][0])/2,o.points[0][1]+(o.points[1][1]-o.points[0][1])/2];let h,p;if(["start","both"].includes(l)){const v=he({point:o.points[0],origin:d,rotation:-u});h=he({point:[v[0],v[1]+r],origin:d,rotation:u})}else h=[...o.points[0]];if(["end","both"].includes(l)){const v=he({point:o.points[1],origin:d,rotation:-u});p=he({point:[v[0],v[1]-r],origin:d,rotation:u})}else p=[...o.points[1]];return{points:[h,p]}})({line:e,size:10+2*(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});s=Rt(i)}else s=Rt(e);return{...e,path:s,selection:Ft(s,e,t),arrows:n,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"}}},$s=gt,ts=(e,t,n)=>{const s=[he({point:[0,0],rotation:t}),he({point:[-(5+(n.lineWidth??0)),10+2*(n.lineWidth??0)],rotation:t}),he({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"}}},ft=(e,t)=>{const n=ct(e);return{...e,path:n,selection:Be(n,e,t)}},Bs=ft,Us=(e,t)=>{e.globalAlpha!==0&&t.path&&(t.style?.fillColor!=="transparent"&&e.fill(t.path),t.style?.strokeColor!=="transparent"&&e.stroke(t.path))},ns=(e,t)=>({x:e.x-t.selectionPadding,width:e.width+2*t.selectionPadding,y:e.y-t.selectionPadding,height:e.height+2*t.selectionPadding}),ss=(e,t,n,[s,a]=[!1,!1])=>((i,o,[r,l])=>he({origin:[r,l],point:i,rotation:-o}))([e[0]===.5?n.x+n.width/2:e[0]===0?n.x+(s?0:n.width):n.x+(s?n.width:0),e[1]===.5?n.y+n.height/2:e[1]===0?n.y+(a?0:n.height):n.y+(a?n.height:0)],n.rotation,t),vt=(e,t)=>({...e,selection:Be(void 0,e,t)}),Xs=vt,$t=(e,t,n,s,a)=>{const[i,o]=((r,l,u,d,h=!1)=>{if(!(r&&l&&d&&u))return[lt,lt];const p=r/l;if(p>u/d){const m=h?u:Math.min(r,u);return[m,m/p]}const v=h?d:Math.min(l,d);return[v*p,v]})(e.width,e.height,n,s,!0);return vt({toolId:Vt.id,type:"picture",id:te("picture_"),x:-a.canvasOffset[0]+a.canvasSize.realWidth/a.canvasZoom/2-i/2,y:-a.canvasOffset[1]+a.canvasSize.realHeight/a.canvasZoom/2-o/2,width:i,height:o,src:t,img:e,rotation:0},a)},Ys=(e,t,n,s)=>new Promise((a,i)=>{const o=new Image;o.onerror=()=>{i(new Error("Some images could not be loaded"))},setTimeout(()=>{i(new Error("Timeout while loading images"))},4e3),e instanceof File?((r,l,u,d,h,p)=>{ls(u)?u.text().then(v=>{const m=rs(v);r.onload=async()=>{URL.revokeObjectURL(r.src);const L=$t(r,v,d,h,p);l(L)},r.src=m}):(r.onload=async()=>{URL.revokeObjectURL(r.src);const v=$t(r,r.src,d,h,p);l(v)},r.src=URL.createObjectURL(u))})(o,a,e,t,n,s):((r,l,u,d,h,p)=>{r.onload=()=>{URL.revokeObjectURL(r.src);const v=$t(r,u,d,h,p);l(v)},cs(u).then(v=>{r.src=v}).catch(()=>{r.src=""})})(o,a,e,t,n,s)}),Bt=["Texte"],mt=(e,t)=>({...e,selection:Be(void 0,e,t)}),qs=mt,Ut=(e,t,n,s,a,i=Je)=>{e.font=`${a?"italic":""} ${s?"bold":""} 1px ${i}`;const o=t.map(r=>n/e.measureText(r).width);return Math.min(...o)||36},Gs=(e,t,n,s)=>{const a={...t,value:n},i=((m,L,C,b,x,w=Je)=>{m.font=`${x?"italic":""} ${b?"bold":""} ${C}px ${w}`;const k=L.map(j=>m.measureText(j).width);return Math.max(...k)||20})(e,a.value,a.fontSize,a.style?.fontBold??!1,a.style?.fontItalic??!1,a.style?.fontFamily),o=a.fontSize*a.value.length,r={...a,width:i,height:o},{center:l}=Y(t,s),{center:u}=Y(r,s),[d,h]=ss([1,1],l,t),[p,v]=ss([1,1],u,r,[!1,!1]);return{...r,x:r.x-(p-d),y:r.y-(v-h)}},is=(e,t,n,s)=>{const a=[I(n[0],s),I(n[1],s)];switch(t.type){case"brush":return((i,o,r)=>Xe({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:[[o]],rotation:0,scaleX:1,scaleY:1,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(t,a,s);case"line":return((i,o,r)=>{const l={toolId:i.id,type:i.type,id:te(`${i.type}_`),points:[o,o],rotation:0,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,lineArrow:i.settings.lineArrow.default}};return gt(l,r)})(t,a,s);case"polygon":return((i,o,r)=>Ye({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(o),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},r))(t,a,s);case"curve":return((i,o,r)=>qe({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(o),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},r))(t,a,s);case"rect":case"square":return((i,o,r,l=0,u=0)=>{const d={toolId:i.id,type:i.type,id:te(`${i.type}_`),x:o[0],y:o[1],width:l,height:u,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}};return ft(d,r)})(t,a,s);case"text":return((i,o,r,l)=>{const u=Ut(i,Bt,150,o.settings?.fontBold.default??!1,o.settings?.fontItalic.default??!1,o.settings.fontFamily.default),d=u*(Bt.length||1);return mt({toolId:o.id,type:o.type,id:te(`${o.type}_`),x:r[0]-150,y:r[1]-d,value:Bt,fontSize:u,width:150,height:d,rotation:0,style:{opacity:o.settings.opacity.default,strokeColor:o.settings.strokeColor.default,fontFamily:o.settings.fontFamily.default,fontItalic:o.settings.fontItalic.default,fontBold:o.settings.fontBold.default}},l)})(e,t,a,s);case"ellipse":return((i,o,r)=>pt({toolId:i.id,type:i.type,id:te(`${i.type}_`),x:o[0],y:o[1],radiusX:0,radiusY:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(t,a,s);case"circle":return((i,o,r)=>ht({toolId:i.id,type:i.type,id:te(`${i.type}_`),x:o[0],y:o[1],radius:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(t,a,s)}},as=(e,t,n)=>{if(t.visible===!1)return;const{center:s,outerBorders:a}=Y(t,n),i=(o=>{const{canvasSize:{width:r,height:l,scaleRatioWithNoZoom:u},canvasZoom:d,canvasOffset:h}=o;return{x:-h[0],y:-h[1],width:r/d/u,height:l/d/u}})(n);if(Nt(a,i)){switch(Et(e,n,t.rotation,s),Ae(e,t.style),t.type){case"brush":((o,r)=>{r.points.length<1||!r.path||o.globalAlpha!==0&&r.style?.strokeColor!=="transparent"&&o.globalAlpha!==0&&o.stroke(r.path)})(e,t);break;case"text":((o,r)=>{if(o.globalAlpha!==0&&r.style?.strokeColor&&r.style.strokeColor!=="transparent"){o.font=`${r.style?.fontItalic?"italic":""} ${r.style?.fontBold?"bold":""} ${r.fontSize}px ${r.style?.fontFamily??Je}`,o.textBaseline="top",o.fillStyle=r.style.strokeColor;for(let l=0;l<r.value.length;l++)o.fillText(r.value[l],r.x,r.y+l*r.fontSize,r.width)}})(e,t);break;case"line":((o,r)=>{if(o.globalAlpha!==0&&r.path){r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path);for(const l of r.arrows??[])Ae(o,l.style),Is(o,l)}})(e,t);break;case"polygon":((o,r)=>{r.path&&o.globalAlpha!==0&&(r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path))})(e,t);break;case"curve":((o,r)=>{r.path&&o.globalAlpha!==0&&(r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path))})(e,t);break;case"circle":((o,r)=>{o.globalAlpha!==0&&r.path&&(r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path))})(e,t);break;case"ellipse":((o,r)=>{o.globalAlpha!==0&&r.path&&(r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path))})(e,t);break;case"rect":case"square":Us(e,t);break;case"picture":((o,r)=>{o.globalAlpha!==0&&(o.beginPath(),o.drawImage(r.img,r.x,r.y,r.width,r.height))})(e,t)}e.restore()}},_s=(e,t)=>{switch(e.type){case"brush":return((n,{selectionPadding:s})=>{const a=n.points.flat(),i=Math.min(...a.map(d=>d[0])),o=Math.min(...a.map(d=>d[1])),r=a.map(d=>ve(d,i,o,n.scaleX,n.scaleY)),l=Math.max(...r.map(d=>d[0]))+s,u=Math.max(...r.map(d=>d[1]))+s;return{x:i-s,width:l-i+s,y:o-s,height:u-o+s}})(e,t);case"line":return((n,s)=>({x:Math.min(n.points[0][0],n.points[1][0])-s.selectionPadding,width:Math.abs(n.points[0][0]-n.points[1][0])+2*s.selectionPadding,y:Math.min(n.points[0][1],n.points[1][1])-s.selectionPadding,height:Math.abs(n.points[0][1]-n.points[1][1])+2*s.selectionPadding}))(e,t);case"polygon":return Jn(e,t);case"curve":return Fs(e,t);case"circle":return((n,s)=>({x:n.x-n.radius-s.selectionPadding,width:2*(n.radius+s.selectionPadding),y:n.y-n.radius-s.selectionPadding,height:2*(n.radius+s.selectionPadding)}))(e,t);case"ellipse":return((n,s)=>({x:n.x-n.radiusX-s.selectionPadding,width:2*(n.radiusX+s.selectionPadding),y:n.y-n.radiusY-s.selectionPadding,height:2*(n.radiusY+s.selectionPadding)}))(e,t);case"rect":case"square":return ns(e,t);case"text":return((n,s)=>({x:n.x-s.selectionPadding,width:n.width+2*s.selectionPadding,y:n.y-s.selectionPadding,height:n.height+2*s.selectionPadding}))(e,t);case"picture":return((n,s)=>ns(n,s))(e,t);default:return{x:0,y:0,width:100,height:100}}},Y=(e,t)=>{const n=_s(e,t),s={x:n.x-(e.style?.lineWidth??0),y:n.y-(e.style?.lineWidth??0),width:n.width+2*(e.style?.lineWidth??0),height:n.height+2*(e.style?.lineWidth??0)},a=(i=>[i.x+i.width/2,i.y+i.height/2])(n);return{borders:n,outerBorders:s,center:a}},Ks=(e,t,n,s,a,i)=>{const o=a[0]-s[0],r=a[1]-s[1],l=a[0]-t[0],u=a[1]-t[1],d=n.rotation+Math.atan2(u,l)-Math.atan2(r,o);return{...e,rotation:As(d,i)}},Js=(e,t,n,s,a,i,o)=>{switch(s.type){case"line":return((r,l,u,d)=>{const h=[I(r[0],d),I(r[1],d)],{center:p}=Y(l,d),v=Ee(h,l.rotation,p),m=le(["points",u.anchor],v,l);return gt(m,d)})(n,s,a,i);case"polygon":return((r,l,u,d)=>{const h=[I(r[0],d),I(r[1],d)],{center:p}=Y(l,d),v=Ee(h,l.rotation,p),m=le(["points",u.anchor],v,l);return Ye(m,d)})(n,s,a,i);case"curve":return((r,l,u,d)=>{const h=[I(r[0],d),I(r[1],d)],{center:p}=Y(l,d),v=Ee(h,l.rotation,p),m=le(["points",u.anchor],v,l);return qe(m,d)})(n,s,a,i);case"brush":return((r,l,u,d,h)=>{const{borders:p}=Y({...l,scaleX:1,scaleY:1},d),{borders:v}=Y(l,d),{borderX:m,borderHeight:L,borderY:C,borderWidth:b}=Ue(r,l,u,d,h),x=Math.max(0,p.width-2*d.selectionPadding),w=Math.max(0,p.height-2*d.selectionPadding),k=Math.max(0,b-2*d.selectionPadding),j=Math.max(0,L-2*d.selectionPadding),T=x?k/x:1,z=w?j/w:1;if(!x||!w)return l;const Z=He(m-v.x),F=He(C-v.y);return Xe({...l,points:l.points.map(V=>V.map(([D,Q])=>[D+Z,Q+F])),scaleX:T,scaleY:z},d)})(n,s,a,i,o);case"circle":return((r,l,u,d)=>{const{borderX:h,borderHeight:p,borderY:v,borderWidth:m}=Ue(r,l,u,d,!0);return ht({...l,radius:Math.max(0,m/2-d.selectionPadding),x:h+m/2,y:v+p/2},d)})(n,s,a,i);case"ellipse":return((r,l,u,d,h=!1)=>{const{borderX:p,borderHeight:v,borderY:m,borderWidth:L}=Ue(r,l,u,d,h);return pt({...l,radiusX:Math.max(0,L/2-d.selectionPadding),radiusY:Math.max(0,v/2-d.selectionPadding),x:p+L/2,y:m+v/2},d)})(n,s,a,i,o);case"rect":case"square":return((r,l,u,d,h=!1)=>{const{borderX:p,borderHeight:v,borderY:m,borderWidth:L}=Ue(r,l,u,d,h);return ft({...l,width:Math.max(0,L-2*d.selectionPadding),height:Math.max(0,v-2*d.selectionPadding),x:p+d.selectionPadding,y:m+d.selectionPadding},d)})(n,s,a,i,t.type==="square"||o);case"text":return((r,l,u,d,h)=>{const{borderX:p,borderHeight:v,borderY:m,borderWidth:L}=Ue(l,u,d,h,!0),C=mt({...u,width:Math.max(0,L-2*h.selectionPadding),height:Math.max(0,v-2*h.selectionPadding),x:p+h.selectionPadding,y:m+h.selectionPadding},h);return{...C,fontSize:Ut(r,C.value,C.width,C.style?.fontBold??!1,C.style?.fontItalic??!1,C.style?.fontFamily)}})(e,n,s,a,i);case"picture":return((r,l,u,d)=>{const{borderX:h,borderHeight:p,borderY:v,borderWidth:m}=Ue(r,l,u,d,!0);return vt({...l,width:Math.max(0,m-2*d.selectionPadding),height:Math.max(0,p-2*d.selectionPadding),x:h+d.selectionPadding,y:v+d.selectionPadding},d)})(n,s,a,i);default:return s}},Xt=(e,t,n,s)=>{switch(t.type){case"rect":case"square":return((a,i,o,r)=>ft({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,t,n,s);case"ellipse":return((a,i,o,r)=>pt({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,t,n,s);case"circle":return((a,i,o,r)=>ht({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,t,n,s);case"picture":return((a,i,o,r)=>vt({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,t,n,s);case"text":return((a,i,o,r)=>mt({...i,x:I(i.x+a[0]-o[0],r),y:I(i.y+a[1]-o[1],r)},r))(e,t,n,s);case"line":return((a,i,o,r)=>gt({...i,points:i.points.map(([l,u])=>[I(l+a[0]-o[0],r),I(u+a[1]-o[1],r)])},r))(e,t,n,s);case"polygon":return((a,i,o,r)=>{const{borders:l}=Y(i,r);return Ye({...i,points:i.points.map(([u,d])=>r.gridGap?[u+I(l.x+a[0]-o[0],r)-l.x,d+I(l.y+a[1]-o[1],r)-l.y]:[I(u+a[0]-o[0],r),I(d+a[1]-o[1],r)])},r)})(e,t,n,s);case"curve":return((a,i,o,r)=>{const{borders:l}=Y(i,r);return qe({...i,points:i.points.map(([u,d])=>r.gridGap?[u+I(l.x+a[0]-o[0],r)-l.x,d+I(l.y+a[1]-o[1],r)-l.y]:[I(u+a[0]-o[0],r),I(d+a[1]-o[1],r)])},r)})(e,t,n,s);case"brush":return((a,i,o,r)=>{const{borders:l}=Y(i,r),u=r.gridGap?I(l.x+a[0]-o[0],r)-l.x:a[0]-o[0],d=r.gridGap?I(l.y+a[1]-o[1],r)-l.y:a[1]-o[1];return Xe({...i,points:i.points.map(h=>h.map(([p,v])=>[p+u,v+d]))},r)})(e,t,n,s);default:return t}},nt=(e,t)=>{switch(e.type){case"rect":case"square":return Bs(e,t);case"ellipse":return Os(e,t);case"circle":return Ds(e,t);case"picture":return Xs(e,t);case"text":return qs(e,t);case"line":return $s(e,t);case"polygon":return Ws(e,t);case"curve":return Ns(e,t);case"brush":return zs(e,t);default:return e}},os=({ctx:e,shape:t,settings:n,selectionWidth:s,selectionColor:a,withAnchors:i=!0})=>{const{center:o}=Y(t,n);switch(Et(e,n,t.rotation,o),t.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((r,l,u,d,h,p)=>{if(l.selection&&(Ae(r,{fillColor:"transparent",strokeColor:u,lineWidth:d/h.canvasSize.scaleRatio}),l.selection.shapePath?r.stroke(l.selection.shapePath):r.stroke(l.selection.border),p&&!l.locked)){l.selection.shapePath&&r.stroke(l.selection.border),r.stroke(l.selection.line),Ae(r,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/h.canvasSize.scaleRatio});for(const v of l.selection.anchors)r.fill(v),r.stroke(v)}})(e,t,a,s,n,i);break;case"polygon":case"line":case"curve":(({ctx:r,shape:l,withAnchors:u,selectionWidth:d,selectionColor:h,settings:p})=>{if(l.selection&&(Ae(r,{fillColor:"transparent",strokeColor:h,lineWidth:d/p.canvasSize.scaleRatio}),l.selection.shapePath&&r.stroke(l.selection.shapePath),u&&!l.locked)){Ae(r,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio});for(const v of l.selection.anchors)r.fill(v),r.stroke(v)}})({ctx:e,shape:t,withAnchors:i,selectionWidth:s,selectionColor:a,settings:n})}e.restore()},ei=({ctx:e,selectionFrame:t,settings:n})=>{Et(e,n),((s,a,i)=>{Ae(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,n),e.restore()},Yt=e=>e.filter(t=>t!=null),rs=e=>{const t=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0],n=t.getAttribute("width"),s=t.getAttribute("height");let a;if(n||s)a=e;else{const o=t.getAttribute("viewBox")??"0 0 300 300",[,,r,l]=o.split(" ");t.setAttribute("width",r??lt),t.setAttribute("height",l??lt),a=new XMLSerializer().serializeToString(t)}const i=new Blob([a],{type:"image/svg+xml"});return URL.createObjectURL(i)},ls=e=>(e instanceof File?e.name:e).includes(".svg"),cs=e=>ls(e)?fetch(e).then(t=>t.text()).then(t=>rs(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)},ti=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),qt=({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),Nn(s);for(let o=e.length-1;o>=0;o--)as(s,e[o],t);return n.toDataURL("image/png")},us=({shapes:e,settings:t,view:n})=>{if(n==="fitToShapes"&&!e.length)throw new Error("No image found to export");if(n==="fitToShapes"){const a=e.map(d=>{const h=Y(d,t).borders,p=(d.style?.lineWidth??0)/2;return{minX:h.x-p,minY:h.y-p,maxX:h.x+h.width+p,maxY:h.y+h.height+p}}),i=Math.min(...a.map(d=>d.minX)),o=Math.max(...a.map(d=>d.maxX)),r=Math.min(...a.map(d=>d.minY)),l=Math.max(...a.map(d=>d.maxY)),u={...t,canvasOffset:[-i,-r],canvasZoom:1,canvasSize:{realWidth:o-i,realHeight:l-r,width:o-i,height:l-r,scaleRatio:1,scaleRatioWithNoZoom:1}};return qt({shapes:e,settings:u})}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 qt({shapes:e,settings:a})}const s={...t,canvasSize:{...t.canvasSize,width:t.canvasSize.realWidth,height:t.canvasSize.realHeight,scaleRatio:t.canvasZoom,scaleRatioWithNoZoom:1}};return qt({shapes:e,settings:s})},ni=(e,t,n)=>{return a=Gt(e,t,n),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(a))}`;var a},si=e=>{const t=["img","id","selection","path","arrows"];return e.map(n=>n.type!=="picture"||n.src.startsWith("http")?Zt(t,n):Zt(t,{...n,src:ti(n)}))},Gt=(e,t,n)=>({shapes:si(e),config:{width:t,height:n}}),hs=(e,t)=>nt({...e,id:te(`${e.type}_`)},t),ii=(e,t,n)=>{const s=g.useRef([]),a=g.useRef({dataChanged:[]}),[i,o]=g.useState(void 0),[r,l]=g.useState(void 0),[u,d]=g.useState(void 0),[h,p]=g.useState({states:[{shapes:[],selectedShape:void 0,source:"remote"}],cursor:0}),v=h.cursor>0,m=h.cursor<h.states.length-1,L=s.current.length>0,C=g.useCallback(()=>{p(y=>Wn(y.states[y.cursor].shapes,s.current)?y:{states:[...y.states.slice(0,y.cursor+1),{shapes:s.current,selectedShape:r,source:"user"}],cursor:y.cursor+1})},[r]),b=g.useCallback(y=>{s.current=[y,...s.current]},[]),x=g.useCallback((y,f,S,H)=>{if(y.target&&"className"in y.target&&![An,En].includes(y.target.className)||!H)return void d(void 0);const R=s.current.find(W=>W.id===r?.id?!!tt(r,S,e):!!Yn(f,W,S,e));d(R)},[e,r]),w=g.useCallback(async(y,f=300,S=300)=>{const H=await Ys(y,f,S,e);return b(H),C(),H},[b,C,e]),k=g.useCallback((y,f=!1)=>{s.current=s.current.map(S=>S.id===r?.id?y:S),l(S=>S?.id===y.id?y:S),f&&C()},[r,C]),j=g.useCallback(y=>{const f=y.map(S=>Zt(["chosen"],S));s.current=f,C()},[C]),T=g.useCallback(y=>{l(f=>f?.id===y.id?void 0:f),s.current=s.current.filter(f=>f.id!==y.id),C()},[C]),z=g.useCallback(y=>{p(f=>{const S=y(f);return s.current=f.states[S].shapes,l(f.states[S].selectedShape),le("cursor",S,f)})},[]),Z=g.useCallback(()=>{z(y=>Math.max(0,y.cursor-1))},[z]),F=g.useCallback(()=>{z(y=>Math.min(y.states.length-1,y.cursor+1))},[z]),V=g.useCallback((y,f)=>{l(void 0),s.current=y,p(S=>f.clearHistory?{states:[{shapes:y,selectedShape:void 0,source:f.source}],cursor:0}:{states:[...S.states.slice(0,S.cursor+1),{shapes:y,selectedShape:void 0,source:f.source}],cursor:S.cursor+1})},[]),D=g.useCallback((y,f)=>{const S=s.current,H=S.findIndex(G=>G.id===y),R=S.findIndex(G=>G.id===f);var W,B,A;j((W=S,A=R,(B=H)<0||A<0||B>W.length-1||A>W.length-1?W:B<A?[...W.slice(0,B),...W.slice(B+1,A+1),W[B],...W.slice(A+1,W.length)]:[...W.slice(0,A),W[B],...W.slice(A,B),...W.slice(B+1,W.length)]))},[j]),Q=g.useCallback(y=>{const f=s.current,S=f.findIndex(R=>R.id===y.id);if(S<0)return;const H=le("visible",y.visible===!1,y);l(R=>R?.id===H.id?H:R),j(le(S,H,f))},[j]),E=g.useCallback(y=>{const f=s.current,S=f.findIndex(R=>R.id===y.id);if(S<0)return;const H=le("locked",!y.locked,y);l(R=>R?.id===H.id?H:R),j(le(S,H,f))},[j]),O=g.useCallback((y,f)=>{a.current.hasOwnProperty(y)&&(a.current[y]=[...a.current[y],f])},[]),M=g.useCallback((y,f)=>{if(a.current.hasOwnProperty(y))if(f){const S=a.current[y].indexOf(f);a.current[y]=[...a.current[y].slice(0,S),...a.current[y].slice(S+1)]}else a.current[y]=[]},[]);g.useEffect(()=>{const y=h.states[h.cursor],f=Gt(y.shapes,t,n);for(const S of a.current.dataChanged)S(f,y.source)},[t,n,h]),g.useEffect(()=>{s.current=s.current.map(y=>nt(y,e)),l(y=>y===void 0?void 0:s.current.find(f=>f.id===y.id))},[e]);const P=g.useCallback((y,f)=>{o(S=>{const H=[S?.[0]??[f[0],f[1]],[f[0],f[1]]],R=s.current.filter(W=>((B,A,G,X)=>{const{selectionPadding:ne}=X,{center:se,borders:N}=Y(A,X),oe=Ee(G[0],A.rotation,se),ie=Ee(G[1],A.rotation,se),me=Math.round(Math.min(oe[0],ie[0])-ne/2),Pe=Math.round(Math.max(oe[0],ie[0])+ne),Qe=Math.round(Math.min(oe[1],ie[1])-ne/2),K={x:me,y:Qe,width:Pe-me,height:Math.round(Math.max(oe[1],ie[1])+ne)-Qe},xe=Nt(N,K);if(!xe)return!1;if(N.width<=1||N.height<=1||!("path"in A)||!A.path)return!0;if(B.lineWidth=(A.style?.lineWidth??0)+10,A.type==="brush"){const _e=A.points.flat(),re=Math.min(..._e.map(ue=>ue[0])),Te=Math.min(..._e.map(ue=>ue[1]));for(const ue of A.points){if(ue.length<1)break;if(ue.length<2){const J=ve(ue[0],re,Te,A.scaleX,A.scaleY);if(Fn(xe,{x:J[0],y:J[1],radius:(A.style?.lineWidth??1)/2}))return!0}for(let J=0;J<ue.length-1;J++){const Le=ve(ue[J],re,Te,A.scaleX,A.scaleY),Se=ve(ue[J+1],re,Te,A.scaleX,A.scaleY),Ke=Nt({x:Math.min(Le[0],Se[0]),y:Math.min(Le[1],Se[1]),width:Math.abs(Le[0]-Se[0]),height:Math.abs(Le[1]-Se[1])},K);if(Ke){const Ze=new Path2D;if(Ze.moveTo(...Le),Ze.lineTo(...Se),qn({ctx:B,path:Ze,rect:Ke,offset:10,checkFill:!1}))return!0}}}return!1}const Ge=!(!A.style?.fillColor||A.style?.fillColor==="transparent");return qn({ctx:B,path:A.path,rect:xe,offset:10,checkFill:Ge})})(y,W,H,e));return l(R?.[0]),H})},[e]);return{registerEvent:O,unregisterEvent:M,shapesRef:s,selectedShape:r,hoveredShape:u,selectionFrame:i,setSelectionFrame:o,refreshSelectedShapes:P,addShape:b,addPictureShape:w,moveShapes:D,saveShapes:C,setSelectedShape:l,refreshHoveredShape:x,toggleShapeVisibility:Q,toggleShapeLock:E,removeShape:T,updateShape:k,backwardShape:Z,forwardShape:F,clearShapes:V,canGoBackward:v,canGoForward:m,canClear:L}},ps=e=>{const t=[e[0].clientX,e[0].clientY],n=[e[1].clientX,e[1].clientY];var s,a;return{diff:$n(t,n),center:(a=n,[((s=t)[0]+a[0])/2,(s[1]+a[1])/2])}},ai=({canvasElt:e,canvasTransformation:t,canvasSize:n,size:s,setCanvasTransformation:a})=>{const i=g.useRef([]),[o,r]=g.useState(i.current.length>0),l=g.useRef(null),u=g.useRef(t);u.current=t;const d=g.useCallback(({startDiff:h,startZoom:p,startCenter:v,startOffset:m,currentDiff:L,currentCenter:C,isMoving:b,isZooming:x})=>{if(!e||!L||!h)return;const w=(({canvasBoundingRect:k,canvasSize:j,size:T,startDiff:z,startZoom:Z,startCenter:F,startOffset:V,currentDiff:D,currentCenter:Q,isMoving:E,isZooming:O})=>{const M=O?Ve(D/z*Z,ce[0],ce[ce.length-1]):Z,P=E?[V[0]+(Q[0]-F[0])*(j.width/k.width)/j.scaleRatio/Z,V[1]+(Q[1]-F[1])*(j.height/k.height)/j.scaleRatio/Z]:[V[0],V[1]],y=[(Q[0]-k.left)/j.scaleRatio,(Q[1]-k.top)/j.scaleRatio];return Ot({size:T,canvasSize:j,currentOffset:P,currentZoom:Z,zoom:M,centerPoint:y})})({canvasBoundingRect:e.getBoundingClientRect(),canvasSize:n,size:s,startDiff:h,startZoom:p,startCenter:v,startOffset:m,currentDiff:L,currentCenter:C,isMoving:b,isZooming:x});a(w)},[e,n,s,a]);g.useEffect(()=>{if(!e)return;const h=p=>{if(i.current=[...i.current,p],r(i.current.length>0),i.current.length===2){p.stopPropagation();const{diff:v,center:m}=ps(i.current);l.current={startDiff:v,startCenter:m,startZoom:u.current.zoom,startOffset:u.current.offset,isMoving:!1,isZooming:!1}}};return e.addEventListener("pointerdown",h),()=>{e.removeEventListener("pointerdown",h)}},[e]),g.useEffect(()=>{if(!o)return;const h=v=>{const m=i.current.findIndex(L=>L.pointerId===v.pointerId);if(m>-1&&(i.current[m]=v),i.current.length===2&&l.current){const{diff:L,center:C}=ps(i.current),b=l.current.isZooming||((w,k)=>Math.abs(w-k.startDiff)>30)(L,l.current),x=l.current.isMoving||b||((w,k)=>Math.abs($n(w,k.startCenter))>10)(C,l.current);l.current={...l.current,isMoving:x,isZooming:b},d({...l.current,currentDiff:L,currentCenter:C})}},p=v=>{i.current=i.current.filter(m=>m.pointerId!==v.pointerId),r(i.current.length>0)};return document.addEventListener("pointermove",h),document.addEventListener("pointerup",p),document.addEventListener("pointerout",p),document.addEventListener("pointercancel",p),document.addEventListener("pointerleave",p),()=>{document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",p),document.removeEventListener("pointerout",p),document.removeEventListener("pointercancel",p),document.removeEventListener("pointerleave",p)}},[o,d])},oi=({canvasSize:e,size:t,zoomEnabled:n,canvasElt:s})=>{const[a,i]=g.useState({offset:[0,0],zoom:1}),o=g.useRef(0),r=g.useCallback(u=>{i(({zoom:d})=>Gn({zoom:d,size:t,canvasSize:e,newOffset:u}))},[e,t]),l=g.useCallback(u=>{i(({offset:d,zoom:h})=>(({size:p,canvasSize:v,currentOffset:m,currentZoom:L,action:C})=>{const b=C==="default"?ce[4]:C==="zoom"?ce[Ve(ce.length-1-ce.slice(0).reverse().findIndex(w=>w<=L)+1,0,ce.length-1)]:ce[Ve(ce.findIndex(w=>w>=L)-1,0,ce.length-1)],x=[v.realWidth/2,v.realHeight/2];return Ot({size:p,canvasSize:v,currentOffset:m,currentZoom:L,zoom:b,centerPoint:x})})({size:t,canvasSize:e,currentOffset:d,currentZoom:h,action:u}))},[e,t]);return ai({canvasElt:s,canvasTransformation:a,canvasSize:e,size:t,setCanvasTransformation:i}),g.useEffect(()=>{if(!n||!s)return;const u=d=>{const h=d.ctrlKey,{deltaX:p,deltaY:v}=Rs(d,d.timeStamp-o.current);if(o.current=d.timeStamp,h){d.preventDefault();const b=((x,w,k)=>{const{clientX:j,clientY:T}=Xn(x),z=w.getBoundingClientRect();return[(j-z.left)/k.scaleRatio,(T-z.top)/k.scaleRatio]})(d,s,e);return void i(({offset:x,zoom:w})=>(({size:k,canvasSize:j,currentOffset:T,currentZoom:z,delta:Z,centerPoint:F})=>{const V=Ve(z*(1-Z/1e3),ce[0],ce[ce.length-1]);return Ot({size:k,canvasSize:j,currentOffset:T,currentZoom:z,zoom:V,centerPoint:F})})({size:t,canvasSize:e,currentOffset:x,currentZoom:w,delta:v,centerPoint:b}))}const m=d.shiftKey,[L,C]=m?[v,p]:[p,v];i(({offset:b,zoom:x})=>{const w=[b[0]-L/x,b[1]-C/x],k=Gn({zoom:x,size:t,canvasSize:e,newOffset:w});return k.offset[0]===b[0]&&k.offset[1]===b[1]||d.preventDefault(),k})};return s.addEventListener("wheel",u,{passive:!1}),()=>{s.removeEventListener("wheel",u)}},[s,t,e,n]),{setCanvasTransformation:i,setCanvasOffset:r,setCanvasZoom:l,canvasTransformation:a}},gs=(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 ye(n,xn,a);case"circle":return ye(n,kn,a);case"curve":return ye(n,Cn,a);case"ellipse":return ye(n,Ln,a);case"line":return ye(n,Sn,a);case"polygon":return ye(n,bn,a);case"rect":return ye(n,wn,a);case"square":return ye(n,Mn,a);case"text":return ye(n,jn,a)}return null});return Yt(t?[...s,Vt]:s)},ri=(e,t,n,s,a,i,o)=>{let r=!1;if(a){r=tt(a,n,s,!0,i?20:void 0);const u=((d,h,p,v)=>{if(d.mode==="translate")return{mode:"translate",cursorStartPosition:p,originalShape:h};if(d.mode==="rotate"){const{center:m}=Y(h,v);return{mode:"rotate",cursorStartPosition:p,originalShape:h,center:[m[0],m[1]]}}return d.mode==="resize"?{mode:"resize",cursorStartPosition:p,originalShape:h,anchor:d.anchor}:void 0})(r||{mode:"default"},a,n,s);if(u?.mode==="resize"||u?.mode==="rotate")return{shape:a,mode:u}}const l=t.find(u=>u.id===a?.id?!!r:!!Yn(e,u,n,s));return l?{shape:l,mode:{mode:"translate",cursorStartPosition:n,originalShape:l}}:{shape:void 0,mode:{mode:o?"selectionFrame":"default"}}},li=({addShape:e,drawCanvasRef:t,setActiveTool:n,refreshHoveredShape:s,shapes:a,selectionMode:i,activeTool:o,isInsideComponent:r,setCanvasOffset:l,selectedShape:u,canvasOffsetStartData:d,refreshSelectedShapes:h,setSelectedShape:p,setSelectionFrame:v,setCanvasOffsetStartData:m,updateSingleShape:L,saveShapes:C,setSelectionMode:b,settings:x,isShiftPressed:w,withFrameSelection:k})=>{const[j,T]=g.useState({mode:"default"}),{registerDoubleClickEvent:z,unRegisterDoubleClickEvent:Z}=(()=>{const M=g.useRef(void 0),P=g.useRef(void 0),y=f=>{const S=Date.now();M.current&&S<M.current+300&&P.current?.(f),M.current=Date.now()};return{registerDoubleClickEvent:(f,S)=>{P.current=S,f.addEventListener("click",y),f.addEventListener("touchend",y)},unRegisterDoubleClickEvent:f=>{f.removeEventListener("click",y),f.removeEventListener("touchend",y)}}})(),F=g.useRef(null);F.current=M=>((P,y,f,S,H,R,W,B,A,G,X,ne)=>{if(et(P)&&P.touches.length>1)return;const se=y.current?.getContext("2d");if(!se)return;const N=Wt(P,y.current,X);if(H!==void 0)return void A([N[0]+X.canvasOffset[0]-H.start[0],N[1]+X.canvasOffset[1]-H.start[1]]);if(S.mode==="selectionFrame")return void G(se,N,X);const oe=It(N,X);if(et(P)||W(P,se,N,oe),f===void 0||f.locked)R({mode:"default",outOfView:!oe});else if(S.mode==="default"||S.mode==="textedition"){if(!oe)return void R({mode:"default"});R(tt(f,N,X,!0)||{mode:"default"})}else{const ie=y.current?.getContext("2d");if(!ie)return;B(Es(ie,f,N,S,X,ne))}})(M,t,u,i,d,T,s,L,l,h,x,w),g.useEffect(()=>{if(r){const M=P=>F.current?.(P);return document.addEventListener("mousemove",M),document.addEventListener("touchmove",M),()=>{document.removeEventListener("mousemove",M),document.removeEventListener("touchmove",M)}}},[r]);const{isBrushShapeDoneOnMouseUp:V}=x,D=g.useRef(null);D.current=M=>{et(M)&&M.touches.length>1||(d?m(void 0):i.mode!=="textedition"&&i.mode!=="default"&&(i.mode==="brush"&&V&&p(void 0),b({mode:"default"}),v(void 0),C()))},g.useEffect(()=>{if(r){const M=P=>D.current?.(P);return document.addEventListener("mouseup",M),document.addEventListener("touchend",M),()=>{document.removeEventListener("mouseup",M),document.removeEventListener("touchend",M)}}},[r]);const Q=!x.features.edition&&x.features.zoom,E=!x.features.edition&&!x.features.zoom,O=g.useRef(null);return O.current=(M,P)=>{if(M.preventDefault(),et(M)&&M.touches.length>1)return;const y=P?.getContext("2d");if(!y)return;const f=Wt(M,t.current,x);if("button"in M&&M.button===1||o.type==="move")m({start:f,originalOffset:x.canvasOffset});else if(!Q){if(!It(f,x))return p(void 0),void b({mode:"default"});if(o.type==="selection"){const{shape:S,mode:H}=ri(y,a,f,x,u,et(M),k);p(S),b(H),H.mode==="selectionFrame"&&v([[f[0],f[1]],[f[0],f[1]]])}else if(zn.some(S=>S===o.type)){const S=t.current?.getContext("2d");if(!S)return;if(o.type==="brush"){if(u?.type==="brush"){const H=((R,W,B)=>{const A={...R,points:le(R.points.length,[[Math.round(W[0]),Math.round(W[1])]],R.points)};return Xe(A,B)})(u,f,x);L(H)}else{const H=is(S,o,f,x);if(!H)return;e(H),p(H)}b({mode:"brush"})}else if(o.type!=="picture"){const H=is(S,o,f,x);e(H),n(Me),p(H),b({mode:"resize",cursorStartPosition:[f[0]+x.selectionPadding,f[1]+x.selectionPadding],originalShape:H,anchor:o.type==="line"||o.type==="polygon"||o.type==="curve"?0:[1,1]})}}}},g.useEffect(()=>{if(E)return;const M=t.current;if(!M)return;const P=y=>O.current?.(y,M);return M.addEventListener("mousedown",P,{passive:!1}),M.addEventListener("touchstart",P,{passive:!1}),()=>{M.removeEventListener("mousedown",P),M.removeEventListener("touchstart",P)}},[E,t]),g.useEffect(()=>{const M=t.current;if(M)return r?(z(M,P=>{if(o.type==="selection"&&u?.type==="text"){const y=Wt(P,t.current,x);if(!It(y,x))return;tt(u,y,x)&&b({mode:"textedition",defaultValue:u.value})}}),()=>{Z(M)}):void 0},[z,Z,r,t,o,u,b,x]),{hoverMode:j}},fs=e=>e.childNodes.length?Array.from(e.childNodes).map(t=>fs(t)).join(""):e.nodeValue??"",ci=({disabled:e=!1,shape:t,defaultValue:n,updateValue:s,saveShapes:a,settings:i})=>{const o=g.useRef(null),r=g.useRef(a);g.useEffect(()=>{if(!o.current)return;const u=o.current,d=h=>{h.preventDefault();const p=h.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,p)};u.addEventListener("paste",d),u.innerText="";for(const h of n){const p=document.createElement("div");h===""?p.innerHTML="<br/>":p.innerText=h,u.appendChild(p)}return u.focus(),()=>{u.removeEventListener("paste",d)}},[n]),g.useEffect(()=>{const u=r.current;return()=>{u()}},[]);const l=g.useMemo(()=>{const{borders:u,center:d}=Y(t,i);return he({point:[u.x,u.y],rotation:-t.rotation,origin:d})},[t,i]);return c.jsx("div",{className:"react-paint-editor-toolbox-edittextbox",ref:o,"data-fontbold":t.style?.fontBold??!1,"data-fontitalic":t.style?.fontItalic??!1,contentEditable:!e,onInput:u=>{const d=Array.from(u.target.childNodes).map(h=>fs(h));s(d)},style:{"--react-paint-editor-toolbox-edittextbox-transform":`translate3D(${(l[0]+i.canvasOffset[0])*i.canvasSize.scaleRatio}px, ${(l[1]+i.canvasOffset[1])*i.canvasSize.scaleRatio}px, 0) rotate(${Dt(t.rotation)}deg)`,"--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??Je}})},di=(e,t,n,s,a)=>{Nn(e),((i,o)=>{const{canvasZoom:r,size:l,canvasSize:{width:u,height:d}}=o;if(l!=="fixed"||r>=1)return;i.fillStyle="#f5f5f5",i.fillRect(0,0,u,d);const h=_n(o);i.clearRect(h.x,h.y,h.width,h.height),Kn(i,o)})(e,n),((i,o)=>{const{canvasSize:{width:r,height:l},gridGap:u,canvasOffset:d,canvasSize:{scaleRatio:h}}=o;if(!u)return;i.strokeStyle="rgb(220,220,220)",i.lineWidth=1,i.save(),i.scale(h,h),i.beginPath();const p=d[0]%u,v=d[1]%u,m=Math.ceil(r/h/u)+2,L=Math.ceil(l/h/u)+2;for(let C=-5;C<m;C++)i.moveTo(p+(C+1)*u,v-u),i.lineTo(p+(C+1)*u,v+l/h+u);for(let C=-5;C<L;C++)i.moveTo(p-u,v+(C+1)*u),i.lineTo(p+r/h+u,v+(C+1)*u);i.stroke(),i.restore()})(e,n);for(let i=s.length-1;i>=0;i--)t.mode==="textedition"&&s[i]===a||as(e,s[i],n)},ui=g.forwardRef(({canGrow:e,shapes:t,addShape:n,updateSingleShape:s,selectedShape:a,setSelectedShape:i,setSelectionFrame:o,hoveredShape:r,selectionFrame:l,refreshHoveredShape:u,refreshSelectedShapes:d,saveShapes:h,activeTool:p,setActiveTool:v,canvasOffsetStartData:m,setCanvasOffsetStartData:L,setCanvasOffset:C,isInsideComponent:b,selectionMode:x,setSelectionMode:w,selectionWidth:k,selectionColor:j,settings:T,isEditMode:z,isShiftPressed:Z,withFrameSelection:F,withSkeleton:V},D)=>{const Q=g.useRef(null),E=g.useRef(null),O=T.canvasSize,M=z;g.useImperativeHandle(D,()=>Q.current);const{hoverMode:P}=li({addShape:n,drawCanvasRef:Q,setActiveTool:v,shapes:t,selectionMode:x,activeTool:p,isInsideComponent:b,setCanvasOffset:C,selectedShape:a,canvasOffsetStartData:m,setCanvasOffsetStartData:L,setSelectedShape:i,setSelectionFrame:o,refreshHoveredShape:u,refreshSelectedShapes:d,updateSingleShape:s,saveShapes:h,setSelectionMode:w,isShiftPressed:Z,withFrameSelection:F,settings:T}),y=g.useCallback(f=>{if(a?.type!=="text")return;const S=Q.current?.getContext("2d");if(!S)return;const H=nt(Gs(S,a,f,T),T);s(H)},[s,a,T]);return g.useEffect(()=>{const f=Q.current?.getContext("2d");f&&window.requestAnimationFrame(()=>di(f,x,T,t,a))},[t,x,a,T]),g.useEffect(()=>{const f=E.current?.getContext("2d");f&&window.requestAnimationFrame(()=>((S,H,R,W,B,A,G,X,ne,se)=>{S.reset(),Kn(S,R),se&&X&&X.id!==G?.id&&W.type==="selection"&&H.mode==="default"&&os({ctx:S,shape:X,settings:R,selectionWidth:B,selectionColor:A,withAnchors:!1}),G&&W.type!=="brush"&&os({ctx:S,shape:G,settings:R,selectionWidth:B,selectionColor:A,withAnchors:H.mode!=="textedition"}),ne&&ei({ctx:S,selectionFrame:ne,settings:R})})(f,x,T,p,k,j,a,r,l,V))},[r,l,x,a,p,T,k,j,V]),c.jsx("div",{className:"react-paint-canvas-box",style:{"--react-paint-canvas-cursor":m?"grabbing":P.outOfView?"default":p.type!=="selection"&&p.type!=="move"||P.mode==="resize"?"crosshair":P.mode==="translate"?"move":P.mode==="rotate"||p.type==="move"?"grab":"default"},children:c.jsxs("div",{className:"react-paint-canvas-container","data-grow":e,children:[c.jsx("canvas",{className:An,ref:Q,"data-grow":e,width:O.width,height:O.height}),M&&c.jsx("canvas",{className:En,ref:E,width:O.width,height:O.height,"data-grow":e}),z&&x.mode==="textedition"&&a?.type==="text"&&c.jsx(ci,{disabled:!T.features.edition,shape:a,defaultValue:x.defaultValue,updateValue:y,saveShapes:h,settings:T})]})})}),vs="ArrowUp",ms="ArrowDown",ys="ArrowLeft",Qs="ArrowRight",hi="Delete",pi="Backspace",gi="Escape",xs="Shift",fi="z",vi="Z",mi="y",yi="Y",Ss="copy",bs="paste",Qi=({isInsideComponent:e,selectedShape:t,isEditingText:n,settings:s,setSelectedShape:a,removeShape:i,pasteShape:o,updateShape:r,backwardShape:l,forwardShape:u,setShiftPressed:d})=>{const[h,p]=g.useState(void 0);return g.useEffect(()=>{const v=b=>{t&&(n||(b.preventDefault(),p({...t})))},m=b=>{h&&(n||(b.preventDefault(),o(((x,w)=>({...Xt([20,20],x,[0,0],w),id:te(`${x.type}_`)}))(h,s))))},L=b=>{b.key===xs&&d(!1)},C=b=>{if(b.metaKey||b.ctrlKey){if(b.key===vi||b.key===fi)return b.preventDefault(),b.stopPropagation(),void l();if(b.key===yi||b.key===mi)return b.preventDefault(),b.stopPropagation(),void u()}if(b.key===xs)return void d(!0);if(!t)return;if(b.key===gi)return void a(void 0);if(n)return;const x={[ys]:[s.gridGap?-s.gridGap:-1,0],[Qs]:[s.gridGap?s.gridGap:1,0],[ms]:[0,s.gridGap?s.gridGap:1],[vs]:[0,s.gridGap?-s.gridGap:-1]};switch(b.key){case ys:case Qs:case ms:case vs:b.preventDefault(),b.stopPropagation(),r(Xt(x[b.key],t,[0,0],s));break;case hi:case pi:b.preventDefault(),b.stopPropagation(),i(t)}};if(e)return document.addEventListener("keydown",C),document.addEventListener("keyup",L),document.addEventListener(Ss,v),document.addEventListener(bs,m),()=>{document.removeEventListener("keydown",C),document.removeEventListener("keyup",L),document.removeEventListener(Ss,v),document.removeEventListener(bs,m)}},[e,h,n,t,s,r,i,a,o,l,u,d]),{}},xi=({isLoading:e=!1})=>{const[t,n]=g.useState("hidden");return g.useEffect(()=>{if(!e){n("fadeOut");const s=setTimeout(()=>n("hidden"),300);return()=>{clearTimeout(s)}}n("visible")},[e]),t==="hidden"?null:c.jsx("div",{className:"react-paint-editor-loading","data-loading":t,style:{"--react-paint-editor-loading-zindex":Hs,"--react-paint-editor-loading-transition-duration":"300ms"},children:c.jsxs("div",{className:"react-paint-editor-loader",children:[c.jsx("div",{}),c.jsx("div",{}),c.jsx("div",{}),c.jsx("div",{})]})})},Si="infos",bi=4e3,Ci=({type:e,text:t,duration:n})=>{const[s,a]=g.useState(!1);return g.useEffect(()=>{const i=setTimeout(()=>{a(!0)},100),o=setTimeout(()=>{a(!1)},n-500-100);return()=>{clearTimeout(i),clearTimeout(o)}},[n]),c.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+s,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:t})},wi=({snackbarList:e})=>c.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":Ps},children:e.map(t=>c.jsx(Ci,{...t},t.id))}),$=g.forwardRef((e,t)=>{if(e.type==="file"||e.type==="color"){const{hidden:d=!1,disabled:h=!1,selected:p=!1,icon:v,children:m,className:L="",title:C,onClick:b,...x}=e;return c.jsxs("label",{className:`react-paint-editor-button ${L}`,title:C,onClick:b,"data-disabled":+h,"data-selected":+p,"data-hidden":+d,children:[c.jsx("input",{ref:t,disabled:h,...x}),c.jsxs("span",{className:"react-paint-editor-button-content",children:[m&&c.jsx("span",{className:"react-paint-editor-button-children",children:m}),v&&c.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:v}})]})]})}const{hidden:n=!1,disabled:s=!1,selected:a=!1,icon:i,children:o,type:r="button",className:l="",...u}=e;return c.jsx("button",{className:`react-paint-editor-button ${l}`,ref:t,disabled:s,"data-disabled":+s,"data-selected":+a,"data-hidden":+n,type:r,...u,children:c.jsxs("span",{className:"react-paint-editor-button-content",children:[o&&c.jsx("span",{className:"react-paint-editor-button-children",children:o}),i&&c.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:i}})]})})}),Re=({children:e,title:t="",className:n="",position:s="bottom",fitContainer:a=!1,alignment:i="center",style:o,...r})=>c.jsxs("div",{className:`react-paint-editor-panel ${n}`,"data-fitcontainer":a,"data-position":s,"data-alignment":i,style:{...o,"--react-paint-editor-panel-zindex":Qn},...r,children:[t&&c.jsx("h3",{className:"react-paint-editor-panel-title",children:t}),e]}),Mi=e=>{switch(e){case"brush":return on;case"line":return dn;case"polygon":return Lt;case"curve":return un;case"rect":case"square":return Mt;case"circle":case"ellipse":return kt;case"text":return cn;case"picture":return jt;case"triangle":return""}},ki=({disabled:e=!1,shape:t,selected:n,layoutDragging:s,toggleShapeVisibility:a,toggleShapeLock:i,setLayoutDragging:o,handleRemove:r,handleSelect:l,onMoveShapes:u})=>{const d=g.useRef(null),{isOver:h}=(({disabled:p=!1,ref:v,shape:m,layoutDragging:L,setLayoutDragging:C,handleSelect:b,onMoveShapes:x})=>{const[w,k]=g.useState(!1);return g.useEffect(()=>{L||k(!1)},[L]),g.useEffect(()=>{const j=v.current;if(!j)return;const T=()=>{C(void 0)},z=Q=>(Q.preventDefault&&Q.preventDefault(),!1),Z=Q=>{b(m),Q.dataTransfer&&(Q.dataTransfer.effectAllowed="move",Q.dataTransfer.setData("draggableShapeId",m.id),C(m.id))},F=()=>{L!==m.id&&k(!0)},V=()=>{k(!1)},D=Q=>(Q.stopPropagation(),Q.dataTransfer&&x(Q.dataTransfer.getData("draggableShapeId"),m.id),!1);return p||(j.addEventListener("dragstart",Z),j.addEventListener("dragend",T),j.addEventListener("dragover",z),j.addEventListener("dragenter",F),j.addEventListener("dragleave",V),j.addEventListener("drop",D)),()=>{p||(j.removeEventListener("dragstart",Z),j.removeEventListener("dragend",T),j.removeEventListener("dragover",z),j.removeEventListener("dragenter",F),j.removeEventListener("dragleave",V),j.removeEventListener("drop",D))}},[p,v,m,C,b,x,L]),{isOver:w}})({disabled:e,ref:d,shape:t,layoutDragging:s,setLayoutDragging:o,handleSelect:l,onMoveShapes:u});return c.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(s===t.id),"data-is-over":+h,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),l(t))},"data-selected":+n,ref:d,tabIndex:-1,children:[c.jsx("span",{dangerouslySetInnerHTML:{__html:Mi(t.type)}}),c.jsx("span",{children:t.id}),c.jsx("div",{className:"react-paint-editor-layouts-separator"}),c.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>'}),c.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(),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>'}),c.jsx($,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),r(t))},icon:rn})]})},Li=({gridFormat:e,setGridFormat:t,settings:n,shapes:s,removeShape:a,toggleShapeVisibility:i,toggleShapeLock:o,selectedShape:r,moveShapes:l,selectShape:u,isLayoutPanelShown:d})=>{const[h,p]=g.useState(void 0),v=!n.features.edition;return d?c.jsx(Re,{alignment:"right",className:"react-paint-editor-layouts-panel",children:c.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:c.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[c.jsxs("div",{className:"react-paint-editor-layouts-row",children:[c.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),c.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:v,onClick:()=>t("none")}),["small","medium","large"].map(m=>c.jsx($,{className:"react-paint-editor-layouts-grid-button",selected:e===m,disabled:v,onClick:()=>t(m),children:m.charAt(0).toUpperCase()},m))]}),c.jsx("hr",{}),c.jsx("div",{className:"react-paint-editor-layouts",children:s.length===0?c.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):s.map(m=>c.jsx(ki,{shape:m,disabled:v,layoutDragging:h,setLayoutDragging:p,selected:r?.id===m.id,handleSelect:u,handleRemove:a,onMoveShapes:l,toggleShapeVisibility:i,toggleShapeLock:o},m.id))})]})})}):null},yt=({children:e,onClose:t,position:n="center",title:s,className:a=""})=>c.jsxs("div",{className:"react-paint-editor-modal","data-position":n,style:{"--react-paint-editor-modal-zindex":Qn},role:"dialog","aria-modal":"true","aria-labelledby":s,children:[c.jsx("div",{className:"react-paint-editor-modal-mask",onClick:t}),c.jsx("div",{className:`react-paint-editor-modal-panel ${a}`,children:e})]}),Qt=({selectedSettings:e,setSelectedSettings:t,title:n="Choisissez une couleur",mode:s="fill",disabled:a=!1,values:i,field:o,value:r="",valueChanged:l})=>{const[u]=g.useState(te("settings_")),d=e===u;return i.length?c.jsxs(c.Fragment,{children:[c.jsx($,{selected:d,title:n,disabled:a,onClick:()=>{t(h=>h===u?void 0:u)},icon:r==="transparent"?s==="fill"?vn:fn:void 0,children:r!=="transparent"&&c.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":s,style:{"--react-paint-editor-colorfield-color-value":r}})}),d&&c.jsx(Re,{title:n,alignment:"left",children:c.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[i.map(h=>c.jsx($,{title:h,selected:h===r,color:h,icon:h==="transparent"?s==="fill"?vn:fn:void 0,onClick:()=>{l(o,h)},children:h!=="transparent"&&c.jsx("div",{className:"react-paint-editor-colorfield-color",color:h,"data-mode":s,style:{"--react-paint-editor-colorfield-color-value":h}})},h)),c.jsx($,{type:"color",title:"Custom color",selected:!i.includes(r),value:r,onChange:h=>{const p=+h.target.value;l(o,Number.isNaN(p)?h.target.value:p)},children:c.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:c.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},ji=({disabled:e=!1,selectedShape:t,removeShape:n})=>c.jsx($,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{n(t)},icon:rn}),_t=({CustomOption:e,selectedSettings:t,setSelectedSettings:n,title:s="Choisissez l'option",disabled:a=!1,field:i,icon:o,values:r,defaultValue:l,valueChanged:u})=>{const[d]=g.useState(te("settings_")),h=t===d;return r.length?c.jsxs(c.Fragment,{children:[c.jsx($,{selected:h,title:s,icon:o,disabled:a,onClick:()=>{n(p=>p===d?void 0:d)}}),h&&c.jsx(Re,{title:s,alignment:"left",fitContainer:!0,children:c.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:r.map(p=>c.jsx($,{title:`${p}`,onClick:()=>(v=>{u(i,v)})(p),selected:l===p,style:{"--react-paint-editor-button-padding":"16px"},children:c.jsx(e,{children:p})},p))})})]}):null},Vi=({children:e})=>c.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),Cs=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?c.jsx(_t,{selectedSettings:e,setSelectedSettings:t,CustomOption:Vi,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,Hi=({disabled:e,toggleLayoutPanel:t})=>c.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"}),Pi=({children:e})=>c.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[c.jsx("span",{className:"react-paint-editor-linearrow-left"}),c.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),ws=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?c.jsx(_t,{selectedSettings:e,setSelectedSettings:t,CustomOption:Pi,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,Ti=({children:e})=>c.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[c.jsx("span",{}),c.jsx("span",{}),c.jsx("span",{}),c.jsx("span",{}),c.jsx("span",{}),c.jsx("span",{}),c.jsx("span",{})]}),Ms=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?c.jsx(_t,{selectedSettings:e,setSelectedSettings:t,CustomOption:Ti,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,st=({selectedSettings:e,setSelectedSettings:t,title:n="Choisissez l'intervalle",icon:s,disabled:a=!1,field:i,value:o=1,min:r=1,max:l=20,step:u=1,unity:d="",valueChanged:h})=>{const p=Math.round(o),[v]=g.useState(te("settings_")),m=g.useRef(null);g.useEffect(()=>()=>{m.current&&clearTimeout(m.current)},[]);const L=e===v;return r===l?null:c.jsxs(c.Fragment,{children:[c.jsx($,{selected:L,title:n,disabled:a,icon:s,onClick:()=>{t(C=>C===v?void 0:v)}}),L&&c.jsx(Re,{title:n,alignment:"left",fitContainer:!0,children:c.jsx("div",{children:c.jsxs("label",{className:"react-paint-editor-rangefield",children:[c.jsx("input",{type:"range",min:r,max:l,step:u,value:o,onChange:C=>{const b=+C.target.value;h(i,Number.isNaN(b)?C.target.value:b,!1),m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{h(i,Number.isNaN(b)?C.target.value:b,!0)},1e3)}}),c.jsxs("span",{children:[p,d]})]})})})]})},ks=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,min:s,max:a,step:i,value:o,valueChanged:r})=>s===a?null:c.jsx(st,{selectedSettings:e,setSelectedSettings:t,icon:Lt,title:"Nombre de points",disabled:n,field:"pointsCount",min:s,max:a,step:i,unity:"",value:o,valueChanged:r}),Zi=({disabled:e=!1,className:t,toggleZoomPanel:n})=>c.jsx($,{title:"Toggle zoom panel",disabled:e,onClick:n,icon:mn,className:t?` ${t}`:""}),xt=({setSelectedSettings:e,disabled:t=!1,field:n,icon:s,values:a,value:i=!1,valueChanged:o})=>{const[r]=g.useState(te("settings_"));return a.length!==2?null:c.jsx($,{onClick:()=>{e(l=>l===r?void 0:r),o(n,!i)},selected:i,disabled:t,icon:s})},Kt=({activeTool:e,selectedShape:t,selectedShapeTool:n,disabled:s,selectedSettings:a,setSelectedSettings:i,handleShapeStyleChange:o,handlePolygonLinesCount:r,handleShapeFontFamilyChange:l})=>t?n&&c.jsxs(c.Fragment,{children:["strokeColor"in n.settings&&!n.settings.strokeColor.hidden&&c.jsx(Qt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:s,field:"strokeColor",value:t.style?.strokeColor,valueChanged:o,values:n.settings.strokeColor.values}),"fillColor"in n.settings&&!n.settings.fillColor.hidden&&c.jsx(Qt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:s,field:"fillColor",value:t.style?.fillColor,valueChanged:o,values:n.settings.fillColor.values}),"lineWidth"in n.settings&&!n.settings.lineWidth.hidden&&c.jsx(st,{selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",icon:gn,disabled:s,field:"lineWidth",value:t.style?.lineWidth,valueChanged:o,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&&c.jsx(Ms,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:t.style?.lineDash,valueChanged:o,values:n.settings.lineDash.values}),"lineArrow"in n.settings&&!n.settings.lineArrow.hidden&&c.jsx(ws,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:t.style?.lineArrow,valueChanged:o,values:n.settings.lineArrow.values}),"pointsCount"in n.settings&&!n.settings.pointsCount.hidden&&c.jsx(ks,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:r,min:n.settings.pointsCount.min,max:n.settings.pointsCount.max,step:n.settings.pointsCount.step,value:t.style?.pointsCount}),"fontFamily"in n.settings&&!n.settings.fontFamily.hidden&&c.jsx(Cs,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:l,values:n.settings.fontFamily.values,defaultValue:t.style?.fontFamily}),"fontBold"in n.settings&&!n.settings.fontBold.hidden&&c.jsx(xt,{setSelectedSettings:i,disabled:s,field:"fontBold",icon:hn,valueChanged:l,values:n.settings.fontBold.values,value:t.style?.fontBold}),"fontItalic"in n.settings&&!n.settings.fontItalic.hidden&&c.jsx(xt,{setSelectedSettings:i,disabled:s,field:"fontItalic",icon:pn,valueChanged:l,values:n.settings.fontItalic.values,value:t.style?.fontItalic}),"opacity"in n.settings&&!n.settings.opacity.hidden&&c.jsx(st,{selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:ln,min:n.settings.opacity.min,max:n.settings.opacity.max,step:n.settings.opacity.step,unity:"%",disabled:s,field:"opacity",value:t.style?.opacity??100,valueChanged:o})]}):"settings"in e?c.jsxs(c.Fragment,{children:["strokeColor"in e.settings&&!e.settings.strokeColor.hidden&&c.jsx(Qt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:s,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:o,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&!e.settings.fillColor.hidden&&c.jsx(Qt,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:s,field:"fillColor",value:e.settings.fillColor.default,valueChanged:o,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&!e.settings.lineWidth.hidden&&c.jsx(st,{selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",disabled:s,field:"lineWidth",icon:gn,value:e.settings.lineWidth.default,valueChanged:o,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&!e.settings.lineDash.hidden&&c.jsx(Ms,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:e.settings.lineDash.default,valueChanged:o,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&!e.settings.lineArrow.hidden&&c.jsx(ws,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:e.settings.lineArrow.default,valueChanged:o,values:e.settings.lineArrow.values}),"pointsCount"in e.settings&&!e.settings.pointsCount.hidden&&c.jsx(ks,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:r,min:e.settings.pointsCount.min,max:e.settings.pointsCount.max,step:e.settings.pointsCount.step,value:e.settings.pointsCount.default}),"fontFamily"in e.settings&&!e.settings.fontFamily.hidden&&c.jsx(Cs,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:l,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&!e.settings.fontBold.hidden&&c.jsx(xt,{setSelectedSettings:i,disabled:s,field:"fontBold",icon:hn,valueChanged:l,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&!e.settings.fontItalic.hidden&&c.jsx(xt,{setSelectedSettings:i,disabled:s,field:"fontItalic",icon:pn,valueChanged:l,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&!e.settings.opacity.hidden&&c.jsx(st,{selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:ln,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:o})]}):null,zi=({width:e,availableTools:t,updateToolSettings:n,layersManipulation:s=!1,toggleLayoutPanel:a,activeTool:i,selectedShape:o,canvas:r,settings:l,updateShape:u,removeShape:d,isZoomPanelShown:h,setIsZoomPanelShown:p})=>{const[v,m]=g.useState(void 0),[L,C]=g.useState(!1),b=l.size==="infinite"||l.features.zoom,x=!l.features.edition,w=()=>{C(V=>!V)},k=o?t.find(V=>V.id===o.toolId)||t.find(V=>V.type===o.type):void 0,j=(k?Object.keys(k.settings).length+1:"settings"in i?Object.keys(i.settings).length:0)+ +s+ +b,T=e<40*j,z=(V,D,Q=!0)=>{o?(u(nt(le(["style",V],D,o),l),Q),k&&n(k.id,V,D)):n(i.id,V,D)},Z=(V,D)=>{if(o){if(o.type!=="text")return;const Q=r?.getContext("2d");if(!Q)return;const E=le(["style",V],D,o),O=Ut(Q,E.value,E.width,E.style?.fontBold??!1,E.style?.fontItalic??!1,E.style?.fontFamily),M=nt({...E,fontSize:O,height:O*E.value.length},l);u(M,!0),k&&n(k.id,V,D)}else n(i.id,V,D)},F=(V,D)=>{if(o){if(o.type!=="polygon"&&o.type!=="curve")return;u(o.type==="polygon"?((Q,E,O)=>{const M=Q.points.length;if(M===E)return Q;if(M>E){const S=Q.points.slice(0,E);return Ye({...Q,points:S,style:{...Q.style,pointsCount:S.length}},O)}const P=E-M,y=new Array(P).fill(void 0).map((S,H)=>[Q.points[0][0]+(Q.points[1][0]-Q.points[0][0])*(H+1)/(P+1),Q.points[0][1]+(Q.points[1][1]-Q.points[0][1])*(H+1)/(P+1)]),f=[Q.points[0],...y,...Q.points.slice(1,Q.points.length)];return Ye({...Q,points:f,style:{...Q.style,pointsCount:f.length}},O)})(o,D,l):((Q,E,O)=>{const M=Q.points.length;if(M===E)return Q;if(M>E){const S=Q.points.slice(0,E);return qe({...Q,points:S,style:{...Q.style,pointsCount:S.length}},O)}const P=E-M,y=new Array(P).fill(void 0).map((S,H)=>[Q.points[0][0]+(Q.points[1][0]-Q.points[0][0])*(H+1)/(P+1),Q.points[0][1]+(Q.points[1][1]-Q.points[0][1])*(H+1)/(P+1)]),f=[Q.points[0],...y,...Q.points.slice(1,Q.points.length)];return qe({...Q,points:f,style:{...Q.style,pointsCount:f.length}},O)})(o,D,l),!0),k&&n(k.id,V,D)}else n(i.id,V,D)};return c.jsxs(c.Fragment,{children:[c.jsxs("div",{className:"react-paint-editor-settings-bar",children:[c.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[b&&c.jsx(Zi,{className:h?"react-paint-editor-bar-zoom-button-opened":void 0,toggleZoomPanel:()=>{p(V=>!V)}}),T&&j>2&&c.jsx($,{disabled:x,onClick:w,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>'}),o?k&&c.jsxs(c.Fragment,{children:[!T&&c.jsx(Kt,{activeTool:i,selectedShape:o,selectedShapeTool:k,disabled:x,selectedSettings:v,setSelectedSettings:m,handleShapeStyleChange:z,handlePolygonLinesCount:F,handleShapeFontFamilyChange:Z}),i.type==="selection"&&c.jsx(ji,{disabled:x,selectedShape:o,removeShape:d})]}):!T&&c.jsx(Kt,{activeTool:i,selectedShape:o,selectedShapeTool:k,disabled:x,selectedSettings:v,setSelectedSettings:m,handleShapeStyleChange:z,handlePolygonLinesCount:F,handleShapeFontFamilyChange:Z})]}),c.jsx("div",{className:"react-paint-editor-settings-separator"}),s&&c.jsx(Hi,{disabled:x,toggleLayoutPanel:a})]}),L&&c.jsx(yt,{className:"react-paint-editor-settings-modal",onClose:w,position:"bottom",title:"Settings",children:c.jsx(Kt,{activeTool:i,selectedShape:o,selectedShapeTool:k,disabled:x,selectedSettings:v,setSelectedSettings:m,handleShapeStyleChange:z,handlePolygonLinesCount:F,handleShapeFontFamilyChange:Z})})]})},Ls=({disabled:e=!1,withText:t=!1,loadFile:n,type:s,img:a,accept:i})=>{const o=g.useRef(null);return c.jsx($,{ref:o,type:"file",onClick:r=>{r.stopPropagation(),o.current&&(o.current.value="")},onChange:r=>{const l=r.target.files?.item(0);l&&n(l)},accept:i,title:s.label??s.type,icon:a,disabled:e,children:t?s.label:void 0})},de=({type:e,img:t,isActive:n,withText:s=!1,disabled:a=!1,setActive:i})=>c.jsx($,{disabled:a,selected:n,onClick:()=>{i(e)},title:e.label??e.type,icon:t,children:s?e.label:void 0}),Ai=({activeTool:e,withActionsInMenu:t,hasActionToUndo:n=!1,hasActionToRedo:s=!1,hasActionToClear:a=!1,undoAction:i,redoAction:o,clearCanvas:r,alignment:l,group:u,vertical:d=!1,disabled:h=!1,withLoadAndSave:p,withExport:v,addPicture:m,loadFile:L,togglePictureUrlModal:C,saveFile:b,toggleExportModal:x,withUploadPicture:w,withUrlPicture:k})=>{const[j,T]=g.useState(!1),[,z]=g.useTransition(),Z=u?.tools?.some(V=>V===e.type),F=(Z?e.icon:u.img)??u.title;return g.useEffect(()=>{if(!j)return;const V=()=>{T(!1)};return document.addEventListener("click",V),()=>{document.removeEventListener("click",V)}},[j]),t||w||k||p||v?c.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[c.jsx($,{selected:Z,title:u.title,disabled:h,onClick:()=>{z(()=>{T(!0)})},icon:F}),j&&c.jsx(Re,{alignment:l,position:"top",children:c.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+d,children:[t&&c.jsxs(c.Fragment,{children:[c.jsx(de,{withText:!0,type:Oe,disabled:h||!n,img:Oe.icon,isActive:e.id===Oe.id,setActive:i}),c.jsx(de,{withText:!0,type:Ie,disabled:h||!s,img:Ie.icon,isActive:e.id===Ie.id,setActive:o}),c.jsx(de,{withText:!0,type:$e,disabled:h||!a,img:$e.icon,isActive:e.id===$e.id,setActive:r}),(w||k||p)&&c.jsx("hr",{})]}),w&&c.jsx(Ls,{withText:!0,type:Hn,disabled:h,loadFile:async V=>{T(!1),await m(V)},img:Hn.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml"}),k&&c.jsx($,{disabled:h,selected:!1,onClick:C,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"}),(w||k)&&p&&c.jsx("hr",{}),p&&c.jsxs(c.Fragment,{children:[c.jsx(Ls,{withText:!0,type:Vn,disabled:h,loadFile:V=>{T(!1),L(V)},img:Vn.icon,accept:"application/JSON"}),c.jsx(de,{withText:!0,disabled:h,type:Pt,img:Pt.icon,isActive:e.id===Pt.id,setActive:b})]}),v&&c.jsx(de,{withText:!0,disabled:h,type:Ht,img:Ht.icon,isActive:e.id===Ht.id,setActive:x})]})})]}):null},Ei=({togglePictureUrlModal:e,addPicture:t})=>{const n=g.useRef(null);return g.useEffect(()=>{n.current&&n.current.focus()},[]),c.jsx(yt,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,title:"Add picture from URL",children:c.jsxs("form",{onSubmit:async s=>{s.preventDefault();const a=n.current?.value;a&&(await t(a),e())},children:[c.jsxs("label",{children:["URL ",c.jsx("input",{type:"text",ref:n})]}),c.jsx($,{onClick:e,children:"Annuler"}),c.jsx($,{type:"submit",selected:!0,children:"Ajouter"})]})})},js="Choose export settings",Ri=({toggleExportModal:e,exportCanvasInFile:t})=>{const n=async s=>{t(s),e()};return c.jsxs(yt,{className:"react-paint-editor-toolbox-export-modal",onClose:e,title:js,children:[c.jsx("h3",{children:js}),c.jsx("hr",{}),c.jsx($,{onClick:()=>n("currentZoom"),children:"Exporter la vue actuelle"}),c.jsx($,{onClick:()=>n("defaultView"),children:"Exporter le canvas entier"}),c.jsx($,{onClick:()=>n("fitToShapes"),children:"Exporter dans les limites du dessin"}),c.jsx($,{selected:!0,onClick:e,children:"Annuler"})]})},Di=({activeTool:e,alignment:t,group:n,disabled:s=!1,setActiveToolFromId:a})=>{const i=g.useRef(null),[o,r]=g.useState(!1),[,l]=g.useTransition(),[u,d]=g.useState(void 0),h=m=>{d(m),a(m.id)};if(g.useEffect(()=>{if(!o)return;const m=L=>{!Dn(L,i.current)&&r(!1)};return document.addEventListener("mousedown",m,{passive:!1}),document.addEventListener("touchstart",m,{passive:!1}),()=>{document.removeEventListener("mousedown",m),document.removeEventListener("touchstart",m)}},[o]),"type"in n)return c.jsx(de,{disabled:s,type:n,img:n.icon,isActive:e.id===n.id,setActive:h});if(!n.toolsType.length)return null;if(n.toolsType?.length===1)return c.jsx(de,{disabled:s,type:n.toolsType[0],img:n.toolsType[0].icon,isActive:e.id===n.toolsType[0].id,setActive:h});const p=n?.toolsType.find(m=>m.type===e.type)!==void 0,v=(u?u.icon:n.toolsType?.[0]?.icon)??n.title;return c.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[c.jsx($,{selected:p,title:n.title,disabled:s,onClick:()=>{u?a(u.id):n.toolsType?.[0]&&h(n.toolsType[0]),l(()=>{r(!0)})},icon:v}),o&&c.jsx(Re,{alignment:t,position:"top",children:c.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+n.vertical,ref:i,children:n.toolsType.map(m=>c.jsx(de,{disabled:s,type:m,img:m.icon,isActive:e.id===m.id,setActive:h},m.id))})})]})},Wi=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],Ni=({settings:e,width:t,activeTool:n,hasActionToUndo:s=!1,hasActionToRedo:a=!1,hasActionToClear:i=!1,withLoadAndSave:o,withExport:r,clearCanvas:l,setActiveTool:u,undoAction:d,redoAction:h,addPicture:p,loadFile:v,saveFile:m,exportCanvasInFile:L,availableTools:C,withUrlPicture:b,withUploadPicture:x})=>{const w=((f,S)=>{const H=S.flatMap(R=>{if(typeof R!="object")return f.filter(B=>B.type===R);const W=f.filter(B=>R.toolsType.includes(B.type));return W?{...R,toolsType:W}:null});return Yt(H)})(C,Wi),k=!e.features.edition,j=t<40*(6+w.length),T=t<40*(3+w.length),[z,Z]=g.useState(!1),[F,V]=g.useState(!1),[D,Q]=g.useState(!1),E=()=>{Z(f=>!f)},O=()=>{Q(f=>!f)},M=f=>{u(f),Z(!1)},P=f=>{M(C.find(S=>S.id===f)??n)},y=C.find(f=>f.type===n.type)!==void 0;return c.jsxs(c.Fragment,{children:[c.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",style:{"--react-paint-editor-toolbar-minwidth":"160px"},children:[c.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[c.jsx(de,{type:Me,disabled:k,img:Me.icon,isActive:n.id===Me.id,setActive:M}),(e.size==="infinite"||e.features.zoom)&&c.jsx(de,{type:Tt,disabled:k,img:Tt.icon,isActive:n.id===Tt.id,setActive:M}),T?c.jsx($,{disabled:k,onClick:E,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:y}):w.map(f=>c.jsx(Di,{disabled:k,activeTool:n,group:f,setActiveToolFromId:P},"id"in f?f.id:f.title))]}),!j&&c.jsxs(c.Fragment,{children:[c.jsx(de,{type:Oe,disabled:k||!s,img:Oe.icon,isActive:n.id===Oe.id,setActive:d}),c.jsx(de,{type:Ie,disabled:k||!a,img:Ie.icon,isActive:n.id===Ie.id,setActive:h}),c.jsx(de,{type:$e,disabled:k||!i,img:$e.icon,isActive:n.id===$e.id,setActive:l})]}),c.jsx(Ai,{withActionsInMenu:j,disabled:k,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:v,saveFile:m,togglePictureUrlModal:()=>{V(!0)},toggleExportModal:O,withUploadPicture:x,withUrlPicture:b,withLoadAndSave:o,withExport:r,hasActionToUndo:s,hasActionToRedo:a,hasActionToClear:i,undoAction:d,redoAction:h,clearCanvas:l})]}),z&&c.jsx(yt,{className:"react-paint-editor-toolbar-modal",onClose:E,title:"Outils",children:C.map(f=>f.type==="picture"?null:c.jsx(de,{disabled:k,type:f,img:f.icon,withText:!1,isActive:n.id===f.id,setActive:M},f.id))}),F&&c.jsx(Ei,{togglePictureUrlModal:()=>{V(f=>!f)},addPicture:p}),D&&c.jsx(Ri,{toggleExportModal:O,exportCanvasInFile:L})]})},St={none:0,small:10,medium:20,large:40},Fi={toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8"},Oi=()=>{const e=g.useRef([]),[t,n]=g.useState([]);return g.useEffect(()=>()=>{for(const s of e.current)clearTimeout(s)},[]),{snackbarList:t,addSnackbar:({type:s=Si,duration:a=bi,text:i})=>{const o={id:te("snackbar_"),duration:a,type:s,text:i};n(r=>[...r,o]),e.current=[...e.current,setTimeout(()=>{return r=o.id,void n(l=>l.filter(u=>u.id!==r));var r},a)]}}};we.Canvas=({options:e,className:t,style:n,canvasProps:s})=>{const{shapesRef:a,selectedShape:i,selectionFrame:o,hoveredShape:r,addShape:l,setSelectedShape:u,setSelectionFrame:d,refreshSelectedShapes:h,refreshHoveredShape:p,removeShape:v,updateShape:m,backwardShape:L,forwardShape:C,saveShapes:b,refs:x,width:w,height:k,settings:j,setCanvasSize:T,setCanvasOffset:z,selectShape:Z,activeTool:F,setActiveTool:V,isInsideComponent:D,isEditMode:Q,canvas:{withSkeleton:E,withFrameSelection:O,canGrow:M,canShrink:P},canvasOffsetStartData:y,setCanvasOffsetStartData:f,selectionMode:S,setSelectionMode:H}=s,{canvasBackgroundColor:R,canvasSelectionColor:W,canvasSelectionWidth:B}={...Ts,...e},A=g.useRef(null),[G,X]=g.useState(!1),ne=g.useCallback(N=>{l(N),Z(N)},[l,Z]),se=g.useCallback(N=>{T({realWidth:w,realHeight:k,width:N,height:k*N/w,scaleRatio:N/w})},[w,k,T]);return Qi({isInsideComponent:D,isEditingText:S.mode==="textedition",settings:j,selectedShape:i,setSelectedShape:u,removeShape:v,pasteShape:ne,updateShape:m,backwardShape:L,forwardShape:C,setShiftPressed:X}),(({onResized:N,element:oe})=>{g.useEffect(()=>{const ie=oe.current;if(!ie)return;const me=new ResizeObserver(Pe=>{const Qe=Pe?.[0]?.borderBoxSize?.[0],{width:K,height:xe}=Qe?{width:Qe.inlineSize,height:Qe.blockSize}:Pe?.[0].contentRect??{};N(K,xe)});return me.observe(ie),()=>{me.unobserve(ie)}},[oe,N])})({element:A,onResized:se}),c.jsx("div",{ref:A,className:"react-paint-app-row"+(t?` ${t}`:""),"data-grow":M,"data-shrink":P,style:{"--react-paint-app-row-width":j.canvasSize.width,"--react-paint-app-canvaswidth":w,"--react-paint-app-canvasheight":k,"--react-paint-app-row-aspectratio":`calc(${j.canvasSize.width} / ${j.canvasSize.height})`,"--react-paint-app-canvas-bg":R,...n},children:c.jsx(ui,{ref:x.canvas,canGrow:M,isInsideComponent:D,activeTool:F,setActiveTool:V,canvasOffsetStartData:y,setCanvasOffsetStartData:f,shapes:a.current,addShape:l,updateSingleShape:m,selectedShape:i,selectionFrame:o,setSelectedShape:u,setSelectionFrame:d,hoveredShape:r,refreshHoveredShape:p,refreshSelectedShapes:h,settings:j,setCanvasOffset:z,saveShapes:b,selectionMode:S,setSelectionMode:H,selectionColor:W,selectionWidth:B,isEditMode:Q,isShiftPressed:G,withFrameSelection:O,withSkeleton:E})})},we.Editor=({editorProps:e,className:t,style:n,options:s,children:a})=>{const{shapesRef:i,addPictureShape:o,moveShapes:r,toggleShapeVisibility:l,toggleShapeLock:u,canGoBackward:d,canGoForward:h,canClear:p,selectedShape:v,removeShape:m,updateShape:L,backwardShape:C,forwardShape:b,refs:x,width:w,height:k,selectTool:j,selectShape:T,activeTool:z,setActiveTool:Z,setAvailableTools:F,isEditMode:V,availableTools:D,gridGap:Q,setGridGap:E,loadFile:O,exportPicture:M,exportData:P,clearCanvas:y,settings:f,setCanvasZoom:S,canvas:{canGrow:H,layersManipulation:R,withExport:W,withLoadAndSave:B,withUploadPicture:A,withUrlPicture:G}}=e,{toolbarBackgroundColor:X,dividerColor:ne,fontRadius:se,fontDisabledColor:N,fontDisabledBackgroundColor:oe,fontColor:ie,fontBackgroundColor:me,fontSelectedColor:Pe,fontSelectedBackgroundColor:Qe,fontHoverColor:K,fontHoverBackgroundColor:xe}={...Fi,...s},Ge=f.size==="infinite"||f.features.zoom,[_e,re]=g.useState(!1),[Te,ue]=g.useState(!1),[J,Le]=g.useState(Ge),Se=Ge&&J,Ke=Q>=St.large?"large":Q>=St.medium?"medium":Q>=St.small?"small":"none",{snackbarList:Ze,addSnackbar:ge}=Oi(),bt=g.useCallback((ee,_,De)=>{F(ze=>ze.map(it=>it.id===ee?le(["settings",_,"default"],De,it):it)),Z(ze=>ze.id===ee?le(["settings",_,"default"],De,ze):ze)},[Z,F]),Ct=g.useCallback(()=>{j(Me),C()},[j,C]),wt=g.useCallback(()=>{j(Me),b()},[j,b]),Jt=g.useCallback(ee=>{re(!0);try{M(ee)}catch(_){_ instanceof Error&&ge({type:"error",text:`L'export a échoué : ${_.message}`}),console.warn(_)}finally{re(!1)}},[M,ge]),en=g.useCallback(()=>{re(!0);try{P(),re(!1)}catch(ee){ee instanceof Error&&ge({type:"error",text:"L'enregistrement a échoué"}),console.warn(ee)}finally{re(!1)}},[P,ge]),tn=g.useCallback(async ee=>{re(!0);try{await O(ee),ge({type:"success",text:"Fichier chargé !"})}catch(_){_ instanceof Error&&ge({type:"error",text:"Le chargement a échoué"}),console.warn(_)}finally{re(!1)}},[O,ge]),nn=g.useCallback(async ee=>{re(!0);try{const _=await o(ee,w,k);T(_)}catch(_){_ instanceof Error&&ge({type:"error",text:"Le chargement a échoué"}),console.warn(_)}finally{re(!1)}},[o,T,ge,w,k]),sn=`${t?`${t} `:""}${Te?"react-paint-editor-layout-opened ":""}react-paint-editor-app`;return c.jsxs("div",{ref:x.setEditor,className:sn,style:{"--react-paint-editor-app-maxWidth":H?"100%":`${w}px`,"--react-paint-editor-app-toolbar-bg":X,"--react-paint-editor-app-divider-color":ne,"--react-paint-editor-app-font-radius":se,"--react-paint-editor-app-font-disabled-color":N,"--react-paint-editor-app-font-disabled-bg":oe,"--react-paint-editor-app-font-color":ie,"--react-paint-editor-app-font-bg":me,"--react-paint-editor-app-font-selected-color":Pe,"--react-paint-editor-app-font-selected-bg":Qe,"--react-paint-editor-app-font-hover-color":K,"--react-paint-editor-app-font-hover-bg":xe,...n},children:[V&&c.jsx(Ni,{settings:f,width:f.canvasSize.width,activeTool:z,clearCanvas:y,setActiveTool:j,exportCanvasInFile:Jt,saveFile:en,loadFile:tn,addPicture:nn,hasActionToUndo:d,hasActionToRedo:h,hasActionToClear:p,undoAction:Ct,redoAction:wt,availableTools:D,withExport:W,withLoadAndSave:B,withUploadPicture:A,withUrlPicture:G}),a,V&&R&&c.jsx(Li,{gridFormat:Ke,setGridFormat:ee=>{E(St[ee])},shapes:i.current,moveShapes:r,selectedShape:v,removeShape:m,selectShape:T,toggleShapeVisibility:l,toggleShapeLock:u,isLayoutPanelShown:Te,settings:f}),Se&&c.jsxs(Re,{alignment:"left",className:"react-paint-editor-layouts-panel","data-edit":+V,children:[c.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")}),c.jsxs($,{className:"react-paint-editor-zoom-button react-paint-editor-zoom-button-value",onClick:()=>S("default"),children:[Math.round(100*f.canvasZoom),"%"]}),c.jsx($,{className:"react-paint-editor-zoom-button",icon:mn,onClick:()=>S("zoom")})]}),V&&c.jsxs(c.Fragment,{children:[c.jsx(zi,{setCanvasZoom:S,width:f.canvasSize.width,activeTool:z,availableTools:D,selectedShape:v,settings:f,removeShape:m,updateShape:L,canvas:x.canvas.current,layersManipulation:R,toggleLayoutPanel:()=>{ue(ee=>!ee)},isZoomPanelShown:Se,setIsZoomPanelShown:Le,updateToolSettings:bt}),c.jsx(xi,{isLoading:_e}),c.jsx(wi,{snackbarList:Ze})]})]})},we.useReactPaint=({width:e=1e3,height:t=600,shapes:n,mode:s="editor",disabled:a=!1,options:i=Rn}={})=>{const{layersManipulation:o,brushAlgo:r,isBrushShapeDoneOnMouseUp:l,grid:u,canGrow:d,canShrink:h,withExport:p,withLoadAndSave:v,withUploadPicture:m,withUrlPicture:L,withSkeleton:C,withFrameSelection:b,clearCallback:x,availableTools:w,canvasSelectionPadding:k,size:j,canZoom:T}={...Rn,...i},z=s!=="viewer",Z=g.useRef(null),F=g.useRef(null),V=g.useRef(!1),D=g.useCallback(U=>{Z.current=U},[]),[Q,E]=g.useState(void 0),[O,M]=g.useState(Me),[P,y]=g.useState({mode:"default"}),[f,S]=g.useState(u),[H,R]=g.useState({realWidth:e,realHeight:t,width:e,height:t,scaleRatio:1}),W=T==="always"&&!a,{canvasTransformation:B,setCanvasTransformation:A,setCanvasOffset:G,setCanvasZoom:X}=oi({canvasSize:H,size:j,canvasElt:F.current,zoomEnabled:W}),{offset:ne,zoom:se}=B,N=g.useMemo(()=>({brushAlgo:r,isBrushShapeDoneOnMouseUp:l,canvasSize:{realWidth:H.realWidth,realHeight:H.realHeight,width:H.width,height:H.height,scaleRatioWithNoZoom:H.scaleRatio,scaleRatio:H.scaleRatio*se},size:j,canvasOffset:ne,canvasZoom:se,gridGap:f,selectionPadding:k,features:{edition:z&&!a,zoom:W}}),[k,f,r,l,se,ne,H,j,a,W,z]),[oe,ie]=g.useState(gs(w,m||L)),{isInsideComponent:me}=(({settings:U,componentRef:fe})=>{const[at,Ne]=g.useState(!1),Fe=!U.features.edition&&!U.features.zoom;return g.useEffect(()=>{if(!Fe){const be=ot=>{Ne(Dn(ot,fe.current))};return document.addEventListener("mousedown",be,{passive:!0}),document.addEventListener("touchstart",be,{passive:!0}),()=>{document.removeEventListener("mousedown",be),document.removeEventListener("touchstart",be)}}Ne(!1)},[Fe,fe]),{isInsideComponent:at}})({settings:N,componentRef:Z}),{registerEvent:Pe,unregisterEvent:Qe,shapesRef:K,selectedShape:xe,selectionFrame:Ge,hoveredShape:_e,addShape:re,addPictureShape:Te,moveShapes:ue,setSelectedShape:J,setSelectionFrame:Le,refreshSelectedShapes:Se,refreshHoveredShape:Ke,removeShape:Ze,updateShape:ge,backwardShape:bt,forwardShape:Ct,clearShapes:wt,saveShapes:Jt,toggleShapeVisibility:en,toggleShapeLock:tn,canGoBackward:nn,canGoForward:sn,canClear:ee}=ii(N,e,t),_=g.useCallback(U=>{J(void 0),M(U)},[J]),De=g.useCallback((U,fe)=>{wt(U,fe),_(Me),A({offset:[0,0],zoom:1})},[_,wt,A]),ze=g.useCallback(U=>{M(Me),J(U)},[J]),it=g.useCallback(()=>{const U=ni(K.current,e,t);if(!U)throw new Error("L'encodage a échoué");ds(U,"drawing.json")},[K,e,t]),Ii=g.useCallback(U=>{const fe=us({shapes:K.current,settings:N,view:U});ds(fe,"drawing.png")},[K,N]),$i=g.useCallback(U=>us({shapes:K.current,settings:N,view:U}),[K,N]),Bi=g.useCallback(()=>Gt(K.current,e,t),[K,e,t]);g.useEffect(()=>{me||J(void 0)},[me,J]);const We=g.useCallback(async(U,fe)=>{const at=await(async(Ne,Fe)=>{if(!Ne)return[];const be=[],ot=Yt(Ne.map(pe=>{if(!pe||!zn.includes(pe.type))return null;if(pe.type==="picture"){const Ce=new Image,qi=new Promise((rt,Gi)=>{Ce.onload=()=>{URL.revokeObjectURL(Ce.src),rt()},Ce.onerror=()=>{Gi(new Error("Some images could not be loaded"))}});if(be.push(qi),pe.src.startsWith("http"))cs(pe.src).then(rt=>{Ce.src=rt}).catch(()=>{Ce.src=""});else if(pe.src.includes("<svg")){const rt=new Blob([pe.src],{type:"image/svg+xml"});Ce.src=URL.createObjectURL(rt)}else Ce.src=pe.src;return hs({...pe,img:Ce},Fe)}return hs(pe,Fe)}));return await Promise.all(be),ot})(U,N);De(at,fe)},[De,N]),an=g.useRef(We);an.current=We;const Ui=g.useCallback((U=[],fe=!0)=>{an.current?.(U,{clearHistory:fe,source:"remote"})},[]);g.useEffect(()=>{V.current||(V.current=!0,n&&an.current?.(n,{clearHistory:!0,source:"remote"}))},[n]);const Xi=g.useCallback(async U=>{const fe=await(async at=>new Promise((Ne,Fe)=>{const be=new FileReader;be.onload=ot=>{const pe=ot.target?.result;if(!pe)return Fe("Impossible de récupérer les données du fichier");const Ce=JSON.parse(pe);Ne(Ce)},be.readAsText(at)}))(U);await We(fe.shapes??[],{clearHistory:!0,source:"remote"})},[We]),Yi=g.useCallback(()=>{typeof x!="string"?We(x(),{clearHistory:!1,source:"user"}):x==="defaultShapes"&&n!==void 0?We(n,{clearHistory:!1,source:"user"}):De([],{clearHistory:!1,source:"user"})},[De,We,n,x]);g.useEffect(()=>{ie(gs(w,m||L))},[w,m,L]);const Vs={canvas:F,editor:Z,setEditor:D};return{annotationsProps:{style:{"user-select":"none","touch-action":"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":N.canvasZoom,"--react-paint-canvas-offset-x":N.canvasOffset[0],"--react-paint-canvas-offset-y":N.canvasOffset[1],"--react-paint-app-canvaswidth":e,"--react-paint-app-canvasheight":t}},editorProps:{shapesRef:K,addPictureShape:Te,moveShapes:ue,toggleShapeVisibility:en,toggleShapeLock:tn,canGoBackward:nn,canGoForward:sn,canClear:ee,selectedShape:xe,removeShape:Ze,updateShape:ge,backwardShape:bt,forwardShape:Ct,refs:Vs,width:e,height:t,selectTool:_,selectShape:ze,activeTool:O,setActiveTool:M,setAvailableTools:ie,isEditMode:z,availableTools:oe,gridGap:f,setGridGap:S,loadFile:Xi,exportPicture:Ii,exportData:it,clearCanvas:Yi,settings:N,setCanvasZoom:X,canvas:{canGrow:d,canShrink:h,layersManipulation:o,withExport:p,withLoadAndSave:v,withUploadPicture:m,withUrlPicture:L}},canvasProps:{shapesRef:K,selectedShape:xe,selectionFrame:Ge,hoveredShape:_e,addShape:re,setSelectedShape:J,setSelectionFrame:Le,refreshSelectedShapes:Se,refreshHoveredShape:Ke,removeShape:Ze,updateShape:ge,backwardShape:bt,forwardShape:Ct,saveShapes:Jt,refs:Vs,width:e,height:t,settings:N,setCanvasSize:R,setCanvasOffset:G,setCanvasZoom:X,selectShape:ze,activeTool:O,setActiveTool:M,isInsideComponent:me,isEditMode:z,canvas:{withSkeleton:C,withFrameSelection:b,canGrow:d,canShrink:h},canvasOffsetStartData:Q,setCanvasOffsetStartData:E,selectionMode:P,setSelectionMode:y},registerEvent:Pe,unregisterEvent:Qe,resetCanvas:Ui,getCurrentImage:$i,getCurrentData:Bi,setCanvasOffset:G,setCanvasZoom:X}},Object.defineProperty(we,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(ke,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],g):g((ke=typeof globalThis<"u"?globalThis:ke||self)["react-paint"]={},ke.React,ke.jsxRuntime)})(this,function(ke,g,u){"use strict";const on='<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>',Vt='<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>',Ht='<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>',Tt='<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>',rn='<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>',ln='<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>',Zt='<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>',dn='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',un='<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>',hn='<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>',gn='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',fn='<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>',mn='<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>',re=["transparent","black","white","red","green","blue","yellow"],He=[0,1,2],yn=[[1,0],[1,2],[4,6]],tt="serif",Ds=2,Qn=3,Ws=4,J="react-paint-",zt={type:"picture",id:`${J}picture`,icon:Zt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},xn={type:"brush",id:`${J}brush`,icon:on,label:"Brosse",settings:{strokeColor:{values:re,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:He,default:0}}},Sn={type:"line",id:`${J}line`,icon:dn,label:"Ligne",settings:{strokeColor:{values:re,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:He,default:0},lineArrow:{values:[0,1,2,3],default:0}}},bn={type:"polygon",id:`${J}polygon`,icon:Tt,label:"Polygone",settings:{strokeColor:{values:re,default:"black"},fillColor:{values:re,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:He,default:0},closedPoints:{default:0}}},Cn={type:"curve",id:`${J}curve`,icon:un,label:"Courbe",settings:{strokeColor:{values:re,default:"black"},fillColor:{values:re,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:He,default:0},closedPoints:{default:0}}},wn={type:"rect",id:`${J}rect`,icon:Vt,label:"Rectangle",settings:{strokeColor:{values:re,default:"black"},fillColor:{values:re,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:He,default:0}}},Mn={type:"square",id:`${J}square`,icon:Vt,label:"Carré",settings:{strokeColor:{values:re,default:"black"},fillColor:{values:re,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:He,default:0}}},kn={type:"circle",id:`${J}circle`,icon:Ht,label:"Cercle",settings:{strokeColor:{values:re,default:"black"},fillColor:{values:re,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:He,default:0}}},Pn={type:"ellipse",id:`${J}ellipse`,icon:Ht,label:"Ellipse",settings:{strokeColor:{values:re,default:"black"},fillColor:{values:re,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:He,default:0}}},Ln={type:"text",id:`${J}text`,icon:cn,label:"Texte",settings:{strokeColor:{values:re,default:"black"},opacity:{min:0,max:100,step:1,default:100},fontFamily:{values:["arial","serif","monospace"],default:tt},fontBold:{values:[!1,!0],default:!1},fontItalic:{values:[!1,!0],default:!1}}},Pe={id:`${J}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"},Be={id:`${J}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"},Ue={id:`${J}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"},Xe={id:`${J}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"},At={id:`${J}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"},jn={id:`${J}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"},Et={id:`${J}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"},Rt={id:`${J}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"},Vn={id:`${J}upload-picture`,type:"uploadpicture",icon:Zt,label:"Upload picture"},Hn=2,Tn="blue",We=14,Zn=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],zn=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle"],An="react-paint-canvas-drawcanvas",En="react-paint-canvas-selectioncanvas",Rn={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[xn,Sn,bn,Cn,wn,Mn,kn,Pn,zt,Ln],clearCallback:"empty",brushAlgo:"simple",isBrushShapeDoneOnMouseUp:!0,withFrameSelection:!1,withSkeleton:!0,canvasSelectionPadding:0,size:"fixed",canZoom:"never"},Ns={canvasBackgroundColor:"white",canvasSelectionColor:Tn,canvasSelectionWidth:Hn},Dn=(e,t)=>!!(e.target instanceof Node&&t)&&t.contains(e.target),ct=300,Dt=(e,t)=>{const n={...t};for(const s of e)delete n[s];return n},ce=(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,o,r)=>(i[o]=Wt(i[o])?{...i[o]}:Array.isArray(i[o])?[...i[o]]:i[o]===void 0||i[o]===null?{}:i[o],r===a.length-1&&(i[o]=t),i[o]),s),s},Wt=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,Se=(e,t,n)=>{if(!Wt(t)||!Wt(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)??Se(e,s[a],n[a]):s[a]=n[a]);return s},Wn=(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)||!Wn(e[a],t[a]))return!1;return!0},Nt={},ae=(e="")=>(Nt[e]||(Nt[e]=0),`${e}${++Nt[e]}`),Te=(e,t,n)=>Math.max(t,Math.min(e,n)),Nn=()=>typeof navigator<"u"&&navigator.userAgent.includes("Macintosh"),Fn=e=>{e.reset(),e.lineCap="round",e.lineJoin="round"},Ne=(e,t={})=>{const{lineCap:n="round",fillColor:s="transparent",opacity:a=100,strokeColor:i=Tn,lineWidth:o=Hn,lineDash:r=0}=t;e.lineCap=n,e.globalAlpha=a/100,e.fillStyle=s,e.strokeStyle=i,e.lineWidth=o,e.setLineDash(r===0?[]:[yn[r][0]*o,yn[r][1]*o])},Ft=(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]))},Ot=e=>{const t=new Path2D;return t.rect(e.x,e.y,e.width,e.height),t},dt=e=>{const t=new Path2D;return t.arc(e.x,e.y,e.radius,0,2*Math.PI),t},nt=e=>{const t=new Path2D;return t.moveTo(...e.points[0]),t.lineTo(...e.points[1]),t},On=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},Fs=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},It=e=>180*e/Math.PI,In=(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},ge=({origin:e=[0,0],point:t,rotation:n})=>{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]]},$n=e=>(e+2*Math.PI)%(2*Math.PI),Bn=({targetVector:[e,t],radian:n=!0,originVector:s})=>{const a=$n(Math.atan2(t[1]-e[1],t[0]-e[0]));if(s){const[i,o]=s,r=Math.atan2(o[1]-i[1],o[0]-i[0]),l=$n(a-r);return n?l:It(l)}return n?a:It(a)},Un=(e,t)=>Math.sqrt((e[0]-t[0])**2+(e[1]-t[1])**2),st=(e,t)=>[(e[0]+t[0])/2,(e[1]+t[1])/2],Ye=(e,t,n)=>{const{borders:s}=q(t,n);return{border:Ot(s),shapePath:e,line:nt({points:[[s.x+s.width/2,s.y],[s.x+s.width/2,s.y-23/n.canvasSize.scaleRatio]]}),anchors:[dt({x:s.x+s.width/2,y:s.y-23/n.canvasSize.scaleRatio,radius:7/n.canvasSize.scaleRatio}),...Zn.map(a=>dt({x:s.x+s.width*a[0],y:s.y+s.height*a[1],radius:7/n.canvasSize.scaleRatio}))]}},Xn=({borderStart:e,borderSize:t,vector:n,settings:s,invertedAxe:a,anchor:i})=>{switch(i){case 0:{if(a){const r=t-2*s.selectionPadding;return[e+r,n-r]}const o=Math.max(2*s.selectionPadding,t-n);return[e+t-o,o]}case .5:return[e,t];case 1:if(a){const o=t+n;return[e+o,2*s.selectionPadding-o]}return[e,Math.max(2*s.selectionPadding,t+n)];default:return[0,0]}},qe=(e,t,n,s,a=!1,i=!1)=>{const{center:o,borders:r}=q(t,s),l=ge({origin:o,point:e,rotation:t.rotation}),d=n.anchor[0]===0&&l[0]>=r.x+r.width||n.anchor[0]===1&&l[0]<=r.x,h=n.anchor[1]===0&&l[1]>=r.y+r.height||n.anchor[1]===1&&l[1]<=r.y,c=[N(l[0],s,n.anchor[0]===0&&!d||n.anchor[0]===1&&d?s.selectionPadding:-s.selectionPadding),N(l[1],s,n.anchor[1]===0&&!h||n.anchor[1]===1&&h?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]:ge({origin:o,point:n.cursorStartPosition,rotation:t.rotation}),f=[c[0]-p[0],c[1]-p[1]],[v,C]=Xn({borderStart:r.x,borderSize:r.width,vector:f[0],settings:s,invertedAxe:d,anchor:n.anchor[0]}),[w,M]=Xn({borderStart:r.y,borderSize:r.height,vector:f[1],settings:s,invertedAxe:h,anchor:n.anchor[1]}),b=a?((k,m,x,H,T,E,R,L,D,W)=>{const{selectionPadding:z}=W,I=(m.width-2*z||1)/(m.height-2*z||1),$=(T-2*z)/(R-2*z);let j,y,Q,S;return D.anchor[0]!==.5&&D.anchor[1]!==.5?$<I?(y=E,S=R,Q=(R-2*z)*I+2*z,j=D.anchor[0]===0?m.width-k[0]>z?m.x+(m.width-Q):m.x+m.width-2*z:m.width+k[0]>z?m.x:m.x-Q+2*z):(j=H,Q=T,S=(T-2*z)/I+2*z,y=D.anchor[1]===0?m.height-k[1]>z?m.y+(m.height-S):m.y+m.height-2*z:m.height+k[1]>z?m.y:m.y-S+2*z):D.anchor[0]!==.5?(j=H,Q=T,S=(T-2*z)/I+2*z,y=m.y+(m.height-S)/2):(y=E,S=R,Q=(R-2*z)*I+2*z,j=m.x+(m.width-Q)/2),{borderX:j,borderWidth:Q,borderY:y,borderHeight:S,center:x,originalShape:L}})(f,r,o,v,C,w,M,t,n,s):{borderX:v,borderWidth:C,borderY:w,borderHeight:M,center:o,originalShape:t};return(({borderX:k,borderWidth:m,borderY:x,borderHeight:H,center:T,originalShape:E})=>{const R=[k+m/2-T[0],x+H/2-T[1]],[L,D]=ge({point:R,rotation:-E.rotation});return{borderX:Ze(k+L-R[0]),borderWidth:Ze(m),borderY:Ze(x+D-R[1]),borderHeight:Ze(H)}})(i?((k,m,x,H)=>{const T=m.x+m.width/2,E=m.y+m.height/2,R=x?2*k.borderWidth+m.width:Math.abs(m.width+2*(k.borderWidth-m.width)),L=H?2*k.borderHeight+m.height:Math.abs(m.height+2*(k.borderHeight-m.height));return{...k,borderHeight:L,borderWidth:R,borderX:T-R/2,borderY:E-L/2}})(b,r,d,h):b)},Ge=(e,t)=>{const n=((s,{brushAlgo:a})=>{if(s.points.length<1||s.style?.strokeColor==="transparent")return;const i=s.points.flat(),o=i.map(c=>c[0]),r=i.map(c=>c[1]),l=Math.min(...o),d=Math.min(...r),h=new Path2D;for(const c of s.points){if(!c.length)return;if(c.length===1)h.rect(...xe(c[0],l,d,s.scaleX,s.scaleY),1,1);else if(h.moveTo(...xe(c[0],l,d,s.scaleX,s.scaleY)),a==="quadratic"){for(let p=0;p<c.slice(1).length-2;p++){const f=xe(c[p],l,d,s.scaleX,s.scaleY),v=xe(c[p+1],l,d,s.scaleX,s.scaleY),C=(f[0]+v[0])/2,w=(f[1]+v[1])/2;h.quadraticCurveTo(...f,C,w)}h.quadraticCurveTo(...xe(c[c.length-2],l,d,s.scaleX,s.scaleY),...xe(c[c.length-1],l,d,s.scaleX,s.scaleY))}else for(const p of c.slice(1))h.lineTo(...xe(p,l,d,s.scaleX,s.scaleY))}return h})(e,t);return{...e,path:n,selection:Ye(n,e,t)}},Os=Ge,Ze=(e,t=2)=>Math.round(e*10**t)/10**t,xe=(e,t,n,s=1,a=1)=>[t+(e[0]-t)*s,n+(e[1]-n)*a],N=(e,t,n=0)=>{if(!t.gridGap)return Ze(e);const s=e+n,a=s>=0?t.gridGap:-t.gridGap;return s+a/2-(s+a/2)%a-n},Is=(e,t,n)=>t.gridGap||n?e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18):Ze(e,3),Le=(e,t)=>t?[Math.abs(e[0])>Math.abs(e[1])?e[0]:0,Math.abs(e[1])>Math.abs(e[0])?e[1]:0]:e,$s=(e,t,n,s,a,i,o)=>{switch(s.mode){case"brush":return((r,l,d)=>{const h={...r,points:ce(r.points.length-1,[...r.points[r.points.length-1],[Math.round(l[0]),Math.round(l[1])]],r.points)};return Ge(h,d)})(t,n,a);case"translate":return Gt(n,s.originalShape,s.cursorStartPosition,a,i);case"rotate":return ai(t,n,s.originalShape,s.cursorStartPosition,s.center,a,i);case"resize":return oi(e,t,n,s.originalShape,s,a,i,o);default:return t}},Yn=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}},ut=(e,t,n)=>{const{clientX:s,clientY:a}=Yn(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]]},it=e=>"touches"in e,be=(e,t,[n,s])=>ge({origin:[n,s],point:e,rotation:t}),ht=(e,t,n)=>n?In(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),at=(e,t,n,s=!1,a=0)=>{if(e.locked)return!1;const{canvasSize:{scaleRatio:i}}=n,{borders:o,center:r}=q(e,n),l=be(t,e.rotation,r);if(s)if(e.type==="line"||e.type==="polygon"||e.type==="curve"){for(let d=0;d<e.points.length;d++)if(ht({x:e.points[d][0]-7/i,y:e.points[d][1]-7/i,width:We/i,height:We/i},l,a))return{mode:"resize",anchor:d}}else{if(ht({x:o.x+o.width/2-7/i,y:o.y-We/i-16/i,width:We/i,height:We/i},l,a))return{mode:"rotate"};for(const d of Zn)if(ht({x:o.x+o.width*d[0]-7/i,y:o.y+o.height*d[1]-7/i,width:We/i,height:We/i},l,a))return{mode:"resize",anchor:d}}return!!ht(o,l,a)&&{mode:"translate"}},qn=(e,t,n,s)=>{if(t.locked)return!1;const{center:a}=q(t,s),i=be(n,t.rotation,a);return"path"in t&&t.path?t.style?.fillColor&&t.style?.fillColor!=="transparent"?!!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"}):at(t,n,s,!1)};function $t(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 Gn=({ctx:e,path:t,rect:n,offset:s,checkFill:a})=>{for(let i=0;i<s;i+=s/2)for(let o=0;o<s;o+=s/2)for(let r=i+n.x;r<n.x+n.width;r+=s)for(let l=o+n.y;l<n.y+n.height;l+=s)if(a?e.isPointInPath(t,r,l):e.isPointInStroke(t,r,l))return!0;return!1},Bt=(e,t,n)=>{const{borders:s}=q(t,n);return{border:Ot(s),shapePath:e,anchors:[...t.points.map(a=>dt({x:a[0],y:a[1],radius:7/n.canvasSize.scaleRatio}))]}},de=[.05,.1,.25,.5,1,2,4,8],_n=({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:[Te(n,a.realWidth/t-a.realWidth,0),Te(s,a.realHeight/t-a.realHeight,0)]},Ut=({size:e,canvasSize:t,currentOffset:n,currentZoom:s,zoom:a,centerPoint:i})=>{const o=e==="fixed"&&a<1?[t.realWidth/2,t.realHeight/2]:i,r=n[0]-(o[0]/s-o[0]/a),l=n[1]-(o[1]/s-o[1]/a);return{offset:e==="infinite"?[r,l]:a<1?[-(t.realWidth-t.realWidth/a)/2,-(t.realHeight-t.realHeight/a)/2]:[Te(r,t.realWidth/a-t.realWidth,0),Te(l,t.realHeight/a-t.realHeight,0)],zoom:a}},Kn=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}},Jn=(e,t)=>{const{canvasZoom:n,size:s}=t;if(s!=="fixed"||n>=1)return;const a=Kn(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,gt=(e,t)=>{const n=dt(e);return{...e,path:n,selection:Ye(n,e,t)}},Bs=gt,_e=(e,t)=>{const n=On(e);return{...e,path:n,selection:Bt(n,e,t)}},Us=_e,es=(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}},ts=(e,t,n)=>{if(t<0||t>e.points.length-1)return e;const s=[...e.points.slice(0,t+1),[st(e.points[t],e.points[t===e.points.length-1?0:t+1])[0],st(e.points[t],e.points[t===e.points.length-1?0:t+1])[1]],...e.points.slice(t+1)];return _e({...e,points:s},n)},ns=(e,t,n,s=!1)=>{const a=[N(t[0],n),N(t[1],n)],{center:i}=q(e,n),o=be(a,e.rotation,i),r={...e,points:s?e.points:[...e.points,o],tempPoint:s?o:void 0};return _e(r,n)},Ke=(e,t)=>{const n=(s=>{const a=s.tempPoint?[...s.points,s.tempPoint]:s.points;if(a.length<2)return;if(a.length<3)return On(s);const i=s.style?.closedPoints===1&&a.length>2,o=i?[a[a.length-2],...a,a[0],a[1]]:[a[0],...a,a[a.length-1]],r=new Path2D;r.moveTo(...a[0]);for(let l=1;l<o.length-2;l++){const d=o[l-1],h=o[l],c=o[l+1],p=o[l+2],f=h[0]+(c[0]-d[0])/6,v=h[1]+(c[1]-d[1])/6,C=c[0]-(p[0]-h[0])/6,w=c[1]-(p[1]-h[1])/6;r.bezierCurveTo(f,v,C,w,c[0],c[1])}return i&&r.closePath(),r})(e);return{...e,path:n,selection:Bt(n,e,t)}},Xs=Ke,Ys=es,ss=(e,t,n)=>{if(t<0||t>e.points.length-1)return e;const s=[...e.points.slice(0,t+1),[st(e.points[t],e.points[t===e.points.length-1?0:t+1])[0],st(e.points[t],e.points[t===e.points.length-1?0:t+1])[1]],...e.points.slice(t+1)];return Ke({...e,points:s},n)},is=(e,t,n,s=!1)=>{const a=[N(t[0],n),N(t[1],n)],{center:i}=q(e,n),o=be(a,e.rotation,i),r={...e,points:s?e.points:[...e.points,o],tempPoint:s?o:void 0};return Ke(r,n)},ft=(e,t)=>{const n=(s=>{const a=new Path2D;return a.ellipse(s.x,s.y,s.radiusX,s.radiusY,0,0,2*Math.PI),a})(e);return{...e,path:n,selection:Ye(n,e,t)}},qs=ft,as=e=>{return n={...e,type:"triangle"},{...n,path:Fs(n)};var n},Gs=(e,t)=>{e.globalAlpha!==0&&t.path&&(t.style?.fillColor!=="transparent"&&e.fill(t.path),t.style?.strokeColor!=="transparent"&&e.stroke(t.path))},vt=(e,t)=>{const n=[];let s;if(e.style?.lineArrow===1||e.style?.lineArrow===2||e.style?.lineArrow===3){const a=Math.PI/2-Bn({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3||n.push(as(os(e.points[0],a,e.style))),e.style?.lineArrow!==2&&e.style?.lineArrow!==3||n.push(as(os(e.points[1],a+Math.PI,e.style)));const i=(({line:o,size:r,direction:l})=>{const d=Math.PI/2-Bn({targetVector:[o.points[0],o.points[1]]}),h=[o.points[0][0]+(o.points[1][0]-o.points[0][0])/2,o.points[0][1]+(o.points[1][1]-o.points[0][1])/2];let c,p;if(["start","both"].includes(l)){const f=ge({point:o.points[0],origin:h,rotation:-d});c=ge({point:[f[0],f[1]+r],origin:h,rotation:d})}else c=[...o.points[0]];if(["end","both"].includes(l)){const f=ge({point:o.points[1],origin:h,rotation:-d});p=ge({point:[f[0],f[1]-r],origin:h,rotation:d})}else p=[...o.points[1]];return{points:[c,p]}})({line:e,size:10+2*(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});s=nt(i)}else s=nt(e);return{...e,path:s,selection:Bt(s,e,t),arrows:n,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"}}},_s=vt,os=(e,t,n)=>{const s=[ge({point:[0,0],rotation:t}),ge({point:[-(5+(n.lineWidth??0)),10+2*(n.lineWidth??0)],rotation:t}),ge({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"}}},mt=(e,t)=>{const n=Ot(e);return{...e,path:n,selection:Ye(n,e,t)}},Ks=mt,Js=(e,t)=>{e.globalAlpha!==0&&t.path&&(t.style?.fillColor!=="transparent"&&e.fill(t.path),t.style?.strokeColor!=="transparent"&&e.stroke(t.path))},rs=(e,t)=>({x:e.x-t.selectionPadding,width:e.width+2*t.selectionPadding,y:e.y-t.selectionPadding,height:e.height+2*t.selectionPadding}),ls=(e,t,n,[s,a]=[!1,!1])=>((i,o,[r,l])=>ge({origin:[r,l],point:i,rotation:-o}))([e[0]===.5?n.x+n.width/2:e[0]===0?n.x+(s?0:n.width):n.x+(s?n.width:0),e[1]===.5?n.y+n.height/2:e[1]===0?n.y+(a?0:n.height):n.y+(a?n.height:0)],n.rotation,t),yt=(e,t)=>({...e,selection:Ye(void 0,e,t)}),ei=yt,Xt=(e,t,n,s,a)=>{const[i,o]=((r,l,d,h,c=!1)=>{if(!(r&&l&&h&&d))return[ct,ct];const p=r/l;if(p>d/h){const v=c?d:Math.min(r,d);return[v,v/p]}const f=c?h:Math.min(l,h);return[f*p,f]})(e.width,e.height,n,s,!0);return yt({toolId:zt.id,type:"picture",id:ae("picture_"),x:-a.canvasOffset[0]+a.canvasSize.realWidth/a.canvasZoom/2-i/2,y:-a.canvasOffset[1]+a.canvasSize.realHeight/a.canvasZoom/2-o/2,width:i,height:o,src:t,img:e,rotation:0},a)},ti=(e,t,n,s)=>new Promise((a,i)=>{const o=new Image;o.onerror=()=>{i(new Error("Some images could not be loaded"))},setTimeout(()=>{i(new Error("Timeout while loading images"))},4e3),e instanceof File?((r,l,d,h,c,p)=>{ps(d)?d.text().then(f=>{const v=hs(f);r.onload=async()=>{URL.revokeObjectURL(r.src);const C=Xt(r,f,h,c,p);l(C)},r.src=v}):(r.onload=async()=>{URL.revokeObjectURL(r.src);const f=Xt(r,r.src,h,c,p);l(f)},r.src=URL.createObjectURL(d))})(o,a,e,t,n,s):((r,l,d,h,c,p)=>{r.onload=()=>{URL.revokeObjectURL(r.src);const f=Xt(r,d,h,c,p);l(f)},gs(d).then(f=>{r.src=f}).catch(()=>{r.src=""})})(o,a,e,t,n,s)}),Yt=["Texte"],Qt=(e,t)=>({...e,selection:Ye(void 0,e,t)}),ni=Qt,qt=(e,t,n,s,a,i=tt)=>{e.font=`${a?"italic":""} ${s?"bold":""} 1px ${i}`;const o=t.map(r=>n/e.measureText(r).width);return Math.min(...o)||36},si=(e,t,n,s)=>{const a={...t,value:n},i=((v,C,w,M,b,k=tt)=>{v.font=`${b?"italic":""} ${M?"bold":""} ${w}px ${k}`;const m=C.map(x=>v.measureText(x).width);return Math.max(...m)||20})(e,a.value,a.fontSize,a.style?.fontBold??!1,a.style?.fontItalic??!1,a.style?.fontFamily),o=a.fontSize*a.value.length,r={...a,width:i,height:o},{center:l}=q(t,s),{center:d}=q(r,s),[h,c]=ls([1,1],l,t),[p,f]=ls([1,1],d,r,[!1,!1]);return{...r,x:r.x-(p-h),y:r.y-(f-c)}},cs=(e,t,n,s)=>{const a=[N(n[0],s),N(n[1],s)];switch(t.type){case"brush":return((i,o,r)=>Ge({toolId:i.id,type:i.type,id:ae(`${i.type}_`),points:[[o]],rotation:0,scaleX:1,scaleY:1,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(t,a,s);case"line":return((i,o,r)=>{const l={toolId:i.id,type:i.type,id:ae(`${i.type}_`),points:[o,o],rotation:0,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,lineArrow:i.settings.lineArrow.default}};return vt(l,r)})(t,a,s);case"polygon":return((i,o,r)=>_e({toolId:i.id,type:i.type,id:ae(`${i.type}_`),points:new Array(2).fill(o),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,closedPoints:i.settings.closedPoints.default}},r))(t,a,s);case"curve":return((i,o,r)=>Ke({toolId:i.id,type:i.type,id:ae(`${i.type}_`),points:new Array(2).fill(o),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,closedPoints:i.settings.closedPoints.default}},r))(t,a,s);case"rect":case"square":return((i,o,r,l=0,d=0)=>{const h={toolId:i.id,type:i.type,id:ae(`${i.type}_`),x:o[0],y:o[1],width:l,height:d,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}};return mt(h,r)})(t,a,s);case"text":return((i,o,r,l)=>{const d=qt(i,Yt,150,o.settings?.fontBold.default??!1,o.settings?.fontItalic.default??!1,o.settings.fontFamily.default),h=d*(Yt.length||1);return Qt({toolId:o.id,type:o.type,id:ae(`${o.type}_`),x:r[0]-150,y:r[1]-h,value:Yt,fontSize:d,width:150,height:h,rotation:0,style:{opacity:o.settings.opacity.default,strokeColor:o.settings.strokeColor.default,fontFamily:o.settings.fontFamily.default,fontItalic:o.settings.fontItalic.default,fontBold:o.settings.fontBold.default}},l)})(e,t,a,s);case"ellipse":return((i,o,r)=>ft({toolId:i.id,type:i.type,id:ae(`${i.type}_`),x:o[0],y:o[1],radiusX:0,radiusY:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(t,a,s);case"circle":return((i,o,r)=>gt({toolId:i.id,type:i.type,id:ae(`${i.type}_`),x:o[0],y:o[1],radius:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},r))(t,a,s)}},ds=(e,t,n)=>{if(t.visible===!1)return;const{center:s,outerBorders:a}=q(t,n),i=(o=>{const{canvasSize:{width:r,height:l,scaleRatioWithNoZoom:d},canvasZoom:h,canvasOffset:c}=o;return{x:-c[0],y:-c[1],width:r/h/d,height:l/h/d}})(n);if($t(a,i)){switch(Ft(e,n,t.rotation,s),Ne(e,t.style),t.type){case"brush":((o,r)=>{r.points.length<1||!r.path||o.globalAlpha!==0&&r.style?.strokeColor!=="transparent"&&o.globalAlpha!==0&&o.stroke(r.path)})(e,t);break;case"text":((o,r)=>{if(o.globalAlpha!==0&&r.style?.strokeColor&&r.style.strokeColor!=="transparent"){o.font=`${r.style?.fontItalic?"italic":""} ${r.style?.fontBold?"bold":""} ${r.fontSize}px ${r.style?.fontFamily??tt}`,o.textBaseline="top",o.fillStyle=r.style.strokeColor;for(let l=0;l<r.value.length;l++)o.fillText(r.value[l],r.x,r.y+l*r.fontSize,r.width)}})(e,t);break;case"line":((o,r)=>{if(o.globalAlpha!==0&&r.path){r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path);for(const l of r.arrows??[])Ne(o,l.style),Gs(o,l)}})(e,t);break;case"polygon":((o,r)=>{r.path&&o.globalAlpha!==0&&(r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path))})(e,t);break;case"curve":((o,r)=>{r.path&&o.globalAlpha!==0&&(r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path))})(e,t);break;case"circle":((o,r)=>{o.globalAlpha!==0&&r.path&&(r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path))})(e,t);break;case"ellipse":((o,r)=>{o.globalAlpha!==0&&r.path&&(r.style?.fillColor!=="transparent"&&o.fill(r.path),r.style?.strokeColor!=="transparent"&&o.stroke(r.path))})(e,t);break;case"rect":case"square":Js(e,t);break;case"picture":((o,r)=>{o.globalAlpha!==0&&(o.beginPath(),o.drawImage(r.img,r.x,r.y,r.width,r.height))})(e,t)}e.restore()}},ii=(e,t)=>{switch(e.type){case"brush":return((n,{selectionPadding:s})=>{const a=n.points.flat(),i=Math.min(...a.map(h=>h[0])),o=Math.min(...a.map(h=>h[1])),r=a.map(h=>xe(h,i,o,n.scaleX,n.scaleY)),l=Math.max(...r.map(h=>h[0]))+s,d=Math.max(...r.map(h=>h[1]))+s;return{x:i-s,width:l-i+s,y:o-s,height:d-o+s}})(e,t);case"line":return((n,s)=>({x:Math.min(n.points[0][0],n.points[1][0])-s.selectionPadding,width:Math.abs(n.points[0][0]-n.points[1][0])+2*s.selectionPadding,y:Math.min(n.points[0][1],n.points[1][1])-s.selectionPadding,height:Math.abs(n.points[0][1]-n.points[1][1])+2*s.selectionPadding}))(e,t);case"polygon":return es(e,t);case"curve":return Ys(e,t);case"circle":return((n,s)=>({x:n.x-n.radius-s.selectionPadding,width:2*(n.radius+s.selectionPadding),y:n.y-n.radius-s.selectionPadding,height:2*(n.radius+s.selectionPadding)}))(e,t);case"ellipse":return((n,s)=>({x:n.x-n.radiusX-s.selectionPadding,width:2*(n.radiusX+s.selectionPadding),y:n.y-n.radiusY-s.selectionPadding,height:2*(n.radiusY+s.selectionPadding)}))(e,t);case"rect":case"square":return rs(e,t);case"text":return((n,s)=>({x:n.x-s.selectionPadding,width:n.width+2*s.selectionPadding,y:n.y-s.selectionPadding,height:n.height+2*s.selectionPadding}))(e,t);case"picture":return((n,s)=>rs(n,s))(e,t);default:return{x:0,y:0,width:100,height:100}}},q=(e,t)=>{const n=ii(e,t),s={x:n.x-(e.style?.lineWidth??0),y:n.y-(e.style?.lineWidth??0),width:n.width+2*(e.style?.lineWidth??0),height:n.height+2*(e.style?.lineWidth??0)},a=(i=>[i.x+i.width/2,i.y+i.height/2])(n);return{borders:n,outerBorders:s,center:a}},ai=(e,t,n,s,a,i,o)=>{const r=a[0]-s[0],l=a[1]-s[1],d=a[0]-t[0],h=a[1]-t[1],c=n.rotation+Math.atan2(h,d)-Math.atan2(l,r);return{...e,rotation:Is(c,i,o)}},oi=(e,t,n,s,a,i,o,r)=>{switch(s.type){case"line":return((l,d,h,c)=>{const p=[N(l[0],c),N(l[1],c)],{center:f}=q(d,c),v=be(p,d.rotation,f),C=ce(["points",h.anchor],v,d);return vt(C,c)})(n,s,a,i);case"polygon":return((l,d,h,c)=>{const p=[N(l[0],c),N(l[1],c)],{center:f}=q(d,c),v=be(p,d.rotation,f),C=ce(["points",h.anchor],v,d);return _e(C,c)})(n,s,a,i);case"curve":return((l,d,h,c)=>{const p=[N(l[0],c),N(l[1],c)],{center:f}=q(d,c),v=be(p,d.rotation,f),C=ce(["points",h.anchor],v,d);return Ke(C,c)})(n,s,a,i);case"brush":return((l,d,h,c,p,f)=>{const{borders:v}=q({...d,scaleX:1,scaleY:1},c),{borders:C}=q(d,c),{borderX:w,borderHeight:M,borderY:b,borderWidth:k}=qe(l,d,h,c,p,f),m=Math.max(0,v.width-2*c.selectionPadding),x=Math.max(0,v.height-2*c.selectionPadding),H=Math.max(0,k-2*c.selectionPadding),T=Math.max(0,M-2*c.selectionPadding),E=m?H/m:1,R=x?T/x:1;if(!m||!x)return d;const L=Ze(w-C.x),D=Ze(b-C.y);return Ge({...d,points:d.points.map(W=>W.map(([z,I])=>[z+L,I+D])),scaleX:E,scaleY:R},c)})(n,s,a,i,o,r);case"circle":return((l,d,h,c,p)=>{const{borderX:f,borderHeight:v,borderY:C,borderWidth:w}=qe(l,d,h,c,!0,p);return gt({...d,radius:Math.max(0,w/2-c.selectionPadding),x:f+w/2,y:C+v/2},c)})(n,s,a,i,r);case"ellipse":return((l,d,h,c,p=!1,f=!1)=>{const{borderX:v,borderHeight:C,borderY:w,borderWidth:M}=qe(l,d,h,c,p,f);return ft({...d,radiusX:Math.max(0,M/2-c.selectionPadding),radiusY:Math.max(0,C/2-c.selectionPadding),x:v+M/2,y:w+C/2},c)})(n,s,a,i,o,r);case"rect":case"square":return((l,d,h,c,p=!1,f=!1)=>{const{borderX:v,borderHeight:C,borderY:w,borderWidth:M}=qe(l,d,h,c,p,f);return mt({...d,width:Math.max(0,M-2*c.selectionPadding),height:Math.max(0,C-2*c.selectionPadding),x:v+c.selectionPadding,y:w+c.selectionPadding},c)})(n,s,a,i,t.type==="square"||o,r);case"text":return((l,d,h,c,p,f)=>{const{borderX:v,borderHeight:C,borderY:w,borderWidth:M}=qe(d,h,c,p,!0,f),b=Qt({...h,width:Math.max(0,M-2*p.selectionPadding),height:Math.max(0,C-2*p.selectionPadding),x:v+p.selectionPadding,y:w+p.selectionPadding},p);return{...b,fontSize:qt(l,b.value,b.width,b.style?.fontBold??!1,b.style?.fontItalic??!1,b.style?.fontFamily)}})(e,n,s,a,i,r);case"picture":return((l,d,h,c,p)=>{const{borderX:f,borderHeight:v,borderY:C,borderWidth:w}=qe(l,d,h,c,!0,p);return yt({...d,width:Math.max(0,w-2*c.selectionPadding),height:Math.max(0,v-2*c.selectionPadding),x:f+c.selectionPadding,y:C+c.selectionPadding},c)})(n,s,a,i,r);default:return s}},Gt=(e,t,n,s,a)=>{switch(t.type){case"rect":case"square":return((i,o,r,l,d)=>{const h=Le([i[0]-r[0],i[1]-r[1]],d);return mt({...o,x:N(o.x+h[0],l),y:N(o.y+h[1],l)},l)})(e,t,n,s,a);case"ellipse":return((i,o,r,l,d)=>{const h=Le([i[0]-r[0],i[1]-r[1]],d);return ft({...o,x:N(o.x+h[0],l),y:N(o.y+h[1],l)},l)})(e,t,n,s,a);case"circle":return((i,o,r,l,d)=>{const h=Le([i[0]-r[0],i[1]-r[1]],d);return gt({...o,x:N(o.x+h[0],l),y:N(o.y+h[1],l)},l)})(e,t,n,s,a);case"picture":return((i,o,r,l,d)=>{const h=Le([i[0]-r[0],i[1]-r[1]],d);return yt({...o,x:N(o.x+h[0],l),y:N(o.y+h[1],l)},l)})(e,t,n,s,a);case"text":return((i,o,r,l,d)=>{const h=Le([i[0]-r[0],i[1]-r[1]],d);return Qt({...o,x:N(o.x+h[0],l),y:N(o.y+h[1],l)},l)})(e,t,n,s,a);case"line":return((i,o,r,l,d)=>{const h=Le([i[0]-r[0],i[1]-r[1]],d);return vt({...o,points:o.points.map(([c,p])=>[N(c+h[0],l),N(p+h[1],l)])},l)})(e,t,n,s,a);case"polygon":return((i,o,r,l,d)=>{const h=Le([i[0]-r[0],i[1]-r[1]],d),{borders:c}=q(o,l);return _e({...o,points:o.points.map(([p,f])=>l.gridGap?[p+N(c.x+h[0],l)-c.x,f+N(c.y+h[1],l)-c.y]:[N(p+i[0]-r[0],l),N(f+i[1]-r[1],l)])},l)})(e,t,n,s,a);case"curve":return((i,o,r,l,d)=>{const{borders:h}=q(o,l),c=Le([i[0]-r[0],i[1]-r[1]],d);return Ke({...o,points:o.points.map(([p,f])=>l.gridGap?[p+N(h.x+c[0],l)-h.x,f+N(h.y+c[1],l)-h.y]:[N(p+c[0],l),N(f+c[1],l)])},l)})(e,t,n,s,a);case"brush":return((i,o,r,l,d)=>{const{borders:h}=q(o,l),c=Le([i[0]-r[0],i[1]-r[1]],d),p=l.gridGap?N(h.x+c[0],l)-h.x:c[0],f=l.gridGap?N(h.y+c[1],l)-h.y:c[1];return Ge({...o,points:o.points.map(v=>v.map(([C,w])=>[C+p,w+f]))},l)})(e,t,n,s,a);default:return t}},Je=(e,t)=>{switch(e.type){case"rect":case"square":return Ks(e,t);case"ellipse":return qs(e,t);case"circle":return Bs(e,t);case"picture":return ei(e,t);case"text":return ni(e,t);case"line":return _s(e,t);case"polygon":return Us(e,t);case"curve":return Xs(e,t);case"brush":return Os(e,t);default:return e}},us=({ctx:e,shape:t,settings:n,selectionWidth:s,selectionColor:a,withAnchors:i=!0})=>{const{center:o}=q(t,n);switch(Ft(e,n,t.rotation,o),t.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((r,l,d,h,c,p)=>{if(l.selection&&(Ne(r,{fillColor:"transparent",strokeColor:d,lineWidth:h/c.canvasSize.scaleRatio}),l.selection.shapePath?r.stroke(l.selection.shapePath):r.stroke(l.selection.border),p&&!l.locked)){l.selection.shapePath&&r.stroke(l.selection.border),r.stroke(l.selection.line),Ne(r,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/c.canvasSize.scaleRatio});for(const f of l.selection.anchors)r.fill(f),r.stroke(f)}})(e,t,a,s,n,i);break;case"polygon":case"line":case"curve":(({ctx:r,shape:l,withAnchors:d,selectionWidth:h,selectionColor:c,settings:p})=>{if(l.selection&&(Ne(r,{fillColor:"transparent",strokeColor:c,lineWidth:h/p.canvasSize.scaleRatio}),l.selection.shapePath&&r.stroke(l.selection.shapePath),d&&!l.locked)){Ne(r,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio});for(const f of l.selection.anchors)r.fill(f),r.stroke(f)}})({ctx:e,shape:t,withAnchors:i,selectionWidth:s,selectionColor:a,settings:n})}e.restore()},ri=({ctx:e,selectionFrame:t,settings:n})=>{Ft(e,n),((s,a,i)=>{Ne(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,n),e.restore()},_t=e=>e.filter(t=>t!=null),hs=e=>{const t=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0],n=t.getAttribute("width"),s=t.getAttribute("height");let a;if(n||s)a=e;else{const o=t.getAttribute("viewBox")??"0 0 300 300",[,,r,l]=o.split(" ");t.setAttribute("width",r??ct),t.setAttribute("height",l??ct),a=new XMLSerializer().serializeToString(t)}const i=new Blob([a],{type:"image/svg+xml"});return URL.createObjectURL(i)},ps=e=>(e instanceof File?e.name:e).includes(".svg"),gs=e=>ps(e)?fetch(e).then(t=>t.text()).then(t=>hs(t)):fetch(e).then(t=>t.blob()).then(t=>URL.createObjectURL(t)),fs=(e,t)=>{const n=document.createElement("a");n.href=e,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n)},li=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),Kt=({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),Fn(s);for(let o=e.length-1;o>=0;o--)ds(s,e[o],t);return n.toDataURL("image/png")},vs=({shapes:e,settings:t,view:n})=>{if(n==="fitToShapes"&&!e.length)throw new Error("No image found to export");if(n==="fitToShapes"){const a=e.map(h=>{const c=q(h,t).borders,p=(h.style?.lineWidth??0)/2;return{minX:c.x-p,minY:c.y-p,maxX:c.x+c.width+p,maxY:c.y+c.height+p}}),i=Math.min(...a.map(h=>h.minX)),o=Math.max(...a.map(h=>h.maxX)),r=Math.min(...a.map(h=>h.minY)),l=Math.max(...a.map(h=>h.maxY)),d={...t,canvasOffset:[-i,-r],canvasZoom:1,canvasSize:{realWidth:o-i,realHeight:l-r,width:o-i,height:l-r,scaleRatio:1,scaleRatioWithNoZoom:1}};return Kt({shapes:e,settings:d})}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 Kt({shapes:e,settings:a})}const s={...t,canvasSize:{...t.canvasSize,width:t.canvasSize.realWidth,height:t.canvasSize.realHeight,scaleRatio:t.canvasZoom,scaleRatioWithNoZoom:1}};return Kt({shapes:e,settings:s})},ci=(e,t,n)=>{return a=Jt(e,t,n),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(a))}`;var a},di=e=>{const t=["img","id","selection","path","arrows","tempPoint"];return e.map(n=>n.type!=="picture"||n.src.startsWith("http")?Dt(t,n):Dt(t,{...n,src:li(n)}))},Jt=(e,t,n)=>({shapes:di(e),config:{width:t,height:n}}),ms=(e,t)=>Je({...e,id:ae(`${e.type}_`)},t),ui=(e,t,n)=>{const s=g.useRef([]),a=g.useRef({dataChanged:[]}),[i,o]=g.useState(void 0),[r,l]=g.useState(void 0),[d,h]=g.useState(void 0),[c,p]=g.useState({states:[{shapes:[],selectedShape:void 0,source:"remote"}],cursor:0}),f=c.cursor>0,v=c.cursor<c.states.length-1,C=s.current.length>0,w=g.useCallback(()=>{p(y=>Wn(y.states[y.cursor].shapes,s.current)?y:{states:[...y.states.slice(0,y.cursor+1),{shapes:s.current,selectedShape:r,source:"user"}],cursor:y.cursor+1})},[r]),M=g.useCallback(y=>{s.current=[y,...s.current]},[]),b=g.useCallback((y,Q,S,V)=>{if(y.target&&"className"in y.target&&![An,En].includes(y.target.className)||!V)return void h(void 0);const Z=s.current.find(P=>P.id===r?.id?!!at(r,S,e):!!qn(Q,P,S,e));h(Z)},[e,r]),k=g.useCallback(async(y,Q=300,S=300)=>{const V=await ti(y,Q,S,e);return M(V),w(),V},[M,w,e]),m=g.useCallback((y,Q=!1)=>{s.current=s.current.map(S=>S.id===r?.id?y:S),l(S=>S?.id===y.id?y:S),Q&&w()},[r,w]),x=g.useCallback(y=>{const Q=y.map(S=>Dt(["chosen"],S));s.current=Q,w()},[w]),H=g.useCallback(y=>{l(Q=>Q?.id===y.id?void 0:Q),s.current=s.current.filter(Q=>Q.id!==y.id),w()},[w]),T=g.useCallback(y=>{p(Q=>{const S=y(Q);return s.current=Q.states[S].shapes,l(Q.states[S].selectedShape),ce("cursor",S,Q)})},[]),E=g.useCallback(()=>{T(y=>Math.max(0,y.cursor-1))},[T]),R=g.useCallback(()=>{T(y=>Math.min(y.states.length-1,y.cursor+1))},[T]),L=g.useCallback((y,Q)=>{l(void 0),s.current=y,p(S=>Q.clearHistory?{states:[{shapes:y,selectedShape:void 0,source:Q.source}],cursor:0}:{states:[...S.states.slice(0,S.cursor+1),{shapes:y,selectedShape:void 0,source:Q.source}],cursor:S.cursor+1})},[]),D=g.useCallback((y,Q)=>{const S=s.current,V=S.findIndex(_=>_.id===y),Z=S.findIndex(_=>_.id===Q);var P,F,A;x((P=S,A=Z,(F=V)<0||A<0||F>P.length-1||A>P.length-1?P:F<A?[...P.slice(0,F),...P.slice(F+1,A+1),P[F],...P.slice(A+1,P.length)]:[...P.slice(0,A),P[F],...P.slice(A,F),...P.slice(F+1,P.length)]))},[x]),W=g.useCallback(y=>{const Q=s.current,S=Q.findIndex(Z=>Z.id===y.id);if(S<0)return;const V=ce("visible",y.visible===!1,y);l(Z=>Z?.id===V.id?V:Z),x(ce(S,V,Q))},[x]),z=g.useCallback(y=>{const Q=s.current,S=Q.findIndex(Z=>Z.id===y.id);if(S<0)return;const V=ce("locked",!y.locked,y);l(Z=>Z?.id===V.id?V:Z),x(ce(S,V,Q))},[x]),I=g.useCallback((y,Q)=>{a.current.hasOwnProperty(y)&&(a.current[y]=[...a.current[y],Q])},[]),$=g.useCallback((y,Q)=>{if(a.current.hasOwnProperty(y))if(Q){const S=a.current[y].indexOf(Q);a.current[y]=[...a.current[y].slice(0,S),...a.current[y].slice(S+1)]}else a.current[y]=[]},[]);g.useEffect(()=>{const y=c.states[c.cursor],Q=Jt(y.shapes,t,n);for(const S of a.current.dataChanged)S(Q,y.source)},[t,n,c]),g.useEffect(()=>{s.current=s.current.map(y=>Je(y,e)),l(y=>y===void 0?void 0:Je(y,e))},[e]);const j=g.useCallback((y,Q)=>{o(S=>{const V=[S?.[0]??[Q[0],Q[1]],[Q[0],Q[1]]],Z=s.current.filter(P=>((F,A,_,ee)=>{const{selectionPadding:B}=ee,{center:Y,borders:U}=q(A,ee),ne=be(_[0],A.rotation,Y),G=be(_[1],A.rotation,Y),K=Math.round(Math.min(ne[0],G[0])-B/2),fe=Math.round(Math.max(ne[0],G[0])+B),ye=Math.round(Math.min(ne[1],G[1])-B/2),te={x:K,y:ye,width:fe-K,height:Math.round(Math.max(ne[1],G[1])+B)-ye},ve=$t(U,te);if(!ve)return!1;if(U.width<=1||U.height<=1||!("path"in A)||!A.path)return!0;if(F.lineWidth=(A.style?.lineWidth??0)+10,A.type==="brush"){const Ae=A.points.flat(),le=Math.min(...Ae.map(he=>he[0])),Ee=Math.min(...Ae.map(he=>he[1]));for(const he of A.points){if(he.length<1)break;if(he.length<2){const se=xe(he[0],le,Ee,A.scaleX,A.scaleY);if(In(ve,{x:se[0],y:se[1],radius:(A.style?.lineWidth??1)/2}))return!0}for(let se=0;se<he.length-1;se++){const je=xe(he[se],le,Ee,A.scaleX,A.scaleY),Ce=xe(he[se+1],le,Ee,A.scaleX,A.scaleY),et=$t({x:Math.min(je[0],Ce[0]),y:Math.min(je[1],Ce[1]),width:Math.abs(je[0]-Ce[0]),height:Math.abs(je[1]-Ce[1])},te);if(et){const Re=new Path2D;if(Re.moveTo(...je),Re.lineTo(...Ce),Gn({ctx:F,path:Re,rect:et,offset:10,checkFill:!1}))return!0}}}return!1}const ze=!(!A.style?.fillColor||A.style?.fillColor==="transparent");return Gn({ctx:F,path:A.path,rect:ve,offset:10,checkFill:ze})})(y,P,V,e));return l(Z?.[0]),V})},[e]);return{registerEvent:I,unregisterEvent:$,shapesRef:s,selectedShape:r,hoveredShape:d,selectionFrame:i,setSelectionFrame:o,refreshSelectedShapes:j,addShape:M,addPictureShape:k,moveShapes:D,saveShapes:w,setSelectedShape:l,refreshHoveredShape:b,toggleShapeVisibility:W,toggleShapeLock:z,removeShape:H,updateShape:m,backwardShape:E,forwardShape:R,clearShapes:L,canGoBackward:f,canGoForward:v,canClear:C}},ys=e=>{const t=[e[0].clientX,e[0].clientY],n=[e[1].clientX,e[1].clientY];return{diff:Un(t,n),center:st(t,n)}},hi=({canvasElt:e,canvasTransformation:t,canvasSize:n,size:s,setCanvasTransformation:a})=>{const i=g.useRef([]),[o,r]=g.useState(i.current.length>0),l=g.useRef(null),d=g.useRef(t);d.current=t;const h=g.useCallback(({startDiff:c,startZoom:p,startCenter:f,startOffset:v,currentDiff:C,currentCenter:w,isMoving:M,isZooming:b})=>{if(!e||!C||!c)return;const k=(({canvasBoundingRect:m,canvasSize:x,size:H,startDiff:T,startZoom:E,startCenter:R,startOffset:L,currentDiff:D,currentCenter:W,isMoving:z,isZooming:I})=>{const $=I?Te(D/T*E,de[0],de[de.length-1]):E,j=z?[L[0]+(W[0]-R[0])*(x.width/m.width)/x.scaleRatio/E,L[1]+(W[1]-R[1])*(x.height/m.height)/x.scaleRatio/E]:[L[0],L[1]],y=[(W[0]-m.left)/x.scaleRatio,(W[1]-m.top)/x.scaleRatio];return Ut({size:H,canvasSize:x,currentOffset:j,currentZoom:E,zoom:$,centerPoint:y})})({canvasBoundingRect:e.getBoundingClientRect(),canvasSize:n,size:s,startDiff:c,startZoom:p,startCenter:f,startOffset:v,currentDiff:C,currentCenter:w,isMoving:M,isZooming:b});a(k)},[e,n,s,a]);g.useEffect(()=>{if(!e)return;const c=p=>{if(i.current=[...i.current,p],r(i.current.length>0),i.current.length===2){p.stopPropagation();const{diff:f,center:v}=ys(i.current);l.current={startDiff:f,startCenter:v,startZoom:d.current.zoom,startOffset:d.current.offset,isMoving:!1,isZooming:!1}}};return e.addEventListener("pointerdown",c),()=>{e.removeEventListener("pointerdown",c)}},[e]),g.useEffect(()=>{if(!o)return;const c=f=>{const v=i.current.findIndex(C=>C.pointerId===f.pointerId);if(v>-1&&(i.current[v]=f),i.current.length===2&&l.current){const{diff:C,center:w}=ys(i.current),M=l.current.isZooming||((k,m)=>Math.abs(k-m.startDiff)>30)(C,l.current),b=l.current.isMoving||M||((k,m)=>Math.abs(Un(k,m.startCenter))>10)(w,l.current);l.current={...l.current,isMoving:b,isZooming:M},h({...l.current,currentDiff:C,currentCenter:w})}},p=f=>{i.current=i.current.filter(v=>v.pointerId!==f.pointerId),r(i.current.length>0)};return document.addEventListener("pointermove",c),document.addEventListener("pointerup",p),document.addEventListener("pointerout",p),document.addEventListener("pointercancel",p),document.addEventListener("pointerleave",p),()=>{document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",p),document.removeEventListener("pointerout",p),document.removeEventListener("pointercancel",p),document.removeEventListener("pointerleave",p)}},[o,h])},pi=({canvasSize:e,size:t,zoomEnabled:n,canvasElt:s})=>{const[a,i]=g.useState({offset:[0,0],zoom:1}),o=g.useRef(0),r=g.useCallback(d=>{i(({zoom:h})=>_n({zoom:h,size:t,canvasSize:e,newOffset:d}))},[e,t]),l=g.useCallback(d=>{i(({offset:h,zoom:c})=>(({size:p,canvasSize:f,currentOffset:v,currentZoom:C,action:w})=>{const M=w==="default"?de[4]:w==="zoom"?de[Te(de.length-1-de.slice(0).reverse().findIndex(k=>k<=C)+1,0,de.length-1)]:de[Te(de.findIndex(k=>k>=C)-1,0,de.length-1)],b=[f.realWidth/2,f.realHeight/2];return Ut({size:p,canvasSize:f,currentOffset:v,currentZoom:C,zoom:M,centerPoint:b})})({size:t,canvasSize:e,currentOffset:h,currentZoom:c,action:d}))},[e,t]);return hi({canvasElt:s,canvasTransformation:a,canvasSize:e,size:t,setCanvasTransformation:i}),g.useEffect(()=>{if(!n||!s)return;const d=h=>{const c=h.ctrlKey,{deltaX:p,deltaY:f}=((M,b)=>{const k=Math.abs(M.deltaY)<50&&b<50,m=M.ctrlKey,x=Nn()&&k&&m;switch(M.deltaMode){case WheelEvent.DOM_DELTA_LINE:return{deltaX:16*M.deltaX,deltaY:16*M.deltaY};case WheelEvent.DOM_DELTA_PAGE:return{deltaX:M.deltaX*window.innerHeight,deltaY:M.deltaY*window.innerHeight};default:return x?{deltaX:5*M.deltaX,deltaY:5*M.deltaY}:{deltaX:M.deltaX,deltaY:M.deltaY}}})(h,h.timeStamp-o.current);if(o.current=h.timeStamp,c){h.preventDefault();const M=((b,k,m)=>{const{clientX:x,clientY:H}=Yn(b),T=k.getBoundingClientRect();return[(x-T.left)/m.scaleRatio,(H-T.top)/m.scaleRatio]})(h,s,e);return void i(({offset:b,zoom:k})=>(({size:m,canvasSize:x,currentOffset:H,currentZoom:T,delta:E,centerPoint:R})=>{const L=Te(T*(1-E/1e3),de[0],de[de.length-1]);return Ut({size:m,canvasSize:x,currentOffset:H,currentZoom:T,zoom:L,centerPoint:R})})({size:t,canvasSize:e,currentOffset:b,currentZoom:k,delta:f,centerPoint:M}))}const v=h.shiftKey,[C,w]=v?[f,p]:[p,f];i(({offset:M,zoom:b})=>{const k=[M[0]-C/b,M[1]-w/b],m=_n({zoom:b,size:t,canvasSize:e,newOffset:k});return m.offset[0]===M[0]&&m.offset[1]===M[1]||h.preventDefault(),m})};return s.addEventListener("wheel",d,{passive:!1}),()=>{s.removeEventListener("wheel",d)}},[s,t,e,n]),{setCanvasTransformation:i,setCanvasOffset:r,setCanvasZoom:l,canvasTransformation:a}},Qs=(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 Se(n,xn,a);case"circle":return Se(n,kn,a);case"curve":return Se(n,Cn,a);case"ellipse":return Se(n,Pn,a);case"line":return Se(n,Sn,a);case"polygon":return Se(n,bn,a);case"rect":return Se(n,wn,a);case"square":return Se(n,Mn,a);case"text":return Se(n,Ln,a)}return null});return _t(t?[...s,zt]:s)},gi=(e,t,n,s,a,i,o)=>{let r=!1;if(a){r=at(a,n,s,!0,i?20:void 0);const d=((h,c,p,f)=>{if(h.mode==="translate")return{mode:"translate",cursorStartPosition:p,originalShape:c};if(h.mode==="rotate"){const{center:v}=q(c,f);return{mode:"rotate",cursorStartPosition:p,originalShape:c,center:[v[0],v[1]]}}return h.mode==="resize"?{mode:"resize",isCreating:!1,cursorStartPosition:p,originalShape:c,anchor:h.anchor}:void 0})(r||{mode:"default"},a,n,s);if(d?.mode==="resize"||d?.mode==="rotate")return{shape:a,mode:d}}const l=t.find(d=>d.id===a?.id?!!r:!!qn(e,d,n,s));return l?{shape:l,mode:{mode:"translate",cursorStartPosition:n,originalShape:l}}:{shape:void 0,mode:{mode:o?"selectionFrame":"default"}}},fi=({addShape:e,drawCanvasRef:t,setActiveTool:n,refreshHoveredShape:s,shapes:a,selectionMode:i,activeTool:o,isInsideComponent:r,setCanvasOffset:l,selectedShape:d,canvasOffsetStartData:h,refreshSelectedShapes:c,setSelectedShape:p,setSelectionFrame:f,setCanvasOffsetStartData:v,updateSingleShape:C,saveShapes:w,setSelectionMode:M,settings:b,isShiftPressed:k,isAltPressed:m,withFrameSelection:x})=>{const[H,T]=g.useState({mode:"default"}),{registerDoubleClickEvent:E,unRegisterDoubleClickEvent:R}=(()=>{const j=g.useRef(void 0),y=g.useRef(void 0),Q=S=>{const V=Date.now();j.current&&V<j.current+300&&y.current?.(S),j.current=Date.now()};return{registerDoubleClickEvent:(S,V)=>{y.current=V,S.addEventListener("click",Q),S.addEventListener("touchend",Q)},unRegisterDoubleClickEvent:S=>{S.removeEventListener("click",Q),S.removeEventListener("touchend",Q)}}})(),L=g.useRef(null);L.current=j=>((y,Q,S,V,Z,P,F,A,_,ee,B,Y,U,ne)=>{if(it(y)&&y.touches.length>1)return;const G=Q.current?.getContext("2d");if(!G)return;const K=ut(y,Q.current,B);if(Z!==void 0)return void _([K[0]+B.canvasOffset[0]-Z.start[0],K[1]+B.canvasOffset[1]-Z.start[1]]);if(V.mode==="selectionFrame")return void ee(G,K,B);if(V.mode==="preview"){if(S?.type==="curve")return void ne(is(S,K,B,!0));if(S?.type==="polygon")return void ne(ns(S,K,B,!0))}const fe=pt(K,B);if(it(y)||F(y,G,K,fe),S===void 0||S.locked)P({mode:"default",outOfView:!fe});else if(V.mode==="default"||V.mode==="textedition"){if(!fe)return void P({mode:"default"});P(at(S,K,B,!0)||{mode:"default"})}else{const ye=Q.current?.getContext("2d");if(!ye)return;A($s(ye,S,K,V,B,Y,U))}})(j,t,d,i,h,T,s,C,l,c,b,k,m,p),g.useEffect(()=>{if(r){const j=y=>L.current?.(y);return document.addEventListener("mousemove",j),document.addEventListener("touchmove",j),()=>{document.removeEventListener("mousemove",j),document.removeEventListener("touchmove",j)}}},[r]);const{isBrushShapeDoneOnMouseUp:D}=b,W=g.useRef(null);W.current=j=>{if(!(it(j)&&j.touches.length>1)){if("button"in j&&j.button===2)return p(void 0),n(Pe),M({mode:"default"}),void f(void 0);if(h)v(void 0);else if(i.mode!=="textedition"&&i.mode!=="preview")return i.mode!=="resize"||!i.isCreating||d?.type!=="polygon"&&d?.type!=="curve"?void(i.mode!=="default"&&(i.mode==="brush"&&D&&p(void 0),M({mode:"default"}),f(void 0),w())):(M({mode:"preview"}),void w())}},g.useEffect(()=>{if(r){const j=y=>W.current?.(y);return document.addEventListener("mouseup",j),document.addEventListener("touchend",j),()=>{document.removeEventListener("mouseup",j),document.removeEventListener("touchend",j)}}},[r]);const z=!b.features.edition&&b.features.zoom,I=!b.features.edition&&!b.features.zoom,$=g.useRef(null);return $.current=(j,y)=>{if(j.preventDefault(),it(j)&&j.touches.length>1)return;const Q=y?.getContext("2d");if(!Q)return;const S=ut(j,t.current,b),V="button"in j&&j.button===1;if(!("button"in j&&j.button===2)){if(V||o.type==="move")v({start:S,originalOffset:b.canvasOffset});else if(!z){if(!pt(S,b))return p(void 0),void M({mode:"default"});if(o.type==="selection"){const{shape:Z,mode:P}=gi(Q,a,S,b,d,it(j),x);p(Z),M(P),P.mode==="selectionFrame"&&f([[S[0],S[1]],[S[0],S[1]]])}else if(zn.some(Z=>Z===o.type)){const Z=t.current?.getContext("2d");if(!Z)return;if(o.type==="brush"){if(d?.type==="brush"){const P=((F,A,_)=>{const ee={...F,points:ce(F.points.length,[[Math.round(A[0]),Math.round(A[1])]],F.points)};return Ge(ee,_)})(d,S,b);C(P)}else{const P=cs(Z,o,S,b);if(!P)return;e(P),p(P)}M({mode:"brush"})}else if(i.mode!=="preview"||d?.type!=="polygon"&&d?.type!=="curve"){if(o.type!=="picture"){const P=cs(Z,o,S,b);e(P),o.type!=="polygon"&&o.type!=="curve"&&n(Pe),p(P),M({mode:"resize",isCreating:!0,cursorStartPosition:[S[0]+b.selectionPadding,S[1]+b.selectionPadding],originalShape:P,anchor:P.type==="line"?0:P.type==="polygon"||P.type==="curve"?P.points.length-1:[1,1]})}}else{const P=d?.type==="polygon"?ns(d,S,b):is(d,S,b);p(P),C(P,!0)}}}}},g.useEffect(()=>{if(I)return;const j=t.current;if(!j)return;const y=Q=>$.current?.(Q,j);return j.addEventListener("mousedown",y,{passive:!1}),j.addEventListener("touchstart",y,{passive:!1}),()=>{j.removeEventListener("mousedown",y),j.removeEventListener("touchstart",y)}},[I,t]),g.useEffect(()=>{const j=t.current,y=t.current?.getContext("2d");if(!(!j||!y))return r?(E(j,Q=>{if(o.type==="selection"){if(d?.type==="text"){const S=ut(Q,t.current,b);return pt(S,b)?void(at(d,S,b)&&M({mode:"textedition",defaultValue:d.value})):void 0}if(d?.type==="polygon"||d?.type==="curve"){const S=ut(Q,t.current,b);if(!pt(S,b))return;const V=((Z,P,F,A,_=50)=>{if(P.locked||P.points.length<2)return!1;const{center:ee}=q(P,A),B=be(F,P.rotation,ee);Z.lineWidth=(P.style?.lineWidth??0)+_/A.canvasZoom;for(let Y=0;Y<P.points.length;Y++){if(Y===P.points.length-1){if(!P.style?.closedPoints)return!1;const ne=nt({points:[P.points[Y],P.points[0]]});if(Z.isPointInStroke(ne,B[0],B[1]))return{lineIndex:Y}}const U=nt({points:[P.points[Y],P.points[Y+1]]});if(Z.isPointInStroke(U,B[0],B[1]))return{lineIndex:Y}}return!1})(y,d,S,b);return void(V&&C(d?.type==="polygon"?ts(d,V.lineIndex,b):ss(d,V.lineIndex,b)))}}}),()=>{R(j)}):void 0},[C,E,R,r,t,o,d,M,b]),{hoverMode:H}},xs=e=>e.childNodes.length?Array.from(e.childNodes).map(t=>xs(t)).join(""):e.nodeValue??"",vi=({disabled:e=!1,shape:t,defaultValue:n,updateValue:s,saveShapes:a,settings:i})=>{const o=g.useRef(null),r=g.useRef(a);g.useEffect(()=>{if(!o.current)return;const d=o.current,h=c=>{c.preventDefault();const p=c.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,p)};d.addEventListener("paste",h),d.innerText="";for(const c of n){const p=document.createElement("div");c===""?p.innerHTML="<br/>":p.innerText=c,d.appendChild(p)}return d.focus(),()=>{d.removeEventListener("paste",h)}},[n]),g.useEffect(()=>{const d=r.current;return()=>{d()}},[]);const l=g.useMemo(()=>{const{borders:d,center:h}=q(t,i);return ge({point:[d.x,d.y],rotation:-t.rotation,origin:h})},[t,i]);return u.jsx("div",{className:"react-paint-editor-toolbox-edittextbox",ref:o,"data-fontbold":t.style?.fontBold??!1,"data-fontitalic":t.style?.fontItalic??!1,contentEditable:!e,onInput:d=>{const h=Array.from(d.target.childNodes).map(c=>xs(c));s(h)},style:{"--react-paint-editor-toolbox-edittextbox-transform":`translate3D(${(l[0]+i.canvasOffset[0])*i.canvasSize.scaleRatio}px, ${(l[1]+i.canvasOffset[1])*i.canvasSize.scaleRatio}px, 0) rotate(${It(t.rotation)}deg)`,"--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??tt}})},mi=(e,t,n,s,a)=>{Fn(e),((i,o)=>{const{canvasZoom:r,size:l,canvasSize:{width:d,height:h}}=o;if(l!=="fixed"||r>=1)return;i.fillStyle="#f5f5f5",i.fillRect(0,0,d,h);const c=Kn(o);i.clearRect(c.x,c.y,c.width,c.height),Jn(i,o)})(e,n),((i,o)=>{const{canvasSize:{width:r,height:l},gridGap:d,canvasOffset:h,canvasSize:{scaleRatio:c}}=o;if(!d)return;i.strokeStyle="rgb(220,220,220)",i.lineWidth=1,i.save(),i.scale(c,c),i.beginPath();const p=h[0]%d,f=h[1]%d,v=Math.ceil(r/c/d)+2,C=Math.ceil(l/c/d)+2;for(let w=-5;w<v;w++)i.moveTo(p+(w+1)*d,f-d),i.lineTo(p+(w+1)*d,f+l/c+d);for(let w=-5;w<C;w++)i.moveTo(p-d,f+(w+1)*d),i.lineTo(p+r/c+d,f+(w+1)*d);i.stroke(),i.restore()})(e,n);for(let i=s.length-1;i>=0;i--)t.mode==="textedition"&&s[i]===a||ds(e,s[i].id===a?.id?a:s[i],n)},yi=g.forwardRef(({canGrow:e,shapes:t,addShape:n,updateSingleShape:s,selectedShape:a,setSelectedShape:i,setSelectionFrame:o,hoveredShape:r,selectionFrame:l,refreshHoveredShape:d,refreshSelectedShapes:h,saveShapes:c,activeTool:p,setActiveTool:f,canvasOffsetStartData:v,setCanvasOffsetStartData:C,setCanvasOffset:w,isInsideComponent:M,selectionMode:b,setSelectionMode:k,selectionWidth:m,selectionColor:x,settings:H,isEditMode:T,isShiftPressed:E,isAltPressed:R,withFrameSelection:L,withSkeleton:D},W)=>{const z=g.useRef(null),I=g.useRef(null),$=H.canvasSize,j=T;g.useImperativeHandle(W,()=>z.current);const{hoverMode:y}=fi({addShape:n,drawCanvasRef:z,setActiveTool:f,shapes:t,selectionMode:b,activeTool:p,isInsideComponent:M,setCanvasOffset:w,selectedShape:a,canvasOffsetStartData:v,setCanvasOffsetStartData:C,setSelectedShape:i,setSelectionFrame:o,refreshHoveredShape:d,refreshSelectedShapes:h,updateSingleShape:s,saveShapes:c,setSelectionMode:k,isShiftPressed:E,isAltPressed:R,withFrameSelection:L,settings:H}),Q=g.useCallback(V=>{if(a?.type!=="text")return;const Z=z.current?.getContext("2d");if(!Z)return;const P=Je(si(Z,a,V,H),H);s(P)},[s,a,H]),S=V=>{if(T)return V.preventDefault(),V.stopPropagation(),!1};return g.useEffect(()=>{const V=z.current?.getContext("2d");V&&window.requestAnimationFrame(()=>mi(V,b,H,t,a))},[t,b,a,H]),g.useEffect(()=>{const V=I.current?.getContext("2d");V&&window.requestAnimationFrame(()=>((Z,P,F,A,_,ee,B,Y,U,ne)=>{Z.reset(),Jn(Z,F),ne&&Y&&Y.id!==B?.id&&A.type==="selection"&&P.mode==="default"&&us({ctx:Z,shape:Y,settings:F,selectionWidth:_,selectionColor:ee,withAnchors:!1}),B&&A.type!=="brush"&&us({ctx:Z,shape:B,settings:F,selectionWidth:_,selectionColor:ee,withAnchors:P.mode!=="textedition"}),U&&ri({ctx:Z,selectionFrame:U,settings:F})})(V,b,H,p,m,x,a,r,l,D))},[r,l,b,a,p,H,m,x,D]),u.jsx("div",{className:"react-paint-canvas-box",style:{"--react-paint-canvas-cursor":v?"grabbing":y.outOfView?"default":p.type!=="selection"&&p.type!=="move"||y.mode==="resize"?"crosshair":y.mode==="translate"?"move":y.mode==="rotate"||p.type==="move"?"grab":"default"},children:u.jsxs("div",{className:"react-paint-canvas-container","data-grow":e,children:[u.jsx("canvas",{className:An,ref:z,"data-grow":e,width:$.width,height:$.height,onContextMenu:S}),j&&u.jsx("canvas",{className:En,ref:I,width:$.width,height:$.height,"data-grow":e,onContextMenu:S}),T&&b.mode==="textedition"&&a?.type==="text"&&u.jsx(vi,{disabled:!H.features.edition,shape:a,defaultValue:b.defaultValue,updateValue:Q,saveShapes:c,settings:H})]})})}),Ss="ArrowUp",bs="ArrowDown",Cs="ArrowLeft",ws="ArrowRight",Qi="Delete",xi="Backspace",Si="Escape",Ms="Shift",ks="Alt",Ps="Option",bi="z",Ci="Z",wi="y",Mi="Y",Ls="copy",js="paste",ki=({isInsideComponent:e,selectedShape:t,isEditingText:n,settings:s,setSelectedShape:a,setActiveTool:i,setSelectionMode:o,setSelectionFrame:r,removeShape:l,pasteShape:d,updateShape:h,backwardShape:c,forwardShape:p,setShiftPressed:f,setAltPressed:v})=>{const[C,w]=g.useState(void 0);return g.useEffect(()=>{const M=x=>{t&&(n||(x.preventDefault(),w({...t})))},b=x=>{C&&(n||(x.preventDefault(),d(((H,T)=>({...Gt([20,20],H,[0,0],T,!1),id:ae(`${H.type}_`)}))(C,s))))},k=x=>{switch(x.key){case Ms:f(!1);break;case ks:case Ps:v(!1)}},m=x=>{if(x.metaKey||x.ctrlKey){if(x.key===Ci||x.key===bi)return x.preventDefault(),x.stopPropagation(),void(x.shiftKey?p():c());if(!Nn()&&(x.key===Mi||x.key===wi))return x.preventDefault(),x.stopPropagation(),void p()}if(x.key===Ms)return x.preventDefault(),x.stopPropagation(),void f(!0);if(x.key===ks||x.key===Ps)return x.preventDefault(),x.stopPropagation(),void v(!0);if(!t)return;if(x.key===Si)return a(void 0),i(Pe),o({mode:"default"}),void r(void 0);if(n)return;const H={[Cs]:[s.gridGap?-s.gridGap:-1,0],[ws]:[s.gridGap?s.gridGap:1,0],[bs]:[0,s.gridGap?s.gridGap:1],[Ss]:[0,s.gridGap?-s.gridGap:-1]};switch(x.key){case Cs:case ws:case bs:case Ss:x.preventDefault(),x.stopPropagation(),h(Gt(H[x.key],t,[0,0],s,!1));break;case Qi:case xi:x.preventDefault(),x.stopPropagation(),l(t)}};if(e)return document.addEventListener("keydown",m),document.addEventListener("keyup",k),document.addEventListener(Ls,M),document.addEventListener(js,b),()=>{document.removeEventListener("keydown",m),document.removeEventListener("keyup",k),document.removeEventListener(Ls,M),document.removeEventListener(js,b)}},[e,C,n,t,s,h,l,a,d,c,p,f,v,i,o,r]),{}},Pi=({isLoading:e=!1})=>{const[t,n]=g.useState("hidden");return g.useEffect(()=>{if(!e){n("fadeOut");const s=setTimeout(()=>n("hidden"),300);return()=>{clearTimeout(s)}}n("visible")},[e]),t==="hidden"?null:u.jsx("div",{className:"react-paint-editor-loading","data-loading":t,style:{"--react-paint-editor-loading-zindex":Ds,"--react-paint-editor-loading-transition-duration":"300ms"},children:u.jsxs("div",{className:"react-paint-editor-loader",children:[u.jsx("div",{}),u.jsx("div",{}),u.jsx("div",{}),u.jsx("div",{})]})})},Li="infos",ji=4e3,Vi=({type:e,text:t,duration:n})=>{const[s,a]=g.useState(!1);return g.useEffect(()=>{const i=setTimeout(()=>{a(!0)},100),o=setTimeout(()=>{a(!1)},n-500-100);return()=>{clearTimeout(i),clearTimeout(o)}},[n]),u.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+s,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:t})},Hi=({snackbarList:e})=>u.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":Ws},children:e.map(t=>u.jsx(Vi,{...t},t.id))}),O=g.forwardRef((e,t)=>{if(e.type==="file"||e.type==="color"){const{hidden:h=!1,disabled:c=!1,selected:p=!1,icon:f,children:v,className:C="",title:w,onClick:M,...b}=e;return u.jsxs("label",{className:`react-paint-editor-button ${C}`,title:w,onClick:M,"data-disabled":+c,"data-selected":+p,"data-hidden":+h,children:[u.jsx("input",{ref:t,disabled:c,...b}),u.jsxs("span",{className:"react-paint-editor-button-content",children:[v&&u.jsx("span",{className:"react-paint-editor-button-children",children:v}),f&&u.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:f}})]})]})}const{hidden:n=!1,disabled:s=!1,selected:a=!1,icon:i,children:o,type:r="button",className:l="",...d}=e;return u.jsx("button",{className:`react-paint-editor-button ${l}`,ref:t,disabled:s,"data-disabled":+s,"data-selected":+a,"data-hidden":+n,type:r,...d,children:u.jsxs("span",{className:"react-paint-editor-button-content",children:[o&&u.jsx("span",{className:"react-paint-editor-button-children",children:o}),i&&u.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:i}})]})})}),Fe=({children:e,title:t="",className:n="",position:s="bottom",fitContainer:a=!1,alignment:i="center",style:o,...r})=>u.jsxs("div",{className:`react-paint-editor-panel ${n}`,"data-fitcontainer":a,"data-position":s,"data-alignment":i,style:{...o,"--react-paint-editor-panel-zindex":Qn},...r,children:[t&&u.jsx("h3",{className:"react-paint-editor-panel-title",children:t}),e]}),Ti=e=>{switch(e){case"brush":return on;case"line":return dn;case"polygon":return Tt;case"curve":return un;case"rect":case"square":return Vt;case"circle":case"ellipse":return Ht;case"text":return cn;case"picture":return Zt;case"triangle":return""}},Zi=({disabled:e=!1,shape:t,selected:n,layoutDragging:s,toggleShapeVisibility:a,toggleShapeLock:i,setLayoutDragging:o,handleRemove:r,handleSelect:l,onMoveShapes:d})=>{const h=g.useRef(null),{isOver:c}=(({disabled:p=!1,ref:f,shape:v,layoutDragging:C,setLayoutDragging:w,handleSelect:M,onMoveShapes:b})=>{const[k,m]=g.useState(!1);return g.useEffect(()=>{C||m(!1)},[C]),g.useEffect(()=>{const x=f.current;if(!x)return;const H=()=>{w(void 0)},T=W=>(W.preventDefault&&W.preventDefault(),!1),E=W=>{M(v),W.dataTransfer&&(W.dataTransfer.effectAllowed="move",W.dataTransfer.setData("draggableShapeId",v.id),w(v.id))},R=()=>{C!==v.id&&m(!0)},L=()=>{m(!1)},D=W=>(W.stopPropagation(),W.dataTransfer&&b(W.dataTransfer.getData("draggableShapeId"),v.id),!1);return p||(x.addEventListener("dragstart",E),x.addEventListener("dragend",H),x.addEventListener("dragover",T),x.addEventListener("dragenter",R),x.addEventListener("dragleave",L),x.addEventListener("drop",D)),()=>{p||(x.removeEventListener("dragstart",E),x.removeEventListener("dragend",H),x.removeEventListener("dragover",T),x.removeEventListener("dragenter",R),x.removeEventListener("dragleave",L),x.removeEventListener("drop",D))}},[p,f,v,w,M,b,C]),{isOver:k}})({disabled:e,ref:h,shape:t,layoutDragging:s,setLayoutDragging:o,handleSelect:l,onMoveShapes:d});return u.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(s===t.id),"data-is-over":+c,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),l(t))},"data-selected":+n,ref:h,tabIndex:-1,children:[u.jsx("span",{dangerouslySetInnerHTML:{__html:Ti(t.type)}}),u.jsx("span",{children:t.id}),u.jsx("div",{className:"react-paint-editor-layouts-separator"}),u.jsx(O,{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>'}),u.jsx(O,{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>'}),u.jsx(O,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e||(p.preventDefault(),p.stopPropagation(),r(t))},icon:rn})]})},zi=({gridFormat:e,setGridFormat:t,settings:n,shapes:s,removeShape:a,toggleShapeVisibility:i,toggleShapeLock:o,selectedShape:r,moveShapes:l,selectShape:d,isLayoutPanelShown:h})=>{const[c,p]=g.useState(void 0),f=!n.features.edition;return h?u.jsx(Fe,{alignment:"right",className:"react-paint-editor-layouts-panel",children:u.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:u.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[u.jsxs("div",{className:"react-paint-editor-layouts-row",children:[u.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),u.jsx(O,{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:f,onClick:()=>t("none")}),["small","medium","large"].map(v=>u.jsx(O,{className:"react-paint-editor-layouts-grid-button",selected:e===v,disabled:f,onClick:()=>t(v),children:v.charAt(0).toUpperCase()},v))]}),u.jsx("hr",{}),u.jsx("div",{className:"react-paint-editor-layouts",children:s.length===0?u.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):s.map(v=>u.jsx(Zi,{shape:v,disabled:f,layoutDragging:c,setLayoutDragging:p,selected:r?.id===v.id,handleSelect:d,handleRemove:a,onMoveShapes:l,toggleShapeVisibility:i,toggleShapeLock:o},v.id))})]})})}):null},xt=({children:e,onClose:t,position:n="center",title:s,className:a=""})=>u.jsxs("div",{className:"react-paint-editor-modal","data-position":n,style:{"--react-paint-editor-modal-zindex":Qn},role:"dialog","aria-modal":"true","aria-labelledby":s,children:[u.jsx("div",{className:"react-paint-editor-modal-mask",onClick:t}),u.jsx("div",{className:`react-paint-editor-modal-panel ${a}`,children:e})]}),St=({selectedSettings:e,setSelectedSettings:t,title:n="Choisissez une couleur",mode:s="fill",disabled:a=!1,values:i,field:o,value:r="",valueChanged:l})=>{const[d]=g.useState(ae("settings_")),h=e===d;return i.length?u.jsxs(u.Fragment,{children:[u.jsx(O,{selected:h,title:n,disabled:a,onClick:()=>{t(c=>c===d?void 0:d)},icon:r==="transparent"?s==="fill"?vn:fn:void 0,children:r!=="transparent"&&u.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":s,style:{"--react-paint-editor-colorfield-color-value":r}})}),h&&u.jsx(Fe,{title:n,alignment:"left",children:u.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[i.map(c=>u.jsx(O,{title:c,selected:c===r,color:c,icon:c==="transparent"?s==="fill"?vn:fn:void 0,onClick:()=>{l(o,c)},children:c!=="transparent"&&u.jsx("div",{className:"react-paint-editor-colorfield-color",color:c,"data-mode":s,style:{"--react-paint-editor-colorfield-color-value":c}})},c)),u.jsx(O,{type:"color",title:"Custom color",selected:!i.includes(r),value:r,onChange:c=>{const p=+c.target.value;l(o,Number.isNaN(p)?c.target.value:p)},children:u.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:u.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},Ai=({disabled:e=!1,selectedShape:t,removeShape:n})=>u.jsx(O,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{n(t)},icon:rn}),bt=({CustomOption:e,selectedSettings:t,setSelectedSettings:n,title:s="Choisissez l'option",disabled:a=!1,field:i,icon:o,values:r,defaultValue:l,valueChanged:d})=>{const[h]=g.useState(ae("settings_")),c=t===h;return r.length?u.jsxs(u.Fragment,{children:[u.jsx(O,{selected:c,title:s,icon:o,disabled:a,onClick:()=>{n(p=>p===h?void 0:h)}}),c&&u.jsx(Fe,{title:s,alignment:"left",fitContainer:!0,children:u.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:r.map(p=>u.jsx(O,{title:`${p}`,onClick:()=>(f=>{d(i,f)})(p),selected:l===p,style:{"--react-paint-editor-button-padding":"16px"},children:u.jsx(e,{children:p})},p))})})]}):null},Ei=({children:e})=>u.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),Vs=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?u.jsx(bt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Ei,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,Ri=({disabled:e,toggleLayoutPanel:t})=>u.jsx(O,{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"}),Di=({children:e})=>u.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[u.jsx("span",{className:"react-paint-editor-linearrow-left"}),u.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),Hs=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?u.jsx(bt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Di,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,Wi=({children:e})=>u.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[u.jsx("span",{}),u.jsx("span",{}),u.jsx("span",{}),u.jsx("span",{}),u.jsx("span",{}),u.jsx("span",{}),u.jsx("span",{})]}),Ts=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,values:s,defaultValue:a,valueChanged:i})=>s.length?u.jsx(bt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Wi,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,Ct=({selectedSettings:e,setSelectedSettings:t,title:n="Choisissez l'intervalle",icon:s,disabled:a=!1,field:i,value:o=1,min:r=1,max:l=20,step:d=1,unity:h="",valueChanged:c})=>{const p=Math.round(o),[f]=g.useState(ae("settings_")),v=g.useRef(null);g.useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const C=e===f;return r===l?null:u.jsxs(u.Fragment,{children:[u.jsx(O,{selected:C,title:n,disabled:a,icon:s,onClick:()=>{t(w=>w===f?void 0:f)}}),C&&u.jsx(Fe,{title:n,alignment:"left",fitContainer:!0,children:u.jsx("div",{children:u.jsxs("label",{className:"react-paint-editor-rangefield",children:[u.jsx("input",{type:"range",min:r,max:l,step:d,value:o,onChange:w=>{const M=+w.target.value;c(i,Number.isNaN(M)?w.target.value:M,!1),v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{c(i,Number.isNaN(M)?w.target.value:M,!0)},1e3)}}),u.jsxs("span",{children:[p,h]})]})})})]})},Ni=({disabled:e=!1,className:t,toggleZoomPanel:n})=>u.jsx(O,{title:"Toggle zoom panel",disabled:e,onClick:n,icon:mn,className:t?` ${t}`:""}),wt=({setSelectedSettings:e,disabled:t=!1,field:n,icon:s,values:a,value:i=!1,valueChanged:o})=>{const[r]=g.useState(ae("settings_"));return a.length!==2?null:u.jsx(O,{onClick:()=>{e(l=>l===r?void 0:r),o(n,!i)},selected:i,disabled:t,icon:s})},Fi=({children:e})=>u.jsx("span",{children:e===0?"Non":"Oui"}),Oi=[0,1],Zs=({selectedSettings:e,setSelectedSettings:t,disabled:n=!1,defaultValue:s,valueChanged:a})=>u.jsx(bt,{selectedSettings:e,setSelectedSettings:t,CustomOption:Fi,title:"Fermer les points",icon:Tt,disabled:n,field:"closedPoints",values:Oi,defaultValue:s,valueChanged:a}),en=({activeTool:e,selectedShape:t,selectedShapeTool:n,disabled:s,selectedSettings:a,setSelectedSettings:i,handleShapeStyleChange:o,handlePolygonLinesCount:r,handleShapeFontFamilyChange:l})=>t?n&&u.jsxs(u.Fragment,{children:["strokeColor"in n.settings&&!n.settings.strokeColor.hidden&&u.jsx(St,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:s,field:"strokeColor",value:t.style?.strokeColor,valueChanged:o,values:n.settings.strokeColor.values}),"fillColor"in n.settings&&!n.settings.fillColor.hidden&&u.jsx(St,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:s,field:"fillColor",value:t.style?.fillColor,valueChanged:o,values:n.settings.fillColor.values}),"lineWidth"in n.settings&&!n.settings.lineWidth.hidden&&u.jsx(Ct,{selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",icon:gn,disabled:s,field:"lineWidth",value:t.style?.lineWidth,valueChanged:o,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&&u.jsx(Ts,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:t.style?.lineDash,valueChanged:o,values:n.settings.lineDash.values}),"lineArrow"in n.settings&&!n.settings.lineArrow.hidden&&u.jsx(Hs,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:t.style?.lineArrow,valueChanged:o,values:n.settings.lineArrow.values}),"closedPoints"in n.settings&&!n.settings.closedPoints.hidden&&u.jsx(Zs,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:o,defaultValue:t.style?.closedPoints}),"fontFamily"in n.settings&&!n.settings.fontFamily.hidden&&u.jsx(Vs,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:l,values:n.settings.fontFamily.values,defaultValue:t.style?.fontFamily}),"fontBold"in n.settings&&!n.settings.fontBold.hidden&&u.jsx(wt,{setSelectedSettings:i,disabled:s,field:"fontBold",icon:hn,valueChanged:l,values:n.settings.fontBold.values,value:t.style?.fontBold}),"fontItalic"in n.settings&&!n.settings.fontItalic.hidden&&u.jsx(wt,{setSelectedSettings:i,disabled:s,field:"fontItalic",icon:pn,valueChanged:l,values:n.settings.fontItalic.values,value:t.style?.fontItalic}),"opacity"in n.settings&&!n.settings.opacity.hidden&&u.jsx(Ct,{selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:ln,min:n.settings.opacity.min,max:n.settings.opacity.max,step:n.settings.opacity.step,unity:"%",disabled:s,field:"opacity",value:t.style?.opacity??100,valueChanged:o})]}):"settings"in e?u.jsxs(u.Fragment,{children:["strokeColor"in e.settings&&!e.settings.strokeColor.hidden&&u.jsx(St,{selectedSettings:a,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:s,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:o,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&!e.settings.fillColor.hidden&&u.jsx(St,{selectedSettings:a,setSelectedSettings:i,title:"Couleur de fond",disabled:s,field:"fillColor",value:e.settings.fillColor.default,valueChanged:o,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&!e.settings.lineWidth.hidden&&u.jsx(Ct,{selectedSettings:a,setSelectedSettings:i,title:"Epaisseur du trait",disabled:s,field:"lineWidth",icon:gn,value:e.settings.lineWidth.default,valueChanged:o,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&!e.settings.lineDash.hidden&&u.jsx(Ts,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:e.settings.lineDash.default,valueChanged:o,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&!e.settings.lineArrow.hidden&&u.jsx(Hs,{selectedSettings:a,setSelectedSettings:i,disabled:s,defaultValue:e.settings.lineArrow.default,valueChanged:o,values:e.settings.lineArrow.values}),"closedPoints"in e.settings&&!e.settings.closedPoints.hidden&&u.jsx(Zs,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:o,defaultValue:e.settings?.closedPoints.default}),"fontFamily"in e.settings&&!e.settings.fontFamily.hidden&&u.jsx(Vs,{selectedSettings:a,setSelectedSettings:i,disabled:s,valueChanged:l,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&!e.settings.fontBold.hidden&&u.jsx(wt,{setSelectedSettings:i,disabled:s,field:"fontBold",icon:hn,valueChanged:l,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&!e.settings.fontItalic.hidden&&u.jsx(wt,{setSelectedSettings:i,disabled:s,field:"fontItalic",icon:pn,valueChanged:l,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&!e.settings.opacity.hidden&&u.jsx(Ct,{selectedSettings:a,setSelectedSettings:i,title:"Opacité",icon:ln,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:o})]}):null,Ii=({width:e,availableTools:t,updateToolSettings:n,layersManipulation:s=!1,toggleLayoutPanel:a,activeTool:i,selectedShape:o,canvas:r,settings:l,updateShape:d,removeShape:h,isZoomPanelShown:c,setIsZoomPanelShown:p})=>{const[f,v]=g.useState(void 0),[C,w]=g.useState(!1),M=l.size==="infinite"||l.features.zoom,b=!l.features.edition,k=()=>{w(L=>!L)},m=o?t.find(L=>L.id===o.toolId)||t.find(L=>L.type===o.type):void 0,x=(m?Object.keys(m.settings).length+1:"settings"in i?Object.keys(i.settings).length:0)+ +s+ +M,H=e<40*x,T=(L,D,W=!0)=>{o?(d(Je(ce(["style",L],D,o),l),W),m&&n(m.id,L,D)):n(i.id,L,D)},E=(L,D)=>{if(o){if(o.type!=="text")return;const W=r?.getContext("2d");if(!W)return;const z=ce(["style",L],D,o),I=qt(W,z.value,z.width,z.style?.fontBold??!1,z.style?.fontItalic??!1,z.style?.fontFamily),$=Je({...z,fontSize:I,height:I*z.value.length},l);d($,!0),m&&n(m.id,L,D)}else n(i.id,L,D)},R=(L,D)=>{if(o){if(o.type!=="polygon"&&o.type!=="curve")return;d(o.type==="polygon"?ts(o,D,l):ss(o,D,l),!0),m&&n(m.id,L,D)}else n(i.id,L,D)};return u.jsxs(u.Fragment,{children:[u.jsxs("div",{className:"react-paint-editor-settings-bar",children:[u.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[M&&u.jsx(Ni,{className:c?"react-paint-editor-bar-zoom-button-opened":void 0,toggleZoomPanel:()=>{p(L=>!L)}}),H&&x>2&&u.jsx(O,{disabled:b,onClick:k,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>'}),o?m&&u.jsxs(u.Fragment,{children:[!H&&u.jsx(en,{activeTool:i,selectedShape:o,selectedShapeTool:m,disabled:b,selectedSettings:f,setSelectedSettings:v,handleShapeStyleChange:T,handlePolygonLinesCount:R,handleShapeFontFamilyChange:E}),i.type==="selection"&&u.jsx(Ai,{disabled:b,selectedShape:o,removeShape:h})]}):!H&&u.jsx(en,{activeTool:i,selectedShape:o,selectedShapeTool:m,disabled:b,selectedSettings:f,setSelectedSettings:v,handleShapeStyleChange:T,handlePolygonLinesCount:R,handleShapeFontFamilyChange:E})]}),u.jsx("div",{className:"react-paint-editor-settings-separator"}),s&&u.jsx(Ri,{disabled:b,toggleLayoutPanel:a})]}),C&&u.jsx(xt,{className:"react-paint-editor-settings-modal",onClose:k,position:"bottom",title:"Settings",children:u.jsx(en,{activeTool:i,selectedShape:o,selectedShapeTool:m,disabled:b,selectedSettings:f,setSelectedSettings:v,handleShapeStyleChange:T,handlePolygonLinesCount:R,handleShapeFontFamilyChange:E})})]})},zs=({disabled:e=!1,withText:t=!1,loadFile:n,type:s,img:a,accept:i})=>{const o=g.useRef(null);return u.jsx(O,{ref:o,type:"file",onClick:r=>{r.stopPropagation(),o.current&&(o.current.value="")},onChange:r=>{const l=r.target.files?.item(0);l&&n(l)},accept:i,title:s.label??s.type,icon:a,disabled:e,children:t?s.label:void 0})},ue=({type:e,img:t,isActive:n,withText:s=!1,disabled:a=!1,setActive:i})=>u.jsx(O,{disabled:a,selected:n,onClick:()=>{i(e)},title:e.label??e.type,icon:t,children:s?e.label:void 0}),$i=({activeTool:e,withActionsInMenu:t,hasActionToUndo:n=!1,hasActionToRedo:s=!1,hasActionToClear:a=!1,undoAction:i,redoAction:o,clearCanvas:r,alignment:l,group:d,vertical:h=!1,disabled:c=!1,withLoadAndSave:p,withExport:f,addPicture:v,loadFile:C,togglePictureUrlModal:w,saveFile:M,toggleExportModal:b,withUploadPicture:k,withUrlPicture:m})=>{const[x,H]=g.useState(!1),[,T]=g.useTransition(),E=d?.tools?.some(L=>L===e.type),R=(E?e.icon:d.img)??d.title;return g.useEffect(()=>{if(!x)return;const L=()=>{H(!1)};return document.addEventListener("click",L),()=>{document.removeEventListener("click",L)}},[x]),t||k||m||p||f?u.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[u.jsx(O,{selected:E,title:d.title,disabled:c,onClick:()=>{T(()=>{H(!0)})},icon:R}),x&&u.jsx(Fe,{alignment:l,position:"top",children:u.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+h,children:[t&&u.jsxs(u.Fragment,{children:[u.jsx(ue,{withText:!0,type:Be,disabled:c||!n,img:Be.icon,isActive:e.id===Be.id,setActive:i}),u.jsx(ue,{withText:!0,type:Ue,disabled:c||!s,img:Ue.icon,isActive:e.id===Ue.id,setActive:o}),u.jsx(ue,{withText:!0,type:Xe,disabled:c||!a,img:Xe.icon,isActive:e.id===Xe.id,setActive:r}),(k||m||p)&&u.jsx("hr",{})]}),k&&u.jsx(zs,{withText:!0,type:Vn,disabled:c,loadFile:async L=>{H(!1),await v(L)},img:Vn.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml, image/webp"}),m&&u.jsx(O,{disabled:c,selected:!1,onClick:w,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"}),(k||m)&&p&&u.jsx("hr",{}),p&&u.jsxs(u.Fragment,{children:[u.jsx(zs,{withText:!0,type:jn,disabled:c,loadFile:L=>{H(!1),C(L)},img:jn.icon,accept:"application/JSON"}),u.jsx(ue,{withText:!0,disabled:c,type:Et,img:Et.icon,isActive:e.id===Et.id,setActive:M})]}),f&&u.jsx(ue,{withText:!0,disabled:c,type:At,img:At.icon,isActive:e.id===At.id,setActive:b})]})})]}):null},Bi=({togglePictureUrlModal:e,addPicture:t})=>{const n=g.useRef(null);return g.useEffect(()=>{n.current&&n.current.focus()},[]),u.jsx(xt,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,title:"Add picture from URL",children:u.jsxs("form",{onSubmit:async s=>{s.preventDefault();const a=n.current?.value;a&&(await t(a),e())},children:[u.jsxs("label",{children:["URL ",u.jsx("input",{type:"text",ref:n})]}),u.jsx(O,{onClick:e,children:"Annuler"}),u.jsx(O,{type:"submit",selected:!0,children:"Ajouter"})]})})},As="Choose export settings",Ui=({toggleExportModal:e,exportCanvasInFile:t})=>{const n=async s=>{t(s),e()};return u.jsxs(xt,{className:"react-paint-editor-toolbox-export-modal",onClose:e,title:As,children:[u.jsx("h3",{children:As}),u.jsx("hr",{}),u.jsx(O,{onClick:()=>n("currentZoom"),children:"Exporter la vue actuelle"}),u.jsx(O,{onClick:()=>n("defaultView"),children:"Exporter le canvas entier"}),u.jsx(O,{onClick:()=>n("fitToShapes"),children:"Exporter dans les limites du dessin"}),u.jsx(O,{selected:!0,onClick:e,children:"Annuler"})]})},Xi=({activeTool:e,alignment:t,group:n,disabled:s=!1,setActiveToolFromId:a})=>{const i=g.useRef(null),[o,r]=g.useState(!1),[,l]=g.useTransition(),[d,h]=g.useState(void 0),c=v=>{h(v),a(v.id)};if(g.useEffect(()=>{if(!o)return;const v=C=>{!Dn(C,i.current)&&r(!1)};return document.addEventListener("mousedown",v,{passive:!1}),document.addEventListener("touchstart",v,{passive:!1}),()=>{document.removeEventListener("mousedown",v),document.removeEventListener("touchstart",v)}},[o]),"type"in n)return u.jsx(ue,{disabled:s,type:n,img:n.icon,isActive:e.id===n.id,setActive:c});if(!n.toolsType.length)return null;if(n.toolsType?.length===1)return u.jsx(ue,{disabled:s,type:n.toolsType[0],img:n.toolsType[0].icon,isActive:e.id===n.toolsType[0].id,setActive:c});const p=n?.toolsType.find(v=>v.type===e.type)!==void 0,f=(d?d.icon:n.toolsType?.[0]?.icon)??n.title;return u.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[u.jsx(O,{selected:p,title:n.title,disabled:s,onClick:()=>{d?a(d.id):n.toolsType?.[0]&&c(n.toolsType[0]),l(()=>{r(!0)})},icon:f}),o&&u.jsx(Fe,{alignment:t,position:"top",children:u.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+n.vertical,ref:i,children:n.toolsType.map(v=>u.jsx(ue,{disabled:s,type:v,img:v.icon,isActive:e.id===v.id,setActive:c},v.id))})})]})},Yi=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],qi=({settings:e,width:t,activeTool:n,hasActionToUndo:s=!1,hasActionToRedo:a=!1,hasActionToClear:i=!1,withLoadAndSave:o,withExport:r,clearCanvas:l,setActiveTool:d,undoAction:h,redoAction:c,addPicture:p,loadFile:f,saveFile:v,exportCanvasInFile:C,availableTools:w,withUrlPicture:M,withUploadPicture:b})=>{const k=((Q,S)=>{const V=S.flatMap(Z=>{if(typeof Z!="object")return Q.filter(F=>F.type===Z);const P=Q.filter(F=>Z.toolsType.includes(F.type));return P?{...Z,toolsType:P}:null});return _t(V)})(w,Yi),m=!e.features.edition,x=t<40*(6+k.length),H=t<40*(3+k.length),[T,E]=g.useState(!1),[R,L]=g.useState(!1),[D,W]=g.useState(!1),z=()=>{E(Q=>!Q)},I=()=>{W(Q=>!Q)},$=Q=>{d(Q),E(!1)},j=Q=>{$(w.find(S=>S.id===Q)??n)},y=w.find(Q=>Q.type===n.type)!==void 0;return u.jsxs(u.Fragment,{children:[u.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",style:{"--react-paint-editor-toolbar-minwidth":"160px"},children:[u.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[u.jsx(ue,{type:Pe,disabled:m,img:Pe.icon,isActive:n.id===Pe.id,setActive:$}),(e.size==="infinite"||e.features.zoom)&&u.jsx(ue,{type:Rt,disabled:m,img:Rt.icon,isActive:n.id===Rt.id,setActive:$}),H?u.jsx(O,{disabled:m,onClick:z,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:y}):k.map(Q=>u.jsx(Xi,{disabled:m,activeTool:n,group:Q,setActiveToolFromId:j},"id"in Q?Q.id:Q.title))]}),!x&&u.jsxs(u.Fragment,{children:[u.jsx(ue,{type:Be,disabled:m||!s,img:Be.icon,isActive:n.id===Be.id,setActive:h}),u.jsx(ue,{type:Ue,disabled:m||!a,img:Ue.icon,isActive:n.id===Ue.id,setActive:c}),u.jsx(ue,{type:Xe,disabled:m||!i,img:Xe.icon,isActive:n.id===Xe.id,setActive:l})]}),u.jsx($i,{withActionsInMenu:x,disabled:m,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:f,saveFile:v,togglePictureUrlModal:()=>{L(!0)},toggleExportModal:I,withUploadPicture:b,withUrlPicture:M,withLoadAndSave:o,withExport:r,hasActionToUndo:s,hasActionToRedo:a,hasActionToClear:i,undoAction:h,redoAction:c,clearCanvas:l})]}),T&&u.jsx(xt,{className:"react-paint-editor-toolbar-modal",onClose:z,title:"Outils",children:w.map(Q=>Q.type==="picture"?null:u.jsx(ue,{disabled:m,type:Q,img:Q.icon,withText:!1,isActive:n.id===Q.id,setActive:$},Q.id))}),R&&u.jsx(Bi,{togglePictureUrlModal:()=>{L(Q=>!Q)},addPicture:p}),D&&u.jsx(Ui,{toggleExportModal:I,exportCanvasInFile:C})]})},Mt={none:0,small:10,medium:20,large:40},Gi={toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8"},_i=()=>{const e=g.useRef([]),[t,n]=g.useState([]);return g.useEffect(()=>()=>{for(const s of e.current)clearTimeout(s)},[]),{snackbarList:t,addSnackbar:({type:s=Li,duration:a=ji,text:i})=>{const o={id:ae("snackbar_"),duration:a,type:s,text:i};n(r=>[...r,o]),e.current=[...e.current,setTimeout(()=>{return r=o.id,void n(l=>l.filter(d=>d.id!==r));var r},a)]}}};ke.Canvas=({options:e,className:t,style:n,canvasProps:s})=>{const{shapesRef:a,selectedShape:i,selectionFrame:o,hoveredShape:r,addShape:l,setSelectedShape:d,setSelectionFrame:h,refreshSelectedShapes:c,refreshHoveredShape:p,removeShape:f,updateShape:v,backwardShape:C,forwardShape:w,saveShapes:M,refs:b,width:k,height:m,settings:x,setCanvasSize:H,setCanvasOffset:T,selectShape:E,activeTool:R,setActiveTool:L,isInsideComponent:D,isEditMode:W,canvas:{withSkeleton:z,withFrameSelection:I,canGrow:$,canShrink:j},canvasOffsetStartData:y,setCanvasOffsetStartData:Q,selectionMode:S,setSelectionMode:V}=s,{canvasBackgroundColor:Z,canvasSelectionColor:P,canvasSelectionWidth:F}={...Ns,...e},A=g.useRef(null),[_,ee]=g.useState(!1),[B,Y]=g.useState(!1),U=g.useCallback(G=>{l(G),E(G)},[l,E]),ne=g.useCallback(G=>{H({realWidth:k,realHeight:m,width:G,height:m*G/k,scaleRatio:G/k})},[k,m,H]);return ki({isInsideComponent:D,isEditingText:S.mode==="textedition",settings:x,selectedShape:i,setSelectedShape:d,removeShape:f,pasteShape:U,updateShape:v,backwardShape:C,forwardShape:w,setShiftPressed:ee,setAltPressed:Y,setActiveTool:L,setSelectionMode:V,setSelectionFrame:h}),(({onResized:G,element:K})=>{g.useEffect(()=>{const fe=K.current;if(!fe)return;const ye=new ResizeObserver(te=>{const ve=te?.[0]?.borderBoxSize?.[0],{width:ze,height:Ae}=ve?{width:ve.inlineSize,height:ve.blockSize}:te?.[0].contentRect??{};G(ze,Ae)});return ye.observe(fe),()=>{ye.unobserve(fe)}},[K,G])})({element:A,onResized:ne}),u.jsx("div",{ref:A,className:"react-paint-app-row"+(t?` ${t}`:""),"data-grow":$,"data-shrink":j,style:{"--react-paint-app-row-width":x.canvasSize.width,"--react-paint-app-canvaswidth":k,"--react-paint-app-canvasheight":m,"--react-paint-app-row-aspectratio":`calc(${x.canvasSize.width} / ${x.canvasSize.height})`,"--react-paint-app-canvas-bg":Z,...n},children:u.jsx(yi,{ref:b.canvas,canGrow:$,isInsideComponent:D,activeTool:R,setActiveTool:L,canvasOffsetStartData:y,setCanvasOffsetStartData:Q,shapes:a.current,addShape:l,updateSingleShape:v,selectedShape:i,selectionFrame:o,setSelectedShape:d,setSelectionFrame:h,hoveredShape:r,refreshHoveredShape:p,refreshSelectedShapes:c,settings:x,setCanvasOffset:T,saveShapes:M,selectionMode:S,setSelectionMode:V,selectionColor:P,selectionWidth:F,isEditMode:W,isShiftPressed:_,isAltPressed:B,withFrameSelection:I,withSkeleton:z})})},ke.Editor=({editorProps:e,className:t,style:n,options:s,children:a})=>{const{shapesRef:i,addPictureShape:o,moveShapes:r,toggleShapeVisibility:l,toggleShapeLock:d,canGoBackward:h,canGoForward:c,canClear:p,selectedShape:f,removeShape:v,updateShape:C,backwardShape:w,forwardShape:M,refs:b,width:k,height:m,selectTool:x,selectShape:H,activeTool:T,setActiveTool:E,setAvailableTools:R,isEditMode:L,availableTools:D,gridGap:W,setGridGap:z,loadFile:I,exportPicture:$,exportData:j,clearCanvas:y,settings:Q,setCanvasZoom:S,canvas:{canGrow:V,layersManipulation:Z,withExport:P,withLoadAndSave:F,withUploadPicture:A,withUrlPicture:_}}=e,{toolbarBackgroundColor:ee,dividerColor:B,fontRadius:Y,fontDisabledColor:U,fontDisabledBackgroundColor:ne,fontColor:G,fontBackgroundColor:K,fontSelectedColor:fe,fontSelectedBackgroundColor:ye,fontHoverColor:te,fontHoverBackgroundColor:ve}={...Gi,...s},ze=Q.size==="infinite"||Q.features.zoom,[Ae,le]=g.useState(!1),[Ee,he]=g.useState(!1),[se,je]=g.useState(ze),Ce=ze&&se,et=W>=Mt.large?"large":W>=Mt.medium?"medium":W>=Mt.small?"small":"none",{snackbarList:Re,addSnackbar:Qe}=_i(),kt=g.useCallback((ie,oe,jt)=>{R(Ve=>Ve.map(De=>De.id===ie?ce(["settings",oe,"default"],jt,De):De)),E(Ve=>Ve.id===ie?ce(["settings",oe,"default"],jt,Ve):Ve)},[E,R]),Pt=g.useCallback(ie=>{le(!0);try{$(ie)}catch(oe){oe instanceof Error&&Qe({type:"error",text:`L'export a échoué : ${oe.message}`}),console.warn(oe)}finally{le(!1)}},[$,Qe]),Lt=g.useCallback(()=>{le(!0);try{j(),le(!1)}catch(ie){ie instanceof Error&&Qe({type:"error",text:"L'enregistrement a échoué"}),console.warn(ie)}finally{le(!1)}},[j,Qe]),tn=g.useCallback(async ie=>{le(!0);try{await I(ie),Qe({type:"success",text:"Fichier chargé !"})}catch(oe){oe instanceof Error&&Qe({type:"error",text:"Le chargement a échoué"}),console.warn(oe)}finally{le(!1)}},[I,Qe]),nn=g.useCallback(async ie=>{le(!0);try{const oe=await o(ie,k,m);H(oe)}catch(oe){oe instanceof Error&&Qe({type:"error",text:"Le chargement a échoué"}),console.warn(oe)}finally{le(!1)}},[o,H,Qe,k,m]),sn=`${t?`${t} `:""}${Ee?"react-paint-editor-layout-opened ":""}react-paint-editor-app`;return u.jsxs("div",{ref:b.setEditor,className:sn,style:{"--react-paint-editor-app-maxWidth":V?"100%":`${k}px`,"--react-paint-editor-app-toolbar-bg":ee,"--react-paint-editor-app-divider-color":B,"--react-paint-editor-app-font-radius":Y,"--react-paint-editor-app-font-disabled-color":U,"--react-paint-editor-app-font-disabled-bg":ne,"--react-paint-editor-app-font-color":G,"--react-paint-editor-app-font-bg":K,"--react-paint-editor-app-font-selected-color":fe,"--react-paint-editor-app-font-selected-bg":ye,"--react-paint-editor-app-font-hover-color":te,"--react-paint-editor-app-font-hover-bg":ve,...n},children:[L&&u.jsx(qi,{settings:Q,width:Q.canvasSize.width,activeTool:T,clearCanvas:y,setActiveTool:x,exportCanvasInFile:Pt,saveFile:Lt,loadFile:tn,addPicture:nn,hasActionToUndo:h,hasActionToRedo:c,hasActionToClear:p,undoAction:w,redoAction:M,availableTools:D,withExport:P,withLoadAndSave:F,withUploadPicture:A,withUrlPicture:_}),a,L&&Z&&u.jsx(zi,{gridFormat:et,setGridFormat:ie=>{z(Mt[ie])},shapes:i.current,moveShapes:r,selectedShape:f,removeShape:v,selectShape:H,toggleShapeVisibility:l,toggleShapeLock:d,isLayoutPanelShown:Ee,settings:Q}),Ce&&u.jsxs(Fe,{alignment:"left",className:"react-paint-editor-layouts-panel","data-edit":+L,children:[u.jsx(O,{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")}),u.jsxs(O,{className:"react-paint-editor-zoom-button react-paint-editor-zoom-button-value",onClick:()=>S("default"),children:[Math.round(100*Q.canvasZoom),"%"]}),u.jsx(O,{className:"react-paint-editor-zoom-button",icon:mn,onClick:()=>S("zoom")})]}),L&&u.jsxs(u.Fragment,{children:[u.jsx(Ii,{setCanvasZoom:S,width:Q.canvasSize.width,activeTool:T,availableTools:D,selectedShape:f,settings:Q,removeShape:v,updateShape:C,canvas:b.canvas.current,layersManipulation:Z,toggleLayoutPanel:()=>{he(ie=>!ie)},isZoomPanelShown:Ce,setIsZoomPanelShown:je,updateToolSettings:kt}),u.jsx(Pi,{isLoading:Ae}),u.jsx(Hi,{snackbarList:Re})]})]})},ke.useReactPaint=({width:e=1e3,height:t=600,shapes:n,mode:s="editor",disabled:a=!1,options:i=Rn}={})=>{const{layersManipulation:o,brushAlgo:r,isBrushShapeDoneOnMouseUp:l,grid:d,canGrow:h,canShrink:c,withExport:p,withLoadAndSave:f,withUploadPicture:v,withUrlPicture:C,withSkeleton:w,withFrameSelection:M,clearCallback:b,availableTools:k,canvasSelectionPadding:m,size:x,canZoom:H}={...Rn,...i},T=s!=="viewer",E=g.useRef(null),R=g.useRef(null),L=g.useRef(!1),D=g.useCallback(X=>{E.current=X},[]),[W,z]=g.useState(void 0),[I,$]=g.useState(Pe),[j,y]=g.useState({mode:"default"}),[Q,S]=g.useState(d),[V,Z]=g.useState({realWidth:e,realHeight:t,width:e,height:t,scaleRatio:1}),P=H==="always"&&!a,{canvasTransformation:F,setCanvasTransformation:A,setCanvasOffset:_,setCanvasZoom:ee}=pi({canvasSize:V,size:x,canvasElt:R.current,zoomEnabled:P}),{offset:B,zoom:Y}=F,U=g.useMemo(()=>({brushAlgo:r,isBrushShapeDoneOnMouseUp:l,canvasSize:{realWidth:V.realWidth,realHeight:V.realHeight,width:V.width,height:V.height,scaleRatioWithNoZoom:V.scaleRatio,scaleRatio:V.scaleRatio*Y},size:x,canvasOffset:B,canvasZoom:Y,gridGap:Q,selectionPadding:m,features:{edition:T&&!a,zoom:P}}),[m,Q,r,l,Y,B,V,x,a,P,T]),[ne,G]=g.useState(Qs(k,v||C)),{isInsideComponent:K}=(({settings:X,componentRef:pe})=>{const[ot,Ie]=g.useState(!1),$e=!X.features.edition&&!X.features.zoom;return g.useEffect(()=>{if(!$e){const we=rt=>{Ie(Dn(rt,pe.current))};return document.addEventListener("mousedown",we,{passive:!0}),document.addEventListener("touchstart",we,{passive:!0}),()=>{document.removeEventListener("mousedown",we),document.removeEventListener("touchstart",we)}}Ie(!1)},[$e,pe]),{isInsideComponent:ot}})({settings:U,componentRef:E}),{registerEvent:fe,unregisterEvent:ye,shapesRef:te,selectedShape:ve,selectionFrame:ze,hoveredShape:Ae,addShape:le,addPictureShape:Ee,moveShapes:he,setSelectedShape:se,setSelectionFrame:je,refreshSelectedShapes:Ce,refreshHoveredShape:et,removeShape:Re,updateShape:Qe,backwardShape:kt,forwardShape:Pt,clearShapes:Lt,saveShapes:tn,toggleShapeVisibility:nn,toggleShapeLock:sn,canGoBackward:ie,canGoForward:oe,canClear:jt}=ui(U,e,t),Ve=g.useCallback(X=>{se(void 0),$(X)},[se]);g.useEffect(()=>{if(j.mode==="preview")return()=>y(X=>X.mode==="preview"?{mode:"default"}:X)},[ve?.id,j.mode==="preview"]);const De=g.useCallback((X,pe)=>{Lt(X,pe),Ve(Pe),A({offset:[0,0],zoom:1})},[Ve,Lt,A]),Es=g.useCallback(X=>{se(pe=>(pe?.id!==X.id&&$(Pe),X))},[se]),Ki=g.useCallback(()=>{const X=ci(te.current,e,t);if(!X)throw new Error("L'encodage a échoué");fs(X,"drawing.json")},[te,e,t]),Ji=g.useCallback(X=>{const pe=vs({shapes:te.current,settings:U,view:X});fs(pe,"drawing.png")},[te,U]),ea=g.useCallback(X=>vs({shapes:te.current,settings:U,view:X}),[te,U]),ta=g.useCallback(()=>Jt(te.current,e,t),[te,e,t]);g.useEffect(()=>{K||se(void 0)},[K,se]);const Oe=g.useCallback(async(X,pe)=>{const ot=await(async(Ie,$e)=>{if(!Ie)return[];const we=[],rt=_t(Ie.map(me=>{if(!me||!zn.includes(me.type))return null;if(me.type==="picture"){const Me=new Image,aa=new Promise((lt,oa)=>{Me.onload=()=>{URL.revokeObjectURL(Me.src),lt()},Me.onerror=()=>{oa(new Error("Some images could not be loaded"))}});if(we.push(aa),me.src.startsWith("http"))gs(me.src).then(lt=>{Me.src=lt}).catch(()=>{Me.src=""});else if(me.src.includes("<svg")){const lt=new Blob([me.src],{type:"image/svg+xml"});Me.src=URL.createObjectURL(lt)}else Me.src=me.src;return ms({...me,img:Me},$e)}return ms(me,$e)}));return await Promise.all(we),rt})(X,U);De(ot,pe)},[De,U]),an=g.useRef(Oe);an.current=Oe;const na=g.useCallback((X=[],pe=!0)=>{an.current?.(X,{clearHistory:pe,source:"remote"})},[]);g.useEffect(()=>{L.current||(L.current=!0,n&&an.current?.(n,{clearHistory:!0,source:"remote"}))},[n]);const sa=g.useCallback(async X=>{const pe=await(async ot=>new Promise((Ie,$e)=>{const we=new FileReader;we.onload=rt=>{const me=rt.target?.result;if(!me)return $e("Impossible de récupérer les données du fichier");const Me=JSON.parse(me);Ie(Me)},we.readAsText(ot)}))(X);await Oe(pe.shapes??[],{clearHistory:!0,source:"remote"})},[Oe]),ia=g.useCallback(()=>{typeof b!="string"?Oe(b(),{clearHistory:!1,source:"user"}):b==="defaultShapes"&&n!==void 0?Oe(n,{clearHistory:!1,source:"user"}):De([],{clearHistory:!1,source:"user"})},[De,Oe,n,b]);g.useEffect(()=>{G(Qs(k,v||C))},[k,v,C]);const Rs={canvas:R,editor:E,setEditor:D};return{annotationsProps:{style:{"user-select":"none","touch-action":"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":U.canvasZoom,"--react-paint-canvas-offset-x":U.canvasOffset[0],"--react-paint-canvas-offset-y":U.canvasOffset[1],"--react-paint-app-canvaswidth":e,"--react-paint-app-canvasheight":t}},editorProps:{shapesRef:te,addPictureShape:Ee,moveShapes:he,toggleShapeVisibility:nn,toggleShapeLock:sn,canGoBackward:ie,canGoForward:oe,canClear:jt,selectedShape:ve,removeShape:Re,updateShape:Qe,backwardShape:kt,forwardShape:Pt,refs:Rs,width:e,height:t,selectTool:Ve,selectShape:Es,activeTool:I,setActiveTool:$,setAvailableTools:G,isEditMode:T,availableTools:ne,gridGap:Q,setGridGap:S,loadFile:sa,exportPicture:Ji,exportData:Ki,clearCanvas:ia,settings:U,setCanvasZoom:ee,canvas:{canGrow:h,canShrink:c,layersManipulation:o,withExport:p,withLoadAndSave:f,withUploadPicture:v,withUrlPicture:C}},canvasProps:{shapesRef:te,selectedShape:ve,selectionFrame:ze,hoveredShape:Ae,addShape:le,setSelectedShape:se,setSelectionFrame:je,refreshSelectedShapes:Ce,refreshHoveredShape:et,removeShape:Re,updateShape:Qe,backwardShape:kt,forwardShape:Pt,saveShapes:tn,refs:Rs,width:e,height:t,settings:U,setCanvasSize:Z,setCanvasOffset:_,setCanvasZoom:ee,selectShape:Es,activeTool:I,setActiveTool:$,isInsideComponent:K,isEditMode:T,canvas:{withSkeleton:w,withFrameSelection:M,canGrow:h,canShrink:c},canvasOffsetStartData:W,setCanvasOffsetStartData:z,selectionMode:j,setSelectionMode:y},registerEvent:fe,unregisterEvent:ye,resetCanvas:na,getCurrentImage:ea,getCurrentData:ta,setCanvasOffset:_,setCanvasZoom:ee}},Object.defineProperty(ke,Symbol.toStringTag,{value:"Module"})});
|