npm - @yorab/react-paint - Versions diffs - 0.11.5 → 0.11.6 - Mend

@yorab/react-paint 0.11.5 → 0.11.6

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 (5) hide show

package/README.md +382 -382
package/dist/canvas/utils/string.d.ts +2 -0
package/dist/react-paint.js +178 -178
package/dist/react-paint.umd.cjs +1 -1
package/package.json +1 -2

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

	@@ -1 +1 @@
1	- (function(Se,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],g):g((Se=typeof globalThis<"u"?globalThis:Se\|\|self)["react-paint"]={},Se.React,Se.jsxRuntime)})(this,function(Se,g,d){"use strict";const Bt='<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>',St='<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>',Xt='<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>',bt='<svg><path d="M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z"/></svg>',Yt='<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>',_t='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',qt='<svg><path d="M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z"/></svg>',Jt='<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>',Kt='<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>',ea='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',ta='<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>',aa='<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>',ne=["transparent","black","white","red","green","blue","yellow"],Ve=[0,1,2],na=[[1,0],[1,2],[4,6]],_e="serif",cn=2,ia=3,un=4,X="react-paint-",xt={type:"picture",id:`${X}picture`,icon:bt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},sa={type:"brush",id:`${X}brush`,icon:Bt,label:"Brosse",settings:{strokeColor:{values:ne,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:Ve,default:0}}},oa={type:"line",id:`${X}line`,icon:_t,label:"Ligne",settings:{strokeColor:{values:ne,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0},lineArrow:{values:[0,1,2,3],default:0}}},ra={type:"polygon",id:`${X}polygon`,icon:St,label:"Polygone",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},la={type:"curve",id:`${X}curve`,icon:qt,label:"Courbe",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},da={type:"rect",id:`${X}rect`,icon:yt,label:"Rectangle",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0}}},ca={type:"square",id:`${X}square`,icon:yt,label:"Carré",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0}}},ua={type:"circle",id:`${X}circle`,icon:Qt,label:"Cercle",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0}}},ha={type:"ellipse",id:`${X}ellipse`,icon:Qt,label:"Ellipse",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0}}},pa={type:"text",id:`${X}text`,icon:Yt,label:"Texte",settings:{strokeColor:{values:ne,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}}},be={id:`${X}selection`,type:"selection",icon:'<svg><path d="M8.0145 11.1707C8.38484 10.9914 8.82183 11.1558 8.99959 11.5295L10.7031 15.2591L12.0363 14.6238L10.3254 10.9017C10.1476 10.528 10.3106 10.0795 10.6809 9.90761L10.8883 9.84782L12.5918 9.51148L6.48133 4.33192V12.389L7.82934 11.2903L8.0145 11.1707ZM10.6587 16.9258C10.2883 17.1052 9.84395 16.9482 9.67359 16.5745L8.05894 13.0318L6.19988 14.5416C6.07396 14.6462 5.91842 14.706 5.74066 14.706C5.54423 14.706 5.35584 14.6272 5.21694 14.4871C5.07803 14.3469 5 14.1568 5 13.9586V2.74741C5 2.54919 5.07803 2.35908 5.21694 2.21891C5.35584 2.07874 5.54423 2 5.74066 2C5.91842 2 6.08878 2.06727 6.21469 2.1719L6.2221 2.16443L14.7323 9.36947C15.0508 9.63854 15.0879 10.1094 14.8286 10.4233C14.7175 10.5579 14.562 10.6475 14.4064 10.6774L12.0659 11.1408L13.6954 14.6761C13.888 15.0498 13.7102 15.4908 13.3399 15.6627L10.6587 16.9258Z"/></svg>',label:"Sélection"},Ne={id:`${X}undo`,type:"undo",icon:'<svg><path d="M11.708 15.833H5.854V14.083H11.708Q13 14.083 13.958 13.292Q14.917 12.5 14.917 11.271Q14.917 10.042 13.958 9.24Q13 8.438 11.708 8.438H6.667L8.792 10.562L7.562 11.792L3.333 7.562L7.562 3.333L8.792 4.562L6.667 6.688H11.708Q13.729 6.688 15.198 7.99Q16.667 9.292 16.667 11.25Q16.667 13.208 15.198 14.521Q13.729 15.833 11.708 15.833Z"/></svg>',label:"Undo"},Ie={id:`${X}redo`,type:"redo",icon:'<svg><path d="M8.292 15.833Q6.271 15.833 4.802 14.521Q3.333 13.208 3.333 11.25Q3.333 9.292 4.802 7.99Q6.271 6.688 8.292 6.688H13.333L11.208 4.562L12.438 3.333L16.667 7.562L12.438 11.792L11.208 10.562L13.333 8.438H8.292Q7 8.438 6.042 9.229Q5.083 10.021 5.083 11.25Q5.083 12.5 6.042 13.292Q7 14.083 8.292 14.083H14.146V15.833Z"/></svg>',label:"Redo"},We={id:`${X}clear`,type:"clear",icon:'<svg><path d="M7.854 13.812 10 11.688 12.125 13.812 13.354 12.604 11.208 10.458 13.354 8.312 12.125 7.104 10 9.229 7.854 7.104 6.625 8.312 8.771 10.458 6.625 12.604ZM5.896 17.5Q5.167 17.5 4.656 16.99Q4.146 16.479 4.146 15.75V5.125H3.333V3.375H7.542V2.5H12.458V3.375H16.667V5.125H15.833V15.75Q15.833 16.479 15.323 16.99Q14.812 17.5 14.083 17.5Z"/></svg>',label:"Clear"},Ct={id:`${X}export`,type:"export",icon:'<svg><path d="M10 13.271 5.708 8.979 6.958 7.729 9.125 9.896V3.333H10.875V9.896L13.042 7.729L14.292 8.979ZM5.083 16.667Q4.354 16.667 3.844 16.156Q3.333 15.646 3.333 14.917V12.5H5.083V14.917Q5.083 14.917 5.083 14.917Q5.083 14.917 5.083 14.917H14.917Q14.917 14.917 14.917 14.917Q14.917 14.917 14.917 14.917V12.5H16.667V14.917Q16.667 15.646 16.156 16.156Q15.646 16.667 14.917 16.667Z"/></svg>',label:"Export PNG"},ga={id:`${X}load`,type:"loadfile",icon:'<svg><path d="M3.417 16.667Q2.729 16.667 2.198 16.135Q1.667 15.604 1.667 14.917V5.083Q1.667 4.396 2.198 3.865Q2.729 3.333 3.417 3.333H8.25L9.917 5H16.667Q17.354 5 17.844 5.531Q18.333 6.062 18.333 6.75H3.417V14.917Q3.417 14.917 3.417 14.917Q3.417 14.917 3.417 14.917L5.438 8.5H19.583L17.396 15.479Q17.229 16.021 16.802 16.344Q16.375 16.667 15.833 16.667Z"/></svg>',label:"Load project"},wt={id:`${X}save`,type:"savefile",icon:'<svg><path d="M17.5 5.833V15.75Q17.5 16.479 16.99 16.99Q16.479 17.5 15.75 17.5H4.25Q3.521 17.5 3.01 16.99Q2.5 16.479 2.5 15.75V4.25Q2.5 3.521 3.01 3.01Q3.521 2.5 4.25 2.5H14.167ZM10 14.917Q11.062 14.917 11.823 14.156Q12.583 13.396 12.583 12.333Q12.583 11.271 11.823 10.51Q11.062 9.75 10 9.75Q8.938 9.75 8.177 10.51Q7.417 11.271 7.417 12.333Q7.417 13.396 8.177 14.156Q8.938 14.917 10 14.917ZM5.021 8.396H12.521V5.021H5.021Z"/></svg>',label:"Save project"},fa={id:`${X}upload-picture`,type:"uploadpicture",icon:bt,label:"Upload picture"},va=2,ma="blue",xe=14,ya=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],Qa=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle"],Sa="react-paint-canvas-drawcanvas",ba="react-paint-canvas-selectioncanvas",xa={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[sa,oa,ra,la,da,ca,ua,ha,xt,pa],clearCallback:"empty",brushAlgo:"simple",isBrushShapeDoneOnMouseUp:!0,withFrameSelection:!1,withSkeleton:!0,canvasSelectionPadding:0},hn={canvasBackgroundColor:"white",canvasSelectionColor:ma,canvasSelectionWidth:va},Ca=(e,a)=>!!(e.target instanceof Node&&a)&&a.contains(e.target),it=300,kt=(e,a)=>{const t={...a};for(const n of e)delete t[n];return t},ie=(e,a,t)=>{const n=Array.isArray(t)?[...t]:{...t},s=Array.isArray(e)?e:typeof e=="string"?e.split("."):[e];return s.reduce((i,r,o)=>(i[r]=Mt(i[r])?{...i[r]}:Array.isArray(i[r])?[...i[r]]:i[r]===void 0\|\|i[r]===null?{}:i[r],o===s.length-1&&(i[r]=a),i[r]),n),n},Mt=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,fe=(e,a,t)=>{if(!Mt(a)\|\|!Mt(t))return t;const n={...a};for(const s in t)Object.hasOwn(t,s)&&(Object.hasOwn(n,s)?n[s]=e(n[s],t[s],s)??fe(e,n[s],t[s]):n[s]=t[s]);return n},wa=(e,a)=>{if(e===a)return!0;if(typeof e!="object"\|\|typeof a!="object"\|\|e===null\|\|a===null)return!1;const t=Object.keys(e),n=Object.keys(a);if(t.length!==n.length)return!1;for(const s of t)if(!n.includes(s)\|\|!wa(e[s],a[s]))return!1;return!0},jt={},te=(e="")=>(jt[e]\|\|(jt[e]=0),`${e}${++jt[e]}`),Lt=e=>e.filter(a=>a!=null),ka=e=>{e.lineCap="round",e.lineJoin="round"},Ae=(e,a={})=>{const{lineCap:t="round",fillColor:n="transparent",opacity:s=100,strokeColor:i=ma,lineWidth:r=va,lineDash:o=0}=a;e.lineCap=t,e.globalAlpha=s/100,e.fillStyle=n,e.strokeStyle=i,e.lineWidth=r,e.setLineDash(o===0?[]:[na[o][0]r,na[o][1]r])},Vt=(e,a,t,n)=>{e.save(),e.scale(a.canvasSize.scaleRatio,a.canvasSize.scaleRatio),e.translate(a.canvasOffset[0],a.canvasOffset[1]),t&&n&&(e.translate(n[0],n[1]),e.rotate(t),e.translate(-n[0],-n[1]))},st=e=>{const a=new Path2D;return a.rect(e.x,e.y,e.width,e.height),a},ot=e=>{const a=new Path2D;return a.arc(e.x,e.y,e.radius,0,2Math.PI),a},Pt=e=>{const a=new Path2D;return a.moveTo(...e.points[0]),a.lineTo(...e.points[1]),a},pn=e=>{const a=new Path2D;return a.moveTo(...e.points[0]),a.lineTo(...e.points[1]),a.lineTo(...e.points[2]),a.lineTo(...e.points[0]),a},Ht=(e,a,t,n=!1)=>{const{borders:s}=B(a,t);return{border:st(s),shapePath:e,anchors:[...a.points.map((i,r)=>n&&r>0&&r<a.points.length-1?st({x:i[0]-7,y:i[1]-7,width:xe/t.canvasSize.scaleRatio,height:xe/t.canvasSize.scaleRatio}):ot({x:i[0],y:i[1],radius:7/t.canvasSize.scaleRatio}))]}},ze=(e,a)=>{const t=((n,{brushAlgo:s})=>{if(n.points.length<1\|\|n.style?.strokeColor==="transparent")return;const i=n.points.flat(),r=i.map(u=>u[0]),o=i.map(u=>u[1]),l=Math.min(...r),h=Math.min(...o),c=new Path2D;for(const u of n.points){if(!u.length)return;if(u.length===1)c.rect(...ue(u[0],l,h,n.scaleX,n.scaleY),1,1);else if(c.moveTo(...ue(u[0],l,h,n.scaleX,n.scaleY)),s==="quadratic"){for(let p=0;p<u.slice(1).length-2;p++){const f=ue(u[p],l,h,n.scaleX,n.scaleY),m=ue(u[p+1],l,h,n.scaleX,n.scaleY),k=(f[0]+m[0])/2,w=(f[1]+m[1])/2;c.quadraticCurveTo(...f,k,w)}c.quadraticCurveTo(...ue(u[u.length-2],l,h,n.scaleX,n.scaleY),...ue(u[u.length-1],l,h,n.scaleX,n.scaleY))}else for(const p of u.slice(1))c.lineTo(...ue(p,l,h,n.scaleX,n.scaleY))}return c})(e,a);return{...e,path:t,selection:Oe(t,e,a)}},gn=ze,Tt=e=>180e/Math.PI,Ma=(e,a)=>{const t=a.x-Math.min(Math.max(a.x,e.x),e.x+e.width),n=a.y-Math.min(Math.max(a.y,e.y),e.y+e.height);return Math.sqrt(tt+nn)<=a.radius},le=({origin:e=[0,0],point:a,rotation:t})=>{const n=[a[0]-e[0],a[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]]},ja=e=>(e+2Math.PI)%(2Math.PI),La=({targetVector:[e,a],radian:t=!0,originVector:n})=>{const s=ja(Math.atan2(a[1]-e[1],a[0]-e[0]));if(n){const[i,r]=n,o=Math.atan2(r[1]-i[1],r[0]-i[0]),l=ja(s-o);return t?l:Tt(l)}return t?s:Tt(s)},Pe=(e,a=2)=>Math.round(e10a)/10a,ue=(e,a,t,n=1,s=1)=>[a+(e[0]-a)n,t+(e[1]-t)s],I=(e,a,t=0)=>{if(!a.gridGap)return Pe(e);const n=e+t,s=n>=0?a.gridGap:-a.gridGap;return n+s/2-(n+s/2)%s-t},fn=(e,a,t=0)=>a.gridGap?e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18):Pe(e,3),vn=(e,a,t,n,s,i)=>{switch(n.mode){case"brush":return((r,o,l)=>{const h={...r,points:ie(r.points.length-1,[...r.points[r.points.length-1],[Math.round(o[0]),Math.round(o[1])]],r.points)};return ze(h,l)})(a,t,s);case"translate":return Rt(t,n.originalShape,n.cursorStartPosition,s);case"rotate":return Hn(a,t,n.originalShape,n.cursorStartPosition,n.center,s);case"resize":return Tn(e,a,t,n.originalShape,n,s,i);default:return a}},Oe=(e,a,t)=>{const{borders:n}=B(a,t);return{border:st(n),shapePath:e,line:Pt({points:[[n.x+n.width/2,n.y],[n.x+n.width/2,n.y-23/t.canvasSize.scaleRatio]]}),anchors:[ot({x:n.x+n.width/2,y:n.y-23/t.canvasSize.scaleRatio,radius:7/t.canvasSize.scaleRatio}),...ya.map(s=>ot({x:n.x+n.widths[0],y:n.y+n.heights[1],radius:7/t.canvasSize.scaleRatio}))]}},Va=({borderStart:e,borderSize:a,vector:t,settings:n,invertedAxe:s,anchor:i})=>{switch(i){case 0:{if(s){const o=a-2n.selectionPadding;return[e+o,t-o]}const r=Math.max(2n.selectionPadding,a-t);return[e+a-r,r]}case .5:return[e,a];case 1:if(s){const r=a+t;return[e+r,2n.selectionPadding-r]}return[e,Math.max(2n.selectionPadding,a+t)];default:return[0,0]}},Pa=({borderX:e,borderWidth:a,borderY:t,borderHeight:n,center:s,originalShape:i})=>{const r=[e+a/2-s[0],t+n/2-s[1]],[o,l]=le({point:r,rotation:-i.rotation});return{borderX:Pe(e+o-r[0]),borderWidth:Pe(a),borderY:Pe(t+l-r[1]),borderHeight:Pe(n)}},$e=(e,a,t,n,s=!1)=>{const{center:i,borders:r}=B(a,n),o=le({origin:i,point:e,rotation:a.rotation}),l=t.anchor[0]===0&&o[0]>=r.x+r.width\|\|t.anchor[0]===1&&o[0]<=r.x,h=t.anchor[1]===0&&o[1]>=r.y+r.height\|\|t.anchor[1]===1&&o[1]<=r.y,c=[I(o[0],n,t.anchor[0]===0&&!l\|\|t.anchor[0]===1&&l?n.selectionPadding:-n.selectionPadding),I(o[1],n,t.anchor[1]===0&&!h\|\|t.anchor[1]===1&&h?n.selectionPadding:-n.selectionPadding)],u=n.gridGap?[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]:le({origin:i,point:t.cursorStartPosition,rotation:a.rotation}),p=[c[0]-u[0],c[1]-u[1]],[f,m]=Va({borderStart:r.x,borderSize:r.width,vector:p[0],settings:n,invertedAxe:l,anchor:t.anchor[0]}),[k,w]=Va({borderStart:r.y,borderSize:r.height,vector:p[1],settings:n,invertedAxe:h,anchor:t.anchor[1]});if(s){const b=((L,x,j,P,E,H,T,C,V,N)=>{const{selectionPadding:Q}=N,R=(x.width-2Q\|\|1)/(x.height-2Q\|\|1),M=(E-2Q)/(T-2Q);let A,Z,v,y;return V.anchor[0]!==.5&&V.anchor[1]!==.5?M<R?(Z=H,y=T,v=(T-2Q)R+2Q,A=V.anchor[0]===0?x.width-L[0]>Q?x.x+(x.width-v):x.x+x.width-2Q:x.width+L[0]>Q?x.x:x.x-v+2Q):(A=P,v=E,y=(E-2Q)/R+2Q,Z=V.anchor[1]===0?x.height-L[1]>Q?x.y+(x.height-y):x.y+x.height-2Q:x.height+L[1]>Q?x.y:x.y-y+2Q):V.anchor[0]!==.5?(A=P,v=E,y=(E-2Q)/R+2Q,Z=x.y+(x.height-y)/2):(Z=H,y=T,v=(T-2Q)R+2Q,A=x.x+(x.width-v)/2),{borderX:A,borderWidth:v,borderY:Z,borderHeight:y,center:j,originalShape:C}})(p,r,i,f,m,k,w,a,t,n);return Pa(b)}return Pa({borderX:f,borderWidth:m,borderY:k,borderHeight:w,center:i,originalShape:a})},rt=(e,a)=>{const t=ot(e);return{...e,path:t,selection:Oe(t,e,a)}},mn=rt,At=(e,a,t)=>{const{clientX:n=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:{},i=a?.getBoundingClientRect()??{left:0,top:0,width:t.canvasSize.width,height:t.canvasSize.height};return[(n-i.left)(t.canvasSize.width/i.width)/t.canvasSize.scaleRatio,(s-i.top)(t.canvasSize.height/i.height)/t.canvasSize.scaleRatio]},Ha=e=>"touches"in e,Ze=(e,a,[t,n],[s,i])=>le({origin:[t-s,n-i],point:e,rotation:a}),lt=(e,a,t)=>t?Ma(e,{x:a[0],y:a[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,a),qe=(e,a,t,n=!1,s=0)=>{if(e.locked)return!1;const{canvasSize:{scaleRatio:i}}=t,{borders:r,center:o}=B(e,t),l=Ze(a,e.rotation,o,t.canvasOffset);if(n)if(e.type==="line"\|\|e.type==="polygon"\|\|e.type==="curve"){for(let h=0;h<e.points.length;h++)if(lt({x:e.points[h][0]-7/i,y:e.points[h][1]-7/i,width:xe/i,height:xe/i},l,s))return{mode:"resize",anchor:h}}else{if(lt({x:r.x+r.width/2-7/i,y:r.y-xe/i-16/i,width:xe/i,height:xe/i},l,s))return{mode:"rotate"};for(const h of ya)if(lt({x:r.x+r.widthh[0]-7/i,y:r.y+r.heighth[1]-7/i,width:xe/i,height:xe/i},l,s))return{mode:"resize",anchor:h}}return!!lt(r,l,s)&&{mode:"translate"}},Ta=(e,a,t,n)=>{if(a.locked)return!1;const{center:s}=B(a,n),i=Ze(t,a.rotation,s,n.canvasOffset);return"path"in a&&a.path?a.style?.fillColor&&a.style?.fillColor!=="transparent"?!!e.isPointInPath(a.path,i[0],i[1])&&{mode:"translate"}:(e.lineWidth=(a.style?.lineWidth??0)+15,!!e.isPointInStroke(a.path,i[0],i[1])&&{mode:"translate"}):qe(a,t,n,!1)};function Aa(e,a){const t=Math.max(e.x,a.x),n=Math.max(e.y,a.y),s=Math.min(e.x+(e.width\|\|1),a.x+(a.width\|\|1)),i=Math.min(e.y+(e.height\|\|1),a.y+(a.height\|\|1));if(t<s&&n<i)return{x:t,y:n,width:s-t,height:i-n}}const Za=({ctx:e,path:a,rect:t,offset:n,checkFill:s})=>{for(let i=0;i<n;i+=n/2)for(let r=0;r<n;r+=n/2)for(let o=i+t.x;o<t.x+t.width;o+=n)for(let l=r+t.y;l<t.y+t.height;l+=n)if(s?e.isPointInPath(a,o,l):e.isPointInStroke(a,o,l))return!0;return!1},Ue=(e,a)=>{const t=(n=>{if(n.points.length<1)return;const s=new Path2D;s.moveTo(...n.points[0]);for(const i of n.points.slice(1))s.lineTo(...i);return s.lineTo(...n.points[0]),s})(e);return{...e,path:t,selection:Ht(t,e,a)}},yn=Ue,Ea=(e,a)=>{const t=Math.min(...e.points.map(i=>i[0]))-a.selectionPadding,n=Math.max(...e.points.map(i=>i[0]))+a.selectionPadding,s=Math.min(...e.points.map(i=>i[1]))-a.selectionPadding;return{x:t,width:n-t,y:s,height:Math.max(...e.points.map(i=>i[1]))+a.selectionPadding-s}},Be=(e,a)=>{const t=(n=>{if(n.points.length<3)return;const s=new Path2D;s.moveTo(...n.points[0]);for(let i=1;i<n.points.length-1;i++)s.quadraticCurveTo(...n.points[i],n.points.length-2===i?n.points[i+1][0]:(n.points[i+1][0]-n.points[i][0])/2+n.points[i][0],n.points.length-2===i?n.points[i+1][1]:(n.points[i+1][1]-n.points[i][1])/2+n.points[i][1]);return s})(e);return{...e,path:t,selection:Ht(t,e,a,!0)}},Qn=Be,Sn=Ea,dt=(e,a)=>{const t=(n=>{const s=new Path2D;return s.ellipse(n.x,n.y,n.radiusX,n.radiusY,0,0,2Math.PI),s})(e);return{...e,path:t,selection:Oe(t,e,a)}},bn=dt,Fa=e=>{return t={...e,type:"triangle"},{...t,path:pn(t)};var t},xn=(e,a)=>{e.globalAlpha!==0&&a.path&&(a.style?.fillColor!=="transparent"&&e.fill(a.path),a.style?.strokeColor!=="transparent"&&e.stroke(a.path))},ct=(e,a)=>{const t=[];let n;if(e.style?.lineArrow===1\|\|e.style?.lineArrow===2\|\|e.style?.lineArrow===3){const s=Math.PI/2-La({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3\|\|t.push(Fa(Ra(e.points[0],s,e.style))),e.style?.lineArrow!==2&&e.style?.lineArrow!==3\|\|t.push(Fa(Ra(e.points[1],s+Math.PI,e.style)));const i=(({line:r,size:o,direction:l})=>{const h=Math.PI/2-La({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 u,p;if(["start","both"].includes(l)){const f=le({point:r.points[0],origin:c,rotation:-h});u=le({point:[f[0],f[1]+o],origin:c,rotation:h})}else u=[...r.points[0]];if(["end","both"].includes(l)){const f=le({point:r.points[1],origin:c,rotation:-h});p=le({point:[f[0],f[1]-o],origin:c,rotation:h})}else p=[...r.points[1]];return{points:[u,p]}})({line:e,size:10+2(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});n=Pt(i)}else n=Pt(e);return{...e,path:n,selection:Ht(n,e,a),arrows:t,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"}}},Cn=ct,Ra=(e,a,t)=>{const n=[le({point:[0,0],rotation:a}),le({point:[-(5+(t.lineWidth??0)),10+2(t.lineWidth??0)],rotation:a}),le({point:[5+(t.lineWidth??0),10+2(t.lineWidth??0)],rotation:a})];return{points:[[e[0]+n[0][0],e[1]+n[0][1]],[e[0]+n[1][0],e[1]+n[1][1]],[e[0]+n[2][0],e[1]+n[2][1]]],style:{...t,fillColor:t.strokeColor,strokeColor:"transparent"}}},ut=(e,a)=>{const t=st(e);return{...e,path:t,selection:Oe(t,e,a)}},wn=ut,kn=(e,a)=>{e.globalAlpha!==0&&a.path&&(a.style?.fillColor!=="transparent"&&e.fill(a.path),a.style?.strokeColor!=="transparent"&&e.stroke(a.path))},Da=(e,a)=>({x:e.x-a.selectionPadding,width:e.width+2a.selectionPadding,y:e.y-a.selectionPadding,height:e.height+2a.selectionPadding}),Na=(e,a,t,n,[s,i]=[!1,!1])=>((r,o,[l,h],[c,u])=>le({origin:[l-c,h-u],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+(i?0:t.height):t.y+(i?t.height:0)],t.rotation,a,n.canvasOffset),ht=(e,a)=>({...e,selection:Oe(void 0,e,a)}),Mn=ht,Zt=(e,a,t,n,s)=>{const[i,r]=((o,l,h,c,u=!1)=>{if(!(o&&l&&c&&h))return[it,it];const p=o/l;if(p>h/c){const m=u?h:Math.min(o,h);return[m,m/p]}const f=u?c:Math.min(l,c);return[fp,f]})(e.width,e.height,t,n,!0);return ht({toolId:xt.id,type:"picture",id:te("picture_"),x:(t-i)/2,y:(n-r)/2,width:i,height:r,src:a,img:e,rotation:0},s)},jn=(e,a,t,n)=>new Promise((s,i)=>{const r=new Image;r.onerror=()=>{i(new Error("Some images could not be loaded"))},setTimeout(()=>{i(new Error("Timeout while loading images"))},4e3),e instanceof File?((o,l,h,c,u,p)=>{$a(h)?h.text().then(f=>{const m=Oa(f);o.onload=async()=>{URL.revokeObjectURL(o.src);const k=Zt(o,f,c,u,p);l(k)},o.src=m}):(o.onload=async()=>{URL.revokeObjectURL(o.src);const f=Zt(o,o.src,c,u,p);l(f)},o.src=URL.createObjectURL(h))})(r,s,e,a,t,n):((o,l,h,c,u,p)=>{o.onload=()=>{URL.revokeObjectURL(o.src);const f=Zt(o,h,c,u,p);l(f)},Ua(h).then(f=>{o.src=f}).catch(()=>{o.src=""})})(r,s,e,a,t,n)}),Et=["Texte"],pt=(e,a)=>({...e,selection:Oe(void 0,e,a)}),Ln=pt,Ft=(e,a,t,n,s,i=_e)=>{e.font=`${s?"italic":""} ${n?"bold":""} 1px ${i}`;const r=a.map(o=>t/e.measureText(o).width);return Math.min(...r)\|\|36},Vn=(e,a,t,n)=>{const s={...a,value:t},i=((m,k,w,b,L,x=_e)=>{m.font=`${L?"italic":""} ${b?"bold":""} ${w}px ${x}`;const j=k.map(P=>m.measureText(P).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:i,height:r},{center:l}=B(a,n),{center:h}=B(o,n),[c,u]=Na([1,1],l,a,n),[p,f]=Na([1,1],h,o,n,[!1,!1]);return{...o,x:o.x-(p-c),y:o.y-(f-u)}},Ia=(e,a,t,n)=>{const s=[I(t[0],n),I(t[1],n)];switch(a.type){case"brush":return((i,r,o)=>ze({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:[[r]],rotation:0,scaleX:1,scaleY:1,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},o))(a,s,n);case"line":return((i,r,o)=>{const l={toolId:i.id,type:i.type,id:te(`${i.type}_`),points:[r,r],rotation:0,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,lineArrow:i.settings.lineArrow.default}};return ct(l,o)})(a,s,n);case"polygon":return((i,r,o)=>Ue({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(r),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},o))(a,s,n);case"curve":return((i,r,o)=>Be({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(r),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},o))(a,s,n);case"rect":case"square":return((i,r,o,l=0,h=0)=>{const c={toolId:i.id,type:i.type,id:te(`${i.type}_`),x:r[0],y:r[1],width:l,height:h,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}};return ut(c,o)})(a,s,n);case"text":return((i,r,o,l)=>{const h=Ft(i,Et,50,r.settings?.fontBold.default??!1,r.settings?.fontItalic.default??!1,r.settings.fontFamily.default);return pt({toolId:r.id,type:r.type,id:te(`${r.type}_`),x:o[0],y:o[1],value:Et,fontSize:h,width:50,height:h(Et.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}},l)})(e,a,s,n);case"ellipse":return((i,r,o)=>dt({toolId:i.id,type:i.type,id:te(`${i.type}_`),x:r[0],y:r[1],radiusX:0,radiusY:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},o))(a,s,n);case"circle":return((i,r,o)=>rt({toolId:i.id,type:i.type,id:te(`${i.type}_`),x:r[0],y:r[1],radius:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},o))(a,s,n)}},Wa=(e,a,t)=>{if(a.visible===!1)return;const{center:n}=B(a,t);switch(Vt(e,t,a.rotation,n),Ae(e,a.style),a.type){case"brush":((s,i)=>{i.points.length<1\|\|!i.path\|\|s.globalAlpha!==0&&i.style?.strokeColor!=="transparent"&&s.globalAlpha!==0&&s.stroke(i.path)})(e,a);break;case"text":((s,i)=>{if(s.globalAlpha!==0&&i.style?.strokeColor&&i.style.strokeColor!=="transparent"){s.font=`${i.style?.fontItalic?"italic":""} ${i.style?.fontBold?"bold":""} ${i.fontSize}px ${i.style?.fontFamily??_e}`,s.textBaseline="top",s.fillStyle=i.style.strokeColor;for(let r=0;r<i.value.length;r++)s.fillText(i.value[r],i.x,i.y+ri.fontSize,i.width)}})(e,a);break;case"line":((s,i)=>{if(s.globalAlpha!==0&&i.path){i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path);for(const r of i.arrows??[])Ae(s,r.style),xn(s,r)}})(e,a);break;case"polygon":((s,i)=>{i.path&&s.globalAlpha!==0&&(i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path))})(e,a);break;case"curve":((s,i)=>{i.path&&s.globalAlpha!==0&&(i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path))})(e,a);break;case"circle":((s,i)=>{s.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path))})(e,a);break;case"ellipse":((s,i)=>{s.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path))})(e,a);break;case"rect":case"square":kn(e,a);break;case"picture":((s,i)=>{s.globalAlpha!==0&&(s.beginPath(),s.drawImage(i.img,i.x,i.y,i.width,i.height))})(e,a)}e.restore()},Pn=(e,a)=>{switch(e.type){case"brush":return((t,{selectionPadding:n})=>{const s=t.points.flat(),i=Math.min(...s.map(c=>c[0])),r=Math.min(...s.map(c=>c[1])),o=s.map(c=>ue(c,i,r,t.scaleX,t.scaleY)),l=Math.max(...o.map(c=>c[0]))+n,h=Math.max(...o.map(c=>c[1]))+n;return{x:i-n,width:l-i+n,y:r-n,height:h-r+n}})(e,a);case"line":return((t,n)=>({x:Math.min(t.points[0][0],t.points[1][0])-n.selectionPadding,width:Math.abs(t.points[0][0]-t.points[1][0])+2n.selectionPadding,y:Math.min(t.points[0][1],t.points[1][1])-n.selectionPadding,height:Math.abs(t.points[0][1]-t.points[1][1])+2n.selectionPadding}))(e,a);case"polygon":return Ea(e,a);case"curve":return Sn(e,a);case"circle":return((t,n)=>({x:t.x-t.radius-n.selectionPadding,width:2(t.radius+n.selectionPadding),y:t.y-t.radius-n.selectionPadding,height:2(t.radius+n.selectionPadding)}))(e,a);case"ellipse":return((t,n)=>({x:t.x-t.radiusX-n.selectionPadding,width:2(t.radiusX+n.selectionPadding),y:t.y-t.radiusY-n.selectionPadding,height:2(t.radiusY+n.selectionPadding)}))(e,a);case"rect":case"square":return Da(e,a);case"text":return((t,n)=>({x:t.x-n.selectionPadding,width:t.width+2n.selectionPadding,y:t.y-n.selectionPadding,height:t.height+2n.selectionPadding}))(e,a);case"picture":return((t,n)=>Da(t,n))(e,a);default:return{x:0,y:0,width:100,height:100}}},B=(e,a)=>{const t=Pn(e,a),n=(s=>[s.x+s.width/2,s.y+s.height/2])(t);return{borders:t,center:n}},Hn=(e,a,t,n,s,i)=>{const r=s[0]-n[0],o=s[1]-n[1],l=s[0]-a[0],h=s[1]-a[1],c=t.rotation+Math.atan2(h,l)-Math.atan2(o,r);return{...e,rotation:fn(c,i)}},Tn=(e,a,t,n,s,i,r)=>{switch(n.type){case"line":return((o,l,h,c)=>{const u=[I(o[0],c),I(o[1],c)],{center:p}=B(l,c),f=Ze(u,l.rotation,p,c.canvasOffset),m=ie(["points",h.anchor],f,l);return ct(m,c)})(t,n,s,i);case"polygon":return((o,l,h,c)=>{const u=[I(o[0],c),I(o[1],c)],{center:p}=B(l,c),f=Ze(u,l.rotation,p,c.canvasOffset),m=ie(["points",h.anchor],f,l);return Ue(m,c)})(t,n,s,i);case"curve":return((o,l,h,c)=>{const u=[I(o[0],c),I(o[1],c)],{center:p}=B(l,c),f=Ze(u,l.rotation,p,c.canvasOffset),m=ie(["points",h.anchor],f,l);return Be(m,c)})(t,n,s,i);case"brush":return((o,l,h,c,u)=>{const{borders:p}=B({...l,scaleX:1,scaleY:1},c),{borders:f}=B(l,c),{borderX:m,borderHeight:k,borderY:w,borderWidth:b}=$e(o,l,h,c,u),L=Math.max(0,p.width-2c.selectionPadding),x=Math.max(0,p.height-2c.selectionPadding),j=Math.max(0,b-2c.selectionPadding),P=Math.max(0,k-2c.selectionPadding),E=L?j/L:1,H=x?P/x:1;if(!L\|\|!x)return l;const T=Pe(m-f.x),C=Pe(w-f.y);return ze({...l,points:l.points.map(V=>V.map(([N,Q])=>[N+T,Q+C])),scaleX:E,scaleY:H},c)})(t,n,s,i,r);case"circle":return((o,l,h,c)=>{const{borderX:u,borderHeight:p,borderY:f,borderWidth:m}=$e(o,l,h,c,!0);return rt({...l,radius:Math.max(0,m/2-c.selectionPadding),x:u+m/2,y:f+p/2},c)})(t,n,s,i);case"ellipse":return((o,l,h,c,u=!1)=>{const{borderX:p,borderHeight:f,borderY:m,borderWidth:k}=$e(o,l,h,c,u);return dt({...l,radiusX:Math.max(0,k/2-c.selectionPadding),radiusY:Math.max(0,f/2-c.selectionPadding),x:p+k/2,y:m+f/2},c)})(t,n,s,i,r);case"rect":case"square":return((o,l,h,c,u=!1)=>{const{borderX:p,borderHeight:f,borderY:m,borderWidth:k}=$e(o,l,h,c,u);return ut({...l,width:Math.max(0,k-2c.selectionPadding),height:Math.max(0,f-2c.selectionPadding),x:p+c.selectionPadding,y:m+c.selectionPadding},c)})(t,n,s,i,a.type==="square"\|\|r);case"text":return((o,l,h,c,u)=>{const{borderX:p,borderHeight:f,borderY:m,borderWidth:k}=$e(l,h,c,u,!0),w=pt({...h,width:Math.max(0,k-2u.selectionPadding),height:Math.max(0,f-2u.selectionPadding),x:p+u.selectionPadding,y:m+u.selectionPadding},u);return{...w,fontSize:Ft(o,w.value,w.width,w.style?.fontBold??!1,w.style?.fontItalic??!1,w.style?.fontFamily)}})(e,t,n,s,i);case"picture":return((o,l,h,c)=>{const{borderX:u,borderHeight:p,borderY:f,borderWidth:m}=$e(o,l,h,c,!0);return ht({...l,width:Math.max(0,m-2c.selectionPadding),height:Math.max(0,p-2c.selectionPadding),x:u+c.selectionPadding,y:f+c.selectionPadding},c)})(t,n,s,i);default:return n}},Rt=(e,a,t,n)=>{switch(a.type){case"rect":case"square":return((s,i,r,o)=>ut({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"ellipse":return((s,i,r,o)=>dt({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"circle":return((s,i,r,o)=>rt({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"picture":return((s,i,r,o)=>ht({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"text":return((s,i,r,o)=>pt({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"line":return((s,i,r,o)=>ct({...i,points:i.points.map(([l,h])=>[I(l+s[0]-r[0],o),I(h+s[1]-r[1],o)])},o))(e,a,t,n);case"polygon":return((s,i,r,o)=>{const{borders:l}=B(i,o);return Ue({...i,points:i.points.map(([h,c])=>o.gridGap?[h+I(l.x+s[0]-r[0],o)-l.x,c+I(l.y+s[1]-r[1],o)-l.y]:[I(h+s[0]-r[0],o),I(c+s[1]-r[1],o)])},o)})(e,a,t,n);case"curve":return((s,i,r,o)=>{const{borders:l}=B(i,o);return Be({...i,points:i.points.map(([h,c])=>o.gridGap?[h+I(l.x+s[0]-r[0],o)-l.x,c+I(l.y+s[1]-r[1],o)-l.y]:[I(h+s[0]-r[0],o),I(c+s[1]-r[1],o)])},o)})(e,a,t,n);case"brush":return((s,i,r,o)=>{const{borders:l}=B(i,o),h=o.gridGap?I(l.x+s[0]-r[0],o)-l.x:s[0]-r[0],c=o.gridGap?I(l.y+s[1]-r[1],o)-l.y:s[1]-r[1];return ze({...i,points:i.points.map(u=>u.map(([p,f])=>[p+h,f+c]))},o)})(e,a,t,n);default:return a}},Je=(e,a)=>{switch(e.type){case"rect":case"square":return wn(e,a);case"ellipse":return bn(e,a);case"circle":return mn(e,a);case"picture":return Mn(e,a);case"text":return Ln(e,a);case"line":return Cn(e,a);case"polygon":return yn(e,a);case"curve":return Qn(e,a);case"brush":return gn(e,a);default:return e}},za=({ctx:e,shape:a,settings:t,selectionWidth:n,selectionColor:s,withAnchors:i=!0})=>{const{center:r}=B(a,t);switch(Vt(e,t,a.rotation,r),a.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((o,l,h,c,u,p)=>{if(l.selection&&(Ae(o,{fillColor:"transparent",strokeColor:h,lineWidth:c/u.canvasSize.scaleRatio}),l.selection.shapePath?o.stroke(l.selection.shapePath):o.stroke(l.selection.border),p&&!l.locked)){l.selection.shapePath&&o.stroke(l.selection.border),o.stroke(l.selection.line),Ae(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/u.canvasSize.scaleRatio});for(const f of l.selection.anchors)o.fill(f),o.stroke(f)}})(e,a,s,n,t,i);break;case"polygon":case"line":case"curve":(({ctx:o,shape:l,withAnchors:h,selectionWidth:c,selectionColor:u,settings:p})=>{if(l.selection&&(Ae(o,{fillColor:"transparent",strokeColor:u,lineWidth:c/p.canvasSize.scaleRatio}),l.selection.shapePath&&o.stroke(l.selection.shapePath),h&&!l.locked)){Ae(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio});for(const f of l.selection.anchors)o.fill(f),o.stroke(f)}})({ctx:e,shape:a,withAnchors:i,selectionWidth:n,selectionColor:s,settings:t})}e.restore()},An=({ctx:e,selectionFrame:a,settings:t})=>{Vt(e,t),((n,s,i)=>{Ae(n,{fillColor:"rgba(170,170,170, 0.1)",strokeColor:"rgb(170,170,170)",lineWidth:1/i.canvasSize.scaleRatio}),n.fillRect(s[0][0],s[0][1],s[1][0]-s[0][0],s[1][1]-s[0][1]),n.strokeRect(s[0][0],s[0][1],s[1][0]-s[0][0],s[1][1]-s[0][1])})(e,a,t),e.restore()},Oa=e=>{const a=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0],t=a.getAttribute("width"),n=a.getAttribute("height");let s;if(t\|\|n)s=e;else{const r=a.getAttribute("viewBox")??"0 0 300 300",[,,o,l]=r.split(" ");a.setAttribute("width",o??it),a.setAttribute("height",l??it),s=new XMLSerializer().serializeToString(a)}const i=new Blob([s],{type:"image/svg+xml"});return URL.createObjectURL(i)},$a=e=>(e instanceof File?e.name:e).includes(".svg"),Ua=e=>$a(e)?fetch(e).then(a=>a.text()).then(a=>Oa(a)):fetch(e).then(a=>a.blob()).then(a=>URL.createObjectURL(a)),Ba=(e,a)=>{const t=document.createElement("a");t.href=e,t.download=a,document.body.appendChild(t),t.click(),document.body.removeChild(t)},Zn=e=>e.src.includes("<svg")?e.src:(a=>{const t=document.createElement("canvas");t.width=a.width,t.height=a.height;const n=t.getContext("2d");return n?(n.drawImage(a,0,0),t.toDataURL("image/png")):""})(e.img),Ga=(e,a,t,n)=>{const s=document.createElement("canvas");s.width=a,s.height=t;const i=s.getContext("2d");if(!i)return"";i.clearRect(0,0,a,t),ka(i);for(let r=e.length-1;r>=0;r--)Wa(i,e[r],ie(["canvasSize","scaleRatio"],1,n));return s.toDataURL("image/png")},En=(e,a,t)=>{return s=Dt(e,a,t),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(s))}`;var s},Fn=e=>{const a=["img","id","selection","path","arrows"];return e.map(t=>t.type!=="picture"\|\|t.src.startsWith("http")?kt(a,t):kt(a,{...t,src:Zn(t)}))},Dt=(e,a,t)=>({shapes:Fn(e),config:{width:a,height:t}}),Xa=(e,a)=>Je({...e,id:te(`${e.type}_`)},a),Rn=(e,a,t)=>{const n=g.useRef([]),s=g.useRef({dataChanged:[]}),[i,r]=g.useState(void 0),[o,l]=g.useState(void 0),[h,c]=g.useState(void 0),[u,p]=g.useState({states:[{shapes:[],selectedShape:void 0,source:"remote"}],cursor:0}),f=u.cursor>0,m=u.cursor<u.states.length-1,k=n.current.length>0,w=g.useCallback(()=>{p(v=>wa(v.states[v.cursor].shapes,n.current)?v:{states:[...v.states.slice(0,v.cursor+1),{shapes:n.current,selectedShape:o,source:"user"}],cursor:v.cursor+1})},[o]),b=g.useCallback(v=>{n.current=[v,...n.current]},[]),L=g.useCallback((v,y,S)=>{if(v.target&&"className"in v.target&&![Sa,ba].includes(v.target.className))return void c(void 0);const F=n.current.find(D=>D.id===o?.id?!!qe(o,S,e):!!Ta(y,D,S,e));c(F)},[e,o]),x=g.useCallback(async(v,y=300,S=300)=>{const F=await jn(v,y,S,e);return b(F),w(),F},[b,w,e]),j=g.useCallback((v,y=!1)=>{n.current=n.current.map(S=>S.id===o?.id?v:S),l(S=>S?.id===v.id?v:S),y&&w()},[o,w]),P=g.useCallback(v=>{const y=v.map(S=>kt(["chosen"],S));n.current=y,w()},[w]),E=g.useCallback(v=>{l(y=>y?.id===v.id?void 0:y),n.current=n.current.filter(y=>y.id!==v.id),w()},[w]),H=g.useCallback(v=>{p(y=>{const S=v(y);return n.current=y.states[S].shapes,l(y.states[S].selectedShape),ie("cursor",S,y)})},[]),T=g.useCallback(()=>{H(v=>Math.max(0,v.cursor-1))},[H]),C=g.useCallback(()=>{H(v=>Math.min(v.states.length-1,v.cursor+1))},[H]),V=g.useCallback((v,y)=>{l(void 0),n.current=v,p(S=>y.clearHistory?{states:[{shapes:v,selectedShape:void 0,source:y.source}],cursor:0}:{states:[...S.states.slice(0,S.cursor+1),{shapes:v,selectedShape:void 0,source:y.source}],cursor:S.cursor+1})},[]),N=g.useCallback((v,y)=>{const S=n.current,F=S.findIndex($=>$.id===v),D=S.findIndex($=>$.id===y);P(F<D?[...S.slice(0,F),...S.slice(F+1,D+1),S[F],...S.slice(D+1,S.length)]:[...S.slice(0,D),S[F],...S.slice(D,F),...S.slice(F+1,S.length)])},[P]),Q=g.useCallback(v=>{const y=n.current,S=y.findIndex(D=>D.id===v.id);if(S<0)return;const F=ie("visible",v.visible===!1,v);l(D=>D?.id===F.id?F:D),P(ie(S,F,y))},[P]),R=g.useCallback(v=>{const y=n.current,S=y.findIndex(D=>D.id===v.id);if(S<0)return;const F=ie("locked",!v.locked,v);l(D=>D?.id===F.id?F:D),P(ie(S,F,y))},[P]),M=g.useCallback((v,y)=>{Object.hasOwn(s.current,v)&&(s.current[v]=[...s.current[v],y])},[]),A=g.useCallback((v,y)=>{if(Object.hasOwn(s.current,v))if(y){const S=s.current[v].findIndex(F=>F===y);s.current[v]=[...s.current[v].slice(0,S),...s.current[v].slice(S+1)]}else s.current[v]=[]},[]);g.useEffect(()=>{const v=u.states[u.cursor],y=Dt(v.shapes,a,t);for(const S of s.current.dataChanged)S(y,v.source)},[a,t,u]),g.useEffect(()=>{n.current=n.current.map(v=>Je(v,e)),l(v=>v===void 0?void 0:n.current.find(y=>y.id===v.id))},[e]);const Z=g.useCallback((v,y)=>{r(S=>{const F=[S?.[0]??[y[0],y[1]],[y[0],y[1]]],D=n.current.filter($=>((oe,W,z,se)=>{const{selectionPadding:q,canvasOffset:J}=se,{center:he,borders:Ce}=B(W,se),K=Ze(z[0],W.rotation,he,J),G=Ze(z[1],W.rotation,he,J),ve=Math.round(Math.min(K[0],G[0])-q/2),He=Math.round(Math.max(K[0],G[0])+q),we=Math.round(Math.min(K[1],G[1])-q/2),pe={x:ve,y:we,width:He-ve,height:Math.round(Math.max(K[1],G[1])+q)-we},me=Aa(Ce,pe);if(!me)return!1;if(Ce.width<=1\|\|Ce.height<=1\|\|!("path"in W)\|\|!W.path)return!0;if(oe.lineWidth=(W.style?.lineWidth??0)+10,W.type==="brush"){const ae=W.points.flat(),ke=Math.min(...ae.map(re=>re[0])),Ee=Math.min(...ae.map(re=>re[1]));for(const re of W.points){if(re.length<1)break;if(re.length<2){const ge=ue(re[0],ke,Ee,W.scaleX,W.scaleY);if(Ma(me,{x:ge[0],y:ge[1],radius:(W.style?.lineWidth??1)/2}))return!0}for(let ge=0;ge<re.length-1;ge++){const ee=ue(re[ge],ke,Ee,W.scaleX,W.scaleY),Me=ue(re[ge+1],ke,Ee,W.scaleX,W.scaleY),Xe=Aa({x:Math.min(ee[0],Me[0]),y:Math.min(ee[1],Me[1]),width:Math.abs(ee[0]-Me[0]),height:Math.abs(ee[1]-Me[1])},pe);if(Xe){const je=new Path2D;if(je.moveTo(...ee),je.lineTo(...Me),Za({ctx:oe,path:je,rect:Xe,offset:10,checkFill:!1}))return!0}}}return!1}const Te=!(!W.style?.fillColor\|\|W.style?.fillColor==="transparent");return Za({ctx:oe,path:W.path,rect:me,offset:10,checkFill:Te})})(v,$,F,e));return l(D?.[0]),F})},[e]);return{registerEvent:M,unregisterEvent:A,shapesRef:n,selectedShape:o,hoveredShape:h,selectionFrame:i,setSelectionFrame:r,refreshSelectedShapes:Z,addShape:b,addPictureShape:x,moveShapes:N,saveShapes:w,setSelectedShape:l,refreshHoveredShape:L,toggleShapeVisibility:Q,toggleShapeLock:R,removeShape:E,updateShape:j,backwardShape:T,forwardShape:C,clearShapes:V,canGoBackward:f,canGoForward:m,canClear:k}},Ya=(e,a=!1)=>{const t=(s,i)=>{if(Array.isArray(s))return i},n=e.map(s=>{if(typeof s!="object")return null;switch(s.type){case"brush":return fe(t,sa,s);case"circle":return fe(t,ua,s);case"curve":return fe(t,la,s);case"ellipse":return fe(t,ha,s);case"line":return fe(t,oa,s);case"polygon":return fe(t,ra,s);case"rect":return fe(t,da,s);case"square":return fe(t,ca,s);case"text":return fe(t,pa,s)}return null});return Lt(a?[...n,xt]:n)},Dn=(e,a,t,n,s,i,r)=>{let o=!1;if(s){o=qe(s,t,n,!0,i?20:void 0);const h=((c,u,p,f)=>{if(c.mode==="translate")return{mode:"translate",cursorStartPosition:p,originalShape:u};if(c.mode==="rotate"){const{center:m}=B(u,f);return{mode:"rotate",cursorStartPosition:p,originalShape:u,center:[m[0],m[1]]}}return c.mode==="resize"?{mode:"resize",cursorStartPosition:p,originalShape:u,anchor:c.anchor}:void 0})(o\|\|{mode:"default"},s,t,n);if(h?.mode==="resize"\|\|h?.mode==="rotate")return{shape:s,mode:h}}const l=a.find(h=>h.id===s?.id?!!o:!!Ta(e,h,t,n));return l?{shape:l,mode:{mode:"translate",cursorStartPosition:t,originalShape:l}}:{shape:void 0,mode:{mode:r?"selectionFrame":"default"}}},Nn=({disabled:e=!1,addShape:a,drawCanvasRef:t,setActiveTool:n,refreshHoveredShape:s,shapes:i,selectionMode:r,activeTool:o,isInsideComponent:l,setCanvasOffset:h,selectedShape:c,selectionCanvasRef:u,canvasOffsetStartPosition:p,refreshSelectedShapes:f,setSelectedShape:m,setSelectionFrame:k,setCanvasOffsetStartPosition:w,updateSingleShape:b,saveShapes:L,setSelectionMode:x,settings:j,isShiftPressed:P,withFrameSelection:E})=>{const[H,T]=g.useState({mode:"default"}),{registerDoubleClickEvent:C,unRegisterDoubleClickEvent:V}=(()=>{const Q=g.useRef(void 0),R=g.useRef(void 0),M=A=>{const Z=new Date().getTime();Q.current&&Z<Q.current+300&&R.current?.(A),Q.current=new Date().getTime()};return{registerDoubleClickEvent:(A,Z)=>{R.current=Z,A.addEventListener("click",M),A.addEventListener("touchend",M)},unRegisterDoubleClickEvent:A=>{A.removeEventListener("click",M),A.removeEventListener("touchend",M)}}})();g.useEffect(()=>{const Q=R=>((M,A,Z,v,y,S,F,D,$,oe,W,z,se)=>{const q=A.current?.getContext("2d");if(!q)return;const J=At(M,A.current,z);if(Z.type!=="move"\|\|S===void 0)if(y.mode!=="selectionFrame"){if(Ha(M)\|\|D(M,q,J,z),v!==void 0&&!v.locked)if(y.mode==="default"\|\|y.mode==="textedition")F(qe(v,J,z,!0)\|\|{mode:"default"});else{const he=A.current?.getContext("2d");if(!he)return;$(vn(he,v,J,y,z,se))}}else W(q,J,z);else oe([J[0]-S[0],J[1]-S[1]])})(R,u,o,c,r,p,T,s,b,h,f,j,P);if(l)return document.addEventListener("mousemove",Q),document.addEventListener("touchmove",Q),()=>{document.removeEventListener("mousemove",Q),document.removeEventListener("touchmove",Q)}},[l,u,c,r,p,b,o,h,s,f,j,P]);const{isBrushShapeDoneOnMouseUp:N}=j;return g.useEffect(()=>{const Q=()=>{r.mode!=="textedition"&&r.mode!=="default"&&(r.mode==="brush"&&N&&m(void 0),x({mode:"default"}),k(void 0),L())};return l&&(document.addEventListener("mouseup",Q),document.addEventListener("touchend",Q)),()=>{l&&(document.removeEventListener("mouseup",Q),document.removeEventListener("touchend",Q))}},[l,r,N,L,k,x,m]),g.useEffect(()=>{const Q=u.current;if(!Q)return;const R=Q.getContext("2d");if(!R\|\|e)return;const M=A=>{A.preventDefault();const Z=At(A,u.current,j);if(o.type==="selection"){const{shape:v,mode:y}=Dn(R,i,Z,j,c,Ha(A),E);m(v),x(y),y.mode==="selectionFrame"&&k([[Z[0],Z[1]],[Z[0],Z[1]]])}else if(o.type==="move")w(Z);else if(Qa.some(v=>v===o.type)){const v=t.current?.getContext("2d");if(!v)return;if(o.type==="brush"){if(c?.type==="brush"){const y=((S,F,D)=>{const $={...S,points:ie(S.points.length,[[Math.round(F[0]),Math.round(F[1])]],S.points)};return ze($,D)})(c,Z,j);b(y)}else{const y=Ia(v,o,Z,j);if(!y)return;a(y),m(y)}x({mode:"brush"})}else if(o.type!=="picture"){const y=Ia(v,o,Z,j);a(y),n(be),m(y),x({mode:"resize",cursorStartPosition:[Z[0]+j.selectionPadding,Z[1]+j.selectionPadding],originalShape:y,anchor:o.type==="line"\|\|o.type==="polygon"\|\|o.type==="curve"?0:[1,1]})}}};return Q.addEventListener("mousedown",M,{passive:!1}),Q.addEventListener("touchstart",M,{passive:!1}),()=>{Q.removeEventListener("mousedown",M),Q.removeEventListener("touchstart",M)}},[e,u,t,c,o,w,i,b,a,n,m,x,k,j,E]),g.useEffect(()=>{const Q=u.current;if(Q)return l?(C(Q,R=>{if(o.type==="selection"&&c?.type==="text"){const M=At(R,u.current,j);qe(c,M,j)&&x({mode:"textedition",defaultValue:c.value})}}),()=>{V(Q)}):void 0},[C,V,l,u,o,c,x,j]),{hoverMode:H}},In=({disabled:e=!1,scaleRatio:a,shape:t,defaultValue:n,updateValue:s,saveShapes:i,settings:r})=>{const o=g.useRef(null),l=g.useRef(i);g.useEffect(()=>{if(!o.current)return;const c=o.current,u=p=>{p.preventDefault();const f=p.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,f)};c.addEventListener("paste",u),c.innerText="";for(const p of n){const f=document.createElement("div");p===""?f.innerHTML="<br/>":f.innerText=p,c.appendChild(f)}return c.focus(),()=>{c.removeEventListener("paste",u)}},[n]),g.useEffect(()=>{const c=l.current;return()=>{c()}},[]);const h=g.useMemo(()=>{const{borders:c,center:u}=B(t,r);return le({point:[c.x,c.y],rotation:-t.rotation,origin:u})},[t,r]);return d.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=>{const u=Array.from(c.target.childNodes).map(p=>p.childNodes[0].nodeValue??"");s(u)},style:{"--react-paint-editor-toolbox-edittextbox-transform":`translate3D(${h[0]a}px, ${h[1]a}px, 0) rotate(${Tt(t.rotation)}deg)`,"--react-paint-editor-toolbox-edittextbox-fontsize":t.fontSizea+"px","--react-paint-editor-toolbox-edittextbox-padding":r.selectionPaddinga+"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}})},Wn=(e,a,t,n,s)=>{const{canvasSize:{width:i,height:r}}=t;e.clearRect(0,0,i,r),ka(e),t.gridGap&&((o,l,h,c)=>{const{gridGap:u,canvasOffset:p,canvasSize:{scaleRatio:f}}=c;o.strokeStyle="rgb(220,220,220)",o.lineWidth=1,o.save(),o.scale(f,f),o.beginPath();const m=-p[0]%u,k=-p[1]%u,w=Math.ceil(l/f/u),b=Math.ceil(h/f/u);for(let L=0;L<w;L++)o.moveTo(m+(L+1)u,k),o.lineTo(m+(L+1)u,k+h/f);for(let L=0;L<b;L++)o.moveTo(m,k+(L+1)u),o.lineTo(m+l/f,k+(L+1)u);o.stroke(),o.restore()})(e,i,r,t);for(let o=n.length-1;o>=0;o--)a.mode==="textedition"&&n[o]===s\|\|Wa(e,n[o],t)},zn=g.forwardRef(({canGrow:e,disabled:a=!1,canvasSize:t,shapes:n,addShape:s,updateSingleShape:i,selectedShape:r,setSelectedShape:o,setSelectionFrame:l,hoveredShape:h,selectionFrame:c,refreshHoveredShape:u,refreshSelectedShapes:p,saveShapes:f,activeTool:m,setActiveTool:k,canvasOffsetStartPosition:w,setCanvasOffsetStartPosition:b,setCanvasOffset:L,isInsideComponent:x,selectionMode:j,setSelectionMode:P,selectionWidth:E,selectionColor:H,settings:T,isEditMode:C,isShiftPressed:V,withFrameSelection:N,withSkeleton:Q},R)=>{const M=g.useRef(null),A=g.useRef(null);g.useImperativeHandle(R,()=>M.current);const{hoverMode:Z}=Nn({disabled:a,addShape:s,drawCanvasRef:M,setActiveTool:k,shapes:n,selectionMode:j,activeTool:m,isInsideComponent:x,setCanvasOffset:L,selectedShape:r,selectionCanvasRef:A,canvasOffsetStartPosition:w,setSelectedShape:o,setSelectionFrame:l,refreshHoveredShape:u,refreshSelectedShapes:p,setCanvasOffsetStartPosition:b,updateSingleShape:i,saveShapes:f,setSelectionMode:P,isShiftPressed:V,withFrameSelection:N,settings:T}),v=g.useCallback(y=>{if(r?.type!=="text")return;const S=M.current?.getContext("2d");if(!S)return;const F=Je(Vn(S,r,y,T),T);i(F)},[i,r,T]);return g.useEffect(()=>{const y=M.current?.getContext("2d");y&&window.requestAnimationFrame(()=>Wn(y,j,T,n,r))},[n,j,r,T]),g.useEffect(()=>{const y=A.current?.getContext("2d");y&&window.requestAnimationFrame(()=>((S,F,D,$,oe,W,z,se,q,J)=>{S.clearRect(0,0,D.canvasSize.width,D.canvasSize.height),J&&se&&se.id!==z?.id&&$.type==="selection"&&F.mode==="default"&&za({ctx:S,shape:se,settings:D,selectionWidth:oe,selectionColor:W,withAnchors:!1}),z&&$.type!=="brush"&&za({ctx:S,shape:z,settings:D,selectionWidth:oe,selectionColor:W,withAnchors:F.mode!=="textedition"}),q&&An({ctx:S,selectionFrame:q,settings:D})})(y,j,T,m,E,H,r,h,c,Q))},[h,c,j,r,m,T,E,H,Q]),d.jsx("div",{className:"react-paint-canvas-box",children:d.jsxs("div",{className:"react-paint-canvas-container","data-grow":e,children:[d.jsx("canvas",{className:Sa,ref:M,"data-grow":e,width:t.width,height:t.height}),C&&d.jsx("canvas",{className:ba,ref:A,width:t.width,height:t.height,"data-grow":e,style:{"--react-paint-canvas-cursor":m.type!=="selection"&&m.type!=="move"\|\|Z.mode==="resize"?"crosshair":m.type==="move"\|\|Z.mode==="translate"?"move":Z.mode==="rotate"?"grab":"default"}}),C&&j.mode==="textedition"&&r?.type==="text"&&d.jsx(In,{scaleRatio:t.scaleRatio,disabled:a,shape:r,defaultValue:j.defaultValue,updateValue:v,saveShapes:f,settings:T})]})})}),_a="ArrowUp",qa="ArrowDown",Ja="ArrowLeft",Ka="ArrowRight",On="Delete",$n="Backspace",Un="Escape",en="Shift",Bn="z",Gn="Z",Xn="y",Yn="Y",tn="copy",an="paste",_n=({isInsideComponent:e,selectedShape:a,isEditingText:t,settings:n,setSelectedShape:s,removeShape:i,pasteShape:r,updateShape:o,backwardShape:l,forwardShape:h,setShiftPressed:c})=>{const[u,p]=g.useState(void 0);return g.useEffect(()=>{const f=b=>{a&&(t\|\|(b.preventDefault(),p({...a})))},m=b=>{u&&(t\|\|(b.preventDefault(),r(((L,x)=>({...Rt([20,20],L,[0,0],x),id:te(`${L.type}_`)}))(u,n))))},k=b=>{b.key===en&&c(!1)},w=b=>{if(b.metaKey\|\|b.ctrlKey){if(b.key===Gn\|\|b.key===Bn)return b.preventDefault(),b.stopPropagation(),void l();if(b.key===Yn\|\|b.key===Xn)return b.preventDefault(),b.stopPropagation(),void h()}if(b.key===en)return void c(!0);if(!a)return;if(b.key===Un)return void s(void 0);if(t)return;const L={[Ja]:[n.gridGap?-n.gridGap:-1,0],[Ka]:[n.gridGap?n.gridGap:1,0],[qa]:[0,n.gridGap?n.gridGap:1],[_a]:[0,n.gridGap?-n.gridGap:-1]};switch(b.key){case Ja:case Ka:case qa:case _a:b.preventDefault(),b.stopPropagation(),o(Rt(L[b.key],a,[0,0],n));break;case On:case $n:b.preventDefault(),b.stopPropagation(),i(a)}};if(e)return document.addEventListener("keydown",w),document.addEventListener("keyup",k),document.addEventListener(tn,f),document.addEventListener(an,m),()=>{document.removeEventListener("keydown",w),document.removeEventListener("keyup",k),document.removeEventListener(tn,f),document.removeEventListener(an,m)}},[e,u,t,a,n,o,i,s,r,l,h,c]),{}},qn=({isLoading:e=!1})=>{const[a,t]=g.useState("hidden");return g.useEffect(()=>{if(!e){t("fadeOut");const n=setTimeout(()=>t("hidden"),300);return()=>{clearTimeout(n)}}t("visible")},[e]),a==="hidden"?null:d.jsx("div",{className:"react-paint-editor-loading","data-loading":a,style:{"--react-paint-editor-loading-zindex":cn,"--react-paint-editor-loading-transition-duration":"300ms"},children:d.jsxs("div",{className:"react-paint-editor-loader",children:[d.jsx("div",{}),d.jsx("div",{}),d.jsx("div",{}),d.jsx("div",{})]})})},Jn="infos",Kn=4e3,ei=({type:e,text:a,duration:t})=>{const[n,s]=g.useState(!1);return g.useEffect(()=>{const i=setTimeout(()=>{s(!0)},100),r=setTimeout(()=>{s(!1)},t-500-100);return()=>{clearTimeout(i),clearTimeout(r)}},[t]),d.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+n,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:a})},ti=({snackbarList:e})=>d.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":un},children:e.map(a=>d.jsx(ei,{...a},a.id))}),O=g.forwardRef((e,a)=>{if(e.type==="file"\|\|e.type==="color"){const{hidden:c=!1,disabled:u=!1,selected:p=!1,icon:f,children:m,className:k="",title:w,onClick:b,...L}=e;return d.jsxs("label",{className:`react-paint-editor-button ${k}`,title:w,onClick:b,"data-disabled":+u,"data-selected":+p,"data-hidden":+c,children:[d.jsx("input",{ref:a,disabled:u,...L}),d.jsxs("span",{className:"react-paint-editor-button-content",children:[m&&d.jsx("span",{className:"react-paint-editor-button-children",children:m}),f&&d.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:f}})]})]})}const{hidden:t=!1,disabled:n=!1,selected:s=!1,icon:i,children:r,type:o="button",className:l="",...h}=e;return d.jsx("button",{className:`react-paint-editor-button ${l}`,ref:a,disabled:n,"data-disabled":+n,"data-selected":+s,"data-hidden":+t,type:o,...h,children:d.jsxs("span",{className:"react-paint-editor-button-content",children:[r&&d.jsx("span",{className:"react-paint-editor-button-children",children:r}),i&&d.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:i}})]})})}),Ge=({children:e,title:a="",className:t="",position:n="bottom",fitContainer:s=!1,alignment:i="center"})=>d.jsxs("div",{className:`react-paint-editor-panel ${t}`,"data-fitcontainer":s,"data-position":n,"data-alignment":i,style:{"--react-paint-editor-panel-zindex":ia},children:[a&&d.jsx("h3",{className:"react-paint-editor-panel-title",children:a}),e]}),ai=e=>{switch(e){case"brush":return Bt;case"line":return _t;case"polygon":return St;case"curve":return qt;case"rect":case"square":return yt;case"circle":case"ellipse":return Qt;case"text":return Yt;case"picture":return bt;case"triangle":return""}},ni=({disabled:e=!1,shape:a,selected:t,layoutDragging:n,toggleShapeVisibility:s,toggleShapeLock:i,setLayoutDragging:r,handleRemove:o,handleSelect:l,onMoveShapes:h})=>{const c=g.useRef(null),{isOver:u}=(({disabled:p=!1,ref:f,shape:m,layoutDragging:k,setLayoutDragging:w,handleSelect:b,onMoveShapes:L})=>{const[x,j]=g.useState(!1);return g.useEffect(()=>{k\|\|j(!1)},[k]),g.useEffect(()=>{const P=f.current;if(!P)return;const E=()=>{w(void 0)},H=Q=>(Q.preventDefault&&Q.preventDefault(),!1),T=Q=>{b(m),Q.dataTransfer&&(Q.dataTransfer.effectAllowed="move",Q.dataTransfer.setData("draggableShapeId",m.id),w(m.id))},C=()=>{k!==m.id&&j(!0)},V=()=>{j(!1)},N=Q=>(Q.stopPropagation(),Q.dataTransfer&&L(Q.dataTransfer.getData("draggableShapeId"),m.id),!1);return p\|\|(P.addEventListener("dragstart",T),P.addEventListener("dragend",E),P.addEventListener("dragover",H),P.addEventListener("dragenter",C),P.addEventListener("dragleave",V),P.addEventListener("drop",N)),()=>{p\|\|(P.removeEventListener("dragstart",T),P.removeEventListener("dragend",E),P.removeEventListener("dragover",H),P.removeEventListener("dragenter",C),P.removeEventListener("dragleave",V),P.removeEventListener("drop",N))}},[p,f,m,w,b,L,k]),{isOver:x}})({disabled:e,ref:c,shape:a,layoutDragging:n,setLayoutDragging:r,handleSelect:l,onMoveShapes:h});return d.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(n===a.id),"data-is-over":+u,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),l(a))},"data-selected":+t,ref:c,children:[d.jsx("span",{dangerouslySetInnerHTML:{__html:ai(a.type)}}),d.jsx("span",{children:a.id}),d.jsx("div",{className:"react-paint-editor-layouts-separator"}),d.jsx(O,{className:"react-paint-editor-layouts-visible-button",title:a.visible?"Hide":"Show","data-visible":a.visible!==!1,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),s(a))},icon:a.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>'}),d.jsx(O,{className:"react-paint-editor-layouts-locked-button",title:a.locked?"Locked":"Unlocked","data-locked":!!a.locked,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),i(a))},icon:a.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>'}),d.jsx(O,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),o(a))},icon:Gt})]})},ii=({gridFormat:e,setGridFormat:a,disabled:t=!1,shapes:n,removeShape:s,toggleShapeVisibility:i,toggleShapeLock:r,selectedShape:o,moveShapes:l,selectShape:h,isLayoutPanelShown:c})=>{const[u,p]=g.useState(void 0);return c?d.jsx(Ge,{alignment:"right",className:"react-paint-editor-layouts-panel",children:d.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:d.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[d.jsxs("div",{className:"react-paint-editor-layouts-row",children:[d.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),d.jsx(O,{icon:'<svg><path d="M18.333 15.854 16.583 14.104V13.354H15.833L14.083 11.604H16.583V8.375H13.375V10.896L11.625 9.146V8.375H10.875L9.125 6.625H11.625V3.417H8.396V5.896L6.646 4.146V3.417H5.896L4.146 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417ZM13.375 6.625H16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H13.375ZM16.771 19.229 15.854 18.333H3.417Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V4.125L0.812 3.271L2.042 2.021L18 18ZM13.375 16.583H14.104L13.375 15.833ZM8.396 11.604H9.125L8.396 10.854ZM8.396 16.583H11.625V14.083L10.875 13.354H8.396ZM3.417 6.625H4.167L3.417 5.875ZM3.417 11.604H6.646V9.104L5.917 8.375H3.417ZM6.646 16.583V13.354H3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Z"/></svg>',className:"react-paint-editor-layouts-grid-button",selected:e==="none",disabled:t,onClick:()=>a("none")}),["small","medium","large"].map(f=>d.jsx(O,{className:"react-paint-editor-layouts-grid-button",selected:e===f,disabled:t,onClick:()=>a(f),children:f.charAt(0).toUpperCase()},f))]}),d.jsx("hr",{}),d.jsx("div",{className:"react-paint-editor-layouts",children:n.length===0?d.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):n.map(f=>d.jsx(ni,{shape:f,disabled:t,layoutDragging:u,setLayoutDragging:p,selected:o?.id===f.id,handleSelect:h,handleRemove:s,onMoveShapes:l,toggleShapeVisibility:i,toggleShapeLock:r},f.id))})]})})}):null},Nt=({children:e,onClose:a,position:t="center",className:n=""})=>d.jsxs("div",{className:"react-paint-editor-modal","data-position":t,style:{"--react-paint-editor-modal-zindex":ia},children:[d.jsx("div",{className:"react-paint-editor-modal-mask",onClick:a}),d.jsx("div",{className:`react-paint-editor-modal-panel ${n}`,children:e})]}),gt=({selectedSettings:e,setSelectedSettings:a,title:t="Choisissez une couleur",mode:n="fill",disabled:s=!1,values:i,field:r,value:o="",valueChanged:l})=>{const[h]=g.useState(te("settings_")),c=e===h;return i.length?d.jsxs(d.Fragment,{children:[d.jsx(O,{selected:c,title:t,disabled:s,onClick:()=>{a(u=>u===h?void 0:h)},icon:o==="transparent"?n==="fill"?aa:ta:void 0,children:o!=="transparent"&&d.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":n,style:{"--react-paint-editor-colorfield-color-value":o}})}),c&&d.jsx(Ge,{title:t,alignment:"left",children:d.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[i.map((u,p)=>d.jsx(O,{title:u,selected:u===o,color:u,icon:u==="transparent"?n==="fill"?aa:ta:void 0,onClick:()=>{l(r,u)},children:u!=="transparent"&&d.jsx("div",{className:"react-paint-editor-colorfield-color",color:u,"data-mode":n,style:{"--react-paint-editor-colorfield-color-value":u}})},u)),d.jsx(O,{type:"color",title:"Custom color",selected:!i.includes(o),value:o,onChange:u=>{const p=+u.target.value;l(r,Number.isNaN(p)?u.target.value:p)},children:d.jsx("div",{className:"react-paint-editor-colorfield-customcolor",style:{"--react-paint-editor-colorfield-color-value":i.includes(o)?"var(--react-paint-editor-app-font-color)":o},children:d.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},si=({disabled:e=!1,selectedShape:a,removeShape:t})=>d.jsx(O,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{t(a)},icon:Gt}),It=({CustomOption:e,selectedSettings:a,setSelectedSettings:t,title:n="Choisissez l'option",disabled:s=!1,field:i,icon:r,values:o,defaultValue:l,valueChanged:h})=>{const[c]=g.useState(te("settings_")),u=a===c;return o.length?d.jsxs(d.Fragment,{children:[d.jsx(O,{selected:u,title:n,icon:r,disabled:s,onClick:()=>{t(p=>p===c?void 0:c)}}),u&&d.jsx(Ge,{title:n,alignment:"left",fitContainer:!0,children:d.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:o.map(p=>d.jsx(O,{title:`${p}`,onClick:()=>(f=>{h(i,f)})(p),selected:l===p,style:{"--react-paint-editor-button-padding":"16px"},children:d.jsx(e,{children:p})},p))})})]}):null},oi=({children:e})=>d.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),nn=({selectedSettings:e,setSelectedSettings:a,disabled:t=!1,values:n,defaultValue:s,valueChanged:i})=>n.length?d.jsx(It,{selectedSettings:e,setSelectedSettings:a,CustomOption:oi,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:i}):null,ri=({disabled:e,toggleLayoutPanel:a})=>d.jsx(O,{title:"Toggle layers panel",disabled:e,onClick:a,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"}),li=({children:e})=>d.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[d.jsx("span",{className:"react-paint-editor-linearrow-left"}),d.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),sn=({selectedSettings:e,setSelectedSettings:a,disabled:t=!1,values:n,defaultValue:s,valueChanged:i})=>n.length?d.jsx(It,{selectedSettings:e,setSelectedSettings:a,CustomOption:li,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:i}):null,di=({children:e})=>d.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{})]}),on=({selectedSettings:e,setSelectedSettings:a,disabled:t=!1,values:n,defaultValue:s,valueChanged:i})=>n.length?d.jsx(It,{selectedSettings:e,setSelectedSettings:a,CustomOption:di,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:i}):null,Ke=({selectedSettings:e,setSelectedSettings:a,title:t="Choisissez l'intervalle",icon:n,disabled:s=!1,field:i,value:r=1,min:o=1,max:l=20,step:h=1,unity:c="",valueChanged:u})=>{const p=Math.round(r),[f]=g.useState(te("settings_")),m=g.useRef(null);g.useEffect(()=>()=>{m.current&&clearTimeout(m.current)},[]);const k=e===f;return o===l?null:d.jsxs(d.Fragment,{children:[d.jsx(O,{selected:k,title:t,disabled:s,icon:n,onClick:()=>{a(w=>w===f?void 0:f)}}),k&&d.jsx(Ge,{title:t,alignment:"left",fitContainer:!0,children:d.jsx("div",{children:d.jsxs("label",{className:"react-paint-editor-rangefield",children:[d.jsx("input",{type:"range",min:o,max:l,step:h,value:r,onChange:w=>{const b=+w.target.value;u(i,Number.isNaN(b)?w.target.value:b,!1),m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{u(i,Number.isNaN(b)?w.target.value:b,!0)},1e3)}}),d.jsxs("span",{children:[p,c]})]})})})]})},rn=({selectedSettings:e,setSelectedSettings:a,disabled:t=!1,min:n,max:s,step:i,value:r,valueChanged:o})=>n===s?null:d.jsx(Ke,{selectedSettings:e,setSelectedSettings:a,icon:St,title:"Nombre de points",disabled:t,field:"pointsCount",min:n,max:s,step:i,unity:"",value:r,valueChanged:o}),ft=({setSelectedSettings:e,disabled:a=!1,field:t,icon:n,values:s,value:i=!1,valueChanged:r})=>{const[o]=g.useState(te("settings_"));return s.length!==2?null:d.jsx(O,{onClick:()=>{e(l=>l===o?void 0:o),r(t,!i)},selected:i,disabled:a,icon:n})},Wt=({activeTool:e,selectedShape:a,selectedShapeTool:t,disabled:n,selectedSettings:s,setSelectedSettings:i,handleShapeStyleChange:r,handlePolygonLinesCount:o,handleShapeFontFamilyChange:l})=>a?d.jsx(d.Fragment,{children:t&&d.jsxs(d.Fragment,{children:["strokeColor"in t.settings&&!t.settings.strokeColor.hidden&&d.jsx(gt,{selectedSettings:s,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:a.style?.strokeColor,valueChanged:r,values:t.settings.strokeColor.values}),"fillColor"in t.settings&&!t.settings.fillColor.hidden&&d.jsx(gt,{selectedSettings:s,setSelectedSettings:i,title:"Couleur de fond",disabled:n,field:"fillColor",value:a.style?.fillColor,valueChanged:r,values:t.settings.fillColor.values}),"lineWidth"in t.settings&&!t.settings.lineWidth.hidden&&d.jsx(Ke,{selectedSettings:s,setSelectedSettings:i,title:"Epaisseur du trait",icon:ea,disabled:n,field:"lineWidth",value:a.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&&!t.settings.lineDash.hidden&&d.jsx(on,{selectedSettings:s,setSelectedSettings:i,disabled:n,defaultValue:a.style?.lineDash,valueChanged:r,values:t.settings.lineDash.values}),"lineArrow"in t.settings&&!t.settings.lineArrow.hidden&&d.jsx(sn,{selectedSettings:s,setSelectedSettings:i,disabled:n,defaultValue:a.style?.lineArrow,valueChanged:r,values:t.settings.lineArrow.values}),"pointsCount"in t.settings&&!t.settings.pointsCount.hidden&&d.jsx(rn,{selectedSettings:s,setSelectedSettings:i,disabled:n,valueChanged:o,min:t.settings.pointsCount.min,max:t.settings.pointsCount.max,step:t.settings.pointsCount.step,value:a.style?.pointsCount}),"fontFamily"in t.settings&&!t.settings.fontFamily.hidden&&d.jsx(nn,{selectedSettings:s,setSelectedSettings:i,disabled:n,valueChanged:l,values:t.settings.fontFamily.values,defaultValue:a.style?.fontFamily}),"fontBold"in t.settings&&!t.settings.fontBold.hidden&&d.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontBold",icon:Jt,valueChanged:l,values:t.settings.fontBold.values,value:a.style?.fontBold}),"fontItalic"in t.settings&&!t.settings.fontItalic.hidden&&d.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontItalic",icon:Kt,valueChanged:l,values:t.settings.fontItalic.values,value:a.style?.fontItalic}),"opacity"in t.settings&&!t.settings.opacity.hidden&&d.jsx(Ke,{selectedSettings:s,setSelectedSettings:i,title:"Opacité",icon:Xt,min:t.settings.opacity.min,max:t.settings.opacity.max,step:t.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:a.style?.opacity??100,valueChanged:r})]})}):"settings"in e?d.jsxs(d.Fragment,{children:["strokeColor"in e.settings&&!e.settings.strokeColor.hidden&&d.jsx(gt,{selectedSettings:s,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:r,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&!e.settings.fillColor.hidden&&d.jsx(gt,{selectedSettings:s,setSelectedSettings:i,title:"Couleur de fond",disabled:n,field:"fillColor",value:e.settings.fillColor.default,valueChanged:r,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&!e.settings.lineWidth.hidden&&d.jsx(Ke,{selectedSettings:s,setSelectedSettings:i,title:"Epaisseur du trait",disabled:n,field:"lineWidth",icon:ea,value:e.settings.lineWidth.default,valueChanged:r,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&!e.settings.lineDash.hidden&&d.jsx(on,{selectedSettings:s,setSelectedSettings:i,disabled:n,defaultValue:e.settings.lineDash.default,valueChanged:r,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&!e.settings.lineArrow.hidden&&d.jsx(sn,{selectedSettings:s,setSelectedSettings:i,disabled:n,defaultValue:e.settings.lineArrow.default,valueChanged:r,values:e.settings.lineArrow.values}),"pointsCount"in e.settings&&!e.settings.pointsCount.hidden&&d.jsx(rn,{selectedSettings:s,setSelectedSettings:i,disabled:n,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&&!e.settings.fontFamily.hidden&&d.jsx(nn,{selectedSettings:s,setSelectedSettings:i,disabled:n,valueChanged:l,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&!e.settings.fontBold.hidden&&d.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontBold",icon:Jt,valueChanged:l,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&!e.settings.fontItalic.hidden&&d.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontItalic",icon:Kt,valueChanged:l,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&!e.settings.opacity.hidden&&d.jsx(Ke,{selectedSettings:s,setSelectedSettings:i,title:"Opacité",icon:Xt,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:e.settings.opacity.default,valueChanged:r})]}):null,ci=({width:e,disabled:a=!1,availableTools:t,updateToolSettings:n,layersManipulation:s,toggleLayoutPanel:i,activeTool:r,selectedShape:o,canvas:l,settings:h,updateShape:c,removeShape:u})=>{const[p,f]=g.useState(void 0),[m,k]=g.useState(!1),w=()=>{k(H=>!H)},b=o?t.find(H=>H.id===o.toolId)\|\|t.find(H=>H.type===o.type):void 0,L=(b?Object.keys(b.settings).length+1:"settings"in r?Object.keys(r.settings).length:0)+(s?1:0),x=e<40L,j=(H,T,C=!0)=>{o?(c(Je(ie(["style",H],T,o),h),C),b&&n(b.id,H,T)):n(r.id,H,T)},P=(H,T)=>{if(o){if(o.type!=="text")return;const C=l?.getContext("2d");if(!C)return;const V=ie(["style",H],T,o),N=Ft(C,V.value,V.width,V.style?.fontBold??!1,V.style?.fontItalic??!1,V.style?.fontFamily),Q=Je({...V,fontSize:N,height:NV.value.length},h);c(Q,!0),b&&n(b.id,H,T)}else n(r.id,H,T)},E=(H,T)=>{if(o){if(o.type!=="polygon"&&o.type!=="curve")return;c(o.type==="polygon"?((C,V,N)=>{const Q=C.points.length;if(Q===V)return C;if(Q>V){const Z=C.points.slice(0,V);return Ue({...C,points:Z,style:{...C.style,pointsCount:Z.length}},N)}const R=V-Q,M=new Array(R).fill(void 0).map((Z,v)=>[C.points[0][0]+(C.points[1][0]-C.points[0][0])(v+1)/(R+1),C.points[0][1]+(C.points[1][1]-C.points[0][1])(v+1)/(R+1)]),A=[C.points[0],...M,...C.points.slice(1,C.points.length)];return Ue({...C,points:A,style:{...C.style,pointsCount:A.length}},N)})(o,T,h):((C,V,N)=>{const Q=C.points.length;if(Q===V)return C;if(Q>V){const Z=C.points.slice(0,V);return Be({...C,points:Z,style:{...C.style,pointsCount:Z.length}},N)}const R=V-Q,M=new Array(R).fill(void 0).map((Z,v)=>[C.points[0][0]+(C.points[1][0]-C.points[0][0])(v+1)/(R+1),C.points[0][1]+(C.points[1][1]-C.points[0][1])(v+1)/(R+1)]),A=[C.points[0],...M,...C.points.slice(1,C.points.length)];return Be({...C,points:A,style:{...C.style,pointsCount:A.length}},N)})(o,T,h),!0),b&&n(b.id,H,T)}else n(r.id,H,T)};return d.jsxs(d.Fragment,{children:[d.jsxs("div",{className:"react-paint-editor-settings-bar",children:[d.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[x&&L>2&&d.jsx(O,{disabled:a,onClick:w,title:"Toggle settings",icon:'<svg><path d="M2.5 15.833V14.083H7.667V15.833ZM2.5 5.917V4.167H10.771V5.917ZM9.208 17.5V12.438H10.958V14.083H17.5V15.833H10.958V17.5ZM5.917 12.542V10.875H2.5V9.125H5.917V7.479H7.667V12.542ZM9.208 10.875V9.125H17.5V10.875ZM12.333 7.562V2.5H14.083V4.167H17.5V5.917H14.083V7.562Z"/></svg>'}),o?d.jsx(d.Fragment,{children:b&&d.jsxs(d.Fragment,{children:[!x&&d.jsx(Wt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:a,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P}),r.type==="selection"&&d.jsx(si,{disabled:a,selectedShape:o,removeShape:u})]})}):!x&&d.jsx(Wt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:a,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P})]}),d.jsx("div",{className:"react-paint-editor-settings-separator"}),s&&d.jsx(ri,{disabled:a,toggleLayoutPanel:i})]}),m&&d.jsx(Nt,{className:"react-paint-editor-settings-modal",onClose:w,position:"bottom",children:d.jsx(Wt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:a,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P})})]})},ln=({disabled:e=!1,withText:a=!1,loadFile:t,type:n,img:s,accept:i})=>{const r=g.useRef(null);return d.jsx(O,{ref:r,type:"file",onClick:o=>{o.stopPropagation(),r.current&&(r.current.value="")},onChange:o=>{const l=o.target.files?.item(0);l&&t(l)},accept:i,title:n.label??n.type,icon:s,disabled:e,children:a?n.label:void 0})},de=({type:e,img:a,isActive:t,withText:n=!1,disabled:s=!1,setActive:i})=>d.jsx(O,{disabled:s,selected:t,onClick:()=>{i(e)},title:e.label??e.type,icon:a,children:n?e.label:void 0}),ui=({activeTool:e,withActionsInMenu:a,hasActionToUndo:t=!1,hasActionToRedo:n=!1,hasActionToClear:s=!1,undoAction:i,redoAction:r,clearCanvas:o,alignment:l,group:h,vertical:c=!1,disabled:u=!1,withLoadAndSave:p,withExport:f,addPicture:m,loadFile:k,togglePictureUrlModal:w,saveFile:b,exportCanvasInFile:L,withUploadPicture:x,withUrlPicture:j})=>{const[P,E]=g.useState(!1),[,H]=g.useTransition(),T=h?.tools?.some(V=>V===e.type),C=(T?e.icon:h.img)??h.title;return g.useEffect(()=>{if(!P)return;const V=()=>{E(!1)};return document.addEventListener("click",V),()=>{document.removeEventListener("click",V)}},[P]),a\|\|x\|\|j\|\|p\|\|f?d.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[d.jsx(O,{selected:T,title:h.title,disabled:u,onClick:()=>{H(()=>{E(!0)})},icon:C}),P&&d.jsx(Ge,{alignment:l,position:"top",children:d.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+c,children:[a&&d.jsxs(d.Fragment,{children:[d.jsx(de,{withText:!0,type:Ne,disabled:u\|\|!t,img:Ne.icon,isActive:e.id===Ne.id,setActive:i}),d.jsx(de,{withText:!0,type:Ie,disabled:u\|\|!n,img:Ie.icon,isActive:e.id===Ie.id,setActive:r}),d.jsx(de,{withText:!0,type:We,disabled:u\|\|!s,img:We.icon,isActive:e.id===We.id,setActive:o}),(x\|\|j\|\|p)&&d.jsx("hr",{})]}),x&&d.jsx(ln,{withText:!0,type:fa,disabled:u,loadFile:async V=>{E(!1),await m(V)},img:fa.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml"}),j&&d.jsx(O,{disabled:u,selected:!1,onClick:w,title:"Add picture from URL",icon:'<svg><path d="M9.188 16.542V14.938Q8.5 14.938 8.021 14.458Q7.542 13.979 7.542 13.292V12.458L3.583 8.5Q3.5 8.875 3.458 9.25Q3.417 9.625 3.417 10Q3.417 12.5 5.062 14.365Q6.708 16.229 9.188 16.542ZM14.854 14.438Q15.708 13.521 16.146 12.385Q16.583 11.25 16.583 10Q16.583 7.979 15.469 6.313Q14.354 4.646 12.479 3.917V4.229Q12.479 4.917 12 5.396Q11.521 5.875 10.833 5.875H9.188V7.521Q9.188 7.875 8.948 8.115Q8.708 8.354 8.354 8.354H6.708V10H11.646Q12 10 12.24 10.229Q12.479 10.458 12.479 10.812V13.292H13.292Q13.833 13.292 14.26 13.604Q14.688 13.917 14.854 14.438ZM10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333Z"/></svg>',children:"Add picture from URL"}),(x\|\|j)&&p&&d.jsx("hr",{}),p&&d.jsxs(d.Fragment,{children:[d.jsx(ln,{withText:!0,type:ga,disabled:u,loadFile:V=>{E(!1),k(V)},img:ga.icon,accept:"application/JSON"}),d.jsx(de,{withText:!0,disabled:u,type:wt,img:wt.icon,isActive:e.id===wt.id,setActive:b})]}),f&&d.jsx(de,{withText:!0,disabled:u,type:Ct,img:Ct.icon,isActive:e.id===Ct.id,setActive:L})]})})]}):null},hi=({togglePictureUrlModal:e,addPicture:a})=>{const t=g.useRef(null);return g.useEffect(()=>{t.current&&t.current.focus()},[]),d.jsx(Nt,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,children:d.jsxs("form",{onSubmit:async n=>{n.preventDefault();const s=t.current?.value;s&&(await a(s),e())},children:[d.jsxs("label",{children:["URL ",d.jsx("input",{type:"text",ref:t})]}),d.jsx(O,{onClick:e,children:"Annuler"}),d.jsx(O,{type:"submit",selected:!0,children:"Ajouter"})]})})},pi=({activeTool:e,alignment:a,group:t,disabled:n=!1,setActiveToolFromId:s})=>{const i=g.useRef(null),[r,o]=g.useState(!1),[,l]=g.useTransition(),[h,c]=g.useState(void 0),u=m=>{c(m),s(m.id)};if(g.useEffect(()=>{if(!r)return;const m=k=>{!Ca(k,i.current)&&o(!1)};return document.addEventListener("mousedown",m,{passive:!1}),document.addEventListener("touchstart",m,{passive:!1}),()=>{document.removeEventListener("mousedown",m),document.removeEventListener("touchstart",m)}},[r]),"type"in t)return d.jsx(de,{disabled:n,type:t,img:t.icon,isActive:e.id===t.id,setActive:u});if(!t.toolsType.length)return null;if(t.toolsType?.length===1)return d.jsx(de,{disabled:n,type:t.toolsType[0],img:t.toolsType[0].icon,isActive:e.id===t.toolsType[0].id,setActive:u});const p=t?.toolsType.find(m=>m.type===e.type)!==void 0,f=(h?h.icon:t.toolsType?.[0]?.icon)??t.title;return d.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[d.jsx(O,{selected:p,title:t.title,disabled:n,onClick:()=>{h?s(h.id):t.toolsType?.[0]&&u(t.toolsType[0]),l(()=>{o(!0)})},icon:f}),r&&d.jsx(Ge,{alignment:a,position:"top",children:d.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+t.vertical,ref:i,children:t.toolsType.map((m,k)=>d.jsx(de,{disabled:n,type:m,img:m.icon,isActive:e.id===m.id,setActive:u},m.id))})})]})},gi=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],fi=({width:e,disabled:a=!1,activeTool:t,hasActionToUndo:n=!1,hasActionToRedo:s=!1,hasActionToClear:i=!1,withLoadAndSave:r,withExport:o,clearCanvas:l,setActiveTool:h,undoAction:c,redoAction:u,addPicture:p,loadFile:f,saveFile:m,exportCanvasInFile:k,availableTools:w,withUrlPicture:b,withUploadPicture:L})=>{const x=((M,A)=>{const Z=A.flatMap(v=>{if(typeof v!="object")return M.filter(S=>S.type===v);const y=M.filter(S=>v.toolsType.includes(S.type));return y?{...v,toolsType:y}:null});return Lt(Z)})(w,gi),j=e<40(5+x.length),P=e<40(2+x.length),[E,H]=g.useState(!1),[T,C]=g.useState(!1),V=()=>{H(M=>!M)},N=M=>{h(M),H(!1)},Q=M=>{N(w.find(A=>A.id===M)??t)},R=w.find(M=>M.type===t.type)!==void 0;return d.jsxs(d.Fragment,{children:[d.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",children:[d.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[d.jsx(de,{type:be,disabled:a,img:be.icon,isActive:t.id===be.id,setActive:N}),P?d.jsx(O,{disabled:a,onClick:V,title:"Toggle tools",icon:'<svg><path d="M5.333 9.292 10.021 1.646 14.708 9.292ZM14.562 18.333Q13 18.333 11.896 17.229Q10.792 16.125 10.792 14.562Q10.792 13 11.896 11.896Q13 10.792 14.562 10.792Q16.125 10.792 17.229 11.896Q18.333 13 18.333 14.562Q18.333 16.125 17.229 17.229Q16.125 18.333 14.562 18.333ZM2.5 17.917V11.188H9.229V17.917ZM14.562 16.583Q15.438 16.583 16.01 16.01Q16.583 15.438 16.583 14.562Q16.583 13.688 16.01 13.115Q15.438 12.542 14.562 12.542Q13.688 12.542 13.115 13.115Q12.542 13.688 12.542 14.562Q12.542 15.438 13.115 16.01Q13.688 16.583 14.562 16.583ZM4.25 16.167H7.479V12.938H4.25ZM8.458 7.542H11.583L10.021 5ZM10.021 7.542ZM7.479 12.938ZM14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Z"/></svg>',selected:R}):x.map((M,A)=>d.jsx(pi,{disabled:a,activeTool:t,group:M,setActiveToolFromId:Q},"id"in M?M.id:M.title))]}),!j&&d.jsxs(d.Fragment,{children:[d.jsx(de,{type:Ne,disabled:a\|\|!n,img:Ne.icon,isActive:t.id===Ne.id,setActive:c}),d.jsx(de,{type:Ie,disabled:a\|\|!s,img:Ie.icon,isActive:t.id===Ie.id,setActive:u}),d.jsx(de,{type:We,disabled:a\|\|!i,img:We.icon,isActive:t.id===We.id,setActive:l})]}),d.jsx(ui,{withActionsInMenu:j,disabled:a,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:m,togglePictureUrlModal:()=>{C(!0)},exportCanvasInFile:k,withUploadPicture:L,withUrlPicture:b,withLoadAndSave:r,withExport:o,hasActionToUndo:n,hasActionToRedo:s,hasActionToClear:i,undoAction:c,redoAction:u,clearCanvas:l})]}),E&&d.jsx(Nt,{className:"react-paint-editor-toolbar-modal",onClose:V,children:w.map((M,A)=>M.type==="picture"?null:d.jsx(de,{disabled:a,type:M,img:M.icon,withText:!1,isActive:t.id===M.id,setActive:N},M.id))}),T&&d.jsx(hi,{togglePictureUrlModal:()=>{C(M=>!M)},addPicture:p})]})},vt={none:0,small:10,medium:20,large:40},vi={toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8"},mi=()=>{const e=g.useRef([]),[a,t]=g.useState([]);return g.useEffect(()=>()=>{for(const n of e.current)clearTimeout(n)},[]),{snackbarList:a,addSnackbar:({type:n=Jn,duration:s=Kn,text:i})=>{const r={id:te("snackbar_"),duration:s,type:n,text:i};t(o=>[...o,r]),e.current=[...e.current,setTimeout(()=>{return o=r.id,void t(l=>l.filter(h=>h.id!==o));var o},s)]}}};Se.Canvas=({options:e,className:a,style:t,canvasProps:n})=>{const{shapesRef:s,selectedShape:i,selectionFrame:r,hoveredShape:o,addShape:l,setSelectedShape:h,setSelectionFrame:c,refreshSelectedShapes:u,refreshHoveredShape:p,removeShape:f,updateShape:m,backwardShape:k,forwardShape:w,saveShapes:b,refs:L,width:x,height:j,settings:P,canvasSize:E,setCanvasSize:H,setCanvasOffset:T,selectShape:C,activeTool:V,setActiveTool:N,isInsideComponent:Q,isEditMode:R,isDisabled:M,canvas:{withSkeleton:A,withFrameSelection:Z,canGrow:v,canShrink:y}}=n,{canvasBackgroundColor:S,canvasSelectionColor:F,canvasSelectionWidth:D}={...hn,...e},$=g.useRef(null),[oe,W]=g.useState(void 0),[z,se]=g.useState({mode:"default"}),[q,J]=g.useState(!1),he=g.useCallback(K=>{l(K),C(K)},[l,C]),Ce=g.useCallback(K=>{const G=K/x;H({width:K,height:jG,scaleRatio:G})},[x,j,H]);return _n({isInsideComponent:Q,isEditingText:z.mode==="textedition",settings:P,selectedShape:i,setSelectedShape:h,removeShape:f,pasteShape:he,updateShape:m,backwardShape:k,forwardShape:w,setShiftPressed:J}),(({onResized:K,element:G})=>{g.useEffect(()=>{const ve=G.current;if(!ve)return;const He=new ResizeObserver(we=>{const pe=we?.[0]?.borderBoxSize?.[0],{width:me,height:Te}=pe?{width:pe.inlineSize,height:pe.blockSize}:we?.[0].contentRect??{};K(me,Te)});return He.observe(ve),()=>{He.unobserve(ve)}},[G,K])})({element:$,onResized:Ce}),d.jsx("div",{ref:$,className:"react-paint-app-row"+(a?` ${a}`:""),"data-grow":v,"data-shrink":y,style:{"--react-paint-app-row-width":E.width,"--react-paint-app-canvaswidth":`${x}px`,"--react-paint-app-row-aspectratio":`calc(${E.width} / ${E.height})`,"--react-paint-app-canvas-bg":S,...t},children:d.jsx(zn,{ref:L.canvas,canGrow:v,disabled:M,isInsideComponent:Q,activeTool:V,setActiveTool:N,canvasOffsetStartPosition:oe,setCanvasOffsetStartPosition:W,shapes:s.current,addShape:l,updateSingleShape:m,selectedShape:i,selectionFrame:r,setSelectedShape:h,setSelectionFrame:c,hoveredShape:o,refreshHoveredShape:p,refreshSelectedShapes:u,settings:P,setCanvasOffset:T,saveShapes:b,canvasSize:E,selectionMode:z,setSelectionMode:se,selectionColor:F,selectionWidth:D,isEditMode:R,isShiftPressed:q,withFrameSelection:Z,withSkeleton:A})})},Se.Editor=({editorProps:e,className:a,style:t,options:n,children:s})=>{const{shapesRef:i,addPictureShape:r,moveShapes:o,toggleShapeVisibility:l,toggleShapeLock:h,canGoBackward:c,canGoForward:u,canClear:p,selectedShape:f,removeShape:m,updateShape:k,backwardShape:w,forwardShape:b,refs:L,width:x,height:j,canvasSize:P,selectTool:E,selectShape:H,activeTool:T,setActiveTool:C,setAvailableTools:V,isEditMode:N,isDisabled:Q,availableTools:R,gridGap:M,setGridGap:A,loadFile:Z,exportPicture:v,exportData:y,clearCanvas:S,settings:F,canvas:{canGrow:D,layersManipulation:$,withExport:oe,withLoadAndSave:W,withUploadPicture:z,withUrlPicture:se}}=e,{toolbarBackgroundColor:q,dividerColor:J,fontRadius:he,fontDisabledColor:Ce,fontDisabledBackgroundColor:K,fontColor:G,fontBackgroundColor:ve,fontSelectedColor:He,fontSelectedBackgroundColor:we,fontHoverColor:pe,fontHoverBackgroundColor:me}={...vi,...n},[Te,ae]=g.useState(!1),[ke,Ee]=g.useState(!1),re=M>=vt.large?"large":M>=vt.medium?"medium":M>=vt.small?"small":"none",{snackbarList:ge,addSnackbar:ee}=mi(),Me=g.useCallback((Y,_,et)=>{V(Fe=>Fe.map(tt=>tt.id===Y?ie(["settings",_,"default"],et,tt):tt)),C(Fe=>Fe.id===Y?ie(["settings",_,"default"],et,Fe):Fe)},[C,V]),Xe=g.useCallback(()=>{E(be),w()},[E,w]),je=g.useCallback(()=>{E(be),b()},[E,b]),Ye=g.useCallback(()=>{ae(!0);try{v(),ae(!1)}catch(Y){Y instanceof Error&&ee({type:"error",text:"L'export a échoué"}),console.warn(Y)}finally{ae(!1)}},[v,ee]),mt=g.useCallback(()=>{ae(!0);try{y(),ae(!1)}catch(Y){Y instanceof Error&&ee({type:"error",text:"L'enregistrement a échoué"}),console.warn(Y)}finally{ae(!1)}},[y,ee]),zt=g.useCallback(async Y=>{ae(!0);try{await Z(Y),ee({type:"success",text:"Fichier chargé !"})}catch(_){_ instanceof Error&&ee({type:"error",text:"Le chargement a échoué"}),console.warn(_)}finally{ae(!1)}},[Z,ee]),Ot=g.useCallback(async Y=>{ae(!0);try{const _=await r(Y,x,j);H(_)}catch(_){_ instanceof Error&&ee({type:"error",text:"Le chargement a échoué"}),console.warn(_)}finally{ae(!1)}},[r,H,ee,x,j]),$t=`${a?`${a} `:""}${ke?"react-paint-editor-layout-opened ":""}react-paint-editor-app`;return d.jsxs("div",{ref:L.setEditor,className:$t,style:{"--react-paint-editor-app-maxWidth":D?"100%":`${x}px`,"--react-paint-editor-app-toolbar-bg":q,"--react-paint-editor-app-divider-color":J,"--react-paint-editor-app-font-radius":he,"--react-paint-editor-app-font-disabled-color":Ce,"--react-paint-editor-app-font-disabled-bg":K,"--react-paint-editor-app-font-color":G,"--react-paint-editor-app-font-bg":ve,"--react-paint-editor-app-font-selected-color":He,"--react-paint-editor-app-font-selected-bg":we,"--react-paint-editor-app-font-hover-color":pe,"--react-paint-editor-app-font-hover-bg":me,...t},children:[N&&d.jsx(fi,{width:P.width,disabled:Q,activeTool:T,clearCanvas:S,setActiveTool:E,exportCanvasInFile:Ye,saveFile:mt,loadFile:zt,addPicture:Ot,hasActionToUndo:c,hasActionToRedo:u,hasActionToClear:p,undoAction:Xe,redoAction:je,availableTools:R,withExport:oe,withLoadAndSave:W,withUploadPicture:z,withUrlPicture:se}),s,N&&$&&d.jsx(ii,{gridFormat:re,setGridFormat:Y=>{A(vt[Y])},disabled:Q,shapes:i.current,moveShapes:o,selectedShape:f,removeShape:m,selectShape:H,toggleShapeVisibility:l,toggleShapeLock:h,isLayoutPanelShown:ke}),N&&d.jsxs(d.Fragment,{children:[d.jsx(ci,{width:P.width,disabled:Q,activeTool:T,availableTools:R,selectedShape:f,settings:F,removeShape:m,updateShape:k,canvas:L.canvas.current,layersManipulation:$,toggleLayoutPanel:()=>{Ee(Y=>!Y)},updateToolSettings:Me}),d.jsx(qn,{isLoading:Te}),d.jsx(ti,{snackbarList:ge})]})]})},Se.useReactPaint=({width:e=1e3,height:a=600,shapes:t,mode:n="editor",disabled:s=!1,options:i=xa})=>{const{layersManipulation:r,brushAlgo:o,isBrushShapeDoneOnMouseUp:l,grid:h,canGrow:c,canShrink:u,withExport:p,withLoadAndSave:f,withUploadPicture:m,withUrlPicture:k,withSkeleton:w,withFrameSelection:b,clearCallback:L,availableTools:x,canvasSelectionPadding:j}={...xa,...i},P=n!=="viewer",E=s\|\|!P,H=g.useRef(null),T=g.useRef(null),C=g.useRef(!1),V=g.useCallback(U=>{H.current=U},[]),[N,Q]=g.useState(be),[R,M]=g.useState(h),[A,Z]=g.useState({width:e,height:a,scaleRatio:1}),[v,y]=g.useState([0,0]),S=g.useMemo(()=>({brushAlgo:o,isBrushShapeDoneOnMouseUp:l,canvasSize:A,canvasOffset:v,gridGap:R,selectionPadding:j}),[j,R,o,l,v,A]),[F,D]=g.useState(Ya(x,m\|\|k)),{isInsideComponent:$}=(({disabled:U,componentRef:ye})=>{const[at,Re]=g.useState(!1);return g.useEffect(()=>{if(!U){const Le=De=>{Re(Ca(De,ye.current))};return document.addEventListener("mousedown",Le,{passive:!0}),document.addEventListener("touchstart",Le,{passive:!0}),()=>{document.removeEventListener("mousedown",Le),document.removeEventListener("touchstart",Le)}}Re(!1)},[U,ye]),{isInsideComponent:at}})({disabled:E,componentRef:H}),{registerEvent:oe,unregisterEvent:W,shapesRef:z,selectedShape:se,selectionFrame:q,hoveredShape:J,addShape:he,addPictureShape:Ce,moveShapes:K,setSelectedShape:G,setSelectionFrame:ve,refreshSelectedShapes:He,refreshHoveredShape:we,removeShape:pe,updateShape:me,backwardShape:Te,forwardShape:ae,clearShapes:ke,saveShapes:Ee,toggleShapeVisibility:re,toggleShapeLock:ge,canGoBackward:ee,canGoForward:Me,canClear:Xe}=Rn(S,e,a),je=g.useCallback(U=>{G(void 0),Q(U)},[G]),Ye=g.useCallback((U,ye)=>{ke(U,ye),je(be),y([0,0])},[je,ke]),mt=g.useCallback(U=>{Q(be),G(U)},[G]),zt=g.useCallback(()=>{const U=En(z.current,e,a);if(!U)throw new Error("L'encodage a échoué");Ba(U,"drawing.json")},[z,e,a]),Ot=g.useCallback(()=>{const U=Ga(z.current,e,a,S);if(!U)throw new Error;Ba(U,"drawing.png")},[z,e,a,S]),$t=g.useCallback(()=>T.current?Ga(z.current,e,a,S):void 0,[z,e,a,S]),Y=g.useCallback(()=>Dt(z.current,e,a),[z,e,a]);g.useEffect(()=>{$\|\|G(void 0)},[$,G]);const _=g.useCallback(async(U,ye)=>{const at=await(async(Re,Le)=>{if(!Re)return[];const De=[],Ut=Lt(Re.map(ce=>{if(!ce\|\|!Qa.includes(ce.type))return null;if(ce.type==="picture"){const Qe=new Image,Qi=new Promise((nt,Si)=>{Qe.onload=()=>{URL.revokeObjectURL(Qe.src),nt()},Qe.onerror=()=>{Si(new Error("Some images could not be loaded"))}});if(De.push(Qi),ce.src.startsWith("http"))Ua(ce.src).then(nt=>{Qe.src=nt}).catch(()=>{Qe.src=""});else if(ce.src.includes("<svg")){const nt=new Blob([ce.src],{type:"image/svg+xml"});Qe.src=URL.createObjectURL(nt)}else Qe.src=ce.src;return Xa({...ce,img:Qe},Le)}return Xa(ce,Le)}));return await Promise.all(De),Ut})(U,S);Ye(at,ye)},[Ye,S]),et=g.useRef();et.current=_;const Fe=g.useCallback((U=[],ye=!0)=>{et.current?.(U,{clearHistory:ye,source:"remote"})},[]);C.current\|\|typeof Image>"u"\|\|(C.current=!0,t&&_(t,{clearHistory:!0,source:"remote"}));const tt=g.useCallback(async U=>{const ye=await(async at=>new Promise((Re,Le)=>{const De=new FileReader;De.onload=Ut=>{const ce=Ut.target?.result;if(!ce)return Le("Impossible de récupérer les données du fichier");const Qe=JSON.parse(ce);Re(Qe)},De.readAsText(at)}))(U);await _(ye.shapes??[],{clearHistory:!0,source:"remote"})},[_]),yi=g.useCallback(()=>{typeof L!="string"?_(L(),{clearHistory:!1,source:"user"}):L==="defaultShapes"&&t!==void 0?_(t,{clearHistory:!1,source:"user"}):Ye([],{clearHistory:!1,source:"user"})},[Ye,_,t,L]);g.useEffect(()=>{D(Ya(x,m\|\|k))},[x,m,k]);const dn={canvas:T,editor:H,setEditor:V};return{editorProps:{shapesRef:z,addPictureShape:Ce,moveShapes:K,toggleShapeVisibility:re,toggleShapeLock:ge,canGoBackward:ee,canGoForward:Me,canClear:Xe,selectedShape:se,removeShape:pe,updateShape:me,backwardShape:Te,forwardShape:ae,refs:dn,width:e,height:a,canvasSize:A,selectTool:je,selectShape:mt,activeTool:N,setActiveTool:Q,setAvailableTools:D,isEditMode:P,isDisabled:E,availableTools:F,gridGap:R,setGridGap:M,loadFile:tt,exportPicture:Ot,exportData:zt,clearCanvas:yi,settings:S,canvas:{canGrow:c,canShrink:u,layersManipulation:r,withExport:p,withLoadAndSave:f,withUploadPicture:m,withUrlPicture:k}},canvasProps:{shapesRef:z,selectedShape:se,selectionFrame:q,hoveredShape:J,addShape:he,setSelectedShape:G,setSelectionFrame:ve,refreshSelectedShapes:He,refreshHoveredShape:we,removeShape:pe,updateShape:me,backwardShape:Te,forwardShape:ae,saveShapes:Ee,refs:dn,width:e,height:a,settings:S,canvasSize:A,setCanvasSize:Z,setCanvasOffset:y,selectShape:mt,activeTool:N,setActiveTool:Q,isInsideComponent:$,isEditMode:P,isDisabled:E,canvas:{withSkeleton:w,withFrameSelection:b,canGrow:c,canShrink:u}},registerEvent:oe,unregisterEvent:W,resetCanvas:Fe,getCurrentImage:$t,getCurrentData:Y}},Object.defineProperty(Se,Symbol.toStringTag,{value:"Module"})});
1	+ (function(Se,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime"],g):g((Se=typeof globalThis<"u"?globalThis:Se\|\|self)["react-paint"]={},Se.React,Se.jsxRuntime)})(this,function(Se,g,d){"use strict";const Bt='<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>',St='<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>',Xt='<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>',bt='<svg><path d="M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z"/></svg>',Yt='<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>',_t='<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>',qt='<svg><path d="M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z"/></svg>',Jt='<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>',Kt='<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>',ea='<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>',ta='<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>',aa='<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>',ne=["transparent","black","white","red","green","blue","yellow"],Ve=[0,1,2],na=[[1,0],[1,2],[4,6]],_e="serif",un=2,ia=3,hn=4,X="react-paint-",xt={type:"picture",id:`${X}picture`,icon:bt,label:"Image",settings:{opacity:{min:0,max:100,step:1,default:100}}},sa={type:"brush",id:`${X}brush`,icon:Bt,label:"Brosse",settings:{strokeColor:{values:ne,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:6,max:20,step:2,default:10},lineDash:{values:Ve,default:0}}},oa={type:"line",id:`${X}line`,icon:_t,label:"Ligne",settings:{strokeColor:{values:ne,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0},lineArrow:{values:[0,1,2,3],default:0}}},ra={type:"polygon",id:`${X}polygon`,icon:St,label:"Polygone",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},la={type:"curve",id:`${X}curve`,icon:qt,label:"Courbe",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"black"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0},pointsCount:{min:3,max:10,step:1,default:3}}},da={type:"rect",id:`${X}rect`,icon:yt,label:"Rectangle",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0}}},ca={type:"square",id:`${X}square`,icon:yt,label:"Carré",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0}}},ua={type:"circle",id:`${X}circle`,icon:Qt,label:"Cercle",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0}}},ha={type:"ellipse",id:`${X}ellipse`,icon:Qt,label:"Ellipse",settings:{strokeColor:{values:ne,default:"black"},fillColor:{values:ne,default:"transparent"},opacity:{min:0,max:100,step:1,default:100},lineWidth:{min:1,max:20,step:1,default:1},lineDash:{values:Ve,default:0}}},pa={type:"text",id:`${X}text`,icon:Yt,label:"Texte",settings:{strokeColor:{values:ne,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}}},be={id:`${X}selection`,type:"selection",icon:'<svg><path d="M8.0145 11.1707C8.38484 10.9914 8.82183 11.1558 8.99959 11.5295L10.7031 15.2591L12.0363 14.6238L10.3254 10.9017C10.1476 10.528 10.3106 10.0795 10.6809 9.90761L10.8883 9.84782L12.5918 9.51148L6.48133 4.33192V12.389L7.82934 11.2903L8.0145 11.1707ZM10.6587 16.9258C10.2883 17.1052 9.84395 16.9482 9.67359 16.5745L8.05894 13.0318L6.19988 14.5416C6.07396 14.6462 5.91842 14.706 5.74066 14.706C5.54423 14.706 5.35584 14.6272 5.21694 14.4871C5.07803 14.3469 5 14.1568 5 13.9586V2.74741C5 2.54919 5.07803 2.35908 5.21694 2.21891C5.35584 2.07874 5.54423 2 5.74066 2C5.91842 2 6.08878 2.06727 6.21469 2.1719L6.2221 2.16443L14.7323 9.36947C15.0508 9.63854 15.0879 10.1094 14.8286 10.4233C14.7175 10.5579 14.562 10.6475 14.4064 10.6774L12.0659 11.1408L13.6954 14.6761C13.888 15.0498 13.7102 15.4908 13.3399 15.6627L10.6587 16.9258Z"/></svg>',label:"Sélection"},Ne={id:`${X}undo`,type:"undo",icon:'<svg><path d="M11.708 15.833H5.854V14.083H11.708Q13 14.083 13.958 13.292Q14.917 12.5 14.917 11.271Q14.917 10.042 13.958 9.24Q13 8.438 11.708 8.438H6.667L8.792 10.562L7.562 11.792L3.333 7.562L7.562 3.333L8.792 4.562L6.667 6.688H11.708Q13.729 6.688 15.198 7.99Q16.667 9.292 16.667 11.25Q16.667 13.208 15.198 14.521Q13.729 15.833 11.708 15.833Z"/></svg>',label:"Undo"},Ie={id:`${X}redo`,type:"redo",icon:'<svg><path d="M8.292 15.833Q6.271 15.833 4.802 14.521Q3.333 13.208 3.333 11.25Q3.333 9.292 4.802 7.99Q6.271 6.688 8.292 6.688H13.333L11.208 4.562L12.438 3.333L16.667 7.562L12.438 11.792L11.208 10.562L13.333 8.438H8.292Q7 8.438 6.042 9.229Q5.083 10.021 5.083 11.25Q5.083 12.5 6.042 13.292Q7 14.083 8.292 14.083H14.146V15.833Z"/></svg>',label:"Redo"},We={id:`${X}clear`,type:"clear",icon:'<svg><path d="M7.854 13.812 10 11.688 12.125 13.812 13.354 12.604 11.208 10.458 13.354 8.312 12.125 7.104 10 9.229 7.854 7.104 6.625 8.312 8.771 10.458 6.625 12.604ZM5.896 17.5Q5.167 17.5 4.656 16.99Q4.146 16.479 4.146 15.75V5.125H3.333V3.375H7.542V2.5H12.458V3.375H16.667V5.125H15.833V15.75Q15.833 16.479 15.323 16.99Q14.812 17.5 14.083 17.5Z"/></svg>',label:"Clear"},Ct={id:`${X}export`,type:"export",icon:'<svg><path d="M10 13.271 5.708 8.979 6.958 7.729 9.125 9.896V3.333H10.875V9.896L13.042 7.729L14.292 8.979ZM5.083 16.667Q4.354 16.667 3.844 16.156Q3.333 15.646 3.333 14.917V12.5H5.083V14.917Q5.083 14.917 5.083 14.917Q5.083 14.917 5.083 14.917H14.917Q14.917 14.917 14.917 14.917Q14.917 14.917 14.917 14.917V12.5H16.667V14.917Q16.667 15.646 16.156 16.156Q15.646 16.667 14.917 16.667Z"/></svg>',label:"Export PNG"},ga={id:`${X}load`,type:"loadfile",icon:'<svg><path d="M3.417 16.667Q2.729 16.667 2.198 16.135Q1.667 15.604 1.667 14.917V5.083Q1.667 4.396 2.198 3.865Q2.729 3.333 3.417 3.333H8.25L9.917 5H16.667Q17.354 5 17.844 5.531Q18.333 6.062 18.333 6.75H3.417V14.917Q3.417 14.917 3.417 14.917Q3.417 14.917 3.417 14.917L5.438 8.5H19.583L17.396 15.479Q17.229 16.021 16.802 16.344Q16.375 16.667 15.833 16.667Z"/></svg>',label:"Load project"},wt={id:`${X}save`,type:"savefile",icon:'<svg><path d="M17.5 5.833V15.75Q17.5 16.479 16.99 16.99Q16.479 17.5 15.75 17.5H4.25Q3.521 17.5 3.01 16.99Q2.5 16.479 2.5 15.75V4.25Q2.5 3.521 3.01 3.01Q3.521 2.5 4.25 2.5H14.167ZM10 14.917Q11.062 14.917 11.823 14.156Q12.583 13.396 12.583 12.333Q12.583 11.271 11.823 10.51Q11.062 9.75 10 9.75Q8.938 9.75 8.177 10.51Q7.417 11.271 7.417 12.333Q7.417 13.396 8.177 14.156Q8.938 14.917 10 14.917ZM5.021 8.396H12.521V5.021H5.021Z"/></svg>',label:"Save project"},fa={id:`${X}upload-picture`,type:"uploadpicture",icon:bt,label:"Upload picture"},va=2,ma="blue",xe=14,ya=[[0,0],[.5,0],[1,0],[1,.5],[1,1],[.5,1],[0,1],[0,.5]],Qa=["brush","rect","square","line","polygon","circle","curve","ellipse","picture","text","triangle"],Sa="react-paint-canvas-drawcanvas",ba="react-paint-canvas-selectioncanvas",xa={layersManipulation:!0,grid:0,canGrow:!1,canShrink:!0,withExport:!0,withLoadAndSave:!0,withUploadPicture:!0,withUrlPicture:!1,availableTools:[sa,oa,ra,la,da,ca,ua,ha,xt,pa],clearCallback:"empty",brushAlgo:"simple",isBrushShapeDoneOnMouseUp:!0,withFrameSelection:!1,withSkeleton:!0,canvasSelectionPadding:0},pn={canvasBackgroundColor:"white",canvasSelectionColor:ma,canvasSelectionWidth:va},Ca=(e,a)=>!!(e.target instanceof Node&&a)&&a.contains(e.target),it=300,kt=(e,a)=>{const t={...a};for(const n of e)delete t[n];return t},ie=(e,a,t)=>{const n=Array.isArray(t)?[...t]:{...t},s=Array.isArray(e)?e:typeof e=="string"?e.split("."):[e];return s.reduce((i,r,o)=>(i[r]=Mt(i[r])?{...i[r]}:Array.isArray(i[r])?[...i[r]]:i[r]===void 0\|\|i[r]===null?{}:i[r],o===s.length-1&&(i[r]=a),i[r]),n),n},Mt=e=>typeof e=="object"&&!Array.isArray(e)&&e!==null,fe=(e,a,t)=>{if(!Mt(a)\|\|!Mt(t))return t;const n={...a};for(const s in t)Object.hasOwn(t,s)&&(Object.hasOwn(n,s)?n[s]=e(n[s],t[s],s)??fe(e,n[s],t[s]):n[s]=t[s]);return n},wa=(e,a)=>{if(e===a)return!0;if(typeof e!="object"\|\|typeof a!="object"\|\|e===null\|\|a===null)return!1;const t=Object.keys(e),n=Object.keys(a);if(t.length!==n.length)return!1;for(const s of t)if(!n.includes(s)\|\|!wa(e[s],a[s]))return!1;return!0},jt={},te=(e="")=>(jt[e]\|\|(jt[e]=0),`${e}${++jt[e]}`),Lt=e=>e.filter(a=>a!=null),ka=e=>{e.lineCap="round",e.lineJoin="round"},Ae=(e,a={})=>{const{lineCap:t="round",fillColor:n="transparent",opacity:s=100,strokeColor:i=ma,lineWidth:r=va,lineDash:o=0}=a;e.lineCap=t,e.globalAlpha=s/100,e.fillStyle=n,e.strokeStyle=i,e.lineWidth=r,e.setLineDash(o===0?[]:[na[o][0]r,na[o][1]r])},Vt=(e,a,t,n)=>{e.save(),e.scale(a.canvasSize.scaleRatio,a.canvasSize.scaleRatio),e.translate(a.canvasOffset[0],a.canvasOffset[1]),t&&n&&(e.translate(n[0],n[1]),e.rotate(t),e.translate(-n[0],-n[1]))},st=e=>{const a=new Path2D;return a.rect(e.x,e.y,e.width,e.height),a},ot=e=>{const a=new Path2D;return a.arc(e.x,e.y,e.radius,0,2Math.PI),a},Pt=e=>{const a=new Path2D;return a.moveTo(...e.points[0]),a.lineTo(...e.points[1]),a},gn=e=>{const a=new Path2D;return a.moveTo(...e.points[0]),a.lineTo(...e.points[1]),a.lineTo(...e.points[2]),a.lineTo(...e.points[0]),a},Ht=(e,a,t,n=!1)=>{const{borders:s}=B(a,t);return{border:st(s),shapePath:e,anchors:[...a.points.map((i,r)=>n&&r>0&&r<a.points.length-1?st({x:i[0]-7,y:i[1]-7,width:xe/t.canvasSize.scaleRatio,height:xe/t.canvasSize.scaleRatio}):ot({x:i[0],y:i[1],radius:7/t.canvasSize.scaleRatio}))]}},ze=(e,a)=>{const t=((n,{brushAlgo:s})=>{if(n.points.length<1\|\|n.style?.strokeColor==="transparent")return;const i=n.points.flat(),r=i.map(u=>u[0]),o=i.map(u=>u[1]),l=Math.min(...r),h=Math.min(...o),c=new Path2D;for(const u of n.points){if(!u.length)return;if(u.length===1)c.rect(...ue(u[0],l,h,n.scaleX,n.scaleY),1,1);else if(c.moveTo(...ue(u[0],l,h,n.scaleX,n.scaleY)),s==="quadratic"){for(let p=0;p<u.slice(1).length-2;p++){const f=ue(u[p],l,h,n.scaleX,n.scaleY),m=ue(u[p+1],l,h,n.scaleX,n.scaleY),w=(f[0]+m[0])/2,k=(f[1]+m[1])/2;c.quadraticCurveTo(...f,w,k)}c.quadraticCurveTo(...ue(u[u.length-2],l,h,n.scaleX,n.scaleY),...ue(u[u.length-1],l,h,n.scaleX,n.scaleY))}else for(const p of u.slice(1))c.lineTo(...ue(p,l,h,n.scaleX,n.scaleY))}return c})(e,a);return{...e,path:t,selection:Oe(t,e,a)}},fn=ze,Tt=e=>180e/Math.PI,Ma=(e,a)=>{const t=a.x-Math.min(Math.max(a.x,e.x),e.x+e.width),n=a.y-Math.min(Math.max(a.y,e.y),e.y+e.height);return Math.sqrt(tt+nn)<=a.radius},le=({origin:e=[0,0],point:a,rotation:t})=>{const n=[a[0]-e[0],a[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]]},ja=e=>(e+2Math.PI)%(2Math.PI),La=({targetVector:[e,a],radian:t=!0,originVector:n})=>{const s=ja(Math.atan2(a[1]-e[1],a[0]-e[0]));if(n){const[i,r]=n,o=Math.atan2(r[1]-i[1],r[0]-i[0]),l=ja(s-o);return t?l:Tt(l)}return t?s:Tt(s)},Pe=(e,a=2)=>Math.round(e10a)/10a,ue=(e,a,t,n=1,s=1)=>[a+(e[0]-a)n,t+(e[1]-t)s],I=(e,a,t=0)=>{if(!a.gridGap)return Pe(e);const n=e+t,s=n>=0?a.gridGap:-a.gridGap;return n+s/2-(n+s/2)%s-t},vn=(e,a,t=0)=>a.gridGap?e+Math.PI/18/2-(e+Math.PI/18/2)%(Math.PI/18):Pe(e,3),mn=(e,a,t,n,s,i)=>{switch(n.mode){case"brush":return((r,o,l)=>{const h={...r,points:ie(r.points.length-1,[...r.points[r.points.length-1],[Math.round(o[0]),Math.round(o[1])]],r.points)};return ze(h,l)})(a,t,s);case"translate":return Rt(t,n.originalShape,n.cursorStartPosition,s);case"rotate":return Tn(a,t,n.originalShape,n.cursorStartPosition,n.center,s);case"resize":return An(e,a,t,n.originalShape,n,s,i);default:return a}},Oe=(e,a,t)=>{const{borders:n}=B(a,t);return{border:st(n),shapePath:e,line:Pt({points:[[n.x+n.width/2,n.y],[n.x+n.width/2,n.y-23/t.canvasSize.scaleRatio]]}),anchors:[ot({x:n.x+n.width/2,y:n.y-23/t.canvasSize.scaleRatio,radius:7/t.canvasSize.scaleRatio}),...ya.map(s=>ot({x:n.x+n.widths[0],y:n.y+n.heights[1],radius:7/t.canvasSize.scaleRatio}))]}},Va=({borderStart:e,borderSize:a,vector:t,settings:n,invertedAxe:s,anchor:i})=>{switch(i){case 0:{if(s){const o=a-2n.selectionPadding;return[e+o,t-o]}const r=Math.max(2n.selectionPadding,a-t);return[e+a-r,r]}case .5:return[e,a];case 1:if(s){const r=a+t;return[e+r,2n.selectionPadding-r]}return[e,Math.max(2n.selectionPadding,a+t)];default:return[0,0]}},Pa=({borderX:e,borderWidth:a,borderY:t,borderHeight:n,center:s,originalShape:i})=>{const r=[e+a/2-s[0],t+n/2-s[1]],[o,l]=le({point:r,rotation:-i.rotation});return{borderX:Pe(e+o-r[0]),borderWidth:Pe(a),borderY:Pe(t+l-r[1]),borderHeight:Pe(n)}},$e=(e,a,t,n,s=!1)=>{const{center:i,borders:r}=B(a,n),o=le({origin:i,point:e,rotation:a.rotation}),l=t.anchor[0]===0&&o[0]>=r.x+r.width\|\|t.anchor[0]===1&&o[0]<=r.x,h=t.anchor[1]===0&&o[1]>=r.y+r.height\|\|t.anchor[1]===1&&o[1]<=r.y,c=[I(o[0],n,t.anchor[0]===0&&!l\|\|t.anchor[0]===1&&l?n.selectionPadding:-n.selectionPadding),I(o[1],n,t.anchor[1]===0&&!h\|\|t.anchor[1]===1&&h?n.selectionPadding:-n.selectionPadding)],u=n.gridGap?[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]:le({origin:i,point:t.cursorStartPosition,rotation:a.rotation}),p=[c[0]-u[0],c[1]-u[1]],[f,m]=Va({borderStart:r.x,borderSize:r.width,vector:p[0],settings:n,invertedAxe:l,anchor:t.anchor[0]}),[w,k]=Va({borderStart:r.y,borderSize:r.height,vector:p[1],settings:n,invertedAxe:h,anchor:t.anchor[1]});if(s){const b=((L,x,j,P,E,H,T,C,V,N)=>{const{selectionPadding:Q}=N,R=(x.width-2Q\|\|1)/(x.height-2Q\|\|1),M=(E-2Q)/(T-2Q);let A,Z,v,y;return V.anchor[0]!==.5&&V.anchor[1]!==.5?M<R?(Z=H,y=T,v=(T-2Q)R+2Q,A=V.anchor[0]===0?x.width-L[0]>Q?x.x+(x.width-v):x.x+x.width-2Q:x.width+L[0]>Q?x.x:x.x-v+2Q):(A=P,v=E,y=(E-2Q)/R+2Q,Z=V.anchor[1]===0?x.height-L[1]>Q?x.y+(x.height-y):x.y+x.height-2Q:x.height+L[1]>Q?x.y:x.y-y+2Q):V.anchor[0]!==.5?(A=P,v=E,y=(E-2Q)/R+2Q,Z=x.y+(x.height-y)/2):(Z=H,y=T,v=(T-2Q)R+2Q,A=x.x+(x.width-v)/2),{borderX:A,borderWidth:v,borderY:Z,borderHeight:y,center:j,originalShape:C}})(p,r,i,f,m,w,k,a,t,n);return Pa(b)}return Pa({borderX:f,borderWidth:m,borderY:w,borderHeight:k,center:i,originalShape:a})},rt=(e,a)=>{const t=ot(e);return{...e,path:t,selection:Oe(t,e,a)}},yn=rt,At=(e,a,t)=>{const{clientX:n=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:{},i=a?.getBoundingClientRect()??{left:0,top:0,width:t.canvasSize.width,height:t.canvasSize.height};return[(n-i.left)(t.canvasSize.width/i.width)/t.canvasSize.scaleRatio,(s-i.top)(t.canvasSize.height/i.height)/t.canvasSize.scaleRatio]},Ha=e=>"touches"in e,Ze=(e,a,[t,n],[s,i])=>le({origin:[t-s,n-i],point:e,rotation:a}),lt=(e,a,t)=>t?Ma(e,{x:a[0],y:a[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,a),qe=(e,a,t,n=!1,s=0)=>{if(e.locked)return!1;const{canvasSize:{scaleRatio:i}}=t,{borders:r,center:o}=B(e,t),l=Ze(a,e.rotation,o,t.canvasOffset);if(n)if(e.type==="line"\|\|e.type==="polygon"\|\|e.type==="curve"){for(let h=0;h<e.points.length;h++)if(lt({x:e.points[h][0]-7/i,y:e.points[h][1]-7/i,width:xe/i,height:xe/i},l,s))return{mode:"resize",anchor:h}}else{if(lt({x:r.x+r.width/2-7/i,y:r.y-xe/i-16/i,width:xe/i,height:xe/i},l,s))return{mode:"rotate"};for(const h of ya)if(lt({x:r.x+r.widthh[0]-7/i,y:r.y+r.heighth[1]-7/i,width:xe/i,height:xe/i},l,s))return{mode:"resize",anchor:h}}return!!lt(r,l,s)&&{mode:"translate"}},Ta=(e,a,t,n)=>{if(a.locked)return!1;const{center:s}=B(a,n),i=Ze(t,a.rotation,s,n.canvasOffset);return"path"in a&&a.path?a.style?.fillColor&&a.style?.fillColor!=="transparent"?!!e.isPointInPath(a.path,i[0],i[1])&&{mode:"translate"}:(e.lineWidth=(a.style?.lineWidth??0)+15,!!e.isPointInStroke(a.path,i[0],i[1])&&{mode:"translate"}):qe(a,t,n,!1)};function Aa(e,a){const t=Math.max(e.x,a.x),n=Math.max(e.y,a.y),s=Math.min(e.x+(e.width\|\|1),a.x+(a.width\|\|1)),i=Math.min(e.y+(e.height\|\|1),a.y+(a.height\|\|1));if(t<s&&n<i)return{x:t,y:n,width:s-t,height:i-n}}const Za=({ctx:e,path:a,rect:t,offset:n,checkFill:s})=>{for(let i=0;i<n;i+=n/2)for(let r=0;r<n;r+=n/2)for(let o=i+t.x;o<t.x+t.width;o+=n)for(let l=r+t.y;l<t.y+t.height;l+=n)if(s?e.isPointInPath(a,o,l):e.isPointInStroke(a,o,l))return!0;return!1},Ue=(e,a)=>{const t=(n=>{if(n.points.length<1)return;const s=new Path2D;s.moveTo(...n.points[0]);for(const i of n.points.slice(1))s.lineTo(...i);return s.lineTo(...n.points[0]),s})(e);return{...e,path:t,selection:Ht(t,e,a)}},Qn=Ue,Ea=(e,a)=>{const t=Math.min(...e.points.map(i=>i[0]))-a.selectionPadding,n=Math.max(...e.points.map(i=>i[0]))+a.selectionPadding,s=Math.min(...e.points.map(i=>i[1]))-a.selectionPadding;return{x:t,width:n-t,y:s,height:Math.max(...e.points.map(i=>i[1]))+a.selectionPadding-s}},Be=(e,a)=>{const t=(n=>{if(n.points.length<3)return;const s=new Path2D;s.moveTo(...n.points[0]);for(let i=1;i<n.points.length-1;i++)s.quadraticCurveTo(...n.points[i],n.points.length-2===i?n.points[i+1][0]:(n.points[i+1][0]-n.points[i][0])/2+n.points[i][0],n.points.length-2===i?n.points[i+1][1]:(n.points[i+1][1]-n.points[i][1])/2+n.points[i][1]);return s})(e);return{...e,path:t,selection:Ht(t,e,a,!0)}},Sn=Be,bn=Ea,dt=(e,a)=>{const t=(n=>{const s=new Path2D;return s.ellipse(n.x,n.y,n.radiusX,n.radiusY,0,0,2Math.PI),s})(e);return{...e,path:t,selection:Oe(t,e,a)}},xn=dt,Fa=e=>{return t={...e,type:"triangle"},{...t,path:gn(t)};var t},Cn=(e,a)=>{e.globalAlpha!==0&&a.path&&(a.style?.fillColor!=="transparent"&&e.fill(a.path),a.style?.strokeColor!=="transparent"&&e.stroke(a.path))},ct=(e,a)=>{const t=[];let n;if(e.style?.lineArrow===1\|\|e.style?.lineArrow===2\|\|e.style?.lineArrow===3){const s=Math.PI/2-La({targetVector:[e.points[0],e.points[1]]});e.style?.lineArrow!==1&&e.style?.lineArrow!==3\|\|t.push(Fa(Ra(e.points[0],s,e.style))),e.style?.lineArrow!==2&&e.style?.lineArrow!==3\|\|t.push(Fa(Ra(e.points[1],s+Math.PI,e.style)));const i=(({line:r,size:o,direction:l})=>{const h=Math.PI/2-La({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 u,p;if(["start","both"].includes(l)){const f=le({point:r.points[0],origin:c,rotation:-h});u=le({point:[f[0],f[1]+o],origin:c,rotation:h})}else u=[...r.points[0]];if(["end","both"].includes(l)){const f=le({point:r.points[1],origin:c,rotation:-h});p=le({point:[f[0],f[1]-o],origin:c,rotation:h})}else p=[...r.points[1]];return{points:[u,p]}})({line:e,size:10+2(e.style?.lineWidth??0),direction:e.style?.lineArrow===1?"start":e.style?.lineArrow===2?"end":"both"});n=Pt(i)}else n=Pt(e);return{...e,path:n,selection:Ht(n,e,a),arrows:t,style:{...e.style,lineCap:e.style?.lineArrow?"butt":"round"}}},wn=ct,Ra=(e,a,t)=>{const n=[le({point:[0,0],rotation:a}),le({point:[-(5+(t.lineWidth??0)),10+2(t.lineWidth??0)],rotation:a}),le({point:[5+(t.lineWidth??0),10+2(t.lineWidth??0)],rotation:a})];return{points:[[e[0]+n[0][0],e[1]+n[0][1]],[e[0]+n[1][0],e[1]+n[1][1]],[e[0]+n[2][0],e[1]+n[2][1]]],style:{...t,fillColor:t.strokeColor,strokeColor:"transparent"}}},ut=(e,a)=>{const t=st(e);return{...e,path:t,selection:Oe(t,e,a)}},kn=ut,Mn=(e,a)=>{e.globalAlpha!==0&&a.path&&(a.style?.fillColor!=="transparent"&&e.fill(a.path),a.style?.strokeColor!=="transparent"&&e.stroke(a.path))},Da=(e,a)=>({x:e.x-a.selectionPadding,width:e.width+2a.selectionPadding,y:e.y-a.selectionPadding,height:e.height+2a.selectionPadding}),Na=(e,a,t,n,[s,i]=[!1,!1])=>((r,o,[l,h],[c,u])=>le({origin:[l-c,h-u],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+(i?0:t.height):t.y+(i?t.height:0)],t.rotation,a,n.canvasOffset),ht=(e,a)=>({...e,selection:Oe(void 0,e,a)}),jn=ht,Zt=(e,a,t,n,s)=>{const[i,r]=((o,l,h,c,u=!1)=>{if(!(o&&l&&c&&h))return[it,it];const p=o/l;if(p>h/c){const m=u?h:Math.min(o,h);return[m,m/p]}const f=u?c:Math.min(l,c);return[fp,f]})(e.width,e.height,t,n,!0);return ht({toolId:xt.id,type:"picture",id:te("picture_"),x:(t-i)/2,y:(n-r)/2,width:i,height:r,src:a,img:e,rotation:0},s)},Ln=(e,a,t,n)=>new Promise((s,i)=>{const r=new Image;r.onerror=()=>{i(new Error("Some images could not be loaded"))},setTimeout(()=>{i(new Error("Timeout while loading images"))},4e3),e instanceof File?((o,l,h,c,u,p)=>{$a(h)?h.text().then(f=>{const m=Oa(f);o.onload=async()=>{URL.revokeObjectURL(o.src);const w=Zt(o,f,c,u,p);l(w)},o.src=m}):(o.onload=async()=>{URL.revokeObjectURL(o.src);const f=Zt(o,o.src,c,u,p);l(f)},o.src=URL.createObjectURL(h))})(r,s,e,a,t,n):((o,l,h,c,u,p)=>{o.onload=()=>{URL.revokeObjectURL(o.src);const f=Zt(o,h,c,u,p);l(f)},Ua(h).then(f=>{o.src=f}).catch(()=>{o.src=""})})(r,s,e,a,t,n)}),Et=["Texte"],pt=(e,a)=>({...e,selection:Oe(void 0,e,a)}),Vn=pt,Ft=(e,a,t,n,s,i=_e)=>{e.font=`${s?"italic":""} ${n?"bold":""} 1px ${i}`;const r=a.map(o=>t/e.measureText(o).width);return Math.min(...r)\|\|36},Pn=(e,a,t,n)=>{const s={...a,value:t},i=((m,w,k,b,L,x=_e)=>{m.font=`${L?"italic":""} ${b?"bold":""} ${k}px ${x}`;const j=w.map(P=>m.measureText(P).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:i,height:r},{center:l}=B(a,n),{center:h}=B(o,n),[c,u]=Na([1,1],l,a,n),[p,f]=Na([1,1],h,o,n,[!1,!1]);return{...o,x:o.x-(p-c),y:o.y-(f-u)}},Ia=(e,a,t,n)=>{const s=[I(t[0],n),I(t[1],n)];switch(a.type){case"brush":return((i,r,o)=>ze({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:[[r]],rotation:0,scaleX:1,scaleY:1,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},o))(a,s,n);case"line":return((i,r,o)=>{const l={toolId:i.id,type:i.type,id:te(`${i.type}_`),points:[r,r],rotation:0,style:{opacity:i.settings.opacity.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,lineArrow:i.settings.lineArrow.default}};return ct(l,o)})(a,s,n);case"polygon":return((i,r,o)=>Ue({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(r),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},o))(a,s,n);case"curve":return((i,r,o)=>Be({toolId:i.id,type:i.type,id:te(`${i.type}_`),points:new Array(i.settings.pointsCount.default).fill(r),rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default,pointsCount:i.settings.pointsCount.default}},o))(a,s,n);case"rect":case"square":return((i,r,o,l=0,h=0)=>{const c={toolId:i.id,type:i.type,id:te(`${i.type}_`),x:r[0],y:r[1],width:l,height:h,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}};return ut(c,o)})(a,s,n);case"text":return((i,r,o,l)=>{const h=Ft(i,Et,50,r.settings?.fontBold.default??!1,r.settings?.fontItalic.default??!1,r.settings.fontFamily.default);return pt({toolId:r.id,type:r.type,id:te(`${r.type}_`),x:o[0],y:o[1],value:Et,fontSize:h,width:50,height:h(Et.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}},l)})(e,a,s,n);case"ellipse":return((i,r,o)=>dt({toolId:i.id,type:i.type,id:te(`${i.type}_`),x:r[0],y:r[1],radiusX:0,radiusY:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},o))(a,s,n);case"circle":return((i,r,o)=>rt({toolId:i.id,type:i.type,id:te(`${i.type}_`),x:r[0],y:r[1],radius:0,rotation:0,style:{opacity:i.settings.opacity.default,fillColor:i.settings.fillColor.default,strokeColor:i.settings.strokeColor.default,lineWidth:i.settings.lineWidth.default,lineDash:i.settings.lineDash.default}},o))(a,s,n)}},Wa=(e,a,t)=>{if(a.visible===!1)return;const{center:n}=B(a,t);switch(Vt(e,t,a.rotation,n),Ae(e,a.style),a.type){case"brush":((s,i)=>{i.points.length<1\|\|!i.path\|\|s.globalAlpha!==0&&i.style?.strokeColor!=="transparent"&&s.globalAlpha!==0&&s.stroke(i.path)})(e,a);break;case"text":((s,i)=>{if(s.globalAlpha!==0&&i.style?.strokeColor&&i.style.strokeColor!=="transparent"){s.font=`${i.style?.fontItalic?"italic":""} ${i.style?.fontBold?"bold":""} ${i.fontSize}px ${i.style?.fontFamily??_e}`,s.textBaseline="top",s.fillStyle=i.style.strokeColor;for(let r=0;r<i.value.length;r++)s.fillText(i.value[r],i.x,i.y+ri.fontSize,i.width)}})(e,a);break;case"line":((s,i)=>{if(s.globalAlpha!==0&&i.path){i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path);for(const r of i.arrows??[])Ae(s,r.style),Cn(s,r)}})(e,a);break;case"polygon":((s,i)=>{i.path&&s.globalAlpha!==0&&(i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path))})(e,a);break;case"curve":((s,i)=>{i.path&&s.globalAlpha!==0&&(i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path))})(e,a);break;case"circle":((s,i)=>{s.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path))})(e,a);break;case"ellipse":((s,i)=>{s.globalAlpha!==0&&i.path&&(i.style?.fillColor!=="transparent"&&s.fill(i.path),i.style?.strokeColor!=="transparent"&&s.stroke(i.path))})(e,a);break;case"rect":case"square":Mn(e,a);break;case"picture":((s,i)=>{s.globalAlpha!==0&&(s.beginPath(),s.drawImage(i.img,i.x,i.y,i.width,i.height))})(e,a)}e.restore()},Hn=(e,a)=>{switch(e.type){case"brush":return((t,{selectionPadding:n})=>{const s=t.points.flat(),i=Math.min(...s.map(c=>c[0])),r=Math.min(...s.map(c=>c[1])),o=s.map(c=>ue(c,i,r,t.scaleX,t.scaleY)),l=Math.max(...o.map(c=>c[0]))+n,h=Math.max(...o.map(c=>c[1]))+n;return{x:i-n,width:l-i+n,y:r-n,height:h-r+n}})(e,a);case"line":return((t,n)=>({x:Math.min(t.points[0][0],t.points[1][0])-n.selectionPadding,width:Math.abs(t.points[0][0]-t.points[1][0])+2n.selectionPadding,y:Math.min(t.points[0][1],t.points[1][1])-n.selectionPadding,height:Math.abs(t.points[0][1]-t.points[1][1])+2n.selectionPadding}))(e,a);case"polygon":return Ea(e,a);case"curve":return bn(e,a);case"circle":return((t,n)=>({x:t.x-t.radius-n.selectionPadding,width:2(t.radius+n.selectionPadding),y:t.y-t.radius-n.selectionPadding,height:2(t.radius+n.selectionPadding)}))(e,a);case"ellipse":return((t,n)=>({x:t.x-t.radiusX-n.selectionPadding,width:2(t.radiusX+n.selectionPadding),y:t.y-t.radiusY-n.selectionPadding,height:2(t.radiusY+n.selectionPadding)}))(e,a);case"rect":case"square":return Da(e,a);case"text":return((t,n)=>({x:t.x-n.selectionPadding,width:t.width+2n.selectionPadding,y:t.y-n.selectionPadding,height:t.height+2n.selectionPadding}))(e,a);case"picture":return((t,n)=>Da(t,n))(e,a);default:return{x:0,y:0,width:100,height:100}}},B=(e,a)=>{const t=Hn(e,a),n=(s=>[s.x+s.width/2,s.y+s.height/2])(t);return{borders:t,center:n}},Tn=(e,a,t,n,s,i)=>{const r=s[0]-n[0],o=s[1]-n[1],l=s[0]-a[0],h=s[1]-a[1],c=t.rotation+Math.atan2(h,l)-Math.atan2(o,r);return{...e,rotation:vn(c,i)}},An=(e,a,t,n,s,i,r)=>{switch(n.type){case"line":return((o,l,h,c)=>{const u=[I(o[0],c),I(o[1],c)],{center:p}=B(l,c),f=Ze(u,l.rotation,p,c.canvasOffset),m=ie(["points",h.anchor],f,l);return ct(m,c)})(t,n,s,i);case"polygon":return((o,l,h,c)=>{const u=[I(o[0],c),I(o[1],c)],{center:p}=B(l,c),f=Ze(u,l.rotation,p,c.canvasOffset),m=ie(["points",h.anchor],f,l);return Ue(m,c)})(t,n,s,i);case"curve":return((o,l,h,c)=>{const u=[I(o[0],c),I(o[1],c)],{center:p}=B(l,c),f=Ze(u,l.rotation,p,c.canvasOffset),m=ie(["points",h.anchor],f,l);return Be(m,c)})(t,n,s,i);case"brush":return((o,l,h,c,u)=>{const{borders:p}=B({...l,scaleX:1,scaleY:1},c),{borders:f}=B(l,c),{borderX:m,borderHeight:w,borderY:k,borderWidth:b}=$e(o,l,h,c,u),L=Math.max(0,p.width-2c.selectionPadding),x=Math.max(0,p.height-2c.selectionPadding),j=Math.max(0,b-2c.selectionPadding),P=Math.max(0,w-2c.selectionPadding),E=L?j/L:1,H=x?P/x:1;if(!L\|\|!x)return l;const T=Pe(m-f.x),C=Pe(k-f.y);return ze({...l,points:l.points.map(V=>V.map(([N,Q])=>[N+T,Q+C])),scaleX:E,scaleY:H},c)})(t,n,s,i,r);case"circle":return((o,l,h,c)=>{const{borderX:u,borderHeight:p,borderY:f,borderWidth:m}=$e(o,l,h,c,!0);return rt({...l,radius:Math.max(0,m/2-c.selectionPadding),x:u+m/2,y:f+p/2},c)})(t,n,s,i);case"ellipse":return((o,l,h,c,u=!1)=>{const{borderX:p,borderHeight:f,borderY:m,borderWidth:w}=$e(o,l,h,c,u);return dt({...l,radiusX:Math.max(0,w/2-c.selectionPadding),radiusY:Math.max(0,f/2-c.selectionPadding),x:p+w/2,y:m+f/2},c)})(t,n,s,i,r);case"rect":case"square":return((o,l,h,c,u=!1)=>{const{borderX:p,borderHeight:f,borderY:m,borderWidth:w}=$e(o,l,h,c,u);return ut({...l,width:Math.max(0,w-2c.selectionPadding),height:Math.max(0,f-2c.selectionPadding),x:p+c.selectionPadding,y:m+c.selectionPadding},c)})(t,n,s,i,a.type==="square"\|\|r);case"text":return((o,l,h,c,u)=>{const{borderX:p,borderHeight:f,borderY:m,borderWidth:w}=$e(l,h,c,u,!0),k=pt({...h,width:Math.max(0,w-2u.selectionPadding),height:Math.max(0,f-2u.selectionPadding),x:p+u.selectionPadding,y:m+u.selectionPadding},u);return{...k,fontSize:Ft(o,k.value,k.width,k.style?.fontBold??!1,k.style?.fontItalic??!1,k.style?.fontFamily)}})(e,t,n,s,i);case"picture":return((o,l,h,c,u)=>{const{borderX:p,borderHeight:f,borderY:m,borderWidth:w}=$e(o,l,h,c,!0);return ht({...l,width:Math.max(0,w-2c.selectionPadding),height:Math.max(0,f-2c.selectionPadding),x:p+c.selectionPadding,y:m+c.selectionPadding},c)})(t,n,s,i);default:return n}},Rt=(e,a,t,n)=>{switch(a.type){case"rect":case"square":return((s,i,r,o)=>ut({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"ellipse":return((s,i,r,o)=>dt({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"circle":return((s,i,r,o)=>rt({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"picture":return((s,i,r,o)=>ht({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"text":return((s,i,r,o)=>pt({...i,x:I(i.x+s[0]-r[0],o),y:I(i.y+s[1]-r[1],o)},o))(e,a,t,n);case"line":return((s,i,r,o)=>ct({...i,points:i.points.map(([l,h])=>[I(l+s[0]-r[0],o),I(h+s[1]-r[1],o)])},o))(e,a,t,n);case"polygon":return((s,i,r,o)=>{const{borders:l}=B(i,o);return Ue({...i,points:i.points.map(([h,c])=>o.gridGap?[h+I(l.x+s[0]-r[0],o)-l.x,c+I(l.y+s[1]-r[1],o)-l.y]:[I(h+s[0]-r[0],o),I(c+s[1]-r[1],o)])},o)})(e,a,t,n);case"curve":return((s,i,r,o)=>{const{borders:l}=B(i,o);return Be({...i,points:i.points.map(([h,c])=>o.gridGap?[h+I(l.x+s[0]-r[0],o)-l.x,c+I(l.y+s[1]-r[1],o)-l.y]:[I(h+s[0]-r[0],o),I(c+s[1]-r[1],o)])},o)})(e,a,t,n);case"brush":return((s,i,r,o)=>{const{borders:l}=B(i,o),h=o.gridGap?I(l.x+s[0]-r[0],o)-l.x:s[0]-r[0],c=o.gridGap?I(l.y+s[1]-r[1],o)-l.y:s[1]-r[1];return ze({...i,points:i.points.map(u=>u.map(([p,f])=>[p+h,f+c]))},o)})(e,a,t,n);default:return a}},Je=(e,a)=>{switch(e.type){case"rect":case"square":return kn(e,a);case"ellipse":return xn(e,a);case"circle":return yn(e,a);case"picture":return jn(e,a);case"text":return Vn(e,a);case"line":return wn(e,a);case"polygon":return Qn(e,a);case"curve":return Sn(e,a);case"brush":return fn(e,a);default:return e}},za=({ctx:e,shape:a,settings:t,selectionWidth:n,selectionColor:s,withAnchors:i=!0})=>{const{center:r}=B(a,t);switch(Vt(e,t,a.rotation,r),a.type){case"rect":case"square":case"circle":case"ellipse":case"picture":case"text":case"brush":((o,l,h,c,u,p)=>{if(l.selection&&(Ae(o,{fillColor:"transparent",strokeColor:h,lineWidth:c/u.canvasSize.scaleRatio}),l.selection.shapePath?o.stroke(l.selection.shapePath):o.stroke(l.selection.border),p&&!l.locked)){l.selection.shapePath&&o.stroke(l.selection.border),o.stroke(l.selection.line),Ae(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/u.canvasSize.scaleRatio});for(const f of l.selection.anchors)o.fill(f),o.stroke(f)}})(e,a,s,n,t,i);break;case"polygon":case"line":case"curve":(({ctx:o,shape:l,withAnchors:h,selectionWidth:c,selectionColor:u,settings:p})=>{if(l.selection&&(Ae(o,{fillColor:"transparent",strokeColor:u,lineWidth:c/p.canvasSize.scaleRatio}),l.selection.shapePath&&o.stroke(l.selection.shapePath),h&&!l.locked)){Ae(o,{fillColor:"rgb(255,255,255)",strokeColor:"rgb(150,150,150)",lineWidth:2/p.canvasSize.scaleRatio});for(const f of l.selection.anchors)o.fill(f),o.stroke(f)}})({ctx:e,shape:a,withAnchors:i,selectionWidth:n,selectionColor:s,settings:t})}e.restore()},Zn=({ctx:e,selectionFrame:a,settings:t})=>{Vt(e,t),((n,s,i)=>{Ae(n,{fillColor:"rgba(170,170,170, 0.1)",strokeColor:"rgb(170,170,170)",lineWidth:1/i.canvasSize.scaleRatio}),n.fillRect(s[0][0],s[0][1],s[1][0]-s[0][0],s[1][1]-s[0][1]),n.strokeRect(s[0][0],s[0][1],s[1][0]-s[0][0],s[1][1]-s[0][1])})(e,a,t),e.restore()},Oa=e=>{const a=new DOMParser().parseFromString(e,"text/xml").getElementsByTagName("svg")[0],t=a.getAttribute("width"),n=a.getAttribute("height");let s;if(t\|\|n)s=e;else{const r=a.getAttribute("viewBox")??"0 0 300 300",[,,o,l]=r.split(" ");a.setAttribute("width",o??it),a.setAttribute("height",l??it),s=new XMLSerializer().serializeToString(a)}const i=new Blob([s],{type:"image/svg+xml"});return URL.createObjectURL(i)},$a=e=>(e instanceof File?e.name:e).includes(".svg"),Ua=e=>$a(e)?fetch(e).then(a=>a.text()).then(a=>Oa(a)):fetch(e).then(a=>a.blob()).then(a=>URL.createObjectURL(a)),Ba=(e,a)=>{const t=document.createElement("a");t.href=e,t.download=a,document.body.appendChild(t),t.click(),document.body.removeChild(t)},En=e=>e.src.includes("<svg")?e.src:(a=>{const t=document.createElement("canvas");t.width=a.width,t.height=a.height;const n=t.getContext("2d");return n?(n.drawImage(a,0,0),t.toDataURL("image/png")):""})(e.img),Ga=(e,a,t,n)=>{const s=document.createElement("canvas");s.width=a,s.height=t;const i=s.getContext("2d");if(!i)return"";i.clearRect(0,0,a,t),ka(i);for(let r=e.length-1;r>=0;r--)Wa(i,e[r],ie(["canvasSize","scaleRatio"],1,n));return s.toDataURL("image/png")},Fn=(e,a,t)=>{return s=Dt(e,a,t),`data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(s))}`;var s},Rn=e=>{const a=["img","id","selection","path","arrows"];return e.map(t=>t.type!=="picture"\|\|t.src.startsWith("http")?kt(a,t):kt(a,{...t,src:En(t)}))},Dt=(e,a,t)=>({shapes:Rn(e),config:{width:a,height:t}}),Xa=(e,a)=>Je({...e,id:te(`${e.type}_`)},a),Dn=(e,a,t)=>{const n=g.useRef([]),s=g.useRef({dataChanged:[]}),[i,r]=g.useState(void 0),[o,l]=g.useState(void 0),[h,c]=g.useState(void 0),[u,p]=g.useState({states:[{shapes:[],selectedShape:void 0,source:"remote"}],cursor:0}),f=u.cursor>0,m=u.cursor<u.states.length-1,w=n.current.length>0,k=g.useCallback(()=>{p(v=>wa(v.states[v.cursor].shapes,n.current)?v:{states:[...v.states.slice(0,v.cursor+1),{shapes:n.current,selectedShape:o,source:"user"}],cursor:v.cursor+1})},[o]),b=g.useCallback(v=>{n.current=[v,...n.current]},[]),L=g.useCallback((v,y,S)=>{if(v.target&&"className"in v.target&&![Sa,ba].includes(v.target.className))return void c(void 0);const F=n.current.find(D=>D.id===o?.id?!!qe(o,S,e):!!Ta(y,D,S,e));c(F)},[e,o]),x=g.useCallback(async(v,y=300,S=300)=>{const F=await Ln(v,y,S,e);return b(F),k(),F},[b,k,e]),j=g.useCallback((v,y=!1)=>{n.current=n.current.map(S=>S.id===o?.id?v:S),l(S=>S?.id===v.id?v:S),y&&k()},[o,k]),P=g.useCallback(v=>{const y=v.map(S=>kt(["chosen"],S));n.current=y,k()},[k]),E=g.useCallback(v=>{l(y=>y?.id===v.id?void 0:y),n.current=n.current.filter(y=>y.id!==v.id),k()},[k]),H=g.useCallback(v=>{p(y=>{const S=v(y);return n.current=y.states[S].shapes,l(y.states[S].selectedShape),ie("cursor",S,y)})},[]),T=g.useCallback(()=>{H(v=>Math.max(0,v.cursor-1))},[H]),C=g.useCallback(()=>{H(v=>Math.min(v.states.length-1,v.cursor+1))},[H]),V=g.useCallback((v,y)=>{l(void 0),n.current=v,p(S=>y.clearHistory?{states:[{shapes:v,selectedShape:void 0,source:y.source}],cursor:0}:{states:[...S.states.slice(0,S.cursor+1),{shapes:v,selectedShape:void 0,source:y.source}],cursor:S.cursor+1})},[]),N=g.useCallback((v,y)=>{const S=n.current,F=S.findIndex($=>$.id===v),D=S.findIndex($=>$.id===y);P(F<D?[...S.slice(0,F),...S.slice(F+1,D+1),S[F],...S.slice(D+1,S.length)]:[...S.slice(0,D),S[F],...S.slice(D,F),...S.slice(F+1,S.length)])},[P]),Q=g.useCallback(v=>{const y=n.current,S=y.findIndex(D=>D.id===v.id);if(S<0)return;const F=ie("visible",v.visible===!1,v);l(D=>D?.id===F.id?F:D),P(ie(S,F,y))},[P]),R=g.useCallback(v=>{const y=n.current,S=y.findIndex(D=>D.id===v.id);if(S<0)return;const F=ie("locked",!v.locked,v);l(D=>D?.id===F.id?F:D),P(ie(S,F,y))},[P]),M=g.useCallback((v,y)=>{Object.hasOwn(s.current,v)&&(s.current[v]=[...s.current[v],y])},[]),A=g.useCallback((v,y)=>{if(Object.hasOwn(s.current,v))if(y){const S=s.current[v].findIndex(F=>F===y);s.current[v]=[...s.current[v].slice(0,S),...s.current[v].slice(S+1)]}else s.current[v]=[]},[]);g.useEffect(()=>{const v=u.states[u.cursor],y=Dt(v.shapes,a,t);for(const S of s.current.dataChanged)S(y,v.source)},[a,t,u]),g.useEffect(()=>{n.current=n.current.map(v=>Je(v,e)),l(v=>v===void 0?void 0:n.current.find(y=>y.id===v.id))},[e]);const Z=g.useCallback((v,y)=>{r(S=>{const F=[S?.[0]??[y[0],y[1]],[y[0],y[1]]],D=n.current.filter($=>((oe,W,z,se)=>{const{selectionPadding:q,canvasOffset:J}=se,{center:he,borders:Ce}=B(W,se),K=Ze(z[0],W.rotation,he,J),G=Ze(z[1],W.rotation,he,J),ve=Math.round(Math.min(K[0],G[0])-q/2),He=Math.round(Math.max(K[0],G[0])+q),we=Math.round(Math.min(K[1],G[1])-q/2),pe={x:ve,y:we,width:He-ve,height:Math.round(Math.max(K[1],G[1])+q)-we},me=Aa(Ce,pe);if(!me)return!1;if(Ce.width<=1\|\|Ce.height<=1\|\|!("path"in W)\|\|!W.path)return!0;if(oe.lineWidth=(W.style?.lineWidth??0)+10,W.type==="brush"){const ae=W.points.flat(),ke=Math.min(...ae.map(re=>re[0])),Ee=Math.min(...ae.map(re=>re[1]));for(const re of W.points){if(re.length<1)break;if(re.length<2){const ge=ue(re[0],ke,Ee,W.scaleX,W.scaleY);if(Ma(me,{x:ge[0],y:ge[1],radius:(W.style?.lineWidth??1)/2}))return!0}for(let ge=0;ge<re.length-1;ge++){const ee=ue(re[ge],ke,Ee,W.scaleX,W.scaleY),Me=ue(re[ge+1],ke,Ee,W.scaleX,W.scaleY),Xe=Aa({x:Math.min(ee[0],Me[0]),y:Math.min(ee[1],Me[1]),width:Math.abs(ee[0]-Me[0]),height:Math.abs(ee[1]-Me[1])},pe);if(Xe){const je=new Path2D;if(je.moveTo(...ee),je.lineTo(...Me),Za({ctx:oe,path:je,rect:Xe,offset:10,checkFill:!1}))return!0}}}return!1}const Te=!(!W.style?.fillColor\|\|W.style?.fillColor==="transparent");return Za({ctx:oe,path:W.path,rect:me,offset:10,checkFill:Te})})(v,$,F,e));return l(D?.[0]),F})},[e]);return{registerEvent:M,unregisterEvent:A,shapesRef:n,selectedShape:o,hoveredShape:h,selectionFrame:i,setSelectionFrame:r,refreshSelectedShapes:Z,addShape:b,addPictureShape:x,moveShapes:N,saveShapes:k,setSelectedShape:l,refreshHoveredShape:L,toggleShapeVisibility:Q,toggleShapeLock:R,removeShape:E,updateShape:j,backwardShape:T,forwardShape:C,clearShapes:V,canGoBackward:f,canGoForward:m,canClear:w}},Ya=(e,a=!1)=>{const t=(s,i)=>{if(Array.isArray(s))return i},n=e.map(s=>{if(typeof s!="object")return null;switch(s.type){case"brush":return fe(t,sa,s);case"circle":return fe(t,ua,s);case"curve":return fe(t,la,s);case"ellipse":return fe(t,ha,s);case"line":return fe(t,oa,s);case"polygon":return fe(t,ra,s);case"rect":return fe(t,da,s);case"square":return fe(t,ca,s);case"text":return fe(t,pa,s)}return null});return Lt(a?[...n,xt]:n)},Nn=(e,a,t,n,s,i,r)=>{let o=!1;if(s){o=qe(s,t,n,!0,i?20:void 0);const h=((c,u,p,f)=>{if(c.mode==="translate")return{mode:"translate",cursorStartPosition:p,originalShape:u};if(c.mode==="rotate"){const{center:m}=B(u,f);return{mode:"rotate",cursorStartPosition:p,originalShape:u,center:[m[0],m[1]]}}return c.mode==="resize"?{mode:"resize",cursorStartPosition:p,originalShape:u,anchor:c.anchor}:void 0})(o\|\|{mode:"default"},s,t,n);if(h?.mode==="resize"\|\|h?.mode==="rotate")return{shape:s,mode:h}}const l=a.find(h=>h.id===s?.id?!!o:!!Ta(e,h,t,n));return l?{shape:l,mode:{mode:"translate",cursorStartPosition:t,originalShape:l}}:{shape:void 0,mode:{mode:r?"selectionFrame":"default"}}},In=({disabled:e=!1,addShape:a,drawCanvasRef:t,setActiveTool:n,refreshHoveredShape:s,shapes:i,selectionMode:r,activeTool:o,isInsideComponent:l,setCanvasOffset:h,selectedShape:c,selectionCanvasRef:u,canvasOffsetStartPosition:p,refreshSelectedShapes:f,setSelectedShape:m,setSelectionFrame:w,setCanvasOffsetStartPosition:k,updateSingleShape:b,saveShapes:L,setSelectionMode:x,settings:j,isShiftPressed:P,withFrameSelection:E})=>{const[H,T]=g.useState({mode:"default"}),{registerDoubleClickEvent:C,unRegisterDoubleClickEvent:V}=(()=>{const Q=g.useRef(void 0),R=g.useRef(void 0),M=A=>{const Z=new Date().getTime();Q.current&&Z<Q.current+300&&R.current?.(A),Q.current=new Date().getTime()};return{registerDoubleClickEvent:(A,Z)=>{R.current=Z,A.addEventListener("click",M),A.addEventListener("touchend",M)},unRegisterDoubleClickEvent:A=>{A.removeEventListener("click",M),A.removeEventListener("touchend",M)}}})();g.useEffect(()=>{const Q=R=>((M,A,Z,v,y,S,F,D,$,oe,W,z,se)=>{const q=A.current?.getContext("2d");if(!q)return;const J=At(M,A.current,z);if(Z.type!=="move"\|\|S===void 0)if(y.mode!=="selectionFrame"){if(Ha(M)\|\|D(M,q,J,z),v!==void 0&&!v.locked)if(y.mode==="default"\|\|y.mode==="textedition")F(qe(v,J,z,!0)\|\|{mode:"default"});else{const he=A.current?.getContext("2d");if(!he)return;$(mn(he,v,J,y,z,se))}}else W(q,J,z);else oe([J[0]-S[0],J[1]-S[1]])})(R,u,o,c,r,p,T,s,b,h,f,j,P);if(l)return document.addEventListener("mousemove",Q),document.addEventListener("touchmove",Q),()=>{document.removeEventListener("mousemove",Q),document.removeEventListener("touchmove",Q)}},[l,u,c,r,p,b,o,h,s,f,j,P]);const{isBrushShapeDoneOnMouseUp:N}=j;return g.useEffect(()=>{const Q=()=>{r.mode!=="textedition"&&r.mode!=="default"&&(r.mode==="brush"&&N&&m(void 0),x({mode:"default"}),w(void 0),L())};return l&&(document.addEventListener("mouseup",Q),document.addEventListener("touchend",Q)),()=>{l&&(document.removeEventListener("mouseup",Q),document.removeEventListener("touchend",Q))}},[l,r,N,L,w,x,m]),g.useEffect(()=>{const Q=u.current;if(!Q)return;const R=Q.getContext("2d");if(!R\|\|e)return;const M=A=>{A.preventDefault();const Z=At(A,u.current,j);if(o.type==="selection"){const{shape:v,mode:y}=Nn(R,i,Z,j,c,Ha(A),E);m(v),x(y),y.mode==="selectionFrame"&&w([[Z[0],Z[1]],[Z[0],Z[1]]])}else if(o.type==="move")k(Z);else if(Qa.some(v=>v===o.type)){const v=t.current?.getContext("2d");if(!v)return;if(o.type==="brush"){if(c?.type==="brush"){const y=((S,F,D)=>{const $={...S,points:ie(S.points.length,[[Math.round(F[0]),Math.round(F[1])]],S.points)};return ze($,D)})(c,Z,j);b(y)}else{const y=Ia(v,o,Z,j);if(!y)return;a(y),m(y)}x({mode:"brush"})}else if(o.type!=="picture"){const y=Ia(v,o,Z,j);a(y),n(be),m(y),x({mode:"resize",cursorStartPosition:[Z[0]+j.selectionPadding,Z[1]+j.selectionPadding],originalShape:y,anchor:o.type==="line"\|\|o.type==="polygon"\|\|o.type==="curve"?0:[1,1]})}}};return Q.addEventListener("mousedown",M,{passive:!1}),Q.addEventListener("touchstart",M,{passive:!1}),()=>{Q.removeEventListener("mousedown",M),Q.removeEventListener("touchstart",M)}},[e,u,t,c,o,k,i,b,a,n,m,x,w,j,E]),g.useEffect(()=>{const Q=u.current;if(Q)return l?(C(Q,R=>{if(o.type==="selection"&&c?.type==="text"){const M=At(R,u.current,j);qe(c,M,j)&&x({mode:"textedition",defaultValue:c.value})}}),()=>{V(Q)}):void 0},[C,V,l,u,o,c,x,j]),{hoverMode:H}},_a=e=>e.childNodes.length?Array.from(e.childNodes).map(a=>_a(a)).join(""):e.nodeValue??"",Wn=({disabled:e=!1,scaleRatio:a,shape:t,defaultValue:n,updateValue:s,saveShapes:i,settings:r})=>{const o=g.useRef(null),l=g.useRef(i);g.useEffect(()=>{if(!o.current)return;const c=o.current,u=p=>{p.preventDefault();const f=p.clipboardData?.getData("text/plain");document.execCommand("insertText",!1,f)};c.addEventListener("paste",u),c.innerText="";for(const p of n){const f=document.createElement("div");p===""?f.innerHTML="<br/>":f.innerText=p,c.appendChild(f)}return c.focus(),()=>{c.removeEventListener("paste",u)}},[n]),g.useEffect(()=>{const c=l.current;return()=>{c()}},[]);const h=g.useMemo(()=>{const{borders:c,center:u}=B(t,r);return le({point:[c.x,c.y],rotation:-t.rotation,origin:u})},[t,r]);return d.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=>{const u=Array.from(c.target.childNodes).map(p=>_a(p));s(u)},style:{"--react-paint-editor-toolbox-edittextbox-transform":`translate3D(${h[0]a}px, ${h[1]a}px, 0) rotate(${Tt(t.rotation)}deg)`,"--react-paint-editor-toolbox-edittextbox-fontsize":t.fontSizea+"px","--react-paint-editor-toolbox-edittextbox-padding":r.selectionPaddinga+"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}})},zn=(e,a,t,n,s)=>{const{canvasSize:{width:i,height:r}}=t;e.clearRect(0,0,i,r),ka(e),t.gridGap&&((o,l,h,c)=>{const{gridGap:u,canvasOffset:p,canvasSize:{scaleRatio:f}}=c;o.strokeStyle="rgb(220,220,220)",o.lineWidth=1,o.save(),o.scale(f,f),o.beginPath();const m=-p[0]%u,w=-p[1]%u,k=Math.ceil(l/f/u),b=Math.ceil(h/f/u);for(let L=0;L<k;L++)o.moveTo(m+(L+1)u,w),o.lineTo(m+(L+1)u,w+h/f);for(let L=0;L<b;L++)o.moveTo(m,w+(L+1)u),o.lineTo(m+l/f,w+(L+1)u);o.stroke(),o.restore()})(e,i,r,t);for(let o=n.length-1;o>=0;o--)a.mode==="textedition"&&n[o]===s\|\|Wa(e,n[o],t)},On=g.forwardRef(({canGrow:e,disabled:a=!1,canvasSize:t,shapes:n,addShape:s,updateSingleShape:i,selectedShape:r,setSelectedShape:o,setSelectionFrame:l,hoveredShape:h,selectionFrame:c,refreshHoveredShape:u,refreshSelectedShapes:p,saveShapes:f,activeTool:m,setActiveTool:w,canvasOffsetStartPosition:k,setCanvasOffsetStartPosition:b,setCanvasOffset:L,isInsideComponent:x,selectionMode:j,setSelectionMode:P,selectionWidth:E,selectionColor:H,settings:T,isEditMode:C,isShiftPressed:V,withFrameSelection:N,withSkeleton:Q},R)=>{const M=g.useRef(null),A=g.useRef(null);g.useImperativeHandle(R,()=>M.current);const{hoverMode:Z}=In({disabled:a,addShape:s,drawCanvasRef:M,setActiveTool:w,shapes:n,selectionMode:j,activeTool:m,isInsideComponent:x,setCanvasOffset:L,selectedShape:r,selectionCanvasRef:A,canvasOffsetStartPosition:k,setSelectedShape:o,setSelectionFrame:l,refreshHoveredShape:u,refreshSelectedShapes:p,setCanvasOffsetStartPosition:b,updateSingleShape:i,saveShapes:f,setSelectionMode:P,isShiftPressed:V,withFrameSelection:N,settings:T}),v=g.useCallback(y=>{if(r?.type!=="text")return;const S=M.current?.getContext("2d");if(!S)return;const F=Je(Pn(S,r,y,T),T);i(F)},[i,r,T]);return g.useEffect(()=>{const y=M.current?.getContext("2d");y&&window.requestAnimationFrame(()=>zn(y,j,T,n,r))},[n,j,r,T]),g.useEffect(()=>{const y=A.current?.getContext("2d");y&&window.requestAnimationFrame(()=>((S,F,D,$,oe,W,z,se,q,J)=>{S.clearRect(0,0,D.canvasSize.width,D.canvasSize.height),J&&se&&se.id!==z?.id&&$.type==="selection"&&F.mode==="default"&&za({ctx:S,shape:se,settings:D,selectionWidth:oe,selectionColor:W,withAnchors:!1}),z&&$.type!=="brush"&&za({ctx:S,shape:z,settings:D,selectionWidth:oe,selectionColor:W,withAnchors:F.mode!=="textedition"}),q&&Zn({ctx:S,selectionFrame:q,settings:D})})(y,j,T,m,E,H,r,h,c,Q))},[h,c,j,r,m,T,E,H,Q]),d.jsx("div",{className:"react-paint-canvas-box",children:d.jsxs("div",{className:"react-paint-canvas-container","data-grow":e,children:[d.jsx("canvas",{className:Sa,ref:M,"data-grow":e,width:t.width,height:t.height}),C&&d.jsx("canvas",{className:ba,ref:A,width:t.width,height:t.height,"data-grow":e,style:{"--react-paint-canvas-cursor":m.type!=="selection"&&m.type!=="move"\|\|Z.mode==="resize"?"crosshair":m.type==="move"\|\|Z.mode==="translate"?"move":Z.mode==="rotate"?"grab":"default"}}),C&&j.mode==="textedition"&&r?.type==="text"&&d.jsx(Wn,{scaleRatio:t.scaleRatio,disabled:a,shape:r,defaultValue:j.defaultValue,updateValue:v,saveShapes:f,settings:T})]})})}),qa="ArrowUp",Ja="ArrowDown",Ka="ArrowLeft",en="ArrowRight",$n="Delete",Un="Backspace",Bn="Escape",tn="Shift",Gn="z",Xn="Z",Yn="y",_n="Y",an="copy",nn="paste",qn=({isInsideComponent:e,selectedShape:a,isEditingText:t,settings:n,setSelectedShape:s,removeShape:i,pasteShape:r,updateShape:o,backwardShape:l,forwardShape:h,setShiftPressed:c})=>{const[u,p]=g.useState(void 0);return g.useEffect(()=>{const f=b=>{a&&(t\|\|(b.preventDefault(),p({...a})))},m=b=>{u&&(t\|\|(b.preventDefault(),r(((L,x)=>({...Rt([20,20],L,[0,0],x),id:te(`${L.type}_`)}))(u,n))))},w=b=>{b.key===tn&&c(!1)},k=b=>{if(b.metaKey\|\|b.ctrlKey){if(b.key===Xn\|\|b.key===Gn)return b.preventDefault(),b.stopPropagation(),void l();if(b.key===_n\|\|b.key===Yn)return b.preventDefault(),b.stopPropagation(),void h()}if(b.key===tn)return void c(!0);if(!a)return;if(b.key===Bn)return void s(void 0);if(t)return;const L={[Ka]:[n.gridGap?-n.gridGap:-1,0],[en]:[n.gridGap?n.gridGap:1,0],[Ja]:[0,n.gridGap?n.gridGap:1],[qa]:[0,n.gridGap?-n.gridGap:-1]};switch(b.key){case Ka:case en:case Ja:case qa:b.preventDefault(),b.stopPropagation(),o(Rt(L[b.key],a,[0,0],n));break;case $n:case Un:b.preventDefault(),b.stopPropagation(),i(a)}};if(e)return document.addEventListener("keydown",k),document.addEventListener("keyup",w),document.addEventListener(an,f),document.addEventListener(nn,m),()=>{document.removeEventListener("keydown",k),document.removeEventListener("keyup",w),document.removeEventListener(an,f),document.removeEventListener(nn,m)}},[e,u,t,a,n,o,i,s,r,l,h,c]),{}},Jn=({isLoading:e=!1})=>{const[a,t]=g.useState("hidden");return g.useEffect(()=>{if(!e){t("fadeOut");const n=setTimeout(()=>t("hidden"),300);return()=>{clearTimeout(n)}}t("visible")},[e]),a==="hidden"?null:d.jsx("div",{className:"react-paint-editor-loading","data-loading":a,style:{"--react-paint-editor-loading-zindex":un,"--react-paint-editor-loading-transition-duration":"300ms"},children:d.jsxs("div",{className:"react-paint-editor-loader",children:[d.jsx("div",{}),d.jsx("div",{}),d.jsx("div",{}),d.jsx("div",{})]})})},Kn="infos",ei=4e3,ti=({type:e,text:a,duration:t})=>{const[n,s]=g.useState(!1);return g.useEffect(()=>{const i=setTimeout(()=>{s(!0)},100),r=setTimeout(()=>{s(!1)},t-500-100);return()=>{clearTimeout(i),clearTimeout(r)}},[t]),d.jsx("div",{className:"react-paint-editor-snackbar","data-is-shown":+n,"data-type":e,style:{"--react-paint-editor-panel-transition-duration":"500ms"},children:a})},ai=({snackbarList:e})=>d.jsx("div",{className:"react-paint-editor-snackbar-container",style:{"--react-paint-editor-snackbar-zindex":hn},children:e.map(a=>d.jsx(ti,{...a},a.id))}),O=g.forwardRef((e,a)=>{if(e.type==="file"\|\|e.type==="color"){const{hidden:c=!1,disabled:u=!1,selected:p=!1,icon:f,children:m,className:w="",title:k,onClick:b,...L}=e;return d.jsxs("label",{className:`react-paint-editor-button ${w}`,title:k,onClick:b,"data-disabled":+u,"data-selected":+p,"data-hidden":+c,children:[d.jsx("input",{ref:a,disabled:u,...L}),d.jsxs("span",{className:"react-paint-editor-button-content",children:[m&&d.jsx("span",{className:"react-paint-editor-button-children",children:m}),f&&d.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:f}})]})]})}const{hidden:t=!1,disabled:n=!1,selected:s=!1,icon:i,children:r,type:o="button",className:l="",...h}=e;return d.jsx("button",{className:`react-paint-editor-button ${l}`,ref:a,disabled:n,"data-disabled":+n,"data-selected":+s,"data-hidden":+t,type:o,...h,children:d.jsxs("span",{className:"react-paint-editor-button-content",children:[r&&d.jsx("span",{className:"react-paint-editor-button-children",children:r}),i&&d.jsx("span",{className:"react-paint-editor-button-icon",dangerouslySetInnerHTML:{__html:i}})]})})}),Ge=({children:e,title:a="",className:t="",position:n="bottom",fitContainer:s=!1,alignment:i="center"})=>d.jsxs("div",{className:`react-paint-editor-panel ${t}`,"data-fitcontainer":s,"data-position":n,"data-alignment":i,style:{"--react-paint-editor-panel-zindex":ia},children:[a&&d.jsx("h3",{className:"react-paint-editor-panel-title",children:a}),e]}),ni=e=>{switch(e){case"brush":return Bt;case"line":return _t;case"polygon":return St;case"curve":return qt;case"rect":case"square":return yt;case"circle":case"ellipse":return Qt;case"text":return Yt;case"picture":return bt;case"triangle":return""}},ii=({disabled:e=!1,shape:a,selected:t,layoutDragging:n,toggleShapeVisibility:s,toggleShapeLock:i,setLayoutDragging:r,handleRemove:o,handleSelect:l,onMoveShapes:h})=>{const c=g.useRef(null),{isOver:u}=(({disabled:p=!1,ref:f,shape:m,layoutDragging:w,setLayoutDragging:k,handleSelect:b,onMoveShapes:L})=>{const[x,j]=g.useState(!1);return g.useEffect(()=>{w\|\|j(!1)},[w]),g.useEffect(()=>{const P=f.current;if(!P)return;const E=()=>{k(void 0)},H=Q=>(Q.preventDefault&&Q.preventDefault(),!1),T=Q=>{b(m),Q.dataTransfer&&(Q.dataTransfer.effectAllowed="move",Q.dataTransfer.setData("draggableShapeId",m.id),k(m.id))},C=()=>{w!==m.id&&j(!0)},V=()=>{j(!1)},N=Q=>(Q.stopPropagation(),Q.dataTransfer&&L(Q.dataTransfer.getData("draggableShapeId"),m.id),!1);return p\|\|(P.addEventListener("dragstart",T),P.addEventListener("dragend",E),P.addEventListener("dragover",H),P.addEventListener("dragenter",C),P.addEventListener("dragleave",V),P.addEventListener("drop",N)),()=>{p\|\|(P.removeEventListener("dragstart",T),P.removeEventListener("dragend",E),P.removeEventListener("dragover",H),P.removeEventListener("dragenter",C),P.removeEventListener("dragleave",V),P.removeEventListener("drop",N))}},[p,f,m,k,b,L,w]),{isOver:x}})({disabled:e,ref:c,shape:a,layoutDragging:n,setLayoutDragging:r,handleSelect:l,onMoveShapes:h});return d.jsxs("div",{className:"react-paint-editor-layout","data-disabled":+e,draggable:!e,"data-is-dragging":+(n===a.id),"data-is-over":+u,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),l(a))},"data-selected":+t,ref:c,children:[d.jsx("span",{dangerouslySetInnerHTML:{__html:ni(a.type)}}),d.jsx("span",{children:a.id}),d.jsx("div",{className:"react-paint-editor-layouts-separator"}),d.jsx(O,{className:"react-paint-editor-layouts-visible-button",title:a.visible?"Hide":"Show","data-visible":a.visible!==!1,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),s(a))},icon:a.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>'}),d.jsx(O,{className:"react-paint-editor-layouts-locked-button",title:a.locked?"Locked":"Unlocked","data-locked":!!a.locked,disabled:e,selected:t,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),i(a))},icon:a.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>'}),d.jsx(O,{className:"react-paint-editor-layouts-remove-button",title:"Remove",disabled:e,onClick:p=>{e\|\|(p.preventDefault(),p.stopPropagation(),o(a))},icon:Gt})]})},si=({gridFormat:e,setGridFormat:a,disabled:t=!1,shapes:n,removeShape:s,toggleShapeVisibility:i,toggleShapeLock:r,selectedShape:o,moveShapes:l,selectShape:h,isLayoutPanelShown:c})=>{const[u,p]=g.useState(void 0);return c?d.jsx(Ge,{alignment:"right",className:"react-paint-editor-layouts-panel",children:d.jsx("div",{className:"react-paint-editor-layouts-panel-content",children:d.jsxs("div",{className:"react-paint-editor-layouts-scrolling-content",children:[d.jsxs("div",{className:"react-paint-editor-layouts-row",children:[d.jsx("span",{className:"react-paint-editor-layouts-subtitle",children:"Grid"}),d.jsx(O,{icon:'<svg><path d="M18.333 15.854 16.583 14.104V13.354H15.833L14.083 11.604H16.583V8.375H13.375V10.896L11.625 9.146V8.375H10.875L9.125 6.625H11.625V3.417H8.396V5.896L6.646 4.146V3.417H5.896L4.146 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417ZM13.375 6.625H16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H13.375ZM16.771 19.229 15.854 18.333H3.417Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V4.125L0.812 3.271L2.042 2.021L18 18ZM13.375 16.583H14.104L13.375 15.833ZM8.396 11.604H9.125L8.396 10.854ZM8.396 16.583H11.625V14.083L10.875 13.354H8.396ZM3.417 6.625H4.167L3.417 5.875ZM3.417 11.604H6.646V9.104L5.917 8.375H3.417ZM6.646 16.583V13.354H3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Z"/></svg>',className:"react-paint-editor-layouts-grid-button",selected:e==="none",disabled:t,onClick:()=>a("none")}),["small","medium","large"].map(f=>d.jsx(O,{className:"react-paint-editor-layouts-grid-button",selected:e===f,disabled:t,onClick:()=>a(f),children:f.charAt(0).toUpperCase()},f))]}),d.jsx("hr",{}),d.jsx("div",{className:"react-paint-editor-layouts",children:n.length===0?d.jsx("div",{className:"react-paint-editor-layouts-placeholder",children:"No layer yet"}):n.map(f=>d.jsx(ii,{shape:f,disabled:t,layoutDragging:u,setLayoutDragging:p,selected:o?.id===f.id,handleSelect:h,handleRemove:s,onMoveShapes:l,toggleShapeVisibility:i,toggleShapeLock:r},f.id))})]})})}):null},Nt=({children:e,onClose:a,position:t="center",className:n=""})=>d.jsxs("div",{className:"react-paint-editor-modal","data-position":t,style:{"--react-paint-editor-modal-zindex":ia},children:[d.jsx("div",{className:"react-paint-editor-modal-mask",onClick:a}),d.jsx("div",{className:`react-paint-editor-modal-panel ${n}`,children:e})]}),gt=({selectedSettings:e,setSelectedSettings:a,title:t="Choisissez une couleur",mode:n="fill",disabled:s=!1,values:i,field:r,value:o="",valueChanged:l})=>{const[h]=g.useState(te("settings_")),c=e===h;return i.length?d.jsxs(d.Fragment,{children:[d.jsx(O,{selected:c,title:t,disabled:s,onClick:()=>{a(u=>u===h?void 0:h)},icon:o==="transparent"?n==="fill"?aa:ta:void 0,children:o!=="transparent"&&d.jsx("div",{className:"react-paint-editor-colorfield-color","data-mode":n,style:{"--react-paint-editor-colorfield-color-value":o}})}),c&&d.jsx(Ge,{title:t,alignment:"left",children:d.jsxs("div",{className:"react-paint-editor-colorfield-wrapper",children:[i.map((u,p)=>d.jsx(O,{title:u,selected:u===o,color:u,icon:u==="transparent"?n==="fill"?aa:ta:void 0,onClick:()=>{l(r,u)},children:u!=="transparent"&&d.jsx("div",{className:"react-paint-editor-colorfield-color",color:u,"data-mode":n,style:{"--react-paint-editor-colorfield-color-value":u}})},u)),d.jsx(O,{type:"color",title:"Custom color",selected:!i.includes(o),value:o,onChange:u=>{const p=+u.target.value;l(r,Number.isNaN(p)?u.target.value:p)},children:d.jsx("div",{className:"react-paint-editor-colorfield-customcolor",style:{"--react-paint-editor-colorfield-color-value":i.includes(o)?"var(--react-paint-editor-app-font-color)":o},children:d.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},oi=({disabled:e=!1,selectedShape:a,removeShape:t})=>d.jsx(O,{title:"Delete",disabled:e,"data-disabled":+e,onClick:()=>{t(a)},icon:Gt}),It=({CustomOption:e,selectedSettings:a,setSelectedSettings:t,title:n="Choisissez l'option",disabled:s=!1,field:i,icon:r,values:o,defaultValue:l,valueChanged:h})=>{const[c]=g.useState(te("settings_")),u=a===c;return o.length?d.jsxs(d.Fragment,{children:[d.jsx(O,{selected:u,title:n,icon:r,disabled:s,onClick:()=>{t(p=>p===c?void 0:c)}}),u&&d.jsx(Ge,{title:n,alignment:"left",fitContainer:!0,children:d.jsx("div",{className:"react-paint-editor-selectfield-wrapper",children:o.map(p=>d.jsx(O,{title:`${p}`,onClick:()=>(f=>{h(i,f)})(p),selected:l===p,style:{"--react-paint-editor-button-padding":"16px"},children:d.jsx(e,{children:p})},p))})})]}):null},ri=({children:e})=>d.jsx("span",{className:"react-paint-editor-fontfamily-option",style:{"--react-paint-editor-fontfamily-family":e},children:e}),sn=({selectedSettings:e,setSelectedSettings:a,disabled:t=!1,values:n,defaultValue:s,valueChanged:i})=>n.length?d.jsx(It,{selectedSettings:e,setSelectedSettings:a,CustomOption:ri,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:i}):null,li=({disabled:e,toggleLayoutPanel:a})=>d.jsx(O,{title:"Toggle layers panel",disabled:e,onClick:a,icon:'<svg><path d="M10 17.646 2.438 11.75 3.875 10.646 10 15.396 16.125 10.646 17.562 11.75ZM10 13.188 2.5 7.354 10 1.521 17.5 7.354Z"/></svg>',className:"react-paint-editor-layout-button"}),di=({children:e})=>d.jsxs("span",{className:"react-paint-editor-linearrow-option","data-type":e,children:[d.jsx("span",{className:"react-paint-editor-linearrow-left"}),d.jsx("span",{className:"react-paint-editor-linearrow-right"})]}),on=({selectedSettings:e,setSelectedSettings:a,disabled:t=!1,values:n,defaultValue:s,valueChanged:i})=>n.length?d.jsx(It,{selectedSettings:e,setSelectedSettings:a,CustomOption:di,title:"Flèches",icon:'<svg><path d="M6 17 2 13 6 9 7.062 10.062 4.875 12.25H17V13.75H4.875L7.062 15.938ZM14 11 12.938 9.938 15.125 7.75H3V6.25H15.125L12.938 4.062L14 3L18 7Z"/></svg>',disabled:t,field:"lineArrow",values:n,defaultValue:s,valueChanged:i}):null,ci=({children:e})=>d.jsxs("span",{className:"react-paint-editor-linetype-option","data-type":e,children:[d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{}),d.jsx("span",{})]}),rn=({selectedSettings:e,setSelectedSettings:a,disabled:t=!1,values:n,defaultValue:s,valueChanged:i})=>n.length?d.jsx(It,{selectedSettings:e,setSelectedSettings:a,CustomOption:ci,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:i}):null,Ke=({selectedSettings:e,setSelectedSettings:a,title:t="Choisissez l'intervalle",icon:n,disabled:s=!1,field:i,value:r=1,min:o=1,max:l=20,step:h=1,unity:c="",valueChanged:u})=>{const p=Math.round(r),[f]=g.useState(te("settings_")),m=g.useRef(null);g.useEffect(()=>()=>{m.current&&clearTimeout(m.current)},[]);const w=e===f;return o===l?null:d.jsxs(d.Fragment,{children:[d.jsx(O,{selected:w,title:t,disabled:s,icon:n,onClick:()=>{a(k=>k===f?void 0:f)}}),w&&d.jsx(Ge,{title:t,alignment:"left",fitContainer:!0,children:d.jsx("div",{children:d.jsxs("label",{className:"react-paint-editor-rangefield",children:[d.jsx("input",{type:"range",min:o,max:l,step:h,value:r,onChange:k=>{const b=+k.target.value;u(i,Number.isNaN(b)?k.target.value:b,!1),m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{u(i,Number.isNaN(b)?k.target.value:b,!0)},1e3)}}),d.jsxs("span",{children:[p,c]})]})})})]})},ln=({selectedSettings:e,setSelectedSettings:a,disabled:t=!1,min:n,max:s,step:i,value:r,valueChanged:o})=>n===s?null:d.jsx(Ke,{selectedSettings:e,setSelectedSettings:a,icon:St,title:"Nombre de points",disabled:t,field:"pointsCount",min:n,max:s,step:i,unity:"",value:r,valueChanged:o}),ft=({setSelectedSettings:e,disabled:a=!1,field:t,icon:n,values:s,value:i=!1,valueChanged:r})=>{const[o]=g.useState(te("settings_"));return s.length!==2?null:d.jsx(O,{onClick:()=>{e(l=>l===o?void 0:o),r(t,!i)},selected:i,disabled:a,icon:n})},Wt=({activeTool:e,selectedShape:a,selectedShapeTool:t,disabled:n,selectedSettings:s,setSelectedSettings:i,handleShapeStyleChange:r,handlePolygonLinesCount:o,handleShapeFontFamilyChange:l})=>a?d.jsx(d.Fragment,{children:t&&d.jsxs(d.Fragment,{children:["strokeColor"in t.settings&&!t.settings.strokeColor.hidden&&d.jsx(gt,{selectedSettings:s,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:a.style?.strokeColor,valueChanged:r,values:t.settings.strokeColor.values}),"fillColor"in t.settings&&!t.settings.fillColor.hidden&&d.jsx(gt,{selectedSettings:s,setSelectedSettings:i,title:"Couleur de fond",disabled:n,field:"fillColor",value:a.style?.fillColor,valueChanged:r,values:t.settings.fillColor.values}),"lineWidth"in t.settings&&!t.settings.lineWidth.hidden&&d.jsx(Ke,{selectedSettings:s,setSelectedSettings:i,title:"Epaisseur du trait",icon:ea,disabled:n,field:"lineWidth",value:a.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&&!t.settings.lineDash.hidden&&d.jsx(rn,{selectedSettings:s,setSelectedSettings:i,disabled:n,defaultValue:a.style?.lineDash,valueChanged:r,values:t.settings.lineDash.values}),"lineArrow"in t.settings&&!t.settings.lineArrow.hidden&&d.jsx(on,{selectedSettings:s,setSelectedSettings:i,disabled:n,defaultValue:a.style?.lineArrow,valueChanged:r,values:t.settings.lineArrow.values}),"pointsCount"in t.settings&&!t.settings.pointsCount.hidden&&d.jsx(ln,{selectedSettings:s,setSelectedSettings:i,disabled:n,valueChanged:o,min:t.settings.pointsCount.min,max:t.settings.pointsCount.max,step:t.settings.pointsCount.step,value:a.style?.pointsCount}),"fontFamily"in t.settings&&!t.settings.fontFamily.hidden&&d.jsx(sn,{selectedSettings:s,setSelectedSettings:i,disabled:n,valueChanged:l,values:t.settings.fontFamily.values,defaultValue:a.style?.fontFamily}),"fontBold"in t.settings&&!t.settings.fontBold.hidden&&d.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontBold",icon:Jt,valueChanged:l,values:t.settings.fontBold.values,value:a.style?.fontBold}),"fontItalic"in t.settings&&!t.settings.fontItalic.hidden&&d.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontItalic",icon:Kt,valueChanged:l,values:t.settings.fontItalic.values,value:a.style?.fontItalic}),"opacity"in t.settings&&!t.settings.opacity.hidden&&d.jsx(Ke,{selectedSettings:s,setSelectedSettings:i,title:"Opacité",icon:Xt,min:t.settings.opacity.min,max:t.settings.opacity.max,step:t.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:a.style?.opacity??100,valueChanged:r})]})}):"settings"in e?d.jsxs(d.Fragment,{children:["strokeColor"in e.settings&&!e.settings.strokeColor.hidden&&d.jsx(gt,{selectedSettings:s,setSelectedSettings:i,title:"Couleur du trait",mode:"stroke",disabled:n,field:"strokeColor",value:e.settings.strokeColor.default,valueChanged:r,values:e.settings.strokeColor.values}),"fillColor"in e.settings&&!e.settings.fillColor.hidden&&d.jsx(gt,{selectedSettings:s,setSelectedSettings:i,title:"Couleur de fond",disabled:n,field:"fillColor",value:e.settings.fillColor.default,valueChanged:r,values:e.settings.fillColor.values}),"lineWidth"in e.settings&&!e.settings.lineWidth.hidden&&d.jsx(Ke,{selectedSettings:s,setSelectedSettings:i,title:"Epaisseur du trait",disabled:n,field:"lineWidth",icon:ea,value:e.settings.lineWidth.default,valueChanged:r,unity:"px",min:e.settings.lineWidth.min,max:e.settings.lineWidth.max,step:e.settings.lineWidth.step}),"lineDash"in e.settings&&!e.settings.lineDash.hidden&&d.jsx(rn,{selectedSettings:s,setSelectedSettings:i,disabled:n,defaultValue:e.settings.lineDash.default,valueChanged:r,values:e.settings.lineDash.values}),"lineArrow"in e.settings&&!e.settings.lineArrow.hidden&&d.jsx(on,{selectedSettings:s,setSelectedSettings:i,disabled:n,defaultValue:e.settings.lineArrow.default,valueChanged:r,values:e.settings.lineArrow.values}),"pointsCount"in e.settings&&!e.settings.pointsCount.hidden&&d.jsx(ln,{selectedSettings:s,setSelectedSettings:i,disabled:n,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&&!e.settings.fontFamily.hidden&&d.jsx(sn,{selectedSettings:s,setSelectedSettings:i,disabled:n,valueChanged:l,values:e.settings.fontFamily.values,defaultValue:e.settings.fontFamily.default}),"fontBold"in e.settings&&!e.settings.fontBold.hidden&&d.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontBold",icon:Jt,valueChanged:l,values:e.settings.fontBold.values,value:e.settings.fontBold.default}),"fontItalic"in e.settings&&!e.settings.fontItalic.hidden&&d.jsx(ft,{setSelectedSettings:i,disabled:n,field:"fontItalic",icon:Kt,valueChanged:l,values:e.settings.fontItalic.values,value:e.settings.fontItalic.default}),"opacity"in e.settings&&!e.settings.opacity.hidden&&d.jsx(Ke,{selectedSettings:s,setSelectedSettings:i,title:"Opacité",icon:Xt,min:e.settings.opacity.min,max:e.settings.opacity.max,step:e.settings.opacity.step,unity:"%",disabled:n,field:"opacity",value:e.settings.opacity.default,valueChanged:r})]}):null,ui=({width:e,disabled:a=!1,availableTools:t,updateToolSettings:n,layersManipulation:s,toggleLayoutPanel:i,activeTool:r,selectedShape:o,canvas:l,settings:h,updateShape:c,removeShape:u})=>{const[p,f]=g.useState(void 0),[m,w]=g.useState(!1),k=()=>{w(H=>!H)},b=o?t.find(H=>H.id===o.toolId)\|\|t.find(H=>H.type===o.type):void 0,L=(b?Object.keys(b.settings).length+1:"settings"in r?Object.keys(r.settings).length:0)+(s?1:0),x=e<40L,j=(H,T,C=!0)=>{o?(c(Je(ie(["style",H],T,o),h),C),b&&n(b.id,H,T)):n(r.id,H,T)},P=(H,T)=>{if(o){if(o.type!=="text")return;const C=l?.getContext("2d");if(!C)return;const V=ie(["style",H],T,o),N=Ft(C,V.value,V.width,V.style?.fontBold??!1,V.style?.fontItalic??!1,V.style?.fontFamily),Q=Je({...V,fontSize:N,height:NV.value.length},h);c(Q,!0),b&&n(b.id,H,T)}else n(r.id,H,T)},E=(H,T)=>{if(o){if(o.type!=="polygon"&&o.type!=="curve")return;c(o.type==="polygon"?((C,V,N)=>{const Q=C.points.length;if(Q===V)return C;if(Q>V){const Z=C.points.slice(0,V);return Ue({...C,points:Z,style:{...C.style,pointsCount:Z.length}},N)}const R=V-Q,M=new Array(R).fill(void 0).map((Z,v)=>[C.points[0][0]+(C.points[1][0]-C.points[0][0])(v+1)/(R+1),C.points[0][1]+(C.points[1][1]-C.points[0][1])(v+1)/(R+1)]),A=[C.points[0],...M,...C.points.slice(1,C.points.length)];return Ue({...C,points:A,style:{...C.style,pointsCount:A.length}},N)})(o,T,h):((C,V,N)=>{const Q=C.points.length;if(Q===V)return C;if(Q>V){const Z=C.points.slice(0,V);return Be({...C,points:Z,style:{...C.style,pointsCount:Z.length}},N)}const R=V-Q,M=new Array(R).fill(void 0).map((Z,v)=>[C.points[0][0]+(C.points[1][0]-C.points[0][0])(v+1)/(R+1),C.points[0][1]+(C.points[1][1]-C.points[0][1])(v+1)/(R+1)]),A=[C.points[0],...M,...C.points.slice(1,C.points.length)];return Be({...C,points:A,style:{...C.style,pointsCount:A.length}},N)})(o,T,h),!0),b&&n(b.id,H,T)}else n(r.id,H,T)};return d.jsxs(d.Fragment,{children:[d.jsxs("div",{className:"react-paint-editor-settings-bar",children:[d.jsxs("div",{className:"react-paint-editor-settings-shrinkable",children:[x&&L>2&&d.jsx(O,{disabled:a,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?d.jsx(d.Fragment,{children:b&&d.jsxs(d.Fragment,{children:[!x&&d.jsx(Wt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:a,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P}),r.type==="selection"&&d.jsx(oi,{disabled:a,selectedShape:o,removeShape:u})]})}):!x&&d.jsx(Wt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:a,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P})]}),d.jsx("div",{className:"react-paint-editor-settings-separator"}),s&&d.jsx(li,{disabled:a,toggleLayoutPanel:i})]}),m&&d.jsx(Nt,{className:"react-paint-editor-settings-modal",onClose:k,position:"bottom",children:d.jsx(Wt,{activeTool:r,selectedShape:o,selectedShapeTool:b,disabled:a,selectedSettings:p,setSelectedSettings:f,handleShapeStyleChange:j,handlePolygonLinesCount:E,handleShapeFontFamilyChange:P})})]})},dn=({disabled:e=!1,withText:a=!1,loadFile:t,type:n,img:s,accept:i})=>{const r=g.useRef(null);return d.jsx(O,{ref:r,type:"file",onClick:o=>{o.stopPropagation(),r.current&&(r.current.value="")},onChange:o=>{const l=o.target.files?.item(0);l&&t(l)},accept:i,title:n.label??n.type,icon:s,disabled:e,children:a?n.label:void 0})},de=({type:e,img:a,isActive:t,withText:n=!1,disabled:s=!1,setActive:i})=>d.jsx(O,{disabled:s,selected:t,onClick:()=>{i(e)},title:e.label??e.type,icon:a,children:n?e.label:void 0}),hi=({activeTool:e,withActionsInMenu:a,hasActionToUndo:t=!1,hasActionToRedo:n=!1,hasActionToClear:s=!1,undoAction:i,redoAction:r,clearCanvas:o,alignment:l,group:h,vertical:c=!1,disabled:u=!1,withLoadAndSave:p,withExport:f,addPicture:m,loadFile:w,togglePictureUrlModal:k,saveFile:b,exportCanvasInFile:L,withUploadPicture:x,withUrlPicture:j})=>{const[P,E]=g.useState(!1),[,H]=g.useTransition(),T=h?.tools?.some(V=>V===e.type),C=(T?e.icon:h.img)??h.title;return g.useEffect(()=>{if(!P)return;const V=()=>{E(!1)};return document.addEventListener("click",V),()=>{document.removeEventListener("click",V)}},[P]),a\|\|x\|\|j\|\|p\|\|f?d.jsxs("div",{className:"react-paint-editor-toolbox-relative",children:[d.jsx(O,{selected:T,title:h.title,disabled:u,onClick:()=>{H(()=>{E(!0)})},icon:C}),P&&d.jsx(Ge,{alignment:l,position:"top",children:d.jsxs("div",{className:"react-paint-editor-toolbox-panel-content","data-vertical":+c,children:[a&&d.jsxs(d.Fragment,{children:[d.jsx(de,{withText:!0,type:Ne,disabled:u\|\|!t,img:Ne.icon,isActive:e.id===Ne.id,setActive:i}),d.jsx(de,{withText:!0,type:Ie,disabled:u\|\|!n,img:Ie.icon,isActive:e.id===Ie.id,setActive:r}),d.jsx(de,{withText:!0,type:We,disabled:u\|\|!s,img:We.icon,isActive:e.id===We.id,setActive:o}),(x\|\|j\|\|p)&&d.jsx("hr",{})]}),x&&d.jsx(dn,{withText:!0,type:fa,disabled:u,loadFile:async V=>{E(!1),await m(V)},img:fa.icon,accept:"image/png, image/gif, image/jpeg, image/svg+xml"}),j&&d.jsx(O,{disabled:u,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&&d.jsx("hr",{}),p&&d.jsxs(d.Fragment,{children:[d.jsx(dn,{withText:!0,type:ga,disabled:u,loadFile:V=>{E(!1),w(V)},img:ga.icon,accept:"application/JSON"}),d.jsx(de,{withText:!0,disabled:u,type:wt,img:wt.icon,isActive:e.id===wt.id,setActive:b})]}),f&&d.jsx(de,{withText:!0,disabled:u,type:Ct,img:Ct.icon,isActive:e.id===Ct.id,setActive:L})]})})]}):null},pi=({togglePictureUrlModal:e,addPicture:a})=>{const t=g.useRef(null);return g.useEffect(()=>{t.current&&t.current.focus()},[]),d.jsx(Nt,{className:"react-paint-editor-toolbox-pictureinput-modal",onClose:e,children:d.jsxs("form",{onSubmit:async n=>{n.preventDefault();const s=t.current?.value;s&&(await a(s),e())},children:[d.jsxs("label",{children:["URL ",d.jsx("input",{type:"text",ref:t})]}),d.jsx(O,{onClick:e,children:"Annuler"}),d.jsx(O,{type:"submit",selected:!0,children:"Ajouter"})]})})},gi=({activeTool:e,alignment:a,group:t,disabled:n=!1,setActiveToolFromId:s})=>{const i=g.useRef(null),[r,o]=g.useState(!1),[,l]=g.useTransition(),[h,c]=g.useState(void 0),u=m=>{c(m),s(m.id)};if(g.useEffect(()=>{if(!r)return;const m=w=>{!Ca(w,i.current)&&o(!1)};return document.addEventListener("mousedown",m,{passive:!1}),document.addEventListener("touchstart",m,{passive:!1}),()=>{document.removeEventListener("mousedown",m),document.removeEventListener("touchstart",m)}},[r]),"type"in t)return d.jsx(de,{disabled:n,type:t,img:t.icon,isActive:e.id===t.id,setActive:u});if(!t.toolsType.length)return null;if(t.toolsType?.length===1)return d.jsx(de,{disabled:n,type:t.toolsType[0],img:t.toolsType[0].icon,isActive:e.id===t.toolsType[0].id,setActive:u});const p=t?.toolsType.find(m=>m.type===e.type)!==void 0,f=(h?h.icon:t.toolsType?.[0]?.icon)??t.title;return d.jsxs("div",{className:"react-paint-editor-toolbargroup-relative",children:[d.jsx(O,{selected:p,title:t.title,disabled:n,onClick:()=>{h?s(h.id):t.toolsType?.[0]&&u(t.toolsType[0]),l(()=>{o(!0)})},icon:f}),r&&d.jsx(Ge,{alignment:a,position:"top",children:d.jsx("div",{className:"react-paint-editor-toolbargroup-panel-content","data-vertical":+t.vertical,ref:i,children:t.toolsType.map((m,w)=>d.jsx(de,{disabled:n,type:m,img:m.icon,isActive:e.id===m.id,setActive:u},m.id))})})]})},fi=[{title:"brush",toolsType:["brush"],vertical:!1},{title:"lines",toolsType:["line","curve","polygon"],vertical:!1},{title:"shapes",toolsType:["rect","square","circle","ellipse"],vertical:!1},"text"],vi=({width:e,disabled:a=!1,activeTool:t,hasActionToUndo:n=!1,hasActionToRedo:s=!1,hasActionToClear:i=!1,withLoadAndSave:r,withExport:o,clearCanvas:l,setActiveTool:h,undoAction:c,redoAction:u,addPicture:p,loadFile:f,saveFile:m,exportCanvasInFile:w,availableTools:k,withUrlPicture:b,withUploadPicture:L})=>{const x=((M,A)=>{const Z=A.flatMap(v=>{if(typeof v!="object")return M.filter(S=>S.type===v);const y=M.filter(S=>v.toolsType.includes(S.type));return y?{...v,toolsType:y}:null});return Lt(Z)})(k,fi),j=e<40(5+x.length),P=e<40(2+x.length),[E,H]=g.useState(!1),[T,C]=g.useState(!1),V=()=>{H(M=>!M)},N=M=>{h(M),H(!1)},Q=M=>{N(k.find(A=>A.id===M)??t)},R=k.find(M=>M.type===t.type)!==void 0;return d.jsxs(d.Fragment,{children:[d.jsxs("div",{className:"react-paint-editor-toolbar-toolbox",children:[d.jsxs("div",{className:"react-paint-editor-toolbar-shrinkable",children:[d.jsx(de,{type:be,disabled:a,img:be.icon,isActive:t.id===be.id,setActive:N}),P?d.jsx(O,{disabled:a,onClick:V,title:"Toggle tools",icon:'<svg><path d="M5.333 9.292 10.021 1.646 14.708 9.292ZM14.562 18.333Q13 18.333 11.896 17.229Q10.792 16.125 10.792 14.562Q10.792 13 11.896 11.896Q13 10.792 14.562 10.792Q16.125 10.792 17.229 11.896Q18.333 13 18.333 14.562Q18.333 16.125 17.229 17.229Q16.125 18.333 14.562 18.333ZM2.5 17.917V11.188H9.229V17.917ZM14.562 16.583Q15.438 16.583 16.01 16.01Q16.583 15.438 16.583 14.562Q16.583 13.688 16.01 13.115Q15.438 12.542 14.562 12.542Q13.688 12.542 13.115 13.115Q12.542 13.688 12.542 14.562Q12.542 15.438 13.115 16.01Q13.688 16.583 14.562 16.583ZM4.25 16.167H7.479V12.938H4.25ZM8.458 7.542H11.583L10.021 5ZM10.021 7.542ZM7.479 12.938ZM14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Z"/></svg>',selected:R}):x.map((M,A)=>d.jsx(gi,{disabled:a,activeTool:t,group:M,setActiveToolFromId:Q},"id"in M?M.id:M.title))]}),!j&&d.jsxs(d.Fragment,{children:[d.jsx(de,{type:Ne,disabled:a\|\|!n,img:Ne.icon,isActive:t.id===Ne.id,setActive:c}),d.jsx(de,{type:Ie,disabled:a\|\|!s,img:Ie.icon,isActive:t.id===Ie.id,setActive:u}),d.jsx(de,{type:We,disabled:a\|\|!i,img:We.icon,isActive:t.id===We.id,setActive:l})]}),d.jsx(hi,{withActionsInMenu:j,disabled:a,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:m,togglePictureUrlModal:()=>{C(!0)},exportCanvasInFile:w,withUploadPicture:L,withUrlPicture:b,withLoadAndSave:r,withExport:o,hasActionToUndo:n,hasActionToRedo:s,hasActionToClear:i,undoAction:c,redoAction:u,clearCanvas:l})]}),E&&d.jsx(Nt,{className:"react-paint-editor-toolbar-modal",onClose:V,children:k.map((M,A)=>M.type==="picture"?null:d.jsx(de,{disabled:a,type:M,img:M.icon,withText:!1,isActive:t.id===M.id,setActive:N},M.id))}),T&&d.jsx(pi,{togglePictureUrlModal:()=>{C(M=>!M)},addPicture:p})]})},vt={none:0,small:10,medium:20,large:40},mi={toolbarBackgroundColor:"white",dividerColor:"#36418129",fontRadius:8,fontDisabledColor:"#3641812b",fontDisabledBackgroundColor:"transparent",fontColor:"#364181",fontBackgroundColor:"transparent",fontSelectedColor:"white",fontSelectedBackgroundColor:"#364181",fontHoverColor:"#364181",fontHoverBackgroundColor:"#afd8d8"},yi=()=>{const e=g.useRef([]),[a,t]=g.useState([]);return g.useEffect(()=>()=>{for(const n of e.current)clearTimeout(n)},[]),{snackbarList:a,addSnackbar:({type:n=Kn,duration:s=ei,text:i})=>{const r={id:te("snackbar_"),duration:s,type:n,text:i};t(o=>[...o,r]),e.current=[...e.current,setTimeout(()=>{return o=r.id,void t(l=>l.filter(h=>h.id!==o));var o},s)]}}};Se.Canvas=({options:e,className:a,style:t,canvasProps:n})=>{const{shapesRef:s,selectedShape:i,selectionFrame:r,hoveredShape:o,addShape:l,setSelectedShape:h,setSelectionFrame:c,refreshSelectedShapes:u,refreshHoveredShape:p,removeShape:f,updateShape:m,backwardShape:w,forwardShape:k,saveShapes:b,refs:L,width:x,height:j,settings:P,canvasSize:E,setCanvasSize:H,setCanvasOffset:T,selectShape:C,activeTool:V,setActiveTool:N,isInsideComponent:Q,isEditMode:R,isDisabled:M,canvas:{withSkeleton:A,withFrameSelection:Z,canGrow:v,canShrink:y}}=n,{canvasBackgroundColor:S,canvasSelectionColor:F,canvasSelectionWidth:D}={...pn,...e},$=g.useRef(null),[oe,W]=g.useState(void 0),[z,se]=g.useState({mode:"default"}),[q,J]=g.useState(!1),he=g.useCallback(K=>{l(K),C(K)},[l,C]),Ce=g.useCallback(K=>{const G=K/x;H({width:K,height:jG,scaleRatio:G})},[x,j,H]);return qn({isInsideComponent:Q,isEditingText:z.mode==="textedition",settings:P,selectedShape:i,setSelectedShape:h,removeShape:f,pasteShape:he,updateShape:m,backwardShape:w,forwardShape:k,setShiftPressed:J}),(({onResized:K,element:G})=>{g.useEffect(()=>{const ve=G.current;if(!ve)return;const He=new ResizeObserver(we=>{const pe=we?.[0]?.borderBoxSize?.[0],{width:me,height:Te}=pe?{width:pe.inlineSize,height:pe.blockSize}:we?.[0].contentRect??{};K(me,Te)});return He.observe(ve),()=>{He.unobserve(ve)}},[G,K])})({element:$,onResized:Ce}),d.jsx("div",{ref:$,className:"react-paint-app-row"+(a?` ${a}`:""),"data-grow":v,"data-shrink":y,style:{"--react-paint-app-row-width":E.width,"--react-paint-app-canvaswidth":`${x}px`,"--react-paint-app-row-aspectratio":`calc(${E.width} / ${E.height})`,"--react-paint-app-canvas-bg":S,...t},children:d.jsx(On,{ref:L.canvas,canGrow:v,disabled:M,isInsideComponent:Q,activeTool:V,setActiveTool:N,canvasOffsetStartPosition:oe,setCanvasOffsetStartPosition:W,shapes:s.current,addShape:l,updateSingleShape:m,selectedShape:i,selectionFrame:r,setSelectedShape:h,setSelectionFrame:c,hoveredShape:o,refreshHoveredShape:p,refreshSelectedShapes:u,settings:P,setCanvasOffset:T,saveShapes:b,canvasSize:E,selectionMode:z,setSelectionMode:se,selectionColor:F,selectionWidth:D,isEditMode:R,isShiftPressed:q,withFrameSelection:Z,withSkeleton:A})})},Se.Editor=({editorProps:e,className:a,style:t,options:n,children:s})=>{const{shapesRef:i,addPictureShape:r,moveShapes:o,toggleShapeVisibility:l,toggleShapeLock:h,canGoBackward:c,canGoForward:u,canClear:p,selectedShape:f,removeShape:m,updateShape:w,backwardShape:k,forwardShape:b,refs:L,width:x,height:j,canvasSize:P,selectTool:E,selectShape:H,activeTool:T,setActiveTool:C,setAvailableTools:V,isEditMode:N,isDisabled:Q,availableTools:R,gridGap:M,setGridGap:A,loadFile:Z,exportPicture:v,exportData:y,clearCanvas:S,settings:F,canvas:{canGrow:D,layersManipulation:$,withExport:oe,withLoadAndSave:W,withUploadPicture:z,withUrlPicture:se}}=e,{toolbarBackgroundColor:q,dividerColor:J,fontRadius:he,fontDisabledColor:Ce,fontDisabledBackgroundColor:K,fontColor:G,fontBackgroundColor:ve,fontSelectedColor:He,fontSelectedBackgroundColor:we,fontHoverColor:pe,fontHoverBackgroundColor:me}={...mi,...n},[Te,ae]=g.useState(!1),[ke,Ee]=g.useState(!1),re=M>=vt.large?"large":M>=vt.medium?"medium":M>=vt.small?"small":"none",{snackbarList:ge,addSnackbar:ee}=yi(),Me=g.useCallback((Y,_,et)=>{V(Fe=>Fe.map(tt=>tt.id===Y?ie(["settings",_,"default"],et,tt):tt)),C(Fe=>Fe.id===Y?ie(["settings",_,"default"],et,Fe):Fe)},[C,V]),Xe=g.useCallback(()=>{E(be),k()},[E,k]),je=g.useCallback(()=>{E(be),b()},[E,b]),Ye=g.useCallback(()=>{ae(!0);try{v(),ae(!1)}catch(Y){Y instanceof Error&&ee({type:"error",text:"L'export a échoué"}),console.warn(Y)}finally{ae(!1)}},[v,ee]),mt=g.useCallback(()=>{ae(!0);try{y(),ae(!1)}catch(Y){Y instanceof Error&&ee({type:"error",text:"L'enregistrement a échoué"}),console.warn(Y)}finally{ae(!1)}},[y,ee]),zt=g.useCallback(async Y=>{ae(!0);try{await Z(Y),ee({type:"success",text:"Fichier chargé !"})}catch(_){_ instanceof Error&&ee({type:"error",text:"Le chargement a échoué"}),console.warn(_)}finally{ae(!1)}},[Z,ee]),Ot=g.useCallback(async Y=>{ae(!0);try{const _=await r(Y,x,j);H(_)}catch(_){_ instanceof Error&&ee({type:"error",text:"Le chargement a échoué"}),console.warn(_)}finally{ae(!1)}},[r,H,ee,x,j]),$t=`${a?`${a} `:""}${ke?"react-paint-editor-layout-opened ":""}react-paint-editor-app`;return d.jsxs("div",{ref:L.setEditor,className:$t,style:{"--react-paint-editor-app-maxWidth":D?"100%":`${x}px`,"--react-paint-editor-app-toolbar-bg":q,"--react-paint-editor-app-divider-color":J,"--react-paint-editor-app-font-radius":he,"--react-paint-editor-app-font-disabled-color":Ce,"--react-paint-editor-app-font-disabled-bg":K,"--react-paint-editor-app-font-color":G,"--react-paint-editor-app-font-bg":ve,"--react-paint-editor-app-font-selected-color":He,"--react-paint-editor-app-font-selected-bg":we,"--react-paint-editor-app-font-hover-color":pe,"--react-paint-editor-app-font-hover-bg":me,...t},children:[N&&d.jsx(vi,{width:P.width,disabled:Q,activeTool:T,clearCanvas:S,setActiveTool:E,exportCanvasInFile:Ye,saveFile:mt,loadFile:zt,addPicture:Ot,hasActionToUndo:c,hasActionToRedo:u,hasActionToClear:p,undoAction:Xe,redoAction:je,availableTools:R,withExport:oe,withLoadAndSave:W,withUploadPicture:z,withUrlPicture:se}),s,N&&$&&d.jsx(si,{gridFormat:re,setGridFormat:Y=>{A(vt[Y])},disabled:Q,shapes:i.current,moveShapes:o,selectedShape:f,removeShape:m,selectShape:H,toggleShapeVisibility:l,toggleShapeLock:h,isLayoutPanelShown:ke}),N&&d.jsxs(d.Fragment,{children:[d.jsx(ui,{width:P.width,disabled:Q,activeTool:T,availableTools:R,selectedShape:f,settings:F,removeShape:m,updateShape:w,canvas:L.canvas.current,layersManipulation:$,toggleLayoutPanel:()=>{Ee(Y=>!Y)},updateToolSettings:Me}),d.jsx(Jn,{isLoading:Te}),d.jsx(ai,{snackbarList:ge})]})]})},Se.useReactPaint=({width:e=1e3,height:a=600,shapes:t,mode:n="editor",disabled:s=!1,options:i=xa})=>{const{layersManipulation:r,brushAlgo:o,isBrushShapeDoneOnMouseUp:l,grid:h,canGrow:c,canShrink:u,withExport:p,withLoadAndSave:f,withUploadPicture:m,withUrlPicture:w,withSkeleton:k,withFrameSelection:b,clearCallback:L,availableTools:x,canvasSelectionPadding:j}={...xa,...i},P=n!=="viewer",E=s\|\|!P,H=g.useRef(null),T=g.useRef(null),C=g.useRef(!1),V=g.useCallback(U=>{H.current=U},[]),[N,Q]=g.useState(be),[R,M]=g.useState(h),[A,Z]=g.useState({width:e,height:a,scaleRatio:1}),[v,y]=g.useState([0,0]),S=g.useMemo(()=>({brushAlgo:o,isBrushShapeDoneOnMouseUp:l,canvasSize:A,canvasOffset:v,gridGap:R,selectionPadding:j}),[j,R,o,l,v,A]),[F,D]=g.useState(Ya(x,m\|\|w)),{isInsideComponent:$}=(({disabled:U,componentRef:ye})=>{const[at,Re]=g.useState(!1);return g.useEffect(()=>{if(!U){const Le=De=>{Re(Ca(De,ye.current))};return document.addEventListener("mousedown",Le,{passive:!0}),document.addEventListener("touchstart",Le,{passive:!0}),()=>{document.removeEventListener("mousedown",Le),document.removeEventListener("touchstart",Le)}}Re(!1)},[U,ye]),{isInsideComponent:at}})({disabled:E,componentRef:H}),{registerEvent:oe,unregisterEvent:W,shapesRef:z,selectedShape:se,selectionFrame:q,hoveredShape:J,addShape:he,addPictureShape:Ce,moveShapes:K,setSelectedShape:G,setSelectionFrame:ve,refreshSelectedShapes:He,refreshHoveredShape:we,removeShape:pe,updateShape:me,backwardShape:Te,forwardShape:ae,clearShapes:ke,saveShapes:Ee,toggleShapeVisibility:re,toggleShapeLock:ge,canGoBackward:ee,canGoForward:Me,canClear:Xe}=Dn(S,e,a),je=g.useCallback(U=>{G(void 0),Q(U)},[G]),Ye=g.useCallback((U,ye)=>{ke(U,ye),je(be),y([0,0])},[je,ke]),mt=g.useCallback(U=>{Q(be),G(U)},[G]),zt=g.useCallback(()=>{const U=Fn(z.current,e,a);if(!U)throw new Error("L'encodage a échoué");Ba(U,"drawing.json")},[z,e,a]),Ot=g.useCallback(()=>{const U=Ga(z.current,e,a,S);if(!U)throw new Error;Ba(U,"drawing.png")},[z,e,a,S]),$t=g.useCallback(()=>T.current?Ga(z.current,e,a,S):void 0,[z,e,a,S]),Y=g.useCallback(()=>Dt(z.current,e,a),[z,e,a]);g.useEffect(()=>{$\|\|G(void 0)},[$,G]);const _=g.useCallback(async(U,ye)=>{const at=await(async(Re,Le)=>{if(!Re)return[];const De=[],Ut=Lt(Re.map(ce=>{if(!ce\|\|!Qa.includes(ce.type))return null;if(ce.type==="picture"){const Qe=new Image,Si=new Promise((nt,bi)=>{Qe.onload=()=>{URL.revokeObjectURL(Qe.src),nt()},Qe.onerror=()=>{bi(new Error("Some images could not be loaded"))}});if(De.push(Si),ce.src.startsWith("http"))Ua(ce.src).then(nt=>{Qe.src=nt}).catch(()=>{Qe.src=""});else if(ce.src.includes("<svg")){const nt=new Blob([ce.src],{type:"image/svg+xml"});Qe.src=URL.createObjectURL(nt)}else Qe.src=ce.src;return Xa({...ce,img:Qe},Le)}return Xa(ce,Le)}));return await Promise.all(De),Ut})(U,S);Ye(at,ye)},[Ye,S]),et=g.useRef();et.current=_;const Fe=g.useCallback((U=[],ye=!0)=>{et.current?.(U,{clearHistory:ye,source:"remote"})},[]);C.current\|\|typeof Image>"u"\|\|(C.current=!0,t&&_(t,{clearHistory:!0,source:"remote"}));const tt=g.useCallback(async U=>{const ye=await(async at=>new Promise((Re,Le)=>{const De=new FileReader;De.onload=Ut=>{const ce=Ut.target?.result;if(!ce)return Le("Impossible de récupérer les données du fichier");const Qe=JSON.parse(ce);Re(Qe)},De.readAsText(at)}))(U);await _(ye.shapes??[],{clearHistory:!0,source:"remote"})},[_]),Qi=g.useCallback(()=>{typeof L!="string"?_(L(),{clearHistory:!1,source:"user"}):L==="defaultShapes"&&t!==void 0?_(t,{clearHistory:!1,source:"user"}):Ye([],{clearHistory:!1,source:"user"})},[Ye,_,t,L]);g.useEffect(()=>{D(Ya(x,m\|\|w))},[x,m,w]);const cn={canvas:T,editor:H,setEditor:V};return{editorProps:{shapesRef:z,addPictureShape:Ce,moveShapes:K,toggleShapeVisibility:re,toggleShapeLock:ge,canGoBackward:ee,canGoForward:Me,canClear:Xe,selectedShape:se,removeShape:pe,updateShape:me,backwardShape:Te,forwardShape:ae,refs:cn,width:e,height:a,canvasSize:A,selectTool:je,selectShape:mt,activeTool:N,setActiveTool:Q,setAvailableTools:D,isEditMode:P,isDisabled:E,availableTools:F,gridGap:R,setGridGap:M,loadFile:tt,exportPicture:Ot,exportData:zt,clearCanvas:Qi,settings:S,canvas:{canGrow:c,canShrink:u,layersManipulation:r,withExport:p,withLoadAndSave:f,withUploadPicture:m,withUrlPicture:w}},canvasProps:{shapesRef:z,selectedShape:se,selectionFrame:q,hoveredShape:J,addShape:he,setSelectedShape:G,setSelectionFrame:ve,refreshSelectedShapes:He,refreshHoveredShape:we,removeShape:pe,updateShape:me,backwardShape:Te,forwardShape:ae,saveShapes:Ee,refs:cn,width:e,height:a,settings:S,canvasSize:A,setCanvasSize:Z,setCanvasOffset:y,selectShape:mt,activeTool:N,setActiveTool:Q,isInsideComponent:$,isEditMode:P,isDisabled:E,canvas:{withSkeleton:k,withFrameSelection:b,canGrow:c,canShrink:u}},registerEvent:oe,unregisterEvent:W,resetCanvas:Fe,getCurrentImage:$t,getCurrentData:Y}},Object.defineProperty(Se,Symbol.toStringTag,{value:"Module"})});

package/package.json CHANGED Viewed

@@ -1,11 +1,10 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "type": "module",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",
-  "packageManager": "pnpm@9.1.4",
   "main": "./dist/react-paint.umd.cjs",
   "module": "./dist/react-paint.js",
   "types": "./dist/index.d.ts",