@yorab/react-paint 0.11.1 → 0.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +192 -1
- package/dist/canvas/hooks/useKeyboard.d.ts +0 -1
- package/dist/canvas/hooks/useReactPaint.d.ts +3 -4
- package/dist/canvas/hooks/useResizeObserver.d.ts +0 -1
- package/dist/canvas/hooks/useShapes.d.ts +4 -5
- package/dist/canvas/utils/data.d.ts +1 -1
- package/dist/canvas/utils/file.d.ts +1 -0
- package/dist/canvas/utils/selection/lineSelection.d.ts +2 -2
- package/dist/canvas/utils/shapes/brush.d.ts +6 -6
- package/dist/canvas/utils/shapes/circle.d.ts +5 -5
- package/dist/canvas/utils/shapes/curve.d.ts +5 -5
- package/dist/canvas/utils/shapes/ellipse.d.ts +5 -5
- package/dist/canvas/utils/shapes/index.d.ts +1 -1
- package/dist/canvas/utils/shapes/line.d.ts +4 -4
- package/dist/canvas/utils/shapes/path.d.ts +5 -5
- package/dist/canvas/utils/shapes/picture.d.ts +2 -2
- package/dist/canvas/utils/shapes/polygon.d.ts +5 -5
- package/dist/canvas/utils/shapes/rectangle.d.ts +1 -1
- package/dist/canvas/utils/shapes/text.d.ts +5 -5
- package/dist/canvas/utils/shapes/triangle.d.ts +2 -2
- package/dist/canvas/utils/transform.d.ts +2 -2
- package/dist/common/types/tools.d.ts +42 -4
- package/dist/index.d.ts +2 -2
- package/dist/react-paint.js +693 -793
- package/dist/react-paint.umd.cjs +1 -1
- package/package.json +16 -16
package/dist/react-paint.js
CHANGED
|
@@ -1,122 +1,108 @@
|
|
|
1
|
-
import Ei, { useState as
|
|
2
|
-
import { jsx as
|
|
3
|
-
const Ni = '<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>', Ft = '<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>', Nt = '<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>', Rt = '<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>', Ri = '<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>', Yt = '<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>', It = '<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>', Ii = '<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>', zi = '<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>', Wi = '<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>', _t = '<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>', qt = '<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>', Jt = '<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>', Kt = '<svg ><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.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>', le = ["transparent", "black", "white", "red", "green", "blue", "yellow"], Re = [0, 1, 2], ei = [[1, 0], [1, 2], [4, 6]], st = "serif", m1 = 2, Oi = 3, y1 = 4, K = "react-paint-", zt = { type: "picture", id: `${K}picture`, icon: It, label: "Image", settings: { opacity: { min: 0, max: 100, step: 1, default: 100 } } }, $i = { type: "brush", id: `${K}brush`, icon: Ni, label: "Brosse", settings: { strokeColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 6, max: 20, step: 2, default: 10 }, lineDash: { values: Re, default: 0 } } }, Ui = { type: "line", id: `${K}line`, icon: zi, label: "Ligne", settings: { strokeColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 }, lineArrow: { values: [0, 1, 2, 3], default: 0 } } }, Gi = { type: "polygon", id: `${K}polygon`, icon: Rt, label: "Polygone", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 }, pointsCount: { min: 3, max: 10, step: 1, default: 3 } } }, Bi = { type: "curve", id: `${K}curve`, icon: Wi, label: "Courbe", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 }, pointsCount: { min: 3, max: 10, step: 1, default: 3 } } }, Xi = { type: "rect", id: `${K}rect`, icon: Ft, label: "Rectangle", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 } } }, Yi = { type: "square", id: `${K}square`, icon: Ft, label: "Carré", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 } } }, ji = { type: "circle", id: `${K}circle`, icon: Nt, label: "Cercle", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 } } }, _i = { type: "ellipse", id: `${K}ellipse`, icon: Nt, label: "Ellipse", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 } } }, qi = { type: "text", id: `${K}text`, icon: Ii, label: "Texte", settings: { strokeColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, fontFamily: { values: ["arial", "serif", "monospace"], default: st }, fontBold: { values: [!1, !0], default: !1 }, fontItalic: { values: [!1, !0], default: !1 } } }, Ze = { id: `${K}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" }, Xe = { id: `${K}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" }, Ye = { id: `${K}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" }, je = { id: `${K}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" }, Mt = { id: `${K}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" }, ti = { id: `${K}load`, type: "loadfile", icon: '<svg><path d="M3.417 16.667Q2.729 16.667 2.198 16.135Q1.667 15.604 1.667 14.917V5.083Q1.667 4.396 2.198 3.865Q2.729 3.333 3.417 3.333H8.25L9.917 5H16.667Q17.354 5 17.844 5.531Q18.333 6.062 18.333 6.75H3.417V14.917Q3.417 14.917 3.417 14.917Q3.417 14.917 3.417 14.917L5.438 8.5H19.583L17.396 15.479Q17.229 16.021 16.802 16.344Q16.375 16.667 15.833 16.667Z"/></svg>', label: "Load project" }, kt = { id: `${K}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" }, ii = { id: `${K}upload-picture`, type: "uploadpicture", icon: It, label: "Upload picture" }, Ji = 2, Ki = "blue", Ae = 14, e1 = [[0, 0], [0.5, 0], [1, 0], [1, 0.5], [1, 1], [0.5, 1], [0, 1], [0, 0.5]], t1 = ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text", "triangle"], i1 = "react-paint-canvas-drawcanvas", a1 = "react-paint-canvas-selectioncanvas", ai = { layersManipulation: !0, grid: 0, canGrow: !1, canShrink: !0, withExport: !0, withLoadAndSave: !0, withUploadPicture: !0, withUrlPicture: !1, availableTools: [$i, Ui, Gi, Bi, Xi, Yi, ji, _i, zt, qi], clearCallback: "empty", brushAlgo: "simple", isBrushShapeDoneOnMouseUp: !0, withFrameSelection: !1, withSkeleton: !0, canvasSelectionPadding: 0 }, Q1 = { canvasBackgroundColor: "white", canvasSelectionColor: Ki, canvasSelectionWidth: Ji }, n1 = (e, i) => !!(e.target instanceof Node && i) && i.contains(e.target), ht = 300, Tt = (e, i) => {
|
|
1
|
+
import Ei, { useState as z, useEffect as G, useRef as J, useCallback as R, useMemo as Di, useImperativeHandle as f1, useTransition as Fi } from "react";
|
|
2
|
+
import { jsx as p, jsxs as I, Fragment as he } from "react/jsx-runtime";
|
|
3
|
+
const Ni = '<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>', Nt = '<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>', Rt = '<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>', It = '<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>', Ri = '<svg><path d="M4.125 5.083V3.333H7.062L7.896 2.5H12.104L12.938 3.333H15.875V5.083ZM6.75 17.5Q6.021 17.5 5.51 16.99Q5 16.479 5 15.75V5.958H15V15.75Q15 16.479 14.49 16.99Q13.979 17.5 13.25 17.5Z"/></svg>', jt = '<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>', Wt = '<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>', Ii = '<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>', Wi = '<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>', zi = '<svg><path d="M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z"/></svg>', _t = '<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>', qt = '<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>', Jt = '<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>', Kt = '<svg><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM10 16.583Q10.896 16.583 11.708 16.365Q12.521 16.146 13.25 15.729L4.292 6.75Q3.875 7.479 3.646 8.292Q3.417 9.104 3.417 10Q3.417 12.729 5.344 14.656Q7.271 16.583 10 16.583ZM17 14.562 15.708 13.271Q16.125 12.542 16.354 11.719Q16.583 10.896 16.583 10Q16.583 7.271 14.656 5.344Q12.729 3.417 10 3.417Q9.104 3.417 8.292 3.646Q7.479 3.875 6.75 4.292L5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562ZM11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771ZM8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Z"/></svg>', ei = '<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>', le = ["transparent", "black", "white", "red", "green", "blue", "yellow"], Re = [0, 1, 2], ti = [[1, 0], [1, 2], [4, 6]], ot = "serif", m1 = 2, Oi = 3, y1 = 4, K = "react-paint-", zt = { type: "picture", id: `${K}picture`, icon: Wt, label: "Image", settings: { opacity: { min: 0, max: 100, step: 1, default: 100 } } }, $i = { type: "brush", id: `${K}brush`, icon: Ni, label: "Brosse", settings: { strokeColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 6, max: 20, step: 2, default: 10 }, lineDash: { values: Re, default: 0 } } }, Ui = { type: "line", id: `${K}line`, icon: Wi, label: "Ligne", settings: { strokeColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 }, lineArrow: { values: [0, 1, 2, 3], default: 0 } } }, Bi = { type: "polygon", id: `${K}polygon`, icon: It, label: "Polygone", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 }, pointsCount: { min: 3, max: 10, step: 1, default: 3 } } }, Gi = { type: "curve", id: `${K}curve`, icon: zi, label: "Courbe", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 }, pointsCount: { min: 3, max: 10, step: 1, default: 3 } } }, Xi = { type: "rect", id: `${K}rect`, icon: Nt, label: "Rectangle", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 } } }, Yi = { type: "square", id: `${K}square`, icon: Nt, label: "Carré", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 } } }, ji = { type: "circle", id: `${K}circle`, icon: Rt, label: "Cercle", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 } } }, _i = { type: "ellipse", id: `${K}ellipse`, icon: Rt, label: "Ellipse", settings: { strokeColor: { values: le, default: "black" }, fillColor: { values: le, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Re, default: 0 } } }, qi = { type: "text", id: `${K}text`, icon: Ii, label: "Texte", settings: { strokeColor: { values: le, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, fontFamily: { values: ["arial", "serif", "monospace"], default: ot }, fontBold: { values: [!1, !0], default: !1 }, fontItalic: { values: [!1, !0], default: !1 } } }, Ze = { id: `${K}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" }, Xe = { id: `${K}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" }, Ye = { id: `${K}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" }, je = { id: `${K}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" }, Mt = { id: `${K}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" }, ii = { id: `${K}load`, type: "loadfile", icon: '<svg><path d="M3.417 16.667Q2.729 16.667 2.198 16.135Q1.667 15.604 1.667 14.917V5.083Q1.667 4.396 2.198 3.865Q2.729 3.333 3.417 3.333H8.25L9.917 5H16.667Q17.354 5 17.844 5.531Q18.333 6.062 18.333 6.75H3.417V14.917Q3.417 14.917 3.417 14.917Q3.417 14.917 3.417 14.917L5.438 8.5H19.583L17.396 15.479Q17.229 16.021 16.802 16.344Q16.375 16.667 15.833 16.667Z"/></svg>', label: "Load project" }, kt = { id: `${K}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" }, ni = { id: `${K}upload-picture`, type: "uploadpicture", icon: Wt, label: "Upload picture" }, Ji = 2, Ki = "blue", Ae = 14, e1 = [[0, 0], [0.5, 0], [1, 0], [1, 0.5], [1, 1], [0.5, 1], [0, 1], [0, 0.5]], t1 = ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text", "triangle"], i1 = "react-paint-canvas-drawcanvas", n1 = "react-paint-canvas-selectioncanvas", ai = { layersManipulation: !0, grid: 0, canGrow: !1, canShrink: !0, withExport: !0, withLoadAndSave: !0, withUploadPicture: !0, withUrlPicture: !1, availableTools: [$i, Ui, Bi, Gi, Xi, Yi, ji, _i, zt, qi], clearCallback: "empty", brushAlgo: "simple", isBrushShapeDoneOnMouseUp: !0, withFrameSelection: !1, withSkeleton: !0, canvasSelectionPadding: 0 }, Q1 = { canvasBackgroundColor: "white", canvasSelectionColor: Ki, canvasSelectionWidth: Ji }, a1 = (e, i) => !!(e.target instanceof Node && i) && i.contains(e.target), ut = 300, At = (e, i) => {
|
|
4
4
|
const t = { ...i };
|
|
5
|
-
for (const
|
|
6
|
-
delete t[a];
|
|
5
|
+
for (const n of e) delete t[n];
|
|
7
6
|
return t;
|
|
8
7
|
}, re = (e, i, t) => {
|
|
9
|
-
const
|
|
10
|
-
return s.reduce((
|
|
11
|
-
},
|
|
12
|
-
if (!
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
Object.hasOwn(t, s) && (Object.hasOwn(a, s) ? a[s] = e(a[s], t[s], s) ?? xe(e, a[s], t[s]) : a[s] = t[s]);
|
|
17
|
-
return a;
|
|
8
|
+
const n = Array.isArray(t) ? [...t] : { ...t }, s = Array.isArray(e) ? e : typeof e == "string" ? e.split(".") : [e];
|
|
9
|
+
return s.reduce((a, o, r) => (a[o] = Zt(a[o]) ? { ...a[o] } : Array.isArray(a[o]) ? [...a[o]] : a[o] === void 0 || a[o] === null ? {} : a[o], r === s.length - 1 && (a[o] = i), a[o]), n), n;
|
|
10
|
+
}, Zt = (e) => typeof e == "object" && !Array.isArray(e) && e !== null, Me = (e, i, t) => {
|
|
11
|
+
if (!Zt(i) || !Zt(t)) return t;
|
|
12
|
+
const n = { ...i };
|
|
13
|
+
for (const s in t) Object.hasOwn(t, s) && (Object.hasOwn(n, s) ? n[s] = e(n[s], t[s], s) ?? Me(e, n[s], t[s]) : n[s] = t[s]);
|
|
14
|
+
return n;
|
|
18
15
|
}, s1 = (e, i) => {
|
|
19
|
-
if (e === i)
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
const t
|
|
24
|
-
if (t.length !== a.length)
|
|
25
|
-
return !1;
|
|
26
|
-
for (const s of t)
|
|
27
|
-
if (!a.includes(s) || !s1(e[s], i[s]))
|
|
28
|
-
return !1;
|
|
16
|
+
if (e === i) return !0;
|
|
17
|
+
if (typeof e != "object" || typeof i != "object" || e === null || i === null) return !1;
|
|
18
|
+
const t = Object.keys(e), n = Object.keys(i);
|
|
19
|
+
if (t.length !== n.length) return !1;
|
|
20
|
+
for (const s of t) if (!n.includes(s) || !s1(e[s], i[s])) return !1;
|
|
29
21
|
return !0;
|
|
30
|
-
}, Lt = {}, se = (e = "") => (Lt[e] || (Lt[e] = 0), `${e}${++Lt[e]}`),
|
|
22
|
+
}, Lt = {}, se = (e = "") => (Lt[e] || (Lt[e] = 0), `${e}${++Lt[e]}`), Ot = (e) => e.filter((i) => i != null), o1 = (e) => {
|
|
31
23
|
e.lineCap = "round", e.lineJoin = "round";
|
|
32
24
|
}, Oe = (e, i = {}) => {
|
|
33
|
-
const { lineCap: t = "round", fillColor:
|
|
34
|
-
e.lineCap = t, e.globalAlpha = s / 100, e.fillStyle =
|
|
35
|
-
},
|
|
36
|
-
e.save(), e.scale(i.canvasSize.scaleRatio, i.canvasSize.scaleRatio), e.translate(i.canvasOffset[0], i.canvasOffset[1]), t &&
|
|
37
|
-
},
|
|
25
|
+
const { lineCap: t = "round", fillColor: n = "transparent", opacity: s = 100, strokeColor: a = Ki, lineWidth: o = Ji, lineDash: r = 0 } = i;
|
|
26
|
+
e.lineCap = t, e.globalAlpha = s / 100, e.fillStyle = n, e.strokeStyle = a, e.lineWidth = o, e.setLineDash(r === 0 ? [] : [ti[r][0] * o, ti[r][1] * o]);
|
|
27
|
+
}, $t = (e, i, t, n) => {
|
|
28
|
+
e.save(), e.scale(i.canvasSize.scaleRatio, i.canvasSize.scaleRatio), e.translate(i.canvasOffset[0], i.canvasOffset[1]), t && n && (e.translate(n[0], n[1]), e.rotate(t), e.translate(-n[0], -n[1]));
|
|
29
|
+
}, gt = (e) => {
|
|
38
30
|
const i = new Path2D();
|
|
39
31
|
return i.rect(e.x, e.y, e.width, e.height), i;
|
|
40
|
-
},
|
|
32
|
+
}, vt = (e) => {
|
|
41
33
|
const i = new Path2D();
|
|
42
34
|
return i.arc(e.x, e.y, e.radius, 0, 2 * Math.PI), i;
|
|
43
|
-
},
|
|
35
|
+
}, Et = (e) => {
|
|
44
36
|
const i = new Path2D();
|
|
45
37
|
return i.moveTo(...e.points[0]), i.lineTo(...e.points[1]), i;
|
|
46
38
|
}, S1 = (e) => {
|
|
47
39
|
const i = new Path2D();
|
|
48
40
|
return i.moveTo(...e.points[0]), i.lineTo(...e.points[1]), i.lineTo(...e.points[2]), i.lineTo(...e.points[0]), i;
|
|
49
|
-
},
|
|
41
|
+
}, Ut = (e, i, t, n = !1) => {
|
|
50
42
|
const { borders: s } = _(i, t);
|
|
51
|
-
return { border:
|
|
43
|
+
return { border: gt(s), shapePath: e, anchors: [...i.points.map((a, o) => n && o > 0 && o < i.points.length - 1 ? gt({ x: a[0] - 7, y: a[1] - 7, width: Ae / t.canvasSize.scaleRatio, height: Ae / t.canvasSize.scaleRatio }) : vt({ x: a[0], y: a[1], radius: 7 / t.canvasSize.scaleRatio }))] };
|
|
52
44
|
}, Je = (e, i) => {
|
|
53
|
-
const t = ((
|
|
54
|
-
if (
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
if (
|
|
59
|
-
|
|
60
|
-
if (c.length === 1)
|
|
61
|
-
d.rect(...Qe(c[0], l, p, a.scaleX, a.scaleY), 1, 1);
|
|
62
|
-
else if (d.moveTo(...Qe(c[0], l, p, a.scaleX, a.scaleY)), s === "quadratic") {
|
|
45
|
+
const t = ((n, { brushAlgo: s }) => {
|
|
46
|
+
if (n.points.length < 1 || n.style?.strokeColor === "transparent") return;
|
|
47
|
+
const a = n.points.flat(), o = a.map((c) => c[0]), r = a.map((c) => c[1]), l = Math.min(...o), h = Math.min(...r), d = new Path2D();
|
|
48
|
+
for (const c of n.points) {
|
|
49
|
+
if (!c.length) return;
|
|
50
|
+
if (c.length === 1) d.rect(...Qe(c[0], l, h, n.scaleX, n.scaleY), 1, 1);
|
|
51
|
+
else if (d.moveTo(...Qe(c[0], l, h, n.scaleX, n.scaleY)), s === "quadratic") {
|
|
63
52
|
for (let u = 0; u < c.slice(1).length - 2; u++) {
|
|
64
|
-
const g = Qe(c[u], l,
|
|
53
|
+
const g = Qe(c[u], l, h, n.scaleX, n.scaleY), v = Qe(c[u + 1], l, h, n.scaleX, n.scaleY), w = (g[0] + v[0]) / 2, M = (g[1] + v[1]) / 2;
|
|
65
54
|
d.quadraticCurveTo(...g, w, M);
|
|
66
55
|
}
|
|
67
|
-
d.quadraticCurveTo(...Qe(c[c.length - 2], l,
|
|
68
|
-
} else
|
|
69
|
-
for (const u of c.slice(1))
|
|
70
|
-
d.lineTo(...Qe(u, l, p, a.scaleX, a.scaleY));
|
|
56
|
+
d.quadraticCurveTo(...Qe(c[c.length - 2], l, h, n.scaleX, n.scaleY), ...Qe(c[c.length - 1], l, h, n.scaleX, n.scaleY));
|
|
57
|
+
} else for (const u of c.slice(1)) d.lineTo(...Qe(u, l, h, n.scaleX, n.scaleY));
|
|
71
58
|
}
|
|
72
59
|
return d;
|
|
73
60
|
})(e, i);
|
|
74
61
|
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
75
|
-
}, b1 = Je,
|
|
76
|
-
const t = i.x - Math.min(Math.max(i.x, e.x), e.x + e.width),
|
|
77
|
-
return Math.sqrt(t * t +
|
|
78
|
-
},
|
|
79
|
-
const
|
|
80
|
-
return [
|
|
81
|
-
},
|
|
82
|
-
const s =
|
|
83
|
-
if (
|
|
84
|
-
const [
|
|
85
|
-
return t ? l :
|
|
62
|
+
}, b1 = Je, Dt = (e) => 180 * e / Math.PI, r1 = (e, i) => {
|
|
63
|
+
const t = i.x - Math.min(Math.max(i.x, e.x), e.x + e.width), n = i.y - Math.min(Math.max(i.y, e.y), e.y + e.height);
|
|
64
|
+
return Math.sqrt(t * t + n * n) <= i.radius;
|
|
65
|
+
}, ge = ({ origin: e = [0, 0], point: i, rotation: t }) => {
|
|
66
|
+
const n = [i[0] - e[0], i[1] - e[1]], s = n[1] * Math.cos(t) - n[0] * Math.sin(t);
|
|
67
|
+
return [n[1] * Math.sin(t) + n[0] * Math.cos(t) + e[0], s + e[1]];
|
|
68
|
+
}, si = (e) => (e + 2 * Math.PI) % (2 * Math.PI), oi = ({ targetVector: [e, i], radian: t = !0, originVector: n }) => {
|
|
69
|
+
const s = si(Math.atan2(i[1] - e[1], i[0] - e[0]));
|
|
70
|
+
if (n) {
|
|
71
|
+
const [a, o] = n, r = Math.atan2(o[1] - a[1], o[0] - a[0]), l = si(s - r);
|
|
72
|
+
return t ? l : Dt(l);
|
|
86
73
|
}
|
|
87
|
-
return t ? s :
|
|
88
|
-
}, Ne = (e, i = 2) => Math.round(e * 10 ** i) / 10 ** i, Qe = (e, i, t,
|
|
89
|
-
if (!i.gridGap)
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
switch (a.mode) {
|
|
74
|
+
return t ? s : Dt(s);
|
|
75
|
+
}, Ne = (e, i = 2) => Math.round(e * 10 ** i) / 10 ** i, Qe = (e, i, t, n = 1, s = 1) => [i + (e[0] - i) * n, t + (e[1] - t) * s], O = (e, i, t = 0) => {
|
|
76
|
+
if (!i.gridGap) return Ne(e);
|
|
77
|
+
const n = e + t, s = n >= 0 ? i.gridGap : -i.gridGap;
|
|
78
|
+
return n + s / 2 - (n + s / 2) % s - t;
|
|
79
|
+
}, C1 = (e, i, t = 0) => i.gridGap ? e + Math.PI / 18 / 2 - (e + Math.PI / 18 / 2) % (Math.PI / 18) : Ne(e, 3), w1 = (e, i, t, n, s, a) => {
|
|
80
|
+
switch (n.mode) {
|
|
95
81
|
case "brush":
|
|
96
82
|
return ((o, r, l) => {
|
|
97
|
-
const
|
|
98
|
-
return Je(
|
|
83
|
+
const h = { ...o, points: re(o.points.length - 1, [...o.points[o.points.length - 1], [Math.round(r[0]), Math.round(r[1])]], o.points) };
|
|
84
|
+
return Je(h, l);
|
|
99
85
|
})(i, t, s);
|
|
100
86
|
case "translate":
|
|
101
|
-
return
|
|
87
|
+
return Ft(t, n.originalShape, n.cursorStartPosition, s);
|
|
102
88
|
case "rotate":
|
|
103
|
-
return R1(i, t,
|
|
89
|
+
return R1(i, t, n.originalShape, n.cursorStartPosition, n.center, s);
|
|
104
90
|
case "resize":
|
|
105
|
-
return I1(e, i, t,
|
|
91
|
+
return I1(e, i, t, n.originalShape, n, s, a);
|
|
106
92
|
default:
|
|
107
93
|
return i;
|
|
108
94
|
}
|
|
109
95
|
}, Ke = (e, i, t) => {
|
|
110
|
-
const { borders:
|
|
111
|
-
return { border:
|
|
112
|
-
},
|
|
113
|
-
switch (
|
|
96
|
+
const { borders: n } = _(i, t);
|
|
97
|
+
return { border: gt(n), shapePath: e, line: Et({ points: [[n.x + n.width / 2, n.y], [n.x + n.width / 2, n.y - 23 / t.canvasSize.scaleRatio]] }), anchors: [vt({ x: n.x + n.width / 2, y: n.y - 23 / t.canvasSize.scaleRatio, radius: 7 / t.canvasSize.scaleRatio }), ...e1.map((s) => vt({ x: n.x + n.width * s[0], y: n.y + n.height * s[1], radius: 7 / t.canvasSize.scaleRatio }))] };
|
|
98
|
+
}, ri = ({ borderStart: e, borderSize: i, vector: t, settings: n, invertedAxe: s, anchor: a }) => {
|
|
99
|
+
switch (a) {
|
|
114
100
|
case 0: {
|
|
115
101
|
if (s) {
|
|
116
|
-
const r = i - 2 *
|
|
102
|
+
const r = i - 2 * n.selectionPadding;
|
|
117
103
|
return [e + r, t - r];
|
|
118
104
|
}
|
|
119
|
-
const o = Math.max(2 *
|
|
105
|
+
const o = Math.max(2 * n.selectionPadding, i - t);
|
|
120
106
|
return [e + i - o, o];
|
|
121
107
|
}
|
|
122
108
|
case 0.5:
|
|
@@ -124,265 +110,242 @@ const Ni = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
124
110
|
case 1:
|
|
125
111
|
if (s) {
|
|
126
112
|
const o = i + t;
|
|
127
|
-
return [e + o, 2 *
|
|
113
|
+
return [e + o, 2 * n.selectionPadding - o];
|
|
128
114
|
}
|
|
129
|
-
return [e, Math.max(2 *
|
|
115
|
+
return [e, Math.max(2 * n.selectionPadding, i + t)];
|
|
130
116
|
default:
|
|
131
117
|
return [0, 0];
|
|
132
118
|
}
|
|
133
|
-
},
|
|
134
|
-
const o = [e + i / 2 - s[0], t +
|
|
135
|
-
return { borderX: Ne(e + r - o[0]), borderWidth: Ne(i), borderY: Ne(t + l - o[1]), borderHeight: Ne(
|
|
136
|
-
},
|
|
137
|
-
const { center:
|
|
119
|
+
}, li = ({ borderX: e, borderWidth: i, borderY: t, borderHeight: n, center: s, originalShape: a }) => {
|
|
120
|
+
const o = [e + i / 2 - s[0], t + n / 2 - s[1]], [r, l] = ge({ point: o, rotation: -a.rotation });
|
|
121
|
+
return { borderX: Ne(e + r - o[0]), borderWidth: Ne(i), borderY: Ne(t + l - o[1]), borderHeight: Ne(n) };
|
|
122
|
+
}, Ge = (e, i, t, n, s = !1) => {
|
|
123
|
+
const { center: a, borders: o } = _(i, n), r = ge({ origin: a, point: e, rotation: i.rotation }), l = t.anchor[0] === 0 && r[0] >= o.x + o.width || t.anchor[0] === 1 && r[0] <= o.x, h = t.anchor[1] === 0 && r[1] >= o.y + o.height || t.anchor[1] === 1 && r[1] <= o.y, d = [O(r[0], n, t.anchor[0] === 0 && !l || t.anchor[0] === 1 && l ? n.selectionPadding : -n.selectionPadding), O(r[1], n, t.anchor[1] === 0 && !h || t.anchor[1] === 1 && h ? n.selectionPadding : -n.selectionPadding)], c = n.gridGap ? [t.anchor[0] === 0 ? o.x : t.anchor[0] === 0.5 ? o.x + o.width / 2 : o.x + o.width, t.anchor[1] === 0 ? o.y : t.anchor[1] === 0.5 ? o.y + o.height / 2 : o.y + o.height] : ge({ origin: a, point: t.cursorStartPosition, rotation: i.rotation }), u = [d[0] - c[0], d[1] - c[1]], [g, v] = ri({ borderStart: o.x, borderSize: o.width, vector: u[0], settings: n, invertedAxe: l, anchor: t.anchor[0] }), [w, M] = ri({ borderStart: o.y, borderSize: o.height, vector: u[1], settings: n, invertedAxe: h, anchor: t.anchor[1] });
|
|
138
124
|
if (s) {
|
|
139
|
-
const S = ((L, b, k, P, E, A, H, C, V,
|
|
140
|
-
const { selectionPadding: y } =
|
|
125
|
+
const S = ((L, b, k, P, E, A, H, C, V, W) => {
|
|
126
|
+
const { selectionPadding: y } = W, F = (b.width - 2 * y || 1) / (b.height - 2 * y || 1), x = (E - 2 * y) / (H - 2 * y);
|
|
141
127
|
let T, Z, f, m;
|
|
142
128
|
return V.anchor[0] !== 0.5 && V.anchor[1] !== 0.5 ? x < F ? (Z = A, m = H, f = (H - 2 * y) * F + 2 * y, T = V.anchor[0] === 0 ? b.width - L[0] > y ? b.x + (b.width - f) : b.x + b.width - 2 * y : b.width + L[0] > y ? b.x : b.x - f + 2 * y) : (T = P, f = E, m = (E - 2 * y) / F + 2 * y, Z = V.anchor[1] === 0 ? b.height - L[1] > y ? b.y + (b.height - m) : b.y + b.height - 2 * y : b.height + L[1] > y ? b.y : b.y - m + 2 * y) : V.anchor[0] !== 0.5 ? (T = P, f = E, m = (E - 2 * y) / F + 2 * y, Z = b.y + (b.height - m) / 2) : (Z = A, m = H, f = (H - 2 * y) * F + 2 * y, T = b.x + (b.width - f) / 2), { borderX: T, borderWidth: f, borderY: Z, borderHeight: m, center: k, originalShape: C };
|
|
143
|
-
})(u, o,
|
|
144
|
-
return
|
|
129
|
+
})(u, o, a, g, v, w, M, i, t, n);
|
|
130
|
+
return li(S);
|
|
145
131
|
}
|
|
146
|
-
return
|
|
147
|
-
},
|
|
148
|
-
const t =
|
|
132
|
+
return li({ borderX: g, borderWidth: v, borderY: w, borderHeight: M, center: a, originalShape: i });
|
|
133
|
+
}, ft = (e, i) => {
|
|
134
|
+
const t = vt(e);
|
|
149
135
|
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
150
|
-
}, x1 =
|
|
151
|
-
const { clientX:
|
|
152
|
-
return [(
|
|
153
|
-
},
|
|
154
|
-
if (e.locked)
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
return { mode: "resize", anchor: p };
|
|
168
|
-
}
|
|
169
|
-
return !!lt(o, l, s) && { mode: "translate" };
|
|
170
|
-
}, l1 = (e, i, t, a) => {
|
|
171
|
-
if (i.locked)
|
|
172
|
-
return !1;
|
|
173
|
-
const { center: s } = _(i, a), n = $e(t, i.rotation, s, a.canvasOffset);
|
|
174
|
-
return "path" in i && i.path ? i.style?.fillColor && i.style?.fillColor !== "transparent" ? !!e.isPointInPath(i.path, n[0], n[1]) && { mode: "translate" } : (e.lineWidth = (i.style?.lineWidth ?? 0) + 15, !!e.isPointInStroke(i.path, n[0], n[1]) && { mode: "translate" }) : at(i, t, a, !1);
|
|
136
|
+
}, x1 = ft, Vt = (e, i, t) => {
|
|
137
|
+
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 : {}, a = i?.getBoundingClientRect() ?? { left: 0, top: 0, width: t.canvasSize.width, height: t.canvasSize.height };
|
|
138
|
+
return [(n - a.left) * (t.canvasSize.width / a.width) / t.canvasSize.scaleRatio, (s - a.top) * (t.canvasSize.height / a.height) / t.canvasSize.scaleRatio];
|
|
139
|
+
}, di = (e) => "touches" in e, $e = (e, i, [t, n], [s, a]) => ge({ origin: [t - s, n - a], point: e, rotation: i }), dt = (e, i, t) => t ? r1(e, { x: i[0], y: i[1], radius: t }) : ((n, s) => s[0] >= n.x && s[0] <= n.x + n.width && s[1] >= n.y && s[1] <= n.y + n.height)(e, i), at = (e, i, t, n = !1, s = 0) => {
|
|
140
|
+
if (e.locked) return !1;
|
|
141
|
+
const { canvasSize: { scaleRatio: a } } = t, { borders: o, center: r } = _(e, t), l = $e(i, e.rotation, r, t.canvasOffset);
|
|
142
|
+
if (n) if (e.type === "line" || e.type === "polygon" || e.type === "curve") {
|
|
143
|
+
for (let h = 0; h < e.points.length; h++) if (dt({ x: e.points[h][0] - 7 / a, y: e.points[h][1] - 7 / a, width: Ae / a, height: Ae / a }, l, s)) return { mode: "resize", anchor: h };
|
|
144
|
+
} else {
|
|
145
|
+
if (dt({ x: o.x + o.width / 2 - 7 / a, y: o.y - Ae / a - 16 / a, width: Ae / a, height: Ae / a }, l, s)) return { mode: "rotate" };
|
|
146
|
+
for (const h of e1) if (dt({ x: o.x + o.width * h[0] - 7 / a, y: o.y + o.height * h[1] - 7 / a, width: Ae / a, height: Ae / a }, l, s)) return { mode: "resize", anchor: h };
|
|
147
|
+
}
|
|
148
|
+
return !!dt(o, l, s) && { mode: "translate" };
|
|
149
|
+
}, l1 = (e, i, t, n) => {
|
|
150
|
+
if (i.locked) return !1;
|
|
151
|
+
const { center: s } = _(i, n), a = $e(t, i.rotation, s, n.canvasOffset);
|
|
152
|
+
return "path" in i && i.path ? i.style?.fillColor && i.style?.fillColor !== "transparent" ? !!e.isPointInPath(i.path, a[0], a[1]) && { mode: "translate" } : (e.lineWidth = (i.style?.lineWidth ?? 0) + 15, !!e.isPointInStroke(i.path, a[0], a[1]) && { mode: "translate" }) : at(i, t, n, !1);
|
|
175
153
|
};
|
|
176
|
-
function
|
|
177
|
-
const t = Math.max(e.x, i.x),
|
|
178
|
-
if (t < s &&
|
|
179
|
-
return { x: t, y: a, width: s - t, height: n - a };
|
|
154
|
+
function ci(e, i) {
|
|
155
|
+
const t = Math.max(e.x, i.x), n = Math.max(e.y, i.y), s = Math.min(e.x + (e.width || 1), i.x + (i.width || 1)), a = Math.min(e.y + (e.height || 1), i.y + (i.height || 1));
|
|
156
|
+
if (t < s && n < a) return { x: t, y: n, width: s - t, height: a - n };
|
|
180
157
|
}
|
|
181
|
-
const
|
|
182
|
-
for (let
|
|
183
|
-
for (let o = 0; o < a; o += a / 2)
|
|
184
|
-
for (let r = n + t.x; r < t.x + t.width; r += a)
|
|
185
|
-
for (let l = o + t.y; l < t.y + t.height; l += a)
|
|
186
|
-
if (s ? e.isPointInPath(i, r, l) : e.isPointInStroke(i, r, l))
|
|
187
|
-
return !0;
|
|
158
|
+
const hi = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
159
|
+
for (let a = 0; a < n; a += n / 2) for (let o = 0; o < n; o += n / 2) for (let r = a + t.x; r < t.x + t.width; r += n) for (let l = o + t.y; l < t.y + t.height; l += n) if (s ? e.isPointInPath(i, r, l) : e.isPointInStroke(i, r, l)) return !0;
|
|
188
160
|
return !1;
|
|
189
161
|
}, _e = (e, i) => {
|
|
190
|
-
const t = ((
|
|
191
|
-
if (
|
|
192
|
-
return;
|
|
162
|
+
const t = ((n) => {
|
|
163
|
+
if (n.points.length < 1) return;
|
|
193
164
|
const s = new Path2D();
|
|
194
|
-
s.moveTo(...
|
|
195
|
-
for (const
|
|
196
|
-
|
|
197
|
-
return s.lineTo(...a.points[0]), s;
|
|
165
|
+
s.moveTo(...n.points[0]);
|
|
166
|
+
for (const a of n.points.slice(1)) s.lineTo(...a);
|
|
167
|
+
return s.lineTo(...n.points[0]), s;
|
|
198
168
|
})(e);
|
|
199
|
-
return { ...e, path: t, selection:
|
|
169
|
+
return { ...e, path: t, selection: Ut(t, e, i) };
|
|
200
170
|
}, M1 = _e, d1 = (e, i) => {
|
|
201
|
-
const t = Math.min(...e.points.map((
|
|
202
|
-
return { x: t, width:
|
|
171
|
+
const t = Math.min(...e.points.map((a) => a[0])) - i.selectionPadding, n = Math.max(...e.points.map((a) => a[0])) + i.selectionPadding, s = Math.min(...e.points.map((a) => a[1])) - i.selectionPadding;
|
|
172
|
+
return { x: t, width: n - t, y: s, height: Math.max(...e.points.map((a) => a[1])) + i.selectionPadding - s };
|
|
203
173
|
}, qe = (e, i) => {
|
|
204
|
-
const t = ((
|
|
205
|
-
if (
|
|
206
|
-
return;
|
|
174
|
+
const t = ((n) => {
|
|
175
|
+
if (n.points.length < 3) return;
|
|
207
176
|
const s = new Path2D();
|
|
208
|
-
s.moveTo(...
|
|
209
|
-
for (let
|
|
210
|
-
s.quadraticCurveTo(...a.points[n], a.points.length - 2 === n ? a.points[n + 1][0] : (a.points[n + 1][0] - a.points[n][0]) / 2 + a.points[n][0], a.points.length - 2 === n ? a.points[n + 1][1] : (a.points[n + 1][1] - a.points[n][1]) / 2 + a.points[n][1]);
|
|
177
|
+
s.moveTo(...n.points[0]);
|
|
178
|
+
for (let a = 1; a < n.points.length - 1; a++) s.quadraticCurveTo(...n.points[a], n.points.length - 2 === a ? n.points[a + 1][0] : (n.points[a + 1][0] - n.points[a][0]) / 2 + n.points[a][0], n.points.length - 2 === a ? n.points[a + 1][1] : (n.points[a + 1][1] - n.points[a][1]) / 2 + n.points[a][1]);
|
|
211
179
|
return s;
|
|
212
180
|
})(e);
|
|
213
|
-
return { ...e, path: t, selection:
|
|
214
|
-
}, k1 = qe, L1 = d1,
|
|
215
|
-
const t = ((
|
|
181
|
+
return { ...e, path: t, selection: Ut(t, e, i, !0) };
|
|
182
|
+
}, k1 = qe, L1 = d1, mt = (e, i) => {
|
|
183
|
+
const t = ((n) => {
|
|
216
184
|
const s = new Path2D();
|
|
217
|
-
return s.ellipse(
|
|
185
|
+
return s.ellipse(n.x, n.y, n.radiusX, n.radiusY, 0, 0, 2 * Math.PI), s;
|
|
218
186
|
})(e);
|
|
219
187
|
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
220
|
-
}, V1 =
|
|
188
|
+
}, V1 = mt, pi = (e) => {
|
|
221
189
|
return t = { ...e, type: "triangle" }, { ...t, path: S1(t) };
|
|
222
190
|
var t;
|
|
223
191
|
}, P1 = (e, i) => {
|
|
224
192
|
e.globalAlpha !== 0 && i.path && (i.style?.fillColor !== "transparent" && e.fill(i.path), i.style?.strokeColor !== "transparent" && e.stroke(i.path));
|
|
225
|
-
},
|
|
193
|
+
}, yt = (e, i) => {
|
|
226
194
|
const t = [];
|
|
227
|
-
let
|
|
195
|
+
let n;
|
|
228
196
|
if (e.style?.lineArrow === 1 || e.style?.lineArrow === 2 || e.style?.lineArrow === 3) {
|
|
229
|
-
const s = Math.PI / 2 -
|
|
230
|
-
e.style?.lineArrow !== 1 && e.style?.lineArrow !== 3 || t.push(pi(
|
|
231
|
-
const
|
|
232
|
-
const
|
|
197
|
+
const s = Math.PI / 2 - oi({ targetVector: [e.points[0], e.points[1]] });
|
|
198
|
+
e.style?.lineArrow !== 1 && e.style?.lineArrow !== 3 || t.push(pi(ui(e.points[0], s, e.style))), e.style?.lineArrow !== 2 && e.style?.lineArrow !== 3 || t.push(pi(ui(e.points[1], s + Math.PI, e.style)));
|
|
199
|
+
const a = (({ line: o, size: r, direction: l }) => {
|
|
200
|
+
const h = Math.PI / 2 - oi({ targetVector: [o.points[0], o.points[1]] }), d = [o.points[0][0] + (o.points[1][0] - o.points[0][0]) / 2, o.points[0][1] + (o.points[1][1] - o.points[0][1]) / 2];
|
|
233
201
|
let c, u;
|
|
234
202
|
if (["start", "both"].includes(l)) {
|
|
235
|
-
const g =
|
|
236
|
-
c =
|
|
237
|
-
} else
|
|
238
|
-
c = [...o.points[0]];
|
|
203
|
+
const g = ge({ point: o.points[0], origin: d, rotation: -h });
|
|
204
|
+
c = ge({ point: [g[0], g[1] + r], origin: d, rotation: h });
|
|
205
|
+
} else c = [...o.points[0]];
|
|
239
206
|
if (["end", "both"].includes(l)) {
|
|
240
|
-
const g =
|
|
241
|
-
u =
|
|
242
|
-
} else
|
|
243
|
-
u = [...o.points[1]];
|
|
207
|
+
const g = ge({ point: o.points[1], origin: d, rotation: -h });
|
|
208
|
+
u = ge({ point: [g[0], g[1] - r], origin: d, rotation: h });
|
|
209
|
+
} else u = [...o.points[1]];
|
|
244
210
|
return { points: [c, u] };
|
|
245
211
|
})({ line: e, size: 10 + 2 * (e.style?.lineWidth ?? 0), direction: e.style?.lineArrow === 1 ? "start" : e.style?.lineArrow === 2 ? "end" : "both" });
|
|
246
|
-
|
|
247
|
-
} else
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
},
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
const t = ut(e);
|
|
212
|
+
n = Et(a);
|
|
213
|
+
} else n = Et(e);
|
|
214
|
+
return { ...e, path: n, selection: Ut(n, e, i), arrows: t, style: { ...e.style, lineCap: e.style?.lineArrow ? "butt" : "round" } };
|
|
215
|
+
}, H1 = yt, ui = (e, i, t) => {
|
|
216
|
+
const n = [ge({ point: [0, 0], rotation: i }), ge({ point: [-(5 + (t.lineWidth ?? 0)), 10 + 2 * (t.lineWidth ?? 0)], rotation: i }), ge({ point: [5 + (t.lineWidth ?? 0), 10 + 2 * (t.lineWidth ?? 0)], rotation: i })];
|
|
217
|
+
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" } };
|
|
218
|
+
}, Qt = (e, i) => {
|
|
219
|
+
const t = gt(e);
|
|
255
220
|
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
256
|
-
}, T1 =
|
|
221
|
+
}, T1 = Qt, A1 = (e, i) => {
|
|
257
222
|
e.globalAlpha !== 0 && i.path && (i.style?.fillColor !== "transparent" && e.fill(i.path), i.style?.strokeColor !== "transparent" && e.stroke(i.path));
|
|
258
|
-
},
|
|
259
|
-
const [
|
|
260
|
-
if (!(r && l && d &&
|
|
261
|
-
return [ht, ht];
|
|
223
|
+
}, gi = (e, i) => ({ x: e.x - i.selectionPadding, width: e.width + 2 * i.selectionPadding, y: e.y - i.selectionPadding, height: e.height + 2 * i.selectionPadding }), vi = (e, i, t, n, [s, a] = [!1, !1]) => ((o, r, [l, h], [d, c]) => ge({ origin: [l - d, h - c], point: o, rotation: -r }))([e[0] === 0.5 ? t.x + t.width / 2 : e[0] === 0 ? t.x + (s ? 0 : t.width) : t.x + (s ? t.width : 0), e[1] === 0.5 ? t.y + t.height / 2 : e[1] === 0 ? t.y + (a ? 0 : t.height) : t.y + (a ? t.height : 0)], t.rotation, i, n.canvasOffset), St = (e, i) => ({ ...e, selection: Ke(void 0, e, i) }), Z1 = St, Pt = (e, i, t, n, s) => {
|
|
224
|
+
const [a, o] = ((r, l, h, d, c = !1) => {
|
|
225
|
+
if (!(r && l && d && h)) return [ut, ut];
|
|
262
226
|
const u = r / l;
|
|
263
|
-
if (u >
|
|
264
|
-
const v = c ?
|
|
227
|
+
if (u > h / d) {
|
|
228
|
+
const v = c ? h : Math.min(r, h);
|
|
265
229
|
return [v, v / u];
|
|
266
230
|
}
|
|
267
231
|
const g = c ? d : Math.min(l, d);
|
|
268
232
|
return [g * u, g];
|
|
269
|
-
})(e.width, e.height, t,
|
|
270
|
-
return
|
|
271
|
-
}, E1 = (e, i, t,
|
|
233
|
+
})(e.width, e.height, t, n, !0);
|
|
234
|
+
return St({ toolId: zt.id, type: "picture", id: se("picture_"), x: (t - a) / 2, y: (n - o) / 2, width: a, height: o, src: i, img: e, rotation: 0 }, s);
|
|
235
|
+
}, E1 = (e, i, t, n) => new Promise((s, a) => {
|
|
272
236
|
const o = new Image();
|
|
273
237
|
o.onerror = () => {
|
|
274
|
-
|
|
238
|
+
a(new Error("Some images could not be loaded"));
|
|
275
239
|
}, setTimeout(() => {
|
|
276
|
-
|
|
277
|
-
}, 4e3), e instanceof File ? ((r, l,
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
240
|
+
a(new Error("Timeout while loading images"));
|
|
241
|
+
}, 4e3), e instanceof File ? ((r, l, h, d, c, u) => {
|
|
242
|
+
p1(h) ? h.text().then((g) => {
|
|
243
|
+
const v = h1(g);
|
|
244
|
+
r.onload = async () => {
|
|
245
|
+
URL.revokeObjectURL(r.src);
|
|
246
|
+
const w = Pt(r, g, d, c, u);
|
|
247
|
+
l(w);
|
|
248
|
+
}, r.src = v;
|
|
249
|
+
}) : (r.onload = async () => {
|
|
250
|
+
URL.revokeObjectURL(r.src);
|
|
251
|
+
const g = Pt(r, r.src, d, c, u);
|
|
252
|
+
l(g);
|
|
253
|
+
}, r.src = URL.createObjectURL(h));
|
|
254
|
+
})(o, s, e, i, t, n) : ((r, l, h, d, c, u) => {
|
|
289
255
|
r.onload = () => {
|
|
290
256
|
URL.revokeObjectURL(r.src);
|
|
291
|
-
const g =
|
|
257
|
+
const g = Pt(r, h, d, c, u);
|
|
292
258
|
l(g);
|
|
293
|
-
}, u1(
|
|
259
|
+
}, u1(h).then((g) => {
|
|
294
260
|
r.src = g;
|
|
295
261
|
}).catch(() => {
|
|
296
262
|
r.src = "";
|
|
297
263
|
});
|
|
298
|
-
})(o, s, e, i, t,
|
|
299
|
-
}),
|
|
300
|
-
e.font = `${s ? "italic" : ""} ${
|
|
264
|
+
})(o, s, e, i, t, n);
|
|
265
|
+
}), Ht = ["Texte"], bt = (e, i) => ({ ...e, selection: Ke(void 0, e, i) }), D1 = bt, Bt = (e, i, t, n, s, a = ot) => {
|
|
266
|
+
e.font = `${s ? "italic" : ""} ${n ? "bold" : ""} 1px ${a}`;
|
|
301
267
|
const o = i.map((r) => t / e.measureText(r).width);
|
|
302
268
|
return Math.min(...o) || 36;
|
|
303
|
-
}, F1 = (e, i, t,
|
|
304
|
-
const s = { ...i, value: t },
|
|
269
|
+
}, F1 = (e, i, t, n) => {
|
|
270
|
+
const s = { ...i, value: t }, a = ((v, w, M, S, L, b = ot) => {
|
|
305
271
|
v.font = `${L ? "italic" : ""} ${S ? "bold" : ""} ${M}px ${b}`;
|
|
306
272
|
const k = w.map((P) => v.measureText(P).width);
|
|
307
273
|
return Math.max(...k) || 20;
|
|
308
|
-
})(e, s.value, s.fontSize, s.style?.fontBold ?? !1, s.style?.fontItalic ?? !1, s.style?.fontFamily), o = s.fontSize * s.value.length, r = { ...s, width:
|
|
274
|
+
})(e, s.value, s.fontSize, s.style?.fontBold ?? !1, s.style?.fontItalic ?? !1, s.style?.fontFamily), o = s.fontSize * s.value.length, r = { ...s, width: a, height: o }, { center: l } = _(i, n), { center: h } = _(r, n), [d, c] = vi([1, 1], l, i, n), [u, g] = vi([1, 1], h, r, n, [!1, !1]);
|
|
309
275
|
return { ...r, x: r.x - (u - d), y: r.y - (g - c) };
|
|
310
|
-
}, fi = (e, i, t,
|
|
311
|
-
const s = [O(t[0],
|
|
276
|
+
}, fi = (e, i, t, n) => {
|
|
277
|
+
const s = [O(t[0], n), O(t[1], n)];
|
|
312
278
|
switch (i.type) {
|
|
313
279
|
case "brush":
|
|
314
|
-
return ((
|
|
280
|
+
return ((a, o, r) => Je({ toolId: a.id, type: a.type, id: se(`${a.type}_`), points: [[o]], rotation: 0, scaleX: 1, scaleY: 1, style: { opacity: a.settings.opacity.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default } }, r))(i, s, n);
|
|
315
281
|
case "line":
|
|
316
|
-
return ((
|
|
317
|
-
const l = { toolId:
|
|
318
|
-
return
|
|
319
|
-
})(i, s,
|
|
282
|
+
return ((a, o, r) => {
|
|
283
|
+
const l = { toolId: a.id, type: a.type, id: se(`${a.type}_`), points: [o, o], rotation: 0, style: { opacity: a.settings.opacity.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default, lineArrow: a.settings.lineArrow.default } };
|
|
284
|
+
return yt(l, r);
|
|
285
|
+
})(i, s, n);
|
|
320
286
|
case "polygon":
|
|
321
|
-
return ((
|
|
287
|
+
return ((a, o, r) => _e({ toolId: a.id, type: a.type, id: se(`${a.type}_`), points: new Array(a.settings.pointsCount.default).fill(o), rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default, pointsCount: a.settings.pointsCount.default } }, r))(i, s, n);
|
|
322
288
|
case "curve":
|
|
323
|
-
return ((
|
|
289
|
+
return ((a, o, r) => qe({ toolId: a.id, type: a.type, id: se(`${a.type}_`), points: new Array(a.settings.pointsCount.default).fill(o), rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default, pointsCount: a.settings.pointsCount.default } }, r))(i, s, n);
|
|
324
290
|
case "rect":
|
|
325
291
|
case "square":
|
|
326
|
-
return ((
|
|
327
|
-
const d = { toolId:
|
|
328
|
-
return
|
|
329
|
-
})(i, s,
|
|
292
|
+
return ((a, o, r, l = 0, h = 0) => {
|
|
293
|
+
const d = { toolId: a.id, type: a.type, id: se(`${a.type}_`), x: o[0], y: o[1], width: l, height: h, rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default } };
|
|
294
|
+
return Qt(d, r);
|
|
295
|
+
})(i, s, n);
|
|
330
296
|
case "text":
|
|
331
|
-
return ((
|
|
332
|
-
const
|
|
333
|
-
return
|
|
334
|
-
})(e, i, s,
|
|
297
|
+
return ((a, o, r, l) => {
|
|
298
|
+
const h = Bt(a, Ht, 50, o.settings?.fontBold.default ?? !1, o.settings?.fontItalic.default ?? !1, o.settings.fontFamily.default);
|
|
299
|
+
return bt({ toolId: o.id, type: o.type, id: se(`${o.type}_`), x: r[0], y: r[1], value: Ht, fontSize: h, width: 50, height: h * (Ht.length || 1), rotation: 0, style: { opacity: o.settings.opacity.default, strokeColor: o.settings.strokeColor.default, fontFamily: o.settings.fontFamily.default, fontItalic: o.settings.fontItalic.default, fontBold: o.settings.fontBold.default } }, l);
|
|
300
|
+
})(e, i, s, n);
|
|
335
301
|
case "ellipse":
|
|
336
|
-
return ((
|
|
302
|
+
return ((a, o, r) => mt({ toolId: a.id, type: a.type, id: se(`${a.type}_`), x: o[0], y: o[1], radiusX: 0, radiusY: 0, rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default } }, r))(i, s, n);
|
|
337
303
|
case "circle":
|
|
338
|
-
return ((
|
|
304
|
+
return ((a, o, r) => ft({ toolId: a.id, type: a.type, id: se(`${a.type}_`), x: o[0], y: o[1], radius: 0, rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default } }, r))(i, s, n);
|
|
339
305
|
}
|
|
340
306
|
}, c1 = (e, i, t) => {
|
|
341
|
-
if (i.visible === !1)
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
switch (Ot(e, t, i.rotation, a), Oe(e, i.style), i.type) {
|
|
307
|
+
if (i.visible === !1) return;
|
|
308
|
+
const { center: n } = _(i, t);
|
|
309
|
+
switch ($t(e, t, i.rotation, n), Oe(e, i.style), i.type) {
|
|
345
310
|
case "brush":
|
|
346
|
-
((s,
|
|
347
|
-
|
|
311
|
+
((s, a) => {
|
|
312
|
+
a.points.length < 1 || !a.path || s.globalAlpha !== 0 && a.style?.strokeColor !== "transparent" && s.globalAlpha !== 0 && s.stroke(a.path);
|
|
348
313
|
})(e, i);
|
|
349
314
|
break;
|
|
350
315
|
case "text":
|
|
351
|
-
((s,
|
|
352
|
-
if (s.globalAlpha !== 0 &&
|
|
353
|
-
s.font = `${
|
|
354
|
-
for (let o = 0; o <
|
|
355
|
-
s.fillText(n.value[o], n.x, n.y + o * n.fontSize, n.width);
|
|
316
|
+
((s, a) => {
|
|
317
|
+
if (s.globalAlpha !== 0 && a.style?.strokeColor && a.style.strokeColor !== "transparent") {
|
|
318
|
+
s.font = `${a.style?.fontItalic ? "italic" : ""} ${a.style?.fontBold ? "bold" : ""} ${a.fontSize}px ${a.style?.fontFamily ?? ot}`, s.textBaseline = "top", s.fillStyle = a.style.strokeColor;
|
|
319
|
+
for (let o = 0; o < a.value.length; o++) s.fillText(a.value[o], a.x, a.y + o * a.fontSize, a.width);
|
|
356
320
|
}
|
|
357
321
|
})(e, i);
|
|
358
322
|
break;
|
|
359
323
|
case "line":
|
|
360
|
-
((s,
|
|
361
|
-
if (s.globalAlpha !== 0 &&
|
|
362
|
-
|
|
363
|
-
for (const o of
|
|
364
|
-
Oe(s, o.style), P1(s, o);
|
|
324
|
+
((s, a) => {
|
|
325
|
+
if (s.globalAlpha !== 0 && a.path) {
|
|
326
|
+
a.style?.fillColor !== "transparent" && s.fill(a.path), a.style?.strokeColor !== "transparent" && s.stroke(a.path);
|
|
327
|
+
for (const o of a.arrows ?? []) Oe(s, o.style), P1(s, o);
|
|
365
328
|
}
|
|
366
329
|
})(e, i);
|
|
367
330
|
break;
|
|
368
331
|
case "polygon":
|
|
369
|
-
((s,
|
|
370
|
-
|
|
332
|
+
((s, a) => {
|
|
333
|
+
a.path && s.globalAlpha !== 0 && (a.style?.fillColor !== "transparent" && s.fill(a.path), a.style?.strokeColor !== "transparent" && s.stroke(a.path));
|
|
371
334
|
})(e, i);
|
|
372
335
|
break;
|
|
373
336
|
case "curve":
|
|
374
|
-
((s,
|
|
375
|
-
|
|
337
|
+
((s, a) => {
|
|
338
|
+
a.path && s.globalAlpha !== 0 && (a.style?.fillColor !== "transparent" && s.fill(a.path), a.style?.strokeColor !== "transparent" && s.stroke(a.path));
|
|
376
339
|
})(e, i);
|
|
377
340
|
break;
|
|
378
341
|
case "circle":
|
|
379
|
-
((s,
|
|
380
|
-
s.globalAlpha !== 0 &&
|
|
342
|
+
((s, a) => {
|
|
343
|
+
s.globalAlpha !== 0 && a.path && (a.style?.fillColor !== "transparent" && s.fill(a.path), a.style?.strokeColor !== "transparent" && s.stroke(a.path));
|
|
381
344
|
})(e, i);
|
|
382
345
|
break;
|
|
383
346
|
case "ellipse":
|
|
384
|
-
((s,
|
|
385
|
-
s.globalAlpha !== 0 &&
|
|
347
|
+
((s, a) => {
|
|
348
|
+
s.globalAlpha !== 0 && a.path && (a.style?.fillColor !== "transparent" && s.fill(a.path), a.style?.strokeColor !== "transparent" && s.stroke(a.path));
|
|
386
349
|
})(e, i);
|
|
387
350
|
break;
|
|
388
351
|
case "rect":
|
|
@@ -390,132 +353,131 @@ const ci = ({ ctx: e, path: i, rect: t, offset: a, checkFill: s }) => {
|
|
|
390
353
|
A1(e, i);
|
|
391
354
|
break;
|
|
392
355
|
case "picture":
|
|
393
|
-
((s,
|
|
394
|
-
s.globalAlpha !== 0 && (s.beginPath(), s.drawImage(
|
|
356
|
+
((s, a) => {
|
|
357
|
+
s.globalAlpha !== 0 && (s.beginPath(), s.drawImage(a.img, a.x, a.y, a.width, a.height));
|
|
395
358
|
})(e, i);
|
|
396
359
|
}
|
|
397
360
|
e.restore();
|
|
398
361
|
}, N1 = (e, i) => {
|
|
399
362
|
switch (e.type) {
|
|
400
363
|
case "brush":
|
|
401
|
-
return ((t, { selectionPadding:
|
|
402
|
-
const s = t.points.flat(),
|
|
403
|
-
return { x:
|
|
364
|
+
return ((t, { selectionPadding: n }) => {
|
|
365
|
+
const s = t.points.flat(), a = Math.min(...s.map((d) => d[0])), o = Math.min(...s.map((d) => d[1])), r = s.map((d) => Qe(d, a, o, t.scaleX, t.scaleY)), l = Math.max(...r.map((d) => d[0])) + n, h = Math.max(...r.map((d) => d[1])) + n;
|
|
366
|
+
return { x: a - n, width: l - a + n, y: o - n, height: h - o + n };
|
|
404
367
|
})(e, i);
|
|
405
368
|
case "line":
|
|
406
|
-
return ((t,
|
|
369
|
+
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]) + 2 * n.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]) + 2 * n.selectionPadding }))(e, i);
|
|
407
370
|
case "polygon":
|
|
408
371
|
return d1(e, i);
|
|
409
372
|
case "curve":
|
|
410
373
|
return L1(e, i);
|
|
411
374
|
case "circle":
|
|
412
|
-
return ((t,
|
|
375
|
+
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, i);
|
|
413
376
|
case "ellipse":
|
|
414
|
-
return ((t,
|
|
377
|
+
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, i);
|
|
415
378
|
case "rect":
|
|
416
379
|
case "square":
|
|
417
|
-
return
|
|
380
|
+
return gi(e, i);
|
|
418
381
|
case "text":
|
|
419
|
-
return ((t,
|
|
382
|
+
return ((t, n) => ({ x: t.x - n.selectionPadding, width: t.width + 2 * n.selectionPadding, y: t.y - n.selectionPadding, height: t.height + 2 * n.selectionPadding }))(e, i);
|
|
420
383
|
case "picture":
|
|
421
|
-
return ((t,
|
|
384
|
+
return ((t, n) => gi(t, n))(e, i);
|
|
422
385
|
default:
|
|
423
386
|
return { x: 0, y: 0, width: 100, height: 100 };
|
|
424
387
|
}
|
|
425
388
|
}, _ = (e, i) => {
|
|
426
|
-
const t = N1(e, i),
|
|
427
|
-
return { borders: t, center:
|
|
428
|
-
}, R1 = (e, i, t,
|
|
429
|
-
const o = s[0] -
|
|
430
|
-
return { ...e, rotation: C1(d,
|
|
431
|
-
}, I1 = (e, i, t,
|
|
432
|
-
switch (
|
|
389
|
+
const t = N1(e, i), n = ((s) => [s.x + s.width / 2, s.y + s.height / 2])(t);
|
|
390
|
+
return { borders: t, center: n };
|
|
391
|
+
}, R1 = (e, i, t, n, s, a) => {
|
|
392
|
+
const o = s[0] - n[0], r = s[1] - n[1], l = s[0] - i[0], h = s[1] - i[1], d = t.rotation + Math.atan2(h, l) - Math.atan2(r, o);
|
|
393
|
+
return { ...e, rotation: C1(d, a) };
|
|
394
|
+
}, I1 = (e, i, t, n, s, a, o) => {
|
|
395
|
+
switch (n.type) {
|
|
433
396
|
case "line":
|
|
434
|
-
return ((r, l,
|
|
435
|
-
const c = [O(r[0], d), O(r[1], d)], { center: u } = _(l, d), g = $e(c, l.rotation, u, d.canvasOffset), v = re(["points",
|
|
436
|
-
return
|
|
437
|
-
})(t,
|
|
397
|
+
return ((r, l, h, d) => {
|
|
398
|
+
const c = [O(r[0], d), O(r[1], d)], { center: u } = _(l, d), g = $e(c, l.rotation, u, d.canvasOffset), v = re(["points", h.anchor], g, l);
|
|
399
|
+
return yt(v, d);
|
|
400
|
+
})(t, n, s, a);
|
|
438
401
|
case "polygon":
|
|
439
|
-
return ((r, l,
|
|
440
|
-
const c = [O(r[0], d), O(r[1], d)], { center: u } = _(l, d), g = $e(c, l.rotation, u, d.canvasOffset), v = re(["points",
|
|
402
|
+
return ((r, l, h, d) => {
|
|
403
|
+
const c = [O(r[0], d), O(r[1], d)], { center: u } = _(l, d), g = $e(c, l.rotation, u, d.canvasOffset), v = re(["points", h.anchor], g, l);
|
|
441
404
|
return _e(v, d);
|
|
442
|
-
})(t,
|
|
405
|
+
})(t, n, s, a);
|
|
443
406
|
case "curve":
|
|
444
|
-
return ((r, l,
|
|
445
|
-
const c = [O(r[0], d), O(r[1], d)], { center: u } = _(l, d), g = $e(c, l.rotation, u, d.canvasOffset), v = re(["points",
|
|
407
|
+
return ((r, l, h, d) => {
|
|
408
|
+
const c = [O(r[0], d), O(r[1], d)], { center: u } = _(l, d), g = $e(c, l.rotation, u, d.canvasOffset), v = re(["points", h.anchor], g, l);
|
|
446
409
|
return qe(v, d);
|
|
447
|
-
})(t,
|
|
410
|
+
})(t, n, s, a);
|
|
448
411
|
case "brush":
|
|
449
|
-
return ((r, l,
|
|
450
|
-
const { borders: u } = _({ ...l, scaleX: 1, scaleY: 1 }, d), { borders: g } = _(l, d), { borderX: v, borderHeight: w, borderY: M, borderWidth: S } =
|
|
451
|
-
if (!L || !b)
|
|
452
|
-
return l;
|
|
412
|
+
return ((r, l, h, d, c) => {
|
|
413
|
+
const { borders: u } = _({ ...l, scaleX: 1, scaleY: 1 }, d), { borders: g } = _(l, d), { borderX: v, borderHeight: w, borderY: M, borderWidth: S } = Ge(r, l, h, d, c), L = Math.max(0, u.width - 2 * d.selectionPadding), b = Math.max(0, u.height - 2 * d.selectionPadding), k = Math.max(0, S - 2 * d.selectionPadding), P = Math.max(0, w - 2 * d.selectionPadding), E = L ? k / L : 1, A = b ? P / b : 1;
|
|
414
|
+
if (!L || !b) return l;
|
|
453
415
|
const H = Ne(v - g.x), C = Ne(M - g.y);
|
|
454
|
-
return Je({ ...l, points: l.points.map((V) => V.map(([
|
|
455
|
-
})(t,
|
|
416
|
+
return Je({ ...l, points: l.points.map((V) => V.map(([W, y]) => [W + H, y + C])), scaleX: E, scaleY: A }, d);
|
|
417
|
+
})(t, n, s, a, o);
|
|
456
418
|
case "circle":
|
|
457
|
-
return ((r, l,
|
|
458
|
-
const { borderX: c, borderHeight: u, borderY: g, borderWidth: v } =
|
|
459
|
-
return
|
|
460
|
-
})(t,
|
|
419
|
+
return ((r, l, h, d) => {
|
|
420
|
+
const { borderX: c, borderHeight: u, borderY: g, borderWidth: v } = Ge(r, l, h, d, !0);
|
|
421
|
+
return ft({ ...l, radius: Math.max(0, v / 2 - d.selectionPadding), x: c + v / 2, y: g + u / 2 }, d);
|
|
422
|
+
})(t, n, s, a);
|
|
461
423
|
case "ellipse":
|
|
462
|
-
return ((r, l,
|
|
463
|
-
const { borderX: u, borderHeight: g, borderY: v, borderWidth: w } =
|
|
464
|
-
return
|
|
465
|
-
})(t,
|
|
424
|
+
return ((r, l, h, d, c = !1) => {
|
|
425
|
+
const { borderX: u, borderHeight: g, borderY: v, borderWidth: w } = Ge(r, l, h, d, c);
|
|
426
|
+
return mt({ ...l, radiusX: Math.max(0, w / 2 - d.selectionPadding), radiusY: Math.max(0, g / 2 - d.selectionPadding), x: u + w / 2, y: v + g / 2 }, d);
|
|
427
|
+
})(t, n, s, a, o);
|
|
466
428
|
case "rect":
|
|
467
429
|
case "square":
|
|
468
|
-
return ((r, l,
|
|
469
|
-
const { borderX: u, borderHeight: g, borderY: v, borderWidth: w } =
|
|
470
|
-
return
|
|
471
|
-
})(t,
|
|
430
|
+
return ((r, l, h, d, c = !1) => {
|
|
431
|
+
const { borderX: u, borderHeight: g, borderY: v, borderWidth: w } = Ge(r, l, h, d, c);
|
|
432
|
+
return Qt({ ...l, width: Math.max(0, w - 2 * d.selectionPadding), height: Math.max(0, g - 2 * d.selectionPadding), x: u + d.selectionPadding, y: v + d.selectionPadding }, d);
|
|
433
|
+
})(t, n, s, a, i.type === "square" || o);
|
|
472
434
|
case "text":
|
|
473
|
-
return ((r, l,
|
|
474
|
-
const { borderX: u, borderHeight: g, borderY: v, borderWidth: w } =
|
|
475
|
-
return { ...M, fontSize:
|
|
476
|
-
})(e, t,
|
|
435
|
+
return ((r, l, h, d, c) => {
|
|
436
|
+
const { borderX: u, borderHeight: g, borderY: v, borderWidth: w } = Ge(l, h, d, c, !0), M = bt({ ...h, width: Math.max(0, w - 2 * c.selectionPadding), height: Math.max(0, g - 2 * c.selectionPadding), x: u + c.selectionPadding, y: v + c.selectionPadding }, c);
|
|
437
|
+
return { ...M, fontSize: Bt(r, M.value, M.width, M.style?.fontBold ?? !1, M.style?.fontItalic ?? !1, M.style?.fontFamily) };
|
|
438
|
+
})(e, t, n, s, a);
|
|
477
439
|
case "picture":
|
|
478
|
-
return ((r, l,
|
|
479
|
-
const { borderX: u, borderHeight: g, borderY: v, borderWidth: w } =
|
|
480
|
-
return
|
|
481
|
-
})(t,
|
|
440
|
+
return ((r, l, h, d, c) => {
|
|
441
|
+
const { borderX: u, borderHeight: g, borderY: v, borderWidth: w } = Ge(r, l, h, d, !0);
|
|
442
|
+
return St({ ...l, width: Math.max(0, w - 2 * d.selectionPadding), height: Math.max(0, g - 2 * d.selectionPadding), x: u + d.selectionPadding, y: v + d.selectionPadding }, d);
|
|
443
|
+
})(t, n, s, a);
|
|
482
444
|
default:
|
|
483
|
-
return
|
|
445
|
+
return n;
|
|
484
446
|
}
|
|
485
|
-
},
|
|
447
|
+
}, Ft = (e, i, t, n) => {
|
|
486
448
|
switch (i.type) {
|
|
487
449
|
case "rect":
|
|
488
450
|
case "square":
|
|
489
|
-
return ((s,
|
|
451
|
+
return ((s, a, o, r) => Qt({ ...a, x: O(a.x + s[0] - o[0], r), y: O(a.y + s[1] - o[1], r) }, r))(e, i, t, n);
|
|
490
452
|
case "ellipse":
|
|
491
|
-
return ((s,
|
|
453
|
+
return ((s, a, o, r) => mt({ ...a, x: O(a.x + s[0] - o[0], r), y: O(a.y + s[1] - o[1], r) }, r))(e, i, t, n);
|
|
492
454
|
case "circle":
|
|
493
|
-
return ((s,
|
|
455
|
+
return ((s, a, o, r) => ft({ ...a, x: O(a.x + s[0] - o[0], r), y: O(a.y + s[1] - o[1], r) }, r))(e, i, t, n);
|
|
494
456
|
case "picture":
|
|
495
|
-
return ((s,
|
|
457
|
+
return ((s, a, o, r) => St({ ...a, x: O(a.x + s[0] - o[0], r), y: O(a.y + s[1] - o[1], r) }, r))(e, i, t, n);
|
|
496
458
|
case "text":
|
|
497
|
-
return ((s,
|
|
459
|
+
return ((s, a, o, r) => bt({ ...a, x: O(a.x + s[0] - o[0], r), y: O(a.y + s[1] - o[1], r) }, r))(e, i, t, n);
|
|
498
460
|
case "line":
|
|
499
|
-
return ((s,
|
|
461
|
+
return ((s, a, o, r) => yt({ ...a, points: a.points.map(([l, h]) => [O(l + s[0] - o[0], r), O(h + s[1] - o[1], r)]) }, r))(e, i, t, n);
|
|
500
462
|
case "polygon":
|
|
501
|
-
return ((s,
|
|
502
|
-
const { borders: l } = _(
|
|
503
|
-
return _e({ ...
|
|
504
|
-
})(e, i, t,
|
|
463
|
+
return ((s, a, o, r) => {
|
|
464
|
+
const { borders: l } = _(a, r);
|
|
465
|
+
return _e({ ...a, points: a.points.map(([h, d]) => r.gridGap ? [h + O(l.x + s[0] - o[0], r) - l.x, d + O(l.y + s[1] - o[1], r) - l.y] : [O(h + s[0] - o[0], r), O(d + s[1] - o[1], r)]) }, r);
|
|
466
|
+
})(e, i, t, n);
|
|
505
467
|
case "curve":
|
|
506
|
-
return ((s,
|
|
507
|
-
const { borders: l } = _(
|
|
508
|
-
return qe({ ...
|
|
509
|
-
})(e, i, t,
|
|
468
|
+
return ((s, a, o, r) => {
|
|
469
|
+
const { borders: l } = _(a, r);
|
|
470
|
+
return qe({ ...a, points: a.points.map(([h, d]) => r.gridGap ? [h + O(l.x + s[0] - o[0], r) - l.x, d + O(l.y + s[1] - o[1], r) - l.y] : [O(h + s[0] - o[0], r), O(d + s[1] - o[1], r)]) }, r);
|
|
471
|
+
})(e, i, t, n);
|
|
510
472
|
case "brush":
|
|
511
|
-
return ((s,
|
|
512
|
-
const { borders: l } = _(
|
|
513
|
-
return Je({ ...
|
|
514
|
-
})(e, i, t,
|
|
473
|
+
return ((s, a, o, r) => {
|
|
474
|
+
const { borders: l } = _(a, r), h = r.gridGap ? O(l.x + s[0] - o[0], r) - l.x : s[0] - o[0], d = r.gridGap ? O(l.y + s[1] - o[1], r) - l.y : s[1] - o[1];
|
|
475
|
+
return Je({ ...a, points: a.points.map((c) => c.map(([u, g]) => [u + h, g + d])) }, r);
|
|
476
|
+
})(e, i, t, n);
|
|
515
477
|
default:
|
|
516
478
|
return i;
|
|
517
479
|
}
|
|
518
|
-
},
|
|
480
|
+
}, st = (e, i) => {
|
|
519
481
|
switch (e.type) {
|
|
520
482
|
case "rect":
|
|
521
483
|
case "square":
|
|
@@ -539,9 +501,9 @@ const ci = ({ ctx: e, path: i, rect: t, offset: a, checkFill: s }) => {
|
|
|
539
501
|
default:
|
|
540
502
|
return e;
|
|
541
503
|
}
|
|
542
|
-
}, mi = ({ ctx: e, shape: i, settings: t, selectionWidth:
|
|
504
|
+
}, mi = ({ ctx: e, shape: i, settings: t, selectionWidth: n, selectionColor: s, withAnchors: a = !0 }) => {
|
|
543
505
|
const { center: o } = _(i, t);
|
|
544
|
-
switch (
|
|
506
|
+
switch ($t(e, t, i.rotation, o), i.type) {
|
|
545
507
|
case "rect":
|
|
546
508
|
case "square":
|
|
547
509
|
case "circle":
|
|
@@ -549,82 +511,76 @@ const ci = ({ ctx: e, path: i, rect: t, offset: a, checkFill: s }) => {
|
|
|
549
511
|
case "picture":
|
|
550
512
|
case "text":
|
|
551
513
|
case "brush":
|
|
552
|
-
((r, l,
|
|
553
|
-
if (l.selection && (Oe(r, { fillColor: "transparent", strokeColor:
|
|
514
|
+
((r, l, h, d, c, u) => {
|
|
515
|
+
if (l.selection && (Oe(r, { fillColor: "transparent", strokeColor: h, lineWidth: d / c.canvasSize.scaleRatio }), l.selection.shapePath ? r.stroke(l.selection.shapePath) : r.stroke(l.selection.border), u && !l.locked)) {
|
|
554
516
|
l.selection.shapePath && r.stroke(l.selection.border), r.stroke(l.selection.line), Oe(r, { fillColor: "rgb(255,255,255)", strokeColor: "rgb(150,150,150)", lineWidth: 2 / c.canvasSize.scaleRatio });
|
|
555
|
-
for (const g of l.selection.anchors)
|
|
556
|
-
r.fill(g), r.stroke(g);
|
|
517
|
+
for (const g of l.selection.anchors) r.fill(g), r.stroke(g);
|
|
557
518
|
}
|
|
558
|
-
})(e, i, s,
|
|
519
|
+
})(e, i, s, n, t, a);
|
|
559
520
|
break;
|
|
560
521
|
case "polygon":
|
|
561
522
|
case "line":
|
|
562
523
|
case "curve":
|
|
563
|
-
(({ ctx: r, shape: l, withAnchors:
|
|
564
|
-
if (l.selection && (Oe(r, { fillColor: "transparent", strokeColor: c, lineWidth: d / u.canvasSize.scaleRatio }), l.selection.shapePath && r.stroke(l.selection.shapePath),
|
|
524
|
+
(({ ctx: r, shape: l, withAnchors: h, selectionWidth: d, selectionColor: c, settings: u }) => {
|
|
525
|
+
if (l.selection && (Oe(r, { fillColor: "transparent", strokeColor: c, lineWidth: d / u.canvasSize.scaleRatio }), l.selection.shapePath && r.stroke(l.selection.shapePath), h && !l.locked)) {
|
|
565
526
|
Oe(r, { fillColor: "rgb(255,255,255)", strokeColor: "rgb(150,150,150)", lineWidth: 2 / u.canvasSize.scaleRatio });
|
|
566
|
-
for (const g of l.selection.anchors)
|
|
567
|
-
r.fill(g), r.stroke(g);
|
|
527
|
+
for (const g of l.selection.anchors) r.fill(g), r.stroke(g);
|
|
568
528
|
}
|
|
569
|
-
})({ ctx: e, shape: i, withAnchors:
|
|
529
|
+
})({ ctx: e, shape: i, withAnchors: a, selectionWidth: n, selectionColor: s, settings: t });
|
|
570
530
|
}
|
|
571
531
|
e.restore();
|
|
572
|
-
},
|
|
573
|
-
|
|
574
|
-
Oe(
|
|
532
|
+
}, W1 = ({ ctx: e, selectionFrame: i, settings: t }) => {
|
|
533
|
+
$t(e, t), ((n, s, a) => {
|
|
534
|
+
Oe(n, { fillColor: "rgba(170,170,170, 0.1)", strokeColor: "rgb(170,170,170)", lineWidth: 1 / a.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]);
|
|
575
535
|
})(e, i, t), e.restore();
|
|
576
|
-
},
|
|
577
|
-
const i = new DOMParser().parseFromString(e, "text/xml").getElementsByTagName("svg")[0], t = i.getAttribute("width"),
|
|
536
|
+
}, h1 = (e) => {
|
|
537
|
+
const i = new DOMParser().parseFromString(e, "text/xml").getElementsByTagName("svg")[0], t = i.getAttribute("width"), n = i.getAttribute("height");
|
|
578
538
|
let s;
|
|
579
|
-
if (t ||
|
|
580
|
-
s = e;
|
|
539
|
+
if (t || n) s = e;
|
|
581
540
|
else {
|
|
582
541
|
const o = i.getAttribute("viewBox") ?? "0 0 300 300", [, , r, l] = o.split(" ");
|
|
583
|
-
i.setAttribute("width", r ??
|
|
542
|
+
i.setAttribute("width", r ?? ut), i.setAttribute("height", l ?? ut), s = new XMLSerializer().serializeToString(i);
|
|
584
543
|
}
|
|
585
|
-
const
|
|
586
|
-
return URL.createObjectURL(
|
|
587
|
-
},
|
|
544
|
+
const a = new Blob([s], { type: "image/svg+xml" });
|
|
545
|
+
return URL.createObjectURL(a);
|
|
546
|
+
}, p1 = (e) => (e instanceof File ? e.name : e).includes(".svg"), u1 = (e) => p1(e) ? fetch(e).then((i) => i.text()).then((i) => h1(i)) : fetch(e).then((i) => i.blob()).then((i) => URL.createObjectURL(i)), yi = (e, i) => {
|
|
588
547
|
const t = document.createElement("a");
|
|
589
548
|
t.href = e, t.download = i, document.body.appendChild(t), t.click(), document.body.removeChild(t);
|
|
590
|
-
},
|
|
591
|
-
const
|
|
592
|
-
|
|
593
|
-
const
|
|
594
|
-
return
|
|
595
|
-
}, Qi = (e, i, t,
|
|
549
|
+
}, z1 = (e) => e.src.includes("<svg") ? e.src : ((i) => {
|
|
550
|
+
const t = document.createElement("canvas");
|
|
551
|
+
t.width = i.width, t.height = i.height;
|
|
552
|
+
const n = t.getContext("2d");
|
|
553
|
+
return n ? (n.drawImage(i, 0, 0), t.toDataURL("image/png")) : "";
|
|
554
|
+
})(e.img), Qi = (e, i, t, n) => {
|
|
596
555
|
const s = document.createElement("canvas");
|
|
597
556
|
s.width = i, s.height = t;
|
|
598
|
-
const
|
|
599
|
-
if (!
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
for (let o = e.length - 1; o >= 0; o--)
|
|
603
|
-
c1(n, e[o], re(["canvasSize", "scaleRatio"], 1, a));
|
|
557
|
+
const a = s.getContext("2d");
|
|
558
|
+
if (!a) return "";
|
|
559
|
+
a.clearRect(0, 0, i, t), o1(a);
|
|
560
|
+
for (let o = e.length - 1; o >= 0; o--) c1(a, e[o], re(["canvasSize", "scaleRatio"], 1, n));
|
|
604
561
|
return s.toDataURL("image/png");
|
|
605
562
|
}, O1 = (e, i, t) => {
|
|
606
563
|
return s = Gt(e, i, t), `data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(s))}`;
|
|
607
564
|
var s;
|
|
608
565
|
}, $1 = (e) => {
|
|
609
566
|
const i = ["img", "id", "selection", "path", "arrows"];
|
|
610
|
-
return e.map((t) => t.type !== "picture" || t.src.startsWith("http") ?
|
|
611
|
-
}, Gt = (e, i, t) => ({ shapes: $1(e), config: { width: i, height: t } }), Si = (e, i) =>
|
|
612
|
-
const i = J([]), t = J({ dataChanged: [] }), [
|
|
613
|
-
d((f) => s1(f.states[f.cursor].shapes, i.current) ? f : { states: [...f.states.slice(0, f.cursor + 1), { shapes: i.current, selectedShape:
|
|
614
|
-
}, [
|
|
567
|
+
return e.map((t) => t.type !== "picture" || t.src.startsWith("http") ? At(i, t) : At(i, { ...t, src: z1(t) }));
|
|
568
|
+
}, Gt = (e, i, t) => ({ shapes: $1(e), config: { width: i, height: t } }), Si = (e, i) => st({ ...e, id: se(`${e.type}_`) }, i), U1 = (e) => {
|
|
569
|
+
const i = J([]), t = J({ dataChanged: [] }), [n, s] = z(void 0), [a, o] = z(void 0), [r, l] = z(void 0), [h, d] = z({ states: [{ shapes: [], selectedShape: void 0, source: "user" }], cursor: 0 }), c = h.cursor > 0, u = h.cursor < h.states.length - 1, g = i.current.length > 0, v = R(() => {
|
|
570
|
+
d((f) => s1(f.states[f.cursor].shapes, i.current) ? f : { states: [...f.states.slice(0, f.cursor + 1), { shapes: i.current, selectedShape: a, source: "user" }], cursor: f.cursor + 1 });
|
|
571
|
+
}, [a]), w = R((f) => {
|
|
615
572
|
i.current = [f, ...i.current];
|
|
616
573
|
}, []), M = R((f, m, Q) => {
|
|
617
|
-
if (f.target && "className" in f.target && ![i1,
|
|
618
|
-
|
|
619
|
-
const D = i.current.find((N) => N.id === n?.id ? !!at(n, Q, e) : !!l1(m, N, Q, e));
|
|
574
|
+
if (f.target && "className" in f.target && ![i1, n1].includes(f.target.className)) return void l(void 0);
|
|
575
|
+
const D = i.current.find((N) => N.id === a?.id ? !!at(a, Q, e) : !!l1(m, N, Q, e));
|
|
620
576
|
l(D);
|
|
621
|
-
}, [e,
|
|
577
|
+
}, [e, a]), S = R(async (f, m = 300, Q = 300) => {
|
|
622
578
|
const D = await E1(f, m, Q, e);
|
|
623
579
|
return w(D), v(), D;
|
|
624
580
|
}, [w, v, e]), L = R((f, m = !1) => {
|
|
625
|
-
i.current = i.current.map((Q) => Q.id ===
|
|
626
|
-
}, [
|
|
627
|
-
const m = f.map((Q) =>
|
|
581
|
+
i.current = i.current.map((Q) => Q.id === a?.id ? f : Q), o((Q) => Q?.id === f.id ? f : Q), m && v();
|
|
582
|
+
}, [a, v]), b = R((f) => {
|
|
583
|
+
const m = f.map((Q) => At(["chosen"], Q));
|
|
628
584
|
i.current = m, v();
|
|
629
585
|
}, [v]), k = R((f) => {
|
|
630
586
|
o((m) => m?.id === f.id ? void 0 : m), i.current = i.current.filter((m) => m.id !== f.id), v();
|
|
@@ -644,205 +600,191 @@ const ci = ({ ctx: e, path: i, rect: t, offset: a, checkFill: s }) => {
|
|
|
644
600
|
b(D < N ? [...Q.slice(0, D), ...Q.slice(D + 1, N + 1), Q[D], ...Q.slice(N + 1, Q.length)] : [...Q.slice(0, N), Q[D], ...Q.slice(N, D), ...Q.slice(D + 1, Q.length)]);
|
|
645
601
|
}, [b]), V = R((f) => {
|
|
646
602
|
const m = i.current, Q = m.findIndex((N) => N.id === f.id);
|
|
647
|
-
if (Q < 0)
|
|
648
|
-
return;
|
|
603
|
+
if (Q < 0) return;
|
|
649
604
|
const D = re("visible", f.visible === !1, f);
|
|
650
605
|
o((N) => N?.id === D.id ? D : N), b(re(Q, D, m));
|
|
651
|
-
}, [b]),
|
|
606
|
+
}, [b]), W = R((f) => {
|
|
652
607
|
const m = i.current, Q = m.findIndex((N) => N.id === f.id);
|
|
653
|
-
if (Q < 0)
|
|
654
|
-
return;
|
|
608
|
+
if (Q < 0) return;
|
|
655
609
|
const D = re("locked", !f.locked, f);
|
|
656
610
|
o((N) => N?.id === D.id ? D : N), b(re(Q, D, m));
|
|
657
611
|
}, [b]), y = R((f, m) => {
|
|
658
612
|
Object.hasOwn(t.current, f) && (t.current[f] = [...t.current[f], m]);
|
|
659
613
|
}, []), F = R((f, m) => {
|
|
660
|
-
if (Object.hasOwn(t.current, f))
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
} else
|
|
665
|
-
t.current[f] = [];
|
|
614
|
+
if (Object.hasOwn(t.current, f)) if (m) {
|
|
615
|
+
const Q = t.current[f].findIndex((D) => D === m);
|
|
616
|
+
t.current[f] = [...t.current[f].slice(0, Q), ...t.current[f].slice(Q + 1)];
|
|
617
|
+
} else t.current[f] = [];
|
|
666
618
|
}, []), { canvasSize: { width: x, height: T } } = e;
|
|
667
|
-
|
|
668
|
-
const f =
|
|
669
|
-
for (const Q of t.current.dataChanged)
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
i.current = i.current.map((f) => nt(f, e)), o((f) => f === void 0 ? void 0 : i.current.find((m) => m.id === f.id));
|
|
619
|
+
G(() => {
|
|
620
|
+
const f = h.states[h.cursor], m = Gt(f.shapes, x, T);
|
|
621
|
+
for (const Q of t.current.dataChanged) Q(m, f.source);
|
|
622
|
+
}, [x, T, h]), G(() => {
|
|
623
|
+
i.current = i.current.map((f) => st(f, e)), o((f) => f === void 0 ? void 0 : i.current.find((m) => m.id === f.id));
|
|
673
624
|
}, [e]);
|
|
674
625
|
const Z = R((f, m) => {
|
|
675
626
|
s((Q) => {
|
|
676
627
|
const D = [Q?.[0] ?? [m[0], m[1]], [m[0], m[1]]], N = i.current.filter((Y) => ((de, $, U, oe) => {
|
|
677
|
-
const { selectionPadding: ee, canvasOffset: te } = oe, { center:
|
|
678
|
-
if (!be)
|
|
679
|
-
|
|
680
|
-
if (Me.width <= 1 || Me.height <= 1 || !("path" in $) || !$.path)
|
|
681
|
-
return !0;
|
|
628
|
+
const { selectionPadding: ee, canvasOffset: te } = oe, { center: fe, borders: ke } = _($, oe), ie = $e(U[0], $.rotation, fe, te), j = $e(U[1], $.rotation, fe, te), Se = Math.round(Math.min(ie[0], j[0]) - ee / 2), Ee = Math.round(Math.max(ie[0], j[0]) + ee), Le = Math.round(Math.min(ie[1], j[1]) - ee / 2), me = { x: Se, y: Le, width: Ee - Se, height: Math.round(Math.max(ie[1], j[1]) + ee) - Le }, be = ci(ke, me);
|
|
629
|
+
if (!be) return !1;
|
|
630
|
+
if (ke.width <= 1 || ke.height <= 1 || !("path" in $) || !$.path) return !0;
|
|
682
631
|
if (de.lineWidth = ($.style?.lineWidth ?? 0) + 10, $.type === "brush") {
|
|
683
|
-
const
|
|
632
|
+
const ae = $.points.flat(), Ve = Math.min(...ae.map((ce) => ce[0])), Ie = Math.min(...ae.map((ce) => ce[1]));
|
|
684
633
|
for (const ce of $.points) {
|
|
685
|
-
if (ce.length < 1)
|
|
686
|
-
break;
|
|
634
|
+
if (ce.length < 1) break;
|
|
687
635
|
if (ce.length < 2) {
|
|
688
|
-
const
|
|
689
|
-
if (r1(be, { x:
|
|
690
|
-
return !0;
|
|
636
|
+
const ye = Qe(ce[0], Ve, Ie, $.scaleX, $.scaleY);
|
|
637
|
+
if (r1(be, { x: ye[0], y: ye[1], radius: ($.style?.lineWidth ?? 1) / 2 })) return !0;
|
|
691
638
|
}
|
|
692
|
-
for (let
|
|
693
|
-
const
|
|
639
|
+
for (let ye = 0; ye < ce.length - 1; ye++) {
|
|
640
|
+
const ne = Qe(ce[ye], Ve, Ie, $.scaleX, $.scaleY), Pe = Qe(ce[ye + 1], Ve, Ie, $.scaleX, $.scaleY), Ue = ci({ x: Math.min(ne[0], Pe[0]), y: Math.min(ne[1], Pe[1]), width: Math.abs(ne[0] - Pe[0]), height: Math.abs(ne[1] - Pe[1]) }, me);
|
|
694
641
|
if (Ue) {
|
|
695
|
-
const
|
|
696
|
-
if (
|
|
697
|
-
return !0;
|
|
642
|
+
const He = new Path2D();
|
|
643
|
+
if (He.moveTo(...ne), He.lineTo(...Pe), hi({ ctx: de, path: He, rect: Ue, offset: 10, checkFill: !1 })) return !0;
|
|
698
644
|
}
|
|
699
645
|
}
|
|
700
646
|
}
|
|
701
647
|
return !1;
|
|
702
648
|
}
|
|
703
649
|
const De = !(!$.style?.fillColor || $.style?.fillColor === "transparent");
|
|
704
|
-
return
|
|
650
|
+
return hi({ ctx: de, path: $.path, rect: be, offset: 10, checkFill: De });
|
|
705
651
|
})(f, Y, D, e));
|
|
706
652
|
return o(N?.[0]), D;
|
|
707
653
|
});
|
|
708
654
|
}, [e]);
|
|
709
|
-
return { registerEvent: y, unregisterEvent: F, shapesRef: i, selectedShape:
|
|
655
|
+
return { registerEvent: y, unregisterEvent: F, shapesRef: i, selectedShape: a, hoveredShape: r, selectionFrame: n, setSelectionFrame: s, refreshSelectedShapes: Z, addShape: w, addPictureShape: S, moveShapes: C, saveShapes: v, setSelectedShape: o, refreshHoveredShape: M, toggleShapeVisibility: V, toggleShapeLock: W, removeShape: k, updateShape: L, backwardShape: E, forwardShape: A, clearShapes: H, canGoBackward: c, canGoForward: u, canClear: g };
|
|
710
656
|
}, bi = (e, i = !1) => {
|
|
711
|
-
const t = (s,
|
|
712
|
-
if (Array.isArray(s))
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
if (typeof s != "object")
|
|
716
|
-
return null;
|
|
657
|
+
const t = (s, a) => {
|
|
658
|
+
if (Array.isArray(s)) return a;
|
|
659
|
+
}, n = e.map((s) => {
|
|
660
|
+
if (typeof s != "object") return null;
|
|
717
661
|
switch (s.type) {
|
|
718
662
|
case "brush":
|
|
719
|
-
return
|
|
663
|
+
return Me(t, $i, s);
|
|
720
664
|
case "circle":
|
|
721
|
-
return
|
|
665
|
+
return Me(t, ji, s);
|
|
722
666
|
case "curve":
|
|
723
|
-
return
|
|
667
|
+
return Me(t, Gi, s);
|
|
724
668
|
case "ellipse":
|
|
725
|
-
return
|
|
669
|
+
return Me(t, _i, s);
|
|
726
670
|
case "line":
|
|
727
|
-
return
|
|
671
|
+
return Me(t, Ui, s);
|
|
728
672
|
case "polygon":
|
|
729
|
-
return
|
|
673
|
+
return Me(t, Bi, s);
|
|
730
674
|
case "rect":
|
|
731
|
-
return
|
|
675
|
+
return Me(t, Xi, s);
|
|
732
676
|
case "square":
|
|
733
|
-
return
|
|
677
|
+
return Me(t, Yi, s);
|
|
734
678
|
case "text":
|
|
735
|
-
return
|
|
679
|
+
return Me(t, qi, s);
|
|
736
680
|
}
|
|
737
681
|
return null;
|
|
738
682
|
});
|
|
739
|
-
return
|
|
740
|
-
},
|
|
741
|
-
const { layersManipulation: o, brushAlgo: r, isBrushShapeDoneOnMouseUp: l, grid:
|
|
742
|
-
A.current =
|
|
743
|
-
}, []), [
|
|
744
|
-
const [tt,
|
|
745
|
-
return
|
|
746
|
-
if (!
|
|
747
|
-
const
|
|
748
|
-
|
|
683
|
+
return Ot(i ? [...n, zt] : n);
|
|
684
|
+
}, Vn = ({ width: e = 1e3, height: i = 600, shapes: t, mode: n = "editor", disabled: s = !1, options: a = ai }) => {
|
|
685
|
+
const { layersManipulation: o, brushAlgo: r, isBrushShapeDoneOnMouseUp: l, grid: h, canGrow: d, canShrink: c, withExport: u, withLoadAndSave: g, withUploadPicture: v, withUrlPicture: w, withSkeleton: M, withFrameSelection: S, clearCallback: L, availableTools: b, canvasSelectionPadding: k } = { ...ai, ...a }, P = n !== "viewer", E = s || !P, A = J(null), H = J(null), C = J(!1), V = R((B) => {
|
|
686
|
+
A.current = B;
|
|
687
|
+
}, []), [W, y] = z(Ze), [F, x] = z(h), [T, Z] = z({ width: e, height: i, scaleRatio: 1 }), [f, m] = z([0, 0]), Q = Di(() => ({ brushAlgo: r, isBrushShapeDoneOnMouseUp: l, canvasSize: T, canvasOffset: f, gridGap: F, selectionPadding: k }), [k, F, r, l, f, T]), [D, N] = z(bi(b, v || w)), { isInsideComponent: Y } = (({ disabled: B, componentRef: we }) => {
|
|
688
|
+
const [tt, We] = z(!1);
|
|
689
|
+
return G(() => {
|
|
690
|
+
if (!B) {
|
|
691
|
+
const Te = (ze) => {
|
|
692
|
+
We(a1(ze, we.current));
|
|
749
693
|
};
|
|
750
|
-
return document.addEventListener("mousedown",
|
|
751
|
-
document.removeEventListener("mousedown",
|
|
694
|
+
return document.addEventListener("mousedown", Te, { passive: !0 }), document.addEventListener("touchstart", Te, { passive: !0 }), () => {
|
|
695
|
+
document.removeEventListener("mousedown", Te), document.removeEventListener("touchstart", Te);
|
|
752
696
|
};
|
|
753
697
|
}
|
|
754
|
-
|
|
755
|
-
}, [
|
|
756
|
-
})({ disabled: E, componentRef: A }), { registerEvent: de, unregisterEvent: $, shapesRef: U, selectedShape: oe, selectionFrame: ee, hoveredShape: te, addShape:
|
|
757
|
-
j(void 0), y(
|
|
758
|
-
}, [j]),
|
|
759
|
-
|
|
760
|
-
}, [
|
|
761
|
-
y(Ze), j(
|
|
762
|
-
}, [j]),
|
|
763
|
-
const
|
|
764
|
-
if (!
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
throw new Error();
|
|
771
|
-
yi(G, "drawing.png");
|
|
698
|
+
We(!1);
|
|
699
|
+
}, [B, we]), { isInsideComponent: tt };
|
|
700
|
+
})({ disabled: E, componentRef: A }), { registerEvent: de, unregisterEvent: $, shapesRef: U, selectedShape: oe, selectionFrame: ee, hoveredShape: te, addShape: fe, addPictureShape: ke, moveShapes: ie, setSelectedShape: j, setSelectionFrame: Se, refreshSelectedShapes: Ee, refreshHoveredShape: Le, removeShape: me, updateShape: be, backwardShape: De, forwardShape: ae, clearShapes: Ve, saveShapes: Ie, toggleShapeVisibility: ce, toggleShapeLock: ye, canGoBackward: ne, canGoForward: Pe, canClear: Ue } = U1(Q), He = R((B) => {
|
|
701
|
+
j(void 0), y(B);
|
|
702
|
+
}, [j]), Be = R((B, we) => {
|
|
703
|
+
Ve(B, we), He(Ze), m([0, 0]);
|
|
704
|
+
}, [He, Ve]), rt = R((B) => {
|
|
705
|
+
y(Ze), j(B);
|
|
706
|
+
}, [j]), Ct = R(() => {
|
|
707
|
+
const B = O1(U.current, e, i);
|
|
708
|
+
if (!B) throw new Error("L'encodage a échoué");
|
|
709
|
+
yi(B, "drawing.json");
|
|
710
|
+
}, [U, e, i]), wt = R(() => {
|
|
711
|
+
const B = Qi(U.current, e, i, Q);
|
|
712
|
+
if (!B) throw new Error();
|
|
713
|
+
yi(B, "drawing.png");
|
|
772
714
|
}, [U, e, i, Q]);
|
|
773
|
-
|
|
715
|
+
G(() => {
|
|
774
716
|
Y || j(void 0);
|
|
775
717
|
}, [Y, j]);
|
|
776
|
-
const Ce = R(async (
|
|
777
|
-
const tt = await (async (
|
|
778
|
-
if (!
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
if (
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
URL.revokeObjectURL(Te.src), xt();
|
|
787
|
-
}, Te.onerror = () => {
|
|
718
|
+
const Ce = R(async (B, we) => {
|
|
719
|
+
const tt = await (async (We, Te) => {
|
|
720
|
+
if (!We) return [];
|
|
721
|
+
const ze = [], xt = Ot(We.map((pe) => {
|
|
722
|
+
if (!pe || !t1.includes(pe.type)) return null;
|
|
723
|
+
if (pe.type === "picture") {
|
|
724
|
+
const xe = new Image(), g1 = new Promise((it, v1) => {
|
|
725
|
+
xe.onload = () => {
|
|
726
|
+
URL.revokeObjectURL(xe.src), it();
|
|
727
|
+
}, xe.onerror = () => {
|
|
788
728
|
v1(new Error("Some images could not be loaded"));
|
|
789
729
|
};
|
|
790
730
|
});
|
|
791
|
-
|
|
792
|
-
|
|
731
|
+
if (ze.push(g1), pe.src.startsWith("http")) u1(pe.src).then((it) => {
|
|
732
|
+
xe.src = it;
|
|
793
733
|
}).catch(() => {
|
|
794
|
-
|
|
795
|
-
})
|
|
734
|
+
xe.src = "";
|
|
735
|
+
});
|
|
736
|
+
else if (pe.src.includes("<svg")) {
|
|
737
|
+
const it = new Blob([pe.src], { type: "image/svg+xml" });
|
|
738
|
+
xe.src = URL.createObjectURL(it);
|
|
739
|
+
} else xe.src = pe.src;
|
|
740
|
+
return Si({ ...pe, img: xe }, Te);
|
|
796
741
|
}
|
|
797
|
-
return Si(
|
|
742
|
+
return Si(pe, Te);
|
|
798
743
|
}));
|
|
799
|
-
return await Promise.all(
|
|
800
|
-
})(
|
|
801
|
-
|
|
802
|
-
}, [
|
|
803
|
-
Ce(
|
|
744
|
+
return await Promise.all(ze), xt;
|
|
745
|
+
})(B, Q);
|
|
746
|
+
Be(tt, we);
|
|
747
|
+
}, [Be, Q]), q = R((B = [], we = !0) => {
|
|
748
|
+
Ce(B, { clearHistory: we, source: "remote" });
|
|
804
749
|
}, [Ce]);
|
|
805
750
|
C.current || (C.current = !0, t && Ce(t, { clearHistory: !0, source: "remote" }));
|
|
806
|
-
const
|
|
807
|
-
const we = await (async (tt) => new Promise((
|
|
808
|
-
const
|
|
809
|
-
|
|
810
|
-
const
|
|
811
|
-
if (!
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
}))(G);
|
|
751
|
+
const ve = R(async (B) => {
|
|
752
|
+
const we = await (async (tt) => new Promise((We, Te) => {
|
|
753
|
+
const ze = new FileReader();
|
|
754
|
+
ze.onload = (xt) => {
|
|
755
|
+
const pe = xt.target?.result;
|
|
756
|
+
if (!pe) return Te("Impossible de récupérer les données du fichier");
|
|
757
|
+
const xe = JSON.parse(pe);
|
|
758
|
+
We(xe);
|
|
759
|
+
}, ze.readAsText(tt);
|
|
760
|
+
}))(B);
|
|
817
761
|
await Ce(we.shapes ?? [], { clearHistory: !0, source: "remote" });
|
|
818
|
-
}, [Ce]),
|
|
819
|
-
typeof L != "string" ? Ce(L(), { clearHistory: !1, source: "user" }) : L === "defaultShapes" && t !== void 0 ? Ce(t, { clearHistory: !1, source: "user" }) :
|
|
820
|
-
}, [
|
|
821
|
-
|
|
762
|
+
}, [Ce]), lt = R(() => {
|
|
763
|
+
typeof L != "string" ? Ce(L(), { clearHistory: !1, source: "user" }) : L === "defaultShapes" && t !== void 0 ? Ce(t, { clearHistory: !1, source: "user" }) : Be([], { clearHistory: !1, source: "user" });
|
|
764
|
+
}, [Be, Ce, t, L]);
|
|
765
|
+
G(() => {
|
|
822
766
|
N(bi(b, v || w));
|
|
823
767
|
}, [b, v, w]);
|
|
824
768
|
const Fe = { canvas: H, editor: A, setEditor: V };
|
|
825
|
-
return { editorProps: { shapesRef: U, addPictureShape:
|
|
826
|
-
},
|
|
769
|
+
return { editorProps: { shapesRef: U, addPictureShape: ke, moveShapes: ie, toggleShapeVisibility: ce, toggleShapeLock: ye, canGoBackward: ne, canGoForward: Pe, canClear: Ue, selectedShape: oe, removeShape: me, updateShape: be, backwardShape: De, forwardShape: ae, refs: Fe, width: e, height: i, canvasSize: T, selectTool: He, selectShape: rt, activeTool: W, setActiveTool: y, setAvailableTools: N, isEditMode: P, isDisabled: E, availableTools: D, gridGap: F, setGridGap: x, loadFile: ve, exportPicture: wt, exportData: Ct, clearCanvas: lt, settings: Q, canvas: { canGrow: d, canShrink: c, layersManipulation: o, withExport: u, withLoadAndSave: g, withUploadPicture: v, withUrlPicture: w } }, canvasProps: { shapesRef: U, selectedShape: oe, selectionFrame: ee, hoveredShape: te, addShape: fe, setSelectedShape: j, setSelectionFrame: Se, refreshSelectedShapes: Ee, refreshHoveredShape: Le, removeShape: me, updateShape: be, backwardShape: De, forwardShape: ae, saveShapes: Ie, refs: Fe, width: e, height: i, settings: Q, canvasSize: T, setCanvasSize: Z, setCanvasOffset: m, selectShape: rt, activeTool: W, setActiveTool: y, isInsideComponent: Y, isEditMode: P, isDisabled: E, canvas: { withSkeleton: M, withFrameSelection: S, canGrow: d, canShrink: c } }, registerEvent: de, unregisterEvent: $, resetCanvas: q, getCurrentImage: () => H.current ? Qi(U.current, e, i, Q) : void 0, getCurrentData: () => Gt(U.current, e, i) };
|
|
770
|
+
}, B1 = (e, i, t, n, s, a, o) => {
|
|
827
771
|
let r = !1;
|
|
828
772
|
if (s) {
|
|
829
|
-
r = at(s, t,
|
|
830
|
-
const
|
|
831
|
-
if (d.mode === "translate")
|
|
832
|
-
return { mode: "translate", cursorStartPosition: u, originalShape: c };
|
|
773
|
+
r = at(s, t, n, !0, a ? 20 : void 0);
|
|
774
|
+
const h = ((d, c, u, g) => {
|
|
775
|
+
if (d.mode === "translate") return { mode: "translate", cursorStartPosition: u, originalShape: c };
|
|
833
776
|
if (d.mode === "rotate") {
|
|
834
777
|
const { center: v } = _(c, g);
|
|
835
778
|
return { mode: "rotate", cursorStartPosition: u, originalShape: c, center: [v[0], v[1]] };
|
|
836
779
|
}
|
|
837
780
|
return d.mode === "resize" ? { mode: "resize", cursorStartPosition: u, originalShape: c, anchor: d.anchor } : void 0;
|
|
838
|
-
})(r || { mode: "default" }, s, t,
|
|
839
|
-
if (
|
|
840
|
-
return { shape: s, mode: p };
|
|
781
|
+
})(r || { mode: "default" }, s, t, n);
|
|
782
|
+
if (h?.mode === "resize" || h?.mode === "rotate") return { shape: s, mode: h };
|
|
841
783
|
}
|
|
842
|
-
const l = i.find((
|
|
784
|
+
const l = i.find((h) => h.id === s?.id ? !!r : !!l1(e, h, t, n));
|
|
843
785
|
return l ? { shape: l, mode: { mode: "translate", cursorStartPosition: t, originalShape: l } } : { shape: void 0, mode: { mode: o ? "selectionFrame" : "default" } };
|
|
844
|
-
},
|
|
845
|
-
const [A, H] =
|
|
786
|
+
}, G1 = ({ disabled: e = !1, addShape: i, drawCanvasRef: t, setActiveTool: n, refreshHoveredShape: s, shapes: a, selectionMode: o, activeTool: r, isInsideComponent: l, setCanvasOffset: h, selectedShape: d, selectionCanvasRef: c, canvasOffsetStartPosition: u, refreshSelectedShapes: g, setSelectedShape: v, setSelectionFrame: w, setCanvasOffsetStartPosition: M, updateSingleShape: S, saveShapes: L, setSelectionMode: b, settings: k, isShiftPressed: P, withFrameSelection: E }) => {
|
|
787
|
+
const [A, H] = z({ mode: "default" }), { registerDoubleClickEvent: C, unRegisterDoubleClickEvent: V } = (() => {
|
|
846
788
|
const y = J(void 0), F = J(void 0), x = (T) => {
|
|
847
789
|
const Z = (/* @__PURE__ */ new Date()).getTime();
|
|
848
790
|
y.current && Z < y.current + 300 && F.current?.(T), y.current = (/* @__PURE__ */ new Date()).getTime();
|
|
@@ -853,60 +795,48 @@ const ci = ({ ctx: e, path: i, rect: t, offset: a, checkFill: s }) => {
|
|
|
853
795
|
T.removeEventListener("click", x), T.removeEventListener("touchend", x);
|
|
854
796
|
} };
|
|
855
797
|
})();
|
|
856
|
-
|
|
798
|
+
G(() => {
|
|
857
799
|
const y = (F) => ((x, T, Z, f, m, Q, D, N, Y, de, $, U, oe) => {
|
|
858
800
|
const ee = T.current?.getContext("2d");
|
|
859
|
-
if (!ee)
|
|
860
|
-
return;
|
|
801
|
+
if (!ee) return;
|
|
861
802
|
const te = Vt(x, T.current, U);
|
|
862
|
-
if (Z.type !== "move" || Q === void 0)
|
|
863
|
-
if (m.mode
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
if (l)
|
|
879
|
-
return document.addEventListener("mousemove", y), document.addEventListener("touchmove", y), () => {
|
|
880
|
-
document.removeEventListener("mousemove", y), document.removeEventListener("touchmove", y);
|
|
881
|
-
};
|
|
882
|
-
}, [l, c, d, o, u, S, r, p, s, g, k, P]);
|
|
883
|
-
const { isBrushShapeDoneOnMouseUp: z } = k;
|
|
884
|
-
return B(() => {
|
|
803
|
+
if (Z.type !== "move" || Q === void 0) if (m.mode !== "selectionFrame") {
|
|
804
|
+
if (di(x) || N(x, ee, te, U), f !== void 0 && !f.locked) if (m.mode === "default" || m.mode === "textedition") D(at(f, te, U, !0) || { mode: "default" });
|
|
805
|
+
else {
|
|
806
|
+
const fe = T.current?.getContext("2d");
|
|
807
|
+
if (!fe) return;
|
|
808
|
+
Y(w1(fe, f, te, m, U, oe));
|
|
809
|
+
}
|
|
810
|
+
} else $(ee, te, U);
|
|
811
|
+
else de([te[0] - Q[0], te[1] - Q[1]]);
|
|
812
|
+
})(F, c, r, d, o, u, H, s, S, h, g, k, P);
|
|
813
|
+
if (l) return document.addEventListener("mousemove", y), document.addEventListener("touchmove", y), () => {
|
|
814
|
+
document.removeEventListener("mousemove", y), document.removeEventListener("touchmove", y);
|
|
815
|
+
};
|
|
816
|
+
}, [l, c, d, o, u, S, r, h, s, g, k, P]);
|
|
817
|
+
const { isBrushShapeDoneOnMouseUp: W } = k;
|
|
818
|
+
return G(() => {
|
|
885
819
|
const y = () => {
|
|
886
|
-
o.mode !== "textedition" && o.mode !== "default" && (o.mode === "brush" &&
|
|
820
|
+
o.mode !== "textedition" && o.mode !== "default" && (o.mode === "brush" && W && v(void 0), b({ mode: "default" }), w(void 0), L());
|
|
887
821
|
};
|
|
888
822
|
return l && (document.addEventListener("mouseup", y), document.addEventListener("touchend", y)), () => {
|
|
889
823
|
l && (document.removeEventListener("mouseup", y), document.removeEventListener("touchend", y));
|
|
890
824
|
};
|
|
891
|
-
}, [l, o,
|
|
825
|
+
}, [l, o, W, L, w, b, v]), G(() => {
|
|
892
826
|
const y = c.current;
|
|
893
|
-
if (!y)
|
|
894
|
-
return;
|
|
827
|
+
if (!y) return;
|
|
895
828
|
const F = y.getContext("2d");
|
|
896
|
-
if (!F || e)
|
|
897
|
-
return;
|
|
829
|
+
if (!F || e) return;
|
|
898
830
|
const x = (T) => {
|
|
899
831
|
T.preventDefault();
|
|
900
832
|
const Z = Vt(T, c.current, k);
|
|
901
833
|
if (r.type === "selection") {
|
|
902
|
-
const { shape: f, mode: m } =
|
|
834
|
+
const { shape: f, mode: m } = B1(F, a, Z, k, d, di(T), E);
|
|
903
835
|
v(f), b(m), m.mode === "selectionFrame" && w([[Z[0], Z[1]], [Z[0], Z[1]]]);
|
|
904
|
-
} else if (r.type === "move")
|
|
905
|
-
M(Z);
|
|
836
|
+
} else if (r.type === "move") M(Z);
|
|
906
837
|
else if (t1.some((f) => f === r.type)) {
|
|
907
838
|
const f = t.current?.getContext("2d");
|
|
908
|
-
if (!f)
|
|
909
|
-
return;
|
|
839
|
+
if (!f) return;
|
|
910
840
|
if (r.type === "brush") {
|
|
911
841
|
if (d?.type === "brush") {
|
|
912
842
|
const m = ((Q, D, N) => {
|
|
@@ -916,21 +846,20 @@ const ci = ({ ctx: e, path: i, rect: t, offset: a, checkFill: s }) => {
|
|
|
916
846
|
S(m);
|
|
917
847
|
} else {
|
|
918
848
|
const m = fi(f, r, Z, k);
|
|
919
|
-
if (!m)
|
|
920
|
-
return;
|
|
849
|
+
if (!m) return;
|
|
921
850
|
i(m), v(m);
|
|
922
851
|
}
|
|
923
852
|
b({ mode: "brush" });
|
|
924
853
|
} else if (r.type !== "picture") {
|
|
925
854
|
const m = fi(f, r, Z, k);
|
|
926
|
-
i(m),
|
|
855
|
+
i(m), n(Ze), v(m), b({ mode: "resize", cursorStartPosition: [Z[0] + k.selectionPadding, Z[1] + k.selectionPadding], originalShape: m, anchor: r.type === "line" || r.type === "polygon" || r.type === "curve" ? 0 : [1, 1] });
|
|
927
856
|
}
|
|
928
857
|
}
|
|
929
858
|
};
|
|
930
859
|
return y.addEventListener("mousedown", x, { passive: !1 }), y.addEventListener("touchstart", x, { passive: !1 }), () => {
|
|
931
860
|
y.removeEventListener("mousedown", x), y.removeEventListener("touchstart", x);
|
|
932
861
|
};
|
|
933
|
-
}, [e, c, t, d, r, M,
|
|
862
|
+
}, [e, c, t, d, r, M, a, S, i, n, v, b, w, k, E]), G(() => {
|
|
934
863
|
const y = c.current;
|
|
935
864
|
if (y)
|
|
936
865
|
return l ? (C(y, (F) => {
|
|
@@ -942,199 +871,184 @@ const ci = ({ ctx: e, path: i, rect: t, offset: a, checkFill: s }) => {
|
|
|
942
871
|
V(y);
|
|
943
872
|
}) : void 0;
|
|
944
873
|
}, [C, V, l, c, r, d, b, k]), { hoverMode: A };
|
|
945
|
-
}, X1 = ({ disabled: e = !1, scaleRatio: i, shape: t, defaultValue:
|
|
946
|
-
const r = J(null), l = J(
|
|
947
|
-
|
|
948
|
-
if (!r.current)
|
|
949
|
-
return;
|
|
874
|
+
}, X1 = ({ disabled: e = !1, scaleRatio: i, shape: t, defaultValue: n, updateValue: s, saveShapes: a, settings: o }) => {
|
|
875
|
+
const r = J(null), l = J(a);
|
|
876
|
+
G(() => {
|
|
877
|
+
if (!r.current) return;
|
|
950
878
|
const d = r.current, c = (u) => {
|
|
951
879
|
u.preventDefault();
|
|
952
880
|
const g = u.clipboardData?.getData("text/plain");
|
|
953
881
|
document.execCommand("insertText", !1, g);
|
|
954
882
|
};
|
|
955
883
|
d.addEventListener("paste", c), d.innerText = "";
|
|
956
|
-
for (const u of
|
|
884
|
+
for (const u of n) {
|
|
957
885
|
const g = document.createElement("div");
|
|
958
886
|
u === "" ? g.innerHTML = "<br/>" : g.innerText = u, d.appendChild(g);
|
|
959
887
|
}
|
|
960
888
|
return d.focus(), () => {
|
|
961
889
|
d.removeEventListener("paste", c);
|
|
962
890
|
};
|
|
963
|
-
}, [
|
|
891
|
+
}, [n]), G(() => {
|
|
964
892
|
const d = l.current;
|
|
965
893
|
return () => {
|
|
966
894
|
d();
|
|
967
895
|
};
|
|
968
896
|
}, []);
|
|
969
|
-
const
|
|
897
|
+
const h = Di(() => {
|
|
970
898
|
const { borders: d, center: c } = _(t, o);
|
|
971
|
-
return
|
|
899
|
+
return ge({ point: [d.x, d.y], rotation: -t.rotation, origin: c });
|
|
972
900
|
}, [t, o]);
|
|
973
|
-
return
|
|
901
|
+
return p("div", { className: "react-paint-editor-toolbox-edittextbox", ref: r, "data-fontbold": t.style?.fontBold ?? !1, "data-fontitalic": t.style?.fontItalic ?? !1, contentEditable: !e, onInput: (d) => {
|
|
974
902
|
const c = Array.from(d.target.childNodes).map((u) => u.childNodes[0].nodeValue ?? "");
|
|
975
903
|
s(c);
|
|
976
|
-
}, style: { "--react-paint-editor-toolbox-edittextbox-transform": `translate3D(${
|
|
977
|
-
}, Y1 = (e, i, t,
|
|
978
|
-
const { canvasSize: { width:
|
|
979
|
-
e.clearRect(0, 0,
|
|
904
|
+
}, style: { "--react-paint-editor-toolbox-edittextbox-transform": `translate3D(${h[0] * i}px, ${h[1] * i}px, 0) rotate(${Dt(t.rotation)}deg)`, "--react-paint-editor-toolbox-edittextbox-fontsize": t.fontSize * i + "px", "--react-paint-editor-toolbox-edittextbox-padding": o.selectionPadding * i + "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 ?? ot } });
|
|
905
|
+
}, Y1 = (e, i, t, n, s) => {
|
|
906
|
+
const { canvasSize: { width: a, height: o } } = t;
|
|
907
|
+
e.clearRect(0, 0, a, o), o1(e), t.gridGap && ((r, l, h, d) => {
|
|
980
908
|
const { gridGap: c, canvasOffset: u, canvasSize: { scaleRatio: g } } = d;
|
|
981
909
|
r.strokeStyle = "rgb(220,220,220)", r.lineWidth = 1, r.save(), r.scale(g, g), r.beginPath();
|
|
982
|
-
const v = -u[0] % c, w = -u[1] % c, M = Math.ceil(l / g / c), S = Math.ceil(
|
|
983
|
-
for (let L = 0; L < M; L++)
|
|
984
|
-
|
|
985
|
-
for (let L = 0; L < S; L++)
|
|
986
|
-
r.moveTo(v, w + (L + 1) * c), r.lineTo(v + l / g, w + (L + 1) * c);
|
|
910
|
+
const v = -u[0] % c, w = -u[1] % c, M = Math.ceil(l / g / c), S = Math.ceil(h / g / c);
|
|
911
|
+
for (let L = 0; L < M; L++) r.moveTo(v + (L + 1) * c, w), r.lineTo(v + (L + 1) * c, w + h / g);
|
|
912
|
+
for (let L = 0; L < S; L++) r.moveTo(v, w + (L + 1) * c), r.lineTo(v + l / g, w + (L + 1) * c);
|
|
987
913
|
r.stroke(), r.restore();
|
|
988
|
-
})(e,
|
|
989
|
-
for (let r =
|
|
990
|
-
|
|
991
|
-
}, j1 = Ei.forwardRef(({ canGrow: e, disabled: i = !1, canvasSize: t, shapes: a, addShape: s, updateSingleShape: n, selectedShape: o, setSelectedShape: r, setSelectionFrame: l, hoveredShape: p, selectionFrame: d, refreshHoveredShape: c, refreshSelectedShapes: u, saveShapes: g, activeTool: v, setActiveTool: w, canvasOffsetStartPosition: M, setCanvasOffsetStartPosition: S, setCanvasOffset: L, isInsideComponent: b, selectionMode: k, setSelectionMode: P, selectionWidth: E, selectionColor: A, settings: H, isEditMode: C, isShiftPressed: V, withFrameSelection: z, withSkeleton: y }, F) => {
|
|
914
|
+
})(e, a, o, t);
|
|
915
|
+
for (let r = n.length - 1; r >= 0; r--) i.mode === "textedition" && n[r] === s || c1(e, n[r], t);
|
|
916
|
+
}, j1 = Ei.forwardRef(({ canGrow: e, disabled: i = !1, canvasSize: t, shapes: n, addShape: s, updateSingleShape: a, selectedShape: o, setSelectedShape: r, setSelectionFrame: l, hoveredShape: h, selectionFrame: d, refreshHoveredShape: c, refreshSelectedShapes: u, saveShapes: g, activeTool: v, setActiveTool: w, canvasOffsetStartPosition: M, setCanvasOffsetStartPosition: S, setCanvasOffset: L, isInsideComponent: b, selectionMode: k, setSelectionMode: P, selectionWidth: E, selectionColor: A, settings: H, isEditMode: C, isShiftPressed: V, withFrameSelection: W, withSkeleton: y }, F) => {
|
|
992
917
|
const x = J(null), T = J(null);
|
|
993
918
|
f1(F, () => x.current);
|
|
994
|
-
const { hoverMode: Z } =
|
|
995
|
-
if (o?.type !== "text")
|
|
996
|
-
return;
|
|
919
|
+
const { hoverMode: Z } = G1({ disabled: i, addShape: s, drawCanvasRef: x, setActiveTool: w, shapes: n, selectionMode: k, activeTool: v, isInsideComponent: b, setCanvasOffset: L, selectedShape: o, selectionCanvasRef: T, canvasOffsetStartPosition: M, setSelectedShape: r, setSelectionFrame: l, refreshHoveredShape: c, refreshSelectedShapes: u, setCanvasOffsetStartPosition: S, updateSingleShape: a, saveShapes: g, setSelectionMode: P, isShiftPressed: V, withFrameSelection: W, settings: H }), f = R((m) => {
|
|
920
|
+
if (o?.type !== "text") return;
|
|
997
921
|
const Q = x.current?.getContext("2d");
|
|
998
|
-
if (!Q)
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
return B(() => {
|
|
922
|
+
if (!Q) return;
|
|
923
|
+
const D = st(F1(Q, o, m, H), H);
|
|
924
|
+
a(D);
|
|
925
|
+
}, [a, o, H]);
|
|
926
|
+
return G(() => {
|
|
1004
927
|
const m = x.current?.getContext("2d");
|
|
1005
|
-
m && window.requestAnimationFrame(() => Y1(m, k, H,
|
|
1006
|
-
}, [
|
|
928
|
+
m && window.requestAnimationFrame(() => Y1(m, k, H, n, o));
|
|
929
|
+
}, [n, k, o, H]), G(() => {
|
|
1007
930
|
const m = T.current?.getContext("2d");
|
|
1008
931
|
m && window.requestAnimationFrame(() => ((Q, D, N, Y, de, $, U, oe, ee, te) => {
|
|
1009
|
-
Q.clearRect(0, 0, N.canvasSize.width, N.canvasSize.height), te && oe && oe.id !== U?.id && Y.type === "selection" && D.mode === "default" && mi({ ctx: Q, shape: oe, settings: N, selectionWidth: de, selectionColor: $, withAnchors: !1 }), U && Y.type !== "brush" && mi({ ctx: Q, shape: U, settings: N, selectionWidth: de, selectionColor: $, withAnchors: D.mode !== "textedition" }), ee &&
|
|
1010
|
-
})(m, k, H, v, E, A, o,
|
|
1011
|
-
}, [
|
|
1012
|
-
}), Ci = "ArrowUp", wi = "ArrowDown", xi = "ArrowLeft", Mi = "ArrowRight", _1 = "Delete", q1 = "Backspace", J1 = "Escape", ki = "Shift", K1 = "z",
|
|
1013
|
-
const [c, u] =
|
|
1014
|
-
return
|
|
932
|
+
Q.clearRect(0, 0, N.canvasSize.width, N.canvasSize.height), te && oe && oe.id !== U?.id && Y.type === "selection" && D.mode === "default" && mi({ ctx: Q, shape: oe, settings: N, selectionWidth: de, selectionColor: $, withAnchors: !1 }), U && Y.type !== "brush" && mi({ ctx: Q, shape: U, settings: N, selectionWidth: de, selectionColor: $, withAnchors: D.mode !== "textedition" }), ee && W1({ ctx: Q, selectionFrame: ee, settings: N });
|
|
933
|
+
})(m, k, H, v, E, A, o, h, d, y));
|
|
934
|
+
}, [h, d, k, o, v, H, E, A, y]), p("div", { className: "react-paint-canvas-box", children: I("div", { className: "react-paint-canvas-container", "data-grow": e, children: [p("canvas", { className: i1, ref: x, "data-grow": e, width: t.width, height: t.height }), C && p("canvas", { className: n1, ref: T, width: t.width, height: t.height, "data-grow": e, style: { "--react-paint-canvas-cursor": v.type !== "selection" && v.type !== "move" || Z.mode === "resize" ? "crosshair" : v.type === "move" || Z.mode === "translate" ? "move" : Z.mode === "rotate" ? "grab" : "default" } }), C && k.mode === "textedition" && o?.type === "text" && p(X1, { scaleRatio: t.scaleRatio, disabled: i, shape: o, defaultValue: k.defaultValue, updateValue: f, saveShapes: g, settings: H })] }) });
|
|
935
|
+
}), Ci = "ArrowUp", wi = "ArrowDown", xi = "ArrowLeft", Mi = "ArrowRight", _1 = "Delete", q1 = "Backspace", J1 = "Escape", ki = "Shift", K1 = "z", en = "Z", tn = "y", nn = "Y", Li = "copy", Vi = "paste", an = ({ isInsideComponent: e, selectedShape: i, isEditingText: t, settings: n, setSelectedShape: s, removeShape: a, pasteShape: o, updateShape: r, backwardShape: l, forwardShape: h, setShiftPressed: d }) => {
|
|
936
|
+
const [c, u] = z(void 0);
|
|
937
|
+
return G(() => {
|
|
1015
938
|
const g = (S) => {
|
|
1016
939
|
i && (t || (S.preventDefault(), u({ ...i })));
|
|
1017
940
|
}, v = (S) => {
|
|
1018
|
-
c && (t || (S.preventDefault(), o(((L, b) => ({ ...
|
|
941
|
+
c && (t || (S.preventDefault(), o(((L, b) => ({ ...Ft([20, 20], L, [0, 0], b), id: se(`${L.type}_`) }))(c, n))));
|
|
1019
942
|
}, w = (S) => {
|
|
1020
943
|
S.key === ki && d(!1);
|
|
1021
944
|
}, M = (S) => {
|
|
1022
945
|
if (S.metaKey || S.ctrlKey) {
|
|
1023
|
-
if (S.key ===
|
|
1024
|
-
|
|
1025
|
-
if (S.key === ia || S.key === ta)
|
|
1026
|
-
return S.preventDefault(), S.stopPropagation(), void p();
|
|
946
|
+
if (S.key === en || S.key === K1) return S.preventDefault(), S.stopPropagation(), void l();
|
|
947
|
+
if (S.key === nn || S.key === tn) return S.preventDefault(), S.stopPropagation(), void h();
|
|
1027
948
|
}
|
|
1028
|
-
if (S.key === ki)
|
|
1029
|
-
|
|
1030
|
-
if (
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
return void s(void 0);
|
|
1034
|
-
if (t)
|
|
1035
|
-
return;
|
|
1036
|
-
const L = { [xi]: [a.gridGap ? -a.gridGap : -1, 0], [Mi]: [a.gridGap ? a.gridGap : 1, 0], [wi]: [0, a.gridGap ? a.gridGap : 1], [Ci]: [0, a.gridGap ? -a.gridGap : -1] };
|
|
949
|
+
if (S.key === ki) return void d(!0);
|
|
950
|
+
if (!i) return;
|
|
951
|
+
if (S.key === J1) return void s(void 0);
|
|
952
|
+
if (t) return;
|
|
953
|
+
const L = { [xi]: [n.gridGap ? -n.gridGap : -1, 0], [Mi]: [n.gridGap ? n.gridGap : 1, 0], [wi]: [0, n.gridGap ? n.gridGap : 1], [Ci]: [0, n.gridGap ? -n.gridGap : -1] };
|
|
1037
954
|
switch (S.key) {
|
|
1038
955
|
case xi:
|
|
1039
956
|
case Mi:
|
|
1040
957
|
case wi:
|
|
1041
958
|
case Ci:
|
|
1042
|
-
S.preventDefault(), S.stopPropagation(), r(
|
|
959
|
+
S.preventDefault(), S.stopPropagation(), r(Ft(L[S.key], i, [0, 0], n));
|
|
1043
960
|
break;
|
|
1044
961
|
case _1:
|
|
1045
962
|
case q1:
|
|
1046
|
-
S.preventDefault(), S.stopPropagation(),
|
|
963
|
+
S.preventDefault(), S.stopPropagation(), a(i);
|
|
1047
964
|
}
|
|
1048
965
|
};
|
|
1049
|
-
if (e)
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
const { shapesRef: s, selectedShape: n, selectionFrame: o, hoveredShape: r, addShape: l, setSelectedShape: p, setSelectionFrame: d, refreshSelectedShapes: c, refreshHoveredShape: u, removeShape: g, updateShape: v, backwardShape: w, forwardShape: M, saveShapes: S, refs: L, width: b, height: k, settings: P, canvasSize: E, setCanvasSize: A, setCanvasOffset: H, selectShape: C, activeTool: V, setActiveTool: z, isInsideComponent: y, isEditMode: F, isDisabled: x, canvas: { withSkeleton: T, withFrameSelection: Z, canGrow: f, canShrink: m } } = a, { canvasBackgroundColor: Q, canvasSelectionColor: D, canvasSelectionWidth: N } = { ...Q1, ...e }, Y = J(null), [de, $] = W(void 0), [U, oe] = W({ mode: "default" }), [ee, te] = W(!1), ve = R((ie) => {
|
|
966
|
+
if (e) return document.addEventListener("keydown", M), document.addEventListener("keyup", w), document.addEventListener(Li, g), document.addEventListener(Vi, v), () => {
|
|
967
|
+
document.removeEventListener("keydown", M), document.removeEventListener("keyup", w), document.removeEventListener(Li, g), document.removeEventListener(Vi, v);
|
|
968
|
+
};
|
|
969
|
+
}, [e, c, t, i, n, r, a, s, o, l, h, d]), {};
|
|
970
|
+
}, Pn = ({ options: e, className: i, style: t, canvasProps: n }) => {
|
|
971
|
+
const { shapesRef: s, selectedShape: a, selectionFrame: o, hoveredShape: r, addShape: l, setSelectedShape: h, setSelectionFrame: d, refreshSelectedShapes: c, refreshHoveredShape: u, removeShape: g, updateShape: v, backwardShape: w, forwardShape: M, saveShapes: S, refs: L, width: b, height: k, settings: P, canvasSize: E, setCanvasSize: A, setCanvasOffset: H, selectShape: C, activeTool: V, setActiveTool: W, isInsideComponent: y, isEditMode: F, isDisabled: x, canvas: { withSkeleton: T, withFrameSelection: Z, canGrow: f, canShrink: m } } = n, { canvasBackgroundColor: Q, canvasSelectionColor: D, canvasSelectionWidth: N } = { ...Q1, ...e }, Y = J(null), [de, $] = z(void 0), [U, oe] = z({ mode: "default" }), [ee, te] = z(!1), fe = R((ie) => {
|
|
1056
972
|
l(ie), C(ie);
|
|
1057
|
-
}, [l, C]),
|
|
973
|
+
}, [l, C]), ke = R((ie) => {
|
|
1058
974
|
const j = ie / b;
|
|
1059
975
|
A({ width: ie, height: k * j, scaleRatio: j });
|
|
1060
976
|
}, [b, k, A]);
|
|
1061
|
-
return
|
|
1062
|
-
|
|
977
|
+
return an({ isInsideComponent: y, isEditingText: U.mode === "textedition", settings: P, selectedShape: a, setSelectedShape: h, removeShape: g, pasteShape: fe, updateShape: v, backwardShape: w, forwardShape: M, setShiftPressed: te }), (({ onResized: ie, element: j }) => {
|
|
978
|
+
G(() => {
|
|
1063
979
|
const Se = j.current;
|
|
1064
|
-
if (!Se)
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
const fe = ke?.[0]?.borderBoxSize?.[0], { width: be, height: De } = fe ? { width: fe.inlineSize, height: fe.blockSize } : ke?.[0].contentRect ?? {};
|
|
980
|
+
if (!Se) return;
|
|
981
|
+
const Ee = new ResizeObserver((Le) => {
|
|
982
|
+
const me = Le?.[0]?.borderBoxSize?.[0], { width: be, height: De } = me ? { width: me.inlineSize, height: me.blockSize } : Le?.[0].contentRect ?? {};
|
|
1068
983
|
ie(be, De);
|
|
1069
984
|
});
|
|
1070
985
|
return Ee.observe(Se), () => {
|
|
1071
986
|
Ee.unobserve(Se);
|
|
1072
987
|
};
|
|
1073
988
|
}, [j, ie]);
|
|
1074
|
-
})({ element: Y, onResized:
|
|
1075
|
-
},
|
|
1076
|
-
const [i, t] =
|
|
1077
|
-
return
|
|
989
|
+
})({ element: Y, onResized: ke }), p("div", { ref: Y, className: "react-paint-app-row" + (i ? ` ${i}` : ""), "data-grow": f, "data-shrink": m, style: { "--react-paint-app-row-width": E.width, "--react-paint-app-canvaswidth": `${b}px`, "--react-paint-app-row-aspectratio": `calc(${E.width} / ${E.height})`, "--react-paint-app-canvas-bg": Q, ...t }, children: p(j1, { ref: L.canvas, canGrow: f, disabled: x, isInsideComponent: y, activeTool: V, setActiveTool: W, canvasOffsetStartPosition: de, setCanvasOffsetStartPosition: $, shapes: s.current, addShape: l, updateSingleShape: v, selectedShape: a, selectionFrame: o, setSelectedShape: h, setSelectionFrame: d, hoveredShape: r, refreshHoveredShape: u, refreshSelectedShapes: c, settings: P, setCanvasOffset: H, saveShapes: S, canvasSize: E, selectionMode: U, setSelectionMode: oe, selectionColor: D, selectionWidth: N, isEditMode: F, isShiftPressed: ee, withFrameSelection: Z, withSkeleton: T }) });
|
|
990
|
+
}, sn = ({ isLoading: e = !1 }) => {
|
|
991
|
+
const [i, t] = z("hidden");
|
|
992
|
+
return G(() => {
|
|
1078
993
|
if (!e) {
|
|
1079
994
|
t("fadeOut");
|
|
1080
|
-
const
|
|
995
|
+
const n = setTimeout(() => t("hidden"), 300);
|
|
1081
996
|
return () => {
|
|
1082
|
-
clearTimeout(
|
|
997
|
+
clearTimeout(n);
|
|
1083
998
|
};
|
|
1084
999
|
}
|
|
1085
1000
|
t("visible");
|
|
1086
|
-
}, [e]), i === "hidden" ? null :
|
|
1087
|
-
},
|
|
1088
|
-
const [
|
|
1089
|
-
return
|
|
1090
|
-
const
|
|
1001
|
+
}, [e]), i === "hidden" ? null : p("div", { className: "react-paint-editor-loading", "data-loading": i, style: { "--react-paint-editor-loading-zindex": m1, "--react-paint-editor-loading-transition-duration": "300ms" }, children: I("div", { className: "react-paint-editor-loader", children: [p("div", {}), p("div", {}), p("div", {}), p("div", {})] }) });
|
|
1002
|
+
}, on = "infos", rn = 4e3, ln = ({ type: e, text: i, duration: t }) => {
|
|
1003
|
+
const [n, s] = z(!1);
|
|
1004
|
+
return G(() => {
|
|
1005
|
+
const a = setTimeout(() => {
|
|
1091
1006
|
s(!0);
|
|
1092
1007
|
}, 100), o = setTimeout(() => {
|
|
1093
1008
|
s(!1);
|
|
1094
1009
|
}, t - 500 - 100);
|
|
1095
1010
|
return () => {
|
|
1096
|
-
clearTimeout(
|
|
1011
|
+
clearTimeout(a), clearTimeout(o);
|
|
1097
1012
|
};
|
|
1098
|
-
}, [t]),
|
|
1099
|
-
},
|
|
1013
|
+
}, [t]), p("div", { className: "react-paint-editor-snackbar", "data-is-shown": +n, "data-type": e, style: { "--react-paint-editor-panel-transition-duration": "500ms" }, children: i });
|
|
1014
|
+
}, dn = ({ snackbarList: e }) => p("div", { className: "react-paint-editor-snackbar-container", style: { "--react-paint-editor-snackbar-zindex": y1 }, children: e.map((i) => p(ln, { ...i }, i.id)) }), X = Ei.forwardRef((e, i) => {
|
|
1100
1015
|
if (e.type === "file" || e.type === "color") {
|
|
1101
1016
|
const { hidden: d = !1, disabled: c = !1, selected: u = !1, icon: g, children: v, className: w = "", title: M, onClick: S, ...L } = e;
|
|
1102
|
-
return I("label", { className: `react-paint-editor-button ${w}`, title: M, onClick: S, "data-disabled": +c, "data-selected": +u, "data-hidden": +d, children: [
|
|
1017
|
+
return I("label", { className: `react-paint-editor-button ${w}`, title: M, onClick: S, "data-disabled": +c, "data-selected": +u, "data-hidden": +d, children: [p("input", { ref: i, disabled: c, ...L }), I("span", { className: "react-paint-editor-button-content", children: [v && p("span", { className: "react-paint-editor-button-children", children: v }), g && p("span", { className: "react-paint-editor-button-icon", dangerouslySetInnerHTML: { __html: g } })] })] });
|
|
1103
1018
|
}
|
|
1104
|
-
const { hidden: t = !1, disabled:
|
|
1105
|
-
return
|
|
1106
|
-
}), et = ({ children: e, title: i = "", className: t = "", position:
|
|
1019
|
+
const { hidden: t = !1, disabled: n = !1, selected: s = !1, icon: a, children: o, type: r = "button", className: l = "", ...h } = e;
|
|
1020
|
+
return p("button", { className: `react-paint-editor-button ${l}`, ref: i, disabled: n, "data-disabled": +n, "data-selected": +s, "data-hidden": +t, type: r, ...h, children: I("span", { className: "react-paint-editor-button-content", children: [o && p("span", { className: "react-paint-editor-button-children", children: o }), a && p("span", { className: "react-paint-editor-button-icon", dangerouslySetInnerHTML: { __html: a } })] }) });
|
|
1021
|
+
}), et = ({ children: e, title: i = "", className: t = "", position: n = "bottom", fitContainer: s = !1, alignment: a = "center" }) => I("div", { className: `react-paint-editor-panel ${t}`, "data-fitcontainer": s, "data-position": n, "data-alignment": a, style: { "--react-paint-editor-panel-zindex": Oi }, children: [i && p("h3", { className: "react-paint-editor-panel-title", children: i }), e] }), cn = (e) => {
|
|
1107
1022
|
switch (e) {
|
|
1108
1023
|
case "brush":
|
|
1109
1024
|
return Ni;
|
|
1110
1025
|
case "line":
|
|
1111
|
-
return
|
|
1026
|
+
return Wi;
|
|
1112
1027
|
case "polygon":
|
|
1113
|
-
return
|
|
1028
|
+
return It;
|
|
1114
1029
|
case "curve":
|
|
1115
|
-
return
|
|
1030
|
+
return zi;
|
|
1116
1031
|
case "rect":
|
|
1117
1032
|
case "square":
|
|
1118
|
-
return
|
|
1033
|
+
return Nt;
|
|
1119
1034
|
case "circle":
|
|
1120
1035
|
case "ellipse":
|
|
1121
|
-
return
|
|
1036
|
+
return Rt;
|
|
1122
1037
|
case "text":
|
|
1123
1038
|
return Ii;
|
|
1124
1039
|
case "picture":
|
|
1125
|
-
return
|
|
1040
|
+
return Wt;
|
|
1126
1041
|
case "triangle":
|
|
1127
1042
|
return "";
|
|
1128
1043
|
}
|
|
1129
|
-
},
|
|
1044
|
+
}, hn = ({ disabled: e = !1, shape: i, selected: t, layoutDragging: n, toggleShapeVisibility: s, toggleShapeLock: a, setLayoutDragging: o, handleRemove: r, handleSelect: l, onMoveShapes: h }) => {
|
|
1130
1045
|
const d = J(null), { isOver: c } = (({ disabled: u = !1, ref: g, shape: v, layoutDragging: w, setLayoutDragging: M, handleSelect: S, onMoveShapes: L }) => {
|
|
1131
|
-
const [b, k] =
|
|
1132
|
-
return
|
|
1046
|
+
const [b, k] = z(!1);
|
|
1047
|
+
return G(() => {
|
|
1133
1048
|
w || k(!1);
|
|
1134
|
-
}, [w]),
|
|
1049
|
+
}, [w]), G(() => {
|
|
1135
1050
|
const P = g.current;
|
|
1136
|
-
if (!P)
|
|
1137
|
-
return;
|
|
1051
|
+
if (!P) return;
|
|
1138
1052
|
const E = () => {
|
|
1139
1053
|
M(void 0);
|
|
1140
1054
|
}, A = (y) => (y.preventDefault && y.preventDefault(), !1), H = (y) => {
|
|
@@ -1143,257 +1057,243 @@ const ci = ({ ctx: e, path: i, rect: t, offset: a, checkFill: s }) => {
|
|
|
1143
1057
|
w !== v.id && k(!0);
|
|
1144
1058
|
}, V = () => {
|
|
1145
1059
|
k(!1);
|
|
1146
|
-
},
|
|
1147
|
-
return u || (P.addEventListener("dragstart", H), P.addEventListener("dragend", E), P.addEventListener("dragover", A), P.addEventListener("dragenter", C), P.addEventListener("dragleave", V), P.addEventListener("drop",
|
|
1148
|
-
u || (P.removeEventListener("dragstart", H), P.removeEventListener("dragend", E), P.removeEventListener("dragover", A), P.removeEventListener("dragenter", C), P.removeEventListener("dragleave", V), P.removeEventListener("drop",
|
|
1060
|
+
}, W = (y) => (y.stopPropagation(), y.dataTransfer && L(y.dataTransfer.getData("draggableShapeId"), v.id), !1);
|
|
1061
|
+
return u || (P.addEventListener("dragstart", H), P.addEventListener("dragend", E), P.addEventListener("dragover", A), P.addEventListener("dragenter", C), P.addEventListener("dragleave", V), P.addEventListener("drop", W)), () => {
|
|
1062
|
+
u || (P.removeEventListener("dragstart", H), P.removeEventListener("dragend", E), P.removeEventListener("dragover", A), P.removeEventListener("dragenter", C), P.removeEventListener("dragleave", V), P.removeEventListener("drop", W));
|
|
1149
1063
|
};
|
|
1150
1064
|
}, [u, g, v, M, S, L, w]), { isOver: b };
|
|
1151
|
-
})({ disabled: e, ref: d, shape: i, layoutDragging:
|
|
1152
|
-
return I("div", { className: "react-paint-editor-layout", "data-disabled": +e, draggable: !e, "data-is-dragging": +(
|
|
1065
|
+
})({ disabled: e, ref: d, shape: i, layoutDragging: n, setLayoutDragging: o, handleSelect: l, onMoveShapes: h });
|
|
1066
|
+
return I("div", { className: "react-paint-editor-layout", "data-disabled": +e, draggable: !e, "data-is-dragging": +(n === i.id), "data-is-over": +c, onClick: (u) => {
|
|
1153
1067
|
e || (u.preventDefault(), u.stopPropagation(), l(i));
|
|
1154
|
-
}, "data-selected": +t, ref: d, children: [
|
|
1068
|
+
}, "data-selected": +t, ref: d, children: [p("span", { dangerouslySetInnerHTML: { __html: cn(i.type) } }), p("span", { children: i.id }), p("div", { className: "react-paint-editor-layouts-separator" }), p(X, { className: "react-paint-editor-layouts-visible-button", title: i.visible ? "Hide" : "Show", "data-visible": i.visible !== !1, disabled: e, selected: t, onClick: (u) => {
|
|
1155
1069
|
e || (u.preventDefault(), u.stopPropagation(), s(i));
|
|
1156
|
-
}, icon: i.visible === !1 ? '<svg><path d="M13.521 11.021 12.25 9.75Q12.333 8.75 11.604 7.979Q10.875 7.208 9.812 7.312L8.542 6.042Q8.896 5.896 9.26 5.833Q9.625 5.771 10 5.771Q11.583 5.771 12.688 6.875Q13.792 7.979 13.792 9.562Q13.792 9.979 13.719 10.354Q13.646 10.729 13.521 11.021ZM16.167 13.646 14.917 12.417Q15.667 11.833 16.25 11.146Q16.833 10.458 17.25 9.562Q16.229 7.479 14.292 6.281Q12.354 5.083 10 5.083Q9.396 5.083 8.885 5.156Q8.375 5.229 7.875 5.375L6.5 4Q7.354 3.646 8.208 3.49Q9.062 3.333 10 3.333Q13.146 3.333 15.615 5.052Q18.083 6.771 19.167 9.562Q18.688 10.792 17.917 11.823Q17.146 12.854 16.167 13.646ZM16.396 18.854 12.938 15.396Q12.208 15.625 11.479 15.729Q10.75 15.833 10 15.833Q6.833 15.833 4.375 14.094Q1.917 12.354 0.833 9.562Q1.25 8.479 1.917 7.552Q2.583 6.625 3.417 5.875L1.125 3.562L2.375 2.354L17.625 17.625ZM4.604 7.062Q4.021 7.604 3.542 8.219Q3.062 8.833 2.729 9.562Q3.75 11.646 5.688 12.865Q7.625 14.083 10 14.083Q10.354 14.083 10.74 14.052Q11.125 14.021 11.479 13.938L10.812 13.271Q10.625 13.312 10.417 13.333Q10.208 13.354 10 13.354Q8.417 13.354 7.312 12.25Q6.208 11.146 6.208 9.562Q6.208 9.354 6.24 9.167Q6.271 8.979 6.312 8.771ZM11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875ZM8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Z"/></svg>' : '<svg><path d="M10 13.354Q11.583 13.354 12.688 12.25Q13.792 11.146 13.792 9.562Q13.792 7.979 12.688 6.875Q11.583 5.771 10 5.771Q8.417 5.771 7.312 6.875Q6.208 7.979 6.208 9.562Q6.208 11.146 7.312 12.25Q8.417 13.354 10 13.354ZM10 11.812Q9.062 11.812 8.406 11.156Q7.75 10.5 7.75 9.562Q7.75 8.625 8.406 7.969Q9.062 7.312 10 7.312Q10.938 7.312 11.594 7.969Q12.25 8.625 12.25 9.562Q12.25 10.5 11.594 11.156Q10.938 11.812 10 11.812ZM10 15.833Q6.938 15.833 4.448 14.125Q1.958 12.417 0.833 9.562Q1.958 6.708 4.458 5.021Q6.958 3.333 10 3.333Q13.042 3.333 15.542 5.021Q18.042 6.708 19.167 9.562Q18.042 12.417 15.552 14.125Q13.062 15.833 10 15.833ZM10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562ZM10 14.083Q12.333 14.083 14.281 12.865Q16.229 11.646 17.25 9.562Q16.229 7.479 14.281 6.281Q12.333 5.083 10 5.083Q7.667 5.083 5.708 6.281Q3.75 7.479 2.729 9.562Q3.75 11.646 5.708 12.865Q7.667 14.083 10 14.083Z"/></svg>' }),
|
|
1157
|
-
e || (u.preventDefault(), u.stopPropagation(),
|
|
1158
|
-
}, icon: i.locked ? '<svg><path d="M10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H5.792V5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833ZM10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042V6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>' : '<svg><path d="M5.792 5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>' }),
|
|
1070
|
+
}, icon: i.visible === !1 ? '<svg><path d="M13.521 11.021 12.25 9.75Q12.333 8.75 11.604 7.979Q10.875 7.208 9.812 7.312L8.542 6.042Q8.896 5.896 9.26 5.833Q9.625 5.771 10 5.771Q11.583 5.771 12.688 6.875Q13.792 7.979 13.792 9.562Q13.792 9.979 13.719 10.354Q13.646 10.729 13.521 11.021ZM16.167 13.646 14.917 12.417Q15.667 11.833 16.25 11.146Q16.833 10.458 17.25 9.562Q16.229 7.479 14.292 6.281Q12.354 5.083 10 5.083Q9.396 5.083 8.885 5.156Q8.375 5.229 7.875 5.375L6.5 4Q7.354 3.646 8.208 3.49Q9.062 3.333 10 3.333Q13.146 3.333 15.615 5.052Q18.083 6.771 19.167 9.562Q18.688 10.792 17.917 11.823Q17.146 12.854 16.167 13.646ZM16.396 18.854 12.938 15.396Q12.208 15.625 11.479 15.729Q10.75 15.833 10 15.833Q6.833 15.833 4.375 14.094Q1.917 12.354 0.833 9.562Q1.25 8.479 1.917 7.552Q2.583 6.625 3.417 5.875L1.125 3.562L2.375 2.354L17.625 17.625ZM4.604 7.062Q4.021 7.604 3.542 8.219Q3.062 8.833 2.729 9.562Q3.75 11.646 5.688 12.865Q7.625 14.083 10 14.083Q10.354 14.083 10.74 14.052Q11.125 14.021 11.479 13.938L10.812 13.271Q10.625 13.312 10.417 13.333Q10.208 13.354 10 13.354Q8.417 13.354 7.312 12.25Q6.208 11.146 6.208 9.562Q6.208 9.354 6.24 9.167Q6.271 8.979 6.312 8.771ZM11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875ZM8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Z"/></svg>' : '<svg><path d="M10 13.354Q11.583 13.354 12.688 12.25Q13.792 11.146 13.792 9.562Q13.792 7.979 12.688 6.875Q11.583 5.771 10 5.771Q8.417 5.771 7.312 6.875Q6.208 7.979 6.208 9.562Q6.208 11.146 7.312 12.25Q8.417 13.354 10 13.354ZM10 11.812Q9.062 11.812 8.406 11.156Q7.75 10.5 7.75 9.562Q7.75 8.625 8.406 7.969Q9.062 7.312 10 7.312Q10.938 7.312 11.594 7.969Q12.25 8.625 12.25 9.562Q12.25 10.5 11.594 11.156Q10.938 11.812 10 11.812ZM10 15.833Q6.938 15.833 4.448 14.125Q1.958 12.417 0.833 9.562Q1.958 6.708 4.458 5.021Q6.958 3.333 10 3.333Q13.042 3.333 15.542 5.021Q18.042 6.708 19.167 9.562Q18.042 12.417 15.552 14.125Q13.062 15.833 10 15.833ZM10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562ZM10 14.083Q12.333 14.083 14.281 12.865Q16.229 11.646 17.25 9.562Q16.229 7.479 14.281 6.281Q12.333 5.083 10 5.083Q7.667 5.083 5.708 6.281Q3.75 7.479 2.729 9.562Q3.75 11.646 5.708 12.865Q7.667 14.083 10 14.083Z"/></svg>' }), p(X, { className: "react-paint-editor-layouts-locked-button", title: i.locked ? "Locked" : "Unlocked", "data-locked": !!i.locked, disabled: e, selected: t, onClick: (u) => {
|
|
1071
|
+
e || (u.preventDefault(), u.stopPropagation(), a(i));
|
|
1072
|
+
}, icon: i.locked ? '<svg><path d="M10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H5.792V5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833ZM10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042V6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>' : '<svg><path d="M5.792 5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>' }), p(X, { className: "react-paint-editor-layouts-remove-button", title: "Remove", disabled: e, onClick: (u) => {
|
|
1159
1073
|
e || (u.preventDefault(), u.stopPropagation(), r(i));
|
|
1160
1074
|
}, icon: Ri })] });
|
|
1161
|
-
},
|
|
1162
|
-
const [c, u] =
|
|
1163
|
-
return d ?
|
|
1164
|
-
},
|
|
1165
|
-
const [
|
|
1166
|
-
return
|
|
1167
|
-
i((c) => c ===
|
|
1168
|
-
}, icon: r === "transparent" ?
|
|
1075
|
+
}, pn = ({ gridFormat: e, setGridFormat: i, disabled: t = !1, shapes: n, removeShape: s, toggleShapeVisibility: a, toggleShapeLock: o, selectedShape: r, moveShapes: l, selectShape: h, isLayoutPanelShown: d }) => {
|
|
1076
|
+
const [c, u] = z(void 0);
|
|
1077
|
+
return d ? p(et, { alignment: "right", className: "react-paint-editor-layouts-panel", children: p("div", { className: "react-paint-editor-layouts-panel-content", children: I("div", { className: "react-paint-editor-layouts-scrolling-content", children: [I("div", { className: "react-paint-editor-layouts-row", children: [p("span", { className: "react-paint-editor-layouts-subtitle", children: "Grid" }), p(X, { 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: () => i("none") }), ["small", "medium", "large"].map((g) => p(X, { className: "react-paint-editor-layouts-grid-button", selected: e === g, disabled: t, onClick: () => i(g), children: g.charAt(0).toUpperCase() }, g))] }), p("hr", {}), p("div", { className: "react-paint-editor-layouts", children: n.length === 0 ? p("div", { className: "react-paint-editor-layouts-placeholder", children: "No layer yet" }) : n.map((g) => p(hn, { shape: g, disabled: t, layoutDragging: c, setLayoutDragging: u, selected: r?.id === g.id, handleSelect: h, handleRemove: s, onMoveShapes: l, toggleShapeVisibility: a, toggleShapeLock: o }, g.id)) })] }) }) }) : null;
|
|
1078
|
+
}, Xt = ({ children: e, onClose: i, position: t = "center", className: n = "" }) => I("div", { className: "react-paint-editor-modal", "data-position": t, style: { "--react-paint-editor-modal-zindex": Oi }, children: [p("div", { className: "react-paint-editor-modal-mask", onClick: i }), p("div", { className: `react-paint-editor-modal-panel ${n}`, children: e })] }), ct = ({ selectedSettings: e, setSelectedSettings: i, title: t = "Choisissez une couleur", mode: n = "fill", disabled: s = !1, values: a, field: o, value: r = "", valueChanged: l }) => {
|
|
1079
|
+
const [h] = z(se("settings_")), d = e === h;
|
|
1080
|
+
return a.length ? I(he, { children: [p(X, { selected: d, title: t, disabled: s, onClick: () => {
|
|
1081
|
+
i((c) => c === h ? void 0 : h);
|
|
1082
|
+
}, icon: r === "transparent" ? n === "fill" ? ei : Kt : void 0, children: r !== "transparent" && p("div", { className: "react-paint-editor-colorfield-color", "data-mode": n, style: { "--react-paint-editor-colorfield-color-value": r } }) }), d && p(et, { title: t, alignment: "left", children: I("div", { className: "react-paint-editor-colorfield-wrapper", children: [a.map((c, u) => p(X, { title: c, selected: c === r, color: c, icon: c === "transparent" ? n === "fill" ? ei : Kt : void 0, onClick: () => {
|
|
1169
1083
|
l(o, c);
|
|
1170
|
-
}, children: c !== "transparent" &&
|
|
1084
|
+
}, children: c !== "transparent" && p("div", { className: "react-paint-editor-colorfield-color", color: c, "data-mode": n, style: { "--react-paint-editor-colorfield-color-value": c } }) }, c)), p(X, { type: "color", title: "Custom color", selected: !a.includes(r), value: r, onChange: (c) => {
|
|
1171
1085
|
const u = +c.target.value;
|
|
1172
1086
|
l(o, Number.isNaN(u) ? c.target.value : u);
|
|
1173
|
-
}, children:
|
|
1174
|
-
},
|
|
1087
|
+
}, children: p("div", { className: "react-paint-editor-colorfield-customcolor", style: { "--react-paint-editor-colorfield-color-value": a.includes(r) ? "var(--react-paint-editor-app-font-color)" : r }, children: p("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;
|
|
1088
|
+
}, un = ({ disabled: e = !1, selectedShape: i, removeShape: t }) => p(X, { title: "Delete", disabled: e, "data-disabled": +e, onClick: () => {
|
|
1175
1089
|
t(i);
|
|
1176
|
-
}, icon: Ri }),
|
|
1177
|
-
const [d] =
|
|
1178
|
-
return r.length ? I(
|
|
1090
|
+
}, icon: Ri }), Yt = ({ CustomOption: e, selectedSettings: i, setSelectedSettings: t, title: n = "Choisissez l'option", disabled: s = !1, field: a, icon: o, values: r, defaultValue: l, valueChanged: h }) => {
|
|
1091
|
+
const [d] = z(se("settings_")), c = i === d;
|
|
1092
|
+
return r.length ? I(he, { children: [p(X, { selected: c, title: n, icon: o, disabled: s, onClick: () => {
|
|
1179
1093
|
t((u) => u === d ? void 0 : d);
|
|
1180
|
-
} }), c &&
|
|
1181
|
-
|
|
1182
|
-
})(u), selected: l === u, style: { "--react-paint-editor-button-padding": "16px" }, children:
|
|
1183
|
-
},
|
|
1184
|
-
const u = Math.round(o), [g] =
|
|
1185
|
-
|
|
1094
|
+
} }), c && p(et, { title: n, alignment: "left", fitContainer: !0, children: p("div", { className: "react-paint-editor-selectfield-wrapper", children: r.map((u) => p(X, { title: `${u}`, onClick: () => ((g) => {
|
|
1095
|
+
h(a, g);
|
|
1096
|
+
})(u), selected: l === u, style: { "--react-paint-editor-button-padding": "16px" }, children: p(e, { children: u }) }, u)) }) })] }) : null;
|
|
1097
|
+
}, gn = ({ children: e }) => p("span", { className: "react-paint-editor-fontfamily-option", style: { "--react-paint-editor-fontfamily-family": e }, children: e }), Pi = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, values: n, defaultValue: s, valueChanged: a }) => n.length ? p(Yt, { selectedSettings: e, setSelectedSettings: i, CustomOption: gn, 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: a }) : null, vn = ({ disabled: e, toggleLayoutPanel: i }) => p(X, { title: "Toggle layers panel", disabled: e, onClick: i, icon: '<svg><path d="M10 17.646 2.438 11.75 3.875 10.646 10 15.396 16.125 10.646 17.562 11.75ZM10 13.188 2.5 7.354 10 1.521 17.5 7.354Z"/></svg>', className: "react-paint-editor-layout-button" }), fn = ({ children: e }) => I("span", { className: "react-paint-editor-linearrow-option", "data-type": e, children: [p("span", { className: "react-paint-editor-linearrow-left" }), p("span", { className: "react-paint-editor-linearrow-right" })] }), Hi = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, values: n, defaultValue: s, valueChanged: a }) => n.length ? p(Yt, { selectedSettings: e, setSelectedSettings: i, CustomOption: fn, 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: a }) : null, mn = ({ children: e }) => I("span", { className: "react-paint-editor-linetype-option", "data-type": e, children: [p("span", {}), p("span", {}), p("span", {}), p("span", {}), p("span", {}), p("span", {}), p("span", {})] }), Ti = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, values: n, defaultValue: s, valueChanged: a }) => n.length ? p(Yt, { selectedSettings: e, setSelectedSettings: i, CustomOption: mn, 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: a }) : null, nt = ({ selectedSettings: e, setSelectedSettings: i, title: t = "Choisissez l'intervalle", icon: n, disabled: s = !1, field: a, value: o = 1, min: r = 1, max: l = 20, step: h = 1, unity: d = "", valueChanged: c }) => {
|
|
1098
|
+
const u = Math.round(o), [g] = z(se("settings_")), v = J(null);
|
|
1099
|
+
G(() => () => {
|
|
1186
1100
|
v.current && clearTimeout(v.current);
|
|
1187
1101
|
}, []);
|
|
1188
1102
|
const w = e === g;
|
|
1189
|
-
return r === l ? null : I(
|
|
1103
|
+
return r === l ? null : I(he, { children: [p(X, { selected: w, title: t, disabled: s, icon: n, onClick: () => {
|
|
1190
1104
|
i((M) => M === g ? void 0 : g);
|
|
1191
|
-
} }), w &&
|
|
1105
|
+
} }), w && p(et, { title: t, alignment: "left", fitContainer: !0, children: p("div", { children: I("label", { className: "react-paint-editor-rangefield", children: [p("input", { type: "range", min: r, max: l, step: h, value: o, onChange: (M) => {
|
|
1192
1106
|
const S = +M.target.value;
|
|
1193
|
-
c(
|
|
1194
|
-
c(
|
|
1107
|
+
c(a, Number.isNaN(S) ? M.target.value : S, !1), v.current && clearTimeout(v.current), v.current = setTimeout(() => {
|
|
1108
|
+
c(a, Number.isNaN(S) ? M.target.value : S, !0);
|
|
1195
1109
|
}, 1e3);
|
|
1196
1110
|
} }), I("span", { children: [u, d] })] }) }) })] });
|
|
1197
|
-
}, Ai = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, min:
|
|
1198
|
-
const [r] =
|
|
1199
|
-
return s.length !== 2 ? null :
|
|
1200
|
-
e((l) => l === r ? void 0 : r), o(t, !
|
|
1201
|
-
}, selected:
|
|
1202
|
-
},
|
|
1203
|
-
const [u, g] =
|
|
1111
|
+
}, Ai = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, min: n, max: s, step: a, value: o, valueChanged: r }) => n === s ? null : p(nt, { selectedSettings: e, setSelectedSettings: i, icon: It, title: "Nombre de points", disabled: t, field: "pointsCount", min: n, max: s, step: a, unity: "", value: o, valueChanged: r }), ht = ({ setSelectedSettings: e, disabled: i = !1, field: t, icon: n, values: s, value: a = !1, valueChanged: o }) => {
|
|
1112
|
+
const [r] = z(se("settings_"));
|
|
1113
|
+
return s.length !== 2 ? null : p(X, { onClick: () => {
|
|
1114
|
+
e((l) => l === r ? void 0 : r), o(t, !a);
|
|
1115
|
+
}, selected: a, disabled: i, icon: n });
|
|
1116
|
+
}, Tt = ({ activeTool: e, selectedShape: i, selectedShapeTool: t, disabled: n, selectedSettings: s, setSelectedSettings: a, handleShapeStyleChange: o, handlePolygonLinesCount: r, handleShapeFontFamilyChange: l }) => i ? p(he, { children: t && I(he, { children: ["strokeColor" in t.settings && !t.settings.strokeColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur du trait", mode: "stroke", disabled: n, field: "strokeColor", value: i.style?.strokeColor, valueChanged: o, values: t.settings.strokeColor.values }), "fillColor" in t.settings && !t.settings.fillColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur de fond", disabled: n, field: "fillColor", value: i.style?.fillColor, valueChanged: o, values: t.settings.fillColor.values }), "lineWidth" in t.settings && !t.settings.lineWidth.hidden && p(nt, { selectedSettings: s, setSelectedSettings: a, title: "Epaisseur du trait", icon: Jt, disabled: n, field: "lineWidth", value: i.style?.lineWidth, valueChanged: o, unity: "px", min: t.settings.lineWidth.min, max: t.settings.lineWidth.max, step: t.settings.lineWidth.step }), "lineDash" in t.settings && !t.settings.lineDash.hidden && p(Ti, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: i.style?.lineDash, valueChanged: o, values: t.settings.lineDash.values }), "lineArrow" in t.settings && !t.settings.lineArrow.hidden && p(Hi, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: i.style?.lineArrow, valueChanged: o, values: t.settings.lineArrow.values }), "pointsCount" in t.settings && !t.settings.pointsCount.hidden && p(Ai, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: r, min: t.settings.pointsCount.min, max: t.settings.pointsCount.max, step: t.settings.pointsCount.step, value: i.style?.pointsCount }), "fontFamily" in t.settings && !t.settings.fontFamily.hidden && p(Pi, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: l, values: t.settings.fontFamily.values, defaultValue: i.style?.fontFamily }), "fontBold" in t.settings && !t.settings.fontBold.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontBold", icon: _t, valueChanged: l, values: t.settings.fontBold.values, value: i.style?.fontBold }), "fontItalic" in t.settings && !t.settings.fontItalic.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontItalic", icon: qt, valueChanged: l, values: t.settings.fontItalic.values, value: i.style?.fontItalic }), "opacity" in t.settings && !t.settings.opacity.hidden && p(nt, { selectedSettings: s, setSelectedSettings: a, title: "Opacité", icon: jt, min: t.settings.opacity.min, max: t.settings.opacity.max, step: t.settings.opacity.step, unity: "%", disabled: n, field: "opacity", value: i.style?.opacity ?? 100, valueChanged: o })] }) }) : "settings" in e ? I(he, { children: ["strokeColor" in e.settings && !e.settings.strokeColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur du trait", mode: "stroke", disabled: n, field: "strokeColor", value: e.settings.strokeColor.default, valueChanged: o, values: e.settings.strokeColor.values }), "fillColor" in e.settings && !e.settings.fillColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur de fond", disabled: n, field: "fillColor", value: e.settings.fillColor.default, valueChanged: o, values: e.settings.fillColor.values }), "lineWidth" in e.settings && !e.settings.lineWidth.hidden && p(nt, { selectedSettings: s, setSelectedSettings: a, title: "Epaisseur du trait", disabled: n, field: "lineWidth", icon: Jt, value: e.settings.lineWidth.default, valueChanged: o, unity: "px", min: e.settings.lineWidth.min, max: e.settings.lineWidth.max, step: e.settings.lineWidth.step }), "lineDash" in e.settings && !e.settings.lineDash.hidden && p(Ti, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: e.settings.lineDash.default, valueChanged: o, values: e.settings.lineDash.values }), "lineArrow" in e.settings && !e.settings.lineArrow.hidden && p(Hi, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: e.settings.lineArrow.default, valueChanged: o, values: e.settings.lineArrow.values }), "pointsCount" in e.settings && !e.settings.pointsCount.hidden && p(Ai, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: r, min: e.settings.pointsCount.min, max: e.settings.pointsCount.max, step: e.settings.pointsCount.step, value: e.settings.pointsCount.default }), "fontFamily" in e.settings && !e.settings.fontFamily.hidden && p(Pi, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: l, values: e.settings.fontFamily.values, defaultValue: e.settings.fontFamily.default }), "fontBold" in e.settings && !e.settings.fontBold.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontBold", icon: _t, valueChanged: l, values: e.settings.fontBold.values, value: e.settings.fontBold.default }), "fontItalic" in e.settings && !e.settings.fontItalic.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontItalic", icon: qt, valueChanged: l, values: e.settings.fontItalic.values, value: e.settings.fontItalic.default }), "opacity" in e.settings && !e.settings.opacity.hidden && p(nt, { selectedSettings: s, setSelectedSettings: a, title: "Opacité", icon: jt, min: e.settings.opacity.min, max: e.settings.opacity.max, step: e.settings.opacity.step, unity: "%", disabled: n, field: "opacity", value: e.settings.opacity.default, valueChanged: o })] }) : null, yn = ({ width: e, disabled: i = !1, availableTools: t, updateToolSettings: n, layersManipulation: s, toggleLayoutPanel: a, activeTool: o, selectedShape: r, canvas: l, settings: h, updateShape: d, removeShape: c }) => {
|
|
1117
|
+
const [u, g] = z(void 0), [v, w] = z(!1), M = () => {
|
|
1204
1118
|
w((A) => !A);
|
|
1205
1119
|
}, S = r ? t.find((A) => A.id === r.toolId) || t.find((A) => A.type === r.type) : void 0, L = (S ? Object.keys(S.settings).length + 1 : "settings" in o ? Object.keys(o.settings).length : 0) + (s ? 1 : 0), b = e < 40 * L, k = (A, H, C = !0) => {
|
|
1206
|
-
r ? (d(
|
|
1120
|
+
r ? (d(st(re(["style", A], H, r), h), C), S && n(S.id, A, H)) : n(o.id, A, H);
|
|
1207
1121
|
}, P = (A, H) => {
|
|
1208
1122
|
if (r) {
|
|
1209
|
-
if (r.type !== "text")
|
|
1210
|
-
return;
|
|
1123
|
+
if (r.type !== "text") return;
|
|
1211
1124
|
const C = l?.getContext("2d");
|
|
1212
|
-
if (!C)
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
} else
|
|
1217
|
-
a(o.id, A, H);
|
|
1125
|
+
if (!C) return;
|
|
1126
|
+
const V = re(["style", A], H, r), W = Bt(C, V.value, V.width, V.style?.fontBold ?? !1, V.style?.fontItalic ?? !1, V.style?.fontFamily), y = st({ ...V, fontSize: W, height: W * V.value.length }, h);
|
|
1127
|
+
d(y, !0), S && n(S.id, A, H);
|
|
1128
|
+
} else n(o.id, A, H);
|
|
1218
1129
|
}, E = (A, H) => {
|
|
1219
1130
|
if (r) {
|
|
1220
|
-
if (r.type !== "polygon" && r.type !== "curve")
|
|
1221
|
-
|
|
1222
|
-
d(r.type === "polygon" ? ((C, V, z) => {
|
|
1131
|
+
if (r.type !== "polygon" && r.type !== "curve") return;
|
|
1132
|
+
d(r.type === "polygon" ? ((C, V, W) => {
|
|
1223
1133
|
const y = C.points.length;
|
|
1224
|
-
if (y === V)
|
|
1225
|
-
return C;
|
|
1134
|
+
if (y === V) return C;
|
|
1226
1135
|
if (y > V) {
|
|
1227
1136
|
const Z = C.points.slice(0, V);
|
|
1228
|
-
return _e({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } },
|
|
1137
|
+
return _e({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } }, W);
|
|
1229
1138
|
}
|
|
1230
1139
|
const F = V - y, x = new Array(F).fill(void 0).map((Z, f) => [C.points[0][0] + (C.points[1][0] - C.points[0][0]) * (f + 1) / (F + 1), C.points[0][1] + (C.points[1][1] - C.points[0][1]) * (f + 1) / (F + 1)]), T = [C.points[0], ...x, ...C.points.slice(1, C.points.length)];
|
|
1231
|
-
return _e({ ...C, points: T, style: { ...C.style, pointsCount: T.length } },
|
|
1232
|
-
})(r, H,
|
|
1140
|
+
return _e({ ...C, points: T, style: { ...C.style, pointsCount: T.length } }, W);
|
|
1141
|
+
})(r, H, h) : ((C, V, W) => {
|
|
1233
1142
|
const y = C.points.length;
|
|
1234
|
-
if (y === V)
|
|
1235
|
-
return C;
|
|
1143
|
+
if (y === V) return C;
|
|
1236
1144
|
if (y > V) {
|
|
1237
1145
|
const Z = C.points.slice(0, V);
|
|
1238
|
-
return qe({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } },
|
|
1146
|
+
return qe({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } }, W);
|
|
1239
1147
|
}
|
|
1240
1148
|
const F = V - y, x = new Array(F).fill(void 0).map((Z, f) => [C.points[0][0] + (C.points[1][0] - C.points[0][0]) * (f + 1) / (F + 1), C.points[0][1] + (C.points[1][1] - C.points[0][1]) * (f + 1) / (F + 1)]), T = [C.points[0], ...x, ...C.points.slice(1, C.points.length)];
|
|
1241
|
-
return qe({ ...C, points: T, style: { ...C.style, pointsCount: T.length } },
|
|
1242
|
-
})(r, H,
|
|
1243
|
-
} else
|
|
1244
|
-
a(o.id, A, H);
|
|
1149
|
+
return qe({ ...C, points: T, style: { ...C.style, pointsCount: T.length } }, W);
|
|
1150
|
+
})(r, H, h), !0), S && n(S.id, A, H);
|
|
1151
|
+
} else n(o.id, A, H);
|
|
1245
1152
|
};
|
|
1246
|
-
return I(
|
|
1247
|
-
}, Zi = ({ disabled: e = !1, withText: i = !1, loadFile: t, type:
|
|
1153
|
+
return I(he, { children: [I("div", { className: "react-paint-editor-settings-bar", children: [I("div", { className: "react-paint-editor-settings-shrinkable", children: [b && L > 2 && p(X, { disabled: i, onClick: M, title: "Toggle settings", icon: '<svg><path d="M2.5 15.833V14.083H7.667V15.833ZM2.5 5.917V4.167H10.771V5.917ZM9.208 17.5V12.438H10.958V14.083H17.5V15.833H10.958V17.5ZM5.917 12.542V10.875H2.5V9.125H5.917V7.479H7.667V12.542ZM9.208 10.875V9.125H17.5V10.875ZM12.333 7.562V2.5H14.083V4.167H17.5V5.917H14.083V7.562Z"/></svg>' }), r ? p(he, { children: S && I(he, { children: [!b && p(Tt, { activeTool: o, selectedShape: r, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P }), o.type === "selection" && p(un, { disabled: i, selectedShape: r, removeShape: c })] }) }) : !b && p(Tt, { activeTool: o, selectedShape: r, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P })] }), p("div", { className: "react-paint-editor-settings-separator" }), s && p(vn, { disabled: i, toggleLayoutPanel: a })] }), v && p(Xt, { className: "react-paint-editor-settings-modal", onClose: M, position: "bottom", children: p(Tt, { activeTool: o, selectedShape: r, selectedShapeTool: S, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P }) })] });
|
|
1154
|
+
}, Zi = ({ disabled: e = !1, withText: i = !1, loadFile: t, type: n, img: s, accept: a }) => {
|
|
1248
1155
|
const o = J(null);
|
|
1249
|
-
return
|
|
1156
|
+
return p(X, { ref: o, type: "file", onClick: (r) => {
|
|
1250
1157
|
r.stopPropagation(), o.current && (o.current.value = "");
|
|
1251
1158
|
}, onChange: (r) => {
|
|
1252
1159
|
const l = r.target.files?.item(0);
|
|
1253
1160
|
l && t(l);
|
|
1254
|
-
}, accept:
|
|
1255
|
-
},
|
|
1256
|
-
|
|
1257
|
-
}, title: e.label ?? e.type, icon: i, children:
|
|
1258
|
-
const [P, E] =
|
|
1259
|
-
return
|
|
1260
|
-
if (!P)
|
|
1261
|
-
return;
|
|
1161
|
+
}, accept: a, title: n.label ?? n.type, icon: s, disabled: e, children: i ? n.label : void 0 });
|
|
1162
|
+
}, ue = ({ type: e, img: i, isActive: t, withText: n = !1, disabled: s = !1, setActive: a }) => p(X, { disabled: s, selected: t, onClick: () => {
|
|
1163
|
+
a(e);
|
|
1164
|
+
}, title: e.label ?? e.type, icon: i, children: n ? e.label : void 0 }), Qn = ({ activeTool: e, withActionsInMenu: i, hasActionToUndo: t = !1, hasActionToRedo: n = !1, hasActionToClear: s = !1, undoAction: a, redoAction: o, clearCanvas: r, alignment: l, group: h, vertical: d = !1, disabled: c = !1, withLoadAndSave: u, withExport: g, addPicture: v, loadFile: w, togglePictureUrlModal: M, saveFile: S, exportCanvasInFile: L, withUploadPicture: b, withUrlPicture: k }) => {
|
|
1165
|
+
const [P, E] = z(!1), [, A] = Fi(), H = h?.tools?.some((V) => V === e.type), C = (H ? e.icon : h.img) ?? h.title;
|
|
1166
|
+
return G(() => {
|
|
1167
|
+
if (!P) return;
|
|
1262
1168
|
const V = () => {
|
|
1263
1169
|
E(!1);
|
|
1264
1170
|
};
|
|
1265
1171
|
return document.addEventListener("click", V), () => {
|
|
1266
1172
|
document.removeEventListener("click", V);
|
|
1267
1173
|
};
|
|
1268
|
-
}, [P]), i || b || k || u || g ? I("div", { className: "react-paint-editor-toolbox-relative", children: [
|
|
1174
|
+
}, [P]), i || b || k || u || g ? I("div", { className: "react-paint-editor-toolbox-relative", children: [p(X, { selected: H, title: h.title, disabled: c, onClick: () => {
|
|
1269
1175
|
A(() => {
|
|
1270
1176
|
E(!0);
|
|
1271
1177
|
});
|
|
1272
|
-
}, icon: C }), P &&
|
|
1178
|
+
}, icon: C }), P && p(et, { alignment: l, position: "top", children: I("div", { className: "react-paint-editor-toolbox-panel-content", "data-vertical": +d, children: [i && I(he, { children: [p(ue, { withText: !0, type: Xe, disabled: c || !t, img: Xe.icon, isActive: e.id === Xe.id, setActive: a }), p(ue, { withText: !0, type: Ye, disabled: c || !n, img: Ye.icon, isActive: e.id === Ye.id, setActive: o }), p(ue, { withText: !0, type: je, disabled: c || !s, img: je.icon, isActive: e.id === je.id, setActive: r }), (b || k || u) && p("hr", {})] }), b && p(Zi, { withText: !0, type: ni, disabled: c, loadFile: async (V) => {
|
|
1273
1179
|
E(!1), await v(V);
|
|
1274
|
-
}, img:
|
|
1180
|
+
}, img: ni.icon, accept: "image/png, image/gif, image/jpeg, image/svg+xml" }), k && p(X, { disabled: c, selected: !1, onClick: M, title: "Add picture from URL", icon: '<svg><path d="M9.188 16.542V14.938Q8.5 14.938 8.021 14.458Q7.542 13.979 7.542 13.292V12.458L3.583 8.5Q3.5 8.875 3.458 9.25Q3.417 9.625 3.417 10Q3.417 12.5 5.062 14.365Q6.708 16.229 9.188 16.542ZM14.854 14.438Q15.708 13.521 16.146 12.385Q16.583 11.25 16.583 10Q16.583 7.979 15.469 6.313Q14.354 4.646 12.479 3.917V4.229Q12.479 4.917 12 5.396Q11.521 5.875 10.833 5.875H9.188V7.521Q9.188 7.875 8.948 8.115Q8.708 8.354 8.354 8.354H6.708V10H11.646Q12 10 12.24 10.229Q12.479 10.458 12.479 10.812V13.292H13.292Q13.833 13.292 14.26 13.604Q14.688 13.917 14.854 14.438ZM10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333Z"/></svg>', children: "Add picture from URL" }), (b || k) && u && p("hr", {}), u && I(he, { children: [p(Zi, { withText: !0, type: ii, disabled: c, loadFile: (V) => {
|
|
1275
1181
|
E(!1), w(V);
|
|
1276
|
-
}, img:
|
|
1277
|
-
},
|
|
1182
|
+
}, img: ii.icon, accept: "application/JSON" }), p(ue, { withText: !0, disabled: c, type: kt, img: kt.icon, isActive: e.id === kt.id, setActive: S })] }), g && p(ue, { withText: !0, disabled: c, type: Mt, img: Mt.icon, isActive: e.id === Mt.id, setActive: L })] }) })] }) : null;
|
|
1183
|
+
}, Sn = ({ togglePictureUrlModal: e, addPicture: i }) => {
|
|
1278
1184
|
const t = J(null);
|
|
1279
|
-
return
|
|
1185
|
+
return G(() => {
|
|
1280
1186
|
t.current && t.current.focus();
|
|
1281
|
-
}, []),
|
|
1282
|
-
|
|
1187
|
+
}, []), p(Xt, { className: "react-paint-editor-toolbox-pictureinput-modal", onClose: e, children: I("form", { onSubmit: async (n) => {
|
|
1188
|
+
n.preventDefault();
|
|
1283
1189
|
const s = t.current?.value;
|
|
1284
1190
|
s && (await i(s), e());
|
|
1285
|
-
}, children: [I("label", { children: ["URL ",
|
|
1286
|
-
},
|
|
1287
|
-
const
|
|
1191
|
+
}, children: [I("label", { children: ["URL ", p("input", { type: "text", ref: t })] }), p(X, { onClick: e, children: "Annuler" }), p(X, { type: "submit", selected: !0, children: "Ajouter" })] }) });
|
|
1192
|
+
}, bn = ({ activeTool: e, alignment: i, group: t, disabled: n = !1, setActiveToolFromId: s }) => {
|
|
1193
|
+
const a = J(null), [o, r] = z(!1), [, l] = Fi(), [h, d] = z(void 0), c = (v) => {
|
|
1288
1194
|
d(v), s(v.id);
|
|
1289
1195
|
};
|
|
1290
|
-
if (
|
|
1291
|
-
if (!o)
|
|
1292
|
-
return;
|
|
1196
|
+
if (G(() => {
|
|
1197
|
+
if (!o) return;
|
|
1293
1198
|
const v = (w) => {
|
|
1294
|
-
!
|
|
1199
|
+
!a1(w, a.current) && r(!1);
|
|
1295
1200
|
};
|
|
1296
1201
|
return document.addEventListener("mousedown", v, { passive: !1 }), document.addEventListener("touchstart", v, { passive: !1 }), () => {
|
|
1297
1202
|
document.removeEventListener("mousedown", v), document.removeEventListener("touchstart", v);
|
|
1298
1203
|
};
|
|
1299
|
-
}, [o]), "type" in t)
|
|
1300
|
-
|
|
1301
|
-
if (
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
const u = t?.toolsType.find((v) => v.type === e.type) !== void 0, g = (p ? p.icon : t.toolsType?.[0]?.icon) ?? t.title;
|
|
1306
|
-
return I("div", { className: "react-paint-editor-toolbargroup-relative", children: [h(X, { selected: u, title: t.title, disabled: a, onClick: () => {
|
|
1307
|
-
p ? s(p.id) : t.toolsType?.[0] && c(t.toolsType[0]), l(() => {
|
|
1204
|
+
}, [o]), "type" in t) return p(ue, { disabled: n, type: t, img: t.icon, isActive: e.id === t.id, setActive: c });
|
|
1205
|
+
if (!t.toolsType.length) return null;
|
|
1206
|
+
if (t.toolsType?.length === 1) return p(ue, { disabled: n, type: t.toolsType[0], img: t.toolsType[0].icon, isActive: e.id === t.toolsType[0].id, setActive: c });
|
|
1207
|
+
const u = t?.toolsType.find((v) => v.type === e.type) !== void 0, g = (h ? h.icon : t.toolsType?.[0]?.icon) ?? t.title;
|
|
1208
|
+
return I("div", { className: "react-paint-editor-toolbargroup-relative", children: [p(X, { selected: u, title: t.title, disabled: n, onClick: () => {
|
|
1209
|
+
h ? s(h.id) : t.toolsType?.[0] && c(t.toolsType[0]), l(() => {
|
|
1308
1210
|
r(!0);
|
|
1309
1211
|
});
|
|
1310
|
-
}, icon: g }), o &&
|
|
1311
|
-
},
|
|
1212
|
+
}, icon: g }), o && p(et, { alignment: i, position: "top", children: p("div", { className: "react-paint-editor-toolbargroup-panel-content", "data-vertical": +t.vertical, ref: a, children: t.toolsType.map((v, w) => p(ue, { disabled: n, type: v, img: v.icon, isActive: e.id === v.id, setActive: c }, v.id)) }) })] });
|
|
1213
|
+
}, Cn = [{ title: "brush", toolsType: ["brush"], vertical: !1 }, { title: "lines", toolsType: ["line", "curve", "polygon"], vertical: !1 }, { title: "shapes", toolsType: ["rect", "square", "circle", "ellipse"], vertical: !1 }, "text"], wn = ({ width: e, disabled: i = !1, activeTool: t, hasActionToUndo: n = !1, hasActionToRedo: s = !1, hasActionToClear: a = !1, withLoadAndSave: o, withExport: r, clearCanvas: l, setActiveTool: h, undoAction: d, redoAction: c, addPicture: u, loadFile: g, saveFile: v, exportCanvasInFile: w, availableTools: M, withUrlPicture: S, withUploadPicture: L }) => {
|
|
1312
1214
|
const b = ((x, T) => {
|
|
1313
1215
|
const Z = T.flatMap((f) => {
|
|
1314
|
-
if (typeof f != "object")
|
|
1315
|
-
return x.filter((Q) => Q.type === f);
|
|
1216
|
+
if (typeof f != "object") return x.filter((Q) => Q.type === f);
|
|
1316
1217
|
const m = x.filter((Q) => f.toolsType.includes(Q.type));
|
|
1317
1218
|
return m ? { ...f, toolsType: m } : null;
|
|
1318
1219
|
});
|
|
1319
|
-
return
|
|
1320
|
-
})(M,
|
|
1220
|
+
return Ot(Z);
|
|
1221
|
+
})(M, Cn), k = e < 40 * (5 + b.length), P = e < 40 * (2 + b.length), [E, A] = z(!1), [H, C] = z(!1), V = () => {
|
|
1321
1222
|
A((x) => !x);
|
|
1322
|
-
},
|
|
1323
|
-
|
|
1223
|
+
}, W = (x) => {
|
|
1224
|
+
h(x), A(!1);
|
|
1324
1225
|
}, y = (x) => {
|
|
1325
|
-
|
|
1226
|
+
W(M.find((T) => T.id === x) ?? t);
|
|
1326
1227
|
}, F = M.find((x) => x.type === t.type) !== void 0;
|
|
1327
|
-
return I(
|
|
1228
|
+
return I(he, { children: [I("div", { className: "react-paint-editor-toolbar-toolbox", children: [I("div", { className: "react-paint-editor-toolbar-shrinkable", children: [p(ue, { type: Ze, disabled: i, img: Ze.icon, isActive: t.id === Ze.id, setActive: W }), P ? p(X, { disabled: i, onClick: V, title: "Toggle tools", icon: '<svg><path d="M5.333 9.292 10.021 1.646 14.708 9.292ZM14.562 18.333Q13 18.333 11.896 17.229Q10.792 16.125 10.792 14.562Q10.792 13 11.896 11.896Q13 10.792 14.562 10.792Q16.125 10.792 17.229 11.896Q18.333 13 18.333 14.562Q18.333 16.125 17.229 17.229Q16.125 18.333 14.562 18.333ZM2.5 17.917V11.188H9.229V17.917ZM14.562 16.583Q15.438 16.583 16.01 16.01Q16.583 15.438 16.583 14.562Q16.583 13.688 16.01 13.115Q15.438 12.542 14.562 12.542Q13.688 12.542 13.115 13.115Q12.542 13.688 12.542 14.562Q12.542 15.438 13.115 16.01Q13.688 16.583 14.562 16.583ZM4.25 16.167H7.479V12.938H4.25ZM8.458 7.542H11.583L10.021 5ZM10.021 7.542ZM7.479 12.938ZM14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Z"/></svg>', selected: F }) : b.map((x, T) => p(bn, { disabled: i, activeTool: t, group: x, setActiveToolFromId: y }, "id" in x ? x.id : x.title))] }), !k && I(he, { children: [p(ue, { type: Xe, disabled: i || !n, img: Xe.icon, isActive: t.id === Xe.id, setActive: d }), p(ue, { type: Ye, disabled: i || !s, img: Ye.icon, isActive: t.id === Ye.id, setActive: c }), p(ue, { type: je, disabled: i || !a, img: je.icon, isActive: t.id === je.id, setActive: l })] }), p(Qn, { withActionsInMenu: k, disabled: i, vertical: !0, alignment: "right", group: { title: "Menu", img: '<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>' }, activeTool: t, addPicture: u, loadFile: g, saveFile: v, togglePictureUrlModal: () => {
|
|
1328
1229
|
C(!0);
|
|
1329
|
-
}, exportCanvasInFile: w, withUploadPicture: L, withUrlPicture: S, withLoadAndSave: o, withExport: r, hasActionToUndo:
|
|
1230
|
+
}, exportCanvasInFile: w, withUploadPicture: L, withUrlPicture: S, withLoadAndSave: o, withExport: r, hasActionToUndo: n, hasActionToRedo: s, hasActionToClear: a, undoAction: d, redoAction: c, clearCanvas: l })] }), E && p(Xt, { className: "react-paint-editor-toolbar-modal", onClose: V, children: M.map((x, T) => x.type === "picture" ? null : p(ue, { disabled: i, type: x, img: x.icon, withText: !1, isActive: t.id === x.id, setActive: W }, x.id)) }), H && p(Sn, { togglePictureUrlModal: () => {
|
|
1330
1231
|
C((x) => !x);
|
|
1331
1232
|
}, addPicture: u })] });
|
|
1332
|
-
}, pt = { none: 0, small: 10, medium: 20, large: 40 },
|
|
1333
|
-
const e = J([]), [i, t] =
|
|
1334
|
-
return
|
|
1335
|
-
for (const
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
const o = { id: se("snackbar_"), duration: s, type: a, text: n };
|
|
1233
|
+
}, pt = { none: 0, small: 10, medium: 20, large: 40 }, xn = { toolbarBackgroundColor: "white", dividerColor: "#36418129", fontRadius: 8, fontDisabledColor: "#3641812b", fontDisabledBackgroundColor: "transparent", fontColor: "#364181", fontBackgroundColor: "transparent", fontSelectedColor: "white", fontSelectedBackgroundColor: "#364181", fontHoverColor: "#364181", fontHoverBackgroundColor: "#afd8d8" }, Mn = () => {
|
|
1234
|
+
const e = J([]), [i, t] = z([]);
|
|
1235
|
+
return G(() => () => {
|
|
1236
|
+
for (const n of e.current) clearTimeout(n);
|
|
1237
|
+
}, []), { snackbarList: i, addSnackbar: ({ type: n = on, duration: s = rn, text: a }) => {
|
|
1238
|
+
const o = { id: se("snackbar_"), duration: s, type: n, text: a };
|
|
1339
1239
|
t((r) => [...r, o]), e.current = [...e.current, setTimeout(() => {
|
|
1340
|
-
return r = o.id, void t((l) => l.filter((
|
|
1240
|
+
return r = o.id, void t((l) => l.filter((h) => h.id !== r));
|
|
1341
1241
|
var r;
|
|
1342
1242
|
}, s)];
|
|
1343
1243
|
} };
|
|
1344
|
-
},
|
|
1345
|
-
const { shapesRef:
|
|
1346
|
-
V((Fe) => Fe.map((
|
|
1244
|
+
}, Hn = ({ editorProps: e, className: i, style: t, options: n, children: s }) => {
|
|
1245
|
+
const { shapesRef: a, addPictureShape: o, moveShapes: r, toggleShapeVisibility: l, toggleShapeLock: h, canGoBackward: d, canGoForward: c, canClear: u, selectedShape: g, removeShape: v, updateShape: w, backwardShape: M, forwardShape: S, refs: L, width: b, height: k, canvasSize: P, selectTool: E, selectShape: A, activeTool: H, setActiveTool: C, setAvailableTools: V, isEditMode: W, isDisabled: y, availableTools: F, gridGap: x, setGridGap: T, loadFile: Z, exportPicture: f, exportData: m, clearCanvas: Q, settings: D, canvas: { canGrow: N, layersManipulation: Y, withExport: de, withLoadAndSave: $, withUploadPicture: U, withUrlPicture: oe } } = e, { toolbarBackgroundColor: ee, dividerColor: te, fontRadius: fe, fontDisabledColor: ke, fontDisabledBackgroundColor: ie, fontColor: j, fontBackgroundColor: Se, fontSelectedColor: Ee, fontSelectedBackgroundColor: Le, fontHoverColor: me, fontHoverBackgroundColor: be } = { ...xn, ...n }, [De, ae] = z(!1), [Ve, Ie] = z(!1), ce = x >= pt.large ? "large" : x >= pt.medium ? "medium" : x >= pt.small ? "small" : "none", { snackbarList: ye, addSnackbar: ne } = Mn(), Pe = R((q, ve, lt) => {
|
|
1246
|
+
V((Fe) => Fe.map((B) => B.id === q ? re(["settings", ve, "default"], lt, B) : B)), C((Fe) => Fe.id === q ? re(["settings", ve, "default"], lt, Fe) : Fe);
|
|
1347
1247
|
}, [C, V]), Ue = R(() => {
|
|
1348
1248
|
E(Ze), M();
|
|
1349
|
-
}, [E, M]),
|
|
1249
|
+
}, [E, M]), He = R(() => {
|
|
1350
1250
|
E(Ze), S();
|
|
1351
|
-
}, [E, S]),
|
|
1352
|
-
|
|
1251
|
+
}, [E, S]), Be = R(() => {
|
|
1252
|
+
ae(!0);
|
|
1353
1253
|
try {
|
|
1354
|
-
f(),
|
|
1254
|
+
f(), ae(!1);
|
|
1355
1255
|
} catch (q) {
|
|
1356
|
-
q instanceof Error &&
|
|
1256
|
+
q instanceof Error && ne({ type: "error", text: "L'export a échoué" }), console.warn(q);
|
|
1357
1257
|
} finally {
|
|
1358
|
-
|
|
1258
|
+
ae(!1);
|
|
1359
1259
|
}
|
|
1360
|
-
}, [f,
|
|
1361
|
-
|
|
1260
|
+
}, [f, ne]), rt = R(() => {
|
|
1261
|
+
ae(!0);
|
|
1362
1262
|
try {
|
|
1363
|
-
m(),
|
|
1263
|
+
m(), ae(!1);
|
|
1364
1264
|
} catch (q) {
|
|
1365
|
-
q instanceof Error &&
|
|
1265
|
+
q instanceof Error && ne({ type: "error", text: "L'enregistrement a échoué" }), console.warn(q);
|
|
1366
1266
|
} finally {
|
|
1367
|
-
|
|
1267
|
+
ae(!1);
|
|
1368
1268
|
}
|
|
1369
|
-
}, [m,
|
|
1370
|
-
|
|
1269
|
+
}, [m, ne]), Ct = R(async (q) => {
|
|
1270
|
+
ae(!0);
|
|
1371
1271
|
try {
|
|
1372
|
-
await Z(q),
|
|
1373
|
-
} catch (
|
|
1374
|
-
|
|
1272
|
+
await Z(q), ne({ type: "success", text: "Fichier chargé !" });
|
|
1273
|
+
} catch (ve) {
|
|
1274
|
+
ve instanceof Error && ne({ type: "error", text: "Le chargement a échoué" }), console.warn(ve);
|
|
1375
1275
|
} finally {
|
|
1376
|
-
|
|
1276
|
+
ae(!1);
|
|
1377
1277
|
}
|
|
1378
|
-
}, [Z,
|
|
1379
|
-
|
|
1278
|
+
}, [Z, ne]), wt = R(async (q) => {
|
|
1279
|
+
ae(!0);
|
|
1380
1280
|
try {
|
|
1381
|
-
const
|
|
1382
|
-
A(
|
|
1383
|
-
} catch (
|
|
1384
|
-
|
|
1281
|
+
const ve = await o(q, b, k);
|
|
1282
|
+
A(ve);
|
|
1283
|
+
} catch (ve) {
|
|
1284
|
+
ve instanceof Error && ne({ type: "error", text: "Le chargement a échoué" }), console.warn(ve);
|
|
1385
1285
|
} finally {
|
|
1386
|
-
|
|
1286
|
+
ae(!1);
|
|
1387
1287
|
}
|
|
1388
|
-
}, [o, A,
|
|
1389
|
-
return I("div", { ref: L.setEditor, className: Ce, style: { "--react-paint-editor-app-maxWidth": N ? "100%" : `${b}px`, "--react-paint-editor-app-toolbar-bg": ee, "--react-paint-editor-app-divider-color": te, "--react-paint-editor-app-font-radius":
|
|
1288
|
+
}, [o, A, ne, b, k]), Ce = `${i ? `${i} ` : ""}${Ve ? "react-paint-editor-layout-opened " : ""}react-paint-editor-app`;
|
|
1289
|
+
return I("div", { ref: L.setEditor, className: Ce, style: { "--react-paint-editor-app-maxWidth": N ? "100%" : `${b}px`, "--react-paint-editor-app-toolbar-bg": ee, "--react-paint-editor-app-divider-color": te, "--react-paint-editor-app-font-radius": fe, "--react-paint-editor-app-font-disabled-color": ke, "--react-paint-editor-app-font-disabled-bg": ie, "--react-paint-editor-app-font-color": j, "--react-paint-editor-app-font-bg": Se, "--react-paint-editor-app-font-selected-color": Ee, "--react-paint-editor-app-font-selected-bg": Le, "--react-paint-editor-app-font-hover-color": me, "--react-paint-editor-app-font-hover-bg": be, ...t }, children: [W && p(wn, { width: P.width, disabled: y, activeTool: H, clearCanvas: Q, setActiveTool: E, exportCanvasInFile: Be, saveFile: rt, loadFile: Ct, addPicture: wt, hasActionToUndo: d, hasActionToRedo: c, hasActionToClear: u, undoAction: Ue, redoAction: He, availableTools: F, withExport: de, withLoadAndSave: $, withUploadPicture: U, withUrlPicture: oe }), s, W && Y && p(pn, { gridFormat: ce, setGridFormat: (q) => {
|
|
1390
1290
|
T(pt[q]);
|
|
1391
|
-
}, disabled: y, shapes:
|
|
1291
|
+
}, disabled: y, shapes: a.current, moveShapes: r, selectedShape: g, removeShape: v, selectShape: A, toggleShapeVisibility: l, toggleShapeLock: h, isLayoutPanelShown: Ve }), W && I(he, { children: [p(yn, { width: P.width, disabled: y, activeTool: H, availableTools: F, selectedShape: g, settings: D, removeShape: v, updateShape: w, canvas: L.canvas.current, layersManipulation: Y, toggleLayoutPanel: () => {
|
|
1392
1292
|
Ie((q) => !q);
|
|
1393
|
-
}, updateToolSettings:
|
|
1293
|
+
}, updateToolSettings: Pe }), p(sn, { isLoading: De }), p(dn, { snackbarList: ye })] })] });
|
|
1394
1294
|
};
|
|
1395
1295
|
export {
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1296
|
+
Pn as Canvas,
|
|
1297
|
+
Hn as Editor,
|
|
1298
|
+
Vn as useReactPaint
|
|
1399
1299
|
};
|