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