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