@yorab/react-paint 0.11.6 → 0.11.7
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 +1 -1
- package/dist/react-paint.js +94 -92
- package/dist/react-paint.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/react-paint.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Fi, { useState as z, useEffect as B, useRef as q, useCallback as F, useMemo as Ni, useImperativeHandle as S1, useTransition as Ri } from "react";
|
|
2
2
|
import { jsx as p, jsxs as I, Fragment as pe } from "react/jsx-runtime";
|
|
3
|
-
const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>', Rt = '<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>', It = '<svg><path d="M10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333ZM10 16.583Q12.75 16.583 14.667 14.667Q16.583 12.75 16.583 10Q16.583 7.25 14.667 5.333Q12.75 3.417 10 3.417Q7.25 3.417 5.333 5.333Q3.417 7.25 3.417 10Q3.417 12.75 5.333 14.667Q7.25 16.583 10 16.583ZM10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Z"/></svg>', Wt = '<svg><path d="M12.25 18.333V16.167L6.833 13.458H2.5V8.208H6.25L8.25 5.917V1.667H13.5V6.917H9.708L7.75 9.146V11.958L12.25 14.208V13.083H17.5V18.333Z"/></svg>', Wi = '<svg><path d="M4.125 5.083V3.333H7.062L7.896 2.5H12.104L12.938 3.333H15.875V5.083ZM6.75 17.5Q6.021 17.5 5.51 16.99Q5 16.479 5 15.75V5.958H15V15.75Q15 16.479 14.49 16.99Q13.979 17.5 13.25 17.5Z"/></svg>', qt = '<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>', zt = '<svg><path d="M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z"/></svg>', zi = '<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>', Oi = '<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>', $i = '<svg><path d="M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z"/></svg>', Jt = '<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>', Kt = '<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>', ei = '<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>', ti = '<svg><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM10 16.583Q10.896 16.583 11.708 16.365Q12.521 16.146 13.25 15.729L4.292 6.75Q3.875 7.479 3.646 8.292Q3.417 9.104 3.417 10Q3.417 12.729 5.344 14.656Q7.271 16.583 10 16.583ZM17 14.562 15.708 13.271Q16.125 12.542 16.354 11.719Q16.583 10.896 16.583 10Q16.583 7.271 14.656 5.344Q12.729 3.417 10 3.417Q9.104 3.417 8.292 3.646Q7.479 3.875 6.75 4.292L5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562ZM11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771ZM8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Z"/></svg>', ii = '<svg ><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM17 14.562 5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562Z"/></svg>', de = ["transparent", "black", "white", "red", "green", "blue", "yellow"], Fe = [0, 1, 2], ni = [[1, 0], [1, 2], [4, 6]], rt = "serif", b1 = 2, Ui = 3, C1 = 4, ee = "react-paint-", Ot = { type: "picture", id: `${ee}picture`, icon: zt, label: "Image", settings: { opacity: { min: 0, max: 100, step: 1, default: 100 } } }, Bi = { type: "brush", id: `${ee}brush`, icon: Ii, label: "Brosse", settings: { strokeColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 6, max: 20, step: 2, default: 10 }, lineDash: { values: Fe, default: 0 } } }, Gi = { type: "line", id: `${ee}line`, icon: Oi, label: "Ligne", settings: { strokeColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 }, lineArrow: { values: [0, 1, 2, 3], default: 0 } } }, Xi = { type: "polygon", id: `${ee}polygon`, icon: Wt, label: "Polygone", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 }, pointsCount: { min: 3, max: 10, step: 1, default: 3 } } }, Yi = { type: "curve", id: `${ee}curve`, icon: $i, label: "Courbe", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 }, pointsCount: { min: 3, max: 10, step: 1, default: 3 } } }, ji = { type: "rect", id: `${ee}rect`, icon: Rt, label: "Rectangle", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 } } }, _i = { type: "square", id: `${ee}square`, icon: Rt, label: "Carré", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 } } }, qi = { type: "circle", id: `${ee}circle`, icon: It, label: "Cercle", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 } } }, Ji = { type: "ellipse", id: `${ee}ellipse`, icon: It, label: "Ellipse", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 } } }, Ki = { type: "text", id: `${ee}text`, icon: zi, label: "Texte", settings: { strokeColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, fontFamily: { values: ["arial", "serif", "monospace"], default: rt }, fontBold: { values: [!1, !0], default: !1 }, fontItalic: { values: [!1, !0], default: !1 } } }, Ae = { id: `${ee}selection`, type: "selection", icon: '<svg><path d="M8.0145 11.1707C8.38484 10.9914 8.82183 11.1558 8.99959 11.5295L10.7031 15.2591L12.0363 14.6238L10.3254 10.9017C10.1476 10.528 10.3106 10.0795 10.6809 9.90761L10.8883 9.84782L12.5918 9.51148L6.48133 4.33192V12.389L7.82934 11.2903L8.0145 11.1707ZM10.6587 16.9258C10.2883 17.1052 9.84395 16.9482 9.67359 16.5745L8.05894 13.0318L6.19988 14.5416C6.07396 14.6462 5.91842 14.706 5.74066 14.706C5.54423 14.706 5.35584 14.6272 5.21694 14.4871C5.07803 14.3469 5 14.1568 5 13.9586V2.74741C5 2.54919 5.07803 2.35908 5.21694 2.21891C5.35584 2.07874 5.54423 2 5.74066 2C5.91842 2 6.08878 2.06727 6.21469 2.1719L6.2221 2.16443L14.7323 9.36947C15.0508 9.63854 15.0879 10.1094 14.8286 10.4233C14.7175 10.5579 14.562 10.6475 14.4064 10.6774L12.0659 11.1408L13.6954 14.6761C13.888 15.0498 13.7102 15.4908 13.3399 15.6627L10.6587 16.9258Z"/></svg>', label: "Sélection" }, Ge = { id: `${ee}undo`, type: "undo", icon: '<svg><path d="M11.708 15.833H5.854V14.083H11.708Q13 14.083 13.958 13.292Q14.917 12.5 14.917 11.271Q14.917 10.042 13.958 9.24Q13 8.438 11.708 8.438H6.667L8.792 10.562L7.562 11.792L3.333 7.562L7.562 3.333L8.792 4.562L6.667 6.688H11.708Q13.729 6.688 15.198 7.99Q16.667 9.292 16.667 11.25Q16.667 13.208 15.198 14.521Q13.729 15.833 11.708 15.833Z"/></svg>', label: "Undo" }, Xe = { id: `${ee}redo`, type: "redo", icon: '<svg><path d="M8.292 15.833Q6.271 15.833 4.802 14.521Q3.333 13.208 3.333 11.25Q3.333 9.292 4.802 7.99Q6.271 6.688 8.292 6.688H13.333L11.208 4.562L12.438 3.333L16.667 7.562L12.438 11.792L11.208 10.562L13.333 8.438H8.292Q7 8.438 6.042 9.229Q5.083 10.021 5.083 11.25Q5.083 12.5 6.042 13.292Q7 14.083 8.292 14.083H14.146V15.833Z"/></svg>', label: "Redo" }, Ye = { id: `${ee}clear`, type: "clear", icon: '<svg><path d="M7.854 13.812 10 11.688 12.125 13.812 13.354 12.604 11.208 10.458 13.354 8.312 12.125 7.104 10 9.229 7.854 7.104 6.625 8.312 8.771 10.458 6.625 12.604ZM5.896 17.5Q5.167 17.5 4.656 16.99Q4.146 16.479 4.146 15.75V5.125H3.333V3.375H7.542V2.5H12.458V3.375H16.667V5.125H15.833V15.75Q15.833 16.479 15.323 16.99Q14.812 17.5 14.083 17.5Z"/></svg>', label: "Clear" }, kt = { id: `${ee}export`, type: "export", icon: '<svg><path d="M10 13.271 5.708 8.979 6.958 7.729 9.125 9.896V3.333H10.875V9.896L13.042 7.729L14.292 8.979ZM5.083 16.667Q4.354 16.667 3.844 16.156Q3.333 15.646 3.333 14.917V12.5H5.083V14.917Q5.083 14.917 5.083 14.917Q5.083 14.917 5.083 14.917H14.917Q14.917 14.917 14.917 14.917Q14.917 14.917 14.917 14.917V12.5H16.667V14.917Q16.667 15.646 16.156 16.156Q15.646 16.667 14.917 16.667Z"/></svg>', label: "Export PNG" }, ai = { id: `${ee}load`, type: "loadfile", icon: '<svg><path d="M3.417 16.667Q2.729 16.667 2.198 16.135Q1.667 15.604 1.667 14.917V5.083Q1.667 4.396 2.198 3.865Q2.729 3.333 3.417 3.333H8.25L9.917 5H16.667Q17.354 5 17.844 5.531Q18.333 6.062 18.333 6.75H3.417V14.917Q3.417 14.917 3.417 14.917Q3.417 14.917 3.417 14.917L5.438 8.5H19.583L17.396 15.479Q17.229 16.021 16.802 16.344Q16.375 16.667 15.833 16.667Z"/></svg>', label: "Load project" }, Lt = { id: `${ee}save`, type: "savefile", icon: '<svg><path d="M17.5 5.833V15.75Q17.5 16.479 16.99 16.99Q16.479 17.5 15.75 17.5H4.25Q3.521 17.5 3.01 16.99Q2.5 16.479 2.5 15.75V4.25Q2.5 3.521 3.01 3.01Q3.521 2.5 4.25 2.5H14.167ZM10 14.917Q11.062 14.917 11.823 14.156Q12.583 13.396 12.583 12.333Q12.583 11.271 11.823 10.51Q11.062 9.75 10 9.75Q8.938 9.75 8.177 10.51Q7.417 11.271 7.417 12.333Q7.417 13.396 8.177 14.156Q8.938 14.917 10 14.917ZM5.021 8.396H12.521V5.021H5.021Z"/></svg>', label: "Save project" }, si = { id: `${ee}upload-picture`, type: "uploadpicture", icon: zt, label: "Upload picture" }, e1 = 2, t1 = "blue", Te = 14, i1 = [[0, 0], [0.5, 0], [1, 0], [1, 0.5], [1, 1], [0.5, 1], [0, 1], [0, 0.5]], n1 = ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text", "triangle"], a1 = "react-paint-canvas-drawcanvas", s1 = "react-paint-canvas-selectioncanvas", oi = { layersManipulation: !0, grid: 0, canGrow: !1, canShrink: !0, withExport: !0, withLoadAndSave: !0, withUploadPicture: !0, withUrlPicture: !1, availableTools: [Bi, Gi, Xi, Yi, ji, _i, qi, Ji, Ot, Ki], clearCallback: "empty", brushAlgo: "simple", isBrushShapeDoneOnMouseUp: !0, withFrameSelection: !1, withSkeleton: !0, canvasSelectionPadding: 0 }, w1 = { canvasBackgroundColor: "white", canvasSelectionColor: t1, canvasSelectionWidth: e1 }, o1 = (e, i) => !!(e.target instanceof Node && i) && i.contains(e.target), ut = 300, Zt = (e, i) => {
|
|
3
|
+
const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>', Rt = '<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>', It = '<svg><path d="M10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333ZM10 16.583Q12.75 16.583 14.667 14.667Q16.583 12.75 16.583 10Q16.583 7.25 14.667 5.333Q12.75 3.417 10 3.417Q7.25 3.417 5.333 5.333Q3.417 7.25 3.417 10Q3.417 12.75 5.333 14.667Q7.25 16.583 10 16.583ZM10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Q10 10 10 10Z"/></svg>', Wt = '<svg><path d="M12.25 18.333V16.167L6.833 13.458H2.5V8.208H6.25L8.25 5.917V1.667H13.5V6.917H9.708L7.75 9.146V11.958L12.25 14.208V13.083H17.5V18.333Z"/></svg>', Wi = '<svg><path d="M4.125 5.083V3.333H7.062L7.896 2.5H12.104L12.938 3.333H15.875V5.083ZM6.75 17.5Q6.021 17.5 5.51 16.99Q5 16.479 5 15.75V5.958H15V15.75Q15 16.479 14.49 16.99Q13.979 17.5 13.25 17.5Z"/></svg>', qt = '<svg><path d="M10 17.5Q7.208 17.5 5.271 15.594Q3.333 13.688 3.333 10.958Q3.333 9.583 3.854 8.396Q4.375 7.208 5.292 6.292L10 1.667L14.688 6.292Q15.604 7.208 16.135 8.396Q16.667 9.583 16.667 10.958Q16.667 13.688 14.719 15.594Q12.771 17.5 10 17.5ZM5.146 11.667H14.854Q15.083 10.188 14.552 9.146Q14.021 8.104 13.479 7.562L10 4.125L6.521 7.562Q5.979 8.104 5.448 9.146Q4.917 10.188 5.146 11.667Z"/></svg>', zt = '<svg><path d="M4.792 15.083 8.333 11.542 9.833 13.021 11.667 10.708 15.167 15.083ZM6.667 8.417Q5.938 8.417 5.427 7.906Q4.917 7.396 4.917 6.667Q4.917 5.938 5.427 5.427Q5.938 4.917 6.667 4.917Q7.396 4.917 7.906 5.427Q8.417 5.938 8.417 6.667Q8.417 7.396 7.906 7.906Q7.396 8.417 6.667 8.417ZM4.167 18.333Q3.125 18.333 2.396 17.604Q1.667 16.875 1.667 15.833V4.167Q1.667 3.125 2.396 2.396Q3.125 1.667 4.167 1.667H15.833Q16.875 1.667 17.604 2.396Q18.333 3.125 18.333 4.167V15.833Q18.333 16.875 17.604 17.604Q16.875 18.333 15.833 18.333ZM4.167 16.583H15.833Q16.146 16.583 16.365 16.365Q16.583 16.146 16.583 15.833V4.167Q16.583 3.854 16.365 3.635Q16.146 3.417 15.833 3.417H4.167Q3.854 3.417 3.635 3.635Q3.417 3.854 3.417 4.167V15.833Q3.417 16.146 3.635 16.365Q3.854 16.583 4.167 16.583Z"/></svg>', zi = '<svg><path d="M8.708 16.667V5.917H4.167V3.333H15.833V5.917H11.292V16.667Z"/></svg>', Oi = '<svg><path d="M7.5 15.833V14.083H12.833L3.333 4.583L4.583 3.333L14.083 12.833V7.5H15.833V15.833Z"/></svg>', $i = '<svg><path d="M7.521 17.5Q6.125 17.5 5.146 16.51Q4.167 15.521 4.167 14.125V7.417Q3.438 7.125 2.969 6.49Q2.5 5.854 2.5 5.042Q2.5 3.979 3.24 3.24Q3.979 2.5 5.042 2.5Q6.104 2.5 6.844 3.24Q7.583 3.979 7.583 5.042Q7.583 5.854 7.115 6.49Q6.646 7.125 5.917 7.417V14.125Q5.917 14.792 6.385 15.271Q6.854 15.75 7.521 15.75Q8.188 15.75 8.656 15.271Q9.125 14.792 9.125 14.125V5.875Q9.125 4.479 10.104 3.49Q11.083 2.5 12.479 2.5Q13.875 2.5 14.854 3.49Q15.833 4.479 15.833 5.875V12.583Q16.562 12.875 17.031 13.51Q17.5 14.146 17.5 14.958Q17.5 16.021 16.76 16.76Q16.021 17.5 14.958 17.5Q13.896 17.5 13.156 16.76Q12.417 16.021 12.417 14.958Q12.417 14.146 12.885 13.5Q13.354 12.854 14.083 12.583V5.875Q14.083 5.208 13.615 4.729Q13.146 4.25 12.479 4.25Q11.812 4.25 11.344 4.729Q10.875 5.208 10.875 5.875V14.125Q10.875 15.521 9.896 16.51Q8.917 17.5 7.521 17.5Z"/></svg>', Jt = '<svg><path d="M5.833 15V3.333H10.375Q11.812 3.333 12.885 4.156Q13.958 4.979 13.958 6.375Q13.958 7.375 13.49 7.969Q13.021 8.562 12.396 8.875V9.042Q13.312 9.354 13.844 10.021Q14.375 10.688 14.375 11.75Q14.375 13.312 13.229 14.156Q12.083 15 10.5 15ZM8.125 8.042H10.188Q10.854 8.042 11.302 7.656Q11.75 7.271 11.75 6.708Q11.75 6.167 11.302 5.771Q10.854 5.375 10.188 5.375H8.125ZM8.125 12.917H10.354Q11.167 12.917 11.625 12.51Q12.083 12.104 12.083 11.458Q12.083 10.812 11.625 10.406Q11.167 10 10.354 10H8.125Z"/></svg>', Kt = '<svg><path d="M4.167 16.667V14.083H6.979L10.229 5.917H7.5V3.333H15.833V5.917H13.021L9.771 14.083H12.5V16.667Z"/></svg>', ei = '<svg><path d="M3.021 16V15H17V16ZM3.021 13.5V12H17V13.5ZM3 10.5V8.5H16.979V10.5ZM3.021 7V4H17V7Z"/></svg>', ti = '<svg><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM10 16.583Q10.896 16.583 11.708 16.365Q12.521 16.146 13.25 15.729L4.292 6.75Q3.875 7.479 3.646 8.292Q3.417 9.104 3.417 10Q3.417 12.729 5.344 14.656Q7.271 16.583 10 16.583ZM17 14.562 15.708 13.271Q16.125 12.542 16.354 11.719Q16.583 10.896 16.583 10Q16.583 7.271 14.656 5.344Q12.729 3.417 10 3.417Q9.104 3.417 8.292 3.646Q7.479 3.875 6.75 4.292L5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562ZM11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771ZM8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Z"/></svg>', ii = '<svg ><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM17 14.562 5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562Z"/></svg>', de = ["transparent", "black", "white", "red", "green", "blue", "yellow"], Fe = [0, 1, 2], ni = [[1, 0], [1, 2], [4, 6]], rt = "serif", b1 = 2, Ui = 3, C1 = 4, K = "react-paint-", Ot = { type: "picture", id: `${K}picture`, icon: zt, label: "Image", settings: { opacity: { min: 0, max: 100, step: 1, default: 100 } } }, Bi = { type: "brush", id: `${K}brush`, icon: Ii, label: "Brosse", settings: { strokeColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 6, max: 20, step: 2, default: 10 }, lineDash: { values: Fe, default: 0 } } }, Gi = { type: "line", id: `${K}line`, icon: Oi, label: "Ligne", settings: { strokeColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 }, lineArrow: { values: [0, 1, 2, 3], default: 0 } } }, Xi = { type: "polygon", id: `${K}polygon`, icon: Wt, label: "Polygone", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 }, pointsCount: { min: 3, max: 10, step: 1, default: 3 } } }, Yi = { type: "curve", id: `${K}curve`, icon: $i, label: "Courbe", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 }, pointsCount: { min: 3, max: 10, step: 1, default: 3 } } }, ji = { type: "rect", id: `${K}rect`, icon: Rt, label: "Rectangle", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 } } }, _i = { type: "square", id: `${K}square`, icon: Rt, label: "Carré", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 } } }, qi = { type: "circle", id: `${K}circle`, icon: It, label: "Cercle", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 } } }, Ji = { type: "ellipse", id: `${K}ellipse`, icon: It, label: "Ellipse", settings: { strokeColor: { values: de, default: "black" }, fillColor: { values: de, default: "transparent" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, lineWidth: { min: 1, max: 20, step: 1, default: 1 }, lineDash: { values: Fe, default: 0 } } }, Ki = { type: "text", id: `${K}text`, icon: zi, label: "Texte", settings: { strokeColor: { values: de, default: "black" }, opacity: { min: 0, max: 100, step: 1, default: 100 }, fontFamily: { values: ["arial", "serif", "monospace"], default: rt }, fontBold: { values: [!1, !0], default: !1 }, fontItalic: { values: [!1, !0], default: !1 } } }, Ae = { id: `${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" }, kt = { 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" }, ai = { 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" }, Lt = { 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" }, si = { id: `${K}upload-picture`, type: "uploadpicture", icon: zt, label: "Upload picture" }, e1 = 2, t1 = "blue", Te = 14, i1 = [[0, 0], [0.5, 0], [1, 0], [1, 0.5], [1, 1], [0.5, 1], [0, 1], [0, 0.5]], n1 = ["brush", "rect", "square", "line", "polygon", "circle", "curve", "ellipse", "picture", "text", "triangle"], a1 = "react-paint-canvas-drawcanvas", s1 = "react-paint-canvas-selectioncanvas", oi = { layersManipulation: !0, grid: 0, canGrow: !1, canShrink: !0, withExport: !0, withLoadAndSave: !0, withUploadPicture: !0, withUrlPicture: !1, availableTools: [Bi, Gi, Xi, Yi, ji, _i, qi, Ji, Ot, Ki], clearCallback: "empty", brushAlgo: "simple", isBrushShapeDoneOnMouseUp: !0, withFrameSelection: !1, withSkeleton: !0, canvasSelectionPadding: 0 }, w1 = { canvasBackgroundColor: "white", canvasSelectionColor: t1, canvasSelectionWidth: e1 }, o1 = (e, i) => !!(e.target instanceof Node && i) && i.contains(e.target), ut = 300, Zt = (e, i) => {
|
|
4
4
|
const t = { ...i };
|
|
5
5
|
for (const n of e) delete t[n];
|
|
6
6
|
return t;
|
|
@@ -41,7 +41,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
41
41
|
}, Bt = (e, i, t, n = !1) => {
|
|
42
42
|
const { borders: s } = _(i, t);
|
|
43
43
|
return { border: gt(s), shapePath: e, anchors: [...i.points.map((a, r) => n && r > 0 && r < i.points.length - 1 ? gt({ x: a[0] - 7, y: a[1] - 7, width: Te / t.canvasSize.scaleRatio, height: Te / t.canvasSize.scaleRatio }) : vt({ x: a[0], y: a[1], radius: 7 / t.canvasSize.scaleRatio }))] };
|
|
44
|
-
},
|
|
44
|
+
}, Je = (e, i) => {
|
|
45
45
|
const t = ((n, { brushAlgo: s }) => {
|
|
46
46
|
if (n.points.length < 1 || n.style?.strokeColor === "transparent") return;
|
|
47
47
|
const a = n.points.flat(), r = a.map((c) => c[0]), o = a.map((c) => c[1]), l = Math.min(...r), h = Math.min(...o), d = new Path2D();
|
|
@@ -58,8 +58,8 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
58
58
|
}
|
|
59
59
|
return d;
|
|
60
60
|
})(e, i);
|
|
61
|
-
return { ...e, path: t, selection:
|
|
62
|
-
}, M1 =
|
|
61
|
+
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
62
|
+
}, M1 = Je, Ft = (e) => 180 * e / Math.PI, d1 = (e, i) => {
|
|
63
63
|
const t = i.x - Math.min(Math.max(i.x, e.x), e.x + e.width), n = i.y - Math.min(Math.max(i.y, e.y), e.y + e.height);
|
|
64
64
|
return Math.sqrt(t * t + n * n) <= i.radius;
|
|
65
65
|
}, ve = ({ origin: e = [0, 0], point: i, rotation: t }) => {
|
|
@@ -81,7 +81,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
81
81
|
case "brush":
|
|
82
82
|
return ((r, o, l) => {
|
|
83
83
|
const h = { ...r, points: le(r.points.length - 1, [...r.points[r.points.length - 1], [Math.round(o[0]), Math.round(o[1])]], r.points) };
|
|
84
|
-
return
|
|
84
|
+
return Je(h, l);
|
|
85
85
|
})(i, t, s);
|
|
86
86
|
case "translate":
|
|
87
87
|
return Nt(t, n.originalShape, n.cursorStartPosition, s);
|
|
@@ -92,7 +92,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
92
92
|
default:
|
|
93
93
|
return i;
|
|
94
94
|
}
|
|
95
|
-
},
|
|
95
|
+
}, Ke = (e, i, t) => {
|
|
96
96
|
const { borders: n } = _(i, t);
|
|
97
97
|
return { border: gt(n), shapePath: e, line: Dt({ points: [[n.x + n.width / 2, n.y], [n.x + n.width / 2, n.y - 23 / t.canvasSize.scaleRatio]] }), anchors: [vt({ x: n.x + n.width / 2, y: n.y - 23 / t.canvasSize.scaleRatio, radius: 7 / t.canvasSize.scaleRatio }), ...i1.map((s) => vt({ x: n.x + n.width * s[0], y: n.y + n.height * s[1], radius: 7 / t.canvasSize.scaleRatio }))] };
|
|
98
98
|
}, di = ({ borderStart: e, borderSize: i, vector: t, settings: n, invertedAxe: s, anchor: a }) => {
|
|
@@ -119,7 +119,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
119
119
|
}, ci = ({ borderX: e, borderWidth: i, borderY: t, borderHeight: n, center: s, originalShape: a }) => {
|
|
120
120
|
const r = [e + i / 2 - s[0], t + n / 2 - s[1]], [o, l] = ve({ point: r, rotation: -a.rotation });
|
|
121
121
|
return { borderX: De(e + o - r[0]), borderWidth: De(i), borderY: De(t + l - r[1]), borderHeight: De(n) };
|
|
122
|
-
},
|
|
122
|
+
}, Ge = (e, i, t, n, s = !1) => {
|
|
123
123
|
const { center: a, borders: r } = _(i, n), o = ve({ origin: a, point: e, rotation: i.rotation }), l = t.anchor[0] === 0 && o[0] >= r.x + r.width || t.anchor[0] === 1 && o[0] <= r.x, h = t.anchor[1] === 0 && o[1] >= r.y + r.height || t.anchor[1] === 1 && o[1] <= r.y, d = [O(o[0], n, t.anchor[0] === 0 && !l || t.anchor[0] === 1 && l ? n.selectionPadding : -n.selectionPadding), O(o[1], n, t.anchor[1] === 0 && !h || t.anchor[1] === 1 && h ? n.selectionPadding : -n.selectionPadding)], c = n.gridGap ? [t.anchor[0] === 0 ? r.x : t.anchor[0] === 0.5 ? r.x + r.width / 2 : r.x + r.width, t.anchor[1] === 0 ? r.y : t.anchor[1] === 0.5 ? r.y + r.height / 2 : r.y + r.height] : ve({ origin: a, point: t.cursorStartPosition, rotation: i.rotation }), u = [d[0] - c[0], d[1] - c[1]], [g, f] = di({ borderStart: r.x, borderSize: r.width, vector: u[0], settings: n, invertedAxe: l, anchor: t.anchor[0] }), [w, x] = di({ borderStart: r.y, borderSize: r.height, vector: u[1], settings: n, invertedAxe: h, anchor: t.anchor[1] });
|
|
124
124
|
if (s) {
|
|
125
125
|
const S = ((L, b, k, P, E, H, T, C, V, W) => {
|
|
@@ -132,7 +132,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
132
132
|
return ci({ borderX: g, borderWidth: f, borderY: w, borderHeight: x, center: a, originalShape: i });
|
|
133
133
|
}, ft = (e, i) => {
|
|
134
134
|
const t = vt(e);
|
|
135
|
-
return { ...e, path: t, selection:
|
|
135
|
+
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
136
136
|
}, V1 = ft, Pt = (e, i, t) => {
|
|
137
137
|
const { clientX: n = 0, clientY: s = 0 } = "touches" in e && e.touches[0] ? e.touches[0] : "changedTouches" in e && e.changedTouches[0] ? e.changedTouches[0] : "clientX" in e ? e : {}, a = i?.getBoundingClientRect() ?? { left: 0, top: 0, width: t.canvasSize.width, height: t.canvasSize.height };
|
|
138
138
|
return [(n - a.left) * (t.canvasSize.width / a.width) / t.canvasSize.scaleRatio, (s - a.top) * (t.canvasSize.height / a.height) / t.canvasSize.scaleRatio];
|
|
@@ -158,7 +158,7 @@ function pi(e, i) {
|
|
|
158
158
|
const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
159
159
|
for (let a = 0; a < n; a += n / 2) for (let r = 0; r < n; r += n / 2) for (let o = a + t.x; o < t.x + t.width; o += n) for (let l = r + t.y; l < t.y + t.height; l += n) if (s ? e.isPointInPath(i, o, l) : e.isPointInStroke(i, o, l)) return !0;
|
|
160
160
|
return !1;
|
|
161
|
-
},
|
|
161
|
+
}, _e = (e, i) => {
|
|
162
162
|
const t = ((n) => {
|
|
163
163
|
if (n.points.length < 1) return;
|
|
164
164
|
const s = new Path2D();
|
|
@@ -167,10 +167,10 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
167
167
|
return s.lineTo(...n.points[0]), s;
|
|
168
168
|
})(e);
|
|
169
169
|
return { ...e, path: t, selection: Bt(t, e, i) };
|
|
170
|
-
}, P1 =
|
|
170
|
+
}, P1 = _e, h1 = (e, i) => {
|
|
171
171
|
const t = Math.min(...e.points.map((a) => a[0])) - i.selectionPadding, n = Math.max(...e.points.map((a) => a[0])) + i.selectionPadding, s = Math.min(...e.points.map((a) => a[1])) - i.selectionPadding;
|
|
172
172
|
return { x: t, width: n - t, y: s, height: Math.max(...e.points.map((a) => a[1])) + i.selectionPadding - s };
|
|
173
|
-
},
|
|
173
|
+
}, qe = (e, i) => {
|
|
174
174
|
const t = ((n) => {
|
|
175
175
|
if (n.points.length < 3) return;
|
|
176
176
|
const s = new Path2D();
|
|
@@ -179,12 +179,12 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
179
179
|
return s;
|
|
180
180
|
})(e);
|
|
181
181
|
return { ...e, path: t, selection: Bt(t, e, i, !0) };
|
|
182
|
-
}, H1 =
|
|
182
|
+
}, H1 = qe, T1 = h1, mt = (e, i) => {
|
|
183
183
|
const t = ((n) => {
|
|
184
184
|
const s = new Path2D();
|
|
185
185
|
return s.ellipse(n.x, n.y, n.radiusX, n.radiusY, 0, 0, 2 * Math.PI), s;
|
|
186
186
|
})(e);
|
|
187
|
-
return { ...e, path: t, selection:
|
|
187
|
+
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
188
188
|
}, A1 = mt, gi = (e) => {
|
|
189
189
|
return t = { ...e, type: "triangle" }, { ...t, path: x1(t) };
|
|
190
190
|
var t;
|
|
@@ -217,10 +217,10 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
217
217
|
return { points: [[e[0] + n[0][0], e[1] + n[0][1]], [e[0] + n[1][0], e[1] + n[1][1]], [e[0] + n[2][0], e[1] + n[2][1]]], style: { ...t, fillColor: t.strokeColor, strokeColor: "transparent" } };
|
|
218
218
|
}, Qt = (e, i) => {
|
|
219
219
|
const t = gt(e);
|
|
220
|
-
return { ...e, path: t, selection:
|
|
220
|
+
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
221
221
|
}, D1 = Qt, F1 = (e, i) => {
|
|
222
222
|
e.globalAlpha !== 0 && i.path && (i.style?.fillColor !== "transparent" && e.fill(i.path), i.style?.strokeColor !== "transparent" && e.stroke(i.path));
|
|
223
|
-
}, fi = (e, i) => ({ x: e.x - i.selectionPadding, width: e.width + 2 * i.selectionPadding, y: e.y - i.selectionPadding, height: e.height + 2 * i.selectionPadding }), mi = (e, i, t, n, [s, a] = [!1, !1]) => ((r, o, [l, h], [d, c]) => ve({ origin: [l - d, h - c], point: r, rotation: -o }))([e[0] === 0.5 ? t.x + t.width / 2 : e[0] === 0 ? t.x + (s ? 0 : t.width) : t.x + (s ? t.width : 0), e[1] === 0.5 ? t.y + t.height / 2 : e[1] === 0 ? t.y + (a ? 0 : t.height) : t.y + (a ? t.height : 0)], t.rotation, i, n.canvasOffset), St = (e, i) => ({ ...e, selection:
|
|
223
|
+
}, fi = (e, i) => ({ x: e.x - i.selectionPadding, width: e.width + 2 * i.selectionPadding, y: e.y - i.selectionPadding, height: e.height + 2 * i.selectionPadding }), mi = (e, i, t, n, [s, a] = [!1, !1]) => ((r, o, [l, h], [d, c]) => ve({ origin: [l - d, h - c], point: r, rotation: -o }))([e[0] === 0.5 ? t.x + t.width / 2 : e[0] === 0 ? t.x + (s ? 0 : t.width) : t.x + (s ? t.width : 0), e[1] === 0.5 ? t.y + t.height / 2 : e[1] === 0 ? t.y + (a ? 0 : t.height) : t.y + (a ? t.height : 0)], t.rotation, i, n.canvasOffset), St = (e, i) => ({ ...e, selection: Ke(void 0, e, i) }), N1 = St, Ht = (e, i, t, n, s) => {
|
|
224
224
|
const [a, r] = ((o, l, h, d, c = !1) => {
|
|
225
225
|
if (!(o && l && d && h)) return [ut, ut];
|
|
226
226
|
const u = o / l;
|
|
@@ -262,7 +262,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
262
262
|
o.src = "";
|
|
263
263
|
});
|
|
264
264
|
})(r, s, e, i, t, n);
|
|
265
|
-
}), Tt = ["Texte"], bt = (e, i) => ({ ...e, selection:
|
|
265
|
+
}), Tt = ["Texte"], bt = (e, i) => ({ ...e, selection: Ke(void 0, e, i) }), I1 = bt, Gt = (e, i, t, n, s, a = rt) => {
|
|
266
266
|
e.font = `${s ? "italic" : ""} ${n ? "bold" : ""} 1px ${a}`;
|
|
267
267
|
const r = i.map((o) => t / e.measureText(o).width);
|
|
268
268
|
return Math.min(...r) || 36;
|
|
@@ -277,16 +277,16 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
277
277
|
const s = [O(t[0], n), O(t[1], n)];
|
|
278
278
|
switch (i.type) {
|
|
279
279
|
case "brush":
|
|
280
|
-
return ((a, r, o) =>
|
|
280
|
+
return ((a, r, o) => Je({ toolId: a.id, type: a.type, id: oe(`${a.type}_`), points: [[r]], rotation: 0, scaleX: 1, scaleY: 1, style: { opacity: a.settings.opacity.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default } }, o))(i, s, n);
|
|
281
281
|
case "line":
|
|
282
282
|
return ((a, r, o) => {
|
|
283
283
|
const l = { toolId: a.id, type: a.type, id: oe(`${a.type}_`), points: [r, r], rotation: 0, style: { opacity: a.settings.opacity.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default, lineArrow: a.settings.lineArrow.default } };
|
|
284
284
|
return yt(l, o);
|
|
285
285
|
})(i, s, n);
|
|
286
286
|
case "polygon":
|
|
287
|
-
return ((a, r, o) => je({ toolId: a.id, type: a.type, id: oe(`${a.type}_`), points: new Array(a.settings.pointsCount.default).fill(r), rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default, pointsCount: a.settings.pointsCount.default } }, o))(i, s, n);
|
|
288
|
-
case "curve":
|
|
289
287
|
return ((a, r, o) => _e({ toolId: a.id, type: a.type, id: oe(`${a.type}_`), points: new Array(a.settings.pointsCount.default).fill(r), rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default, pointsCount: a.settings.pointsCount.default } }, o))(i, s, n);
|
|
288
|
+
case "curve":
|
|
289
|
+
return ((a, r, o) => qe({ toolId: a.id, type: a.type, id: oe(`${a.type}_`), points: new Array(a.settings.pointsCount.default).fill(r), rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default, pointsCount: a.settings.pointsCount.default } }, o))(i, s, n);
|
|
290
290
|
case "rect":
|
|
291
291
|
case "square":
|
|
292
292
|
return ((a, r, o, l = 0, h = 0) => {
|
|
@@ -401,44 +401,44 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
401
401
|
case "polygon":
|
|
402
402
|
return ((o, l, h, d) => {
|
|
403
403
|
const c = [O(o[0], d), O(o[1], d)], { center: u } = _(l, d), g = Oe(c, l.rotation, u, d.canvasOffset), f = le(["points", h.anchor], g, l);
|
|
404
|
-
return
|
|
404
|
+
return _e(f, d);
|
|
405
405
|
})(t, n, s, a);
|
|
406
406
|
case "curve":
|
|
407
407
|
return ((o, l, h, d) => {
|
|
408
408
|
const c = [O(o[0], d), O(o[1], d)], { center: u } = _(l, d), g = Oe(c, l.rotation, u, d.canvasOffset), f = le(["points", h.anchor], g, l);
|
|
409
|
-
return
|
|
409
|
+
return qe(f, d);
|
|
410
410
|
})(t, n, s, a);
|
|
411
411
|
case "brush":
|
|
412
412
|
return ((o, l, h, d, c) => {
|
|
413
|
-
const { borders: u } = _({ ...l, scaleX: 1, scaleY: 1 }, d), { borders: g } = _(l, d), { borderX: f, borderHeight: w, borderY: x, borderWidth: S } =
|
|
413
|
+
const { borders: u } = _({ ...l, scaleX: 1, scaleY: 1 }, d), { borders: g } = _(l, d), { borderX: f, borderHeight: w, borderY: x, borderWidth: S } = Ge(o, l, h, d, c), L = Math.max(0, u.width - 2 * d.selectionPadding), b = Math.max(0, u.height - 2 * d.selectionPadding), k = Math.max(0, S - 2 * d.selectionPadding), P = Math.max(0, w - 2 * d.selectionPadding), E = L ? k / L : 1, H = b ? P / b : 1;
|
|
414
414
|
if (!L || !b) return l;
|
|
415
415
|
const T = De(f - g.x), C = De(x - g.y);
|
|
416
|
-
return
|
|
416
|
+
return Je({ ...l, points: l.points.map((V) => V.map(([W, y]) => [W + T, y + C])), scaleX: E, scaleY: H }, d);
|
|
417
417
|
})(t, n, s, a, r);
|
|
418
418
|
case "circle":
|
|
419
419
|
return ((o, l, h, d) => {
|
|
420
|
-
const { borderX: c, borderHeight: u, borderY: g, borderWidth: f } =
|
|
420
|
+
const { borderX: c, borderHeight: u, borderY: g, borderWidth: f } = Ge(o, l, h, d, !0);
|
|
421
421
|
return ft({ ...l, radius: Math.max(0, f / 2 - d.selectionPadding), x: c + f / 2, y: g + u / 2 }, d);
|
|
422
422
|
})(t, n, s, a);
|
|
423
423
|
case "ellipse":
|
|
424
424
|
return ((o, l, h, d, c = !1) => {
|
|
425
|
-
const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } =
|
|
425
|
+
const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } = Ge(o, l, h, d, c);
|
|
426
426
|
return mt({ ...l, radiusX: Math.max(0, w / 2 - d.selectionPadding), radiusY: Math.max(0, g / 2 - d.selectionPadding), x: u + w / 2, y: f + g / 2 }, d);
|
|
427
427
|
})(t, n, s, a, r);
|
|
428
428
|
case "rect":
|
|
429
429
|
case "square":
|
|
430
430
|
return ((o, l, h, d, c = !1) => {
|
|
431
|
-
const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } =
|
|
431
|
+
const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } = Ge(o, l, h, d, c);
|
|
432
432
|
return Qt({ ...l, width: Math.max(0, w - 2 * d.selectionPadding), height: Math.max(0, g - 2 * d.selectionPadding), x: u + d.selectionPadding, y: f + d.selectionPadding }, d);
|
|
433
433
|
})(t, n, s, a, i.type === "square" || r);
|
|
434
434
|
case "text":
|
|
435
435
|
return ((o, l, h, d, c) => {
|
|
436
|
-
const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } =
|
|
436
|
+
const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } = Ge(l, h, d, c, !0), x = bt({ ...h, width: Math.max(0, w - 2 * c.selectionPadding), height: Math.max(0, g - 2 * c.selectionPadding), x: u + c.selectionPadding, y: f + c.selectionPadding }, c);
|
|
437
437
|
return { ...x, fontSize: Gt(o, x.value, x.width, x.style?.fontBold ?? !1, x.style?.fontItalic ?? !1, x.style?.fontFamily) };
|
|
438
438
|
})(e, t, n, s, a);
|
|
439
439
|
case "picture":
|
|
440
440
|
return ((o, l, h, d, c) => {
|
|
441
|
-
const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } =
|
|
441
|
+
const { borderX: u, borderHeight: g, borderY: f, borderWidth: w } = Ge(o, l, h, d, !0);
|
|
442
442
|
return St({ ...l, width: Math.max(0, w - 2 * d.selectionPadding), height: Math.max(0, g - 2 * d.selectionPadding), x: u + d.selectionPadding, y: f + d.selectionPadding }, d);
|
|
443
443
|
})(t, n, s, a);
|
|
444
444
|
default:
|
|
@@ -462,17 +462,17 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
462
462
|
case "polygon":
|
|
463
463
|
return ((s, a, r, o) => {
|
|
464
464
|
const { borders: l } = _(a, o);
|
|
465
|
-
return
|
|
465
|
+
return _e({ ...a, points: a.points.map(([h, d]) => o.gridGap ? [h + O(l.x + s[0] - r[0], o) - l.x, d + O(l.y + s[1] - r[1], o) - l.y] : [O(h + s[0] - r[0], o), O(d + s[1] - r[1], o)]) }, o);
|
|
466
466
|
})(e, i, t, n);
|
|
467
467
|
case "curve":
|
|
468
468
|
return ((s, a, r, o) => {
|
|
469
469
|
const { borders: l } = _(a, o);
|
|
470
|
-
return
|
|
470
|
+
return qe({ ...a, points: a.points.map(([h, d]) => o.gridGap ? [h + O(l.x + s[0] - r[0], o) - l.x, d + O(l.y + s[1] - r[1], o) - l.y] : [O(h + s[0] - r[0], o), O(d + s[1] - r[1], o)]) }, o);
|
|
471
471
|
})(e, i, t, n);
|
|
472
472
|
case "brush":
|
|
473
473
|
return ((s, a, r, o) => {
|
|
474
474
|
const { borders: l } = _(a, o), h = o.gridGap ? O(l.x + s[0] - r[0], o) - l.x : s[0] - r[0], d = o.gridGap ? O(l.y + s[1] - r[1], o) - l.y : s[1] - r[1];
|
|
475
|
-
return
|
|
475
|
+
return Je({ ...a, points: a.points.map((c) => c.map(([u, g]) => [u + h, g + d])) }, o);
|
|
476
476
|
})(e, i, t, n);
|
|
477
477
|
default:
|
|
478
478
|
return i;
|
|
@@ -625,7 +625,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
625
625
|
const Z = F((v, m) => {
|
|
626
626
|
r((Q) => {
|
|
627
627
|
const D = [Q?.[0] ?? [m[0], m[1]], [m[0], m[1]]], R = n.current.filter((X) => ((ce, $, U, re) => {
|
|
628
|
-
const { selectionPadding:
|
|
628
|
+
const { selectionPadding: ee, canvasOffset: te } = re, { center: fe, borders: Me } = _($, re), ie = Oe(U[0], $.rotation, fe, te), j = Oe(U[1], $.rotation, fe, te), Se = Math.round(Math.min(ie[0], j[0]) - ee / 2), Ze = Math.round(Math.max(ie[0], j[0]) + ee), ke = Math.round(Math.min(ie[1], j[1]) - ee / 2), me = { x: Se, y: ke, width: Ze - Se, height: Math.round(Math.max(ie[1], j[1]) + ee) - ke }, be = pi(Me, me);
|
|
629
629
|
if (!be) return !1;
|
|
630
630
|
if (Me.width <= 1 || Me.height <= 1 || !("path" in $) || !$.path) return !0;
|
|
631
631
|
if (ce.lineWidth = ($.style?.lineWidth ?? 0) + 10, $.type === "brush") {
|
|
@@ -637,10 +637,10 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
637
637
|
if (d1(be, { x: ye[0], y: ye[1], radius: ($.style?.lineWidth ?? 1) / 2 })) return !0;
|
|
638
638
|
}
|
|
639
639
|
for (let ye = 0; ye < he.length - 1; ye++) {
|
|
640
|
-
const
|
|
640
|
+
const ne = Qe(he[ye], Le, Ne, $.scaleX, $.scaleY), Ve = Qe(he[ye + 1], Le, Ne, $.scaleX, $.scaleY), $e = pi({ x: Math.min(ne[0], Ve[0]), y: Math.min(ne[1], Ve[1]), width: Math.abs(ne[0] - Ve[0]), height: Math.abs(ne[1] - Ve[1]) }, me);
|
|
641
641
|
if ($e) {
|
|
642
642
|
const Pe = new Path2D();
|
|
643
|
-
if (Pe.moveTo(...
|
|
643
|
+
if (Pe.moveTo(...ne), Pe.lineTo(...Ve), ui({ ctx: ce, path: Pe, rect: $e, offset: 10, checkFill: !1 })) return !0;
|
|
644
644
|
}
|
|
645
645
|
}
|
|
646
646
|
}
|
|
@@ -697,7 +697,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
697
697
|
}
|
|
698
698
|
Ie(!1);
|
|
699
699
|
}, [Y, Ce]), { isInsideComponent: it };
|
|
700
|
-
})({ disabled: E, componentRef: H }), { registerEvent: ce, unregisterEvent: $, shapesRef: U, selectedShape: re, selectionFrame:
|
|
700
|
+
})({ disabled: E, componentRef: H }), { registerEvent: ce, unregisterEvent: $, shapesRef: U, selectedShape: re, selectionFrame: ee, hoveredShape: te, addShape: fe, addPictureShape: Me, moveShapes: ie, setSelectedShape: j, setSelectionFrame: Se, refreshSelectedShapes: Ze, refreshHoveredShape: ke, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: se, clearShapes: Le, saveShapes: Ne, toggleShapeVisibility: he, toggleShapeLock: ye, canGoBackward: ne, canGoForward: Ve, canClear: $e } = Y1(Q, e, i), Pe = F((Y) => {
|
|
701
701
|
j(void 0), y(Y);
|
|
702
702
|
}, [j]), Ue = F((Y, Ce) => {
|
|
703
703
|
Le(Y, Ce), Pe(Ae), m([0, 0]);
|
|
@@ -715,7 +715,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
715
715
|
B(() => {
|
|
716
716
|
X || j(void 0);
|
|
717
717
|
}, [X, j]);
|
|
718
|
-
const
|
|
718
|
+
const ae = F(async (Y, Ce) => {
|
|
719
719
|
const it = await (async (Ie, He) => {
|
|
720
720
|
if (!Ie) return [];
|
|
721
721
|
const We = [], Mt = $t(Ie.map((ue) => {
|
|
@@ -744,12 +744,14 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
744
744
|
return await Promise.all(We), Mt;
|
|
745
745
|
})(Y, Q);
|
|
746
746
|
Ue(it, Ce);
|
|
747
|
-
}, [Ue, Q]),
|
|
748
|
-
|
|
747
|
+
}, [Ue, Q]), Be = q();
|
|
748
|
+
Be.current = ae;
|
|
749
749
|
const Re = F((Y = [], Ce = !0) => {
|
|
750
|
-
|
|
750
|
+
Be.current?.(Y, { clearHistory: Ce, source: "remote" });
|
|
751
751
|
}, []);
|
|
752
|
-
|
|
752
|
+
B(() => {
|
|
753
|
+
C.current || (C.current = !0, t && Be.current?.(t, { clearHistory: !0, source: "remote" }));
|
|
754
|
+
}, [t]);
|
|
753
755
|
const tt = F(async (Y) => {
|
|
754
756
|
const Ce = await (async (it) => new Promise((Ie, He) => {
|
|
755
757
|
const We = new FileReader();
|
|
@@ -760,15 +762,15 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
760
762
|
Ie(we);
|
|
761
763
|
}, We.readAsText(it);
|
|
762
764
|
}))(Y);
|
|
763
|
-
await
|
|
764
|
-
}, [
|
|
765
|
-
typeof L != "string" ?
|
|
766
|
-
}, [Ue,
|
|
765
|
+
await ae(Ce.shapes ?? [], { clearHistory: !0, source: "remote" });
|
|
766
|
+
}, [ae]), m1 = F(() => {
|
|
767
|
+
typeof L != "string" ? ae(L(), { clearHistory: !1, source: "user" }) : L === "defaultShapes" && t !== void 0 ? ae(t, { clearHistory: !1, source: "user" }) : Ue([], { clearHistory: !1, source: "user" });
|
|
768
|
+
}, [Ue, ae, t, L]);
|
|
767
769
|
B(() => {
|
|
768
770
|
R(wi(b, f || w));
|
|
769
771
|
}, [b, f, w]);
|
|
770
772
|
const _t = { canvas: T, editor: H, setEditor: V };
|
|
771
|
-
return { editorProps: { shapesRef: U, addPictureShape: Me, moveShapes:
|
|
773
|
+
return { editorProps: { shapesRef: U, addPictureShape: Me, moveShapes: ie, toggleShapeVisibility: he, toggleShapeLock: ye, canGoBackward: ne, canGoForward: Ve, canClear: $e, selectedShape: re, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: se, refs: _t, width: e, height: i, canvasSize: A, selectTool: Pe, selectShape: lt, activeTool: W, setActiveTool: y, setAvailableTools: R, isEditMode: P, isDisabled: E, availableTools: D, gridGap: N, setGridGap: M, loadFile: tt, exportPicture: wt, exportData: Ct, clearCanvas: m1, settings: Q, canvas: { canGrow: d, canShrink: c, layersManipulation: r, withExport: u, withLoadAndSave: g, withUploadPicture: f, withUrlPicture: w } }, canvasProps: { shapesRef: U, selectedShape: re, selectionFrame: ee, hoveredShape: te, addShape: fe, setSelectedShape: j, setSelectionFrame: Se, refreshSelectedShapes: Ze, refreshHoveredShape: ke, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: se, saveShapes: Ne, refs: _t, width: e, height: i, settings: Q, canvasSize: A, setCanvasSize: Z, setCanvasOffset: m, selectShape: lt, activeTool: W, setActiveTool: y, isInsideComponent: X, isEditMode: P, isDisabled: E, canvas: { withSkeleton: x, withFrameSelection: S, canGrow: d, canShrink: c } }, registerEvent: ce, unregisterEvent: $, resetCanvas: Re, getCurrentImage: xt, getCurrentData: J };
|
|
772
774
|
}, j1 = (e, i, t, n, s, a, r) => {
|
|
773
775
|
let o = !1;
|
|
774
776
|
if (s) {
|
|
@@ -799,18 +801,18 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
799
801
|
})();
|
|
800
802
|
B(() => {
|
|
801
803
|
const y = (N) => ((M, A, Z, v, m, Q, D, R, X, ce, $, U, re) => {
|
|
802
|
-
const
|
|
803
|
-
if (!
|
|
804
|
-
const
|
|
804
|
+
const ee = A.current?.getContext("2d");
|
|
805
|
+
if (!ee) return;
|
|
806
|
+
const te = Pt(M, A.current, U);
|
|
805
807
|
if (Z.type !== "move" || Q === void 0) if (m.mode !== "selectionFrame") {
|
|
806
|
-
if (hi(M) || R(M,
|
|
808
|
+
if (hi(M) || R(M, ee, te, U), v !== void 0 && !v.locked) if (m.mode === "default" || m.mode === "textedition") D(st(v, te, U, !0) || { mode: "default" });
|
|
807
809
|
else {
|
|
808
810
|
const fe = A.current?.getContext("2d");
|
|
809
811
|
if (!fe) return;
|
|
810
|
-
X(L1(fe, v,
|
|
812
|
+
X(L1(fe, v, te, m, U, re));
|
|
811
813
|
}
|
|
812
|
-
} else $(
|
|
813
|
-
else ce([
|
|
814
|
+
} else $(ee, te, U);
|
|
815
|
+
else ce([te[0] - Q[0], te[1] - Q[1]]);
|
|
814
816
|
})(N, c, o, d, r, u, T, s, S, h, g, k, P);
|
|
815
817
|
if (l) return document.addEventListener("mousemove", y), document.addEventListener("touchmove", y), () => {
|
|
816
818
|
document.removeEventListener("mousemove", y), document.removeEventListener("touchmove", y);
|
|
@@ -843,7 +845,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
843
845
|
if (d?.type === "brush") {
|
|
844
846
|
const m = ((Q, D, R) => {
|
|
845
847
|
const X = { ...Q, points: le(Q.points.length, [[Math.round(D[0]), Math.round(D[1])]], Q.points) };
|
|
846
|
-
return
|
|
848
|
+
return Je(X, R);
|
|
847
849
|
})(d, Z, k);
|
|
848
850
|
S(m);
|
|
849
851
|
} else {
|
|
@@ -930,8 +932,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
930
932
|
m && window.requestAnimationFrame(() => J1(m, k, T, n, r));
|
|
931
933
|
}, [n, k, r, T]), B(() => {
|
|
932
934
|
const m = A.current?.getContext("2d");
|
|
933
|
-
m && window.requestAnimationFrame(() => ((Q, D, R, X, ce, $, U, re,
|
|
934
|
-
Q.clearRect(0, 0, R.canvasSize.width, R.canvasSize.height),
|
|
935
|
+
m && window.requestAnimationFrame(() => ((Q, D, R, X, ce, $, U, re, ee, te) => {
|
|
936
|
+
Q.clearRect(0, 0, R.canvasSize.width, R.canvasSize.height), te && re && re.id !== U?.id && X.type === "selection" && D.mode === "default" && Qi({ ctx: Q, shape: re, settings: R, selectionWidth: ce, selectionColor: $, withAnchors: !1 }), U && X.type !== "brush" && Qi({ ctx: Q, shape: U, settings: R, selectionWidth: ce, selectionColor: $, withAnchors: D.mode !== "textedition" }), ee && U1({ ctx: Q, selectionFrame: ee, settings: R });
|
|
935
937
|
})(m, k, T, f, E, H, r, h, d, y));
|
|
936
938
|
}, [h, d, k, r, f, T, E, H, y]), p("div", { className: "react-paint-canvas-box", children: I("div", { className: "react-paint-canvas-container", "data-grow": e, children: [p("canvas", { className: a1, ref: M, "data-grow": e, width: t.width, height: t.height }), C && p("canvas", { className: s1, ref: A, width: t.width, height: t.height, "data-grow": e, style: { "--react-paint-canvas-cursor": f.type !== "selection" && f.type !== "move" || Z.mode === "resize" ? "crosshair" : f.type === "move" || Z.mode === "translate" ? "move" : Z.mode === "rotate" ? "grab" : "default" } }), C && k.mode === "textedition" && r?.type === "text" && p(q1, { scaleRatio: t.scaleRatio, disabled: i, shape: r, defaultValue: k.defaultValue, updateValue: v, saveShapes: g, settings: T })] }) });
|
|
937
939
|
}), xi = "ArrowUp", Mi = "ArrowDown", ki = "ArrowLeft", Li = "ArrowRight", en = "Delete", tn = "Backspace", nn = "Escape", Vi = "Shift", an = "z", sn = "Z", on = "y", rn = "Y", Pi = "copy", Hi = "paste", ln = ({ isInsideComponent: e, selectedShape: i, isEditingText: t, settings: n, setSelectedShape: s, removeShape: a, pasteShape: r, updateShape: o, backwardShape: l, forwardShape: h, setShiftPressed: d }) => {
|
|
@@ -970,25 +972,25 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
970
972
|
};
|
|
971
973
|
}, [e, c, t, i, n, o, a, s, r, l, h, d]), {};
|
|
972
974
|
}, Zn = ({ options: e, className: i, style: t, canvasProps: n }) => {
|
|
973
|
-
const { shapesRef: s, selectedShape: a, selectionFrame: r, hoveredShape: o, addShape: l, setSelectedShape: h, setSelectionFrame: d, refreshSelectedShapes: c, refreshHoveredShape: u, removeShape: g, updateShape: f, backwardShape: w, forwardShape: x, saveShapes: S, refs: L, width: b, height: k, settings: P, canvasSize: E, setCanvasSize: H, setCanvasOffset: T, selectShape: C, activeTool: V, setActiveTool: W, isInsideComponent: y, isEditMode: N, isDisabled: M, canvas: { withSkeleton: A, withFrameSelection: Z, canGrow: v, canShrink: m } } = n, { canvasBackgroundColor: Q, canvasSelectionColor: D, canvasSelectionWidth: R } = { ...w1, ...e }, X = q(null), [ce, $] = z(void 0), [U, re] = z({ mode: "default" }), [
|
|
974
|
-
l(
|
|
975
|
-
}, [l, C]), Me = F((
|
|
976
|
-
const j =
|
|
977
|
-
H({ width:
|
|
975
|
+
const { shapesRef: s, selectedShape: a, selectionFrame: r, hoveredShape: o, addShape: l, setSelectedShape: h, setSelectionFrame: d, refreshSelectedShapes: c, refreshHoveredShape: u, removeShape: g, updateShape: f, backwardShape: w, forwardShape: x, saveShapes: S, refs: L, width: b, height: k, settings: P, canvasSize: E, setCanvasSize: H, setCanvasOffset: T, selectShape: C, activeTool: V, setActiveTool: W, isInsideComponent: y, isEditMode: N, isDisabled: M, canvas: { withSkeleton: A, withFrameSelection: Z, canGrow: v, canShrink: m } } = n, { canvasBackgroundColor: Q, canvasSelectionColor: D, canvasSelectionWidth: R } = { ...w1, ...e }, X = q(null), [ce, $] = z(void 0), [U, re] = z({ mode: "default" }), [ee, te] = z(!1), fe = F((ie) => {
|
|
976
|
+
l(ie), C(ie);
|
|
977
|
+
}, [l, C]), Me = F((ie) => {
|
|
978
|
+
const j = ie / b;
|
|
979
|
+
H({ width: ie, height: k * j, scaleRatio: j });
|
|
978
980
|
}, [b, k, H]);
|
|
979
|
-
return ln({ isInsideComponent: y, isEditingText: U.mode === "textedition", settings: P, selectedShape: a, setSelectedShape: h, removeShape: g, pasteShape: fe, updateShape: f, backwardShape: w, forwardShape: x, setShiftPressed:
|
|
981
|
+
return ln({ isInsideComponent: y, isEditingText: U.mode === "textedition", settings: P, selectedShape: a, setSelectedShape: h, removeShape: g, pasteShape: fe, updateShape: f, backwardShape: w, forwardShape: x, setShiftPressed: te }), (({ onResized: ie, element: j }) => {
|
|
980
982
|
B(() => {
|
|
981
983
|
const Se = j.current;
|
|
982
984
|
if (!Se) return;
|
|
983
985
|
const Ze = new ResizeObserver((ke) => {
|
|
984
986
|
const me = ke?.[0]?.borderBoxSize?.[0], { width: be, height: Ee } = me ? { width: me.inlineSize, height: me.blockSize } : ke?.[0].contentRect ?? {};
|
|
985
|
-
|
|
987
|
+
ie(be, Ee);
|
|
986
988
|
});
|
|
987
989
|
return Ze.observe(Se), () => {
|
|
988
990
|
Ze.unobserve(Se);
|
|
989
991
|
};
|
|
990
|
-
}, [j,
|
|
991
|
-
})({ element: X, onResized: Me }), p("div", { ref: X, className: "react-paint-app-row" + (i ? ` ${i}` : ""), "data-grow": v, "data-shrink": m, style: { "--react-paint-app-row-width": E.width, "--react-paint-app-canvaswidth": `${b}px`, "--react-paint-app-row-aspectratio": `calc(${E.width} / ${E.height})`, "--react-paint-app-canvas-bg": Q, ...t }, children: p(K1, { ref: L.canvas, canGrow: v, disabled: M, isInsideComponent: y, activeTool: V, setActiveTool: W, canvasOffsetStartPosition: ce, setCanvasOffsetStartPosition: $, shapes: s.current, addShape: l, updateSingleShape: f, selectedShape: a, selectionFrame: r, setSelectedShape: h, setSelectionFrame: d, hoveredShape: o, refreshHoveredShape: u, refreshSelectedShapes: c, settings: P, setCanvasOffset: T, saveShapes: S, canvasSize: E, selectionMode: U, setSelectionMode: re, selectionColor: D, selectionWidth: R, isEditMode: N, isShiftPressed:
|
|
992
|
+
}, [j, ie]);
|
|
993
|
+
})({ element: X, onResized: Me }), p("div", { ref: X, className: "react-paint-app-row" + (i ? ` ${i}` : ""), "data-grow": v, "data-shrink": m, style: { "--react-paint-app-row-width": E.width, "--react-paint-app-canvaswidth": `${b}px`, "--react-paint-app-row-aspectratio": `calc(${E.width} / ${E.height})`, "--react-paint-app-canvas-bg": Q, ...t }, children: p(K1, { ref: L.canvas, canGrow: v, disabled: M, isInsideComponent: y, activeTool: V, setActiveTool: W, canvasOffsetStartPosition: ce, setCanvasOffsetStartPosition: $, shapes: s.current, addShape: l, updateSingleShape: f, selectedShape: a, selectionFrame: r, setSelectedShape: h, setSelectionFrame: d, hoveredShape: o, refreshHoveredShape: u, refreshSelectedShapes: c, settings: P, setCanvasOffset: T, saveShapes: S, canvasSize: E, selectionMode: U, setSelectionMode: re, selectionColor: D, selectionWidth: R, isEditMode: N, isShiftPressed: ee, withFrameSelection: Z, withSkeleton: A }) });
|
|
992
994
|
}, dn = ({ isLoading: e = !1 }) => {
|
|
993
995
|
const [i, t] = z("hidden");
|
|
994
996
|
return B(() => {
|
|
@@ -1020,7 +1022,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1020
1022
|
}
|
|
1021
1023
|
const { hidden: t = !1, disabled: n = !1, selected: s = !1, icon: a, children: r, type: o = "button", className: l = "", ...h } = e;
|
|
1022
1024
|
return p("button", { className: `react-paint-editor-button ${l}`, ref: i, disabled: n, "data-disabled": +n, "data-selected": +s, "data-hidden": +t, type: o, ...h, children: I("span", { className: "react-paint-editor-button-content", children: [r && p("span", { className: "react-paint-editor-button-children", children: r }), a && p("span", { className: "react-paint-editor-button-icon", dangerouslySetInnerHTML: { __html: a } })] }) });
|
|
1023
|
-
}),
|
|
1025
|
+
}), et = ({ children: e, title: i = "", className: t = "", position: n = "bottom", fitContainer: s = !1, alignment: a = "center" }) => I("div", { className: `react-paint-editor-panel ${t}`, "data-fitcontainer": s, "data-position": n, "data-alignment": a, style: { "--react-paint-editor-panel-zindex": Ui }, children: [i && p("h3", { className: "react-paint-editor-panel-title", children: i }), e] }), gn = (e) => {
|
|
1024
1026
|
switch (e) {
|
|
1025
1027
|
case "brush":
|
|
1026
1028
|
return Ii;
|
|
@@ -1076,12 +1078,12 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1076
1078
|
}, icon: Wi })] });
|
|
1077
1079
|
}, fn = ({ gridFormat: e, setGridFormat: i, disabled: t = !1, shapes: n, removeShape: s, toggleShapeVisibility: a, toggleShapeLock: r, selectedShape: o, moveShapes: l, selectShape: h, isLayoutPanelShown: d }) => {
|
|
1078
1080
|
const [c, u] = z(void 0);
|
|
1079
|
-
return d ? p(
|
|
1081
|
+
return d ? p(et, { alignment: "right", className: "react-paint-editor-layouts-panel", children: p("div", { className: "react-paint-editor-layouts-panel-content", children: I("div", { className: "react-paint-editor-layouts-scrolling-content", children: [I("div", { className: "react-paint-editor-layouts-row", children: [p("span", { className: "react-paint-editor-layouts-subtitle", children: "Grid" }), p(G, { icon: '<svg><path d="M18.333 15.854 16.583 14.104V13.354H15.833L14.083 11.604H16.583V8.375H13.375V10.896L11.625 9.146V8.375H10.875L9.125 6.625H11.625V3.417H8.396V5.896L6.646 4.146V3.417H5.896L4.146 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417ZM13.375 6.625H16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H13.375ZM16.771 19.229 15.854 18.333H3.417Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V4.125L0.812 3.271L2.042 2.021L18 18ZM13.375 16.583H14.104L13.375 15.833ZM8.396 11.604H9.125L8.396 10.854ZM8.396 16.583H11.625V14.083L10.875 13.354H8.396ZM3.417 6.625H4.167L3.417 5.875ZM3.417 11.604H6.646V9.104L5.917 8.375H3.417ZM6.646 16.583V13.354H3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Z"/></svg>', className: "react-paint-editor-layouts-grid-button", selected: e === "none", disabled: t, onClick: () => i("none") }), ["small", "medium", "large"].map((g) => p(G, { className: "react-paint-editor-layouts-grid-button", selected: e === g, disabled: t, onClick: () => i(g), children: g.charAt(0).toUpperCase() }, g))] }), p("hr", {}), p("div", { className: "react-paint-editor-layouts", children: n.length === 0 ? p("div", { className: "react-paint-editor-layouts-placeholder", children: "No layer yet" }) : n.map((g) => p(vn, { shape: g, disabled: t, layoutDragging: c, setLayoutDragging: u, selected: o?.id === g.id, handleSelect: h, handleRemove: s, onMoveShapes: l, toggleShapeVisibility: a, toggleShapeLock: r }, g.id)) })] }) }) }) : null;
|
|
1080
1082
|
}, Yt = ({ children: e, onClose: i, position: t = "center", className: n = "" }) => I("div", { className: "react-paint-editor-modal", "data-position": t, style: { "--react-paint-editor-modal-zindex": Ui }, children: [p("div", { className: "react-paint-editor-modal-mask", onClick: i }), p("div", { className: `react-paint-editor-modal-panel ${n}`, children: e })] }), ct = ({ selectedSettings: e, setSelectedSettings: i, title: t = "Choisissez une couleur", mode: n = "fill", disabled: s = !1, values: a, field: r, value: o = "", valueChanged: l }) => {
|
|
1081
1083
|
const [h] = z(oe("settings_")), d = e === h;
|
|
1082
1084
|
return a.length ? I(pe, { children: [p(G, { selected: d, title: t, disabled: s, onClick: () => {
|
|
1083
1085
|
i((c) => c === h ? void 0 : h);
|
|
1084
|
-
}, icon: o === "transparent" ? n === "fill" ? ii : ti : void 0, children: o !== "transparent" && p("div", { className: "react-paint-editor-colorfield-color", "data-mode": n, style: { "--react-paint-editor-colorfield-color-value": o } }) }), d && p(
|
|
1086
|
+
}, icon: o === "transparent" ? n === "fill" ? ii : ti : void 0, children: o !== "transparent" && p("div", { className: "react-paint-editor-colorfield-color", "data-mode": n, style: { "--react-paint-editor-colorfield-color-value": o } }) }), d && p(et, { title: t, alignment: "left", children: I("div", { className: "react-paint-editor-colorfield-wrapper", children: [a.map((c, u) => p(G, { title: c, selected: c === o, color: c, icon: c === "transparent" ? n === "fill" ? ii : ti : void 0, onClick: () => {
|
|
1085
1087
|
l(r, c);
|
|
1086
1088
|
}, children: c !== "transparent" && p("div", { className: "react-paint-editor-colorfield-color", color: c, "data-mode": n, style: { "--react-paint-editor-colorfield-color-value": c } }) }, c)), p(G, { type: "color", title: "Custom color", selected: !a.includes(o), value: o, onChange: (c) => {
|
|
1087
1089
|
const u = +c.target.value;
|
|
@@ -1093,7 +1095,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1093
1095
|
const [d] = z(oe("settings_")), c = i === d;
|
|
1094
1096
|
return o.length ? I(pe, { children: [p(G, { selected: c, title: n, icon: r, disabled: s, onClick: () => {
|
|
1095
1097
|
t((u) => u === d ? void 0 : d);
|
|
1096
|
-
} }), c && p(
|
|
1098
|
+
} }), c && p(et, { title: n, alignment: "left", fitContainer: !0, children: p("div", { className: "react-paint-editor-selectfield-wrapper", children: o.map((u) => p(G, { title: `${u}`, onClick: () => ((g) => {
|
|
1097
1099
|
h(a, g);
|
|
1098
1100
|
})(u), selected: l === u, style: { "--react-paint-editor-button-padding": "16px" }, children: p(e, { children: u }) }, u)) }) })] }) : null;
|
|
1099
1101
|
}, yn = ({ children: e }) => p("span", { className: "react-paint-editor-fontfamily-option", style: { "--react-paint-editor-fontfamily-family": e }, children: e }), Ti = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, values: n, defaultValue: s, valueChanged: a }) => n.length ? p(jt, { selectedSettings: e, setSelectedSettings: i, CustomOption: yn, title: "Police", icon: '<svg><path d="M5.312 14.979H7.125L8.042 12.479H11.979L12.896 14.979H14.708L10.917 5H9.083ZM8.542 10.958 9.958 6.958H10.042L11.458 10.958ZM3.417 18.333Q2.688 18.333 2.177 17.823Q1.667 17.312 1.667 16.583V3.417Q1.667 2.688 2.177 2.177Q2.688 1.667 3.417 1.667H16.583Q17.312 1.667 17.823 2.177Q18.333 2.688 18.333 3.417V16.583Q18.333 17.312 17.823 17.823Q17.312 18.333 16.583 18.333ZM3.417 16.583H16.583Q16.583 16.583 16.583 16.583Q16.583 16.583 16.583 16.583V3.417Q16.583 3.417 16.583 3.417Q16.583 3.417 16.583 3.417H3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583ZM3.417 3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417V16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583Q3.417 16.583 3.417 16.583V3.417Q3.417 3.417 3.417 3.417Q3.417 3.417 3.417 3.417Z"/></svg>', disabled: t, field: "fontFamily", values: n, defaultValue: s, valueChanged: a }) : null, Qn = ({ disabled: e, toggleLayoutPanel: i }) => p(G, { title: "Toggle layers panel", disabled: e, onClick: i, icon: '<svg><path d="M10 17.646 2.438 11.75 3.875 10.646 10 15.396 16.125 10.646 17.562 11.75ZM10 13.188 2.5 7.354 10 1.521 17.5 7.354Z"/></svg>', className: "react-paint-editor-layout-button" }), Sn = ({ children: e }) => I("span", { className: "react-paint-editor-linearrow-option", "data-type": e, children: [p("span", { className: "react-paint-editor-linearrow-left" }), p("span", { className: "react-paint-editor-linearrow-right" })] }), Ai = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, values: n, defaultValue: s, valueChanged: a }) => n.length ? p(jt, { selectedSettings: e, setSelectedSettings: i, CustomOption: Sn, title: "Flèches", icon: '<svg><path d="M6 17 2 13 6 9 7.062 10.062 4.875 12.25H17V13.75H4.875L7.062 15.938ZM14 11 12.938 9.938 15.125 7.75H3V6.25H15.125L12.938 4.062L14 3L18 7Z"/></svg>', disabled: t, field: "lineArrow", values: n, defaultValue: s, valueChanged: a }) : null, bn = ({ children: e }) => I("span", { className: "react-paint-editor-linetype-option", "data-type": e, children: [p("span", {}), p("span", {}), p("span", {}), p("span", {}), p("span", {}), p("span", {}), p("span", {})] }), Zi = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, values: n, defaultValue: s, valueChanged: a }) => n.length ? p(jt, { selectedSettings: e, setSelectedSettings: i, CustomOption: bn, icon: '<svg><path d="M3 16V14.5H4.5V16ZM6.125 16V14.5H7.625V16ZM9.25 16V14.5H10.75V16ZM12.375 16V14.5H13.875V16ZM15.5 16V14.5H17V16ZM3 13V11.5H6.5V13ZM8.25 13V11.5H11.75V13ZM13.5 13V11.5H17V13ZM3 10V8.5H9.25V10ZM10.75 10V8.5H17V10ZM3 7V4H17V7Z"/></svg>', title: "Type de traits", disabled: t, field: "lineDash", values: n, defaultValue: s, valueChanged: a }) : null, at = ({ selectedSettings: e, setSelectedSettings: i, title: t = "Choisissez l'intervalle", icon: n, disabled: s = !1, field: a, value: r = 1, min: o = 1, max: l = 20, step: h = 1, unity: d = "", valueChanged: c }) => {
|
|
@@ -1104,7 +1106,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1104
1106
|
const w = e === g;
|
|
1105
1107
|
return o === l ? null : I(pe, { children: [p(G, { selected: w, title: t, disabled: s, icon: n, onClick: () => {
|
|
1106
1108
|
i((x) => x === g ? void 0 : g);
|
|
1107
|
-
} }), w && p(
|
|
1109
|
+
} }), w && p(et, { title: t, alignment: "left", fitContainer: !0, children: p("div", { children: I("label", { className: "react-paint-editor-rangefield", children: [p("input", { type: "range", min: o, max: l, step: h, value: r, onChange: (x) => {
|
|
1108
1110
|
const S = +x.target.value;
|
|
1109
1111
|
c(a, Number.isNaN(S) ? x.target.value : S, !1), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
|
|
1110
1112
|
c(a, Number.isNaN(S) ? x.target.value : S, !0);
|
|
@@ -1136,19 +1138,19 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1136
1138
|
if (y === V) return C;
|
|
1137
1139
|
if (y > V) {
|
|
1138
1140
|
const Z = C.points.slice(0, V);
|
|
1139
|
-
return
|
|
1141
|
+
return _e({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } }, W);
|
|
1140
1142
|
}
|
|
1141
1143
|
const N = V - y, M = new Array(N).fill(void 0).map((Z, v) => [C.points[0][0] + (C.points[1][0] - C.points[0][0]) * (v + 1) / (N + 1), C.points[0][1] + (C.points[1][1] - C.points[0][1]) * (v + 1) / (N + 1)]), A = [C.points[0], ...M, ...C.points.slice(1, C.points.length)];
|
|
1142
|
-
return
|
|
1144
|
+
return _e({ ...C, points: A, style: { ...C.style, pointsCount: A.length } }, W);
|
|
1143
1145
|
})(o, T, h) : ((C, V, W) => {
|
|
1144
1146
|
const y = C.points.length;
|
|
1145
1147
|
if (y === V) return C;
|
|
1146
1148
|
if (y > V) {
|
|
1147
1149
|
const Z = C.points.slice(0, V);
|
|
1148
|
-
return
|
|
1150
|
+
return qe({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } }, W);
|
|
1149
1151
|
}
|
|
1150
1152
|
const N = V - y, M = new Array(N).fill(void 0).map((Z, v) => [C.points[0][0] + (C.points[1][0] - C.points[0][0]) * (v + 1) / (N + 1), C.points[0][1] + (C.points[1][1] - C.points[0][1]) * (v + 1) / (N + 1)]), A = [C.points[0], ...M, ...C.points.slice(1, C.points.length)];
|
|
1151
|
-
return
|
|
1153
|
+
return qe({ ...C, points: A, style: { ...C.style, pointsCount: A.length } }, W);
|
|
1152
1154
|
})(o, T, h), !0), S && n(S.id, H, T);
|
|
1153
1155
|
} else n(r.id, H, T);
|
|
1154
1156
|
};
|
|
@@ -1177,7 +1179,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1177
1179
|
H(() => {
|
|
1178
1180
|
E(!0);
|
|
1179
1181
|
});
|
|
1180
|
-
}, icon: C }), P && p(
|
|
1182
|
+
}, icon: C }), P && p(et, { alignment: l, position: "top", children: I("div", { className: "react-paint-editor-toolbox-panel-content", "data-vertical": +d, children: [i && I(pe, { children: [p(ge, { withText: !0, type: Xe, disabled: c || !t, img: Xe.icon, isActive: e.id === Xe.id, setActive: a }), p(ge, { withText: !0, type: Ye, disabled: c || !n, img: Ye.icon, isActive: e.id === Ye.id, setActive: r }), p(ge, { withText: !0, type: je, disabled: c || !s, img: je.icon, isActive: e.id === je.id, setActive: o }), (b || k || u) && p("hr", {})] }), b && p(Di, { withText: !0, type: si, disabled: c, loadFile: async (V) => {
|
|
1181
1183
|
E(!1), await f(V);
|
|
1182
1184
|
}, img: si.icon, accept: "image/png, image/gif, image/jpeg, image/svg+xml" }), k && p(G, { disabled: c, selected: !1, onClick: x, title: "Add picture from URL", icon: '<svg><path d="M9.188 16.542V14.938Q8.5 14.938 8.021 14.458Q7.542 13.979 7.542 13.292V12.458L3.583 8.5Q3.5 8.875 3.458 9.25Q3.417 9.625 3.417 10Q3.417 12.5 5.062 14.365Q6.708 16.229 9.188 16.542ZM14.854 14.438Q15.708 13.521 16.146 12.385Q16.583 11.25 16.583 10Q16.583 7.979 15.469 6.313Q14.354 4.646 12.479 3.917V4.229Q12.479 4.917 12 5.396Q11.521 5.875 10.833 5.875H9.188V7.521Q9.188 7.875 8.948 8.115Q8.708 8.354 8.354 8.354H6.708V10H11.646Q12 10 12.24 10.229Q12.479 10.458 12.479 10.812V13.292H13.292Q13.833 13.292 14.26 13.604Q14.688 13.917 14.854 14.438ZM10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333Z"/></svg>', children: "Add picture from URL" }), (b || k) && u && p("hr", {}), u && I(pe, { children: [p(Di, { withText: !0, type: ai, disabled: c, loadFile: (V) => {
|
|
1183
1185
|
E(!1), w(V);
|
|
@@ -1211,7 +1213,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1211
1213
|
h ? s(h.id) : t.toolsType?.[0] && c(t.toolsType[0]), l(() => {
|
|
1212
1214
|
o(!0);
|
|
1213
1215
|
});
|
|
1214
|
-
}, icon: g }), r && p(
|
|
1216
|
+
}, icon: g }), r && p(et, { alignment: i, position: "top", children: p("div", { className: "react-paint-editor-toolbargroup-panel-content", "data-vertical": +t.vertical, ref: a, children: t.toolsType.map((f, w) => p(ge, { disabled: n, type: f, img: f.icon, isActive: e.id === f.id, setActive: c }, f.id)) }) })] });
|
|
1215
1217
|
}, kn = [{ title: "brush", toolsType: ["brush"], vertical: !1 }, { title: "lines", toolsType: ["line", "curve", "polygon"], vertical: !1 }, { title: "shapes", toolsType: ["rect", "square", "circle", "ellipse"], vertical: !1 }, "text"], Ln = ({ width: e, disabled: i = !1, activeTool: t, hasActionToUndo: n = !1, hasActionToRedo: s = !1, hasActionToClear: a = !1, withLoadAndSave: r, withExport: o, clearCanvas: l, setActiveTool: h, undoAction: d, redoAction: c, addPicture: u, loadFile: g, saveFile: f, exportCanvasInFile: w, availableTools: x, withUrlPicture: S, withUploadPicture: L }) => {
|
|
1216
1218
|
const b = ((M, A) => {
|
|
1217
1219
|
const Z = A.flatMap((v) => {
|
|
@@ -1227,7 +1229,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1227
1229
|
}, y = (M) => {
|
|
1228
1230
|
W(x.find((A) => A.id === M) ?? t);
|
|
1229
1231
|
}, N = x.find((M) => M.type === t.type) !== void 0;
|
|
1230
|
-
return I(pe, { children: [I("div", { className: "react-paint-editor-toolbar-toolbox", children: [I("div", { className: "react-paint-editor-toolbar-shrinkable", children: [p(ge, { type: Ae, disabled: i, img: Ae.icon, isActive: t.id === Ae.id, setActive: W }), P ? p(G, { disabled: i, onClick: V, title: "Toggle tools", icon: '<svg><path d="M5.333 9.292 10.021 1.646 14.708 9.292ZM14.562 18.333Q13 18.333 11.896 17.229Q10.792 16.125 10.792 14.562Q10.792 13 11.896 11.896Q13 10.792 14.562 10.792Q16.125 10.792 17.229 11.896Q18.333 13 18.333 14.562Q18.333 16.125 17.229 17.229Q16.125 18.333 14.562 18.333ZM2.5 17.917V11.188H9.229V17.917ZM14.562 16.583Q15.438 16.583 16.01 16.01Q16.583 15.438 16.583 14.562Q16.583 13.688 16.01 13.115Q15.438 12.542 14.562 12.542Q13.688 12.542 13.115 13.115Q12.542 13.688 12.542 14.562Q12.542 15.438 13.115 16.01Q13.688 16.583 14.562 16.583ZM4.25 16.167H7.479V12.938H4.25ZM8.458 7.542H11.583L10.021 5ZM10.021 7.542ZM7.479 12.938ZM14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Z"/></svg>', selected: N }) : b.map((M, A) => p(Mn, { disabled: i, activeTool: t, group: M, setActiveToolFromId: y }, "id" in M ? M.id : M.title))] }), !k && I(pe, { children: [p(ge, { type:
|
|
1232
|
+
return I(pe, { children: [I("div", { className: "react-paint-editor-toolbar-toolbox", children: [I("div", { className: "react-paint-editor-toolbar-shrinkable", children: [p(ge, { type: Ae, disabled: i, img: Ae.icon, isActive: t.id === Ae.id, setActive: W }), P ? p(G, { disabled: i, onClick: V, title: "Toggle tools", icon: '<svg><path d="M5.333 9.292 10.021 1.646 14.708 9.292ZM14.562 18.333Q13 18.333 11.896 17.229Q10.792 16.125 10.792 14.562Q10.792 13 11.896 11.896Q13 10.792 14.562 10.792Q16.125 10.792 17.229 11.896Q18.333 13 18.333 14.562Q18.333 16.125 17.229 17.229Q16.125 18.333 14.562 18.333ZM2.5 17.917V11.188H9.229V17.917ZM14.562 16.583Q15.438 16.583 16.01 16.01Q16.583 15.438 16.583 14.562Q16.583 13.688 16.01 13.115Q15.438 12.542 14.562 12.542Q13.688 12.542 13.115 13.115Q12.542 13.688 12.542 14.562Q12.542 15.438 13.115 16.01Q13.688 16.583 14.562 16.583ZM4.25 16.167H7.479V12.938H4.25ZM8.458 7.542H11.583L10.021 5ZM10.021 7.542ZM7.479 12.938ZM14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Q14.562 14.562 14.562 14.562Z"/></svg>', selected: N }) : b.map((M, A) => p(Mn, { disabled: i, activeTool: t, group: M, setActiveToolFromId: y }, "id" in M ? M.id : M.title))] }), !k && I(pe, { children: [p(ge, { type: Xe, disabled: i || !n, img: Xe.icon, isActive: t.id === Xe.id, setActive: d }), p(ge, { type: Ye, disabled: i || !s, img: Ye.icon, isActive: t.id === Ye.id, setActive: c }), p(ge, { type: je, disabled: i || !a, img: je.icon, isActive: t.id === je.id, setActive: l })] }), p(wn, { withActionsInMenu: k, disabled: i, vertical: !0, alignment: "right", group: { title: "Menu", img: '<svg><path d="M2.5 15V13.25H17.5V15ZM2.5 10.875V9.125H17.5V10.875ZM2.5 6.75V5H17.5V6.75Z"/></svg>' }, activeTool: t, addPicture: u, loadFile: g, saveFile: f, togglePictureUrlModal: () => {
|
|
1231
1233
|
C(!0);
|
|
1232
1234
|
}, exportCanvasInFile: w, withUploadPicture: L, withUrlPicture: S, withLoadAndSave: r, withExport: o, hasActionToUndo: n, hasActionToRedo: s, hasActionToClear: a, undoAction: d, redoAction: c, clearCanvas: l })] }), E && p(Yt, { className: "react-paint-editor-toolbar-modal", onClose: V, children: x.map((M, A) => M.type === "picture" ? null : p(ge, { disabled: i, type: M, img: M.icon, withText: !1, isActive: t.id === M.id, setActive: W }, M.id)) }), T && p(xn, { togglePictureUrlModal: () => {
|
|
1233
1235
|
C((M) => !M);
|
|
@@ -1244,8 +1246,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1244
1246
|
}, s)];
|
|
1245
1247
|
} };
|
|
1246
1248
|
}, En = ({ editorProps: e, className: i, style: t, options: n, children: s }) => {
|
|
1247
|
-
const { shapesRef: a, addPictureShape: r, moveShapes: o, toggleShapeVisibility: l, toggleShapeLock: h, canGoBackward: d, canGoForward: c, canClear: u, selectedShape: g, removeShape: f, updateShape: w, backwardShape: x, forwardShape: S, refs: L, width: b, height: k, canvasSize: P, selectTool: E, selectShape: H, activeTool: T, setActiveTool: C, setAvailableTools: V, isEditMode: W, isDisabled: y, availableTools: N, gridGap: M, setGridGap: A, loadFile: Z, exportPicture: v, exportData: m, clearCanvas: Q, settings: D, canvas: { canGrow: R, layersManipulation: X, withExport: ce, withLoadAndSave: $, withUploadPicture: U, withUrlPicture: re } } = e, { toolbarBackgroundColor:
|
|
1248
|
-
V((Re) => Re.map((tt) => tt.id === J ? le(["settings",
|
|
1249
|
+
const { shapesRef: a, addPictureShape: r, moveShapes: o, toggleShapeVisibility: l, toggleShapeLock: h, canGoBackward: d, canGoForward: c, canClear: u, selectedShape: g, removeShape: f, updateShape: w, backwardShape: x, forwardShape: S, refs: L, width: b, height: k, canvasSize: P, selectTool: E, selectShape: H, activeTool: T, setActiveTool: C, setAvailableTools: V, isEditMode: W, isDisabled: y, availableTools: N, gridGap: M, setGridGap: A, loadFile: Z, exportPicture: v, exportData: m, clearCanvas: Q, settings: D, canvas: { canGrow: R, layersManipulation: X, withExport: ce, withLoadAndSave: $, withUploadPicture: U, withUrlPicture: re } } = e, { toolbarBackgroundColor: ee, dividerColor: te, fontRadius: fe, fontDisabledColor: Me, fontDisabledBackgroundColor: ie, fontColor: j, fontBackgroundColor: Se, fontSelectedColor: Ze, fontSelectedBackgroundColor: ke, fontHoverColor: me, fontHoverBackgroundColor: be } = { ...Vn, ...n }, [Ee, se] = z(!1), [Le, Ne] = z(!1), he = M >= pt.large ? "large" : M >= pt.medium ? "medium" : M >= pt.small ? "small" : "none", { snackbarList: ye, addSnackbar: ne } = Pn(), Ve = F((J, ae, Be) => {
|
|
1250
|
+
V((Re) => Re.map((tt) => tt.id === J ? le(["settings", ae, "default"], Be, tt) : tt)), C((Re) => Re.id === J ? le(["settings", ae, "default"], Be, Re) : Re);
|
|
1249
1251
|
}, [C, V]), $e = F(() => {
|
|
1250
1252
|
E(Ae), x();
|
|
1251
1253
|
}, [E, x]), Pe = F(() => {
|
|
@@ -1255,40 +1257,40 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1255
1257
|
try {
|
|
1256
1258
|
v(), se(!1);
|
|
1257
1259
|
} catch (J) {
|
|
1258
|
-
J instanceof Error &&
|
|
1260
|
+
J instanceof Error && ne({ type: "error", text: "L'export a échoué" }), console.warn(J);
|
|
1259
1261
|
} finally {
|
|
1260
1262
|
se(!1);
|
|
1261
1263
|
}
|
|
1262
|
-
}, [v,
|
|
1264
|
+
}, [v, ne]), lt = F(() => {
|
|
1263
1265
|
se(!0);
|
|
1264
1266
|
try {
|
|
1265
1267
|
m(), se(!1);
|
|
1266
1268
|
} catch (J) {
|
|
1267
|
-
J instanceof Error &&
|
|
1269
|
+
J instanceof Error && ne({ type: "error", text: "L'enregistrement a échoué" }), console.warn(J);
|
|
1268
1270
|
} finally {
|
|
1269
1271
|
se(!1);
|
|
1270
1272
|
}
|
|
1271
|
-
}, [m,
|
|
1273
|
+
}, [m, ne]), Ct = F(async (J) => {
|
|
1272
1274
|
se(!0);
|
|
1273
1275
|
try {
|
|
1274
|
-
await Z(J),
|
|
1275
|
-
} catch (
|
|
1276
|
-
|
|
1276
|
+
await Z(J), ne({ type: "success", text: "Fichier chargé !" });
|
|
1277
|
+
} catch (ae) {
|
|
1278
|
+
ae instanceof Error && ne({ type: "error", text: "Le chargement a échoué" }), console.warn(ae);
|
|
1277
1279
|
} finally {
|
|
1278
1280
|
se(!1);
|
|
1279
1281
|
}
|
|
1280
|
-
}, [Z,
|
|
1282
|
+
}, [Z, ne]), wt = F(async (J) => {
|
|
1281
1283
|
se(!0);
|
|
1282
1284
|
try {
|
|
1283
|
-
const
|
|
1284
|
-
H(
|
|
1285
|
-
} catch (
|
|
1286
|
-
|
|
1285
|
+
const ae = await r(J, b, k);
|
|
1286
|
+
H(ae);
|
|
1287
|
+
} catch (ae) {
|
|
1288
|
+
ae instanceof Error && ne({ type: "error", text: "Le chargement a échoué" }), console.warn(ae);
|
|
1287
1289
|
} finally {
|
|
1288
1290
|
se(!1);
|
|
1289
1291
|
}
|
|
1290
|
-
}, [r, H,
|
|
1291
|
-
return I("div", { ref: L.setEditor, className: xt, style: { "--react-paint-editor-app-maxWidth": R ? "100%" : `${b}px`, "--react-paint-editor-app-toolbar-bg":
|
|
1292
|
+
}, [r, H, ne, b, k]), xt = `${i ? `${i} ` : ""}${Le ? "react-paint-editor-layout-opened " : ""}react-paint-editor-app`;
|
|
1293
|
+
return I("div", { ref: L.setEditor, className: xt, style: { "--react-paint-editor-app-maxWidth": R ? "100%" : `${b}px`, "--react-paint-editor-app-toolbar-bg": ee, "--react-paint-editor-app-divider-color": te, "--react-paint-editor-app-font-radius": fe, "--react-paint-editor-app-font-disabled-color": 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": Ze, "--react-paint-editor-app-font-selected-bg": ke, "--react-paint-editor-app-font-hover-color": me, "--react-paint-editor-app-font-hover-bg": be, ...t }, children: [W && p(Ln, { width: P.width, disabled: y, activeTool: T, clearCanvas: Q, setActiveTool: E, exportCanvasInFile: Ue, saveFile: lt, loadFile: Ct, addPicture: wt, hasActionToUndo: d, hasActionToRedo: c, hasActionToClear: u, undoAction: $e, redoAction: Pe, availableTools: N, withExport: ce, withLoadAndSave: $, withUploadPicture: U, withUrlPicture: re }), s, W && X && p(fn, { gridFormat: he, setGridFormat: (J) => {
|
|
1292
1294
|
A(pt[J]);
|
|
1293
1295
|
}, disabled: y, shapes: a.current, moveShapes: o, selectedShape: g, removeShape: f, selectShape: H, toggleShapeVisibility: l, toggleShapeLock: h, isLayoutPanelShown: Le }), W && I(pe, { children: [p(Cn, { width: P.width, disabled: y, activeTool: T, availableTools: N, selectedShape: g, settings: D, removeShape: f, updateShape: w, canvas: L.canvas.current, layersManipulation: X, toggleLayoutPanel: () => {
|
|
1294
1296
|
Ne((J) => !J);
|