npm - @yorab/react-paint - Versions diffs - 0.10.0 → 0.10.1 - Mend

@yorab/react-paint 0.10.0 → 0.10.1

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

Files changed (33) hide show

package/README.md +1 -1
package/dist/components/Canvas.d.ts +4 -6
package/dist/components/settings/SettingsBar.d.ts +3 -3
package/dist/components/toolbox/EditTextBox.d.ts +3 -2
package/dist/constants/app.d.ts +14 -1
package/dist/hooks/useDrawableCanvas.d.ts +5 -12
package/dist/hooks/useKeyboard.d.ts +3 -5
package/dist/hooks/useShapes.d.ts +4 -7
package/dist/react-paint.js +1002 -995
package/dist/react-paint.umd.cjs +1 -1
package/dist/types/Shapes.d.ts +1 -3
package/dist/utils/canvas.d.ts +2 -1
package/dist/utils/data.d.ts +2 -1
package/dist/utils/file.d.ts +4 -3
package/dist/utils/grid.d.ts +2 -3
package/dist/utils/intersect.d.ts +5 -4
package/dist/utils/selection/lineSelection.d.ts +4 -3
package/dist/utils/selection/rectSelection.d.ts +4 -4
package/dist/utils/selection/selectionFrame.d.ts +2 -1
package/dist/utils/selection.d.ts +3 -2
package/dist/utils/shapes/brush.d.ts +8 -8
package/dist/utils/shapes/circle.d.ts +6 -6
package/dist/utils/shapes/curve.d.ts +7 -7
package/dist/utils/shapes/ellipse.d.ts +6 -6
package/dist/utils/shapes/index.d.ts +13 -16
package/dist/utils/shapes/line.d.ts +6 -6
package/dist/utils/shapes/path.d.ts +2 -1
package/dist/utils/shapes/picture.d.ts +6 -6
package/dist/utils/shapes/polygon.d.ts +7 -7
package/dist/utils/shapes/rectangle.d.ts +7 -7
package/dist/utils/shapes/text.d.ts +7 -7
package/dist/utils/transform.d.ts +4 -4
package/package.json +2 -2

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

	@@ -1 +1 @@
1	- (function(c,f){typeof exports=="object"&&typeof module<"u"?module.exports=f(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],f):(c=typeof globalThis<"u"?globalThis:c\|\|self)["react-paint"]=f(c.jsxRuntime,c.React)})(this,function(c,f){"use strict";const ee=["transparent","black","white","red","green","blue","yellow"],Me=[0,1,2],Bt=[[1,0],[1,2],[4,6]],Je="serif",ui=1,hi=2,mt=3,Te=[10,20,40],pi=({isLoading:e=!1})=>{const[i,t]=f.useState("hidden");return f.useEffect(()=>{if(!e){t("fadeOut");const n=setTimeout(()=>t("hidden"),300);return()=>{clearTimeout(n)}}t("visible")},[e]),i==="hidden"?null:c.jsx("div",{className:"react-paint-editor-loading","data-loading":i,style:{"--react-paint-editor-loading-zindex":hi,"--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",{})]})})},Xt=2,Yt="blue",Qe=14,_t=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],qt=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle"],Gt='<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>',yt='<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>',Qt='<svg><path d="M10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333ZM10 16.583Q12.75 16.583 14.667 14.667Q16.583 12.75 16.583 10Q16.583 7.25 14.667 5.333Q12.75 3.417 10 3.417Q7.25 3.417 5.333 5.333Q3.417 7.25 3.417 10Q3.417 12.75 5.333 14.667Q7.25 16.583 10 16.583ZM10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Z"/></svg>',xt='<svg><path d="M12.25 18.333V16.167L6.833 13.458H2.5V8.208H6.25L8.25 5.917V1.667H13.5V6.917H9.708L7.75 9.146V11.958L12.25 14.208V13.083H17.5V18.333Z"/></svg>',Jt='<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>',Kt='<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>',bt='<svg><path d="M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z"/></svg>',e1='<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>',t1='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',i1='<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>',a1='<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>',n1='<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>',s1='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',o1='<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>',r1='<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>',_="react-paint-",St={type:"picture",id:`${_}picture`,icon:bt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},l1={type:"brush",id:`${_}brush`,icon:Gt,label:"Brosse",settings:{strokeColor:{values:ee,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:Me,default:0}}},c1={type:"line",id:`${_}line`,icon:t1,label:"Ligne",settings:{strokeColor:{values:ee,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Me,default:0},lineArrow:{values:[0,1,2,3],default:0}}},d1={type:"polygon",id:`${_}polygon`,icon:xt,label:"Polygone",settings:{strokeColor:{values:ee,default:"black"},fillColor:{values:ee,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Me,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},u1={type:"curve",id:`${_}curve`,icon:i1,label:"Courbe",settings:{strokeColor:{values:ee,default:"black"},fillColor:{values:ee,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Me,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},h1={type:"rect",id:`${_}rect`,icon:yt,label:"Rectangle",settings:{strokeColor:{values:ee,default:"black"},fillColor:{values:ee,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Me,default:0}}},p1={type:"square",id:`${_}square`,icon:yt,label:"Carré",settings:{strokeColor:{values:ee,default:"black"},fillColor:{values:ee,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Me,default:0}}},g1={type:"circle",id:`${_}circle`,icon:Qt,label:"Cercle",settings:{strokeColor:{values:ee,default:"black"},fillColor:{values:ee,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Me,default:0}}},f1={type:"ellipse",id:`${_}ellipse`,icon:Qt,label:"Ellipse",settings:{strokeColor:{values:ee,default:"black"},fillColor:{values:ee,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Me,default:0}}},v1={type:"text",id:`${_}text`,icon:e1,label:"Texte",settings:{strokeColor:{values:ee,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}}},xe={id:`${_}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"},We={id:`${_}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"},$e={id:`${_}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"},Oe={id:`${_}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"},Ct={id:`${_}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"},m1={id:`${_}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"},wt={id:`${_}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"},y1={id:`${_}upload-picture`,type:"uploadpicture",icon:bt,label:"Upload picture"},Q1="react-paint-editor-canvas-drawcanvas",x1="react-paint-editor-canvas-selectioncanvas",Mt={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[l1,c1,d1,u1,h1,p1,g1,f1,St,v1],clearCallback:"empty",withFrameSelection:!1,withSkeleton:!1,uiStyle:{toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8",canvasBackgroundColor:"white",canvasSelectionColor:Yt,canvasSelectionWidth:Xt,canvasSelectionPadding:0}},b1=(e,i)=>!!(e.target instanceof Node&&i)&&i.contains(e.target),S1=e=>{e.lineCap="round",e.lineJoin="round"},Ae=(e,i={})=>{const{lineCap:t="round",fillColor:n="transparent",opacity:s=100,strokeColor:r=Yt,lineWidth:o=Xt,lineDash:a=0}=i;e.lineCap=t,e.globalAlpha=s/100,e.fillStyle=n,e.strokeStyle=r,e.lineWidth=o,e.setLineDash(a===0?[]:[Bt[a][0]o,Bt[a][1]o])},kt=(e,i,t,n,s)=>{e.save(),e.scale(i,i),e.translate(t[0],t[1]),n&&s&&(e.translate(s[0],s[1]),e.rotate(n),e.translate(-s[0],-s[1]))},at=e=>{const i=new Path2D;return i.rect(e.x,e.y,e.width,e.height),i},nt=e=>{const i=new Path2D;return i.arc(e.x,e.y,e.radius,0,2Math.PI),i},jt=e=>{const i=new Path2D;return i.moveTo(...e.points[0]),i.lineTo(...e.points[1]),i},gi=e=>{const i=new Path2D;return i.moveTo(...e.points[0]),i.lineTo(...e.points[1]),i.lineTo(...e.points[2]),i.lineTo(...e.points[0]),i},Lt=(e,i,t,n,s=!1)=>{const{borders:r}=Y(i,n);return{border:at(r),shapePath:e,anchors:[...i.points.map((o,a)=>s&&a>0&&a<i.points.length-1?at({x:o[0]-7,y:o[1]-7,width:Qe/t,height:Qe/t}):nt({x:o[0],y:o[1],radius:7/t}))]}},Vt=e=>180e/Math.PI,C1=(e,i)=>{const t=i.x-Math.min(Math.max(i.x,e.x),e.x+e.width),n=i.y-Math.min(Math.max(i.y,e.y),e.y+e.height);return Math.sqrt(tt+nn)<=i.radius},re=({origin:e=[0,0],point:i,rotation:t})=>{const n=[i[0]-e[0],i[1]-e[1]],s=n[1]Math.cos(t)-n[0]Math.sin(t);return[n[1]Math.sin(t)+n[0]Math.cos(t)+e[0],s+e[1]]},w1=e=>(e+2Math.PI)%(2Math.PI),M1=({targetVector:[e,i],radian:t=!0,originVector:n})=>{const s=w1(Math.atan2(i[1]-e[1],i[0]-e[0]));if(n){const[r,o]=n,a=Math.atan2(o[1]-r[1],o[0]-r[0]),l=w1(s-a);return t?l:Vt(l)}return t?s:Vt(s)},st=300,Ht=(e,i)=>{const t={...i};for(const n of e)delete t[n];return t},ne=(e,i,t)=>{const n=Array.isArray(t)?[...t]:{...t},s=Array.isArray(e)?e:typeof e=="string"?e.split("."):[e];return s.reduce((r,o,a)=>(r[o]=Tt(r[o])?{...r[o]}:Array.isArray(r[o])?[...r[o]]:r[o]===void 0\|\|r[o]===null?{}:r[o],a===s.length-1&&(r[o]=i),r[o]),n),n},Tt=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,ve=(e,i,t)=>{if(!Tt(i)\|\|!Tt(t))return t;const n={...i};for(const s in t)t.hasOwnProperty(s)&&(n.hasOwnProperty(s)?n[s]=e(n[s],t[s],s)??ve(e,n[s],t[s]):n[s]=t[s]);return n},k1=(e,i)=>{if(e===i)return!0;if(typeof e!="object"\|\|typeof i!="object"\|\|e===null\|\|i===null)return!1;const t=Object.keys(e),n=Object.keys(i);if(t.length!==n.length)return!1;for(const s of t)if(!n.includes(s)\|\|!k1(e[s],i[s]))return!1;return!0},At={},G=(e="")=>(At[e]\|\|(At[e]=0),`${e}${++At[e]}`),ze=(e,i,t)=>{const n=(s=>{if(s.points.length<1\|\|s.style?.strokeColor==="transparent")return;const r=s.points.flat(),o=r.map(d=>d[0]),a=r.map(d=>d[1]),l=Math.min(...o),h=Math.min(...a),u=new Path2D;for(const d of s.points)if(d.length===1)u.rect(...Pe(d[0],l,h,s.scaleX,s.scaleY),1,1);else{u.moveTo(...Pe(d[0],l,h,s.scaleX,s.scaleY));for(const p of d.slice(1))u.lineTo(...Pe(p,l,h,s.scaleX,s.scaleY))}return u})(e);return{...e,path:n,selection:Ue(n,e,i,t)}},fi=ze,ke=(e,i=2)=>Math.round(e10i)/10i,Pe=(e,i,t,n=1,s=1)=>[i+(e[0]-i)n,t+(e[1]-t)s],I=(e,i,t=0)=>{if(!i)return ke(e);const n=e+t,s=n>=0?Te[i-1]:-Te[i-1];return n+s/2-(n+s/2)%s-t},vi=(e,i,t=0)=>i?e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18):ke(e,3),mi=(e,i,t,n,s,r,o,a,l)=>{switch(r.mode){case"brush":return((h,u,d,p)=>{const v={...h,points:ne(h.points.length-1,[...h.points[h.points.length-1],[Math.round(u[0]),Math.round(u[1])]],h.points)};return ze(v,d,p)})(i,t,l,o);case"translate":return Ft(t,r.originalShape,r.cursorStartPosition,n,l,o);case"rotate":return Ei(i,t,r.originalShape,r.cursorStartPosition,r.center,n);case"resize":return Fi(e,i,t,s,r.originalShape,r,n,o,a,l);default:return i}},Ue=(e,i,t,n)=>{const{borders:s}=Y(i,n);return{border:at(s),shapePath:e,line:jt({points:[[s.x+s.width/2,s.y],[s.x+s.width/2,s.y-23/t]]}),anchors:[nt({x:s.x+s.width/2,y:s.y-23/t,radius:7/t}),..._t.map(r=>nt({x:s.x+s.widthr[0],y:s.y+s.heightr[1],radius:7/t}))]}},j1=({borderStart:e,borderSize:i,vector:t,selectionPadding:n,invertedAxe:s,anchor:r})=>{switch(r){case 0:{if(s){const a=i-2n;return[e+a,t-a]}const o=Math.max(2n,i-t);return[e+i-o,o]}case .5:return[e,i];case 1:if(s){const o=i+t;return[e+o,2n-o]}return[e,Math.max(2n,i+t)];default:return[0,0]}},L1=({borderX:e,borderWidth:i,borderY:t,borderHeight:n,center:s,originalShape:r})=>{const o=[e+i/2-s[0],t+n/2-s[1]],[a,l]=re({point:o,rotation:-r.rotation});return{borderX:ke(e+a-o[0]),borderWidth:ke(i),borderY:ke(t+l-o[1]),borderHeight:ke(n)}},Be=(e,i,t,n,s,r=!1)=>{const{center:o,borders:a}=Y(i,s),l=re({origin:o,point:e,rotation:i.rotation}),h=t.anchor[0]===0&&l[0]>=a.x+a.width\|\|t.anchor[0]===1&&l[0]<=a.x,u=t.anchor[1]===0&&l[1]>=a.y+a.height\|\|t.anchor[1]===1&&l[1]<=a.y,d=[I(l[0],n,t.anchor[0]===0&&!h\|\|t.anchor[0]===1&&h?s:-s),I(l[1],n,t.anchor[1]===0&&!u\|\|t.anchor[1]===1&&u?s:-s)],p=n?[t.anchor[0]===0?a.x:t.anchor[0]===.5?a.x+a.width/2:a.x+a.width,t.anchor[1]===0?a.y:t.anchor[1]===.5?a.y+a.height/2:a.y+a.height]:re({origin:o,point:t.cursorStartPosition,rotation:i.rotation}),v=[d[0]-p[0],d[1]-p[1]],[g,m]=j1({borderStart:a.x,borderSize:a.width,vector:v[0],selectionPadding:s,invertedAxe:h,anchor:t.anchor[0]}),[C,w]=j1({borderStart:a.y,borderSize:a.height,vector:v[1],selectionPadding:s,invertedAxe:u,anchor:t.anchor[1]});if(r){const M=((Q,b,H,T,P,E,N,S,A,k)=>{const O=(b.width-2k\|\|1)/(b.height-2k\|\|1),F=(P-2k)/(N-2k);let x,j,y,V;return A.anchor[0]!==.5&&A.anchor[1]!==.5?F<O?(j=E,V=N,y=(N-2k)O+2k,x=A.anchor[0]===0?b.width-Q[0]>k?b.x+(b.width-y):b.x+b.width-2k:b.width+Q[0]>k?b.x:b.x-y+2k):(x=T,y=P,V=(P-2k)/O+2k,j=A.anchor[1]===0?b.height-Q[1]>k?b.y+(b.height-V):b.y+b.height-2k:b.height+Q[1]>k?b.y:b.y-V+2k):A.anchor[0]!==.5?(x=T,y=P,V=(P-2k)/O+2k,j=b.y+(b.height-V)/2):(j=E,V=N,y=(N-2k)O+2k,x=b.x+(b.width-y)/2),{borderX:x,borderWidth:y,borderY:j,borderHeight:V,center:H,originalShape:S}})(v,a,o,g,m,C,w,i,t,s);return L1(M)}return L1({borderX:g,borderWidth:m,borderY:C,borderHeight:w,center:o,originalShape:i})},ot=(e,i,t)=>{const n=nt(e);return{...e,path:n,selection:Ue(n,e,i,t)}},yi=ot,Pt=(e,i,t,n,s=1)=>{const{clientX:r=0,clientY:o=0}="touches"in e&&e.touches[0]?e.touches[0]:"changedTouches"in e&&e.changedTouches[0]?e.changedTouches[0]:"clientX"in e?e:{},a=i?.getBoundingClientRect()??{left:0,top:0,width:t,height:n};return[(r-a.left)(t/a.width)/s,(o-a.top)(n/a.height)/s]},V1=e=>"touches"in e,Ze=(e,i,[t,n],[s,r])=>re({origin:[t-s,n-r],point:e,rotation:i}),rt=(e,i,t)=>t?C1(e,{x:i[0],y:i[1],radius:t}):((n,s)=>s[0]>=n.x&&s[0]<=n.x+n.width&&s[1]>=n.y&&s[1]<=n.y+n.height)(e,i),Ke=(e,i,t,n,s,r=!1,o=0)=>{if(e.locked)return!1;const{borders:a,center:l}=Y(e,n),h=Ze(i,e.rotation,l,t);if(r)if(e.type==="line"\|\|e.type==="polygon"\|\|e.type==="curve"){for(let u=0;u<e.points.length;u++)if(rt({x:e.points[u][0]-7/s,y:e.points[u][1]-7/s,width:Qe/s,height:Qe/s},h,o))return{mode:"resize",anchor:u}}else{if(rt({x:a.x+a.width/2-7/s,y:a.y-Qe/s-16/s,width:Qe/s,height:Qe/s},h,o))return{mode:"rotate"};for(const u of _t)if(rt({x:a.x+a.widthu[0]-7/s,y:a.y+a.heightu[1]-7/s,width:Qe/s,height:Qe/s},h,o))return{mode:"resize",anchor:u}}return!!rt(a,h,o)&&{mode:"translate"}},H1=(e,i,t,n,s,r)=>{if(i.locked)return!1;const{center:o}=Y(i,s),a=Ze(t,i.rotation,o,n);return"path"in i&&i.path?i.style?.fillColor&&i.style?.fillColor!=="transparent"?!!e.isPointInPath(i.path,a[0],a[1])&&{mode:"translate"}:(e.lineWidth=(i.style?.lineWidth??0)+15,!!e.isPointInStroke(i.path,a[0],a[1])&&{mode:"translate"}):Ke(i,t,n,s,r,!1)};function T1(e,i){const t=Math.max(e.x,i.x),n=Math.max(e.y,i.y),s=Math.min(e.x+(e.width\|\|1),i.x+(i.width\|\|1)),r=Math.min(e.y+(e.height\|\|1),i.y+(i.height\|\|1));if(t<s&&n<r)return{x:t,y:n,width:s-t,height:r-n}}const A1=({ctx:e,path:i,rect:t,offset:n,checkFill:s})=>{for(let r=0;r<n;r+=n/2)for(let o=0;o<n;o+=n/2)for(let a=r+t.x;a<t.x+t.width;a+=n)for(let l=o+t.y;l<t.y+t.height;l+=n)if(s?e.isPointInPath(i,a,l):e.isPointInStroke(i,a,l))return!0;return!1},Xe=(e,i,t)=>{const n=(s=>{if(s.points.length<1)return;const r=new Path2D;r.moveTo(...s.points[0]);for(const o of s.points.slice(1))r.lineTo(...o);return r.lineTo(...s.points[0]),r})(e);return{...e,path:n,selection:Lt(n,e,i,t)}},Qi=Xe,P1=(e,i)=>{const t=Math.min(...e.points.map(r=>r[0]))-i,n=Math.max(...e.points.map(r=>r[0]))+i,s=Math.min(...e.points.map(r=>r[1]))-i;return{x:t,width:n-t,y:s,height:Math.max(...e.points.map(r=>r[1]))+i-s}},Ye=(e,i,t)=>{const n=(s=>{if(s.points.length<3)return;const r=new Path2D;r.moveTo(...s.points[0]);for(let o=1;o<s.points.length-1;o++)r.quadraticCurveTo(...s.points[o],s.points.length-2===o?s.points[o+1][0]:(s.points[o+1][0]-s.points[o][0])/2+s.points[o][0],s.points.length-2===o?s.points[o+1][1]:(s.points[o+1][1]-s.points[o][1])/2+s.points[o][1]);return r})(e);return{...e,path:n,selection:Lt(n,e,i,t,!0)}},xi=Ye,bi=P1,lt=(e,i,t)=>{const n=(s=>{const r=new Path2D;return r.ellipse(s.x,s.y,s.radiusX,s.radiusY,0,0,2Math.PI),r})(e);return{...e,path:n,selection:Ue(n,e,i,t)}},Si=lt,Z1=e=>{return t={...e,type:"triangle"},{...t,path:gi(t)};var t},Ci=(e,i)=>{e.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&e.fill(i.path),i.style?.strokeColor!=="transparent"&&e.stroke(i.path))},ct=(e,i,t)=>{const n=[];let s;if(e.style?.lineArrow===1\|\|e.style?.lineArrow===2\|\|e.style?.lineArrow===3){const r=Math.PI/2-M1({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3\|\|n.push(Z1(E1(e.points[0],r,e.style))),e.style?.lineArrow!==2&&e.style?.lineArrow!==3\|\|n.push(Z1(E1(e.points[1],r+Math.PI,e.style)));const o=(({line:a,size:l,direction:h})=>{const u=Math.PI/2-M1({targetVector:[a.points[0],a.points[1]]}),d=[a.points[0][0]+(a.points[1][0]-a.points[0][0])/2,a.points[0][1]+(a.points[1][1]-a.points[0][1])/2];let p,v;if(["start","both"].includes(h)){const g=re({point:a.points[0],origin:d,rotation:-u});p=re({point:[g[0],g[1]+l],origin:d,rotation:u})}else p=[...a.points[0]];if(["end","both"].includes(h)){const g=re({point:a.points[1],origin:d,rotation:-u});v=re({point:[g[0],g[1]-l],origin:d,rotation:u})}else v=[...a.points[1]];return{points:[p,v]}})({line:e,size:10+2(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});s=jt(o)}else s=jt(e);return{...e,path:s,selection:Lt(s,e,i,t),arrows:n,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"}}},wi=ct,E1=(e,i,t)=>{const n=[re({point:[0,0],rotation:i}),re({point:[-(5+(t.lineWidth??0)),10+2(t.lineWidth??0)],rotation:i}),re({point:[5+(t.lineWidth??0),10+2(t.lineWidth??0)],rotation:i})];return{points:[[e[0]+n[0][0],e[1]+n[0][1]],[e[0]+n[1][0],e[1]+n[1][1]],[e[0]+n[2][0],e[1]+n[2][1]]],style:{...t,fillColor:t.strokeColor,strokeColor:"transparent"}}},dt=e=>e.filter(i=>i!=null),Mi=e=>{const i=["img","id","selection","path","arrows"];return e.map(t=>t.type!=="picture"\|\|t.src.startsWith("http")?Ht(i,t):Ht(i,{...t,src:ki(t.img)}))},F1=(e,i,t)=>({shapes:Mi(e),config:{width:i,height:t}}),R1=(e,i,t)=>et({...e,id:G(`${e.type}_`)},i,t),N1=e=>{const i=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0],t=i.getAttribute("width"),n=i.getAttribute("height");let s;if(t\|\|n)s=e;else{const o=i.getAttribute("viewBox")??"0 0 300 300",[,,a,l]=o.split(" ");i.setAttribute("width",a??st),i.setAttribute("height",l??st),s=new XMLSerializer().serializeToString(i)}const r=new Blob([s],{type:"image/svg+xml"});return URL.createObjectURL(r)},D1=e=>(e instanceof File?e.name:e).includes(".svg"),I1=e=>D1(e)?fetch(e).then(i=>i.text()).then(i=>N1(i)):fetch(e).then(i=>i.blob()).then(i=>URL.createObjectURL(i)),W1=(e,i)=>{const t=document.createElement("a");t.href=e,t.download=i,document.body.appendChild(t),t.click(),document.body.removeChild(t)},ki=e=>{const i=document.createElement("canvas");i.width=e.width,i.height=e.height;const t=i.getContext("2d");return t?(t.drawImage(e,0,0),i.toDataURL("image/png")):""},$1=(e,i,t,n,s)=>{const r=document.createElement("canvas");r.width=t,r.height=n;const o=r.getContext("2d");if(!o)return"";o.clearRect(0,0,t,n),S1(o);for(let a=e.length-1;a>=0;a--)X1(o,e[a],1,i,s);return r.toDataURL("image/png")},ji=(e,i,t)=>{return s=F1(e,i,t),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(s))}`;var s},ut=(e,i,t)=>{const n=at(e);return{...e,path:n,selection:Ue(n,e,i,t)}},Li=ut,Vi=(e,i)=>{e.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&e.fill(i.path),i.style?.strokeColor!=="transparent"&&e.stroke(i.path))},O1=(e,i)=>({x:e.x-i,width:e.width+2i,y:e.y-i,height:e.height+2i}),z1=(e,i,t,n,[s,r]=[!1,!1])=>((o,a,[l,h],[u,d])=>re({origin:[l-u,h-d],point:o,rotation:-a}))([e[0]===.5?t.x+t.width/2:e[0]===0?t.x+(s?0:t.width):t.x+(s?t.width:0),e[1]===.5?t.y+t.height/2:e[1]===0?t.y+(r?0:t.height):t.y+(r?t.height:0)],t.rotation,i,n),ht=(e,i,t)=>({...e,selection:Ue(void 0,e,i,t)}),Hi=ht,U1=(e,i,t,n,s,r)=>{const[o,a]=((l,h,u,d,p=!1)=>{if(!(l&&h&&d&&u))return[st,st];const v=l/h;if(v>u/d){const m=p?u:Math.min(l,u);return[m,m/v]}const g=p?d:Math.min(h,d);return[gv,g]})(e.width,e.height,t,n,!0);return ht({toolId:St.id,type:"picture",id:G("picture_"),x:(t-o)/2,y:(n-a)/2,width:o,height:a,src:i,img:e,rotation:0},s,r)},Ti=(e,i,t,n,s)=>new Promise((r,o)=>{const a=new Image;a.onerror=()=>{o(new Error("Some images could not be loaded"))},setTimeout(()=>{o(new Error("Timeout while loading images"))},4e3),e instanceof File?((l,h,u,d,p,v,g)=>{const m=URL.createObjectURL(u);l.onload=async()=>{if(URL.revokeObjectURL(l.src),D1(u)&&!l.width&&!l.height){const w=await u.text(),M=N1(w);if(m===l.src)return void(l.src=M)}const C=U1(l,l.src,d,p,v,g);h(C)},l.src=m})(a,r,e,i,t,n,s):((l,h,u,d,p,v,g)=>{l.onload=()=>{URL.revokeObjectURL(l.src);const m=U1(l,u,d,p,v,g);h(m)},I1(u).then(m=>{l.src=m}).catch(()=>{l.src=""})})(a,r,e,i,t,n,s)}),Zt=["Texte"],pt=(e,i,t)=>({...e,selection:Ue(void 0,e,i,t)}),Ai=pt,Et=(e,i,t,n,s,r=Je)=>{e.font=`${s?"italic":""} ${n?"bold":""} 1px ${r}`;const o=i.map(a=>t/e.measureText(a).width);return Math.min(...o)\|\|36},Pi=(e,i,t,n,s)=>{const r={...i,value:t},o=((m,C,w,M,Q,b=Je)=>{m.font=`${Q?"italic":""} ${M?"bold":""} ${w}px ${b}`;const H=C.map(T=>m.measureText(T).width);return Math.max(...H)\|\|20})(e,r.value,r.fontSize,r.style?.fontBold??!1,r.style?.fontItalic??!1,r.style?.fontFamily),a=r.fontSizer.value.length,l={...r,width:o,height:a},{center:h}=Y(i,n),{center:u}=Y(l,n),[d,p]=z1([1,1],h,i,s),[v,g]=z1([1,1],u,l,s,[!1,!1]);return{...l,x:l.x-(v-d),y:l.y-(g-p)}},B1=(e,i,t,n,s,r)=>{const o=[I(t[0],n),I(t[1],n)];switch(i.type){case"brush":return((a,l,h,u)=>ze({toolId:a.id,type:a.type,id:G(`${a.type}_`),points:[[l]],rotation:0,scaleX:1,scaleY:1,style:{opacity:a.settings.opacity.default,strokeColor:a.settings.strokeColor.default,lineWidth:a.settings.lineWidth.default,lineDash:a.settings.lineDash.default}},h,u))(i,o,s,r);case"line":return((a,l,h,u)=>{const d={toolId:a.id,type:a.type,id:G(`${a.type}_`),points:[l,l],rotation:0,style:{opacity:a.settings.opacity.default,strokeColor:a.settings.strokeColor.default,lineWidth:a.settings.lineWidth.default,lineDash:a.settings.lineDash.default,lineArrow:a.settings.lineArrow.default}};return ct(d,h,u)})(i,o,s,r);case"polygon":return((a,l,h,u)=>Xe({toolId:a.id,type:a.type,id:G(`${a.type}_`),points:new Array(a.settings.pointsCount.default).fill(l),rotation:0,style:{opacity:a.settings.opacity.default,fillColor:a.settings.fillColor.default,strokeColor:a.settings.strokeColor.default,lineWidth:a.settings.lineWidth.default,lineDash:a.settings.lineDash.default,pointsCount:a.settings.pointsCount.default}},h,u))(i,o,s,r);case"curve":return((a,l,h,u)=>Ye({toolId:a.id,type:a.type,id:G(`${a.type}_`),points:new Array(a.settings.pointsCount.default).fill(l),rotation:0,style:{opacity:a.settings.opacity.default,fillColor:a.settings.fillColor.default,strokeColor:a.settings.strokeColor.default,lineWidth:a.settings.lineWidth.default,lineDash:a.settings.lineDash.default,pointsCount:a.settings.pointsCount.default}},h,u))(i,o,s,r);case"rect":case"square":return((a,l,h,u,d=0,p=0)=>{const v={toolId:a.id,type:a.type,id:G(`${a.type}_`),x:l[0],y:l[1],width:d,height:p,rotation:0,style:{opacity:a.settings.opacity.default,fillColor:a.settings.fillColor.default,strokeColor:a.settings.strokeColor.default,lineWidth:a.settings.lineWidth.default,lineDash:a.settings.lineDash.default}};return ut(v,h,u)})(i,o,s,r);case"text":return((a,l,h,u,d)=>{const p=Et(a,Zt,50,l.settings?.fontBold.default??!1,l.settings?.fontItalic.default??!1,l.settings.fontFamily.default);return pt({toolId:l.id,type:l.type,id:G(`${l.type}_`),x:h[0],y:h[1],value:Zt,fontSize:p,width:50,height:p(Zt.length\|\|1),rotation:0,style:{opacity:l.settings.opacity.default,strokeColor:l.settings.strokeColor.default,fontFamily:l.settings.fontFamily.default,fontItalic:l.settings.fontItalic.default,fontBold:l.settings.fontBold.default}},u,d)})(e,i,o,s,r);case"ellipse":return((a,l,h,u)=>lt({toolId:a.id,type:a.type,id:G(`${a.type}_`),x:l[0],y:l[1],radiusX:0,radiusY:0,rotation:0,style:{opacity:a.settings.opacity.default,fillColor:a.settings.fillColor.default,strokeColor:a.settings.strokeColor.default,lineWidth:a.settings.lineWidth.default,lineDash:a.settings.lineDash.default}},h,u))(i,o,s,r);case"circle":return((a,l,h,u)=>ot({toolId:a.id,type:a.type,id:G(`${a.type}_`),x:l[0],y:l[1],radius:0,rotation:0,style:{opacity:a.settings.opacity.default,fillColor:a.settings.fillColor.default,strokeColor:a.settings.strokeColor.default,lineWidth:a.settings.lineWidth.default,lineDash:a.settings.lineDash.default}},h,u))(i,o,s,r)}},X1=(e,i,t,n,s)=>{if(i.visible===!1)return;const{center:r}=Y(i,s);switch(kt(e,t,n,i.rotation,r),Ae(e,i.style),i.type){case"brush":((o,a)=>{a.points.length<1\|\|!a.path\|\|o.globalAlpha!==0&&a.style?.strokeColor!=="transparent"&&o.globalAlpha!==0&&o.stroke(a.path)})(e,i);break;case"text":((o,a)=>{if(o.globalAlpha!==0&&a.style?.strokeColor&&a.style.strokeColor!=="transparent"){o.font=`${a.style?.fontItalic?"italic":""} ${a.style?.fontBold?"bold":""} ${a.fontSize}px ${a.style?.fontFamily??Je}`,o.textBaseline="top",o.fillStyle=a.style.strokeColor;for(let l=0;l<a.value.length;l++)o.fillText(a.value[l],a.x,a.y+la.fontSize,a.width)}})(e,i);break;case"line":((o,a)=>{if(o.globalAlpha!==0&&a.path){a.style?.fillColor!=="transparent"&&o.fill(a.path),a.style?.strokeColor!=="transparent"&&o.stroke(a.path);for(const l of a.arrows??[])Ae(o,l.style),Ci(o,l)}})(e,i);break;case"polygon":((o,a)=>{a.path&&o.globalAlpha!==0&&(a.style?.fillColor!=="transparent"&&o.fill(a.path),a.style?.strokeColor!=="transparent"&&o.stroke(a.path))})(e,i);break;case"curve":((o,a)=>{a.path&&o.globalAlpha!==0&&(a.style?.fillColor!=="transparent"&&o.fill(a.path),a.style?.strokeColor!=="transparent"&&o.stroke(a.path))})(e,i);break;case"circle":((o,a)=>{o.globalAlpha!==0&&a.path&&(a.style?.fillColor!=="transparent"&&o.fill(a.path),a.style?.strokeColor!=="transparent"&&o.stroke(a.path))})(e,i);break;case"ellipse":((o,a)=>{o.globalAlpha!==0&&a.path&&(a.style?.fillColor!=="transparent"&&o.fill(a.path),a.style?.strokeColor!=="transparent"&&o.stroke(a.path))})(e,i);break;case"rect":case"square":Vi(e,i);break;case"picture":((o,a)=>{o.globalAlpha!==0&&(o.beginPath(),o.drawImage(a.img,a.x,a.y,a.width,a.height))})(e,i)}e.restore()},Zi=(e,i)=>{switch(e.type){case"brush":return((t,n)=>{const s=t.points.flat(),r=Math.min(...s.map(u=>u[0])),o=Math.min(...s.map(u=>u[1])),a=s.map(u=>Pe(u,r,o,t.scaleX,t.scaleY)),l=Math.max(...a.map(u=>u[0]))+n,h=Math.max(...a.map(u=>u[1]))+n;return{x:r-n,width:l-r+n,y:o-n,height:h-o+n}})(e,i);case"line":return((t,n)=>({x:Math.min(t.points[0][0],t.points[1][0])-n,width:Math.abs(t.points[0][0]-t.points[1][0])+2n,y:Math.min(t.points[0][1],t.points[1][1])-n,height:Math.abs(t.points[0][1]-t.points[1][1])+2n}))(e,i);case"polygon":return P1(e,i);case"curve":return bi(e,i);case"circle":return((t,n)=>({x:t.x-t.radius-n,width:2(t.radius+n),y:t.y-t.radius-n,height:2(t.radius+n)}))(e,i);case"ellipse":return((t,n)=>({x:t.x-t.radiusX-n,width:2(t.radiusX+n),y:t.y-t.radiusY-n,height:2(t.radiusY+n)}))(e,i);case"rect":case"square":return O1(e,i);case"text":return((t,n)=>({x:t.x-n,width:t.width+2n,y:t.y-n,height:t.height+2n}))(e,i);case"picture":return((t,n)=>O1(t,n))(e,i);default:return{x:0,y:0,width:100,height:100}}},Y=(e,i)=>{const t=Zi(e,i),n=(s=>[s.x+s.width/2,s.y+s.height/2])(t);return{borders:t,center:n}},Ei=(e,i,t,n,s,r)=>{const o=s[0]-n[0],a=s[1]-n[1],l=s[0]-i[0],h=s[1]-i[1],u=t.rotation+Math.atan2(h,l)-Math.atan2(a,o);return{...e,rotation:vi(u,r)}},Fi=(e,i,t,n,s,r,o,a,l,h)=>{switch(s.type){case"line":return((u,d,p,v,g,m,C)=>{const w=[I(u[0],g),I(u[1],g)],{center:M}=Y(p,m),Q=Ze(w,p.rotation,M,d),b=ne(["points",v.anchor],Q,p);return ct(b,C,m)})(t,n,s,r,o,a,h);case"polygon":return((u,d,p,v,g,m,C)=>{const w=[I(u[0],g),I(u[1],g)],{center:M}=Y(p,m),Q=Ze(w,p.rotation,M,d),b=ne(["points",v.anchor],Q,p);return Xe(b,C,m)})(t,n,s,r,o,a,h);case"curve":return((u,d,p,v,g,m,C)=>{const w=[I(u[0],g),I(u[1],g)],{center:M}=Y(p,m),Q=Ze(w,p.rotation,M,d),b=ne(["points",v.anchor],Q,p);return Ye(b,C,m)})(t,n,s,r,o,a,h);case"brush":return((u,d,p,v,g,m,C)=>{const{borders:w}=Y({...d,scaleX:1,scaleY:1},g),{borders:M}=Y(d,g),{borderX:Q,borderHeight:b,borderY:H,borderWidth:T}=Be(u,d,p,v,g,C),P=Math.max(0,w.width-2g),E=Math.max(0,w.height-2g),N=Math.max(0,T-2g),S=Math.max(0,b-2g),A=P?N/P:1,k=E?S/E:1;if(!P\|\|!E)return d;const O=ke(Q-M.x),F=ke(H-M.y);return ze({...d,points:d.points.map(x=>x.map(([j,y])=>[j+O,y+F])),scaleX:A,scaleY:k},m,g)})(t,s,r,o,a,h,l);case"circle":return((u,d,p,v,g,m)=>{const{borderX:C,borderHeight:w,borderY:M,borderWidth:Q}=Be(u,d,p,v,g,!0);return ot({...d,radius:Math.max(0,Q/2-g),x:C+Q/2,y:M+w/2},m,g)})(t,s,r,o,a,h);case"ellipse":return((u,d,p,v,g,m,C=!1)=>{const{borderX:w,borderHeight:M,borderY:Q,borderWidth:b}=Be(u,d,p,v,g,C);return lt({...d,radiusX:Math.max(0,b/2-g),radiusY:Math.max(0,M/2-g),x:w+b/2,y:Q+M/2},m,g)})(t,s,r,o,a,h,l);case"rect":case"square":return((u,d,p,v,g,m,C=!1)=>{const{borderX:w,borderHeight:M,borderY:Q,borderWidth:b}=Be(u,d,p,v,g,C);return ut({...d,width:Math.max(0,b-2g),height:Math.max(0,M-2g),x:w+g,y:Q+g},m,g)})(t,s,r,o,a,h,i.type==="square"\|\|l);case"text":return((u,d,p,v,g,m,C)=>{const{borderX:w,borderHeight:M,borderY:Q,borderWidth:b}=Be(d,p,v,g,m,!0),H=pt({...p,width:Math.max(0,b-2m),height:Math.max(0,M-2m),x:w+m,y:Q+m},C,m);return{...H,fontSize:Et(u,H.value,H.width,H.style?.fontBold??!1,H.style?.fontItalic??!1,H.style?.fontFamily)}})(e,t,s,r,o,a,h);case"picture":return((u,d,p,v,g,m,C)=>{const{borderX:w,borderHeight:M,borderY:Q,borderWidth:b}=Be(u,d,p,v,g,!0);return ht({...d,width:Math.max(0,b-2g),height:Math.max(0,M-2g),x:w+g,y:Q+g},m,g)})(t,s,r,o,a,h);default:return s}},Ft=(e,i,t,n,s,r)=>{switch(i.type){case"rect":case"square":return((o,a,l,h,u,d)=>ut({...a,x:I(a.x+o[0]-l[0],h),y:I(a.y+o[1]-l[1],h)},u,d))(e,i,t,n,s,r);case"ellipse":return((o,a,l,h,u,d)=>lt({...a,x:I(a.x+o[0]-l[0],h),y:I(a.y+o[1]-l[1],h)},u,d))(e,i,t,n,s,r);case"circle":return((o,a,l,h,u,d)=>ot({...a,x:I(a.x+o[0]-l[0],h),y:I(a.y+o[1]-l[1],h)},u,d))(e,i,t,n,s,r);case"picture":return((o,a,l,h,u,d)=>ht({...a,x:I(a.x+o[0]-l[0],h),y:I(a.y+o[1]-l[1],h)},u,d))(e,i,t,n,s,r);case"text":return((o,a,l,h,u,d)=>pt({...a,x:I(a.x+o[0]-l[0],h),y:I(a.y+o[1]-l[1],h)},u,d))(e,i,t,n,s,r);case"line":return((o,a,l,h,u,d)=>ct({...a,points:a.points.map(([p,v])=>[I(p+o[0]-l[0],h),I(v+o[1]-l[1],h)])},u,d))(e,i,t,n,s,r);case"polygon":return((o,a,l,h,u,d)=>{const{borders:p}=Y(a,d);return Xe({...a,points:a.points.map(([v,g])=>h?[v+I(p.x+o[0]-l[0],h)-p.x,g+I(p.y+o[1]-l[1],h)-p.y]:[I(v+o[0]-l[0],h),I(g+o[1]-l[1],h)])},u,d)})(e,i,t,n,s,r);case"curve":return((o,a,l,h,u,d)=>{const{borders:p}=Y(a,d);return Ye({...a,points:a.points.map(([v,g])=>h?[v+I(p.x+o[0]-l[0],h)-p.x,g+I(p.y+o[1]-l[1],h)-p.y]:[I(v+o[0]-l[0],h),I(g+o[1]-l[1],h)])},u,d)})(e,i,t,n,s,r);case"brush":return((o,a,l,h,u,d)=>{const{borders:p}=Y(a,d),v=h?I(p.x+o[0]-l[0],h)-p.x:o[0]-l[0],g=h?I(p.y+o[1]-l[1],h)-p.y:o[1]-l[1];return ze({...a,points:a.points.map(m=>m.map(([C,w])=>[C+v,w+g]))},u,d)})(e,i,t,n,s,r);default:return i}},et=(e,i,t)=>{switch(e.type){case"rect":case"square":return Li(e,i,t);case"ellipse":return Si(e,i,t);case"circle":return yi(e,i,t);case"picture":return Hi(e,i,t);case"text":return Ai(e,i,t);case"line":return wi(e,i,t);case"polygon":return Qi(e,i,t);case"curve":return xi(e,i,t);case"brush":return fi(e,i,t);default:return e}},Y1=({ctx:e,shape:i,currentScale:t=1,canvasOffset:n,selectionPadding:s,selectionWidth:r,selectionColor:o,withAnchors:a=!0})=>{const{center:l}=Y(i,s);switch(kt(e,t,n,i.rotation,l),i.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((h,u,d,p,v,g)=>{if(u.selection&&(Ae(h,{fillColor:"transparent",strokeColor:d,lineWidth:p/v}),u.selection.shapePath?h.stroke(u.selection.shapePath):h.stroke(u.selection.border),g&&!u.locked)){u.selection.shapePath&&h.stroke(u.selection.border),h.stroke(u.selection.line),Ae(h,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/v});for(const m of u.selection.anchors)h.fill(m),h.stroke(m)}})(e,i,o,r,t,a);break;case"polygon":case"line":case"curve":(({ctx:h,shape:u,withAnchors:d,selectionWidth:p,selectionColor:v,currentScale:g=1})=>{if(u.selection&&(Ae(h,{fillColor:"transparent",strokeColor:v,lineWidth:p/g}),u.selection.shapePath&&h.stroke(u.selection.shapePath),d&&!u.locked)){Ae(h,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/g});for(const m of u.selection.anchors)h.fill(m),h.stroke(m)}})({ctx:e,shape:i,withAnchors:a,selectionWidth:r,selectionColor:o,currentScale:t})}e.restore()},Ri=({ctx:e,selectionFrame:i,currentScale:t=1,canvasOffset:n})=>{kt(e,t,n),((s,r,o)=>{Ae(s,{fillColor:"rgba(170,170,170, 0.1)",strokeColor:"rgb(170,170,170)",lineWidth:1/o}),s.fillRect(r[0][0],r[0][1],r[1][0]-r[0][0],r[1][1]-r[0][1]),s.strokeRect(r[0][0],r[0][1],r[1][0]-r[0][0],r[1][1]-r[0][1])})(e,i,t),e.restore()},_1="ArrowUp",q1="ArrowDown",G1="ArrowLeft",J1="ArrowRight",Ni="Delete",Di="Backspace",Ii="Escape",K1="Shift",Wi="z",$i="Z",Oi="y",zi="Y",ei="copy",ti="paste",Ui=({gridFormat:e,isInsideComponent:i,selectedShape:t,isEditingText:n,currentScale:s,selectionPadding:r,setSelectedShape:o,removeShape:a,pasteShape:l,updateShape:h,backwardShape:u,forwardShape:d,setShiftPressed:p})=>{const[v,g]=f.useState(void 0);return f.useEffect(()=>{const m=Q=>{t&&(n\|\|(Q.preventDefault(),g({...t})))},C=Q=>{v&&(n\|\|(Q.preventDefault(),l(((b,H,T,P)=>({...Ft([20,20],b,[0,0],H,T,P),id:G(`${b.type}_`)}))(v,e,s,r))))},w=Q=>{Q.key===K1&&p(!1)},M=Q=>{if(Q.metaKey\|\|Q.ctrlKey){if(Q.key===$i\|\|Q.key===Wi)return Q.preventDefault(),Q.stopPropagation(),void u();if(Q.key===zi\|\|Q.key===Oi)return Q.preventDefault(),Q.stopPropagation(),void d()}if(Q.key===K1)return void p(!0);if(!t)return;if(Q.key===Ii)return void o(void 0);if(n)return;const b={[G1]:[e?-Te[e-1]:-1,0],[J1]:[e?Te[e-1]:1,0],[q1]:[0,e?Te[e-1]:1],[_1]:[0,e?-Te[e-1]:-1]};switch(Q.key){case G1:case J1:case q1:case _1:h(Ft(b[Q.key],t,[0,0],e,s,r));break;case Ni:case Di:a(t)}};if(i)return document.addEventListener("keydown",M),document.addEventListener("keyup",w),document.addEventListener(ei,m),document.addEventListener(ti,C),()=>{document.removeEventListener("keydown",M),document.removeEventListener("keyup",w),document.removeEventListener(ei,m),document.removeEventListener(ti,C)}},[i,r,e,v,n,t,s,h,a,o,l,u,d,p]),{}},Bi=(e,i,t)=>{const n=f.useRef([]),s=f.useRef(e);s.current=e;const[r,o]=f.useState(void 0),[a,l]=f.useState(void 0),[h,u]=f.useState(void 0),[d,p]=f.useState({states:[{shapes:[],selectedShape:void 0}],cursor:0}),v=d.cursor>0,g=d.cursor<d.states.length-1,m=n.current.length>0,C=f.useCallback(()=>{p(x=>k1(x.states[x.cursor].shapes,n.current)?x:{states:[...x.states.slice(0,x.cursor+1),{shapes:n.current,selectedShape:a}],cursor:x.cursor+1})},[a]),w=f.useCallback(x=>{n.current=[x,...n.current]},[]),M=f.useCallback((x,j,y,V,L)=>{if(x.target&&"className"in x.target&&![Q1,x1].includes(x.target.className))return void u(void 0);const W=n.current.find(D=>D.id===a?.id?!!Ke(a,y,V,i,L):!!H1(j,D,y,V,i,L));u(W)},[i,a]),Q=f.useCallback(async(x,j=300,y=300)=>{const V=await Ti(x,j,y,t.scaleRatio,i);return w(V),C(),V},[w,C,t,i]),b=f.useCallback((x,j=!1)=>{n.current=n.current.map(y=>y.id===a?.id?x:y),l(y=>y?.id===x.id?x:y),j&&C()},[a,C]),H=f.useCallback(x=>{const j=x.map(y=>Ht(["chosen"],y));n.current=j,C()},[C]),T=f.useCallback(x=>{l(j=>j?.id===x.id?void 0:j),n.current=n.current.filter(j=>j.id!==x.id),C()},[C]),P=f.useCallback(x=>{p(j=>{const y=x(j);return n.current=j.states[y].shapes,l(j.states[y].selectedShape),ne("cursor",y,j)})},[]),E=f.useCallback(()=>{P(x=>Math.max(0,x.cursor-1))},[P]),N=f.useCallback(()=>{P(x=>Math.min(x.states.length-1,x.cursor+1))},[P]),S=f.useCallback((x=[],j=!1)=>{l(void 0),n.current=x,p(y=>j?{states:[{shapes:x,selectedShape:void 0}],cursor:0}:{states:[...y.states.slice(0,y.cursor+1),{shapes:x,selectedShape:void 0}],cursor:y.cursor+1})},[]),A=f.useCallback((x,j)=>{const y=n.current,V=y.findIndex(W=>W.id===x),L=y.findIndex(W=>W.id===j);H(V<L?[...y.slice(0,V),...y.slice(V+1,L+1),y[V],...y.slice(L+1,y.length)]:[...y.slice(0,L),y[V],...y.slice(L,V),...y.slice(V+1,y.length)])},[H]),k=f.useCallback(x=>{const j=n.current,y=j.findIndex(L=>L.id===x.id);if(y<0)return;const V=ne("visible",x.visible===!1,x);l(L=>L?.id===V.id?V:L),H(ne(y,V,j))},[H]),O=f.useCallback(x=>{const j=n.current,y=j.findIndex(L=>L.id===x.id);if(y<0)return;const V=ne("locked",!x.locked,x);l(L=>L?.id===V.id?V:L),H(ne(y,V,j))},[H]);f.useEffect(()=>{s.current?.()},[d]),f.useEffect(()=>{n.current=n.current.map(x=>et(x,t.scaleRatio,i)),l(x=>x===void 0?void 0:n.current.find(j=>j.id===x.id))},[t,i]);const F=f.useCallback((x,j,y,V)=>{o(L=>{const W=[L?.[0]??[j[0],j[1]],[j[0],j[1]]],D=n.current.filter(B=>(($,Z,te,ie,ae)=>{const{center:se,borders:oe}=Y(Z,ae),X=Ze(te[0],Z.rotation,se,ie),ce=Ze(te[1],Z.rotation,se,ie),be=Math.round(Math.min(X[0],ce[0])-ae/2),me=Math.round(Math.max(X[0],ce[0])+ae),Se=Math.round(Math.min(X[1],ce[1])-ae/2),je={x:be,y:Se,width:me-be,height:Math.round(Math.max(X[1],ce[1])+ae)-Se},ue=T1(oe,je);if(!ue)return!1;if(oe.width<=1\|\|oe.height<=1\|\|!("path"in Z)\|\|!Z.path)return!0;if($.lineWidth=(Z.style?.lineWidth??0)+10,Z.type==="brush"){const pe=Z.points.flat(),de=Math.min(...pe.map(q=>q[0])),Le=Math.min(...pe.map(q=>q[1]));for(const q of Z.points){if(q.length<1)break;if(q.length<2){const Ce=Pe(q[0],de,Le,Z.scaleX,Z.scaleY);if(C1(ue,{x:Ce[0],y:Ce[1],radius:(Z.style?.lineWidth??1)/2}))return!0}for(let Ce=0;Ce<q.length-1;Ce++){const Fe=Pe(q[Ce],de,Le,Z.scaleX,Z.scaleY),Re=Pe(q[Ce+1],de,Le,Z.scaleX,Z.scaleY),ge=T1({x:Math.min(Fe[0],Re[0]),y:Math.min(Fe[1],Re[1]),width:Math.abs(Fe[0]-Re[0]),height:Math.abs(Fe[1]-Re[1])},je);if(ge){const Ve=new Path2D;if(Ve.moveTo(...Fe),Ve.lineTo(...Re),A1({ctx:$,path:Ve,rect:ge,offset:10,checkFill:!1}))return!0}}}return!1}const Ee=!(!Z.style?.fillColor\|\|Z.style?.fillColor==="transparent");return A1({ctx:$,path:Z.path,rect:ue,offset:10,checkFill:Ee})})(x,B,W,y,i));return l(D?.[0]),W})},[i]);return{shapesRef:n,selectedShape:a,hoveredShape:h,selectionFrame:r,setSelectionFrame:o,refreshSelectedShapes:F,addShape:w,addPictureShape:Q,moveShapes:A,saveShapes:C,setSelectedShape:l,refreshHoveredShape:M,toggleShapeVisibility:k,toggleShapeLock:O,removeShape:T,updateShape:b,backwardShape:E,forwardShape:N,clearShapes:S,canGoBackward:v,canGoForward:g,canClear:m}},Xi="infos",Yi=4e3,_i=()=>{const e=f.useRef([]),[i,t]=f.useState([]);return f.useEffect(()=>()=>{for(const n of e.current)clearTimeout(n)},[]),{snackbarList:i,addSnackbar:({type:n=Xi,duration:s=Yi,text:r})=>{const o={id:G("snackbar_"),duration:s,type:n,text:r};t(a=>[...a,o]),e.current=[...e.current,setTimeout(()=>{return a=o.id,void t(l=>l.filter(h=>h.id!==a));var a},s)]}}},ii=(e,i=!1)=>{const t=(s,r)=>{if(Array.isArray(s))return r},n=e.map(s=>{if(typeof s!="object")return null;switch(s.type){case"brush":return ve(t,l1,s);case"circle":return ve(t,g1,s);case"curve":return ve(t,u1,s);case"ellipse":return ve(t,f1,s);case"line":return ve(t,c1,s);case"polygon":return ve(t,d1,s);case"rect":return ve(t,h1,s);case"square":return ve(t,p1,s);case"text":return ve(t,v1,s)}return null});return dt(i?[...n,St]:n)},qi=(e,i,t,n,s,r,o,a,l)=>{let h=!1;if(r){h=Ke(r,t,s,o,n,!0,a?20:void 0);const d=((p,v,g,m)=>{if(p.mode==="translate")return{mode:"translate",cursorStartPosition:g,originalShape:v};if(p.mode==="rotate"){const{center:C}=Y(v,m);return{mode:"rotate",cursorStartPosition:g,originalShape:v,center:[C[0],C[1]]}}return p.mode==="resize"?{mode:"resize",cursorStartPosition:g,originalShape:v,anchor:p.anchor}:void 0})(h\|\|{mode:"default"},r,t,o);if(d?.mode==="resize"\|\|d?.mode==="rotate")return{shape:r,mode:d}}const u=i.find(d=>d.id===r?.id?!!h:!!H1(e,d,t,s,o,n));return u?{shape:u,mode:{mode:"translate",cursorStartPosition:t,originalShape:u}}:{shape:void 0,mode:{mode:l?"selectionFrame":"default"}}},Gi=({disabled:e=!1,addShape:i,canvasSize:t,drawCanvasRef:n,setActiveTool:s,refreshHoveredShape:r,shapes:o,selectionMode:a,activeTool:l,isInsideComponent:h,setCanvasOffset:u,selectedShape:d,selectionCanvasRef:p,canvasOffsetStartPosition:v,refreshSelectedShapes:g,setSelectedShape:m,setSelectionFrame:C,setCanvasOffsetStartPosition:w,updateSingleShape:M,gridFormat:Q,canvasOffset:b,saveShapes:H,setSelectionMode:T,selectionPadding:P,isShiftPressed:E,withFrameSelection:N})=>{const{width:S,height:A,scaleRatio:k}=t,[O,F]=f.useState({mode:"default"}),{registerDoubleClickEvent:x,unRegisterDoubleClickEvent:j}=(()=>{const y=f.useRef(void 0),V=f.useRef(void 0),L=W=>{const D=new Date().getTime();y.current&&D<y.current+300&&V.current?.(W),y.current=new Date().getTime()};return{registerDoubleClickEvent:(W,D)=>{V.current=D,W.addEventListener("click",L),W.addEventListener("touchend",L)},unRegisterDoubleClickEvent:W=>{W.removeEventListener("click",L),W.removeEventListener("touchend",L)}}})();return f.useEffect(()=>{const y=V=>window.requestAnimationFrame(()=>((L,W,D,B,$,Z,te,ie,ae,se,oe,X,ce,be,me,Se,je,ue,Ee)=>{const pe=W.current?.getContext("2d");if(!pe)return;const de=Pt(L,W.current,ae,se,oe);if(D.type!=="move"\|\|ie===void 0)if(te.mode!=="selectionFrame"){if(V1(L)\|\|ce(L,pe,de,$,oe),Z!==void 0&&!Z.locked)if(te.mode==="default"\|\|te.mode==="textedition")X(Ke(Z,de,$,ue,oe,!0)\|\|{mode:"default"});else{const Le=W.current?.getContext("2d");if(!Le)return;const q=mi(Le,Z,de,B,$,te,ue,Ee,oe);be(q),Se(q)}}else je(pe,de,$,oe);else me([de[0]-ie[0],de[1]-ie[1]])})(V,p,l,Q,b,d,a,v,S,A,k,F,r,M,u,m,g,P,E));if(h)return document.addEventListener("mousemove",y),document.addEventListener("touchmove",y),()=>{document.removeEventListener("mousemove",y),document.removeEventListener("touchmove",y)}},[h,p,d,a,Q,b,v,S,A,k,M,l,u,m,r,g,P,E]),f.useEffect(()=>{const y=()=>{a.mode!=="textedition"&&a.mode!=="default"&&(T({mode:"default"}),C(void 0),H())};return h&&(document.addEventListener("mouseup",y),document.addEventListener("touchend",y)),()=>{h&&(document.removeEventListener("mouseup",y),document.removeEventListener("touchend",y))}},[h,a,H,C,T]),f.useEffect(()=>{const y=p.current;if(!y)return;const V=y.getContext("2d");if(!V\|\|e)return;const L=W=>{W.preventDefault();const D=Pt(W,p.current,S,A,k);if(l.type==="selection"){const{shape:B,mode:$}=qi(V,o,D,k,b,d,P,V1(W),N);m(B),T($),$.mode==="selectionFrame"&&C([[D[0],D[1]],[D[0],D[1]]])}else if(l.type==="move")w(D);else if(qt.some(B=>B===l.type)){const B=n.current?.getContext("2d");if(!B)return;if(l.type==="brush"){if(d&&d.type==="brush"){const $=((Z,te,ie,ae)=>{const se={...Z,points:ne(Z.points.length,[[Math.round(te[0]),Math.round(te[1])]],Z.points)};return ze(se,ie,ae)})(d,D,k,P);M($),m($)}else{const $=B1(B,l,D,Q,k,P);if(!$)return;i($),m($)}T({mode:"brush"})}else if(l.type!=="picture"){const $=B1(B,l,D,Q,k,P);i($),s(xe),m($),T({mode:"resize",cursorStartPosition:[D[0]+P,D[1]+P],originalShape:$,anchor:l.type==="line"\|\|l.type==="polygon"\|\|l.type==="curve"?0:[1,1]})}}};return y.addEventListener("mousedown",L,{passive:!1}),y.addEventListener("touchstart",L,{passive:!1}),()=>{y.removeEventListener("mousedown",L),y.removeEventListener("touchstart",L)}},[e,p,n,d,l,b,w,o,S,A,k,M,i,s,m,T,C,P,Q,N]),f.useEffect(()=>{const y=p.current;if(y)return h?(x(y,V=>{if(l.type==="selection"&&d?.type==="text"){const L=Pt(V,p.current,S,A,k);Ke(d,L,b,P,k)&&T({mode:"textedition",defaultValue:d.value})}}),()=>{j(y)}):void 0},[x,j,h,p,l,d,S,A,k,b,T,P]),{hoverMode:O}},Ji=/(<([^>]+)>)/gi,Ki=/<(\/)?div(\/?\s?)>/gi,ea=e=>{const i=(t=>{const n=document.createElement("textarea");return n.innerHTML=t,n.value})(e).split("<div>").flatMap(t=>{const n=t.replaceAll(Ki,"");return n===""?void 0:n.replaceAll(Ji,"")});return dt(i)},ta=({disabled:e=!1,scaleRatio:i,shape:t,defaultValue:n,updateValue:s,saveShapes:r,selectionPadding:o})=>{const a=f.useRef(null),l=f.useRef(r);f.useEffect(()=>{if(!a.current)return;const u=a.current,d=p=>{p.preventDefault();const v=p.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,v)};return u.addEventListener("paste",d),u.innerHTML=n.map(p=>`<div>${p===""?"<br/>":p}</div>`).join(""),u.focus(),()=>{u.removeEventListener("paste",d)}},[n]),f.useEffect(()=>{const u=l.current;return()=>{u()}},[]);const h=f.useMemo(()=>{const{borders:u,center:d}=Y(t,o);return re({point:[u.x,u.y],rotation:-t.rotation,origin:d})},[t,o]);return c.jsx("div",{className:"react-paint-editor-toolbox-edittextbox",ref:a,"data-fontbold":t.style?.fontBold??!1,"data-fontitalic":t.style?.fontItalic??!1,contentEditable:!e,onInput:u=>{s(ea(u.target.innerHTML))},style:{"--react-paint-editor-toolbox-edittextbox-transform":`translate3D(${h[0]i}px, ${h[1]i}px, 0) rotate(${Vt(t.rotation)}deg)`,"--react-paint-editor-toolbox-edittextbox-fontsize":t.fontSizei+"px","--react-paint-editor-toolbox-edittextbox-padding":oi+"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}})},ia=(e,i,t,n,s,r,o,a)=>{const{width:l,height:h,scaleRatio:u}=t;e.clearRect(0,0,l,h),S1(e),n&&((d,p,v,g,m,C)=>{d.strokeStyle="rgb(220,220,220)",d.lineWidth=1,d.save(),d.scale(g,g),d.beginPath();const w=Te[C-1],M=-m[0]%w,Q=-m[1]%w,b=Math.ceil(p/g/w),H=Math.ceil(v/g/w);for(let T=0;T<b;T++)d.moveTo(M+(T+1)w,Q),d.lineTo(M+(T+1)w,Q+v/g);for(let T=0;T<H;T++)d.moveTo(M,Q+(T+1)w),d.lineTo(M+p/g,Q+(T+1)w);d.stroke(),d.restore()})(e,l,h,u,s,n);for(let d=r.length-1;d>=0;d--)i.mode==="textedition"&&r[d]===a\|\|X1(e,r[d],u,s,o)},aa=f.forwardRef(({gridFormat:e,canGrow:i,disabled:t=!1,canvasSize:n,shapes:s,addShape:r,updateSingleShape:o,selectedShape:a,setSelectedShape:l,setSelectionFrame:h,hoveredShape:u,selectionFrame:d,refreshHoveredShape:p,refreshSelectedShapes:v,saveShapes:g,activeTool:m,setActiveTool:C,canvasOffsetStartPosition:w,setCanvasOffsetStartPosition:M,canvasOffset:Q,setCanvasOffset:b,isInsideComponent:H,selectionMode:T,setSelectionMode:P,selectionWidth:E,selectionColor:N,selectionPadding:S,isEditMode:A,isShiftPressed:k,withFrameSelection:O,withSkeleton:F},x)=>{const j=f.useRef(null),y=f.useRef(null);f.useImperativeHandle(x,()=>j.current);const{hoverMode:V}=Gi({disabled:t,addShape:r,canvasSize:n,drawCanvasRef:j,setActiveTool:C,shapes:s,selectionMode:T,activeTool:m,isInsideComponent:H,setCanvasOffset:b,selectedShape:a,selectionCanvasRef:y,canvasOffsetStartPosition:w,setSelectedShape:l,setSelectionFrame:h,refreshHoveredShape:p,refreshSelectedShapes:v,setCanvasOffsetStartPosition:M,updateSingleShape:o,gridFormat:e,canvasOffset:Q,saveShapes:g,setSelectionMode:P,selectionPadding:S,isShiftPressed:k,withFrameSelection:O}),{scaleRatio:L}=n,W=f.useCallback(D=>{if(a?.type!=="text")return;const B=j.current?.getContext("2d");if(!B)return;const $=et(Pi(B,a,D,S,Q),L,S);o($)},[o,a,Q,L,S]);return f.useEffect(()=>{const D=j.current?.getContext("2d");D&&window.requestAnimationFrame(()=>ia(D,T,n,e,Q,s,S,a))},[s,e,T,a,Q,n,S]),f.useEffect(()=>{const D=y.current?.getContext("2d");D&&window.requestAnimationFrame(()=>((B,$,Z,te,ie,ae,se,oe,X,ce,be,me)=>{const{width:Se,height:je,scaleRatio:ue}=Z;B.clearRect(0,0,Se,je),me&&ce&&ce.id!==X?.id&&te.type==="selection"&&$.mode==="default"&&Y1({ctx:B,shape:ce,currentScale:ue,canvasOffset:ie,selectionPadding:ae,selectionWidth:se,selectionColor:oe,withAnchors:!1}),X&&te.type!=="brush"&&Y1({ctx:B,shape:X,currentScale:ue,canvasOffset:ie,selectionPadding:ae,selectionWidth:se,selectionColor:oe,withAnchors:$.mode!=="textedition"}),be&&Ri({ctx:B,selectionFrame:be,currentScale:ue,canvasOffset:ie})})(D,T,n,m,Q,S,E,N,a,u,d,F))},[u,d,T,a,m,Q,n,S,E,N,F]),c.jsx("div",{className:"react-paint-editor-canvas-box",children:c.jsxs("div",{className:"react-paint-editor-canvas-container","data-grow":i,children:[c.jsx("canvas",{className:Q1,ref:j,"data-grow":i,width:n.width,height:n.height}),A&&c.jsx("canvas",{className:x1,ref:y,width:n.width,height:n.height,"data-grow":i,style:{"--react-paint-editor-canvas-cursor":m.type!=="selection"&&m.type!=="move"\|\|V.mode==="resize"?"crosshair":m.type==="move"\|\|V.mode==="translate"?"move":V.mode==="rotate"?"grab":"default"}}),A&&T.mode==="textedition"&&a?.type==="text"&&c.jsx(ta,{scaleRatio:n.scaleRatio,disabled:t,shape:a,defaultValue:T.defaultValue,updateValue:W,saveShapes:g,selectionPadding:S})]})})}),na=({type:e,text:i,duration:t})=>{const[n,s]=f.useState(!1);return f.useEffect(()=>{const r=setTimeout(()=>{s(!0)},100),o=setTimeout(()=>{s(!1)},t-500-100);return()=>{clearTimeout(r),clearTimeout(o)}},[t]),c.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+n,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:i})},sa=({snackbarList:e})=>c.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":mt},children:e.map(i=>c.jsx(na,{...i},i.id))}),U=f.forwardRef((e,i)=>{if(e.type==="file"\|\|e.type==="color"){const{hidden:u=!1,disabled:d=!1,selected:p=!1,icon:v,children:g,className:m="",title:C,onClick:w,...M}=e;return c.jsxs("label",{className:`react-paint-editor-button ${m}`,title:C,onClick:w,"data-disabled":+d,"data-selected":+p,"data-hidden":+u,children:[c.jsx("input",{ref:i,disabled:d,...M}),c.jsxs("span",{className:"react-paint-editor-button-content",children:[g&&c.jsx("span",{className:"react-paint-editor-button-children",children:g}),v&&c.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:v}})]})]})}const{hidden:t=!1,disabled:n=!1,selected:s=!1,icon:r,children:o,type:a="button",className:l="",...h}=e;return c.jsx("button",{className:`react-paint-editor-button ${l}`,ref:i,disabled:n,"data-disabled":+n,"data-selected":+s,"data-hidden":+t,type:a,...h,children:c.jsxs("span",{className:"react-paint-editor-button-content",children:[o&&c.jsx("span",{className:"react-paint-editor-button-children",children:o}),r&&c.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:r}})]})})}),_e=({children:e,title:i="",className:t="",position:n="bottom",fitContainer:s=!1,alignment:r="center"})=>c.jsxs("div",{className:`react-paint-editor-panel ${t}`,"data-fitcontainer":s,"data-position":n,"data-alignment":r,style:{"--react-paint-editor-panel-zindex":mt},children:[i&&c.jsx("h3",{className:"react-paint-editor-panel-title",children:i}),e]}),oa=e=>{switch(e){case"brush":return Gt;case"line":return t1;case"polygon":return xt;case"curve":return i1;case"rect":case"square":return yt;case"circle":case"ellipse":return Qt;case"text":return e1;case"picture":return bt;case"triangle":return""}},ra=({disabled:e=!1,shape:i,selected:t,layoutDragging:n,toggleShapeVisibility:s,toggleShapeLock:r,setLayoutDragging:o,handleRemove:a,handleSelect:l,onMoveShapes:h})=>{const u=f.useRef(null),{isOver:d}=(({disabled:p=!1,ref:v,shape:g,layoutDragging:m,setLayoutDragging:C,handleSelect:w,onMoveShapes:M})=>{const[Q,b]=f.useState(!1);return f.useEffect(()=>{m\|\|b(!1)},[m]),f.useEffect(()=>{const H=v.current;if(!H)return;const T=()=>{C(void 0)},P=k=>(k.preventDefault&&k.preventDefault(),!1),E=k=>{w(g),k.dataTransfer&&(k.dataTransfer.effectAllowed="move",k.dataTransfer.setData("draggableShapeId",g.id),C(g.id))},N=()=>{m!==g.id&&b(!0)},S=()=>{b(!1)},A=k=>(k.stopPropagation(),k.dataTransfer&&M(k.dataTransfer.getData("draggableShapeId"),g.id),!1);return p\|\|(H.addEventListener("dragstart",E),H.addEventListener("dragend",T),H.addEventListener("dragover",P),H.addEventListener("dragenter",N),H.addEventListener("dragleave",S),H.addEventListener("drop",A)),()=>{p\|\|(H.removeEventListener("dragstart",E),H.removeEventListener("dragend",T),H.removeEventListener("dragover",P),H.removeEventListener("dragenter",N),H.removeEventListener("dragleave",S),H.removeEventListener("drop",A))}},[p,v,g,C,w,M,m]),{isOver:Q}})({disabled:e,ref:u,shape:i,layoutDragging:n,setLayoutDragging:o,handleSelect:l,onMoveShapes:h});return c.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(n===i.id),"data-is-over":+d,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),l(i))},"data-selected":+t,ref:u,children:[c.jsx("span",{dangerouslySetInnerHTML:{__html:oa(i.type)}}),c.jsx("span",{children:i.id}),c.jsx("div",{className:"react-paint-editor-layouts-separator"}),c.jsx(U,{className:"react-paint-editor-layouts-visible-button",title:i.visible?"Hide":"Show","data-visible":i.visible!==!1,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),s(i))},icon:i.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(U,{className:"react-paint-editor-layouts-locked-button",title:i.locked?"Locked":"Unlocked","data-locked":!!i.locked,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),r(i))},icon:i.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(U,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),a(i))},icon:Jt})]})},la=({gridFormat:e,setGridFormat:i,disabled:t=!1,shapes:n,removeShape:s,toggleShapeVisibility:r,toggleShapeLock:o,selectedShape:a,moveShapes:l,selectShape:h,isLayoutPanelShown:u})=>{const[d,p]=f.useState(void 0);return u?c.jsx(_e,{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(U,{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===0,disabled:t,onClick:()=>i(0)}),["S","M","L"].map((v,g)=>c.jsx(U,{className:"react-paint-editor-layouts-grid-button",selected:e===g+1,disabled:t,onClick:()=>i(g+1),children:v},v))]}),c.jsx("hr",{}),c.jsx("div",{className:"react-paint-editor-layouts",children:n.length===0?c.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):n.map(v=>c.jsx(ra,{shape:v,disabled:t,layoutDragging:d,setLayoutDragging:p,selected:a?.id===v.id,handleSelect:h,handleRemove:s,onMoveShapes:l,toggleShapeVisibility:r,toggleShapeLock:o},v.id))})]})})}):null},Rt=({children:e,onClose:i,position:t="center",className:n=""})=>c.jsxs("div",{className:"react-paint-editor-modal","data-position":t,style:{"--react-paint-editor-modal-zindex":mt},children:[c.jsx("div",{className:"react-paint-editor-modal-mask",onClick:i}),c.jsx("div",{className:`react-paint-editor-modal-panel ${n}`,children:e})]}),gt=({selectedSettings:e,setSelectedSettings:i,title:t="Choisissez une couleur",mode:n="fill",disabled:s=!1,values:r,field:o,value:a="",valueChanged:l})=>{const[h]=f.useState(G("settings_")),u=e===h;return r.length?c.jsxs(c.Fragment,{children:[c.jsx(U,{selected:u,title:t,disabled:s,onClick:()=>{i(d=>d===h?void 0:h)},icon:a==="transparent"?n==="fill"?r1:o1:void 0,children:a!=="transparent"&&c.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":n,style:{"--react-paint-editor-colorfield-color-value":a}})}),u&&c.jsx(_e,{title:t,alignment:"left",children:c.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[r.map((d,p)=>c.jsx(U,{title:d,selected:d===a,color:d,icon:d==="transparent"?n==="fill"?r1:o1:void 0,onClick:()=>{l(o,d)},children:d!=="transparent"&&c.jsx("div",{className:"react-paint-editor-colorfield-color",color:d,"data-mode":n,style:{"--react-paint-editor-colorfield-color-value":d}})},d)),c.jsx(U,{type:"color",title:"Custom color",selected:!r.includes(a),value:a,onChange:d=>{const p=+d.target.value;l(o,Number.isNaN(p)?d.target.value:p)},children:c.jsx("div",{className:"react-paint-editor-colorfield-customcolor",style:{"--react-paint-editor-colorfield-color-value":r.includes(a)?"var(--react-paint-editor-app-font-color)":a},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},ca=({disabled:e=!1,selectedShape:i,removeShape:t})=>c.jsx(U,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{t(i)},icon:Jt}),Nt=({CustomOption:e,selectedSettings:i,setSelectedSettings:t,title:n="Choisissez l'option",disabled:s=!1,field:r,icon:o,values:a,defaultValue:l,valueChanged:h})=>{const[u]=f.useState(G("settings_")),d=i===u;return a.length?c.jsxs(c.Fragment,{children:[c.jsx(U,{selected:d,title:n,icon:o,disabled:s,onClick:()=>{t(p=>p===u?void 0:u)}}),d&&c.jsx(_e,{title:n,alignment:"left",fitContainer:!0,children:c.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:a.map(p=>c.jsx(U,{title:`${p}`,onClick:()=>(v=>{h(r,v)})(p),selected:l===p,style:{"--react-paint-editor-button-padding":"16px"},children:c.jsx(e,{children:p})},p))})})]}):null},da=({children:e})=>c.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),ai=({selectedSettings:e,setSelectedSettings:i,disabled:t=!1,values:n,defaultValue:s,valueChanged:r})=>n.length?c.jsx(Nt,{selectedSettings:e,setSelectedSettings:i,CustomOption:da,title:"Police",icon:'<svg><path d="M5.312 14.979H7.125L8.042 12.479H11.979L12.896 14.979H14.708L10.917 5H9.083ZM8.542 10.958 9.958 6.958H10.042L11.458 10.958ZM3.417 18.333Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V3.417Q1.667 2.688 2.177 2.177Q2.688 1.667 3.417 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417V16.583Q18.333 17.312 17.823 17.823Q17.312 18.333 16.583 18.333ZM3.417 16.583H16.583Q16.583 16.583 16.583 16.583Q16.583 16.583 16.583 16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583ZM3.417 3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583V3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417Z"/></svg>',disabled:t,field:"fontFamily",values:n,defaultValue:s,valueChanged:r}):null,ua=({disabled:e,toggleLayoutPanel:i})=>c.jsx(U,{title:"Toggle layers panel",disabled:e,onClick:i,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"}),ha=({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"})]}),ni=({selectedSettings:e,setSelectedSettings:i,disabled:t=!1,values:n,defaultValue:s,valueChanged:r})=>n.length?c.jsx(Nt,{selectedSettings:e,setSelectedSettings:i,CustomOption:ha,title:"Flèches",icon:'<svg><path d="M6 17 2 13 6 9 7.062 10.062 4.875 12.25H17V13.75H4.875L7.062 15.938ZM14 11 12.938 9.938 15.125 7.75H3V6.25H15.125L12.938 4.062L14 3L18 7Z"/></svg>',disabled:t,field:"lineArrow",values:n,defaultValue:s,valueChanged:r}):null,pa=({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",{})]}),si=({selectedSettings:e,setSelectedSettings:i,disabled:t=!1,values:n,defaultValue:s,valueChanged:r})=>n.length?c.jsx(Nt,{selectedSettings:e,setSelectedSettings:i,CustomOption:pa,icon:'<svg><path d="M3 16V14.5H4.5V16ZM6.125 16V14.5H7.625V16ZM9.25 16V14.5H10.75V16ZM12.375 16V14.5H13.875V16ZM15.5 16V14.5H17V16ZM3 13V11.5H6.5V13ZM8.25 13V11.5H11.75V13ZM13.5 13V11.5H17V13ZM3 10V8.5H9.25V10ZM10.75 10V8.5H17V10ZM3 7V4H17V7Z"/></svg>',title:"Type de traits",disabled:t,field:"lineDash",values:n,defaultValue:s,valueChanged:r}):null,tt=({selectedSettings:e,setSelectedSettings:i,title:t="Choisissez l'intervalle",icon:n,disabled:s=!1,field:r,value:o=1,min:a=1,max:l=20,step:h=1,unity:u="",valueChanged:d})=>{const p=Math.round(o),[v]=f.useState(G("settings_")),g=f.useRef(null);f.useEffect(()=>()=>{g.current&&clearTimeout(g.current)},[]);const m=e===v;return a===l?null:c.jsxs(c.Fragment,{children:[c.jsx(U,{selected:m,title:t,disabled:s,icon:n,onClick:()=>{i(C=>C===v?void 0:v)}}),m&&c.jsx(_e,{title:t,alignment:"left",fitContainer:!0,children:c.jsx("div",{children:c.jsxs("label",{className:"react-paint-editor-rangefield",children:[c.jsx("input",{type:"range",min:a,max:l,step:h,value:o,onChange:C=>{const w=+C.target.value;d(r,Number.isNaN(w)?C.target.value:w,!1),g.current&&clearTimeout(g.current),g.current=setTimeout(()=>{d(r,Number.isNaN(w)?C.target.value:w,!0)},1e3)}}),c.jsxs("span",{children:[p,u]})]})})})]})},oi=({selectedSettings:e,setSelectedSettings:i,disabled:t=!1,min:n,max:s,step:r,value:o,valueChanged:a})=>n===s?null:c.jsx(tt,{selectedSettings:e,setSelectedSettings:i,icon:xt,title:"Nombre de points",disabled:t,field:"pointsCount",min:n,max:s,step:r,unity:"",value:o,valueChanged:a}),ft=({setSelectedSettings:e,disabled:i=!1,field:t,icon:n,values:s,value:r=!1,valueChanged:o})=>{const[a]=f.useState(G("settings_"));return s.length!==2?null:c.jsx(U,{onClick:()=>{e(l=>l===a?void 0:a),o(t,!r)},selected:r,disabled:i,icon:n})},Dt=({activeTool:e,selectedShape:i,selectedShapeTool:t,disabled:n,selectedSettings:s,setSelectedSettings:r,handleShapeStyleChange:o,handlePolygonLinesCount:a,handleShapeFontFamilyChange:l})=>i?c.jsx(c.Fragment,{children:t&&c.jsxs(c.Fragment,{children:["strokeColor"in t.settings&&c.jsx(gt,{selectedSettings:s,setSelectedSettings:r,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:i.style?.strokeColor,valueChanged:o,values:t.settings.strokeColor.values}),"fillColor"in t.settings&&c.jsx(gt,{selectedSettings:s,setSelectedSettings:r,title:"Couleur de fond",disabled:n,field:"fillColor",value:i.style?.fillColor,valueChanged:o,values:t.settings.fillColor.values}),"lineWidth"in t.settings&&c.jsx(tt,{selectedSettings:s,setSelectedSettings:r,title:"Epaisseur du trait",icon:s1,disabled:n,field:"lineWidth",value:i.style?.lineWidth,valueChanged:o,unity:"px",min:t.settings.lineWidth.min,max:t.settings.lineWidth.max,step:t.settings.lineWidth.step}),"lineDash"in t.settings&&c.jsx(si,{selectedSettings:s,setSelectedSettings:r,disabled:n,defaultValue:i.style?.lineDash,valueChanged:o,values:t.settings.lineDash.values}),"lineArrow"in t.settings&&c.jsx(ni,{selectedSettings:s,setSelectedSettings:r,disabled:n,defaultValue:i.style?.lineArrow,valueChanged:o,values:t.settings.lineArrow.values}),"pointsCount"in t.settings&&c.jsx(oi,{selectedSettings:s,setSelectedSettings:r,disabled:n,valueChanged:a,min:t.settings.pointsCount.min,max:t.settings.pointsCount.max,step:t.settings.pointsCount.step,value:i.style?.pointsCount}),"fontFamily"in t.settings&&c.jsx(ai,{selectedSettings:s,setSelectedSettings:r,disabled:n,valueChanged:l,values:t.settings.fontFamily.values,defaultValue:i.style?.fontFamily}),"fontBold"in t.settings&&c.jsx(ft,{setSelectedSettings:r,disabled:n,field:"fontBold",icon:a1,valueChanged:l,values:t.settings.fontBold.values,value:i.style?.fontBold}),"fontItalic"in t.settings&&c.jsx(ft,{setSelectedSettings:r,disabled:n,field:"fontItalic",icon:n1,valueChanged:l,values:t.settings.fontItalic.values,value:i.style?.fontItalic}),"opacity"in t.settings&&c.jsx(tt,{selectedSettings:s,setSelectedSettings:r,title:"Opacité",icon:Kt,min:t.settings.opacity.min,max:t.settings.opacity.max,step:t.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:i.style?.opacity??100,valueChanged:o})]})}):"settings"in e?c.jsxs(c.Fragment,{children:["strokeColor"in e.settings&&c.jsx(gt,{selectedSettings:s,setSelectedSettings:r,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:o,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&c.jsx(gt,{selectedSettings:s,setSelectedSettings:r,title:"Couleur de fond",disabled:n,field:"fillColor",value:e.settings.fillColor.default,valueChanged:o,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&c.jsx(tt,{selectedSettings:s,setSelectedSettings:r,title:"Epaisseur du trait",disabled:n,field:"lineWidth",icon:s1,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&&c.jsx(si,{selectedSettings:s,setSelectedSettings:r,disabled:n,defaultValue:e.settings.lineDash.default,valueChanged:o,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&c.jsx(ni,{selectedSettings:s,setSelectedSettings:r,disabled:n,defaultValue:e.settings.lineArrow.default,valueChanged:o,values:e.settings.lineArrow.values}),"pointsCount"in e.settings&&c.jsx(oi,{selectedSettings:s,setSelectedSettings:r,disabled:n,valueChanged:a,min:e.settings.pointsCount.min,max:e.settings.pointsCount.max,step:e.settings.pointsCount.step,value:e.settings.pointsCount.default}),"fontFamily"in e.settings&&c.jsx(ai,{selectedSettings:s,setSelectedSettings:r,disabled:n,valueChanged:l,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&c.jsx(ft,{setSelectedSettings:r,disabled:n,field:"fontBold",icon:a1,valueChanged:l,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&c.jsx(ft,{setSelectedSettings:r,disabled:n,field:"fontItalic",icon:n1,valueChanged:l,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&c.jsx(tt,{selectedSettings:s,setSelectedSettings:r,title:"Opacité",icon:Kt,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:e.settings.opacity.default,valueChanged:o})]}):null,ga=({width:e,disabled:i=!1,availableTools:t,updateToolSettings:n,layersManipulation:s,toggleLayoutPanel:r,activeTool:o,selectedShape:a,canvas:l,currentScale:h,selectionPadding:u,updateShape:d,removeShape:p})=>{const[v,g]=f.useState(void 0),[m,C]=f.useState(!1),w=()=>{C(E=>!E)},M=a?t.find(E=>E.id===a.toolId)\|\|t.find(E=>E.type===a.type):void 0,Q=(M?Object.keys(M.settings).length+1:"settings"in o?Object.keys(o.settings).length:0)+(s?1:0),b=e<40Q,H=(E,N,S=!0)=>{a?(d(et(ne(["style",E],N,a),h,u),S),M&&n(M.id,E,N)):n(o.id,E,N)},T=(E,N)=>{if(a){if(a.type!=="text")return;const S=l?.getContext("2d");if(!S)return;const A=ne(["style",E],N,a),k=Et(S,A.value,A.width,A.style?.fontBold??!1,A.style?.fontItalic??!1,A.style?.fontFamily),O=et({...A,fontSize:k,height:kA.value.length},h,u);d(O,!0),M&&n(M.id,E,N)}else n(o.id,E,N)},P=(E,N)=>{if(a){if(a.type!=="polygon"&&a.type!=="curve")return;d(a.type==="polygon"?((S,A,k,O)=>{const F=S.points.length;if(F===A)return S;if(F>A){const V=S.points.slice(0,A);return Xe({...S,points:V,style:{...S.style,pointsCount:V.length}},k,O)}const x=A-F,j=new Array(x).fill(void 0).map((V,L)=>[S.points[0][0]+(S.points[1][0]-S.points[0][0])(L+1)/(x+1),S.points[0][1]+(S.points[1][1]-S.points[0][1])(L+1)/(x+1)]),y=[S.points[0],...j,...S.points.slice(1,S.points.length)];return Xe({...S,points:y,style:{...S.style,pointsCount:y.length}},k,O)})(a,N,h,u):((S,A,k,O)=>{const F=S.points.length;if(F===A)return S;if(F>A){const V=S.points.slice(0,A);return Ye({...S,points:V,style:{...S.style,pointsCount:V.length}},k,O)}const x=A-F,j=new Array(x).fill(void 0).map((V,L)=>[S.points[0][0]+(S.points[1][0]-S.points[0][0])(L+1)/(x+1),S.points[0][1]+(S.points[1][1]-S.points[0][1])(L+1)/(x+1)]),y=[S.points[0],...j,...S.points.slice(1,S.points.length)];return Ye({...S,points:y,style:{...S.style,pointsCount:y.length}},k,O)})(a,N,h,u),!0),M&&n(M.id,E,N)}else n(o.id,E,N)};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&&Q>2&&c.jsx(U,{disabled:i,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>'}),a?c.jsx(c.Fragment,{children:M&&c.jsxs(c.Fragment,{children:[!b&&c.jsx(Dt,{activeTool:o,selectedShape:a,selectedShapeTool:M,disabled:i,selectedSettings:v,setSelectedSettings:g,handleShapeStyleChange:H,handlePolygonLinesCount:P,handleShapeFontFamilyChange:T}),c.jsx(ca,{disabled:i,selectedShape:a,removeShape:p})]})}):!b&&c.jsx(Dt,{activeTool:o,selectedShape:a,selectedShapeTool:M,disabled:i,selectedSettings:v,setSelectedSettings:g,handleShapeStyleChange:H,handlePolygonLinesCount:P,handleShapeFontFamilyChange:T})]}),c.jsx("div",{className:"react-paint-editor-settings-separator"}),s&&c.jsx(ua,{disabled:i,toggleLayoutPanel:r})]}),m&&c.jsx(Rt,{className:"react-paint-editor-settings-modal",onClose:w,position:"bottom",children:c.jsx(Dt,{activeTool:o,selectedShape:a,selectedShapeTool:M,disabled:i,selectedSettings:v,setSelectedSettings:g,handleShapeStyleChange:H,handlePolygonLinesCount:P,handleShapeFontFamilyChange:T})})]})},ri=({disabled:e=!1,withText:i=!1,loadFile:t,type:n,img:s,accept:r})=>{const o=f.useRef(null);return c.jsx(U,{ref:o,type:"file",onClick:a=>{a.stopPropagation(),o.current&&(o.current.value="")},onChange:a=>{const l=a.target.files?.item(0);l&&t(l)},accept:r,title:n.label??n.type,icon:s,children:i?n.label:void 0,disabled:e})},le=({type:e,img:i,isActive:t,withText:n=!1,disabled:s=!1,setActive:r})=>c.jsx(U,{disabled:s,selected:t,onClick:()=>{r(e)},title:e.label??e.type,icon:i,children:n?e.label:void 0}),fa=({activeTool:e,withActionsInMenu:i,hasActionToUndo:t=!1,hasActionToRedo:n=!1,hasActionToClear:s=!1,undoAction:r,redoAction:o,clearCanvas:a,alignment:l,group:h,vertical:u=!1,disabled:d=!1,withLoadAndSave:p,withExport:v,addPicture:g,loadFile:m,togglePictureUrlModal:C,saveFile:w,exportCanvasInFile:M,withUploadPicture:Q,withUrlPicture:b})=>{const[H,T]=f.useState(!1),[,P]=f.useTransition(),E=h?.tools?.some(S=>S===e.type),N=(E?e.icon:h.img)??h.title;return f.useEffect(()=>{if(!H)return;const S=()=>{T(!1)};return document.addEventListener("click",S),()=>{document.removeEventListener("click",S)}},[H]),i\|\|Q\|\|b\|\|p\|\|v?c.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[c.jsx(U,{selected:E,title:h.title,disabled:d,onClick:()=>{P(()=>{T(!0)})},icon:N}),H&&c.jsx(_e,{alignment:l,position:"top",children:c.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+u,children:[i&&c.jsxs(c.Fragment,{children:[c.jsx(le,{withText:!0,type:We,disabled:d\|\|!t,img:We.icon,isActive:e.id===We.id,setActive:r}),c.jsx(le,{withText:!0,type:$e,disabled:d\|\|!n,img:$e.icon,isActive:e.id===$e.id,setActive:o}),c.jsx(le,{withText:!0,type:Oe,disabled:d\|\|!s,img:Oe.icon,isActive:e.id===Oe.id,setActive:a}),(Q\|\|b\|\|p)&&c.jsx("hr",{})]}),Q&&c.jsx(ri,{withText:!0,type:y1,disabled:d,loadFile:async S=>{T(!1),await g(S)},img:y1.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml"}),b&&c.jsx(U,{disabled:d,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"}),(Q\|\|b)&&p&&c.jsx("hr",{}),p&&c.jsxs(c.Fragment,{children:[c.jsx(ri,{withText:!0,type:m1,disabled:d,loadFile:S=>{T(!1),m(S)},img:m1.icon,accept:"application/JSON"}),c.jsx(le,{withText:!0,disabled:d,type:wt,img:wt.icon,isActive:e.id===wt.id,setActive:w})]}),v&&c.jsx(le,{withText:!0,disabled:d,type:Ct,img:Ct.icon,isActive:e.id===Ct.id,setActive:M})]})})]}):null},va=({togglePictureUrlModal:e,addPicture:i})=>{const t=f.useRef(null);return f.useEffect(()=>{t.current&&t.current.focus()},[]),c.jsx(Rt,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,children:c.jsxs("form",{onSubmit:async n=>{n.preventDefault();const s=t.current?.value;s&&(await i(s),e())},children:[c.jsxs("label",{children:["URL ",c.jsx("input",{type:"text",ref:t})]}),c.jsx(U,{onClick:e,children:"Annuler"}),c.jsx(U,{type:"submit",selected:!0,children:"Ajouter"})]})})},ma=({activeTool:e,alignment:i,group:t,disabled:n=!1,setActiveToolFromId:s})=>{const r=f.useRef(null),[o,a]=f.useState(!1),[,l]=f.useTransition(),[h,u]=f.useState(void 0),d=g=>{u(g),s(g.id)};if(f.useEffect(()=>{if(!o)return;const g=m=>{!b1(m,r.current)&&a(!1)};return document.addEventListener("mousedown",g,{passive:!1}),document.addEventListener("touchstart",g,{passive:!1}),()=>{document.removeEventListener("mousedown",g),document.removeEventListener("touchstart",g)}},[o]),"type"in t)return c.jsx(le,{disabled:n,type:t,img:t.icon,isActive:e.id===t.id,setActive:d});if(!t.toolsType.length)return null;if(t.toolsType?.length===1)return c.jsx(le,{disabled:n,type:t.toolsType[0],img:t.toolsType[0].icon,isActive:e.id===t.toolsType[0].id,setActive:d});const p=t?.toolsType.find(g=>g.type===e.type)!==void 0,v=(h?h.icon:t.toolsType?.[0]?.icon)??t.title;return c.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[c.jsx(U,{selected:p,title:t.title,disabled:n,onClick:()=>{h?s(h.id):t.toolsType?.[0]&&d(t.toolsType[0]),l(()=>{a(!0)})},icon:v}),o&&c.jsx(_e,{alignment:i,position:"top",children:c.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+t.vertical,ref:r,children:t.toolsType.map((g,m)=>c.jsx(le,{disabled:n,type:g,img:g.icon,isActive:e.id===g.id,setActive:d},m))})})]})},ya=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],Qa=({width:e,disabled:i=!1,activeTool:t,hasActionToUndo:n=!1,hasActionToRedo:s=!1,hasActionToClear:r=!1,withLoadAndSave:o,withExport:a,clearCanvas:l,setActiveTool:h,undoAction:u,redoAction:d,addPicture:p,loadFile:v,saveFile:g,exportCanvasInFile:m,availableTools:C,withUrlPicture:w,withUploadPicture:M})=>{const Q=((F,x)=>{const j=x.flatMap(y=>{if(typeof y!="object")return F.filter(L=>L.type===y);const V=F.filter(L=>y.toolsType.includes(L.type));return V?{...y,toolsType:V}:null});return dt(j)})(C,ya),b=e<40(5+Q.length),H=e<40(2+Q.length),[T,P]=f.useState(!1),[E,N]=f.useState(!1),S=()=>{P(F=>!F)},A=F=>{h(F),P(!1)},k=F=>{A(C.find(x=>x.id===F)??t)},O=C.find(F=>F.type===t.type)!==void 0;return c.jsxs(c.Fragment,{children:[c.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",children:[c.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[c.jsx(le,{type:xe,disabled:i,img:xe.icon,isActive:t.id===xe.id,setActive:A}),H?c.jsx(U,{disabled:i,onClick:S,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:O}):Q.map((F,x)=>c.jsx(ma,{disabled:i,activeTool:t,group:F,setActiveToolFromId:k},x))]}),!b&&c.jsxs(c.Fragment,{children:[c.jsx(le,{type:We,disabled:i\|\|!n,img:We.icon,isActive:t.id===We.id,setActive:u}),c.jsx(le,{type:$e,disabled:i\|\|!s,img:$e.icon,isActive:t.id===$e.id,setActive:d}),c.jsx(le,{type:Oe,disabled:i\|\|!r,img:Oe.icon,isActive:t.id===Oe.id,setActive:l})]}),c.jsx(fa,{withActionsInMenu:b,disabled:i,vertical:!0,alignment:"right",group:{title:"Menu",img:'<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>'},activeTool:t,addPicture:p,loadFile:v,saveFile:g,togglePictureUrlModal:()=>{N(!0)},exportCanvasInFile:m,withUploadPicture:M,withUrlPicture:w,withLoadAndSave:o,withExport:a,hasActionToUndo:n,hasActionToRedo:s,hasActionToClear:r,undoAction:u,redoAction:d,clearCanvas:l})]}),T&&c.jsx(Rt,{className:"react-paint-editor-toolbar-modal",onClose:S,children:C.map((F,x)=>F.type==="picture"?null:c.jsx(le,{disabled:i,type:F,img:F.icon,withText:!1,isActive:t.id===F.id,setActive:A},x))}),E&&c.jsx(va,{togglePictureUrlModal:()=>{N(F=>!F)},addPicture:p})]})};return({width:e=1e3,height:i=600,shapes:t,className:n="",mode:s="editor",disabled:r=!1,onDataChanged:o,apiRef:a,options:l=Mt})=>{const{layersManipulation:h,grid:u,canGrow:d,canShrink:p,withExport:v,withLoadAndSave:g,withUploadPicture:m,withUrlPicture:C,withSkeleton:w,withFrameSelection:M,clearCallback:Q,availableTools:b}={...Mt,...l},{toolbarBackgroundColor:H,dividerColor:T,fontRadius:P,fontDisabledColor:E,fontDisabledBackgroundColor:N,fontColor:S,fontBackgroundColor:A,fontSelectedColor:k,fontSelectedBackgroundColor:O,fontHoverColor:F,fontHoverBackgroundColor:x,canvasBackgroundColor:j,canvasSelectionColor:y,canvasSelectionWidth:V,canvasSelectionPadding:L}={...Mt.uiStyle,...l?.uiStyle??{}},W=s!=="viewer",D=r\|\|!W,B=f.useRef(null),$=f.useRef(null),[Z,te]=f.useState({width:e,height:i,scaleRatio:1}),[ie,ae]=f.useState(ii(b,m\|\|C)),{isInsideComponent:se}=(({disabled:R,componentRef:z})=>{const[he,J]=f.useState(!1);return f.useEffect(()=>{if(!R){const K=fe=>{J(b1(fe,z.current))};return document.addEventListener("mousedown",K,{passive:!0}),document.addEventListener("touchstart",K,{passive:!0}),()=>{document.removeEventListener("mousedown",K),document.removeEventListener("touchstart",K)}}J(!1)},[R,z]),{isInsideComponent:he}})({disabled:D,componentRef:B}),[oe,X]=f.useState(!1),[ce,be]=f.useState(!1),[me,Se]=f.useState([0,0]),[je,ue]=f.useState(void 0),[Ee,pe]=f.useState(xe),[de,Le]=f.useState({mode:"default"}),[q,Ce]=f.useState(u),[Fe,Re]=f.useState(!1);a&&(a.current={getCurrentImage:()=>$.current?$1(ge.current,me,e,i,L):void 0,getCurrentData:()=>F1(ge.current,e,i)});const{shapesRef:ge,selectedShape:Ve,selectionFrame:xa,hoveredShape:ba,addShape:It,addPictureShape:li,moveShapes:Sa,setSelectedShape:He,setSelectionFrame:Ca,refreshSelectedShapes:wa,refreshHoveredShape:Ma,removeShape:Wt,updateShape:$t,backwardShape:Ot,forwardShape:zt,clearShapes:ci,saveShapes:ka,toggleShapeVisibility:ja,toggleShapeLock:La,canGoBackward:Va,canGoForward:Ha,canClear:Ta}=Bi(o,L,Z),{snackbarList:Aa,addSnackbar:we}=_i(),Ne=f.useCallback(R=>{He(void 0),pe(R)},[He]),Pa=f.useCallback((R,z,he)=>{ae(J=>J.map(K=>K.id===R?ne(["settings",z,"default"],he,K):K)),pe(J=>J.id===R?ne(["settings",z,"default"],he,J):J)},[]),Za=f.useCallback(()=>{Ne(xe),Ot()},[Ne,Ot]),Ea=f.useCallback(()=>{Ne(xe),zt()},[Ne,zt]),vt=f.useCallback((R=[],z=!1)=>{ci(R,z),Ne(xe),Se([0,0])},[Ne,ci]),De=f.useCallback(async(R,z=!0)=>{const he=await(async(J,K,fe)=>{if(!J.shapes)return[];const qe=[],Ge=dt(J.shapes.map(ye=>{if(!ye\|\|!qt.includes(ye.type))return null;if(ye.type==="picture"){const Ie=new Image,za=new Promise((Ut,Ua)=>{Ie.onload=()=>{URL.revokeObjectURL(Ie.src),Ut()},Ie.onerror=()=>{Ua(new Error("Some images could not be loaded"))}});return qe.push(za),ye.src.startsWith("http")?I1(ye.src).then(Ut=>{Ie.src=Ut}).catch(()=>{Ie.src=""}):Ie.src=ye.src,R1({...ye,img:Ie},K,fe)}return R1(ye,K,fe)}));return await Promise.all(qe),Ge})(R,Z.scaleRatio,L);vt(he,z)},[vt,Z,L]),Fa=f.useCallback(()=>{typeof Q!="string"?De({shapes:Q()},!1):Q==="defaultShapes"&&t!==void 0?De({shapes:t},!1):vt()},[vt,De,t,Q]),it=f.useCallback(R=>{pe(xe),He(R)},[He]),Ra=f.useCallback(R=>{It(R),it(R)},[It,it]),Na=f.useCallback(()=>{X(!0);try{const R=$.current&&$1(ge.current,me,e,i,L);if(!R)throw new Error;W1(R,"drawing.png"),X(!1)}catch(R){R instanceof Error&&we({type:"error",text:"L'export a échoué"}),console.warn(R)}finally{X(!1)}},[we,ge,me,e,i,L]),Da=f.useCallback(()=>{X(!0);try{const R=ji(ge.current,e,i);if(!R)throw new Error("L'encodage a échoué");W1(R,"drawing.json"),X(!1)}catch(R){R instanceof Error&&we({type:"error",text:"L'enregistrement a échoué"}),console.warn(R)}finally{X(!1)}},[ge,we,e,i]),Ia=f.useCallback(async R=>{X(!0);try{const z=await(async he=>new Promise((J,K)=>{const fe=new FileReader;fe.onload=qe=>{const Ge=qe.target?.result;if(!Ge)return K("Impossible de récupérer les données du fichier");const ye=JSON.parse(Ge);J(ye)},fe.readAsText(he)}))(R);await De(z),we({type:"success",text:"Fichier chargé !"})}catch(z){z instanceof Error&&we({type:"error",text:"Le chargement a échoué"}),console.warn(z)}finally{X(!1)}},[De,we]),Wa=f.useCallback(async R=>{X(!0);try{const z=await li(R,e,i);it(z)}catch(z){z instanceof Error&&we({type:"error",text:"Le chargement a échoué"}),console.warn(z)}finally{X(!1)}},[li,it,we,e,i]),$a=f.useCallback(R=>{const z=R/e;te({width:R,height:iz,scaleRatio:z})},[e,i]);Ui({isInsideComponent:se,selectionPadding:L,gridFormat:q,isEditingText:de.mode==="textedition",selectedShape:Ve,currentScale:Z.scaleRatio,setSelectedShape:He,removeShape:Wt,pasteShape:Ra,updateShape:$t,backwardShape:Ot,forwardShape:zt,setShiftPressed:Re}),(({onResized:R,element:z})=>{f.useEffect(()=>{const he=z.current;if(!he)return;const J=new ResizeObserver(K=>{const fe=K?.[0]?.borderBoxSize?.[0],{width:qe,height:Ge}=fe?{width:fe.inlineSize,height:fe.blockSize}:K?.[0].contentRect??{};R(qe,Ge)});return J.observe(he),()=>{J.unobserve(he)}},[z,R])})({element:B,onResized:$a}),f.useEffect(()=>{ae(ii(b,m\|\|C))},[b,m,C]),f.useEffect(()=>{se\|\|He(void 0)},[se,He]);const di=f.useRef(De);di.current=De,f.useEffect(()=>{t!==void 0&&di.current({shapes:t})},[t]);const Oa=`${n}${ce?" react-paint-editor-layout-opened":""} react-paint-editor-app`;return c.jsxs("div",{ref:B,className:Oa,"data-grow":d,"data-shrink":p,style:{"--react-paint-editor-app-canvaswidth":`${e}px`,"--react-paint-editor-app-toolbar-bg":H,"--react-paint-editor-app-divider-color":T,"--react-paint-editor-app-font-radius":P,"--react-paint-editor-app-font-disabled-color":E,"--react-paint-editor-app-font-disabled-bg":N,"--react-paint-editor-app-font-color":S,"--react-paint-editor-app-font-bg":A,"--react-paint-editor-app-font-selected-color":k,"--react-paint-editor-app-font-selected-bg":O,"--react-paint-editor-app-font-hover-color":F,"--react-paint-editor-app-font-hover-bg":x,"--react-paint-editor-app-canvas-bg":j},children:[W&&c.jsx(Qa,{width:Z.width,disabled:D,activeTool:Ee,clearCanvas:Fa,setActiveTool:Ne,exportCanvasInFile:Na,saveFile:Da,loadFile:Ia,addPicture:Wa,hasActionToUndo:Va,hasActionToRedo:Ha,hasActionToClear:Ta,undoAction:Za,redoAction:Ea,availableTools:ie,withExport:v,withLoadAndSave:g,withUploadPicture:m,withUrlPicture:C}),c.jsxs("div",{className:"react-paint-editor-app-row","data-grow":d,style:{"--react-paint-editor-app-row-zindex":ui,"--react-paint-editor-app-row-width":Z.width,"--react-paint-editor-app-row-aspectratio":`calc(${Z.width} / ${Z.height})`},children:[c.jsx(aa,{canGrow:d,gridFormat:q,disabled:D,isInsideComponent:se,activeTool:Ee,setActiveTool:pe,canvasOffsetStartPosition:je,setCanvasOffsetStartPosition:ue,shapes:ge.current,addShape:It,updateSingleShape:$t,selectedShape:Ve,selectionFrame:xa,setSelectedShape:He,setSelectionFrame:Ca,hoveredShape:ba,refreshHoveredShape:Ma,refreshSelectedShapes:wa,canvasOffset:me,setCanvasOffset:Se,saveShapes:ka,ref:$,canvasSize:Z,selectionMode:de,setSelectionMode:Le,selectionColor:y,selectionWidth:V,selectionPadding:L,isEditMode:W,isShiftPressed:Fe,withFrameSelection:M,withSkeleton:w}),W&&h&&c.jsx(la,{gridFormat:q,setGridFormat:Ce,disabled:D,shapes:ge.current,moveShapes:Sa,selectedShape:Ve,removeShape:Wt,selectShape:it,toggleShapeVisibility:ja,toggleShapeLock:La,isLayoutPanelShown:ce})]}),W&&c.jsxs(c.Fragment,{children:[c.jsx(ga,{width:Z.width,disabled:D,activeTool:Ee,availableTools:ie,selectedShape:Ve,selectionPadding:L,removeShape:Wt,updateShape:$t,canvas:$.current,currentScale:Z.scaleRatio,layersManipulation:h,toggleLayoutPanel:()=>{be(R=>!R)},updateToolSettings:Pa}),c.jsx(pi,{isLoading:oe}),c.jsx(sa,{snackbarList:Aa})]})]})}});
1	+ (function(l,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],g):(l=typeof globalThis<"u"?globalThis:l\|\|self)["react-paint"]=g(l.jsxRuntime,l.React)})(this,function(l,g){"use strict";const q=["transparent","black","white","red","green","blue","yellow"],Se=[0,1,2],Ut=[[1,0],[1,2],[4,6]],$e="serif",ci=1,ui=2,ft=3,je=[10,20,40],hi=({isLoading:e=!1})=>{const[i,t]=g.useState("hidden");return g.useEffect(()=>{if(!e){t("fadeOut");const a=setTimeout(()=>t("hidden"),300);return()=>{clearTimeout(a)}}t("visible")},[e]),i==="hidden"?null:l.jsx("div",{className:"react-paint-editor-loading","data-loading":i,style:{"--react-paint-editor-loading-zindex":ui,"--react-paint-editor-loading-transition-duration":"300ms"},children:l.jsxs("div",{className:"react-paint-editor-loader",children:[l.jsx("div",{}),l.jsx("div",{}),l.jsx("div",{}),l.jsx("div",{})]})})},Bt=2,Xt="blue",ve=14,Yt=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],qt=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle"],_t='<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>',vt='<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>',mt='<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>',yt='<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>',Gt='<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>',Jt='<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>',Qt='<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>',Kt='<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>',e1='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',t1='<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>',i1='<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>',a1='<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>',n1='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',s1='<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>',o1='<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>',U="react-paint-",xt={type:"picture",id:`${U}picture`,icon:Qt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},r1={type:"brush",id:`${U}brush`,icon:_t,label:"Brosse",settings:{strokeColor:{values:q,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:Se,default:0}}},l1={type:"line",id:`${U}line`,icon:e1,label:"Ligne",settings:{strokeColor:{values:q,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Se,default:0},lineArrow:{values:[0,1,2,3],default:0}}},d1={type:"polygon",id:`${U}polygon`,icon:yt,label:"Polygone",settings:{strokeColor:{values:q,default:"black"},fillColor:{values:q,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Se,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},c1={type:"curve",id:`${U}curve`,icon:t1,label:"Courbe",settings:{strokeColor:{values:q,default:"black"},fillColor:{values:q,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Se,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},u1={type:"rect",id:`${U}rect`,icon:vt,label:"Rectangle",settings:{strokeColor:{values:q,default:"black"},fillColor:{values:q,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Se,default:0}}},h1={type:"square",id:`${U}square`,icon:vt,label:"Carré",settings:{strokeColor:{values:q,default:"black"},fillColor:{values:q,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Se,default:0}}},p1={type:"circle",id:`${U}circle`,icon:mt,label:"Cercle",settings:{strokeColor:{values:q,default:"black"},fillColor:{values:q,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Se,default:0}}},g1={type:"ellipse",id:`${U}ellipse`,icon:mt,label:"Ellipse",settings:{strokeColor:{values:q,default:"black"},fillColor:{values:q,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Se,default:0}}},f1={type:"text",id:`${U}text`,icon:Kt,label:"Texte",settings:{strokeColor:{values:q,default:"black"},opacity:{min:0,max:100,step:1,default:100},fontFamily:{values:["arial","serif","monospace"],default:$e},fontBold:{values:[!1,!0],default:!1},fontItalic:{values:[!1,!0],default:!1}}},me={id:`${U}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"},Ae={id:`${U}undo`,type:"undo",icon:'<svg><path d="M11.708 15.833H5.854V14.083H11.708Q13 14.083 13.958 13.292Q14.917 12.5 14.917 11.271Q14.917 10.042 13.958 9.24Q13 8.438 11.708 8.438H6.667L8.792 10.562L7.562 11.792L3.333 7.562L7.562 3.333L8.792 4.562L6.667 6.688H11.708Q13.729 6.688 15.198 7.99Q16.667 9.292 16.667 11.25Q16.667 13.208 15.198 14.521Q13.729 15.833 11.708 15.833Z"/></svg>',label:"Undo"},Ze={id:`${U}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"},Fe={id:`${U}clear`,type:"clear",icon:'<svg><path d="M7.854 13.812 10 11.688 12.125 13.812 13.354 12.604 11.208 10.458 13.354 8.312 12.125 7.104 10 9.229 7.854 7.104 6.625 8.312 8.771 10.458 6.625 12.604ZM5.896 17.5Q5.167 17.5 4.656 16.99Q4.146 16.479 4.146 15.75V5.125H3.333V3.375H7.542V2.5H12.458V3.375H16.667V5.125H15.833V15.75Q15.833 16.479 15.323 16.99Q14.812 17.5 14.083 17.5Z"/></svg>',label:"Clear"},bt={id:`${U}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"},v1={id:`${U}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"},St={id:`${U}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"},m1={id:`${U}upload-picture`,type:"uploadpicture",icon:Qt,label:"Upload picture"},y1="react-paint-editor-canvas-drawcanvas",Q1="react-paint-editor-canvas-selectioncanvas",Ct={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[r1,l1,d1,c1,u1,h1,p1,g1,xt,f1],clearCallback:"empty",brushAlgo:"simple",withFrameSelection:!1,withSkeleton:!1,uiStyle:{toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8",canvasBackgroundColor:"white",canvasSelectionColor:Xt,canvasSelectionWidth:Bt,canvasSelectionPadding:0}},x1=(e,i)=>!!(e.target instanceof Node&&i)&&i.contains(e.target),b1=e=>{e.lineCap="round",e.lineJoin="round"},Le=(e,i={})=>{const{lineCap:t="round",fillColor:a="transparent",opacity:s=100,strokeColor:n=Xt,lineWidth:r=Bt,lineDash:o=0}=i;e.lineCap=t,e.globalAlpha=s/100,e.fillStyle=a,e.strokeStyle=n,e.lineWidth=r,e.setLineDash(o===0?[]:[Ut[o][0]r,Ut[o][1]r])},wt=(e,i,t,a)=>{e.save(),e.scale(i.canvasSize.scaleRatio,i.canvasSize.scaleRatio),e.translate(i.canvasOffset[0],i.canvasOffset[1]),t&&a&&(e.translate(a[0],a[1]),e.rotate(t),e.translate(-a[0],-a[1]))},Je=e=>{const i=new Path2D;return i.rect(e.x,e.y,e.width,e.height),i},Ke=e=>{const i=new Path2D;return i.arc(e.x,e.y,e.radius,0,2Math.PI),i},kt=e=>{const i=new Path2D;return i.moveTo(...e.points[0]),i.lineTo(...e.points[1]),i},pi=e=>{const i=new Path2D;return i.moveTo(...e.points[0]),i.lineTo(...e.points[1]),i.lineTo(...e.points[2]),i.lineTo(...e.points[0]),i},Mt=(e,i,t,a=!1)=>{const{borders:s}=O(i,t);return{border:Je(s),shapePath:e,anchors:[...i.points.map((n,r)=>a&&r>0&&r<i.points.length-1?Je({x:n[0]-7,y:n[1]-7,width:ve/t.canvasSize.scaleRatio,height:ve/t.canvasSize.scaleRatio}):Ke({x:n[0],y:n[1],radius:7/t.canvasSize.scaleRatio}))]}},jt=e=>180e/Math.PI,S1=(e,i)=>{const t=i.x-Math.min(Math.max(i.x,e.x),e.x+e.width),a=i.y-Math.min(Math.max(i.y,e.y),e.y+e.height);return Math.sqrt(tt+aa)<=i.radius},ie=({origin:e=[0,0],point:i,rotation:t})=>{const a=[i[0]-e[0],i[1]-e[1]],s=a[1]Math.cos(t)-a[0]Math.sin(t);return[a[1]Math.sin(t)+a[0]Math.cos(t)+e[0],s+e[1]]},C1=e=>(e+2Math.PI)%(2Math.PI),w1=({targetVector:[e,i],radian:t=!0,originVector:a})=>{const s=C1(Math.atan2(i[1]-e[1],i[0]-e[0]));if(a){const[n,r]=a,o=Math.atan2(r[1]-n[1],r[0]-n[0]),d=C1(s-o);return t?d:jt(d)}return t?s:jt(s)},et=300,Lt=(e,i)=>{const t={...i};for(const a of e)delete t[a];return t},_=(e,i,t)=>{const a=Array.isArray(t)?[...t]:{...t},s=Array.isArray(e)?e:typeof e=="string"?e.split("."):[e];return s.reduce((n,r,o)=>(n[r]=Vt(n[r])?{...n[r]}:Array.isArray(n[r])?[...n[r]]:n[r]===void 0\|\|n[r]===null?{}:n[r],o===s.length-1&&(n[r]=i),n[r]),a),a},Vt=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,he=(e,i,t)=>{if(!Vt(i)\|\|!Vt(t))return t;const a={...i};for(const s in t)t.hasOwnProperty(s)&&(a.hasOwnProperty(s)?a[s]=e(a[s],t[s],s)??he(e,a[s],t[s]):a[s]=t[s]);return a},k1=(e,i)=>{if(e===i)return!0;if(typeof e!="object"\|\|typeof i!="object"\|\|e===null\|\|i===null)return!1;const t=Object.keys(e),a=Object.keys(i);if(t.length!==a.length)return!1;for(const s of t)if(!a.includes(s)\|\|!k1(e[s],i[s]))return!1;return!0},Pt={},B=(e="")=>(Pt[e]\|\|(Pt[e]=0),`${e}${++Pt[e]}`),Ee=(e,i)=>{const t=((a,{brushAlgo:s})=>{if(a.points.length<1\|\|a.style?.strokeColor==="transparent")return;const n=a.points.flat(),r=n.map(h=>h[0]),o=n.map(h=>h[1]),d=Math.min(...r),u=Math.min(...o),c=new Path2D;for(const h of a.points){if(!h.length)return;if(h.length===1)c.rect(...de(h[0],d,u,a.scaleX,a.scaleY),1,1);else if(c.moveTo(...de(h[0],d,u,a.scaleX,a.scaleY)),s==="quadratic"){for(let p=0;p<h.slice(1).length-2;p++){const f=de(h[p],d,u,a.scaleX,a.scaleY),v=de(h[p+1],d,u,a.scaleX,a.scaleY),S=(f[0]+v[0])/2,k=(f[1]+v[1])/2;c.quadraticCurveTo(...f,S,k)}c.quadraticCurveTo(...de(h[h.length-2],d,u,a.scaleX,a.scaleY),...de(h[h.length-1],d,u,a.scaleX,a.scaleY))}else for(const p of h.slice(1))c.lineTo(...de(p,d,u,a.scaleX,a.scaleY))}return c})(e,i);return{...e,path:t,selection:Re(t,e,i)}},gi=Ee,Ce=(e,i=2)=>Math.round(e10i)/10i,de=(e,i,t,a=1,s=1)=>[i+(e[0]-i)a,t+(e[1]-t)s],D=(e,i,t=0)=>{if(!i.gridFormat)return Ce(e);const a=e+t,s=a>=0?je[i.gridFormat-1]:-je[i.gridFormat-1];return a+s/2-(a+s/2)%s-t},fi=(e,i,t=0)=>i.gridFormat?e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18):Ce(e,3),vi=(e,i,t,a,s,n)=>{switch(a.mode){case"brush":return((r,o,d)=>{const u={...r,points:_(r.points.length-1,[...r.points[r.points.length-1],[Math.round(o[0]),Math.round(o[1])]],r.points)};return Ee(u,d)})(i,t,s);case"translate":return Zt(t,a.originalShape,a.cursorStartPosition,s);case"rotate":return Zi(i,t,a.originalShape,a.cursorStartPosition,a.center,s);case"resize":return Fi(e,i,t,a.originalShape,a,s,n);default:return i}},Re=(e,i,t)=>{const{borders:a}=O(i,t);return{border:Je(a),shapePath:e,line:kt({points:[[a.x+a.width/2,a.y],[a.x+a.width/2,a.y-23/t.canvasSize.scaleRatio]]}),anchors:[Ke({x:a.x+a.width/2,y:a.y-23/t.canvasSize.scaleRatio,radius:7/t.canvasSize.scaleRatio}),...Yt.map(s=>Ke({x:a.x+a.widths[0],y:a.y+a.heights[1],radius:7/t.canvasSize.scaleRatio}))]}},M1=({borderStart:e,borderSize:i,vector:t,settings:a,invertedAxe:s,anchor:n})=>{switch(n){case 0:{if(s){const o=i-2a.selectionPadding;return[e+o,t-o]}const r=Math.max(2a.selectionPadding,i-t);return[e+i-r,r]}case .5:return[e,i];case 1:if(s){const r=i+t;return[e+r,2a.selectionPadding-r]}return[e,Math.max(2a.selectionPadding,i+t)];default:return[0,0]}},j1=({borderX:e,borderWidth:i,borderY:t,borderHeight:a,center:s,originalShape:n})=>{const r=[e+i/2-s[0],t+a/2-s[1]],[o,d]=ie({point:r,rotation:-n.rotation});return{borderX:Ce(e+o-r[0]),borderWidth:Ce(i),borderY:Ce(t+d-r[1]),borderHeight:Ce(a)}},Ne=(e,i,t,a,s=!1)=>{const{center:n,borders:r}=O(i,a),o=ie({origin:n,point:e,rotation:i.rotation}),d=t.anchor[0]===0&&o[0]>=r.x+r.width\|\|t.anchor[0]===1&&o[0]<=r.x,u=t.anchor[1]===0&&o[1]>=r.y+r.height\|\|t.anchor[1]===1&&o[1]<=r.y,c=[D(o[0],a,t.anchor[0]===0&&!d\|\|t.anchor[0]===1&&d?a.selectionPadding:-a.selectionPadding),D(o[1],a,t.anchor[1]===0&&!u\|\|t.anchor[1]===1&&u?a.selectionPadding:-a.selectionPadding)],h=a.gridFormat?[t.anchor[0]===0?r.x:t.anchor[0]===.5?r.x+r.width/2:r.x+r.width,t.anchor[1]===0?r.y:t.anchor[1]===.5?r.y+r.height/2:r.y+r.height]:ie({origin:n,point:t.cursorStartPosition,rotation:i.rotation}),p=[c[0]-h[0],c[1]-h[1]],[f,v]=M1({borderStart:r.x,borderSize:r.width,vector:p[0],settings:a,invertedAxe:d,anchor:t.anchor[0]}),[S,k]=M1({borderStart:r.y,borderSize:r.height,vector:p[1],settings:a,invertedAxe:u,anchor:t.anchor[1]});if(s){const b=((Z,x,j,T,N,F,H,M,P,L)=>{const{selectionPadding:w}=L,E=(x.width-2w\|\|1)/(x.height-2w\|\|1),m=(N-2w)/(H-2w);let y,Q,C,V;return P.anchor[0]!==.5&&P.anchor[1]!==.5?m<E?(Q=F,V=H,C=(H-2w)E+2w,y=P.anchor[0]===0?x.width-Z[0]>w?x.x+(x.width-C):x.x+x.width-2w:x.width+Z[0]>w?x.x:x.x-C+2w):(y=T,C=N,V=(N-2w)/E+2w,Q=P.anchor[1]===0?x.height-Z[1]>w?x.y+(x.height-V):x.y+x.height-2w:x.height+Z[1]>w?x.y:x.y-V+2w):P.anchor[0]!==.5?(y=T,C=N,V=(N-2w)/E+2w,Q=x.y+(x.height-V)/2):(Q=F,V=H,C=(H-2w)E+2w,y=x.x+(x.width-C)/2),{borderX:y,borderWidth:C,borderY:Q,borderHeight:V,center:j,originalShape:M}})(p,r,n,f,v,S,k,i,t,a);return j1(b)}return j1({borderX:f,borderWidth:v,borderY:S,borderHeight:k,center:n,originalShape:i})},tt=(e,i)=>{const t=Ke(e);return{...e,path:t,selection:Re(t,e,i)}},mi=tt,Ht=(e,i,t)=>{const{clientX:a=0,clientY:s=0}="touches"in e&&e.touches[0]?e.touches[0]:"changedTouches"in e&&e.changedTouches[0]?e.changedTouches[0]:"clientX"in e?e:{},n=i?.getBoundingClientRect()??{left:0,top:0,width:t.canvasSize.width,height:t.canvasSize.height};return[(a-n.left)(t.canvasSize.width/n.width)/t.canvasSize.scaleRatio,(s-n.top)(t.canvasSize.height/n.height)/t.canvasSize.scaleRatio]},L1=e=>"touches"in e,Ve=(e,i,[t,a],[s,n])=>ie({origin:[t-s,a-n],point:e,rotation:i}),it=(e,i,t)=>t?S1(e,{x:i[0],y:i[1],radius:t}):((a,s)=>s[0]>=a.x&&s[0]<=a.x+a.width&&s[1]>=a.y&&s[1]<=a.y+a.height)(e,i),Oe=(e,i,t,a=!1,s=0)=>{if(e.locked)return!1;const{canvasSize:{scaleRatio:n}}=t,{borders:r,center:o}=O(e,t),d=Ve(i,e.rotation,o,t.canvasOffset);if(a)if(e.type==="line"\|\|e.type==="polygon"\|\|e.type==="curve"){for(let u=0;u<e.points.length;u++)if(it({x:e.points[u][0]-7/n,y:e.points[u][1]-7/n,width:ve/n,height:ve/n},d,s))return{mode:"resize",anchor:u}}else{if(it({x:r.x+r.width/2-7/n,y:r.y-ve/n-16/n,width:ve/n,height:ve/n},d,s))return{mode:"rotate"};for(const u of Yt)if(it({x:r.x+r.widthu[0]-7/n,y:r.y+r.heightu[1]-7/n,width:ve/n,height:ve/n},d,s))return{mode:"resize",anchor:u}}return!!it(r,d,s)&&{mode:"translate"}},V1=(e,i,t,a)=>{if(i.locked)return!1;const{center:s}=O(i,a),n=Ve(t,i.rotation,s,a.canvasOffset);return"path"in i&&i.path?i.style?.fillColor&&i.style?.fillColor!=="transparent"?!!e.isPointInPath(i.path,n[0],n[1])&&{mode:"translate"}:(e.lineWidth=(i.style?.lineWidth??0)+15,!!e.isPointInStroke(i.path,n[0],n[1])&&{mode:"translate"}):Oe(i,t,a,!1)};function P1(e,i){const t=Math.max(e.x,i.x),a=Math.max(e.y,i.y),s=Math.min(e.x+(e.width\|\|1),i.x+(i.width\|\|1)),n=Math.min(e.y+(e.height\|\|1),i.y+(i.height\|\|1));if(t<s&&a<n)return{x:t,y:a,width:s-t,height:n-a}}const H1=({ctx:e,path:i,rect:t,offset:a,checkFill:s})=>{for(let n=0;n<a;n+=a/2)for(let r=0;r<a;r+=a/2)for(let o=n+t.x;o<t.x+t.width;o+=a)for(let d=r+t.y;d<t.y+t.height;d+=a)if(s?e.isPointInPath(i,o,d):e.isPointInStroke(i,o,d))return!0;return!1},De=(e,i)=>{const t=(a=>{if(a.points.length<1)return;const s=new Path2D;s.moveTo(...a.points[0]);for(const n of a.points.slice(1))s.lineTo(...n);return s.lineTo(...a.points[0]),s})(e);return{...e,path:t,selection:Mt(t,e,i)}},yi=De,T1=(e,i)=>{const t=Math.min(...e.points.map(n=>n[0]))-i.selectionPadding,a=Math.max(...e.points.map(n=>n[0]))+i.selectionPadding,s=Math.min(...e.points.map(n=>n[1]))-i.selectionPadding;return{x:t,width:a-t,y:s,height:Math.max(...e.points.map(n=>n[1]))+i.selectionPadding-s}},Ie=(e,i)=>{const t=(a=>{if(a.points.length<3)return;const s=new Path2D;s.moveTo(...a.points[0]);for(let n=1;n<a.points.length-1;n++)s.quadraticCurveTo(...a.points[n],a.points.length-2===n?a.points[n+1][0]:(a.points[n+1][0]-a.points[n][0])/2+a.points[n][0],a.points.length-2===n?a.points[n+1][1]:(a.points[n+1][1]-a.points[n][1])/2+a.points[n][1]);return s})(e);return{...e,path:t,selection:Mt(t,e,i,!0)}},Qi=Ie,xi=T1,at=(e,i)=>{const t=(a=>{const s=new Path2D;return s.ellipse(a.x,a.y,a.radiusX,a.radiusY,0,0,2Math.PI),s})(e);return{...e,path:t,selection:Re(t,e,i)}},bi=at,A1=e=>{return t={...e,type:"triangle"},{...t,path:pi(t)};var t},Si=(e,i)=>{e.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&e.fill(i.path),i.style?.strokeColor!=="transparent"&&e.stroke(i.path))},nt=(e,i)=>{const t=[];let a;if(e.style?.lineArrow===1\|\|e.style?.lineArrow===2\|\|e.style?.lineArrow===3){const s=Math.PI/2-w1({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3\|\|t.push(A1(Z1(e.points[0],s,e.style))),e.style?.lineArrow!==2&&e.style?.lineArrow!==3\|\|t.push(A1(Z1(e.points[1],s+Math.PI,e.style)));const n=(({line:r,size:o,direction:d})=>{const u=Math.PI/2-w1({targetVector:[r.points[0],r.points[1]]}),c=[r.points[0][0]+(r.points[1][0]-r.points[0][0])/2,r.points[0][1]+(r.points[1][1]-r.points[0][1])/2];let h,p;if(["start","both"].includes(d)){const f=ie({point:r.points[0],origin:c,rotation:-u});h=ie({point:[f[0],f[1]+o],origin:c,rotation:u})}else h=[...r.points[0]];if(["end","both"].includes(d)){const f=ie({point:r.points[1],origin:c,rotation:-u});p=ie({point:[f[0],f[1]-o],origin:c,rotation:u})}else p=[...r.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"});a=kt(n)}else a=kt(e);return{...e,path:a,selection:Mt(a,e,i),arrows:t,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"}}},Ci=nt,Z1=(e,i,t)=>{const a=[ie({point:[0,0],rotation:i}),ie({point:[-(5+(t.lineWidth??0)),10+2(t.lineWidth??0)],rotation:i}),ie({point:[5+(t.lineWidth??0),10+2(t.lineWidth??0)],rotation:i})];return{points:[[e[0]+a[0][0],e[1]+a[0][1]],[e[0]+a[1][0],e[1]+a[1][1]],[e[0]+a[2][0],e[1]+a[2][1]]],style:{...t,fillColor:t.strokeColor,strokeColor:"transparent"}}},st=e=>e.filter(i=>i!=null),wi=e=>{const i=["img","id","selection","path","arrows"];return e.map(t=>t.type!=="picture"\|\|t.src.startsWith("http")?Lt(i,t):Lt(i,{...t,src:ki(t.img)}))},F1=(e,i,t)=>({shapes:wi(e),config:{width:i,height:t}}),E1=(e,i)=>Ue({...e,id:B(`${e.type}_`)},i),R1=e=>{const i=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0],t=i.getAttribute("width"),a=i.getAttribute("height");let s;if(t\|\|a)s=e;else{const r=i.getAttribute("viewBox")??"0 0 300 300",[,,o,d]=r.split(" ");i.setAttribute("width",o??et),i.setAttribute("height",d??et),s=new XMLSerializer().serializeToString(i)}const n=new Blob([s],{type:"image/svg+xml"});return URL.createObjectURL(n)},N1=e=>(e instanceof File?e.name:e).includes(".svg"),D1=e=>N1(e)?fetch(e).then(i=>i.text()).then(i=>R1(i)):fetch(e).then(i=>i.blob()).then(i=>URL.createObjectURL(i)),I1=(e,i)=>{const t=document.createElement("a");t.href=e,t.download=i,document.body.appendChild(t),t.click(),document.body.removeChild(t)},ki=e=>{const i=document.createElement("canvas");i.width=e.width,i.height=e.height;const t=i.getContext("2d");return t?(t.drawImage(e,0,0),i.toDataURL("image/png")):""},W1=(e,i,t,a)=>{const s=document.createElement("canvas");s.width=i,s.height=t;const n=s.getContext("2d");if(!n)return"";n.clearRect(0,0,i,t),b1(n);for(let r=e.length-1;r>=0;r--)B1(n,e[r],_(["canvasSize","scaleRatio"],1,a));return s.toDataURL("image/png")},Mi=(e,i,t)=>{return s=F1(e,i,t),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(s))}`;var s},ot=(e,i)=>{const t=Je(e);return{...e,path:t,selection:Re(t,e,i)}},ji=ot,Li=(e,i)=>{e.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&e.fill(i.path),i.style?.strokeColor!=="transparent"&&e.stroke(i.path))},z1=(e,i)=>({x:e.x-i.selectionPadding,width:e.width+2i.selectionPadding,y:e.y-i.selectionPadding,height:e.height+2i.selectionPadding}),$1=(e,i,t,a,[s,n]=[!1,!1])=>((r,o,[d,u],[c,h])=>ie({origin:[d-c,u-h],point:r,rotation:-o}))([e[0]===.5?t.x+t.width/2:e[0]===0?t.x+(s?0:t.width):t.x+(s?t.width:0),e[1]===.5?t.y+t.height/2:e[1]===0?t.y+(n?0:t.height):t.y+(n?t.height:0)],t.rotation,i,a.canvasOffset),rt=(e,i)=>({...e,selection:Re(void 0,e,i)}),Vi=rt,O1=(e,i,t,a,s)=>{const[n,r]=((o,d,u,c,h=!1)=>{if(!(o&&d&&c&&u))return[et,et];const p=o/d;if(p>u/c){const v=h?u:Math.min(o,u);return[v,v/p]}const f=h?c:Math.min(d,c);return[fp,f]})(e.width,e.height,t,a,!0);return rt({toolId:xt.id,type:"picture",id:B("picture_"),x:(t-n)/2,y:(a-r)/2,width:n,height:r,src:i,img:e,rotation:0},s)},Pi=(e,i,t,a)=>new Promise((s,n)=>{const r=new Image;r.onerror=()=>{n(new Error("Some images could not be loaded"))},setTimeout(()=>{n(new Error("Timeout while loading images"))},4e3),e instanceof File?((o,d,u,c,h,p)=>{const f=URL.createObjectURL(u);o.onload=async()=>{if(URL.revokeObjectURL(o.src),N1(u)&&!o.width&&!o.height){const S=await u.text(),k=R1(S);if(f===o.src)return void(o.src=k)}const v=O1(o,o.src,c,h,p);d(v)},o.src=f})(r,s,e,i,t,a):((o,d,u,c,h,p)=>{o.onload=()=>{URL.revokeObjectURL(o.src);const f=O1(o,u,c,h,p);d(f)},D1(u).then(f=>{o.src=f}).catch(()=>{o.src=""})})(r,s,e,i,t,a)}),Tt=["Texte"],lt=(e,i)=>({...e,selection:Re(void 0,e,i)}),Hi=lt,At=(e,i,t,a,s,n=$e)=>{e.font=`${s?"italic":""} ${a?"bold":""} 1px ${n}`;const r=i.map(o=>t/e.measureText(o).width);return Math.min(...r)\|\|36},Ti=(e,i,t,a)=>{const s={...i,value:t},n=((v,S,k,b,Z,x=$e)=>{v.font=`${Z?"italic":""} ${b?"bold":""} ${k}px ${x}`;const j=S.map(T=>v.measureText(T).width);return Math.max(...j)\|\|20})(e,s.value,s.fontSize,s.style?.fontBold??!1,s.style?.fontItalic??!1,s.style?.fontFamily),r=s.fontSizes.value.length,o={...s,width:n,height:r},{center:d}=O(i,a),{center:u}=O(o,a),[c,h]=$1([1,1],d,i,a),[p,f]=$1([1,1],u,o,a,[!1,!1]);return{...o,x:o.x-(p-c),y:o.y-(f-h)}},U1=(e,i,t,a)=>{const s=[D(t[0],a),D(t[1],a)];switch(i.type){case"brush":return((n,r,o)=>Ee({toolId:n.id,type:n.type,id:B(`${n.type}_`),points:[[r]],rotation:0,scaleX:1,scaleY:1,style:{opacity:n.settings.opacity.default,strokeColor:n.settings.strokeColor.default,lineWidth:n.settings.lineWidth.default,lineDash:n.settings.lineDash.default}},o))(i,s,a);case"line":return((n,r,o)=>{const d={toolId:n.id,type:n.type,id:B(`${n.type}_`),points:[r,r],rotation:0,style:{opacity:n.settings.opacity.default,strokeColor:n.settings.strokeColor.default,lineWidth:n.settings.lineWidth.default,lineDash:n.settings.lineDash.default,lineArrow:n.settings.lineArrow.default}};return nt(d,o)})(i,s,a);case"polygon":return((n,r,o)=>De({toolId:n.id,type:n.type,id:B(`${n.type}_`),points:new Array(n.settings.pointsCount.default).fill(r),rotation:0,style:{opacity:n.settings.opacity.default,fillColor:n.settings.fillColor.default,strokeColor:n.settings.strokeColor.default,lineWidth:n.settings.lineWidth.default,lineDash:n.settings.lineDash.default,pointsCount:n.settings.pointsCount.default}},o))(i,s,a);case"curve":return((n,r,o)=>Ie({toolId:n.id,type:n.type,id:B(`${n.type}_`),points:new Array(n.settings.pointsCount.default).fill(r),rotation:0,style:{opacity:n.settings.opacity.default,fillColor:n.settings.fillColor.default,strokeColor:n.settings.strokeColor.default,lineWidth:n.settings.lineWidth.default,lineDash:n.settings.lineDash.default,pointsCount:n.settings.pointsCount.default}},o))(i,s,a);case"rect":case"square":return((n,r,o,d=0,u=0)=>{const c={toolId:n.id,type:n.type,id:B(`${n.type}_`),x:r[0],y:r[1],width:d,height:u,rotation:0,style:{opacity:n.settings.opacity.default,fillColor:n.settings.fillColor.default,strokeColor:n.settings.strokeColor.default,lineWidth:n.settings.lineWidth.default,lineDash:n.settings.lineDash.default}};return ot(c,o)})(i,s,a);case"text":return((n,r,o,d)=>{const u=At(n,Tt,50,r.settings?.fontBold.default??!1,r.settings?.fontItalic.default??!1,r.settings.fontFamily.default);return lt({toolId:r.id,type:r.type,id:B(`${r.type}_`),x:o[0],y:o[1],value:Tt,fontSize:u,width:50,height:u(Tt.length\|\|1),rotation:0,style:{opacity:r.settings.opacity.default,strokeColor:r.settings.strokeColor.default,fontFamily:r.settings.fontFamily.default,fontItalic:r.settings.fontItalic.default,fontBold:r.settings.fontBold.default}},d)})(e,i,s,a);case"ellipse":return((n,r,o)=>at({toolId:n.id,type:n.type,id:B(`${n.type}_`),x:r[0],y:r[1],radiusX:0,radiusY:0,rotation:0,style:{opacity:n.settings.opacity.default,fillColor:n.settings.fillColor.default,strokeColor:n.settings.strokeColor.default,lineWidth:n.settings.lineWidth.default,lineDash:n.settings.lineDash.default}},o))(i,s,a);case"circle":return((n,r,o)=>tt({toolId:n.id,type:n.type,id:B(`${n.type}_`),x:r[0],y:r[1],radius:0,rotation:0,style:{opacity:n.settings.opacity.default,fillColor:n.settings.fillColor.default,strokeColor:n.settings.strokeColor.default,lineWidth:n.settings.lineWidth.default,lineDash:n.settings.lineDash.default}},o))(i,s,a)}},B1=(e,i,t)=>{if(i.visible===!1)return;const{center:a}=O(i,t);switch(wt(e,t,i.rotation,a),Le(e,i.style),i.type){case"brush":((s,n)=>{n.points.length<1\|\|!n.path\|\|s.globalAlpha!==0&&n.style?.strokeColor!=="transparent"&&s.globalAlpha!==0&&s.stroke(n.path)})(e,i);break;case"text":((s,n)=>{if(s.globalAlpha!==0&&n.style?.strokeColor&&n.style.strokeColor!=="transparent"){s.font=`${n.style?.fontItalic?"italic":""} ${n.style?.fontBold?"bold":""} ${n.fontSize}px ${n.style?.fontFamily??$e}`,s.textBaseline="top",s.fillStyle=n.style.strokeColor;for(let r=0;r<n.value.length;r++)s.fillText(n.value[r],n.x,n.y+rn.fontSize,n.width)}})(e,i);break;case"line":((s,n)=>{if(s.globalAlpha!==0&&n.path){n.style?.fillColor!=="transparent"&&s.fill(n.path),n.style?.strokeColor!=="transparent"&&s.stroke(n.path);for(const r of n.arrows??[])Le(s,r.style),Si(s,r)}})(e,i);break;case"polygon":((s,n)=>{n.path&&s.globalAlpha!==0&&(n.style?.fillColor!=="transparent"&&s.fill(n.path),n.style?.strokeColor!=="transparent"&&s.stroke(n.path))})(e,i);break;case"curve":((s,n)=>{n.path&&s.globalAlpha!==0&&(n.style?.fillColor!=="transparent"&&s.fill(n.path),n.style?.strokeColor!=="transparent"&&s.stroke(n.path))})(e,i);break;case"circle":((s,n)=>{s.globalAlpha!==0&&n.path&&(n.style?.fillColor!=="transparent"&&s.fill(n.path),n.style?.strokeColor!=="transparent"&&s.stroke(n.path))})(e,i);break;case"ellipse":((s,n)=>{s.globalAlpha!==0&&n.path&&(n.style?.fillColor!=="transparent"&&s.fill(n.path),n.style?.strokeColor!=="transparent"&&s.stroke(n.path))})(e,i);break;case"rect":case"square":Li(e,i);break;case"picture":((s,n)=>{s.globalAlpha!==0&&(s.beginPath(),s.drawImage(n.img,n.x,n.y,n.width,n.height))})(e,i)}e.restore()},Ai=(e,i)=>{switch(e.type){case"brush":return((t,{selectionPadding:a})=>{const s=t.points.flat(),n=Math.min(...s.map(c=>c[0])),r=Math.min(...s.map(c=>c[1])),o=s.map(c=>de(c,n,r,t.scaleX,t.scaleY)),d=Math.max(...o.map(c=>c[0]))+a,u=Math.max(...o.map(c=>c[1]))+a;return{x:n-a,width:d-n+a,y:r-a,height:u-r+a}})(e,i);case"line":return((t,a)=>({x:Math.min(t.points[0][0],t.points[1][0])-a.selectionPadding,width:Math.abs(t.points[0][0]-t.points[1][0])+2a.selectionPadding,y:Math.min(t.points[0][1],t.points[1][1])-a.selectionPadding,height:Math.abs(t.points[0][1]-t.points[1][1])+2a.selectionPadding}))(e,i);case"polygon":return T1(e,i);case"curve":return xi(e,i);case"circle":return((t,a)=>({x:t.x-t.radius-a.selectionPadding,width:2(t.radius+a.selectionPadding),y:t.y-t.radius-a.selectionPadding,height:2(t.radius+a.selectionPadding)}))(e,i);case"ellipse":return((t,a)=>({x:t.x-t.radiusX-a.selectionPadding,width:2(t.radiusX+a.selectionPadding),y:t.y-t.radiusY-a.selectionPadding,height:2(t.radiusY+a.selectionPadding)}))(e,i);case"rect":case"square":return z1(e,i);case"text":return((t,a)=>({x:t.x-a.selectionPadding,width:t.width+2a.selectionPadding,y:t.y-a.selectionPadding,height:t.height+2a.selectionPadding}))(e,i);case"picture":return((t,a)=>z1(t,a))(e,i);default:return{x:0,y:0,width:100,height:100}}},O=(e,i)=>{const t=Ai(e,i),a=(s=>[s.x+s.width/2,s.y+s.height/2])(t);return{borders:t,center:a}},Zi=(e,i,t,a,s,n)=>{const r=s[0]-a[0],o=s[1]-a[1],d=s[0]-i[0],u=s[1]-i[1],c=t.rotation+Math.atan2(u,d)-Math.atan2(o,r);return{...e,rotation:fi(c,n)}},Fi=(e,i,t,a,s,n,r)=>{switch(a.type){case"line":return((o,d,u,c)=>{const h=[D(o[0],c),D(o[1],c)],{center:p}=O(d,c),f=Ve(h,d.rotation,p,c.canvasOffset),v=_(["points",u.anchor],f,d);return nt(v,c)})(t,a,s,n);case"polygon":return((o,d,u,c)=>{const h=[D(o[0],c),D(o[1],c)],{center:p}=O(d,c),f=Ve(h,d.rotation,p,c.canvasOffset),v=_(["points",u.anchor],f,d);return De(v,c)})(t,a,s,n);case"curve":return((o,d,u,c)=>{const h=[D(o[0],c),D(o[1],c)],{center:p}=O(d,c),f=Ve(h,d.rotation,p,c.canvasOffset),v=_(["points",u.anchor],f,d);return Ie(v,c)})(t,a,s,n);case"brush":return((o,d,u,c,h)=>{const{borders:p}=O({...d,scaleX:1,scaleY:1},c),{borders:f}=O(d,c),{borderX:v,borderHeight:S,borderY:k,borderWidth:b}=Ne(o,d,u,c,h),Z=Math.max(0,p.width-2c.selectionPadding),x=Math.max(0,p.height-2c.selectionPadding),j=Math.max(0,b-2c.selectionPadding),T=Math.max(0,S-2c.selectionPadding),N=Z?j/Z:1,F=x?T/x:1;if(!Z\|\|!x)return d;const H=Ce(v-f.x),M=Ce(k-f.y);return Ee({...d,points:d.points.map(P=>P.map(([L,w])=>[L+H,w+M])),scaleX:N,scaleY:F},c)})(t,a,s,n,r);case"circle":return((o,d,u,c)=>{const{borderX:h,borderHeight:p,borderY:f,borderWidth:v}=Ne(o,d,u,c,!0);return tt({...d,radius:Math.max(0,v/2-c.selectionPadding),x:h+v/2,y:f+p/2},c)})(t,a,s,n);case"ellipse":return((o,d,u,c,h=!1)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:S}=Ne(o,d,u,c,h);return at({...d,radiusX:Math.max(0,S/2-c.selectionPadding),radiusY:Math.max(0,f/2-c.selectionPadding),x:p+S/2,y:v+f/2},c)})(t,a,s,n,r);case"rect":case"square":return((o,d,u,c,h=!1)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:S}=Ne(o,d,u,c,h);return ot({...d,width:Math.max(0,S-2c.selectionPadding),height:Math.max(0,f-2c.selectionPadding),x:p+c.selectionPadding,y:v+c.selectionPadding},c)})(t,a,s,n,i.type==="square"\|\|r);case"text":return((o,d,u,c,h)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:S}=Ne(d,u,c,h,!0),k=lt({...u,width:Math.max(0,S-2h.selectionPadding),height:Math.max(0,f-2h.selectionPadding),x:p+h.selectionPadding,y:v+h.selectionPadding},h);return{...k,fontSize:At(o,k.value,k.width,k.style?.fontBold??!1,k.style?.fontItalic??!1,k.style?.fontFamily)}})(e,t,a,s,n);case"picture":return((o,d,u,c,h)=>{const{borderX:p,borderHeight:f,borderY:v,borderWidth:S}=Ne(o,d,u,c,!0);return rt({...d,width:Math.max(0,S-2c.selectionPadding),height:Math.max(0,f-2c.selectionPadding),x:p+c.selectionPadding,y:v+c.selectionPadding},c)})(t,a,s,n);default:return a}},Zt=(e,i,t,a)=>{switch(i.type){case"rect":case"square":return((s,n,r,o)=>ot({...n,x:D(n.x+s[0]-r[0],o),y:D(n.y+s[1]-r[1],o)},o))(e,i,t,a);case"ellipse":return((s,n,r,o)=>at({...n,x:D(n.x+s[0]-r[0],o),y:D(n.y+s[1]-r[1],o)},o))(e,i,t,a);case"circle":return((s,n,r,o)=>tt({...n,x:D(n.x+s[0]-r[0],o),y:D(n.y+s[1]-r[1],o)},o))(e,i,t,a);case"picture":return((s,n,r,o)=>rt({...n,x:D(n.x+s[0]-r[0],o),y:D(n.y+s[1]-r[1],o)},o))(e,i,t,a);case"text":return((s,n,r,o)=>lt({...n,x:D(n.x+s[0]-r[0],o),y:D(n.y+s[1]-r[1],o)},o))(e,i,t,a);case"line":return((s,n,r,o)=>nt({...n,points:n.points.map(([d,u])=>[D(d+s[0]-r[0],o),D(u+s[1]-r[1],o)])},o))(e,i,t,a);case"polygon":return((s,n,r,o)=>{const{borders:d}=O(n,o);return De({...n,points:n.points.map(([u,c])=>o.gridFormat?[u+D(d.x+s[0]-r[0],o)-d.x,c+D(d.y+s[1]-r[1],o)-d.y]:[D(u+s[0]-r[0],o),D(c+s[1]-r[1],o)])},o)})(e,i,t,a);case"curve":return((s,n,r,o)=>{const{borders:d}=O(n,o);return Ie({...n,points:n.points.map(([u,c])=>o.gridFormat?[u+D(d.x+s[0]-r[0],o)-d.x,c+D(d.y+s[1]-r[1],o)-d.y]:[D(u+s[0]-r[0],o),D(c+s[1]-r[1],o)])},o)})(e,i,t,a);case"brush":return((s,n,r,o)=>{const{borders:d}=O(n,o),u=o.gridFormat?D(d.x+s[0]-r[0],o)-d.x:s[0]-r[0],c=o.gridFormat?D(d.y+s[1]-r[1],o)-d.y:s[1]-r[1];return Ee({...n,points:n.points.map(h=>h.map(([p,f])=>[p+u,f+c]))},o)})(e,i,t,a);default:return i}},Ue=(e,i)=>{switch(e.type){case"rect":case"square":return ji(e,i);case"ellipse":return bi(e,i);case"circle":return mi(e,i);case"picture":return Vi(e,i);case"text":return Hi(e,i);case"line":return Ci(e,i);case"polygon":return yi(e,i);case"curve":return Qi(e,i);case"brush":return gi(e,i);default:return e}},X1=({ctx:e,shape:i,settings:t,selectionWidth:a,selectionColor:s,withAnchors:n=!0})=>{const{center:r}=O(i,t);switch(wt(e,t,i.rotation,r),i.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((o,d,u,c,h,p)=>{if(d.selection&&(Le(o,{fillColor:"transparent",strokeColor:u,lineWidth:c/h.canvasSize.scaleRatio}),d.selection.shapePath?o.stroke(d.selection.shapePath):o.stroke(d.selection.border),p&&!d.locked)){d.selection.shapePath&&o.stroke(d.selection.border),o.stroke(d.selection.line),Le(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/h.canvasSize.scaleRatio});for(const f of d.selection.anchors)o.fill(f),o.stroke(f)}})(e,i,s,a,t,n);break;case"polygon":case"line":case"curve":(({ctx:o,shape:d,withAnchors:u,selectionWidth:c,selectionColor:h,settings:p})=>{if(d.selection&&(Le(o,{fillColor:"transparent",strokeColor:h,lineWidth:c/p.canvasSize.scaleRatio}),d.selection.shapePath&&o.stroke(d.selection.shapePath),u&&!d.locked)){Le(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio});for(const f of d.selection.anchors)o.fill(f),o.stroke(f)}})({ctx:e,shape:i,withAnchors:n,selectionWidth:a,selectionColor:s,settings:t})}e.restore()},Ei=({ctx:e,selectionFrame:i,settings:t})=>{wt(e,t),((a,s,n)=>{Le(a,{fillColor:"rgba(170,170,170, 0.1)",strokeColor:"rgb(170,170,170)",lineWidth:1/n.canvasSize.scaleRatio}),a.fillRect(s[0][0],s[0][1],s[1][0]-s[0][0],s[1][1]-s[0][1]),a.strokeRect(s[0][0],s[0][1],s[1][0]-s[0][0],s[1][1]-s[0][1])})(e,i,t),e.restore()},Y1="ArrowUp",q1="ArrowDown",_1="ArrowLeft",G1="ArrowRight",Ri="Delete",Ni="Backspace",Di="Escape",J1="Shift",Ii="z",Wi="Z",zi="y",$i="Y",K1="copy",ei="paste",Oi=({isInsideComponent:e,selectedShape:i,isEditingText:t,settings:a,setSelectedShape:s,removeShape:n,pasteShape:r,updateShape:o,backwardShape:d,forwardShape:u,setShiftPressed:c})=>{const[h,p]=g.useState(void 0);return g.useEffect(()=>{const f=b=>{i&&(t\|\|(b.preventDefault(),p({...i})))},v=b=>{h&&(t\|\|(b.preventDefault(),r(((Z,x)=>({...Zt([20,20],Z,[0,0],x),id:B(`${Z.type}_`)}))(h,a))))},S=b=>{b.key===J1&&c(!1)},k=b=>{if(b.metaKey\|\|b.ctrlKey){if(b.key===Wi\|\|b.key===Ii)return b.preventDefault(),b.stopPropagation(),void d();if(b.key===$i\|\|b.key===zi)return b.preventDefault(),b.stopPropagation(),void u()}if(b.key===J1)return void c(!0);if(!i)return;if(b.key===Di)return void s(void 0);if(t)return;const Z={[_1]:[a.gridFormat?-je[a.gridFormat-1]:-1,0],[G1]:[a.gridFormat?je[a.gridFormat-1]:1,0],[q1]:[0,a.gridFormat?je[a.gridFormat-1]:1],[Y1]:[0,a.gridFormat?-je[a.gridFormat-1]:-1]};switch(b.key){case _1:case G1:case q1:case Y1:o(Zt(Z[b.key],i,[0,0],a));break;case Ri:case Ni:n(i)}};if(e)return document.addEventListener("keydown",k),document.addEventListener("keyup",S),document.addEventListener(K1,f),document.addEventListener(ei,v),()=>{document.removeEventListener("keydown",k),document.removeEventListener("keyup",S),document.removeEventListener(K1,f),document.removeEventListener(ei,v)}},[e,h,t,i,a,o,n,s,r,d,u,c]),{}},Ui=(e,i)=>{const t=g.useRef([]),a=g.useRef(e);a.current=e;const[s,n]=g.useState(void 0),[r,o]=g.useState(void 0),[d,u]=g.useState(void 0),[c,h]=g.useState({states:[{shapes:[],selectedShape:void 0}],cursor:0}),p=c.cursor>0,f=c.cursor<c.states.length-1,v=t.current.length>0,S=g.useCallback(()=>{h(m=>k1(m.states[m.cursor].shapes,t.current)?m:{states:[...m.states.slice(0,m.cursor+1),{shapes:t.current,selectedShape:r}],cursor:m.cursor+1})},[r]),k=g.useCallback(m=>{t.current=[m,...t.current]},[]),b=g.useCallback((m,y,Q)=>{if(m.target&&"className"in m.target&&![y1,Q1].includes(m.target.className))return void u(void 0);const C=t.current.find(V=>V.id===r?.id?!!Oe(r,Q,i):!!V1(y,V,Q,i));u(C)},[i,r]),Z=g.useCallback(async(m,y=300,Q=300)=>{const C=await Pi(m,y,Q,i);return k(C),S(),C},[k,S,i]),x=g.useCallback((m,y=!1)=>{t.current=t.current.map(Q=>Q.id===r?.id?m:Q),o(Q=>Q?.id===m.id?m:Q),y&&S()},[r,S]),j=g.useCallback(m=>{const y=m.map(Q=>Lt(["chosen"],Q));t.current=y,S()},[S]),T=g.useCallback(m=>{o(y=>y?.id===m.id?void 0:y),t.current=t.current.filter(y=>y.id!==m.id),S()},[S]),N=g.useCallback(m=>{h(y=>{const Q=m(y);return t.current=y.states[Q].shapes,o(y.states[Q].selectedShape),_("cursor",Q,y)})},[]),F=g.useCallback(()=>{N(m=>Math.max(0,m.cursor-1))},[N]),H=g.useCallback(()=>{N(m=>Math.min(m.states.length-1,m.cursor+1))},[N]),M=g.useCallback((m=[],y=!1)=>{o(void 0),t.current=m,h(Q=>y?{states:[{shapes:m,selectedShape:void 0}],cursor:0}:{states:[...Q.states.slice(0,Q.cursor+1),{shapes:m,selectedShape:void 0}],cursor:Q.cursor+1})},[]),P=g.useCallback((m,y)=>{const Q=t.current,C=Q.findIndex(W=>W.id===m),V=Q.findIndex(W=>W.id===y);j(C<V?[...Q.slice(0,C),...Q.slice(C+1,V+1),Q[C],...Q.slice(V+1,Q.length)]:[...Q.slice(0,V),Q[C],...Q.slice(V,C),...Q.slice(C+1,Q.length)])},[j]),L=g.useCallback(m=>{const y=t.current,Q=y.findIndex(V=>V.id===m.id);if(Q<0)return;const C=_("visible",m.visible===!1,m);o(V=>V?.id===C.id?C:V),j(_(Q,C,y))},[j]),w=g.useCallback(m=>{const y=t.current,Q=y.findIndex(V=>V.id===m.id);if(Q<0)return;const C=_("locked",!m.locked,m);o(V=>V?.id===C.id?C:V),j(_(Q,C,y))},[j]);g.useEffect(()=>{a.current?.()},[c]),g.useEffect(()=>{t.current=t.current.map(m=>Ue(m,i)),o(m=>m===void 0?void 0:t.current.find(y=>y.id===m.id))},[i]);const E=g.useCallback((m,y)=>{n(Q=>{const C=[Q?.[0]??[y[0],y[1]],[y[0],y[1]]],V=t.current.filter(W=>((G,R,ne,ce)=>{const{selectionPadding:K,canvasOffset:$}=ce,{center:pe,borders:ee}=O(R,ce),J=Ve(ne[0],R.rotation,pe,$),ge=Ve(ne[1],R.rotation,pe,$),we=Math.round(Math.min(J[0],ge[0])-K/2),Nt=Math.round(Math.max(J[0],ge[0])+K),ut=Math.round(Math.min(J[1],ge[1])-K/2),re={x:we,y:ut,width:Nt-we,height:Math.round(Math.max(J[1],ge[1])+K)-ut},ze=P1(ee,re);if(!ze)return!1;if(ee.width<=1\|\|ee.height<=1\|\|!("path"in R)\|\|!R.path)return!0;if(G.lineWidth=(R.style?.lineWidth??0)+10,R.type==="brush"){const Pe=R.points.flat(),Xe=Math.min(...Pe.map(se=>se[0])),te=Math.min(...Pe.map(se=>se[1]));for(const se of R.points){if(se.length<1)break;if(se.length<2){const ye=de(se[0],Xe,te,R.scaleX,R.scaleY);if(S1(ze,{x:ye[0],y:ye[1],radius:(R.style?.lineWidth??1)/2}))return!0}for(let ye=0;ye<se.length-1;ye++){const Qe=de(se[ye],Xe,te,R.scaleX,R.scaleY),fe=de(se[ye+1],Xe,te,R.scaleX,R.scaleY),Ye=P1({x:Math.min(Qe[0],fe[0]),y:Math.min(Qe[1],fe[1]),width:Math.abs(Qe[0]-fe[0]),height:Math.abs(Qe[1]-fe[1])},re);if(Ye){const qe=new Path2D;if(qe.moveTo(...Qe),qe.lineTo(...fe),H1({ctx:G,path:qe,rect:Ye,offset:10,checkFill:!1}))return!0}}}return!1}const ht=!(!R.style?.fillColor\|\|R.style?.fillColor==="transparent");return H1({ctx:G,path:R.path,rect:ze,offset:10,checkFill:ht})})(m,W,C,i));return o(V?.[0]),C})},[i]);return{shapesRef:t,selectedShape:r,hoveredShape:d,selectionFrame:s,setSelectionFrame:n,refreshSelectedShapes:E,addShape:k,addPictureShape:Z,moveShapes:P,saveShapes:S,setSelectedShape:o,refreshHoveredShape:b,toggleShapeVisibility:L,toggleShapeLock:w,removeShape:T,updateShape:x,backwardShape:F,forwardShape:H,clearShapes:M,canGoBackward:p,canGoForward:f,canClear:v}},Bi="infos",Xi=4e3,Yi=()=>{const e=g.useRef([]),[i,t]=g.useState([]);return g.useEffect(()=>()=>{for(const a of e.current)clearTimeout(a)},[]),{snackbarList:i,addSnackbar:({type:a=Bi,duration:s=Xi,text:n})=>{const r={id:B("snackbar_"),duration:s,type:a,text:n};t(o=>[...o,r]),e.current=[...e.current,setTimeout(()=>{return o=r.id,void t(d=>d.filter(u=>u.id!==o));var o},s)]}}},ti=(e,i=!1)=>{const t=(s,n)=>{if(Array.isArray(s))return n},a=e.map(s=>{if(typeof s!="object")return null;switch(s.type){case"brush":return he(t,r1,s);case"circle":return he(t,p1,s);case"curve":return he(t,c1,s);case"ellipse":return he(t,g1,s);case"line":return he(t,l1,s);case"polygon":return he(t,d1,s);case"rect":return he(t,u1,s);case"square":return he(t,h1,s);case"text":return he(t,f1,s)}return null});return st(i?[...a,xt]:a)},qi=(e,i,t,a,s,n,r)=>{let o=!1;if(s){o=Oe(s,t,a,!0,n?20:void 0);const u=((c,h,p,f)=>{if(c.mode==="translate")return{mode:"translate",cursorStartPosition:p,originalShape:h};if(c.mode==="rotate"){const{center:v}=O(h,f);return{mode:"rotate",cursorStartPosition:p,originalShape:h,center:[v[0],v[1]]}}return c.mode==="resize"?{mode:"resize",cursorStartPosition:p,originalShape:h,anchor:c.anchor}:void 0})(o\|\|{mode:"default"},s,t,a);if(u?.mode==="resize"\|\|u?.mode==="rotate")return{shape:s,mode:u}}const d=i.find(u=>u.id===s?.id?!!o:!!V1(e,u,t,a));return d?{shape:d,mode:{mode:"translate",cursorStartPosition:t,originalShape:d}}:{shape:void 0,mode:{mode:r?"selectionFrame":"default"}}},_i=({disabled:e=!1,addShape:i,drawCanvasRef:t,setActiveTool:a,refreshHoveredShape:s,shapes:n,selectionMode:r,activeTool:o,isInsideComponent:d,setCanvasOffset:u,selectedShape:c,selectionCanvasRef:h,canvasOffsetStartPosition:p,refreshSelectedShapes:f,setSelectedShape:v,setSelectionFrame:S,setCanvasOffsetStartPosition:k,updateSingleShape:b,saveShapes:Z,setSelectionMode:x,settings:j,isShiftPressed:T,withFrameSelection:N})=>{const[F,H]=g.useState({mode:"default"}),{registerDoubleClickEvent:M,unRegisterDoubleClickEvent:P}=(()=>{const L=g.useRef(void 0),w=g.useRef(void 0),E=m=>{const y=new Date().getTime();L.current&&y<L.current+300&&w.current?.(m),L.current=new Date().getTime()};return{registerDoubleClickEvent:(m,y)=>{w.current=y,m.addEventListener("click",E),m.addEventListener("touchend",E)},unRegisterDoubleClickEvent:m=>{m.removeEventListener("click",E),m.removeEventListener("touchend",E)}}})();return g.useEffect(()=>{const L=w=>window.requestAnimationFrame(()=>((E,m,y,Q,C,V,W,G,R,ne,ce,K,$,pe)=>{const ee=m.current?.getContext("2d");if(!ee)return;const J=Ht(E,m.current,$);if(y.type!=="move"\|\|V===void 0)if(C.mode!=="selectionFrame"){if(L1(E)\|\|G(E,ee,J,$),Q!==void 0&&!Q.locked)if(C.mode==="default"\|\|C.mode==="textedition")W(Oe(Q,J,$,!0)\|\|{mode:"default"});else{const ge=m.current?.getContext("2d");if(!ge)return;const we=vi(ge,Q,J,C,$,pe);R(we),ce(we)}}else K(ee,J,$);else ne([J[0]-V[0],J[1]-V[1]])})(w,h,o,c,r,p,H,s,b,u,v,f,j,T));if(d)return document.addEventListener("mousemove",L),document.addEventListener("touchmove",L),()=>{document.removeEventListener("mousemove",L),document.removeEventListener("touchmove",L)}},[d,h,c,r,p,b,o,u,v,s,f,j,T]),g.useEffect(()=>{const L=()=>{r.mode!=="textedition"&&r.mode!=="default"&&(x({mode:"default"}),S(void 0),Z())};return d&&(document.addEventListener("mouseup",L),document.addEventListener("touchend",L)),()=>{d&&(document.removeEventListener("mouseup",L),document.removeEventListener("touchend",L))}},[d,r,Z,S,x]),g.useEffect(()=>{const L=h.current;if(!L)return;const w=L.getContext("2d");if(!w\|\|e)return;const E=m=>{m.preventDefault();const y=Ht(m,h.current,j);if(o.type==="selection"){const{shape:Q,mode:C}=qi(w,n,y,j,c,L1(m),N);v(Q),x(C),C.mode==="selectionFrame"&&S([[y[0],y[1]],[y[0],y[1]]])}else if(o.type==="move")k(y);else if(qt.some(Q=>Q===o.type)){const Q=t.current?.getContext("2d");if(!Q)return;if(o.type==="brush"){if(c&&c.type==="brush"){const C=((V,W,G)=>{const R={...V,points:_(V.points.length,[[Math.round(W[0]),Math.round(W[1])]],V.points)};return Ee(R,G)})(c,y,j);b(C),v(C)}else{const C=U1(Q,o,y,j);if(!C)return;i(C),v(C)}x({mode:"brush"})}else if(o.type!=="picture"){const C=U1(Q,o,y,j);i(C),a(me),v(C),x({mode:"resize",cursorStartPosition:[y[0]+j.selectionPadding,y[1]+j.selectionPadding],originalShape:C,anchor:o.type==="line"\|\|o.type==="polygon"\|\|o.type==="curve"?0:[1,1]})}}};return L.addEventListener("mousedown",E,{passive:!1}),L.addEventListener("touchstart",E,{passive:!1}),()=>{L.removeEventListener("mousedown",E),L.removeEventListener("touchstart",E)}},[e,h,t,c,o,k,n,b,i,a,v,x,S,j,N]),g.useEffect(()=>{const L=h.current;if(L)return d?(M(L,w=>{if(o.type==="selection"&&c?.type==="text"){const E=Ht(w,h.current,j);Oe(c,E,j)&&x({mode:"textedition",defaultValue:c.value})}}),()=>{P(L)}):void 0},[M,P,d,h,o,c,x,j]),{hoverMode:F}},Gi=/(<([^>]+)>)/gi,Ji=/<(\/)?div(\/?\s?)>/gi,Ki=e=>{const i=(t=>{const a=document.createElement("textarea");return a.innerHTML=t,a.value})(e).split("<div>").flatMap(t=>{const a=t.replaceAll(Ji,"");return a===""?void 0:a.replaceAll(Gi,"")});return st(i)},ea=({disabled:e=!1,scaleRatio:i,shape:t,defaultValue:a,updateValue:s,saveShapes:n,settings:r})=>{const o=g.useRef(null),d=g.useRef(n);g.useEffect(()=>{if(!o.current)return;const c=o.current,h=p=>{p.preventDefault();const f=p.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,f)};return c.addEventListener("paste",h),c.innerHTML=a.map(p=>`<div>${p===""?"<br/>":p}</div>`).join(""),c.focus(),()=>{c.removeEventListener("paste",h)}},[a]),g.useEffect(()=>{const c=d.current;return()=>{c()}},[]);const u=g.useMemo(()=>{const{borders:c,center:h}=O(t,r);return ie({point:[c.x,c.y],rotation:-t.rotation,origin:h})},[t,r]);return l.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:c=>{s(Ki(c.target.innerHTML))},style:{"--react-paint-editor-toolbox-edittextbox-transform":`translate3D(${u[0]i}px, ${u[1]i}px, 0) rotate(${jt(t.rotation)}deg)`,"--react-paint-editor-toolbox-edittextbox-fontsize":t.fontSizei+"px","--react-paint-editor-toolbox-edittextbox-padding":r.selectionPaddingi+"px","--react-paint-editor-toolbox-edittextbox-color":t.style?.strokeColor??"inherit","--react-paint-editor-toolbox-edittextbox-opacity":(t.style?.opacity??100)/100,"--react-paint-editor-toolbox-edittextbox-fontfamily":t.style?.fontFamily??$e}})},ta=(e,i,t,a,s)=>{const{canvasSize:{width:n,height:r}}=t;e.clearRect(0,0,n,r),b1(e),t.gridFormat&&((o,d,u,c)=>{const{gridFormat:h,canvasOffset:p,canvasSize:{scaleRatio:f}}=c;o.strokeStyle="rgb(220,220,220)",o.lineWidth=1,o.save(),o.scale(f,f),o.beginPath();const v=je[h-1],S=-p[0]%v,k=-p[1]%v,b=Math.ceil(d/f/v),Z=Math.ceil(u/f/v);for(let x=0;x<b;x++)o.moveTo(S+(x+1)v,k),o.lineTo(S+(x+1)v,k+u/f);for(let x=0;x<Z;x++)o.moveTo(S,k+(x+1)v),o.lineTo(S+d/f,k+(x+1)v);o.stroke(),o.restore()})(e,n,r,t);for(let o=a.length-1;o>=0;o--)i.mode==="textedition"&&a[o]===s\|\|B1(e,a[o],t)},ia=g.forwardRef(({canGrow:e,disabled:i=!1,canvasSize:t,shapes:a,addShape:s,updateSingleShape:n,selectedShape:r,setSelectedShape:o,setSelectionFrame:d,hoveredShape:u,selectionFrame:c,refreshHoveredShape:h,refreshSelectedShapes:p,saveShapes:f,activeTool:v,setActiveTool:S,canvasOffsetStartPosition:k,setCanvasOffsetStartPosition:b,setCanvasOffset:Z,isInsideComponent:x,selectionMode:j,setSelectionMode:T,selectionWidth:N,selectionColor:F,settings:H,isEditMode:M,isShiftPressed:P,withFrameSelection:L,withSkeleton:w},E)=>{const m=g.useRef(null),y=g.useRef(null);g.useImperativeHandle(E,()=>m.current);const{hoverMode:Q}=_i({disabled:i,addShape:s,drawCanvasRef:m,setActiveTool:S,shapes:a,selectionMode:j,activeTool:v,isInsideComponent:x,setCanvasOffset:Z,selectedShape:r,selectionCanvasRef:y,canvasOffsetStartPosition:k,setSelectedShape:o,setSelectionFrame:d,refreshHoveredShape:h,refreshSelectedShapes:p,setCanvasOffsetStartPosition:b,updateSingleShape:n,saveShapes:f,setSelectionMode:T,isShiftPressed:P,withFrameSelection:L,settings:H}),C=g.useCallback(V=>{if(r?.type!=="text")return;const W=m.current?.getContext("2d");if(!W)return;const G=Ue(Ti(W,r,V,H),H);n(G)},[n,r,H]);return g.useEffect(()=>{const V=m.current?.getContext("2d");V&&window.requestAnimationFrame(()=>ta(V,j,H,a,r))},[a,j,r,H]),g.useEffect(()=>{const V=y.current?.getContext("2d");V&&window.requestAnimationFrame(()=>((W,G,R,ne,ce,K,$,pe,ee,J)=>{W.clearRect(0,0,R.canvasSize.width,R.canvasSize.height),J&&pe&&pe.id!==$?.id&&ne.type==="selection"&&G.mode==="default"&&X1({ctx:W,shape:pe,settings:R,selectionWidth:ce,selectionColor:K,withAnchors:!1}),$&&ne.type!=="brush"&&X1({ctx:W,shape:$,settings:R,selectionWidth:ce,selectionColor:K,withAnchors:G.mode!=="textedition"}),ee&&Ei({ctx:W,selectionFrame:ee,settings:R})})(V,j,H,v,N,F,r,u,c,w))},[u,c,j,r,v,H,N,F,w]),l.jsx("div",{className:"react-paint-editor-canvas-box",children:l.jsxs("div",{className:"react-paint-editor-canvas-container","data-grow":e,children:[l.jsx("canvas",{className:y1,ref:m,"data-grow":e,width:t.width,height:t.height}),M&&l.jsx("canvas",{className:Q1,ref:y,width:t.width,height:t.height,"data-grow":e,style:{"--react-paint-editor-canvas-cursor":v.type!=="selection"&&v.type!=="move"\|\|Q.mode==="resize"?"crosshair":v.type==="move"\|\|Q.mode==="translate"?"move":Q.mode==="rotate"?"grab":"default"}}),M&&j.mode==="textedition"&&r?.type==="text"&&l.jsx(ea,{scaleRatio:t.scaleRatio,disabled:i,shape:r,defaultValue:j.defaultValue,updateValue:C,saveShapes:f,settings:H})]})})}),aa=({type:e,text:i,duration:t})=>{const[a,s]=g.useState(!1);return g.useEffect(()=>{const n=setTimeout(()=>{s(!0)},100),r=setTimeout(()=>{s(!1)},t-500-100);return()=>{clearTimeout(n),clearTimeout(r)}},[t]),l.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+a,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:i})},na=({snackbarList:e})=>l.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":ft},children:e.map(i=>l.jsx(aa,{...i},i.id))}),z=g.forwardRef((e,i)=>{if(e.type==="file"\|\|e.type==="color"){const{hidden:c=!1,disabled:h=!1,selected:p=!1,icon:f,children:v,className:S="",title:k,onClick:b,...Z}=e;return l.jsxs("label",{className:`react-paint-editor-button ${S}`,title:k,onClick:b,"data-disabled":+h,"data-selected":+p,"data-hidden":+c,children:[l.jsx("input",{ref:i,disabled:h,...Z}),l.jsxs("span",{className:"react-paint-editor-button-content",children:[v&&l.jsx("span",{className:"react-paint-editor-button-children",children:v}),f&&l.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:f}})]})]})}const{hidden:t=!1,disabled:a=!1,selected:s=!1,icon:n,children:r,type:o="button",className:d="",...u}=e;return l.jsx("button",{className:`react-paint-editor-button ${d}`,ref:i,disabled:a,"data-disabled":+a,"data-selected":+s,"data-hidden":+t,type:o,...u,children:l.jsxs("span",{className:"react-paint-editor-button-content",children:[r&&l.jsx("span",{className:"react-paint-editor-button-children",children:r}),n&&l.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:n}})]})})}),We=({children:e,title:i="",className:t="",position:a="bottom",fitContainer:s=!1,alignment:n="center"})=>l.jsxs("div",{className:`react-paint-editor-panel ${t}`,"data-fitcontainer":s,"data-position":a,"data-alignment":n,style:{"--react-paint-editor-panel-zindex":ft},children:[i&&l.jsx("h3",{className:"react-paint-editor-panel-title",children:i}),e]}),sa=e=>{switch(e){case"brush":return _t;case"line":return e1;case"polygon":return yt;case"curve":return t1;case"rect":case"square":return vt;case"circle":case"ellipse":return mt;case"text":return Kt;case"picture":return Qt;case"triangle":return""}},oa=({disabled:e=!1,shape:i,selected:t,layoutDragging:a,toggleShapeVisibility:s,toggleShapeLock:n,setLayoutDragging:r,handleRemove:o,handleSelect:d,onMoveShapes:u})=>{const c=g.useRef(null),{isOver:h}=(({disabled:p=!1,ref:f,shape:v,layoutDragging:S,setLayoutDragging:k,handleSelect:b,onMoveShapes:Z})=>{const[x,j]=g.useState(!1);return g.useEffect(()=>{S\|\|j(!1)},[S]),g.useEffect(()=>{const T=f.current;if(!T)return;const N=()=>{k(void 0)},F=w=>(w.preventDefault&&w.preventDefault(),!1),H=w=>{b(v),w.dataTransfer&&(w.dataTransfer.effectAllowed="move",w.dataTransfer.setData("draggableShapeId",v.id),k(v.id))},M=()=>{S!==v.id&&j(!0)},P=()=>{j(!1)},L=w=>(w.stopPropagation(),w.dataTransfer&&Z(w.dataTransfer.getData("draggableShapeId"),v.id),!1);return p\|\|(T.addEventListener("dragstart",H),T.addEventListener("dragend",N),T.addEventListener("dragover",F),T.addEventListener("dragenter",M),T.addEventListener("dragleave",P),T.addEventListener("drop",L)),()=>{p\|\|(T.removeEventListener("dragstart",H),T.removeEventListener("dragend",N),T.removeEventListener("dragover",F),T.removeEventListener("dragenter",M),T.removeEventListener("dragleave",P),T.removeEventListener("drop",L))}},[p,f,v,k,b,Z,S]),{isOver:x}})({disabled:e,ref:c,shape:i,layoutDragging:a,setLayoutDragging:r,handleSelect:d,onMoveShapes:u});return l.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(a===i.id),"data-is-over":+h,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),d(i))},"data-selected":+t,ref:c,children:[l.jsx("span",{dangerouslySetInnerHTML:{__html:sa(i.type)}}),l.jsx("span",{children:i.id}),l.jsx("div",{className:"react-paint-editor-layouts-separator"}),l.jsx(z,{className:"react-paint-editor-layouts-visible-button",title:i.visible?"Hide":"Show","data-visible":i.visible!==!1,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),s(i))},icon:i.visible===!1?'<svg><path d="M13.521 11.021 12.25 9.75Q12.333 8.75 11.604 7.979Q10.875 7.208 9.812 7.312L8.542 6.042Q8.896 5.896 9.26 5.833Q9.625 5.771 10 5.771Q11.583 5.771 12.688 6.875Q13.792 7.979 13.792 9.562Q13.792 9.979 13.719 10.354Q13.646 10.729 13.521 11.021ZM16.167 13.646 14.917 12.417Q15.667 11.833 16.25 11.146Q16.833 10.458 17.25 9.562Q16.229 7.479 14.292 6.281Q12.354 5.083 10 5.083Q9.396 5.083 8.885 5.156Q8.375 5.229 7.875 5.375L6.5 4Q7.354 3.646 8.208 3.49Q9.062 3.333 10 3.333Q13.146 3.333 15.615 5.052Q18.083 6.771 19.167 9.562Q18.688 10.792 17.917 11.823Q17.146 12.854 16.167 13.646ZM16.396 18.854 12.938 15.396Q12.208 15.625 11.479 15.729Q10.75 15.833 10 15.833Q6.833 15.833 4.375 14.094Q1.917 12.354 0.833 9.562Q1.25 8.479 1.917 7.552Q2.583 6.625 3.417 5.875L1.125 3.562L2.375 2.354L17.625 17.625ZM4.604 7.062Q4.021 7.604 3.542 8.219Q3.062 8.833 2.729 9.562Q3.75 11.646 5.688 12.865Q7.625 14.083 10 14.083Q10.354 14.083 10.74 14.052Q11.125 14.021 11.479 13.938L10.812 13.271Q10.625 13.312 10.417 13.333Q10.208 13.354 10 13.354Q8.417 13.354 7.312 12.25Q6.208 11.146 6.208 9.562Q6.208 9.354 6.24 9.167Q6.271 8.979 6.312 8.771ZM11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875ZM8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Z"/></svg>':'<svg><path d="M10 13.354Q11.583 13.354 12.688 12.25Q13.792 11.146 13.792 9.562Q13.792 7.979 12.688 6.875Q11.583 5.771 10 5.771Q8.417 5.771 7.312 6.875Q6.208 7.979 6.208 9.562Q6.208 11.146 7.312 12.25Q8.417 13.354 10 13.354ZM10 11.812Q9.062 11.812 8.406 11.156Q7.75 10.5 7.75 9.562Q7.75 8.625 8.406 7.969Q9.062 7.312 10 7.312Q10.938 7.312 11.594 7.969Q12.25 8.625 12.25 9.562Q12.25 10.5 11.594 11.156Q10.938 11.812 10 11.812ZM10 15.833Q6.938 15.833 4.448 14.125Q1.958 12.417 0.833 9.562Q1.958 6.708 4.458 5.021Q6.958 3.333 10 3.333Q13.042 3.333 15.542 5.021Q18.042 6.708 19.167 9.562Q18.042 12.417 15.552 14.125Q13.062 15.833 10 15.833ZM10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562ZM10 14.083Q12.333 14.083 14.281 12.865Q16.229 11.646 17.25 9.562Q16.229 7.479 14.281 6.281Q12.333 5.083 10 5.083Q7.667 5.083 5.708 6.281Q3.75 7.479 2.729 9.562Q3.75 11.646 5.708 12.865Q7.667 14.083 10 14.083Z"/></svg>'}),l.jsx(z,{className:"react-paint-editor-layouts-locked-button",title:i.locked?"Locked":"Unlocked","data-locked":!!i.locked,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),n(i))},icon:i.locked?'<svg><path d="M10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H5.792V5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833ZM10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042V6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>':'<svg><path d="M5.792 5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>'}),l.jsx(z,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),o(i))},icon:Gt})]})},ra=({gridFormat:e,setGridFormat:i,disabled:t=!1,shapes:a,removeShape:s,toggleShapeVisibility:n,toggleShapeLock:r,selectedShape:o,moveShapes:d,selectShape:u,isLayoutPanelShown:c})=>{const[h,p]=g.useState(void 0);return c?l.jsx(We,{alignment:"right",className:"react-paint-editor-layouts-panel",children:l.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:l.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[l.jsxs("div",{className:"react-paint-editor-layouts-row",children:[l.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),l.jsx(z,{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===0,disabled:t,onClick:()=>i(0)}),["S","M","L"].map((f,v)=>l.jsx(z,{className:"react-paint-editor-layouts-grid-button",selected:e===v+1,disabled:t,onClick:()=>i(v+1),children:f},f))]}),l.jsx("hr",{}),l.jsx("div",{className:"react-paint-editor-layouts",children:a.length===0?l.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):a.map(f=>l.jsx(oa,{shape:f,disabled:t,layoutDragging:h,setLayoutDragging:p,selected:o?.id===f.id,handleSelect:u,handleRemove:s,onMoveShapes:d,toggleShapeVisibility:n,toggleShapeLock:r},f.id))})]})})}):null},Ft=({children:e,onClose:i,position:t="center",className:a=""})=>l.jsxs("div",{className:"react-paint-editor-modal","data-position":t,style:{"--react-paint-editor-modal-zindex":ft},children:[l.jsx("div",{className:"react-paint-editor-modal-mask",onClick:i}),l.jsx("div",{className:`react-paint-editor-modal-panel ${a}`,children:e})]}),dt=({selectedSettings:e,setSelectedSettings:i,title:t="Choisissez une couleur",mode:a="fill",disabled:s=!1,values:n,field:r,value:o="",valueChanged:d})=>{const[u]=g.useState(B("settings_")),c=e===u;return n.length?l.jsxs(l.Fragment,{children:[l.jsx(z,{selected:c,title:t,disabled:s,onClick:()=>{i(h=>h===u?void 0:u)},icon:o==="transparent"?a==="fill"?o1:s1:void 0,children:o!=="transparent"&&l.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":a,style:{"--react-paint-editor-colorfield-color-value":o}})}),c&&l.jsx(We,{title:t,alignment:"left",children:l.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[n.map((h,p)=>l.jsx(z,{title:h,selected:h===o,color:h,icon:h==="transparent"?a==="fill"?o1:s1:void 0,onClick:()=>{d(r,h)},children:h!=="transparent"&&l.jsx("div",{className:"react-paint-editor-colorfield-color",color:h,"data-mode":a,style:{"--react-paint-editor-colorfield-color-value":h}})},h)),l.jsx(z,{type:"color",title:"Custom color",selected:!n.includes(o),value:o,onChange:h=>{const p=+h.target.value;d(r,Number.isNaN(p)?h.target.value:p)},children:l.jsx("div",{className:"react-paint-editor-colorfield-customcolor",style:{"--react-paint-editor-colorfield-color-value":n.includes(o)?"var(--react-paint-editor-app-font-color)":o},children:l.jsx("span",{dangerouslySetInnerHTML:{__html:'<svg><path d="M9.958 18.333Q8.25 18.333 6.74 17.677Q5.229 17.021 4.104 15.885Q2.979 14.75 2.323 13.229Q1.667 11.708 1.667 10Q1.667 8.271 2.333 6.75Q3 5.229 4.156 4.104Q5.312 2.979 6.854 2.323Q8.396 1.667 10.125 1.667Q11.771 1.667 13.26 2.25Q14.75 2.833 15.875 3.854Q17 4.875 17.667 6.26Q18.333 7.646 18.333 9.25Q18.333 11.688 16.792 12.948Q15.25 14.208 13.188 14.208H11.75Q11.625 14.208 11.562 14.281Q11.5 14.354 11.5 14.458Q11.5 14.688 11.812 15.219Q12.125 15.75 12.125 16.458Q12.125 17.458 11.51 17.896Q10.896 18.333 9.958 18.333ZM5.458 10.875Q6 10.875 6.375 10.5Q6.75 10.125 6.75 9.583Q6.75 9.042 6.375 8.667Q6 8.292 5.458 8.292Q4.917 8.292 4.542 8.667Q4.167 9.042 4.167 9.583Q4.167 10.125 4.542 10.5Q4.917 10.875 5.458 10.875ZM7.917 7.583Q8.458 7.583 8.833 7.208Q9.208 6.833 9.208 6.292Q9.208 5.75 8.833 5.375Q8.458 5 7.917 5Q7.375 5 7 5.375Q6.625 5.75 6.625 6.292Q6.625 6.833 7 7.208Q7.375 7.583 7.917 7.583ZM12.021 7.583Q12.562 7.583 12.938 7.208Q13.312 6.833 13.312 6.292Q13.312 5.75 12.938 5.375Q12.562 5 12.021 5Q11.479 5 11.104 5.375Q10.729 5.75 10.729 6.292Q10.729 6.833 11.104 7.208Q11.479 7.583 12.021 7.583ZM14.479 10.875Q15.021 10.875 15.396 10.5Q15.771 10.125 15.771 9.583Q15.771 9.042 15.396 8.667Q15.021 8.292 14.479 8.292Q13.938 8.292 13.562 8.667Q13.188 9.042 13.188 9.583Q13.188 10.125 13.562 10.5Q13.938 10.875 14.479 10.875Z"/></svg>'}})})})]})})]}):null},la=({disabled:e=!1,selectedShape:i,removeShape:t})=>l.jsx(z,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{t(i)},icon:Gt}),Et=({CustomOption:e,selectedSettings:i,setSelectedSettings:t,title:a="Choisissez l'option",disabled:s=!1,field:n,icon:r,values:o,defaultValue:d,valueChanged:u})=>{const[c]=g.useState(B("settings_")),h=i===c;return o.length?l.jsxs(l.Fragment,{children:[l.jsx(z,{selected:h,title:a,icon:r,disabled:s,onClick:()=>{t(p=>p===c?void 0:c)}}),h&&l.jsx(We,{title:a,alignment:"left",fitContainer:!0,children:l.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:o.map(p=>l.jsx(z,{title:`${p}`,onClick:()=>(f=>{u(n,f)})(p),selected:d===p,style:{"--react-paint-editor-button-padding":"16px"},children:l.jsx(e,{children:p})},p))})})]}):null},da=({children:e})=>l.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),ii=({selectedSettings:e,setSelectedSettings:i,disabled:t=!1,values:a,defaultValue:s,valueChanged:n})=>a.length?l.jsx(Et,{selectedSettings:e,setSelectedSettings:i,CustomOption:da,title:"Police",icon:'<svg><path d="M5.312 14.979H7.125L8.042 12.479H11.979L12.896 14.979H14.708L10.917 5H9.083ZM8.542 10.958 9.958 6.958H10.042L11.458 10.958ZM3.417 18.333Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V3.417Q1.667 2.688 2.177 2.177Q2.688 1.667 3.417 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417V16.583Q18.333 17.312 17.823 17.823Q17.312 18.333 16.583 18.333ZM3.417 16.583H16.583Q16.583 16.583 16.583 16.583Q16.583 16.583 16.583 16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583ZM3.417 3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583V3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417Z"/></svg>',disabled:t,field:"fontFamily",values:a,defaultValue:s,valueChanged:n}):null,ca=({disabled:e,toggleLayoutPanel:i})=>l.jsx(z,{title:"Toggle layers panel",disabled:e,onClick:i,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"}),ua=({children:e})=>l.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[l.jsx("span",{className:"react-paint-editor-linearrow-left"}),l.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),ai=({selectedSettings:e,setSelectedSettings:i,disabled:t=!1,values:a,defaultValue:s,valueChanged:n})=>a.length?l.jsx(Et,{selectedSettings:e,setSelectedSettings:i,CustomOption:ua,title:"Flèches",icon:'<svg><path d="M6 17 2 13 6 9 7.062 10.062 4.875 12.25H17V13.75H4.875L7.062 15.938ZM14 11 12.938 9.938 15.125 7.75H3V6.25H15.125L12.938 4.062L14 3L18 7Z"/></svg>',disabled:t,field:"lineArrow",values:a,defaultValue:s,valueChanged:n}):null,ha=({children:e})=>l.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{}),l.jsx("span",{})]}),ni=({selectedSettings:e,setSelectedSettings:i,disabled:t=!1,values:a,defaultValue:s,valueChanged:n})=>a.length?l.jsx(Et,{selectedSettings:e,setSelectedSettings:i,CustomOption:ha,icon:'<svg><path d="M3 16V14.5H4.5V16ZM6.125 16V14.5H7.625V16ZM9.25 16V14.5H10.75V16ZM12.375 16V14.5H13.875V16ZM15.5 16V14.5H17V16ZM3 13V11.5H6.5V13ZM8.25 13V11.5H11.75V13ZM13.5 13V11.5H17V13ZM3 10V8.5H9.25V10ZM10.75 10V8.5H17V10ZM3 7V4H17V7Z"/></svg>',title:"Type de traits",disabled:t,field:"lineDash",values:a,defaultValue:s,valueChanged:n}):null,Be=({selectedSettings:e,setSelectedSettings:i,title:t="Choisissez l'intervalle",icon:a,disabled:s=!1,field:n,value:r=1,min:o=1,max:d=20,step:u=1,unity:c="",valueChanged:h})=>{const p=Math.round(r),[f]=g.useState(B("settings_")),v=g.useRef(null);g.useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const S=e===f;return o===d?null:l.jsxs(l.Fragment,{children:[l.jsx(z,{selected:S,title:t,disabled:s,icon:a,onClick:()=>{i(k=>k===f?void 0:f)}}),S&&l.jsx(We,{title:t,alignment:"left",fitContainer:!0,children:l.jsx("div",{children:l.jsxs("label",{className:"react-paint-editor-rangefield",children:[l.jsx("input",{type:"range",min:o,max:d,step:u,value:r,onChange:k=>{const b=+k.target.value;h(n,Number.isNaN(b)?k.target.value:b,!1),v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{h(n,Number.isNaN(b)?k.target.value:b,!0)},1e3)}}),l.jsxs("span",{children:[p,c]})]})})})]})},si=({selectedSettings:e,setSelectedSettings:i,disabled:t=!1,min:a,max:s,step:n,value:r,valueChanged:o})=>a===s?null:l.jsx(Be,{selectedSettings:e,setSelectedSettings:i,icon:yt,title:"Nombre de points",disabled:t,field:"pointsCount",min:a,max:s,step:n,unity:"",value:r,valueChanged:o}),ct=({setSelectedSettings:e,disabled:i=!1,field:t,icon:a,values:s,value:n=!1,valueChanged:r})=>{const[o]=g.useState(B("settings_"));return s.length!==2?null:l.jsx(z,{onClick:()=>{e(d=>d===o?void 0:o),r(t,!n)},selected:n,disabled:i,icon:a})},Rt=({activeTool:e,selectedShape:i,selectedShapeTool:t,disabled:a,selectedSettings:s,setSelectedSettings:n,handleShapeStyleChange:r,handlePolygonLinesCount:o,handleShapeFontFamilyChange:d})=>i?l.jsx(l.Fragment,{children:t&&l.jsxs(l.Fragment,{children:["strokeColor"in t.settings&&l.jsx(dt,{selectedSettings:s,setSelectedSettings:n,title:"Couleur du trait",mode:"stroke",disabled:a,field:"strokeColor",value:i.style?.strokeColor,valueChanged:r,values:t.settings.strokeColor.values}),"fillColor"in t.settings&&l.jsx(dt,{selectedSettings:s,setSelectedSettings:n,title:"Couleur de fond",disabled:a,field:"fillColor",value:i.style?.fillColor,valueChanged:r,values:t.settings.fillColor.values}),"lineWidth"in t.settings&&l.jsx(Be,{selectedSettings:s,setSelectedSettings:n,title:"Epaisseur du trait",icon:n1,disabled:a,field:"lineWidth",value:i.style?.lineWidth,valueChanged:r,unity:"px",min:t.settings.lineWidth.min,max:t.settings.lineWidth.max,step:t.settings.lineWidth.step}),"lineDash"in t.settings&&l.jsx(ni,{selectedSettings:s,setSelectedSettings:n,disabled:a,defaultValue:i.style?.lineDash,valueChanged:r,values:t.settings.lineDash.values}),"lineArrow"in t.settings&&l.jsx(ai,{selectedSettings:s,setSelectedSettings:n,disabled:a,defaultValue:i.style?.lineArrow,valueChanged:r,values:t.settings.lineArrow.values}),"pointsCount"in t.settings&&l.jsx(si,{selectedSettings:s,setSelectedSettings:n,disabled:a,valueChanged:o,min:t.settings.pointsCount.min,max:t.settings.pointsCount.max,step:t.settings.pointsCount.step,value:i.style?.pointsCount}),"fontFamily"in t.settings&&l.jsx(ii,{selectedSettings:s,setSelectedSettings:n,disabled:a,valueChanged:d,values:t.settings.fontFamily.values,defaultValue:i.style?.fontFamily}),"fontBold"in t.settings&&l.jsx(ct,{setSelectedSettings:n,disabled:a,field:"fontBold",icon:i1,valueChanged:d,values:t.settings.fontBold.values,value:i.style?.fontBold}),"fontItalic"in t.settings&&l.jsx(ct,{setSelectedSettings:n,disabled:a,field:"fontItalic",icon:a1,valueChanged:d,values:t.settings.fontItalic.values,value:i.style?.fontItalic}),"opacity"in t.settings&&l.jsx(Be,{selectedSettings:s,setSelectedSettings:n,title:"Opacité",icon:Jt,min:t.settings.opacity.min,max:t.settings.opacity.max,step:t.settings.opacity.step,unity:"%",disabled:a,field:"opacity",value:i.style?.opacity??100,valueChanged:r})]})}):"settings"in e?l.jsxs(l.Fragment,{children:["strokeColor"in e.settings&&l.jsx(dt,{selectedSettings:s,setSelectedSettings:n,title:"Couleur du trait",mode:"stroke",disabled:a,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:r,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&l.jsx(dt,{selectedSettings:s,setSelectedSettings:n,title:"Couleur de fond",disabled:a,field:"fillColor",value:e.settings.fillColor.default,valueChanged:r,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&l.jsx(Be,{selectedSettings:s,setSelectedSettings:n,title:"Epaisseur du trait",disabled:a,field:"lineWidth",icon:n1,value:e.settings.lineWidth.default,valueChanged:r,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&l.jsx(ni,{selectedSettings:s,setSelectedSettings:n,disabled:a,defaultValue:e.settings.lineDash.default,valueChanged:r,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&l.jsx(ai,{selectedSettings:s,setSelectedSettings:n,disabled:a,defaultValue:e.settings.lineArrow.default,valueChanged:r,values:e.settings.lineArrow.values}),"pointsCount"in e.settings&&l.jsx(si,{selectedSettings:s,setSelectedSettings:n,disabled:a,valueChanged:o,min:e.settings.pointsCount.min,max:e.settings.pointsCount.max,step:e.settings.pointsCount.step,value:e.settings.pointsCount.default}),"fontFamily"in e.settings&&l.jsx(ii,{selectedSettings:s,setSelectedSettings:n,disabled:a,valueChanged:d,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&l.jsx(ct,{setSelectedSettings:n,disabled:a,field:"fontBold",icon:i1,valueChanged:d,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&l.jsx(ct,{setSelectedSettings:n,disabled:a,field:"fontItalic",icon:a1,valueChanged:d,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&l.jsx(Be,{selectedSettings:s,setSelectedSettings:n,title:"Opacité",icon:Jt,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:"%",disabled:a,field:"opacity",value:e.settings.opacity.default,valueChanged:r})]}):null,pa=({width:e,disabled:i=!1,availableTools:t,updateToolSettings:a,layersManipulation:s,toggleLayoutPanel:n,activeTool:r,selectedShape:o,canvas:d,settings:u,updateShape:c,removeShape:h})=>{const[p,f]=g.useState(void 0),[v,S]=g.useState(!1),k=()=>{S(F=>!F)},b=o?t.find(F=>F.id===o.toolId)\|\|t.find(F=>F.type===o.type):void 0,Z=(b?Object.keys(b.settings).length+1:"settings"in r?Object.keys(r.settings).length:0)+(s?1:0),x=e<40Z,j=(F,H,M=!0)=>{o?(c(Ue(_(["style",F],H,o),u),M),b&&a(b.id,F,H)):a(r.id,F,H)},T=(F,H)=>{if(o){if(o.type!=="text")return;const M=d?.getContext("2d");if(!M)return;const P=_(["style",F],H,o),L=At(M,P.value,P.width,P.style?.fontBold??!1,P.style?.fontItalic??!1,P.style?.fontFamily),w=Ue({...P,fontSize:L,height:LP.value.length},u);c(w,!0),b&&a(b.id,F,H)}else a(r.id,F,H)},N=(F,H)=>{if(o){if(o.type!=="polygon"&&o.type!=="curve")return;c(o.type==="polygon"?((M,P,L)=>{const w=M.points.length;if(w===P)return M;if(w>P){const Q=M.points.slice(0,P);return De({...M,points:Q,style:{...M.style,pointsCount:Q.length}},L)}const E=P-w,m=new Array(E).fill(void 0).map((Q,C)=>[M.points[0][0]+(M.points[1][0]-M.points[0][0])(C+1)/(E+1),M.points[0][1]+(M.points[1][1]-M.points[0][1])(C+1)/(E+1)]),y=[M.points[0],...m,...M.points.slice(1,M.points.length)];return De({...M,points:y,style:{...M.style,pointsCount:y.length}},L)})(o,H,u):((M,P,L)=>{const w=M.points.length;if(w===P)return M;if(w>P){const Q=M.points.slice(0,P);return Ie({...M,points:Q,style:{...M.style,pointsCount:Q.length}},L)}const E=P-w,m=new Array(E).fill(void 0).map((Q,C)=>[M.points[0][0]+(M.points[1][0]-M.points[0][0])(C+1)/(E+1),M.points[0][1]+(M.points[1][1]-M.points[0][1])(C+1)/(E+1)]),y=[M.points[0],...m,...M.points.slice(1,M.points.length)];return Ie({...M,points:y,style:{...M.style,pointsCount:y.length}},L)})(o,H,u),!0),b&&a(b.id,F,H)}else a(r.id,F,H)};return l.jsxs(l.Fragment,{children:[l.jsxs("div",{className:"react-paint-editor-settings-bar",children:[l.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[x&&Z>2&&l.jsx(z,{disabled:i,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?l.jsx(l.Fragment,{children:b&&l.jsxs(l.Fragment,{children:[!x&&l.jsx(Rt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:i,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:N,handleShapeFontFamilyChange:T}),l.jsx(la,{disabled:i,selectedShape:o,removeShape:h})]})}):!x&&l.jsx(Rt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:i,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:N,handleShapeFontFamilyChange:T})]}),l.jsx("div",{className:"react-paint-editor-settings-separator"}),s&&l.jsx(ca,{disabled:i,toggleLayoutPanel:n})]}),v&&l.jsx(Ft,{className:"react-paint-editor-settings-modal",onClose:k,position:"bottom",children:l.jsx(Rt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:i,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:N,handleShapeFontFamilyChange:T})})]})},oi=({disabled:e=!1,withText:i=!1,loadFile:t,type:a,img:s,accept:n})=>{const r=g.useRef(null);return l.jsx(z,{ref:r,type:"file",onClick:o=>{o.stopPropagation(),r.current&&(r.current.value="")},onChange:o=>{const d=o.target.files?.item(0);d&&t(d)},accept:n,title:a.label??a.type,icon:s,children:i?a.label:void 0,disabled:e})},ae=({type:e,img:i,isActive:t,withText:a=!1,disabled:s=!1,setActive:n})=>l.jsx(z,{disabled:s,selected:t,onClick:()=>{n(e)},title:e.label??e.type,icon:i,children:a?e.label:void 0}),ga=({activeTool:e,withActionsInMenu:i,hasActionToUndo:t=!1,hasActionToRedo:a=!1,hasActionToClear:s=!1,undoAction:n,redoAction:r,clearCanvas:o,alignment:d,group:u,vertical:c=!1,disabled:h=!1,withLoadAndSave:p,withExport:f,addPicture:v,loadFile:S,togglePictureUrlModal:k,saveFile:b,exportCanvasInFile:Z,withUploadPicture:x,withUrlPicture:j})=>{const[T,N]=g.useState(!1),[,F]=g.useTransition(),H=u?.tools?.some(P=>P===e.type),M=(H?e.icon:u.img)??u.title;return g.useEffect(()=>{if(!T)return;const P=()=>{N(!1)};return document.addEventListener("click",P),()=>{document.removeEventListener("click",P)}},[T]),i\|\|x\|\|j\|\|p\|\|f?l.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[l.jsx(z,{selected:H,title:u.title,disabled:h,onClick:()=>{F(()=>{N(!0)})},icon:M}),T&&l.jsx(We,{alignment:d,position:"top",children:l.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+c,children:[i&&l.jsxs(l.Fragment,{children:[l.jsx(ae,{withText:!0,type:Ae,disabled:h\|\|!t,img:Ae.icon,isActive:e.id===Ae.id,setActive:n}),l.jsx(ae,{withText:!0,type:Ze,disabled:h\|\|!a,img:Ze.icon,isActive:e.id===Ze.id,setActive:r}),l.jsx(ae,{withText:!0,type:Fe,disabled:h\|\|!s,img:Fe.icon,isActive:e.id===Fe.id,setActive:o}),(x\|\|j\|\|p)&&l.jsx("hr",{})]}),x&&l.jsx(oi,{withText:!0,type:m1,disabled:h,loadFile:async P=>{N(!1),await v(P)},img:m1.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml"}),j&&l.jsx(z,{disabled:h,selected:!1,onClick:k,title:"Add picture from URL",icon:'<svg><path d="M9.188 16.542V14.938Q8.5 14.938 8.021 14.458Q7.542 13.979 7.542 13.292V12.458L3.583 8.5Q3.5 8.875 3.458 9.25Q3.417 9.625 3.417 10Q3.417 12.5 5.062 14.365Q6.708 16.229 9.188 16.542ZM14.854 14.438Q15.708 13.521 16.146 12.385Q16.583 11.25 16.583 10Q16.583 7.979 15.469 6.313Q14.354 4.646 12.479 3.917V4.229Q12.479 4.917 12 5.396Q11.521 5.875 10.833 5.875H9.188V7.521Q9.188 7.875 8.948 8.115Q8.708 8.354 8.354 8.354H6.708V10H11.646Q12 10 12.24 10.229Q12.479 10.458 12.479 10.812V13.292H13.292Q13.833 13.292 14.26 13.604Q14.688 13.917 14.854 14.438ZM10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333Z"/></svg>',children:"Add picture from URL"}),(x\|\|j)&&p&&l.jsx("hr",{}),p&&l.jsxs(l.Fragment,{children:[l.jsx(oi,{withText:!0,type:v1,disabled:h,loadFile:P=>{N(!1),S(P)},img:v1.icon,accept:"application/JSON"}),l.jsx(ae,{withText:!0,disabled:h,type:St,img:St.icon,isActive:e.id===St.id,setActive:b})]}),f&&l.jsx(ae,{withText:!0,disabled:h,type:bt,img:bt.icon,isActive:e.id===bt.id,setActive:Z})]})})]}):null},fa=({togglePictureUrlModal:e,addPicture:i})=>{const t=g.useRef(null);return g.useEffect(()=>{t.current&&t.current.focus()},[]),l.jsx(Ft,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,children:l.jsxs("form",{onSubmit:async a=>{a.preventDefault();const s=t.current?.value;s&&(await i(s),e())},children:[l.jsxs("label",{children:["URL ",l.jsx("input",{type:"text",ref:t})]}),l.jsx(z,{onClick:e,children:"Annuler"}),l.jsx(z,{type:"submit",selected:!0,children:"Ajouter"})]})})},va=({activeTool:e,alignment:i,group:t,disabled:a=!1,setActiveToolFromId:s})=>{const n=g.useRef(null),[r,o]=g.useState(!1),[,d]=g.useTransition(),[u,c]=g.useState(void 0),h=v=>{c(v),s(v.id)};if(g.useEffect(()=>{if(!r)return;const v=S=>{!x1(S,n.current)&&o(!1)};return document.addEventListener("mousedown",v,{passive:!1}),document.addEventListener("touchstart",v,{passive:!1}),()=>{document.removeEventListener("mousedown",v),document.removeEventListener("touchstart",v)}},[r]),"type"in t)return l.jsx(ae,{disabled:a,type:t,img:t.icon,isActive:e.id===t.id,setActive:h});if(!t.toolsType.length)return null;if(t.toolsType?.length===1)return l.jsx(ae,{disabled:a,type:t.toolsType[0],img:t.toolsType[0].icon,isActive:e.id===t.toolsType[0].id,setActive:h});const p=t?.toolsType.find(v=>v.type===e.type)!==void 0,f=(u?u.icon:t.toolsType?.[0]?.icon)??t.title;return l.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[l.jsx(z,{selected:p,title:t.title,disabled:a,onClick:()=>{u?s(u.id):t.toolsType?.[0]&&h(t.toolsType[0]),d(()=>{o(!0)})},icon:f}),r&&l.jsx(We,{alignment:i,position:"top",children:l.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+t.vertical,ref:n,children:t.toolsType.map((v,S)=>l.jsx(ae,{disabled:a,type:v,img:v.icon,isActive:e.id===v.id,setActive:h},S))})})]})},ma=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],ya=({width:e,disabled:i=!1,activeTool:t,hasActionToUndo:a=!1,hasActionToRedo:s=!1,hasActionToClear:n=!1,withLoadAndSave:r,withExport:o,clearCanvas:d,setActiveTool:u,undoAction:c,redoAction:h,addPicture:p,loadFile:f,saveFile:v,exportCanvasInFile:S,availableTools:k,withUrlPicture:b,withUploadPicture:Z})=>{const x=((m,y)=>{const Q=y.flatMap(C=>{if(typeof C!="object")return m.filter(W=>W.type===C);const V=m.filter(W=>C.toolsType.includes(W.type));return V?{...C,toolsType:V}:null});return st(Q)})(k,ma),j=e<40(5+x.length),T=e<40(2+x.length),[N,F]=g.useState(!1),[H,M]=g.useState(!1),P=()=>{F(m=>!m)},L=m=>{u(m),F(!1)},w=m=>{L(k.find(y=>y.id===m)??t)},E=k.find(m=>m.type===t.type)!==void 0;return l.jsxs(l.Fragment,{children:[l.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",children:[l.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[l.jsx(ae,{type:me,disabled:i,img:me.icon,isActive:t.id===me.id,setActive:L}),T?l.jsx(z,{disabled:i,onClick:P,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:E}):x.map((m,y)=>l.jsx(va,{disabled:i,activeTool:t,group:m,setActiveToolFromId:w},y))]}),!j&&l.jsxs(l.Fragment,{children:[l.jsx(ae,{type:Ae,disabled:i\|\|!a,img:Ae.icon,isActive:t.id===Ae.id,setActive:c}),l.jsx(ae,{type:Ze,disabled:i\|\|!s,img:Ze.icon,isActive:t.id===Ze.id,setActive:h}),l.jsx(ae,{type:Fe,disabled:i\|\|!n,img:Fe.icon,isActive:t.id===Fe.id,setActive:d})]}),l.jsx(ga,{withActionsInMenu:j,disabled:i,vertical:!0,alignment:"right",group:{title:"Menu",img:'<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>'},activeTool:t,addPicture:p,loadFile:f,saveFile:v,togglePictureUrlModal:()=>{M(!0)},exportCanvasInFile:S,withUploadPicture:Z,withUrlPicture:b,withLoadAndSave:r,withExport:o,hasActionToUndo:a,hasActionToRedo:s,hasActionToClear:n,undoAction:c,redoAction:h,clearCanvas:d})]}),N&&l.jsx(Ft,{className:"react-paint-editor-toolbar-modal",onClose:P,children:k.map((m,y)=>m.type==="picture"?null:l.jsx(ae,{disabled:i,type:m,img:m.icon,withText:!1,isActive:t.id===m.id,setActive:L},y))}),H&&l.jsx(fa,{togglePictureUrlModal:()=>{M(m=>!m)},addPicture:p})]})};return({width:e=1e3,height:i=600,shapes:t,className:a="",mode:s="editor",disabled:n=!1,onDataChanged:r,apiRef:o,options:d=Ct})=>{const{layersManipulation:u,brushAlgo:c,grid:h,canGrow:p,canShrink:f,withExport:v,withLoadAndSave:S,withUploadPicture:k,withUrlPicture:b,withSkeleton:Z,withFrameSelection:x,clearCallback:j,availableTools:T}={...Ct,...d},{toolbarBackgroundColor:N,dividerColor:F,fontRadius:H,fontDisabledColor:M,fontDisabledBackgroundColor:P,fontColor:L,fontBackgroundColor:w,fontSelectedColor:E,fontSelectedBackgroundColor:m,fontHoverColor:y,fontHoverBackgroundColor:Q,canvasBackgroundColor:C,canvasSelectionColor:V,canvasSelectionWidth:W,canvasSelectionPadding:G}={...Ct.uiStyle,...d?.uiStyle??{}},R=s!=="viewer",ne=n\|\|!R,ce=g.useRef(null),K=g.useRef(null),[$,pe]=g.useState({width:e,height:i,scaleRatio:1}),[ee,J]=g.useState(h),[ge,we]=g.useState([0,0]),[Nt,ut]=g.useState(void 0),re=g.useMemo(()=>({brushAlgo:c,canvasSize:$,canvasOffset:ge,gridFormat:ee,selectionPadding:G}),[G,ee,c,ge,$]),[ze,ht]=g.useState(ti(T,k\|\|b)),{isInsideComponent:Pe}=(({disabled:A,componentRef:I})=>{const[le,X]=g.useState(!1);return g.useEffect(()=>{if(!A){const Y=ue=>{X(x1(ue,I.current))};return document.addEventListener("mousedown",Y,{passive:!0}),document.addEventListener("touchstart",Y,{passive:!0}),()=>{document.removeEventListener("mousedown",Y),document.removeEventListener("touchstart",Y)}}X(!1)},[A,I]),{isInsideComponent:le}})({disabled:ne,componentRef:ce}),[Xe,te]=g.useState(!1),[se,ye]=g.useState(!1),[Qe,fe]=g.useState(me),[Ye,qe]=g.useState({mode:"default"}),[Qa,xa]=g.useState(!1);o&&(o.current={getCurrentImage:()=>K.current?W1(ke.current,e,i,re):void 0,getCurrentData:()=>F1(ke.current,e,i)});const{shapesRef:ke,selectedShape:pt,selectionFrame:ba,hoveredShape:Sa,addShape:Dt,addPictureShape:ri,moveShapes:Ca,setSelectedShape:Me,setSelectionFrame:wa,refreshSelectedShapes:ka,refreshHoveredShape:Ma,removeShape:It,updateShape:Wt,backwardShape:zt,forwardShape:$t,clearShapes:li,saveShapes:ja,toggleShapeVisibility:La,toggleShapeLock:Va,canGoBackward:Pa,canGoForward:Ha,canClear:Ta}=Ui(r,re),{snackbarList:Aa,addSnackbar:xe}=Yi(),He=g.useCallback(A=>{Me(void 0),fe(A)},[Me]),Za=g.useCallback((A,I,le)=>{ht(X=>X.map(Y=>Y.id===A?_(["settings",I,"default"],le,Y):Y)),fe(X=>X.id===A?_(["settings",I,"default"],le,X):X)},[]),Fa=g.useCallback(()=>{He(me),zt()},[He,zt]),Ea=g.useCallback(()=>{He(me),$t()},[He,$t]),gt=g.useCallback((A=[],I=!1)=>{li(A,I),He(me),we([0,0])},[He,li]),Te=g.useCallback(async(A,I=!0)=>{const le=await(async(X,Y)=>{if(!X.shapes)return[];const ue=[],Ge=st(X.shapes.map(oe=>{if(!oe\|\|!qt.includes(oe.type))return null;if(oe.type==="picture"){const be=new Image,Ua=new Promise((Ot,Ba)=>{be.onload=()=>{URL.revokeObjectURL(be.src),Ot()},be.onerror=()=>{Ba(new Error("Some images could not be loaded"))}});return ue.push(Ua),oe.src.startsWith("http")?D1(oe.src).then(Ot=>{be.src=Ot}).catch(()=>{be.src=""}):be.src=oe.src,E1({...oe,img:be},Y)}return E1(oe,Y)}));return await Promise.all(ue),Ge})(A,re);gt(le,I)},[gt,re]),Ra=g.useCallback(()=>{typeof j!="string"?Te({shapes:j()},!1):j==="defaultShapes"&&t!==void 0?Te({shapes:t},!1):gt()},[gt,Te,t,j]),_e=g.useCallback(A=>{fe(me),Me(A)},[Me]),Na=g.useCallback(A=>{Dt(A),_e(A)},[Dt,_e]),Da=g.useCallback(()=>{te(!0);try{const A=K.current&&W1(ke.current,e,i,re);if(!A)throw new Error;I1(A,"drawing.png"),te(!1)}catch(A){A instanceof Error&&xe({type:"error",text:"L'export a échoué"}),console.warn(A)}finally{te(!1)}},[xe,ke,e,i,re]),Ia=g.useCallback(()=>{te(!0);try{const A=Mi(ke.current,e,i);if(!A)throw new Error("L'encodage a échoué");I1(A,"drawing.json"),te(!1)}catch(A){A instanceof Error&&xe({type:"error",text:"L'enregistrement a échoué"}),console.warn(A)}finally{te(!1)}},[ke,xe,e,i]),Wa=g.useCallback(async A=>{te(!0);try{const I=await(async le=>new Promise((X,Y)=>{const ue=new FileReader;ue.onload=Ge=>{const oe=Ge.target?.result;if(!oe)return Y("Impossible de récupérer les données du fichier");const be=JSON.parse(oe);X(be)},ue.readAsText(le)}))(A);await Te(I),xe({type:"success",text:"Fichier chargé !"})}catch(I){I instanceof Error&&xe({type:"error",text:"Le chargement a échoué"}),console.warn(I)}finally{te(!1)}},[Te,xe]),za=g.useCallback(async A=>{te(!0);try{const I=await ri(A,e,i);_e(I)}catch(I){I instanceof Error&&xe({type:"error",text:"Le chargement a échoué"}),console.warn(I)}finally{te(!1)}},[ri,_e,xe,e,i]),$a=g.useCallback(A=>{const I=A/e;pe({width:A,height:iI,scaleRatio:I})},[e,i]);Oi({isInsideComponent:Pe,isEditingText:Ye.mode==="textedition",settings:re,selectedShape:pt,setSelectedShape:Me,removeShape:It,pasteShape:Na,updateShape:Wt,backwardShape:zt,forwardShape:$t,setShiftPressed:xa}),(({onResized:A,element:I})=>{g.useEffect(()=>{const le=I.current;if(!le)return;const X=new ResizeObserver(Y=>{const ue=Y?.[0]?.borderBoxSize?.[0],{width:Ge,height:oe}=ue?{width:ue.inlineSize,height:ue.blockSize}:Y?.[0].contentRect??{};A(Ge,oe)});return X.observe(le),()=>{X.unobserve(le)}},[I,A])})({element:ce,onResized:$a}),g.useEffect(()=>{ht(ti(T,k\|\|b))},[T,k,b]),g.useEffect(()=>{Pe\|\|Me(void 0)},[Pe,Me]);const di=g.useRef(Te);di.current=Te,g.useEffect(()=>{t!==void 0&&di.current({shapes:t})},[t]);const Oa=`${a}${se?" react-paint-editor-layout-opened":""} react-paint-editor-app`;return l.jsxs("div",{ref:ce,className:Oa,"data-grow":p,"data-shrink":f,style:{"--react-paint-editor-app-canvaswidth":`${e}px`,"--react-paint-editor-app-toolbar-bg":N,"--react-paint-editor-app-divider-color":F,"--react-paint-editor-app-font-radius":H,"--react-paint-editor-app-font-disabled-color":M,"--react-paint-editor-app-font-disabled-bg":P,"--react-paint-editor-app-font-color":L,"--react-paint-editor-app-font-bg":w,"--react-paint-editor-app-font-selected-color":E,"--react-paint-editor-app-font-selected-bg":m,"--react-paint-editor-app-font-hover-color":y,"--react-paint-editor-app-font-hover-bg":Q,"--react-paint-editor-app-canvas-bg":C},children:[R&&l.jsx(ya,{width:$.width,disabled:ne,activeTool:Qe,clearCanvas:Ra,setActiveTool:He,exportCanvasInFile:Da,saveFile:Ia,loadFile:Wa,addPicture:za,hasActionToUndo:Pa,hasActionToRedo:Ha,hasActionToClear:Ta,undoAction:Fa,redoAction:Ea,availableTools:ze,withExport:v,withLoadAndSave:S,withUploadPicture:k,withUrlPicture:b}),l.jsxs("div",{className:"react-paint-editor-app-row","data-grow":p,style:{"--react-paint-editor-app-row-zindex":ci,"--react-paint-editor-app-row-width":$.width,"--react-paint-editor-app-row-aspectratio":`calc(${$.width} / ${$.height})`},children:[l.jsx(ia,{canGrow:p,disabled:ne,isInsideComponent:Pe,activeTool:Qe,setActiveTool:fe,canvasOffsetStartPosition:Nt,setCanvasOffsetStartPosition:ut,shapes:ke.current,addShape:Dt,updateSingleShape:Wt,selectedShape:pt,selectionFrame:ba,setSelectedShape:Me,setSelectionFrame:wa,hoveredShape:Sa,refreshHoveredShape:Ma,refreshSelectedShapes:ka,settings:re,setCanvasOffset:we,saveShapes:ja,ref:K,canvasSize:$,selectionMode:Ye,setSelectionMode:qe,selectionColor:V,selectionWidth:W,isEditMode:R,isShiftPressed:Qa,withFrameSelection:x,withSkeleton:Z}),R&&u&&l.jsx(ra,{gridFormat:ee,setGridFormat:J,disabled:ne,shapes:ke.current,moveShapes:Ca,selectedShape:pt,removeShape:It,selectShape:_e,toggleShapeVisibility:La,toggleShapeLock:Va,isLayoutPanelShown:se})]}),R&&l.jsxs(l.Fragment,{children:[l.jsx(pa,{width:$.width,disabled:ne,activeTool:Qe,availableTools:ze,selectedShape:pt,settings:re,removeShape:It,updateShape:Wt,canvas:K.current,layersManipulation:u,toggleLayoutPanel:()=>{ye(A=>!A)},updateToolSettings:Za}),l.jsx(hi,{isLoading:Xe}),l.jsx(na,{snackbarList:Aa})]})]})}});

package/dist/types/Shapes.d.ts CHANGED Viewed

@@ -114,9 +114,7 @@ export type DrawableShape<T extends ShapeType = ShapeType> = {
     scaleX?: number;
     scaleY?: number;
 } : never);
-export type DrawableShapeJson<T extends ShapeType = ShapeType> = DrawableShape<T> & {
-    translation?: Point;
-};
+export type DrawableShapeJson<T extends ShapeType = ShapeType> = DrawableShape<T>;
 export type ShapeEntity<T extends Exclude<ShapeType, 'triangle'> = Exclude<ShapeType, 'triangle'>> = {
     id: string;
     toolId?: string;

package/dist/utils/canvas.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { UtilsSettings } from 'src/constants/app';
 import type { Point } from '../types/Shapes';
 export declare const initCanvasContext: (ctx: CanvasRenderingContext2D) => void;
 export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?: {
@@ -8,4 +9,4 @@ export declare const updateCanvasContext: (ctx: CanvasRenderingContext2D, style?
     lineDash?: number;
     lineCap?: CanvasLineCap;
 }) => void;
-export declare const transformCanvas: (ctx: CanvasRenderingContext2D, responsiveScale: number, canvasOffset: Point, rotation?: number, translation?: Point) => void;
+export declare const transformCanvas: (ctx: CanvasRenderingContext2D, settings: UtilsSettings, rotation?: number, translation?: Point) => void;

package/dist/utils/data.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
+import { UtilsSettings } from 'src/constants/app';
 import type { DrawableShape, DrawableShapeJson, ExportDataType, ShapeEntity } from '../types/Shapes';
 export declare const cleanShapesBeforeExport: (shapes: DrawableShape[]) => DrawableShapeJson[];
 export declare const buildDataToExport: (shapes: DrawableShape[], width: number, height: number) => ExportDataType;
-export declare const addDefaultAndTempShapeProps: (shape: DrawableShape, currentScale: number, selectionPadding: number) => ShapeEntity;
+export declare const addDefaultAndTempShapeProps: (shape: DrawableShape, settings: UtilsSettings) => ShapeEntity;

package/dist/utils/file.d.ts CHANGED Viewed

@@ -1,10 +1,11 @@
-import type { DrawableShape, ExportDataType, Point, ShapeEntity } from '../types/Shapes';
+import { UtilsSettings } from 'src/constants/app';
+import type { DrawableShape, ExportDataType, ShapeEntity } from '../types/Shapes';
 export declare const addSizeAndConvertSvgToObjectUrl: (svgFileContent: string) => string;
 export declare const isSvg: (fileOrUrl: File | string) => boolean;
 export declare const fetchAndStringify: (url: string) => Promise<string>;
 export declare const downloadFile: (content: string, fileName: string) => void;
 export declare const getBase64Image: (img: HTMLImageElement) => string;
-export declare const getCanvasImage: (shapes: DrawableShape[], canvasOffset: Point, width: number, height: number, selectionPadding: number) => string;
+export declare const getCanvasImage: (shapes: DrawableShape[], width: number, height: number, settings: UtilsSettings) => string;
 export declare const encodeShapesInString: (shapes: DrawableShape[], width: number, height: number) => string;
 export declare const decodeJson: (file: File) => Promise<unknown>;
-export declare const decodeImportedData: (shapesForJson: ExportDataType, currentScale: number, selectionPadding: number) => Promise<ShapeEntity[]>;
+export declare const decodeImportedData: (shapesForJson: ExportDataType, settings: UtilsSettings) => Promise<ShapeEntity[]>;

package/dist/utils/grid.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
-import { GridFormatType } from '../constants/app';
-import type { Point } from '../types/Shapes';
-export declare const drawGrid: (ctx: CanvasRenderingContext2D, width: number, height: number, responsiveScale: number, canvasOffset: Point, gridFormat: GridFormatType) => void;
+import { UtilsSettings } from '../constants/app';
+export declare const drawGrid: (ctx: CanvasRenderingContext2D, width: number, height: number, settings: UtilsSettings) => void;