@yorab/react-paint 0.11.7 → 0.11.21
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/canvas/constants/app.d.ts +2 -2
- package/dist/canvas/hooks/useReactPaint.d.ts +5 -5
- package/dist/canvas/hooks/useShapes.d.ts +1 -1
- package/dist/canvas/utils/file.d.ts +2 -2
- package/dist/common/types/Shapes.d.ts +1 -0
- package/dist/common/utils/array.d.ts +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/react-paint.js +373 -372
- package/dist/react-paint.umd.cjs +1 -1
- package/package.json +24 -22
package/dist/react-paint.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import Fi, { useState as
|
|
2
|
-
import { jsx as p, jsxs as
|
|
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) => {
|
|
1
|
+
import Fi, { useState as $, useEffect as G, useRef as J, useCallback as F, useMemo as Ni, useImperativeHandle as S1, useTransition as Ri } from "react";
|
|
2
|
+
import { jsx as p, jsxs as R, 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>', ce = ["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: ce, 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: ce, 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: ce, default: "black" }, fillColor: { values: ce, 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: ce, default: "black" }, fillColor: { values: ce, 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: ce, default: "black" }, fillColor: { values: ce, 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: ce, default: "black" }, fillColor: { values: ce, 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: ce, default: "black" }, fillColor: { values: ce, 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: ce, default: "black" }, fillColor: { values: ce, 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: ce, 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" }, 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" }, 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) => {
|
|
4
4
|
const t = { ...i };
|
|
5
5
|
for (const n of e) delete t[n];
|
|
6
6
|
return t;
|
|
7
|
-
},
|
|
7
|
+
}, de = (e, i, t) => {
|
|
8
8
|
const n = Array.isArray(t) ? [...t] : { ...t }, s = Array.isArray(e) ? e : typeof e == "string" ? e.split(".") : [e];
|
|
9
9
|
return s.reduce((a, r, o) => (a[r] = Et(a[r]) ? { ...a[r] } : Array.isArray(a[r]) ? [...a[r]] : a[r] === void 0 || a[r] === null ? {} : a[r], o === s.length - 1 && (a[r] = i), a[r]), n), n;
|
|
10
10
|
}, Et = (e) => typeof e == "object" && !Array.isArray(e) && e !== null, xe = (e, i, t) => {
|
|
11
11
|
if (!Et(i) || !Et(t)) return t;
|
|
12
12
|
const n = { ...i };
|
|
13
|
-
for (const s in t)
|
|
13
|
+
for (const s in t) t.hasOwnProperty(s) && (n.hasOwnProperty(s) ? n[s] = e(n[s], t[s], s) ?? xe(e, n[s], t[s]) : n[s] = t[s]);
|
|
14
14
|
return n;
|
|
15
15
|
}, r1 = (e, i) => {
|
|
16
16
|
if (e === i) return !0;
|
|
@@ -19,7 +19,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
19
19
|
if (t.length !== n.length) return !1;
|
|
20
20
|
for (const s of t) if (!n.includes(s) || !r1(e[s], i[s])) return !1;
|
|
21
21
|
return !0;
|
|
22
|
-
}, Vt = {},
|
|
22
|
+
}, Vt = {}, re = (e = "") => (Vt[e] || (Vt[e] = 0), `${e}${++Vt[e]}`), $t = (e) => e.filter((i) => i != null), l1 = (e) => {
|
|
23
23
|
e.lineCap = "round", e.lineJoin = "round";
|
|
24
24
|
}, ze = (e, i = {}) => {
|
|
25
25
|
const { lineCap: t = "round", fillColor: n = "transparent", opacity: s = 100, strokeColor: a = t1, lineWidth: r = e1, lineDash: o = 0 } = i;
|
|
@@ -39,7 +39,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
39
39
|
const i = new Path2D();
|
|
40
40
|
return i.moveTo(...e.points[0]), i.lineTo(...e.points[1]), i.lineTo(...e.points[2]), i.lineTo(...e.points[0]), i;
|
|
41
41
|
}, Bt = (e, i, t, n = !1) => {
|
|
42
|
-
const { borders: s } =
|
|
42
|
+
const { borders: s } = q(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 }) => {
|
|
@@ -50,8 +50,8 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
50
50
|
if (c.length === 1) d.rect(...Qe(c[0], l, h, n.scaleX, n.scaleY), 1, 1);
|
|
51
51
|
else if (d.moveTo(...Qe(c[0], l, h, n.scaleX, n.scaleY)), s === "quadratic") {
|
|
52
52
|
for (let u = 0; u < c.slice(1).length - 2; u++) {
|
|
53
|
-
const g = Qe(c[u], l, h, n.scaleX, n.scaleY), f = Qe(c[u + 1], l, h, n.scaleX, n.scaleY),
|
|
54
|
-
d.quadraticCurveTo(...g,
|
|
53
|
+
const g = Qe(c[u], l, h, n.scaleX, n.scaleY), f = Qe(c[u + 1], l, h, n.scaleX, n.scaleY), x = (g[0] + f[0]) / 2, w = (g[1] + f[1]) / 2;
|
|
54
|
+
d.quadraticCurveTo(...g, x, w);
|
|
55
55
|
}
|
|
56
56
|
d.quadraticCurveTo(...Qe(c[c.length - 2], l, h, n.scaleX, n.scaleY), ...Qe(c[c.length - 1], l, h, n.scaleX, n.scaleY));
|
|
57
57
|
} else for (const u of c.slice(1)) d.lineTo(...Qe(u, l, h, n.scaleX, n.scaleY));
|
|
@@ -72,7 +72,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
72
72
|
return t ? l : Ft(l);
|
|
73
73
|
}
|
|
74
74
|
return t ? s : Ft(s);
|
|
75
|
-
}, De = (e, i = 2) => Math.round(e * 10 ** i) / 10 ** i, Qe = (e, i, t, n = 1, s = 1) => [i + (e[0] - i) * n, t + (e[1] - t) * s],
|
|
75
|
+
}, De = (e, i = 2) => Math.round(e * 10 ** i) / 10 ** i, Qe = (e, i, t, n = 1, s = 1) => [i + (e[0] - i) * n, t + (e[1] - t) * s], B = (e, i, t = 0) => {
|
|
76
76
|
if (!i.gridGap) return De(e);
|
|
77
77
|
const n = e + t, s = n >= 0 ? i.gridGap : -i.gridGap;
|
|
78
78
|
return n + s / 2 - (n + s / 2) % s - t;
|
|
@@ -80,7 +80,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
80
80
|
switch (n.mode) {
|
|
81
81
|
case "brush":
|
|
82
82
|
return ((r, o, l) => {
|
|
83
|
-
const h = { ...r, points:
|
|
83
|
+
const h = { ...r, points: de(r.points.length - 1, [...r.points[r.points.length - 1], [Math.round(o[0]), Math.round(o[1])]], r.points) };
|
|
84
84
|
return Je(h, l);
|
|
85
85
|
})(i, t, s);
|
|
86
86
|
case "translate":
|
|
@@ -93,7 +93,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
93
93
|
return i;
|
|
94
94
|
}
|
|
95
95
|
}, Ke = (e, i, t) => {
|
|
96
|
-
const { borders: n } =
|
|
96
|
+
const { borders: n } = q(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 }) => {
|
|
99
99
|
switch (a) {
|
|
@@ -120,16 +120,16 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
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
|
-
const { center: a, borders: r } =
|
|
123
|
+
const { center: a, borders: r } = q(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 = [B(o[0], n, t.anchor[0] === 0 && !l || t.anchor[0] === 1 && l ? n.selectionPadding : -n.selectionPadding), B(o[1], n, t.anchor[1] === 0 && !h || t.anchor[1] === 1 && h ? n.selectionPadding : -n.selectionPadding)], c = n.gridGap ? [t.anchor[0] === 0 ? r.x : t.anchor[0] === 0.5 ? r.x + r.width / 2 : r.x + r.width, t.anchor[1] === 0 ? r.y : t.anchor[1] === 0.5 ? r.y + r.height / 2 : r.y + r.height] : ve({ origin: a, point: t.cursorStartPosition, rotation: i.rotation }), u = [d[0] - c[0], d[1] - c[1]], [g, f] = di({ borderStart: r.x, borderSize: r.width, vector: u[0], settings: n, invertedAxe: l, anchor: t.anchor[0] }), [x, w] = di({ borderStart: r.y, borderSize: r.height, vector: u[1], settings: n, invertedAxe: h, anchor: t.anchor[1] });
|
|
124
124
|
if (s) {
|
|
125
|
-
const
|
|
126
|
-
const { selectionPadding: y } =
|
|
125
|
+
const Q = ((L, b, k, P, E, H, T, C, V, I) => {
|
|
126
|
+
const { selectionPadding: y } = I, N = (b.width - 2 * y || 1) / (b.height - 2 * y || 1), M = (E - 2 * y) / (T - 2 * y);
|
|
127
127
|
let A, Z, v, m;
|
|
128
128
|
return V.anchor[0] !== 0.5 && V.anchor[1] !== 0.5 ? M < N ? (Z = H, m = T, v = (T - 2 * y) * N + 2 * y, A = V.anchor[0] === 0 ? b.width - L[0] > y ? b.x + (b.width - v) : b.x + b.width - 2 * y : b.width + L[0] > y ? b.x : b.x - v + 2 * y) : (A = P, v = E, m = (E - 2 * y) / N + 2 * y, Z = V.anchor[1] === 0 ? b.height - L[1] > y ? b.y + (b.height - m) : b.y + b.height - 2 * y : b.height + L[1] > y ? b.y : b.y - m + 2 * y) : V.anchor[0] !== 0.5 ? (A = P, v = E, m = (E - 2 * y) / N + 2 * y, Z = b.y + (b.height - m) / 2) : (Z = H, m = T, v = (T - 2 * y) * N + 2 * y, A = b.x + (b.width - v) / 2), { borderX: A, borderWidth: v, borderY: Z, borderHeight: m, center: k, originalShape: C };
|
|
129
|
-
})(u, r, a, g, f,
|
|
130
|
-
return ci(
|
|
129
|
+
})(u, r, a, g, f, x, w, i, t, n);
|
|
130
|
+
return ci(Q);
|
|
131
131
|
}
|
|
132
|
-
return ci({ borderX: g, borderWidth: f, borderY:
|
|
132
|
+
return ci({ borderX: g, borderWidth: f, borderY: x, borderHeight: w, center: a, originalShape: i });
|
|
133
133
|
}, ft = (e, i) => {
|
|
134
134
|
const t = vt(e);
|
|
135
135
|
return { ...e, path: t, selection: Ke(t, e, i) };
|
|
@@ -138,7 +138,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
138
138
|
return [(n - a.left) * (t.canvasSize.width / a.width) / t.canvasSize.scaleRatio, (s - a.top) * (t.canvasSize.height / a.height) / t.canvasSize.scaleRatio];
|
|
139
139
|
}, hi = (e) => "touches" in e, Oe = (e, i, [t, n], [s, a]) => ve({ origin: [t - s, n - a], point: e, rotation: i }), dt = (e, i, t) => t ? d1(e, { x: i[0], y: i[1], radius: t }) : ((n, s) => s[0] >= n.x && s[0] <= n.x + n.width && s[1] >= n.y && s[1] <= n.y + n.height)(e, i), st = (e, i, t, n = !1, s = 0) => {
|
|
140
140
|
if (e.locked) return !1;
|
|
141
|
-
const { canvasSize: { scaleRatio: a } } = t, { borders: r, center: o } =
|
|
141
|
+
const { canvasSize: { scaleRatio: a } } = t, { borders: r, center: o } = q(e, t), l = Oe(i, e.rotation, o, t.canvasOffset);
|
|
142
142
|
if (n) if (e.type === "line" || e.type === "polygon" || e.type === "curve") {
|
|
143
143
|
for (let h = 0; h < e.points.length; h++) if (dt({ x: e.points[h][0] - 7 / a, y: e.points[h][1] - 7 / a, width: Te / a, height: Te / a }, l, s)) return { mode: "resize", anchor: h };
|
|
144
144
|
} else {
|
|
@@ -148,7 +148,7 @@ const Ii = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.70
|
|
|
148
148
|
return !!dt(r, l, s) && { mode: "translate" };
|
|
149
149
|
}, c1 = (e, i, t, n) => {
|
|
150
150
|
if (i.locked) return !1;
|
|
151
|
-
const { center: s } =
|
|
151
|
+
const { center: s } = q(i, n), a = Oe(t, i.rotation, s, n.canvasOffset);
|
|
152
152
|
return "path" in i && i.path ? i.style?.fillColor && i.style?.fillColor !== "transparent" ? !!e.isPointInPath(i.path, a[0], a[1]) && { mode: "translate" } : (e.lineWidth = (i.style?.lineWidth ?? 0) + 15, !!e.isPointInStroke(i.path, a[0], a[1]) && { mode: "translate" }) : st(i, t, n, !1);
|
|
153
153
|
};
|
|
154
154
|
function pi(e, i) {
|
|
@@ -231,7 +231,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
231
231
|
const g = c ? d : Math.min(l, d);
|
|
232
232
|
return [g * u, g];
|
|
233
233
|
})(e.width, e.height, t, n, !0);
|
|
234
|
-
return St({ toolId: Ot.id, type: "picture", id:
|
|
234
|
+
return St({ toolId: Ot.id, type: "picture", id: re("picture_"), x: (t - a) / 2, y: (n - r) / 2, width: a, height: r, src: i, img: e, rotation: 0 }, s);
|
|
235
235
|
}, R1 = (e, i, t, n) => new Promise((s, a) => {
|
|
236
236
|
const r = new Image();
|
|
237
237
|
r.onerror = () => {
|
|
@@ -243,8 +243,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
243
243
|
const f = u1(g);
|
|
244
244
|
o.onload = async () => {
|
|
245
245
|
URL.revokeObjectURL(o.src);
|
|
246
|
-
const
|
|
247
|
-
l(
|
|
246
|
+
const x = Ht(o, g, d, c, u);
|
|
247
|
+
l(x);
|
|
248
248
|
}, o.src = f;
|
|
249
249
|
}) : (o.onload = async () => {
|
|
250
250
|
URL.revokeObjectURL(o.src);
|
|
@@ -267,45 +267,45 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
267
267
|
const r = i.map((o) => t / e.measureText(o).width);
|
|
268
268
|
return Math.min(...r) || 36;
|
|
269
269
|
}, W1 = (e, i, t, n) => {
|
|
270
|
-
const s = { ...i, value: t }, a = ((f,
|
|
271
|
-
f.font = `${L ? "italic" : ""} ${
|
|
272
|
-
const k =
|
|
270
|
+
const s = { ...i, value: t }, a = ((f, x, w, Q, L, b = rt) => {
|
|
271
|
+
f.font = `${L ? "italic" : ""} ${Q ? "bold" : ""} ${w}px ${b}`;
|
|
272
|
+
const k = x.map((P) => f.measureText(P).width);
|
|
273
273
|
return Math.max(...k) || 20;
|
|
274
|
-
})(e, s.value, s.fontSize, s.style?.fontBold ?? !1, s.style?.fontItalic ?? !1, s.style?.fontFamily), r = s.fontSize * s.value.length, o = { ...s, width: a, height: r }, { center: l } =
|
|
274
|
+
})(e, s.value, s.fontSize, s.style?.fontBold ?? !1, s.style?.fontItalic ?? !1, s.style?.fontFamily), r = s.fontSize * s.value.length, o = { ...s, width: a, height: r }, { center: l } = q(i, n), { center: h } = q(o, n), [d, c] = mi([1, 1], l, i, n), [u, g] = mi([1, 1], h, o, n, [!1, !1]);
|
|
275
275
|
return { ...o, x: o.x - (u - d), y: o.y - (g - c) };
|
|
276
276
|
}, yi = (e, i, t, n) => {
|
|
277
|
-
const s = [
|
|
277
|
+
const s = [B(t[0], n), B(t[1], n)];
|
|
278
278
|
switch (i.type) {
|
|
279
279
|
case "brush":
|
|
280
|
-
return ((a, r, o) => Je({ toolId: a.id, type: a.type, id:
|
|
280
|
+
return ((a, r, o) => Je({ toolId: a.id, type: a.type, id: re(`${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
|
-
const l = { toolId: a.id, type: a.type, id:
|
|
283
|
+
const l = { toolId: a.id, type: a.type, id: re(`${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) => _e({ toolId: a.id, type: a.type, id:
|
|
287
|
+
return ((a, r, o) => _e({ toolId: a.id, type: a.type, id: re(`${a.type}_`), points: new Array(a.settings.pointsCount.default).fill(r), rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default, pointsCount: a.settings.pointsCount.default } }, o))(i, s, n);
|
|
288
288
|
case "curve":
|
|
289
|
-
return ((a, r, o) => qe({ toolId: a.id, type: a.type, id:
|
|
289
|
+
return ((a, r, o) => qe({ toolId: a.id, type: a.type, id: re(`${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) => {
|
|
293
|
-
const d = { toolId: a.id, type: a.type, id:
|
|
293
|
+
const d = { toolId: a.id, type: a.type, id: re(`${a.type}_`), x: r[0], y: r[1], width: l, height: h, rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default } };
|
|
294
294
|
return Qt(d, o);
|
|
295
295
|
})(i, s, n);
|
|
296
296
|
case "text":
|
|
297
297
|
return ((a, r, o, l) => {
|
|
298
|
-
const h = Gt(a, Tt,
|
|
299
|
-
return bt({ toolId: r.id, type: r.type, id:
|
|
298
|
+
const h = Gt(a, Tt, 150, r.settings?.fontBold.default ?? !1, r.settings?.fontItalic.default ?? !1, r.settings.fontFamily.default), d = h * (Tt.length || 1);
|
|
299
|
+
return bt({ toolId: r.id, type: r.type, id: re(`${r.type}_`), x: o[0] - 150, y: o[1] - d, value: Tt, fontSize: h, width: 150, height: d, rotation: 0, style: { opacity: r.settings.opacity.default, strokeColor: r.settings.strokeColor.default, fontFamily: r.settings.fontFamily.default, fontItalic: r.settings.fontItalic.default, fontBold: r.settings.fontBold.default } }, l);
|
|
300
300
|
})(e, i, s, n);
|
|
301
301
|
case "ellipse":
|
|
302
|
-
return ((a, r, o) => mt({ toolId: a.id, type: a.type, id:
|
|
302
|
+
return ((a, r, o) => mt({ toolId: a.id, type: a.type, id: re(`${a.type}_`), x: r[0], y: r[1], radiusX: 0, radiusY: 0, rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default } }, o))(i, s, n);
|
|
303
303
|
case "circle":
|
|
304
|
-
return ((a, r, o) => ft({ toolId: a.id, type: a.type, id:
|
|
304
|
+
return ((a, r, o) => ft({ toolId: a.id, type: a.type, id: re(`${a.type}_`), x: r[0], y: r[1], radius: 0, rotation: 0, style: { opacity: a.settings.opacity.default, fillColor: a.settings.fillColor.default, strokeColor: a.settings.strokeColor.default, lineWidth: a.settings.lineWidth.default, lineDash: a.settings.lineDash.default } }, o))(i, s, n);
|
|
305
305
|
}
|
|
306
306
|
}, p1 = (e, i, t) => {
|
|
307
307
|
if (i.visible === !1) return;
|
|
308
|
-
const { center: n } =
|
|
308
|
+
const { center: n } = q(i, t);
|
|
309
309
|
switch (Ut(e, t, i.rotation, n), ze(e, i.style), i.type) {
|
|
310
310
|
case "brush":
|
|
311
311
|
((s, a) => {
|
|
@@ -385,7 +385,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
385
385
|
default:
|
|
386
386
|
return { x: 0, y: 0, width: 100, height: 100 };
|
|
387
387
|
}
|
|
388
|
-
},
|
|
388
|
+
}, q = (e, i) => {
|
|
389
389
|
const t = z1(e, i), n = ((s) => [s.x + s.width / 2, s.y + s.height / 2])(t);
|
|
390
390
|
return { borders: t, center: n };
|
|
391
391
|
}, O1 = (e, i, t, n, s, a) => {
|
|
@@ -395,25 +395,25 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
395
395
|
switch (n.type) {
|
|
396
396
|
case "line":
|
|
397
397
|
return ((o, l, h, d) => {
|
|
398
|
-
const c = [
|
|
398
|
+
const c = [B(o[0], d), B(o[1], d)], { center: u } = q(l, d), g = Oe(c, l.rotation, u, d.canvasOffset), f = de(["points", h.anchor], g, l);
|
|
399
399
|
return yt(f, d);
|
|
400
400
|
})(t, n, s, a);
|
|
401
401
|
case "polygon":
|
|
402
402
|
return ((o, l, h, d) => {
|
|
403
|
-
const c = [
|
|
403
|
+
const c = [B(o[0], d), B(o[1], d)], { center: u } = q(l, d), g = Oe(c, l.rotation, u, d.canvasOffset), f = de(["points", h.anchor], g, l);
|
|
404
404
|
return _e(f, d);
|
|
405
405
|
})(t, n, s, a);
|
|
406
406
|
case "curve":
|
|
407
407
|
return ((o, l, h, d) => {
|
|
408
|
-
const c = [
|
|
408
|
+
const c = [B(o[0], d), B(o[1], d)], { center: u } = q(l, d), g = Oe(c, l.rotation, u, d.canvasOffset), f = de(["points", h.anchor], g, l);
|
|
409
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 } =
|
|
413
|
+
const { borders: u } = q({ ...l, scaleX: 1, scaleY: 1 }, d), { borders: g } = q(l, d), { borderX: f, borderHeight: x, borderY: w, borderWidth: Q } = 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, Q - 2 * d.selectionPadding), P = Math.max(0, x - 2 * d.selectionPadding), E = L ? k / L : 1, H = b ? P / b : 1;
|
|
414
414
|
if (!L || !b) return l;
|
|
415
|
-
const T = De(f - g.x), C = De(
|
|
416
|
-
return Je({ ...l, points: l.points.map((V) => V.map(([
|
|
415
|
+
const T = De(f - g.x), C = De(w - g.y);
|
|
416
|
+
return Je({ ...l, points: l.points.map((V) => V.map(([I, y]) => [I + 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) => {
|
|
@@ -422,24 +422,24 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
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:
|
|
426
|
-
return mt({ ...l, radiusX: Math.max(0,
|
|
425
|
+
const { borderX: u, borderHeight: g, borderY: f, borderWidth: x } = Ge(o, l, h, d, c);
|
|
426
|
+
return mt({ ...l, radiusX: Math.max(0, x / 2 - d.selectionPadding), radiusY: Math.max(0, g / 2 - d.selectionPadding), x: u + x / 2, y: f + g / 2 }, d);
|
|
427
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:
|
|
432
|
-
return Qt({ ...l, width: Math.max(0,
|
|
431
|
+
const { borderX: u, borderHeight: g, borderY: f, borderWidth: x } = Ge(o, l, h, d, c);
|
|
432
|
+
return Qt({ ...l, width: Math.max(0, x - 2 * d.selectionPadding), height: Math.max(0, g - 2 * d.selectionPadding), x: u + d.selectionPadding, y: f + d.selectionPadding }, d);
|
|
433
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:
|
|
437
|
-
return { ...
|
|
436
|
+
const { borderX: u, borderHeight: g, borderY: f, borderWidth: x } = Ge(l, h, d, c, !0), w = bt({ ...h, width: Math.max(0, x - 2 * c.selectionPadding), height: Math.max(0, g - 2 * c.selectionPadding), x: u + c.selectionPadding, y: f + c.selectionPadding }, c);
|
|
437
|
+
return { ...w, fontSize: Gt(o, w.value, w.width, w.style?.fontBold ?? !1, w.style?.fontItalic ?? !1, w.style?.fontFamily) };
|
|
438
438
|
})(e, t, n, s, a);
|
|
439
439
|
case "picture":
|
|
440
|
-
return ((o, l, h, d
|
|
441
|
-
const { borderX:
|
|
442
|
-
return St({ ...l, width: Math.max(0,
|
|
440
|
+
return ((o, l, h, d) => {
|
|
441
|
+
const { borderX: c, borderHeight: u, borderY: g, borderWidth: f } = Ge(o, l, h, d, !0);
|
|
442
|
+
return St({ ...l, width: Math.max(0, f - 2 * d.selectionPadding), height: Math.max(0, u - 2 * d.selectionPadding), x: c + d.selectionPadding, y: g + d.selectionPadding }, d);
|
|
443
443
|
})(t, n, s, a);
|
|
444
444
|
default:
|
|
445
445
|
return n;
|
|
@@ -448,30 +448,30 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
448
448
|
switch (i.type) {
|
|
449
449
|
case "rect":
|
|
450
450
|
case "square":
|
|
451
|
-
return ((s, a, r, o) => Qt({ ...a, x:
|
|
451
|
+
return ((s, a, r, o) => Qt({ ...a, x: B(a.x + s[0] - r[0], o), y: B(a.y + s[1] - r[1], o) }, o))(e, i, t, n);
|
|
452
452
|
case "ellipse":
|
|
453
|
-
return ((s, a, r, o) => mt({ ...a, x:
|
|
453
|
+
return ((s, a, r, o) => mt({ ...a, x: B(a.x + s[0] - r[0], o), y: B(a.y + s[1] - r[1], o) }, o))(e, i, t, n);
|
|
454
454
|
case "circle":
|
|
455
|
-
return ((s, a, r, o) => ft({ ...a, x:
|
|
455
|
+
return ((s, a, r, o) => ft({ ...a, x: B(a.x + s[0] - r[0], o), y: B(a.y + s[1] - r[1], o) }, o))(e, i, t, n);
|
|
456
456
|
case "picture":
|
|
457
|
-
return ((s, a, r, o) => St({ ...a, x:
|
|
457
|
+
return ((s, a, r, o) => St({ ...a, x: B(a.x + s[0] - r[0], o), y: B(a.y + s[1] - r[1], o) }, o))(e, i, t, n);
|
|
458
458
|
case "text":
|
|
459
|
-
return ((s, a, r, o) => bt({ ...a, x:
|
|
459
|
+
return ((s, a, r, o) => bt({ ...a, x: B(a.x + s[0] - r[0], o), y: B(a.y + s[1] - r[1], o) }, o))(e, i, t, n);
|
|
460
460
|
case "line":
|
|
461
|
-
return ((s, a, r, o) => yt({ ...a, points: a.points.map(([l, h]) => [
|
|
461
|
+
return ((s, a, r, o) => yt({ ...a, points: a.points.map(([l, h]) => [B(l + s[0] - r[0], o), B(h + s[1] - r[1], o)]) }, o))(e, i, t, n);
|
|
462
462
|
case "polygon":
|
|
463
463
|
return ((s, a, r, o) => {
|
|
464
|
-
const { borders: l } =
|
|
465
|
-
return _e({ ...a, points: a.points.map(([h, d]) => o.gridGap ? [h +
|
|
464
|
+
const { borders: l } = q(a, o);
|
|
465
|
+
return _e({ ...a, points: a.points.map(([h, d]) => o.gridGap ? [h + B(l.x + s[0] - r[0], o) - l.x, d + B(l.y + s[1] - r[1], o) - l.y] : [B(h + s[0] - r[0], o), B(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
|
-
const { borders: l } =
|
|
470
|
-
return qe({ ...a, points: a.points.map(([h, d]) => o.gridGap ? [h +
|
|
469
|
+
const { borders: l } = q(a, o);
|
|
470
|
+
return qe({ ...a, points: a.points.map(([h, d]) => o.gridGap ? [h + B(l.x + s[0] - r[0], o) - l.x, d + B(l.y + s[1] - r[1], o) - l.y] : [B(h + s[0] - r[0], o), B(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
|
-
const { borders: l } =
|
|
474
|
+
const { borders: l } = q(a, o), h = o.gridGap ? B(l.x + s[0] - r[0], o) - l.x : s[0] - r[0], d = o.gridGap ? B(l.y + s[1] - r[1], o) - l.y : s[1] - r[1];
|
|
475
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:
|
|
@@ -502,7 +502,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
502
502
|
return e;
|
|
503
503
|
}
|
|
504
504
|
}, Qi = ({ ctx: e, shape: i, settings: t, selectionWidth: n, selectionColor: s, withAnchors: a = !0 }) => {
|
|
505
|
-
const { center: r } =
|
|
505
|
+
const { center: r } = q(i, t);
|
|
506
506
|
switch (Ut(e, t, i.rotation, r), i.type) {
|
|
507
507
|
case "rect":
|
|
508
508
|
case "square":
|
|
@@ -557,7 +557,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
557
557
|
const a = s.getContext("2d");
|
|
558
558
|
if (!a) return "";
|
|
559
559
|
a.clearRect(0, 0, i, t), l1(a);
|
|
560
|
-
for (let r = e.length - 1; r >= 0; r--) p1(a, e[r],
|
|
560
|
+
for (let r = e.length - 1; r >= 0; r--) p1(a, e[r], de(["canvasSize", "scaleRatio"], 1, n));
|
|
561
561
|
return s.toDataURL("image/png");
|
|
562
562
|
}, G1 = (e, i, t) => {
|
|
563
563
|
return s = Xt(e, i, t), `data:text/plain;charset=utf-8,${encodeURIComponent(JSON.stringify(s))}`;
|
|
@@ -565,94 +565,95 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
565
565
|
}, X1 = (e) => {
|
|
566
566
|
const i = ["img", "id", "selection", "path", "arrows"];
|
|
567
567
|
return e.map((t) => t.type !== "picture" || t.src.startsWith("http") ? Zt(i, t) : Zt(i, { ...t, src: B1(t) }));
|
|
568
|
-
}, Xt = (e, i, t) => ({ shapes: X1(e), config: { width: i, height: t } }), Ci = (e, i) => ot({ ...e, id:
|
|
569
|
-
const n =
|
|
568
|
+
}, Xt = (e, i, t) => ({ shapes: X1(e), config: { width: i, height: t } }), Ci = (e, i) => ot({ ...e, id: re(`${e.type}_`) }, i), Y1 = (e, i, t) => {
|
|
569
|
+
const n = J([]), s = J({ dataChanged: [] }), [a, r] = $(void 0), [o, l] = $(void 0), [h, d] = $(void 0), [c, u] = $({ states: [{ shapes: [], selectedShape: void 0, source: "remote" }], cursor: 0 }), g = c.cursor > 0, f = c.cursor < c.states.length - 1, x = n.current.length > 0, w = F(() => {
|
|
570
570
|
u((v) => r1(v.states[v.cursor].shapes, n.current) ? v : { states: [...v.states.slice(0, v.cursor + 1), { shapes: n.current, selectedShape: o, source: "user" }], cursor: v.cursor + 1 });
|
|
571
|
-
}, [o]),
|
|
571
|
+
}, [o]), Q = F((v) => {
|
|
572
572
|
n.current = [v, ...n.current];
|
|
573
|
-
}, []), L = F((v, m,
|
|
573
|
+
}, []), L = F((v, m, S) => {
|
|
574
574
|
if (v.target && "className" in v.target && ![a1, s1].includes(v.target.className)) return void d(void 0);
|
|
575
|
-
const
|
|
576
|
-
d(
|
|
577
|
-
}, [e, o]), b = F(async (v, m = 300,
|
|
578
|
-
const
|
|
579
|
-
return
|
|
580
|
-
}, [
|
|
581
|
-
n.current = n.current.map((
|
|
582
|
-
}, [o,
|
|
583
|
-
const m = v.map((
|
|
584
|
-
n.current = m,
|
|
585
|
-
}, [
|
|
586
|
-
l((m) => m?.id === v.id ? void 0 : m), n.current = n.current.filter((m) => m.id !== v.id),
|
|
587
|
-
}, [
|
|
575
|
+
const W = n.current.find((z) => z.id === o?.id ? !!st(o, S, e) : !!c1(m, z, S, e));
|
|
576
|
+
d(W);
|
|
577
|
+
}, [e, o]), b = F(async (v, m = 300, S = 300) => {
|
|
578
|
+
const W = await R1(v, m, S, e);
|
|
579
|
+
return Q(W), w(), W;
|
|
580
|
+
}, [Q, w, e]), k = F((v, m = !1) => {
|
|
581
|
+
n.current = n.current.map((S) => S.id === o?.id ? v : S), l((S) => S?.id === v.id ? v : S), m && w();
|
|
582
|
+
}, [o, w]), P = F((v) => {
|
|
583
|
+
const m = v.map((S) => Zt(["chosen"], S));
|
|
584
|
+
n.current = m, w();
|
|
585
|
+
}, [w]), E = F((v) => {
|
|
586
|
+
l((m) => m?.id === v.id ? void 0 : m), n.current = n.current.filter((m) => m.id !== v.id), w();
|
|
587
|
+
}, [w]), H = F((v) => {
|
|
588
588
|
u((m) => {
|
|
589
|
-
const
|
|
590
|
-
return n.current = m.states[
|
|
589
|
+
const S = v(m);
|
|
590
|
+
return n.current = m.states[S].shapes, l(m.states[S].selectedShape), de("cursor", S, m);
|
|
591
591
|
});
|
|
592
592
|
}, []), T = F(() => {
|
|
593
593
|
H((v) => Math.max(0, v.cursor - 1));
|
|
594
594
|
}, [H]), C = F(() => {
|
|
595
595
|
H((v) => Math.min(v.states.length - 1, v.cursor + 1));
|
|
596
596
|
}, [H]), V = F((v, m) => {
|
|
597
|
-
l(void 0), n.current = v, u((
|
|
598
|
-
}, []),
|
|
599
|
-
const
|
|
600
|
-
|
|
597
|
+
l(void 0), n.current = v, u((S) => m.clearHistory ? { states: [{ shapes: v, selectedShape: void 0, source: m.source }], cursor: 0 } : { states: [...S.states.slice(0, S.cursor + 1), { shapes: v, selectedShape: void 0, source: m.source }], cursor: S.cursor + 1 });
|
|
598
|
+
}, []), I = F((v, m) => {
|
|
599
|
+
const S = n.current, W = S.findIndex((U) => U.id === v), z = S.findIndex((U) => U.id === m);
|
|
600
|
+
var O, X, D;
|
|
601
|
+
P((O = S, D = z, (X = W) < 0 || D < 0 || X > O.length - 1 || D > O.length - 1 ? O : X < D ? [...O.slice(0, X), ...O.slice(X + 1, D + 1), O[X], ...O.slice(D + 1, O.length)] : [...O.slice(0, D), O[X], ...O.slice(D, X), ...O.slice(X + 1, O.length)]));
|
|
601
602
|
}, [P]), y = F((v) => {
|
|
602
|
-
const m = n.current,
|
|
603
|
-
if (
|
|
604
|
-
const
|
|
605
|
-
l((
|
|
603
|
+
const m = n.current, S = m.findIndex((z) => z.id === v.id);
|
|
604
|
+
if (S < 0) return;
|
|
605
|
+
const W = de("visible", v.visible === !1, v);
|
|
606
|
+
l((z) => z?.id === W.id ? W : z), P(de(S, W, m));
|
|
606
607
|
}, [P]), N = F((v) => {
|
|
607
|
-
const m = n.current,
|
|
608
|
-
if (
|
|
609
|
-
const
|
|
610
|
-
l((
|
|
608
|
+
const m = n.current, S = m.findIndex((z) => z.id === v.id);
|
|
609
|
+
if (S < 0) return;
|
|
610
|
+
const W = de("locked", !v.locked, v);
|
|
611
|
+
l((z) => z?.id === W.id ? W : z), P(de(S, W, m));
|
|
611
612
|
}, [P]), M = F((v, m) => {
|
|
612
|
-
|
|
613
|
+
s.current.hasOwnProperty(v) && (s.current[v] = [...s.current[v], m]);
|
|
613
614
|
}, []), A = F((v, m) => {
|
|
614
|
-
if (
|
|
615
|
-
const
|
|
616
|
-
s.current[v] = [...s.current[v].slice(0,
|
|
615
|
+
if (s.current.hasOwnProperty(v)) if (m) {
|
|
616
|
+
const S = s.current[v].findIndex((W) => W === m);
|
|
617
|
+
s.current[v] = [...s.current[v].slice(0, S), ...s.current[v].slice(S + 1)];
|
|
617
618
|
} else s.current[v] = [];
|
|
618
619
|
}, []);
|
|
619
|
-
|
|
620
|
+
G(() => {
|
|
620
621
|
const v = c.states[c.cursor], m = Xt(v.shapes, i, t);
|
|
621
|
-
for (const
|
|
622
|
-
}, [i, t, c]),
|
|
622
|
+
for (const S of s.current.dataChanged) S(m, v.source);
|
|
623
|
+
}, [i, t, c]), G(() => {
|
|
623
624
|
n.current = n.current.map((v) => ot(v, e)), l((v) => v === void 0 ? void 0 : n.current.find((m) => m.id === v.id));
|
|
624
625
|
}, [e]);
|
|
625
626
|
const Z = F((v, m) => {
|
|
626
|
-
r((
|
|
627
|
-
const
|
|
628
|
-
const { selectionPadding:
|
|
627
|
+
r((S) => {
|
|
628
|
+
const W = [S?.[0] ?? [m[0], m[1]], [m[0], m[1]]], z = n.current.filter((O) => ((X, D, U, le) => {
|
|
629
|
+
const { selectionPadding: te, canvasOffset: ie } = le, { center: fe, borders: Me } = q(D, le), ne = Oe(U[0], D.rotation, fe, ie), _ = Oe(U[1], D.rotation, fe, ie), Se = Math.round(Math.min(ne[0], _[0]) - te / 2), Ze = Math.round(Math.max(ne[0], _[0]) + te), ke = Math.round(Math.min(ne[1], _[1]) - te / 2), me = { x: Se, y: ke, width: Ze - Se, height: Math.round(Math.max(ne[1], _[1]) + te) - ke }, be = pi(Me, me);
|
|
629
630
|
if (!be) return !1;
|
|
630
|
-
if (Me.width <= 1 || Me.height <= 1 || !("path" in
|
|
631
|
-
if (
|
|
632
|
-
const
|
|
633
|
-
for (const he of
|
|
631
|
+
if (Me.width <= 1 || Me.height <= 1 || !("path" in D) || !D.path) return !0;
|
|
632
|
+
if (X.lineWidth = (D.style?.lineWidth ?? 0) + 10, D.type === "brush") {
|
|
633
|
+
const oe = D.points.flat(), Le = Math.min(...oe.map((he) => he[0])), Ne = Math.min(...oe.map((he) => he[1]));
|
|
634
|
+
for (const he of D.points) {
|
|
634
635
|
if (he.length < 1) break;
|
|
635
636
|
if (he.length < 2) {
|
|
636
|
-
const ye = Qe(he[0], Le, Ne,
|
|
637
|
-
if (d1(be, { x: ye[0], y: ye[1], radius: (
|
|
637
|
+
const ye = Qe(he[0], Le, Ne, D.scaleX, D.scaleY);
|
|
638
|
+
if (d1(be, { x: ye[0], y: ye[1], radius: (D.style?.lineWidth ?? 1) / 2 })) return !0;
|
|
638
639
|
}
|
|
639
640
|
for (let ye = 0; ye < he.length - 1; ye++) {
|
|
640
|
-
const
|
|
641
|
+
const ae = Qe(he[ye], Le, Ne, D.scaleX, D.scaleY), Ve = Qe(he[ye + 1], Le, Ne, D.scaleX, D.scaleY), $e = pi({ x: Math.min(ae[0], Ve[0]), y: Math.min(ae[1], Ve[1]), width: Math.abs(ae[0] - Ve[0]), height: Math.abs(ae[1] - Ve[1]) }, me);
|
|
641
642
|
if ($e) {
|
|
642
643
|
const Pe = new Path2D();
|
|
643
|
-
if (Pe.moveTo(...
|
|
644
|
+
if (Pe.moveTo(...ae), Pe.lineTo(...Ve), ui({ ctx: X, path: Pe, rect: $e, offset: 10, checkFill: !1 })) return !0;
|
|
644
645
|
}
|
|
645
646
|
}
|
|
646
647
|
}
|
|
647
648
|
return !1;
|
|
648
649
|
}
|
|
649
|
-
const Ee = !(
|
|
650
|
-
return ui({ ctx:
|
|
651
|
-
})(v,
|
|
652
|
-
return l(
|
|
650
|
+
const Ee = !(!D.style?.fillColor || D.style?.fillColor === "transparent");
|
|
651
|
+
return ui({ ctx: X, path: D.path, rect: be, offset: 10, checkFill: Ee });
|
|
652
|
+
})(v, O, W, e));
|
|
653
|
+
return l(z?.[0]), W;
|
|
653
654
|
});
|
|
654
655
|
}, [e]);
|
|
655
|
-
return { registerEvent: M, unregisterEvent: A, shapesRef: n, selectedShape: o, hoveredShape: h, selectionFrame: a, setSelectionFrame: r, refreshSelectedShapes: Z, addShape:
|
|
656
|
+
return { registerEvent: M, unregisterEvent: A, shapesRef: n, selectedShape: o, hoveredShape: h, selectionFrame: a, setSelectionFrame: r, refreshSelectedShapes: Z, addShape: Q, addPictureShape: b, moveShapes: I, saveShapes: w, setSelectedShape: l, refreshHoveredShape: L, toggleShapeVisibility: y, toggleShapeLock: N, removeShape: E, updateShape: k, backwardShape: T, forwardShape: C, clearShapes: V, canGoBackward: g, canGoForward: f, canClear: x };
|
|
656
657
|
}, wi = (e, i = !1) => {
|
|
657
658
|
const t = (s, a) => {
|
|
658
659
|
if (Array.isArray(s)) return a;
|
|
@@ -681,13 +682,13 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
681
682
|
return null;
|
|
682
683
|
});
|
|
683
684
|
return $t(i ? [...n, Ot] : n);
|
|
684
|
-
}, An = ({ width: e = 1e3, height: i = 600, shapes: t, mode: n = "editor", disabled: s = !1, options: a = oi }) => {
|
|
685
|
-
const { layersManipulation: r, brushAlgo: o, isBrushShapeDoneOnMouseUp: l, grid: h, canGrow: d, canShrink: c, withExport: u, withLoadAndSave: g, withUploadPicture: f, withUrlPicture:
|
|
686
|
-
H.current =
|
|
687
|
-
}, []), [
|
|
688
|
-
const [it, Ie] =
|
|
689
|
-
return
|
|
690
|
-
if (!
|
|
685
|
+
}, An = ({ width: e = 1e3, height: i = 600, shapes: t, mode: n = "editor", disabled: s = !1, options: a = oi } = {}) => {
|
|
686
|
+
const { layersManipulation: r, brushAlgo: o, isBrushShapeDoneOnMouseUp: l, grid: h, canGrow: d, canShrink: c, withExport: u, withLoadAndSave: g, withUploadPicture: f, withUrlPicture: x, withSkeleton: w, withFrameSelection: Q, clearCallback: L, availableTools: b, canvasSelectionPadding: k } = { ...oi, ...a }, P = n !== "viewer", E = s || !P, H = J(null), T = J(null), C = J(!1), V = F((j) => {
|
|
687
|
+
H.current = j;
|
|
688
|
+
}, []), [I, y] = $(Ae), [N, M] = $(h), [A, Z] = $({ width: e, height: i, scaleRatio: 1 }), [v, m] = $([0, 0]), S = Ni(() => ({ brushAlgo: o, isBrushShapeDoneOnMouseUp: l, canvasSize: A, canvasOffset: v, gridGap: N, selectionPadding: k }), [k, N, o, l, v, A]), [W, z] = $(wi(b, f || x)), { isInsideComponent: O } = (({ disabled: j, componentRef: Ce }) => {
|
|
689
|
+
const [it, Ie] = $(!1);
|
|
690
|
+
return G(() => {
|
|
691
|
+
if (!j) {
|
|
691
692
|
const He = (We) => {
|
|
692
693
|
Ie(o1(We, Ce.current));
|
|
693
694
|
};
|
|
@@ -696,26 +697,26 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
696
697
|
};
|
|
697
698
|
}
|
|
698
699
|
Ie(!1);
|
|
699
|
-
}, [
|
|
700
|
-
})({ disabled: E, componentRef: H }), { registerEvent:
|
|
701
|
-
|
|
702
|
-
}, [
|
|
703
|
-
Le(
|
|
704
|
-
}, [Pe, Le]), lt = F((
|
|
705
|
-
y(Ae), j
|
|
706
|
-
}, [
|
|
707
|
-
const
|
|
708
|
-
if (!
|
|
709
|
-
Si(
|
|
700
|
+
}, [j, Ce]), { isInsideComponent: it };
|
|
701
|
+
})({ disabled: E, componentRef: H }), { registerEvent: X, unregisterEvent: D, shapesRef: U, selectedShape: le, selectionFrame: te, hoveredShape: ie, addShape: fe, addPictureShape: Me, moveShapes: ne, setSelectedShape: _, setSelectionFrame: Se, refreshSelectedShapes: Ze, refreshHoveredShape: ke, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: oe, clearShapes: Le, saveShapes: Ne, toggleShapeVisibility: he, toggleShapeLock: ye, canGoBackward: ae, canGoForward: Ve, canClear: $e } = Y1(S, e, i), Pe = F((j) => {
|
|
702
|
+
_(void 0), y(j);
|
|
703
|
+
}, [_]), Ue = F((j, Ce) => {
|
|
704
|
+
Le(j, Ce), Pe(Ae), m([0, 0]);
|
|
705
|
+
}, [Pe, Le]), lt = F((j) => {
|
|
706
|
+
y(Ae), _(j);
|
|
707
|
+
}, [_]), Ct = F(() => {
|
|
708
|
+
const j = G1(U.current, e, i);
|
|
709
|
+
if (!j) throw new Error("L'encodage a échoué");
|
|
710
|
+
Si(j, "drawing.json");
|
|
710
711
|
}, [U, e, i]), wt = F(() => {
|
|
711
|
-
const
|
|
712
|
-
if (!
|
|
713
|
-
Si(
|
|
714
|
-
}, [U, e, i,
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
}, [
|
|
718
|
-
const
|
|
712
|
+
const j = bi(U.current, e, i, S);
|
|
713
|
+
if (!j) throw new Error();
|
|
714
|
+
Si(j, "drawing.png");
|
|
715
|
+
}, [U, e, i, S]), xt = F(() => T.current ? bi(U.current, e, i, S) : void 0, [U, e, i, S]), K = F(() => Xt(U.current, e, i), [U, e, i]);
|
|
716
|
+
G(() => {
|
|
717
|
+
O || _(void 0);
|
|
718
|
+
}, [O, _]);
|
|
719
|
+
const se = F(async (j, Ce) => {
|
|
719
720
|
const it = await (async (Ie, He) => {
|
|
720
721
|
if (!Ie) return [];
|
|
721
722
|
const We = [], Mt = $t(Ie.map((ue) => {
|
|
@@ -742,17 +743,17 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
742
743
|
return Ci(ue, He);
|
|
743
744
|
}));
|
|
744
745
|
return await Promise.all(We), Mt;
|
|
745
|
-
})(
|
|
746
|
+
})(j, S);
|
|
746
747
|
Ue(it, Ce);
|
|
747
|
-
}, [Ue,
|
|
748
|
-
Be.current =
|
|
749
|
-
const Re = F((
|
|
750
|
-
Be.current?.(
|
|
748
|
+
}, [Ue, S]), Be = J();
|
|
749
|
+
Be.current = se;
|
|
750
|
+
const Re = F((j = [], Ce = !0) => {
|
|
751
|
+
Be.current?.(j, { clearHistory: Ce, source: "remote" });
|
|
751
752
|
}, []);
|
|
752
|
-
|
|
753
|
+
G(() => {
|
|
753
754
|
C.current || (C.current = !0, t && Be.current?.(t, { clearHistory: !0, source: "remote" }));
|
|
754
755
|
}, [t]);
|
|
755
|
-
const tt = F(async (
|
|
756
|
+
const tt = F(async (j) => {
|
|
756
757
|
const Ce = await (async (it) => new Promise((Ie, He) => {
|
|
757
758
|
const We = new FileReader();
|
|
758
759
|
We.onload = (Mt) => {
|
|
@@ -761,16 +762,16 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
761
762
|
const we = JSON.parse(ue);
|
|
762
763
|
Ie(we);
|
|
763
764
|
}, We.readAsText(it);
|
|
764
|
-
}))(
|
|
765
|
-
await
|
|
766
|
-
}, [
|
|
767
|
-
typeof L != "string" ?
|
|
768
|
-
}, [Ue,
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
}, [b, f,
|
|
765
|
+
}))(j);
|
|
766
|
+
await se(Ce.shapes ?? [], { clearHistory: !0, source: "remote" });
|
|
767
|
+
}, [se]), m1 = F(() => {
|
|
768
|
+
typeof L != "string" ? se(L(), { clearHistory: !1, source: "user" }) : L === "defaultShapes" && t !== void 0 ? se(t, { clearHistory: !1, source: "user" }) : Ue([], { clearHistory: !1, source: "user" });
|
|
769
|
+
}, [Ue, se, t, L]);
|
|
770
|
+
G(() => {
|
|
771
|
+
z(wi(b, f || x));
|
|
772
|
+
}, [b, f, x]);
|
|
772
773
|
const _t = { canvas: T, editor: H, setEditor: V };
|
|
773
|
-
return { editorProps: { shapesRef: U, addPictureShape: Me, moveShapes:
|
|
774
|
+
return { editorProps: { shapesRef: U, addPictureShape: Me, moveShapes: ne, toggleShapeVisibility: he, toggleShapeLock: ye, canGoBackward: ae, canGoForward: Ve, canClear: $e, selectedShape: le, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: oe, refs: _t, width: e, height: i, canvasSize: A, selectTool: Pe, selectShape: lt, activeTool: I, setActiveTool: y, setAvailableTools: z, isEditMode: P, isDisabled: E, availableTools: W, gridGap: N, setGridGap: M, loadFile: tt, exportPicture: wt, exportData: Ct, clearCanvas: m1, settings: S, canvas: { canGrow: d, canShrink: c, layersManipulation: r, withExport: u, withLoadAndSave: g, withUploadPicture: f, withUrlPicture: x } }, canvasProps: { shapesRef: U, selectedShape: le, selectionFrame: te, hoveredShape: ie, addShape: fe, setSelectedShape: _, setSelectionFrame: Se, refreshSelectedShapes: Ze, refreshHoveredShape: ke, removeShape: me, updateShape: be, backwardShape: Ee, forwardShape: oe, saveShapes: Ne, refs: _t, width: e, height: i, settings: S, canvasSize: A, setCanvasSize: Z, setCanvasOffset: m, selectShape: lt, activeTool: I, setActiveTool: y, isInsideComponent: O, isEditMode: P, isDisabled: E, canvas: { withSkeleton: w, withFrameSelection: Q, canGrow: d, canShrink: c } }, registerEvent: X, unregisterEvent: D, resetCanvas: Re, getCurrentImage: xt, getCurrentData: K };
|
|
774
775
|
}, j1 = (e, i, t, n, s, a, r) => {
|
|
775
776
|
let o = !1;
|
|
776
777
|
if (s) {
|
|
@@ -778,7 +779,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
778
779
|
const h = ((d, c, u, g) => {
|
|
779
780
|
if (d.mode === "translate") return { mode: "translate", cursorStartPosition: u, originalShape: c };
|
|
780
781
|
if (d.mode === "rotate") {
|
|
781
|
-
const { center: f } =
|
|
782
|
+
const { center: f } = q(c, g);
|
|
782
783
|
return { mode: "rotate", cursorStartPosition: u, originalShape: c, center: [f[0], f[1]] };
|
|
783
784
|
}
|
|
784
785
|
return d.mode === "resize" ? { mode: "resize", cursorStartPosition: u, originalShape: c, anchor: d.anchor } : void 0;
|
|
@@ -787,9 +788,9 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
787
788
|
}
|
|
788
789
|
const l = i.find((h) => h.id === s?.id ? !!o : !!c1(e, h, t, n));
|
|
789
790
|
return l ? { shape: l, mode: { mode: "translate", cursorStartPosition: t, originalShape: l } } : { shape: void 0, mode: { mode: r ? "selectionFrame" : "default" } };
|
|
790
|
-
}, _1 = ({ disabled: e = !1, addShape: i, drawCanvasRef: t, setActiveTool: n, refreshHoveredShape: s, shapes: a, selectionMode: r, activeTool: o, isInsideComponent: l, setCanvasOffset: h, selectedShape: d, selectionCanvasRef: c, canvasOffsetStartPosition: u, refreshSelectedShapes: g, setSelectedShape: f, setSelectionFrame:
|
|
791
|
-
const [H, T] =
|
|
792
|
-
const y =
|
|
791
|
+
}, _1 = ({ disabled: e = !1, addShape: i, drawCanvasRef: t, setActiveTool: n, refreshHoveredShape: s, shapes: a, selectionMode: r, activeTool: o, isInsideComponent: l, setCanvasOffset: h, selectedShape: d, selectionCanvasRef: c, canvasOffsetStartPosition: u, refreshSelectedShapes: g, setSelectedShape: f, setSelectionFrame: x, setCanvasOffsetStartPosition: w, updateSingleShape: Q, saveShapes: L, setSelectionMode: b, settings: k, isShiftPressed: P, withFrameSelection: E }) => {
|
|
792
|
+
const [H, T] = $({ mode: "default" }), { registerDoubleClickEvent: C, unRegisterDoubleClickEvent: V } = (() => {
|
|
793
|
+
const y = J(void 0), N = J(void 0), M = (A) => {
|
|
793
794
|
const Z = (/* @__PURE__ */ new Date()).getTime();
|
|
794
795
|
y.current && Z < y.current + 300 && N.current?.(A), y.current = (/* @__PURE__ */ new Date()).getTime();
|
|
795
796
|
};
|
|
@@ -799,34 +800,34 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
799
800
|
A.removeEventListener("click", M), A.removeEventListener("touchend", M);
|
|
800
801
|
} };
|
|
801
802
|
})();
|
|
802
|
-
|
|
803
|
-
const y = (N) => ((M, A, Z, v, m,
|
|
804
|
-
const
|
|
805
|
-
if (!
|
|
806
|
-
const
|
|
807
|
-
if (Z.type !== "move" ||
|
|
808
|
-
if (hi(M) ||
|
|
803
|
+
G(() => {
|
|
804
|
+
const y = (N) => ((M, A, Z, v, m, S, W, z, O, X, D, U, le) => {
|
|
805
|
+
const te = A.current?.getContext("2d");
|
|
806
|
+
if (!te) return;
|
|
807
|
+
const ie = Pt(M, A.current, U);
|
|
808
|
+
if (Z.type !== "move" || S === void 0) if (m.mode !== "selectionFrame") {
|
|
809
|
+
if (hi(M) || z(M, te, ie, U), v !== void 0 && !v.locked) if (m.mode === "default" || m.mode === "textedition") W(st(v, ie, U, !0) || { mode: "default" });
|
|
809
810
|
else {
|
|
810
811
|
const fe = A.current?.getContext("2d");
|
|
811
812
|
if (!fe) return;
|
|
812
|
-
|
|
813
|
+
O(L1(fe, v, ie, m, U, le));
|
|
813
814
|
}
|
|
814
|
-
} else
|
|
815
|
-
else
|
|
816
|
-
})(N, c, o, d, r, u, T, s,
|
|
815
|
+
} else D(te, ie, U);
|
|
816
|
+
else X([ie[0] - S[0], ie[1] - S[1]]);
|
|
817
|
+
})(N, c, o, d, r, u, T, s, Q, h, g, k, P);
|
|
817
818
|
if (l) return document.addEventListener("mousemove", y), document.addEventListener("touchmove", y), () => {
|
|
818
819
|
document.removeEventListener("mousemove", y), document.removeEventListener("touchmove", y);
|
|
819
820
|
};
|
|
820
|
-
}, [l, c, d, r, u,
|
|
821
|
-
const { isBrushShapeDoneOnMouseUp:
|
|
822
|
-
return
|
|
821
|
+
}, [l, c, d, r, u, Q, o, h, s, g, k, P]);
|
|
822
|
+
const { isBrushShapeDoneOnMouseUp: I } = k;
|
|
823
|
+
return G(() => {
|
|
823
824
|
const y = () => {
|
|
824
|
-
r.mode !== "textedition" && r.mode !== "default" && (r.mode === "brush" &&
|
|
825
|
+
r.mode !== "textedition" && r.mode !== "default" && (r.mode === "brush" && I && f(void 0), b({ mode: "default" }), x(void 0), L());
|
|
825
826
|
};
|
|
826
827
|
return l && (document.addEventListener("mouseup", y), document.addEventListener("touchend", y)), () => {
|
|
827
828
|
l && (document.removeEventListener("mouseup", y), document.removeEventListener("touchend", y));
|
|
828
829
|
};
|
|
829
|
-
}, [l, r,
|
|
830
|
+
}, [l, r, I, L, x, b, f]), G(() => {
|
|
830
831
|
const y = c.current;
|
|
831
832
|
if (!y) return;
|
|
832
833
|
const N = y.getContext("2d");
|
|
@@ -836,18 +837,18 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
836
837
|
const Z = Pt(A, c.current, k);
|
|
837
838
|
if (o.type === "selection") {
|
|
838
839
|
const { shape: v, mode: m } = j1(N, a, Z, k, d, hi(A), E);
|
|
839
|
-
f(v), b(m), m.mode === "selectionFrame" &&
|
|
840
|
-
} else if (o.type === "move")
|
|
840
|
+
f(v), b(m), m.mode === "selectionFrame" && x([[Z[0], Z[1]], [Z[0], Z[1]]]);
|
|
841
|
+
} else if (o.type === "move") w(Z);
|
|
841
842
|
else if (n1.some((v) => v === o.type)) {
|
|
842
843
|
const v = t.current?.getContext("2d");
|
|
843
844
|
if (!v) return;
|
|
844
845
|
if (o.type === "brush") {
|
|
845
846
|
if (d?.type === "brush") {
|
|
846
|
-
const m = ((
|
|
847
|
-
const
|
|
848
|
-
return Je(
|
|
847
|
+
const m = ((S, W, z) => {
|
|
848
|
+
const O = { ...S, points: de(S.points.length, [[Math.round(W[0]), Math.round(W[1])]], S.points) };
|
|
849
|
+
return Je(O, z);
|
|
849
850
|
})(d, Z, k);
|
|
850
|
-
|
|
851
|
+
Q(m);
|
|
851
852
|
} else {
|
|
852
853
|
const m = yi(v, o, Z, k);
|
|
853
854
|
if (!m) return;
|
|
@@ -863,7 +864,7 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
863
864
|
return y.addEventListener("mousedown", M, { passive: !1 }), y.addEventListener("touchstart", M, { passive: !1 }), () => {
|
|
864
865
|
y.removeEventListener("mousedown", M), y.removeEventListener("touchstart", M);
|
|
865
866
|
};
|
|
866
|
-
}, [e, c, t, d, o,
|
|
867
|
+
}, [e, c, t, d, o, w, a, Q, i, n, f, b, x, k, E]), G(() => {
|
|
867
868
|
const y = c.current;
|
|
868
869
|
if (y)
|
|
869
870
|
return l ? (C(y, (N) => {
|
|
@@ -876,8 +877,8 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
876
877
|
}) : void 0;
|
|
877
878
|
}, [C, V, l, c, o, d, b, k]), { hoverMode: H };
|
|
878
879
|
}, f1 = (e) => e.childNodes.length ? Array.from(e.childNodes).map((i) => f1(i)).join("") : e.nodeValue ?? "", q1 = ({ disabled: e = !1, scaleRatio: i, shape: t, defaultValue: n, updateValue: s, saveShapes: a, settings: r }) => {
|
|
879
|
-
const o =
|
|
880
|
-
|
|
880
|
+
const o = J(null), l = J(a);
|
|
881
|
+
G(() => {
|
|
881
882
|
if (!o.current) return;
|
|
882
883
|
const d = o.current, c = (u) => {
|
|
883
884
|
u.preventDefault();
|
|
@@ -892,14 +893,14 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
892
893
|
return d.focus(), () => {
|
|
893
894
|
d.removeEventListener("paste", c);
|
|
894
895
|
};
|
|
895
|
-
}, [n]),
|
|
896
|
+
}, [n]), G(() => {
|
|
896
897
|
const d = l.current;
|
|
897
898
|
return () => {
|
|
898
899
|
d();
|
|
899
900
|
};
|
|
900
901
|
}, []);
|
|
901
902
|
const h = Ni(() => {
|
|
902
|
-
const { borders: d, center: c } =
|
|
903
|
+
const { borders: d, center: c } = q(t, r);
|
|
903
904
|
return ve({ point: [d.x, d.y], rotation: -t.rotation, origin: c });
|
|
904
905
|
}, [t, r]);
|
|
905
906
|
return p("div", { className: "react-paint-editor-toolbox-edittextbox", ref: o, "data-fontbold": t.style?.fontBold ?? !1, "data-fontitalic": t.style?.fontItalic ?? !1, contentEditable: !e, onInput: (d) => {
|
|
@@ -911,89 +912,89 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
911
912
|
e.clearRect(0, 0, a, r), l1(e), t.gridGap && ((o, l, h, d) => {
|
|
912
913
|
const { gridGap: c, canvasOffset: u, canvasSize: { scaleRatio: g } } = d;
|
|
913
914
|
o.strokeStyle = "rgb(220,220,220)", o.lineWidth = 1, o.save(), o.scale(g, g), o.beginPath();
|
|
914
|
-
const f = -u[0] % c,
|
|
915
|
-
for (let L = 0; L <
|
|
916
|
-
for (let L = 0; L <
|
|
915
|
+
const f = -u[0] % c, x = -u[1] % c, w = Math.ceil(l / g / c), Q = Math.ceil(h / g / c);
|
|
916
|
+
for (let L = 0; L < w; L++) o.moveTo(f + (L + 1) * c, x), o.lineTo(f + (L + 1) * c, x + h / g);
|
|
917
|
+
for (let L = 0; L < Q; L++) o.moveTo(f, x + (L + 1) * c), o.lineTo(f + l / g, x + (L + 1) * c);
|
|
917
918
|
o.stroke(), o.restore();
|
|
918
919
|
})(e, a, r, t);
|
|
919
920
|
for (let o = n.length - 1; o >= 0; o--) i.mode === "textedition" && n[o] === s || p1(e, n[o], t);
|
|
920
|
-
}, K1 = Fi.forwardRef(({ canGrow: e, disabled: i = !1, canvasSize: t, shapes: n, addShape: s, updateSingleShape: a, selectedShape: r, setSelectedShape: o, setSelectionFrame: l, hoveredShape: h, selectionFrame: d, refreshHoveredShape: c, refreshSelectedShapes: u, saveShapes: g, activeTool: f, setActiveTool:
|
|
921
|
-
const M =
|
|
921
|
+
}, K1 = Fi.forwardRef(({ canGrow: e, disabled: i = !1, canvasSize: t, shapes: n, addShape: s, updateSingleShape: a, selectedShape: r, setSelectedShape: o, setSelectionFrame: l, hoveredShape: h, selectionFrame: d, refreshHoveredShape: c, refreshSelectedShapes: u, saveShapes: g, activeTool: f, setActiveTool: x, canvasOffsetStartPosition: w, setCanvasOffsetStartPosition: Q, setCanvasOffset: L, isInsideComponent: b, selectionMode: k, setSelectionMode: P, selectionWidth: E, selectionColor: H, settings: T, isEditMode: C, isShiftPressed: V, withFrameSelection: I, withSkeleton: y }, N) => {
|
|
922
|
+
const M = J(null), A = J(null);
|
|
922
923
|
S1(N, () => M.current);
|
|
923
|
-
const { hoverMode: Z } = _1({ disabled: i, addShape: s, drawCanvasRef: M, setActiveTool:
|
|
924
|
+
const { hoverMode: Z } = _1({ disabled: i, addShape: s, drawCanvasRef: M, setActiveTool: x, shapes: n, selectionMode: k, activeTool: f, isInsideComponent: b, setCanvasOffset: L, selectedShape: r, selectionCanvasRef: A, canvasOffsetStartPosition: w, setSelectedShape: o, setSelectionFrame: l, refreshHoveredShape: c, refreshSelectedShapes: u, setCanvasOffsetStartPosition: Q, updateSingleShape: a, saveShapes: g, setSelectionMode: P, isShiftPressed: V, withFrameSelection: I, settings: T }), v = F((m) => {
|
|
924
925
|
if (r?.type !== "text") return;
|
|
925
|
-
const
|
|
926
|
-
if (!
|
|
927
|
-
const
|
|
928
|
-
a(
|
|
926
|
+
const S = M.current?.getContext("2d");
|
|
927
|
+
if (!S) return;
|
|
928
|
+
const W = ot(W1(S, r, m, T), T);
|
|
929
|
+
a(W);
|
|
929
930
|
}, [a, r, T]);
|
|
930
|
-
return
|
|
931
|
+
return G(() => {
|
|
931
932
|
const m = M.current?.getContext("2d");
|
|
932
933
|
m && window.requestAnimationFrame(() => J1(m, k, T, n, r));
|
|
933
|
-
}, [n, k, r, T]),
|
|
934
|
+
}, [n, k, r, T]), G(() => {
|
|
934
935
|
const m = A.current?.getContext("2d");
|
|
935
|
-
m && window.requestAnimationFrame(() => ((
|
|
936
|
-
|
|
936
|
+
m && window.requestAnimationFrame(() => ((S, W, z, O, X, D, U, le, te, ie) => {
|
|
937
|
+
S.clearRect(0, 0, z.canvasSize.width, z.canvasSize.height), ie && le && le.id !== U?.id && O.type === "selection" && W.mode === "default" && Qi({ ctx: S, shape: le, settings: z, selectionWidth: X, selectionColor: D, withAnchors: !1 }), U && O.type !== "brush" && Qi({ ctx: S, shape: U, settings: z, selectionWidth: X, selectionColor: D, withAnchors: W.mode !== "textedition" }), te && U1({ ctx: S, selectionFrame: te, settings: z });
|
|
937
938
|
})(m, k, T, f, E, H, r, h, d, y));
|
|
938
|
-
}, [h, d, k, r, f, T, E, H, y]), p("div", { className: "react-paint-canvas-box", children:
|
|
939
|
+
}, [h, d, k, r, f, T, E, H, y]), p("div", { className: "react-paint-canvas-box", children: R("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 })] }) });
|
|
939
940
|
}), 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 }) => {
|
|
940
|
-
const [c, u] =
|
|
941
|
-
return
|
|
942
|
-
const g = (
|
|
943
|
-
i && (t || (
|
|
944
|
-
}, f = (
|
|
945
|
-
c && (t || (
|
|
946
|
-
},
|
|
947
|
-
|
|
948
|
-
},
|
|
949
|
-
if (
|
|
950
|
-
if (
|
|
951
|
-
if (
|
|
941
|
+
const [c, u] = $(void 0);
|
|
942
|
+
return G(() => {
|
|
943
|
+
const g = (Q) => {
|
|
944
|
+
i && (t || (Q.preventDefault(), u({ ...i })));
|
|
945
|
+
}, f = (Q) => {
|
|
946
|
+
c && (t || (Q.preventDefault(), r(((L, b) => ({ ...Nt([20, 20], L, [0, 0], b), id: re(`${L.type}_`) }))(c, n))));
|
|
947
|
+
}, x = (Q) => {
|
|
948
|
+
Q.key === Vi && d(!1);
|
|
949
|
+
}, w = (Q) => {
|
|
950
|
+
if (Q.metaKey || Q.ctrlKey) {
|
|
951
|
+
if (Q.key === sn || Q.key === an) return Q.preventDefault(), Q.stopPropagation(), void l();
|
|
952
|
+
if (Q.key === rn || Q.key === on) return Q.preventDefault(), Q.stopPropagation(), void h();
|
|
952
953
|
}
|
|
953
|
-
if (
|
|
954
|
+
if (Q.key === Vi) return void d(!0);
|
|
954
955
|
if (!i) return;
|
|
955
|
-
if (
|
|
956
|
+
if (Q.key === nn) return void s(void 0);
|
|
956
957
|
if (t) return;
|
|
957
958
|
const L = { [ki]: [n.gridGap ? -n.gridGap : -1, 0], [Li]: [n.gridGap ? n.gridGap : 1, 0], [Mi]: [0, n.gridGap ? n.gridGap : 1], [xi]: [0, n.gridGap ? -n.gridGap : -1] };
|
|
958
|
-
switch (
|
|
959
|
+
switch (Q.key) {
|
|
959
960
|
case ki:
|
|
960
961
|
case Li:
|
|
961
962
|
case Mi:
|
|
962
963
|
case xi:
|
|
963
|
-
|
|
964
|
+
Q.preventDefault(), Q.stopPropagation(), o(Nt(L[Q.key], i, [0, 0], n));
|
|
964
965
|
break;
|
|
965
966
|
case en:
|
|
966
967
|
case tn:
|
|
967
|
-
|
|
968
|
+
Q.preventDefault(), Q.stopPropagation(), a(i);
|
|
968
969
|
}
|
|
969
970
|
};
|
|
970
|
-
if (e) return document.addEventListener("keydown",
|
|
971
|
-
document.removeEventListener("keydown",
|
|
971
|
+
if (e) return document.addEventListener("keydown", w), document.addEventListener("keyup", x), document.addEventListener(Pi, g), document.addEventListener(Hi, f), () => {
|
|
972
|
+
document.removeEventListener("keydown", w), document.removeEventListener("keyup", x), document.removeEventListener(Pi, g), document.removeEventListener(Hi, f);
|
|
972
973
|
};
|
|
973
974
|
}, [e, c, t, i, n, o, a, s, r, l, h, d]), {};
|
|
974
975
|
}, Zn = ({ options: e, className: i, style: t, canvasProps: n }) => {
|
|
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:
|
|
976
|
-
l(
|
|
977
|
-
}, [l, C]), Me = F((
|
|
978
|
-
const
|
|
979
|
-
H({ width:
|
|
976
|
+
const { shapesRef: s, selectedShape: a, selectionFrame: r, hoveredShape: o, addShape: l, setSelectedShape: h, setSelectionFrame: d, refreshSelectedShapes: c, refreshHoveredShape: u, removeShape: g, updateShape: f, backwardShape: x, forwardShape: w, saveShapes: Q, refs: L, width: b, height: k, settings: P, canvasSize: E, setCanvasSize: H, setCanvasOffset: T, selectShape: C, activeTool: V, setActiveTool: I, isInsideComponent: y, isEditMode: N, isDisabled: M, canvas: { withSkeleton: A, withFrameSelection: Z, canGrow: v, canShrink: m } } = n, { canvasBackgroundColor: S, canvasSelectionColor: W, canvasSelectionWidth: z } = { ...w1, ...e }, O = J(null), [X, D] = $(void 0), [U, le] = $({ mode: "default" }), [te, ie] = $(!1), fe = F((ne) => {
|
|
977
|
+
l(ne), C(ne);
|
|
978
|
+
}, [l, C]), Me = F((ne) => {
|
|
979
|
+
const _ = ne / b;
|
|
980
|
+
H({ width: ne, height: k * _, scaleRatio: _ });
|
|
980
981
|
}, [b, k, H]);
|
|
981
|
-
return ln({ isInsideComponent: y, isEditingText: U.mode === "textedition", settings: P, selectedShape: a, setSelectedShape: h, removeShape: g, pasteShape: fe, updateShape: f, backwardShape:
|
|
982
|
-
|
|
983
|
-
const Se =
|
|
982
|
+
return ln({ isInsideComponent: y, isEditingText: U.mode === "textedition", settings: P, selectedShape: a, setSelectedShape: h, removeShape: g, pasteShape: fe, updateShape: f, backwardShape: x, forwardShape: w, setShiftPressed: ie }), (({ onResized: ne, element: _ }) => {
|
|
983
|
+
G(() => {
|
|
984
|
+
const Se = _.current;
|
|
984
985
|
if (!Se) return;
|
|
985
986
|
const Ze = new ResizeObserver((ke) => {
|
|
986
987
|
const me = ke?.[0]?.borderBoxSize?.[0], { width: be, height: Ee } = me ? { width: me.inlineSize, height: me.blockSize } : ke?.[0].contentRect ?? {};
|
|
987
|
-
|
|
988
|
+
ne(be, Ee);
|
|
988
989
|
});
|
|
989
990
|
return Ze.observe(Se), () => {
|
|
990
991
|
Ze.unobserve(Se);
|
|
991
992
|
};
|
|
992
|
-
}, [
|
|
993
|
-
})({ element:
|
|
993
|
+
}, [_, ne]);
|
|
994
|
+
})({ element: O, onResized: Me }), p("div", { ref: O, 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": S, ...t }, children: p(K1, { ref: L.canvas, canGrow: v, disabled: M, isInsideComponent: y, activeTool: V, setActiveTool: I, canvasOffsetStartPosition: X, setCanvasOffsetStartPosition: D, 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: Q, canvasSize: E, selectionMode: U, setSelectionMode: le, selectionColor: W, selectionWidth: z, isEditMode: N, isShiftPressed: te, withFrameSelection: Z, withSkeleton: A }) });
|
|
994
995
|
}, dn = ({ isLoading: e = !1 }) => {
|
|
995
|
-
const [i, t] =
|
|
996
|
-
return
|
|
996
|
+
const [i, t] = $("hidden");
|
|
997
|
+
return G(() => {
|
|
997
998
|
if (!e) {
|
|
998
999
|
t("fadeOut");
|
|
999
1000
|
const n = setTimeout(() => t("hidden"), 300);
|
|
@@ -1002,10 +1003,10 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1002
1003
|
};
|
|
1003
1004
|
}
|
|
1004
1005
|
t("visible");
|
|
1005
|
-
}, [e]), i === "hidden" ? null : p("div", { className: "react-paint-editor-loading", "data-loading": i, style: { "--react-paint-editor-loading-zindex": b1, "--react-paint-editor-loading-transition-duration": "300ms" }, children:
|
|
1006
|
+
}, [e]), i === "hidden" ? null : p("div", { className: "react-paint-editor-loading", "data-loading": i, style: { "--react-paint-editor-loading-zindex": b1, "--react-paint-editor-loading-transition-duration": "300ms" }, children: R("div", { className: "react-paint-editor-loader", children: [p("div", {}), p("div", {}), p("div", {}), p("div", {})] }) });
|
|
1006
1007
|
}, cn = "infos", hn = 4e3, pn = ({ type: e, text: i, duration: t }) => {
|
|
1007
|
-
const [n, s] =
|
|
1008
|
-
return
|
|
1008
|
+
const [n, s] = $(!1);
|
|
1009
|
+
return G(() => {
|
|
1009
1010
|
const a = setTimeout(() => {
|
|
1010
1011
|
s(!0);
|
|
1011
1012
|
}, 100), r = setTimeout(() => {
|
|
@@ -1015,14 +1016,14 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1015
1016
|
clearTimeout(a), clearTimeout(r);
|
|
1016
1017
|
};
|
|
1017
1018
|
}, [t]), p("div", { className: "react-paint-editor-snackbar", "data-is-shown": +n, "data-type": e, style: { "--react-paint-editor-panel-transition-duration": "500ms" }, children: i });
|
|
1018
|
-
}, un = ({ snackbarList: e }) => p("div", { className: "react-paint-editor-snackbar-container", style: { "--react-paint-editor-snackbar-zindex": C1 }, children: e.map((i) => p(pn, { ...i }, i.id)) }),
|
|
1019
|
+
}, un = ({ snackbarList: e }) => p("div", { className: "react-paint-editor-snackbar-container", style: { "--react-paint-editor-snackbar-zindex": C1 }, children: e.map((i) => p(pn, { ...i }, i.id)) }), Y = Fi.forwardRef((e, i) => {
|
|
1019
1020
|
if (e.type === "file" || e.type === "color") {
|
|
1020
|
-
const { hidden: d = !1, disabled: c = !1, selected: u = !1, icon: g, children: f, className:
|
|
1021
|
-
return
|
|
1021
|
+
const { hidden: d = !1, disabled: c = !1, selected: u = !1, icon: g, children: f, className: x = "", title: w, onClick: Q, ...L } = e;
|
|
1022
|
+
return R("label", { className: `react-paint-editor-button ${x}`, title: w, onClick: Q, "data-disabled": +c, "data-selected": +u, "data-hidden": +d, children: [p("input", { ref: i, disabled: c, ...L }), R("span", { className: "react-paint-editor-button-content", children: [f && p("span", { className: "react-paint-editor-button-children", children: f }), g && p("span", { className: "react-paint-editor-button-icon", dangerouslySetInnerHTML: { __html: g } })] })] });
|
|
1022
1023
|
}
|
|
1023
1024
|
const { hidden: t = !1, disabled: n = !1, selected: s = !1, icon: a, children: r, type: o = "button", className: l = "", ...h } = e;
|
|
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:
|
|
1025
|
-
}), et = ({ children: e, title: i = "", className: t = "", position: n = "bottom", fitContainer: s = !1, alignment: a = "center" }) =>
|
|
1025
|
+
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: R("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 } })] }) });
|
|
1026
|
+
}), et = ({ children: e, title: i = "", className: t = "", position: n = "bottom", fitContainer: s = !1, alignment: a = "center" }) => R("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) => {
|
|
1026
1027
|
switch (e) {
|
|
1027
1028
|
case "brush":
|
|
1028
1029
|
return Ii;
|
|
@@ -1046,128 +1047,128 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1046
1047
|
return "";
|
|
1047
1048
|
}
|
|
1048
1049
|
}, vn = ({ disabled: e = !1, shape: i, selected: t, layoutDragging: n, toggleShapeVisibility: s, toggleShapeLock: a, setLayoutDragging: r, handleRemove: o, handleSelect: l, onMoveShapes: h }) => {
|
|
1049
|
-
const d =
|
|
1050
|
-
const [b, k] =
|
|
1051
|
-
return
|
|
1052
|
-
|
|
1053
|
-
}, [
|
|
1050
|
+
const d = J(null), { isOver: c } = (({ disabled: u = !1, ref: g, shape: f, layoutDragging: x, setLayoutDragging: w, handleSelect: Q, onMoveShapes: L }) => {
|
|
1051
|
+
const [b, k] = $(!1);
|
|
1052
|
+
return G(() => {
|
|
1053
|
+
x || k(!1);
|
|
1054
|
+
}, [x]), G(() => {
|
|
1054
1055
|
const P = g.current;
|
|
1055
1056
|
if (!P) return;
|
|
1056
1057
|
const E = () => {
|
|
1057
|
-
|
|
1058
|
+
w(void 0);
|
|
1058
1059
|
}, H = (y) => (y.preventDefault && y.preventDefault(), !1), T = (y) => {
|
|
1059
|
-
|
|
1060
|
+
Q(f), y.dataTransfer && (y.dataTransfer.effectAllowed = "move", y.dataTransfer.setData("draggableShapeId", f.id), w(f.id));
|
|
1060
1061
|
}, C = () => {
|
|
1061
|
-
|
|
1062
|
+
x !== f.id && k(!0);
|
|
1062
1063
|
}, V = () => {
|
|
1063
1064
|
k(!1);
|
|
1064
|
-
},
|
|
1065
|
-
return u || (P.addEventListener("dragstart", T), P.addEventListener("dragend", E), P.addEventListener("dragover", H), P.addEventListener("dragenter", C), P.addEventListener("dragleave", V), P.addEventListener("drop",
|
|
1066
|
-
u || (P.removeEventListener("dragstart", T), P.removeEventListener("dragend", E), P.removeEventListener("dragover", H), P.removeEventListener("dragenter", C), P.removeEventListener("dragleave", V), P.removeEventListener("drop",
|
|
1065
|
+
}, I = (y) => (y.stopPropagation(), y.dataTransfer && L(y.dataTransfer.getData("draggableShapeId"), f.id), !1);
|
|
1066
|
+
return u || (P.addEventListener("dragstart", T), P.addEventListener("dragend", E), P.addEventListener("dragover", H), P.addEventListener("dragenter", C), P.addEventListener("dragleave", V), P.addEventListener("drop", I)), () => {
|
|
1067
|
+
u || (P.removeEventListener("dragstart", T), P.removeEventListener("dragend", E), P.removeEventListener("dragover", H), P.removeEventListener("dragenter", C), P.removeEventListener("dragleave", V), P.removeEventListener("drop", I));
|
|
1067
1068
|
};
|
|
1068
|
-
}, [u, g, f,
|
|
1069
|
+
}, [u, g, f, w, Q, L, x]), { isOver: b };
|
|
1069
1070
|
})({ disabled: e, ref: d, shape: i, layoutDragging: n, setLayoutDragging: r, handleSelect: l, onMoveShapes: h });
|
|
1070
|
-
return
|
|
1071
|
+
return R("div", { className: "react-paint-editor-layout", "data-disabled": +e, draggable: !e, "data-is-dragging": +(n === i.id), "data-is-over": +c, onClick: (u) => {
|
|
1071
1072
|
e || (u.preventDefault(), u.stopPropagation(), l(i));
|
|
1072
|
-
}, "data-selected": +t, ref: d, children: [p("span", { dangerouslySetInnerHTML: { __html: gn(i.type) } }), p("span", { children: i.id }), p("div", { className: "react-paint-editor-layouts-separator" }), p(
|
|
1073
|
+
}, "data-selected": +t, ref: d, children: [p("span", { dangerouslySetInnerHTML: { __html: gn(i.type) } }), p("span", { children: i.id }), p("div", { className: "react-paint-editor-layouts-separator" }), p(Y, { className: "react-paint-editor-layouts-visible-button", title: i.visible ? "Hide" : "Show", "data-visible": i.visible !== !1, disabled: e, selected: t, onClick: (u) => {
|
|
1073
1074
|
e || (u.preventDefault(), u.stopPropagation(), s(i));
|
|
1074
|
-
}, icon: i.visible === !1 ? '<svg><path d="M13.521 11.021 12.25 9.75Q12.333 8.75 11.604 7.979Q10.875 7.208 9.812 7.312L8.542 6.042Q8.896 5.896 9.26 5.833Q9.625 5.771 10 5.771Q11.583 5.771 12.688 6.875Q13.792 7.979 13.792 9.562Q13.792 9.979 13.719 10.354Q13.646 10.729 13.521 11.021ZM16.167 13.646 14.917 12.417Q15.667 11.833 16.25 11.146Q16.833 10.458 17.25 9.562Q16.229 7.479 14.292 6.281Q12.354 5.083 10 5.083Q9.396 5.083 8.885 5.156Q8.375 5.229 7.875 5.375L6.5 4Q7.354 3.646 8.208 3.49Q9.062 3.333 10 3.333Q13.146 3.333 15.615 5.052Q18.083 6.771 19.167 9.562Q18.688 10.792 17.917 11.823Q17.146 12.854 16.167 13.646ZM16.396 18.854 12.938 15.396Q12.208 15.625 11.479 15.729Q10.75 15.833 10 15.833Q6.833 15.833 4.375 14.094Q1.917 12.354 0.833 9.562Q1.25 8.479 1.917 7.552Q2.583 6.625 3.417 5.875L1.125 3.562L2.375 2.354L17.625 17.625ZM4.604 7.062Q4.021 7.604 3.542 8.219Q3.062 8.833 2.729 9.562Q3.75 11.646 5.688 12.865Q7.625 14.083 10 14.083Q10.354 14.083 10.74 14.052Q11.125 14.021 11.479 13.938L10.812 13.271Q10.625 13.312 10.417 13.333Q10.208 13.354 10 13.354Q8.417 13.354 7.312 12.25Q6.208 11.146 6.208 9.562Q6.208 9.354 6.24 9.167Q6.271 8.979 6.312 8.771ZM11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875ZM8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Z"/></svg>' : '<svg><path d="M10 13.354Q11.583 13.354 12.688 12.25Q13.792 11.146 13.792 9.562Q13.792 7.979 12.688 6.875Q11.583 5.771 10 5.771Q8.417 5.771 7.312 6.875Q6.208 7.979 6.208 9.562Q6.208 11.146 7.312 12.25Q8.417 13.354 10 13.354ZM10 11.812Q9.062 11.812 8.406 11.156Q7.75 10.5 7.75 9.562Q7.75 8.625 8.406 7.969Q9.062 7.312 10 7.312Q10.938 7.312 11.594 7.969Q12.25 8.625 12.25 9.562Q12.25 10.5 11.594 11.156Q10.938 11.812 10 11.812ZM10 15.833Q6.938 15.833 4.448 14.125Q1.958 12.417 0.833 9.562Q1.958 6.708 4.458 5.021Q6.958 3.333 10 3.333Q13.042 3.333 15.542 5.021Q18.042 6.708 19.167 9.562Q18.042 12.417 15.552 14.125Q13.062 15.833 10 15.833ZM10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562ZM10 14.083Q12.333 14.083 14.281 12.865Q16.229 11.646 17.25 9.562Q16.229 7.479 14.281 6.281Q12.333 5.083 10 5.083Q7.667 5.083 5.708 6.281Q3.75 7.479 2.729 9.562Q3.75 11.646 5.708 12.865Q7.667 14.083 10 14.083Z"/></svg>' }), p(
|
|
1075
|
+
}, icon: i.visible === !1 ? '<svg><path d="M13.521 11.021 12.25 9.75Q12.333 8.75 11.604 7.979Q10.875 7.208 9.812 7.312L8.542 6.042Q8.896 5.896 9.26 5.833Q9.625 5.771 10 5.771Q11.583 5.771 12.688 6.875Q13.792 7.979 13.792 9.562Q13.792 9.979 13.719 10.354Q13.646 10.729 13.521 11.021ZM16.167 13.646 14.917 12.417Q15.667 11.833 16.25 11.146Q16.833 10.458 17.25 9.562Q16.229 7.479 14.292 6.281Q12.354 5.083 10 5.083Q9.396 5.083 8.885 5.156Q8.375 5.229 7.875 5.375L6.5 4Q7.354 3.646 8.208 3.49Q9.062 3.333 10 3.333Q13.146 3.333 15.615 5.052Q18.083 6.771 19.167 9.562Q18.688 10.792 17.917 11.823Q17.146 12.854 16.167 13.646ZM16.396 18.854 12.938 15.396Q12.208 15.625 11.479 15.729Q10.75 15.833 10 15.833Q6.833 15.833 4.375 14.094Q1.917 12.354 0.833 9.562Q1.25 8.479 1.917 7.552Q2.583 6.625 3.417 5.875L1.125 3.562L2.375 2.354L17.625 17.625ZM4.604 7.062Q4.021 7.604 3.542 8.219Q3.062 8.833 2.729 9.562Q3.75 11.646 5.688 12.865Q7.625 14.083 10 14.083Q10.354 14.083 10.74 14.052Q11.125 14.021 11.479 13.938L10.812 13.271Q10.625 13.312 10.417 13.333Q10.208 13.354 10 13.354Q8.417 13.354 7.312 12.25Q6.208 11.146 6.208 9.562Q6.208 9.354 6.24 9.167Q6.271 8.979 6.312 8.771ZM11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875Q11.375 8.875 11.375 8.875ZM8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Q8.042 10.5 8.042 10.5Z"/></svg>' : '<svg><path d="M10 13.354Q11.583 13.354 12.688 12.25Q13.792 11.146 13.792 9.562Q13.792 7.979 12.688 6.875Q11.583 5.771 10 5.771Q8.417 5.771 7.312 6.875Q6.208 7.979 6.208 9.562Q6.208 11.146 7.312 12.25Q8.417 13.354 10 13.354ZM10 11.812Q9.062 11.812 8.406 11.156Q7.75 10.5 7.75 9.562Q7.75 8.625 8.406 7.969Q9.062 7.312 10 7.312Q10.938 7.312 11.594 7.969Q12.25 8.625 12.25 9.562Q12.25 10.5 11.594 11.156Q10.938 11.812 10 11.812ZM10 15.833Q6.938 15.833 4.448 14.125Q1.958 12.417 0.833 9.562Q1.958 6.708 4.458 5.021Q6.958 3.333 10 3.333Q13.042 3.333 15.542 5.021Q18.042 6.708 19.167 9.562Q18.042 12.417 15.552 14.125Q13.062 15.833 10 15.833ZM10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562Q10 9.562 10 9.562ZM10 14.083Q12.333 14.083 14.281 12.865Q16.229 11.646 17.25 9.562Q16.229 7.479 14.281 6.281Q12.333 5.083 10 5.083Q7.667 5.083 5.708 6.281Q3.75 7.479 2.729 9.562Q3.75 11.646 5.708 12.865Q7.667 14.083 10 14.083Z"/></svg>' }), p(Y, { className: "react-paint-editor-layouts-locked-button", title: i.locked ? "Locked" : "Unlocked", "data-locked": !!i.locked, disabled: e, selected: t, onClick: (u) => {
|
|
1075
1076
|
e || (u.preventDefault(), u.stopPropagation(), a(i));
|
|
1076
|
-
}, icon: i.locked ? '<svg><path d="M10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H5.792V5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833ZM10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042V6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>' : '<svg><path d="M5.792 5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>' }), p(
|
|
1077
|
+
}, icon: i.locked ? '<svg><path d="M10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H5.792V5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833ZM10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042V6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>' : '<svg><path d="M5.792 5.042Q5.792 3.271 7.01 2.052Q8.229 0.833 10 0.833Q11.771 0.833 12.99 2.052Q14.208 3.271 14.208 5.042V6.667H14.917Q15.646 6.667 16.156 7.177Q16.667 7.688 16.667 8.417V16.562Q16.667 17.292 16.156 17.812Q15.646 18.333 14.917 18.333H5.083Q4.354 18.333 3.844 17.812Q3.333 17.292 3.333 16.562V8.417Q3.333 7.688 3.844 7.177Q4.354 6.667 5.083 6.667H12.458V5.042Q12.458 4.021 11.74 3.302Q11.021 2.583 10 2.583Q8.979 2.583 8.26 3.302Q7.542 4.021 7.542 5.042ZM5.083 16.583H14.917Q14.917 16.583 14.917 16.583Q14.917 16.583 14.917 16.583V8.417Q14.917 8.417 14.917 8.417Q14.917 8.417 14.917 8.417H5.083Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583ZM10 10.812Q9.292 10.812 8.802 11.302Q8.312 11.792 8.312 12.5Q8.312 13.208 8.802 13.698Q9.292 14.188 10 14.188Q10.708 14.188 11.198 13.698Q11.688 13.208 11.688 12.5Q11.688 11.792 11.198 11.302Q10.708 10.812 10 10.812ZM5.083 8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417V16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583Q5.083 16.583 5.083 16.583V8.417Q5.083 8.417 5.083 8.417Q5.083 8.417 5.083 8.417Z"/></svg>' }), p(Y, { className: "react-paint-editor-layouts-remove-button", title: "Remove", disabled: e, onClick: (u) => {
|
|
1077
1078
|
e || (u.preventDefault(), u.stopPropagation(), o(i));
|
|
1078
1079
|
}, icon: Wi })] });
|
|
1079
1080
|
}, fn = ({ gridFormat: e, setGridFormat: i, disabled: t = !1, shapes: n, removeShape: s, toggleShapeVisibility: a, toggleShapeLock: r, selectedShape: o, moveShapes: l, selectShape: h, isLayoutPanelShown: d }) => {
|
|
1080
|
-
const [c, u] =
|
|
1081
|
-
return d ? p(et, { alignment: "right", className: "react-paint-editor-layouts-panel", children: p("div", { className: "react-paint-editor-layouts-panel-content", children:
|
|
1082
|
-
}, Yt = ({ children: e, onClose: i, position: t = "center", className: n = "" }) =>
|
|
1083
|
-
const [h] =
|
|
1084
|
-
return a.length ?
|
|
1081
|
+
const [c, u] = $(void 0);
|
|
1082
|
+
return d ? p(et, { alignment: "right", className: "react-paint-editor-layouts-panel", children: p("div", { className: "react-paint-editor-layouts-panel-content", children: R("div", { className: "react-paint-editor-layouts-scrolling-content", children: [R("div", { className: "react-paint-editor-layouts-row", children: [p("span", { className: "react-paint-editor-layouts-subtitle", children: "Grid" }), p(Y, { 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(Y, { 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;
|
|
1083
|
+
}, Yt = ({ children: e, onClose: i, position: t = "center", className: n = "" }) => R("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 }) => {
|
|
1084
|
+
const [h] = $(re("settings_")), d = e === h;
|
|
1085
|
+
return a.length ? R(pe, { children: [p(Y, { selected: d, title: t, disabled: s, onClick: () => {
|
|
1085
1086
|
i((c) => c === h ? void 0 : h);
|
|
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:
|
|
1087
|
+
}, 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: R("div", { className: "react-paint-editor-colorfield-wrapper", children: [a.map((c, u) => p(Y, { title: c, selected: c === o, color: c, icon: c === "transparent" ? n === "fill" ? ii : ti : void 0, onClick: () => {
|
|
1087
1088
|
l(r, c);
|
|
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(
|
|
1089
|
+
}, 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(Y, { type: "color", title: "Custom color", selected: !a.includes(o), value: o, onChange: (c) => {
|
|
1089
1090
|
const u = +c.target.value;
|
|
1090
1091
|
l(r, Number.isNaN(u) ? c.target.value : u);
|
|
1091
1092
|
}, children: p("div", { className: "react-paint-editor-colorfield-customcolor", style: { "--react-paint-editor-colorfield-color-value": a.includes(o) ? "var(--react-paint-editor-app-font-color)" : o }, children: p("span", { dangerouslySetInnerHTML: { __html: '<svg><path d="M9.958 18.333Q8.25 18.333 6.74 17.677Q5.229 17.021 4.104 15.885Q2.979 14.75 2.323 13.229Q1.667 11.708 1.667 10Q1.667 8.271 2.333 6.75Q3 5.229 4.156 4.104Q5.312 2.979 6.854 2.323Q8.396 1.667 10.125 1.667Q11.771 1.667 13.26 2.25Q14.75 2.833 15.875 3.854Q17 4.875 17.667 6.26Q18.333 7.646 18.333 9.25Q18.333 11.688 16.792 12.948Q15.25 14.208 13.188 14.208H11.75Q11.625 14.208 11.562 14.281Q11.5 14.354 11.5 14.458Q11.5 14.688 11.812 15.219Q12.125 15.75 12.125 16.458Q12.125 17.458 11.51 17.896Q10.896 18.333 9.958 18.333ZM5.458 10.875Q6 10.875 6.375 10.5Q6.75 10.125 6.75 9.583Q6.75 9.042 6.375 8.667Q6 8.292 5.458 8.292Q4.917 8.292 4.542 8.667Q4.167 9.042 4.167 9.583Q4.167 10.125 4.542 10.5Q4.917 10.875 5.458 10.875ZM7.917 7.583Q8.458 7.583 8.833 7.208Q9.208 6.833 9.208 6.292Q9.208 5.75 8.833 5.375Q8.458 5 7.917 5Q7.375 5 7 5.375Q6.625 5.75 6.625 6.292Q6.625 6.833 7 7.208Q7.375 7.583 7.917 7.583ZM12.021 7.583Q12.562 7.583 12.938 7.208Q13.312 6.833 13.312 6.292Q13.312 5.75 12.938 5.375Q12.562 5 12.021 5Q11.479 5 11.104 5.375Q10.729 5.75 10.729 6.292Q10.729 6.833 11.104 7.208Q11.479 7.583 12.021 7.583ZM14.479 10.875Q15.021 10.875 15.396 10.5Q15.771 10.125 15.771 9.583Q15.771 9.042 15.396 8.667Q15.021 8.292 14.479 8.292Q13.938 8.292 13.562 8.667Q13.188 9.042 13.188 9.583Q13.188 10.125 13.562 10.5Q13.938 10.875 14.479 10.875Z"/></svg>' } }) }) })] }) })] }) : null;
|
|
1092
|
-
}, mn = ({ disabled: e = !1, selectedShape: i, removeShape: t }) => p(
|
|
1093
|
+
}, mn = ({ disabled: e = !1, selectedShape: i, removeShape: t }) => p(Y, { title: "Delete", disabled: e, "data-disabled": +e, onClick: () => {
|
|
1093
1094
|
t(i);
|
|
1094
1095
|
}, icon: Wi }), jt = ({ CustomOption: e, selectedSettings: i, setSelectedSettings: t, title: n = "Choisissez l'option", disabled: s = !1, field: a, icon: r, values: o, defaultValue: l, valueChanged: h }) => {
|
|
1095
|
-
const [d] =
|
|
1096
|
-
return o.length ?
|
|
1096
|
+
const [d] = $(re("settings_")), c = i === d;
|
|
1097
|
+
return o.length ? R(pe, { children: [p(Y, { selected: c, title: n, icon: r, disabled: s, onClick: () => {
|
|
1097
1098
|
t((u) => u === d ? void 0 : d);
|
|
1098
|
-
} }), c && p(et, { title: n, alignment: "left", fitContainer: !0, children: p("div", { className: "react-paint-editor-selectfield-wrapper", children: o.map((u) => p(
|
|
1099
|
+
} }), c && p(et, { title: n, alignment: "left", fitContainer: !0, children: p("div", { className: "react-paint-editor-selectfield-wrapper", children: o.map((u) => p(Y, { title: `${u}`, onClick: () => ((g) => {
|
|
1099
1100
|
h(a, g);
|
|
1100
1101
|
})(u), selected: l === u, style: { "--react-paint-editor-button-padding": "16px" }, children: p(e, { children: u }) }, u)) }) })] }) : null;
|
|
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(
|
|
1102
|
-
const u = Math.round(r), [g] =
|
|
1103
|
-
|
|
1102
|
+
}, 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(Y, { 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 }) => R("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 }) => R("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 }) => {
|
|
1103
|
+
const u = Math.round(r), [g] = $(re("settings_")), f = J(null);
|
|
1104
|
+
G(() => () => {
|
|
1104
1105
|
f.current && clearTimeout(f.current);
|
|
1105
1106
|
}, []);
|
|
1106
|
-
const
|
|
1107
|
-
return o === l ? null :
|
|
1108
|
-
i((
|
|
1109
|
-
} }),
|
|
1110
|
-
const
|
|
1111
|
-
c(a, Number.isNaN(
|
|
1112
|
-
c(a, Number.isNaN(
|
|
1107
|
+
const x = e === g;
|
|
1108
|
+
return o === l ? null : R(pe, { children: [p(Y, { selected: x, title: t, disabled: s, icon: n, onClick: () => {
|
|
1109
|
+
i((w) => w === g ? void 0 : g);
|
|
1110
|
+
} }), x && p(et, { title: t, alignment: "left", fitContainer: !0, children: p("div", { children: R("label", { className: "react-paint-editor-rangefield", children: [p("input", { type: "range", min: o, max: l, step: h, value: r, onChange: (w) => {
|
|
1111
|
+
const Q = +w.target.value;
|
|
1112
|
+
c(a, Number.isNaN(Q) ? w.target.value : Q, !1), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
|
|
1113
|
+
c(a, Number.isNaN(Q) ? w.target.value : Q, !0);
|
|
1113
1114
|
}, 1e3);
|
|
1114
|
-
} }),
|
|
1115
|
+
} }), R("span", { children: [u, d] })] }) }) })] });
|
|
1115
1116
|
}, Ei = ({ selectedSettings: e, setSelectedSettings: i, disabled: t = !1, min: n, max: s, step: a, value: r, valueChanged: o }) => n === s ? null : p(at, { selectedSettings: e, setSelectedSettings: i, icon: Wt, title: "Nombre de points", disabled: t, field: "pointsCount", min: n, max: s, step: a, unity: "", value: r, valueChanged: o }), ht = ({ setSelectedSettings: e, disabled: i = !1, field: t, icon: n, values: s, value: a = !1, valueChanged: r }) => {
|
|
1116
|
-
const [o] =
|
|
1117
|
-
return s.length !== 2 ? null : p(
|
|
1117
|
+
const [o] = $(re("settings_"));
|
|
1118
|
+
return s.length !== 2 ? null : p(Y, { onClick: () => {
|
|
1118
1119
|
e((l) => l === o ? void 0 : o), r(t, !a);
|
|
1119
1120
|
}, selected: a, disabled: i, icon: n });
|
|
1120
|
-
}, At = ({ activeTool: e, selectedShape: i, selectedShapeTool: t, disabled: n, selectedSettings: s, setSelectedSettings: a, handleShapeStyleChange: r, handlePolygonLinesCount: o, handleShapeFontFamilyChange: l }) => i ? p(pe, { children: t &&
|
|
1121
|
-
const [u, g] =
|
|
1122
|
-
|
|
1123
|
-
},
|
|
1124
|
-
o ? (d(ot(
|
|
1121
|
+
}, At = ({ activeTool: e, selectedShape: i, selectedShapeTool: t, disabled: n, selectedSettings: s, setSelectedSettings: a, handleShapeStyleChange: r, handlePolygonLinesCount: o, handleShapeFontFamilyChange: l }) => i ? p(pe, { children: t && R(pe, { children: ["strokeColor" in t.settings && !t.settings.strokeColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur du trait", mode: "stroke", disabled: n, field: "strokeColor", value: i.style?.strokeColor, valueChanged: r, values: t.settings.strokeColor.values }), "fillColor" in t.settings && !t.settings.fillColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur de fond", disabled: n, field: "fillColor", value: i.style?.fillColor, valueChanged: r, values: t.settings.fillColor.values }), "lineWidth" in t.settings && !t.settings.lineWidth.hidden && p(at, { selectedSettings: s, setSelectedSettings: a, title: "Epaisseur du trait", icon: ei, disabled: n, field: "lineWidth", value: i.style?.lineWidth, valueChanged: r, unity: "px", min: t.settings.lineWidth.min, max: t.settings.lineWidth.max, step: t.settings.lineWidth.step }), "lineDash" in t.settings && !t.settings.lineDash.hidden && p(Zi, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: i.style?.lineDash, valueChanged: r, values: t.settings.lineDash.values }), "lineArrow" in t.settings && !t.settings.lineArrow.hidden && p(Ai, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: i.style?.lineArrow, valueChanged: r, values: t.settings.lineArrow.values }), "pointsCount" in t.settings && !t.settings.pointsCount.hidden && p(Ei, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: o, min: t.settings.pointsCount.min, max: t.settings.pointsCount.max, step: t.settings.pointsCount.step, value: i.style?.pointsCount }), "fontFamily" in t.settings && !t.settings.fontFamily.hidden && p(Ti, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: l, values: t.settings.fontFamily.values, defaultValue: i.style?.fontFamily }), "fontBold" in t.settings && !t.settings.fontBold.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontBold", icon: Jt, valueChanged: l, values: t.settings.fontBold.values, value: i.style?.fontBold }), "fontItalic" in t.settings && !t.settings.fontItalic.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontItalic", icon: Kt, valueChanged: l, values: t.settings.fontItalic.values, value: i.style?.fontItalic }), "opacity" in t.settings && !t.settings.opacity.hidden && p(at, { selectedSettings: s, setSelectedSettings: a, title: "Opacité", icon: qt, min: t.settings.opacity.min, max: t.settings.opacity.max, step: t.settings.opacity.step, unity: "%", disabled: n, field: "opacity", value: i.style?.opacity ?? 100, valueChanged: r })] }) }) : "settings" in e ? R(pe, { children: ["strokeColor" in e.settings && !e.settings.strokeColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur du trait", mode: "stroke", disabled: n, field: "strokeColor", value: e.settings.strokeColor.default, valueChanged: r, values: e.settings.strokeColor.values }), "fillColor" in e.settings && !e.settings.fillColor.hidden && p(ct, { selectedSettings: s, setSelectedSettings: a, title: "Couleur de fond", disabled: n, field: "fillColor", value: e.settings.fillColor.default, valueChanged: r, values: e.settings.fillColor.values }), "lineWidth" in e.settings && !e.settings.lineWidth.hidden && p(at, { selectedSettings: s, setSelectedSettings: a, title: "Epaisseur du trait", disabled: n, field: "lineWidth", icon: ei, value: e.settings.lineWidth.default, valueChanged: r, unity: "px", min: e.settings.lineWidth.min, max: e.settings.lineWidth.max, step: e.settings.lineWidth.step }), "lineDash" in e.settings && !e.settings.lineDash.hidden && p(Zi, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: e.settings.lineDash.default, valueChanged: r, values: e.settings.lineDash.values }), "lineArrow" in e.settings && !e.settings.lineArrow.hidden && p(Ai, { selectedSettings: s, setSelectedSettings: a, disabled: n, defaultValue: e.settings.lineArrow.default, valueChanged: r, values: e.settings.lineArrow.values }), "pointsCount" in e.settings && !e.settings.pointsCount.hidden && p(Ei, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: o, min: e.settings.pointsCount.min, max: e.settings.pointsCount.max, step: e.settings.pointsCount.step, value: e.settings.pointsCount.default }), "fontFamily" in e.settings && !e.settings.fontFamily.hidden && p(Ti, { selectedSettings: s, setSelectedSettings: a, disabled: n, valueChanged: l, values: e.settings.fontFamily.values, defaultValue: e.settings.fontFamily.default }), "fontBold" in e.settings && !e.settings.fontBold.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontBold", icon: Jt, valueChanged: l, values: e.settings.fontBold.values, value: e.settings.fontBold.default }), "fontItalic" in e.settings && !e.settings.fontItalic.hidden && p(ht, { setSelectedSettings: a, disabled: n, field: "fontItalic", icon: Kt, valueChanged: l, values: e.settings.fontItalic.values, value: e.settings.fontItalic.default }), "opacity" in e.settings && !e.settings.opacity.hidden && p(at, { selectedSettings: s, setSelectedSettings: a, title: "Opacité", icon: qt, min: e.settings.opacity.min, max: e.settings.opacity.max, step: e.settings.opacity.step, unity: "%", disabled: n, field: "opacity", value: e.settings.opacity.default, valueChanged: r })] }) : null, Cn = ({ width: e, disabled: i = !1, availableTools: t, updateToolSettings: n, layersManipulation: s, toggleLayoutPanel: a, activeTool: r, selectedShape: o, canvas: l, settings: h, updateShape: d, removeShape: c }) => {
|
|
1122
|
+
const [u, g] = $(void 0), [f, x] = $(!1), w = () => {
|
|
1123
|
+
x((H) => !H);
|
|
1124
|
+
}, Q = o ? t.find((H) => H.id === o.toolId) || t.find((H) => H.type === o.type) : void 0, L = (Q ? Object.keys(Q.settings).length + 1 : "settings" in r ? Object.keys(r.settings).length : 0) + (s ? 1 : 0), b = e < 40 * L, k = (H, T, C = !0) => {
|
|
1125
|
+
o ? (d(ot(de(["style", H], T, o), h), C), Q && n(Q.id, H, T)) : n(r.id, H, T);
|
|
1125
1126
|
}, P = (H, T) => {
|
|
1126
1127
|
if (o) {
|
|
1127
1128
|
if (o.type !== "text") return;
|
|
1128
1129
|
const C = l?.getContext("2d");
|
|
1129
1130
|
if (!C) return;
|
|
1130
|
-
const V =
|
|
1131
|
-
d(y, !0),
|
|
1131
|
+
const V = de(["style", H], T, o), I = Gt(C, V.value, V.width, V.style?.fontBold ?? !1, V.style?.fontItalic ?? !1, V.style?.fontFamily), y = ot({ ...V, fontSize: I, height: I * V.value.length }, h);
|
|
1132
|
+
d(y, !0), Q && n(Q.id, H, T);
|
|
1132
1133
|
} else n(r.id, H, T);
|
|
1133
1134
|
}, E = (H, T) => {
|
|
1134
1135
|
if (o) {
|
|
1135
1136
|
if (o.type !== "polygon" && o.type !== "curve") return;
|
|
1136
|
-
d(o.type === "polygon" ? ((C, V,
|
|
1137
|
+
d(o.type === "polygon" ? ((C, V, I) => {
|
|
1137
1138
|
const y = C.points.length;
|
|
1138
1139
|
if (y === V) return C;
|
|
1139
1140
|
if (y > V) {
|
|
1140
1141
|
const Z = C.points.slice(0, V);
|
|
1141
|
-
return _e({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } },
|
|
1142
|
+
return _e({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } }, I);
|
|
1142
1143
|
}
|
|
1143
1144
|
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)];
|
|
1144
|
-
return _e({ ...C, points: A, style: { ...C.style, pointsCount: A.length } },
|
|
1145
|
-
})(o, T, h) : ((C, V,
|
|
1145
|
+
return _e({ ...C, points: A, style: { ...C.style, pointsCount: A.length } }, I);
|
|
1146
|
+
})(o, T, h) : ((C, V, I) => {
|
|
1146
1147
|
const y = C.points.length;
|
|
1147
1148
|
if (y === V) return C;
|
|
1148
1149
|
if (y > V) {
|
|
1149
1150
|
const Z = C.points.slice(0, V);
|
|
1150
|
-
return qe({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } },
|
|
1151
|
+
return qe({ ...C, points: Z, style: { ...C.style, pointsCount: Z.length } }, I);
|
|
1151
1152
|
}
|
|
1152
1153
|
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)];
|
|
1153
|
-
return qe({ ...C, points: A, style: { ...C.style, pointsCount: A.length } },
|
|
1154
|
-
})(o, T, h), !0),
|
|
1154
|
+
return qe({ ...C, points: A, style: { ...C.style, pointsCount: A.length } }, I);
|
|
1155
|
+
})(o, T, h), !0), Q && n(Q.id, H, T);
|
|
1155
1156
|
} else n(r.id, H, T);
|
|
1156
1157
|
};
|
|
1157
|
-
return
|
|
1158
|
+
return R(pe, { children: [R("div", { className: "react-paint-editor-settings-bar", children: [R("div", { className: "react-paint-editor-settings-shrinkable", children: [b && L > 2 && p(Y, { disabled: i, onClick: w, title: "Toggle settings", icon: '<svg><path d="M2.5 15.833V14.083H7.667V15.833ZM2.5 5.917V4.167H10.771V5.917ZM9.208 17.5V12.438H10.958V14.083H17.5V15.833H10.958V17.5ZM5.917 12.542V10.875H2.5V9.125H5.917V7.479H7.667V12.542ZM9.208 10.875V9.125H17.5V10.875ZM12.333 7.562V2.5H14.083V4.167H17.5V5.917H14.083V7.562Z"/></svg>' }), o ? p(pe, { children: Q && R(pe, { children: [!b && p(At, { activeTool: r, selectedShape: o, selectedShapeTool: Q, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P }), r.type === "selection" && p(mn, { disabled: i, selectedShape: o, removeShape: c })] }) }) : !b && p(At, { activeTool: r, selectedShape: o, selectedShapeTool: Q, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P })] }), p("div", { className: "react-paint-editor-settings-separator" }), s && p(Qn, { disabled: i, toggleLayoutPanel: a })] }), f && p(Yt, { className: "react-paint-editor-settings-modal", onClose: w, position: "bottom", children: p(At, { activeTool: r, selectedShape: o, selectedShapeTool: Q, disabled: i, selectedSettings: u, setSelectedSettings: g, handleShapeStyleChange: k, handlePolygonLinesCount: E, handleShapeFontFamilyChange: P }) })] });
|
|
1158
1159
|
}, Di = ({ disabled: e = !1, withText: i = !1, loadFile: t, type: n, img: s, accept: a }) => {
|
|
1159
|
-
const r =
|
|
1160
|
-
return p(
|
|
1160
|
+
const r = J(null);
|
|
1161
|
+
return p(Y, { ref: r, type: "file", onClick: (o) => {
|
|
1161
1162
|
o.stopPropagation(), r.current && (r.current.value = "");
|
|
1162
1163
|
}, onChange: (o) => {
|
|
1163
1164
|
const l = o.target.files?.item(0);
|
|
1164
1165
|
l && t(l);
|
|
1165
1166
|
}, accept: a, title: n.label ?? n.type, icon: s, disabled: e, children: i ? n.label : void 0 });
|
|
1166
|
-
}, ge = ({ type: e, img: i, isActive: t, withText: n = !1, disabled: s = !1, setActive: a }) => p(
|
|
1167
|
+
}, ge = ({ type: e, img: i, isActive: t, withText: n = !1, disabled: s = !1, setActive: a }) => p(Y, { disabled: s, selected: t, onClick: () => {
|
|
1167
1168
|
a(e);
|
|
1168
|
-
}, title: e.label ?? e.type, icon: i, children: n ? e.label : void 0 }), wn = ({ activeTool: e, withActionsInMenu: i, hasActionToUndo: t = !1, hasActionToRedo: n = !1, hasActionToClear: s = !1, undoAction: a, redoAction: r, clearCanvas: o, alignment: l, group: h, vertical: d = !1, disabled: c = !1, withLoadAndSave: u, withExport: g, addPicture: f, loadFile:
|
|
1169
|
-
const [P, E] =
|
|
1170
|
-
return
|
|
1169
|
+
}, title: e.label ?? e.type, icon: i, children: n ? e.label : void 0 }), wn = ({ activeTool: e, withActionsInMenu: i, hasActionToUndo: t = !1, hasActionToRedo: n = !1, hasActionToClear: s = !1, undoAction: a, redoAction: r, clearCanvas: o, alignment: l, group: h, vertical: d = !1, disabled: c = !1, withLoadAndSave: u, withExport: g, addPicture: f, loadFile: x, togglePictureUrlModal: w, saveFile: Q, exportCanvasInFile: L, withUploadPicture: b, withUrlPicture: k }) => {
|
|
1170
|
+
const [P, E] = $(!1), [, H] = Ri(), T = h?.tools?.some((V) => V === e.type), C = (T ? e.icon : h.img) ?? h.title;
|
|
1171
|
+
return G(() => {
|
|
1171
1172
|
if (!P) return;
|
|
1172
1173
|
const V = () => {
|
|
1173
1174
|
E(!1);
|
|
@@ -1175,32 +1176,32 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1175
1176
|
return document.addEventListener("click", V), () => {
|
|
1176
1177
|
document.removeEventListener("click", V);
|
|
1177
1178
|
};
|
|
1178
|
-
}, [P]), i || b || k || u || g ?
|
|
1179
|
+
}, [P]), i || b || k || u || g ? R("div", { className: "react-paint-editor-toolbox-relative", children: [p(Y, { selected: T, title: h.title, disabled: c, onClick: () => {
|
|
1179
1180
|
H(() => {
|
|
1180
1181
|
E(!0);
|
|
1181
1182
|
});
|
|
1182
|
-
}, icon: C }), P && p(et, { alignment: l, position: "top", children:
|
|
1183
|
+
}, icon: C }), P && p(et, { alignment: l, position: "top", children: R("div", { className: "react-paint-editor-toolbox-panel-content", "data-vertical": +d, children: [i && R(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) => {
|
|
1183
1184
|
E(!1), await f(V);
|
|
1184
|
-
}, img: si.icon, accept: "image/png, image/gif, image/jpeg, image/svg+xml" }), k && p(
|
|
1185
|
-
E(!1),
|
|
1186
|
-
}, img: ai.icon, accept: "application/JSON" }), p(ge, { withText: !0, disabled: c, type: Lt, img: Lt.icon, isActive: e.id === Lt.id, setActive:
|
|
1185
|
+
}, img: si.icon, accept: "image/png, image/gif, image/jpeg, image/svg+xml" }), k && p(Y, { disabled: c, selected: !1, onClick: w, title: "Add picture from URL", icon: '<svg><path d="M9.188 16.542V14.938Q8.5 14.938 8.021 14.458Q7.542 13.979 7.542 13.292V12.458L3.583 8.5Q3.5 8.875 3.458 9.25Q3.417 9.625 3.417 10Q3.417 12.5 5.062 14.365Q6.708 16.229 9.188 16.542ZM14.854 14.438Q15.708 13.521 16.146 12.385Q16.583 11.25 16.583 10Q16.583 7.979 15.469 6.313Q14.354 4.646 12.479 3.917V4.229Q12.479 4.917 12 5.396Q11.521 5.875 10.833 5.875H9.188V7.521Q9.188 7.875 8.948 8.115Q8.708 8.354 8.354 8.354H6.708V10H11.646Q12 10 12.24 10.229Q12.479 10.458 12.479 10.812V13.292H13.292Q13.833 13.292 14.26 13.604Q14.688 13.917 14.854 14.438ZM10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.271 2.323 6.75Q2.979 5.229 4.104 4.104Q5.229 2.979 6.75 2.323Q8.271 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.729 17.677 13.25Q17.021 14.771 15.896 15.896Q14.771 17.021 13.25 17.677Q11.729 18.333 10 18.333Z"/></svg>', children: "Add picture from URL" }), (b || k) && u && p("hr", {}), u && R(pe, { children: [p(Di, { withText: !0, type: ai, disabled: c, loadFile: (V) => {
|
|
1186
|
+
E(!1), x(V);
|
|
1187
|
+
}, img: ai.icon, accept: "application/JSON" }), p(ge, { withText: !0, disabled: c, type: Lt, img: Lt.icon, isActive: e.id === Lt.id, setActive: Q })] }), g && p(ge, { withText: !0, disabled: c, type: kt, img: kt.icon, isActive: e.id === kt.id, setActive: L })] }) })] }) : null;
|
|
1187
1188
|
}, xn = ({ togglePictureUrlModal: e, addPicture: i }) => {
|
|
1188
|
-
const t =
|
|
1189
|
-
return
|
|
1189
|
+
const t = J(null);
|
|
1190
|
+
return G(() => {
|
|
1190
1191
|
t.current && t.current.focus();
|
|
1191
|
-
}, []), p(Yt, { className: "react-paint-editor-toolbox-pictureinput-modal", onClose: e, children:
|
|
1192
|
+
}, []), p(Yt, { className: "react-paint-editor-toolbox-pictureinput-modal", onClose: e, children: R("form", { onSubmit: async (n) => {
|
|
1192
1193
|
n.preventDefault();
|
|
1193
1194
|
const s = t.current?.value;
|
|
1194
1195
|
s && (await i(s), e());
|
|
1195
|
-
}, children: [
|
|
1196
|
+
}, children: [R("label", { children: ["URL ", p("input", { type: "text", ref: t })] }), p(Y, { onClick: e, children: "Annuler" }), p(Y, { type: "submit", selected: !0, children: "Ajouter" })] }) });
|
|
1196
1197
|
}, Mn = ({ activeTool: e, alignment: i, group: t, disabled: n = !1, setActiveToolFromId: s }) => {
|
|
1197
|
-
const a =
|
|
1198
|
+
const a = J(null), [r, o] = $(!1), [, l] = Ri(), [h, d] = $(void 0), c = (f) => {
|
|
1198
1199
|
d(f), s(f.id);
|
|
1199
1200
|
};
|
|
1200
|
-
if (
|
|
1201
|
+
if (G(() => {
|
|
1201
1202
|
if (!r) return;
|
|
1202
|
-
const f = (
|
|
1203
|
-
!o1(
|
|
1203
|
+
const f = (x) => {
|
|
1204
|
+
!o1(x, a.current) && o(!1);
|
|
1204
1205
|
};
|
|
1205
1206
|
return document.addEventListener("mousedown", f, { passive: !1 }), document.addEventListener("touchstart", f, { passive: !1 }), () => {
|
|
1206
1207
|
document.removeEventListener("mousedown", f), document.removeEventListener("touchstart", f);
|
|
@@ -1209,91 +1210,91 @@ const ui = ({ ctx: e, path: i, rect: t, offset: n, checkFill: s }) => {
|
|
|
1209
1210
|
if (!t.toolsType.length) return null;
|
|
1210
1211
|
if (t.toolsType?.length === 1) return p(ge, { disabled: n, type: t.toolsType[0], img: t.toolsType[0].icon, isActive: e.id === t.toolsType[0].id, setActive: c });
|
|
1211
1212
|
const u = t?.toolsType.find((f) => f.type === e.type) !== void 0, g = (h ? h.icon : t.toolsType?.[0]?.icon) ?? t.title;
|
|
1212
|
-
return
|
|
1213
|
+
return R("div", { className: "react-paint-editor-toolbargroup-relative", children: [p(Y, { selected: u, title: t.title, disabled: n, onClick: () => {
|
|
1213
1214
|
h ? s(h.id) : t.toolsType?.[0] && c(t.toolsType[0]), l(() => {
|
|
1214
1215
|
o(!0);
|
|
1215
1216
|
});
|
|
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,
|
|
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:
|
|
1217
|
+
}, 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, x) => p(ge, { disabled: n, type: f, img: f.icon, isActive: e.id === f.id, setActive: c }, f.id)) }) })] });
|
|
1218
|
+
}, 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: x, availableTools: w, withUrlPicture: Q, withUploadPicture: L }) => {
|
|
1218
1219
|
const b = ((M, A) => {
|
|
1219
1220
|
const Z = A.flatMap((v) => {
|
|
1220
|
-
if (typeof v != "object") return M.filter((
|
|
1221
|
-
const m = M.filter((
|
|
1221
|
+
if (typeof v != "object") return M.filter((S) => S.type === v);
|
|
1222
|
+
const m = M.filter((S) => v.toolsType.includes(S.type));
|
|
1222
1223
|
return m ? { ...v, toolsType: m } : null;
|
|
1223
1224
|
});
|
|
1224
1225
|
return $t(Z);
|
|
1225
|
-
})(
|
|
1226
|
+
})(w, kn), k = e < 40 * (5 + b.length), P = e < 40 * (2 + b.length), [E, H] = $(!1), [T, C] = $(!1), V = () => {
|
|
1226
1227
|
H((M) => !M);
|
|
1227
|
-
},
|
|
1228
|
+
}, I = (M) => {
|
|
1228
1229
|
h(M), H(!1);
|
|
1229
1230
|
}, y = (M) => {
|
|
1230
|
-
|
|
1231
|
-
}, N =
|
|
1232
|
-
return
|
|
1231
|
+
I(w.find((A) => A.id === M) ?? t);
|
|
1232
|
+
}, N = w.find((M) => M.type === t.type) !== void 0;
|
|
1233
|
+
return R(pe, { children: [R("div", { className: "react-paint-editor-toolbar-toolbox", children: [R("div", { className: "react-paint-editor-toolbar-shrinkable", children: [p(ge, { type: Ae, disabled: i, img: Ae.icon, isActive: t.id === Ae.id, setActive: I }), P ? p(Y, { 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 && R(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: () => {
|
|
1233
1234
|
C(!0);
|
|
1234
|
-
}, exportCanvasInFile:
|
|
1235
|
+
}, exportCanvasInFile: x, withUploadPicture: L, withUrlPicture: Q, withLoadAndSave: r, withExport: o, hasActionToUndo: n, hasActionToRedo: s, hasActionToClear: a, undoAction: d, redoAction: c, clearCanvas: l })] }), E && p(Yt, { className: "react-paint-editor-toolbar-modal", onClose: V, children: w.map((M, A) => M.type === "picture" ? null : p(ge, { disabled: i, type: M, img: M.icon, withText: !1, isActive: t.id === M.id, setActive: I }, M.id)) }), T && p(xn, { togglePictureUrlModal: () => {
|
|
1235
1236
|
C((M) => !M);
|
|
1236
1237
|
}, addPicture: u })] });
|
|
1237
1238
|
}, pt = { none: 0, small: 10, medium: 20, large: 40 }, Vn = { toolbarBackgroundColor: "white", dividerColor: "#36418129", fontRadius: 8, fontDisabledColor: "#3641812b", fontDisabledBackgroundColor: "transparent", fontColor: "#364181", fontBackgroundColor: "transparent", fontSelectedColor: "white", fontSelectedBackgroundColor: "#364181", fontHoverColor: "#364181", fontHoverBackgroundColor: "#afd8d8" }, Pn = () => {
|
|
1238
|
-
const e =
|
|
1239
|
-
return
|
|
1239
|
+
const e = J([]), [i, t] = $([]);
|
|
1240
|
+
return G(() => () => {
|
|
1240
1241
|
for (const n of e.current) clearTimeout(n);
|
|
1241
1242
|
}, []), { snackbarList: i, addSnackbar: ({ type: n = cn, duration: s = hn, text: a }) => {
|
|
1242
|
-
const r = { id:
|
|
1243
|
+
const r = { id: re("snackbar_"), duration: s, type: n, text: a };
|
|
1243
1244
|
t((o) => [...o, r]), e.current = [...e.current, setTimeout(() => {
|
|
1244
1245
|
return o = r.id, void t((l) => l.filter((h) => h.id !== o));
|
|
1245
1246
|
var o;
|
|
1246
1247
|
}, s)];
|
|
1247
1248
|
} };
|
|
1248
1249
|
}, En = ({ editorProps: e, className: i, style: t, options: n, children: s }) => {
|
|
1249
|
-
const { shapesRef: a, addPictureShape: r, moveShapes: o, toggleShapeVisibility: l, toggleShapeLock: h, canGoBackward: d, canGoForward: c, canClear: u, selectedShape: g, removeShape: f, updateShape:
|
|
1250
|
-
V((Re) => Re.map((tt) => tt.id ===
|
|
1250
|
+
const { shapesRef: a, addPictureShape: r, moveShapes: o, toggleShapeVisibility: l, toggleShapeLock: h, canGoBackward: d, canGoForward: c, canClear: u, selectedShape: g, removeShape: f, updateShape: x, backwardShape: w, forwardShape: Q, refs: L, width: b, height: k, canvasSize: P, selectTool: E, selectShape: H, activeTool: T, setActiveTool: C, setAvailableTools: V, isEditMode: I, isDisabled: y, availableTools: N, gridGap: M, setGridGap: A, loadFile: Z, exportPicture: v, exportData: m, clearCanvas: S, settings: W, canvas: { canGrow: z, layersManipulation: O, withExport: X, withLoadAndSave: D, withUploadPicture: U, withUrlPicture: le } } = e, { toolbarBackgroundColor: te, dividerColor: ie, fontRadius: fe, fontDisabledColor: Me, fontDisabledBackgroundColor: ne, fontColor: _, fontBackgroundColor: Se, fontSelectedColor: Ze, fontSelectedBackgroundColor: ke, fontHoverColor: me, fontHoverBackgroundColor: be } = { ...Vn, ...n }, [Ee, oe] = $(!1), [Le, Ne] = $(!1), he = M >= pt.large ? "large" : M >= pt.medium ? "medium" : M >= pt.small ? "small" : "none", { snackbarList: ye, addSnackbar: ae } = Pn(), Ve = F((K, se, Be) => {
|
|
1251
|
+
V((Re) => Re.map((tt) => tt.id === K ? de(["settings", se, "default"], Be, tt) : tt)), C((Re) => Re.id === K ? de(["settings", se, "default"], Be, Re) : Re);
|
|
1251
1252
|
}, [C, V]), $e = F(() => {
|
|
1252
|
-
E(Ae),
|
|
1253
|
-
}, [E,
|
|
1254
|
-
E(Ae),
|
|
1255
|
-
}, [E,
|
|
1256
|
-
|
|
1253
|
+
E(Ae), w();
|
|
1254
|
+
}, [E, w]), Pe = F(() => {
|
|
1255
|
+
E(Ae), Q();
|
|
1256
|
+
}, [E, Q]), Ue = F(() => {
|
|
1257
|
+
oe(!0);
|
|
1257
1258
|
try {
|
|
1258
|
-
v(),
|
|
1259
|
-
} catch (
|
|
1260
|
-
|
|
1259
|
+
v(), oe(!1);
|
|
1260
|
+
} catch (K) {
|
|
1261
|
+
K instanceof Error && ae({ type: "error", text: "L'export a échoué" }), console.warn(K);
|
|
1261
1262
|
} finally {
|
|
1262
|
-
|
|
1263
|
+
oe(!1);
|
|
1263
1264
|
}
|
|
1264
|
-
}, [v,
|
|
1265
|
-
|
|
1265
|
+
}, [v, ae]), lt = F(() => {
|
|
1266
|
+
oe(!0);
|
|
1266
1267
|
try {
|
|
1267
|
-
m(),
|
|
1268
|
-
} catch (
|
|
1269
|
-
|
|
1268
|
+
m(), oe(!1);
|
|
1269
|
+
} catch (K) {
|
|
1270
|
+
K instanceof Error && ae({ type: "error", text: "L'enregistrement a échoué" }), console.warn(K);
|
|
1270
1271
|
} finally {
|
|
1271
|
-
|
|
1272
|
+
oe(!1);
|
|
1272
1273
|
}
|
|
1273
|
-
}, [m,
|
|
1274
|
-
|
|
1274
|
+
}, [m, ae]), Ct = F(async (K) => {
|
|
1275
|
+
oe(!0);
|
|
1275
1276
|
try {
|
|
1276
|
-
await Z(
|
|
1277
|
-
} catch (
|
|
1278
|
-
|
|
1277
|
+
await Z(K), ae({ type: "success", text: "Fichier chargé !" });
|
|
1278
|
+
} catch (se) {
|
|
1279
|
+
se instanceof Error && ae({ type: "error", text: "Le chargement a échoué" }), console.warn(se);
|
|
1279
1280
|
} finally {
|
|
1280
|
-
|
|
1281
|
+
oe(!1);
|
|
1281
1282
|
}
|
|
1282
|
-
}, [Z,
|
|
1283
|
-
|
|
1283
|
+
}, [Z, ae]), wt = F(async (K) => {
|
|
1284
|
+
oe(!0);
|
|
1284
1285
|
try {
|
|
1285
|
-
const
|
|
1286
|
-
H(
|
|
1287
|
-
} catch (
|
|
1288
|
-
|
|
1286
|
+
const se = await r(K, b, k);
|
|
1287
|
+
H(se);
|
|
1288
|
+
} catch (se) {
|
|
1289
|
+
se instanceof Error && ae({ type: "error", text: "Le chargement a échoué" }), console.warn(se);
|
|
1289
1290
|
} finally {
|
|
1290
|
-
|
|
1291
|
+
oe(!1);
|
|
1291
1292
|
}
|
|
1292
|
-
}, [r, H,
|
|
1293
|
-
return
|
|
1294
|
-
A(pt[
|
|
1295
|
-
}, disabled: y, shapes: a.current, moveShapes: o, selectedShape: g, removeShape: f, selectShape: H, toggleShapeVisibility: l, toggleShapeLock: h, isLayoutPanelShown: Le }),
|
|
1296
|
-
Ne((
|
|
1293
|
+
}, [r, H, ae, b, k]), xt = `${i ? `${i} ` : ""}${Le ? "react-paint-editor-layout-opened " : ""}react-paint-editor-app`;
|
|
1294
|
+
return R("div", { ref: L.setEditor, className: xt, style: { "--react-paint-editor-app-maxWidth": z ? "100%" : `${b}px`, "--react-paint-editor-app-toolbar-bg": te, "--react-paint-editor-app-divider-color": ie, "--react-paint-editor-app-font-radius": fe, "--react-paint-editor-app-font-disabled-color": Me, "--react-paint-editor-app-font-disabled-bg": ne, "--react-paint-editor-app-font-color": _, "--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: [I && p(Ln, { width: P.width, disabled: y, activeTool: T, clearCanvas: S, setActiveTool: E, exportCanvasInFile: Ue, saveFile: lt, loadFile: Ct, addPicture: wt, hasActionToUndo: d, hasActionToRedo: c, hasActionToClear: u, undoAction: $e, redoAction: Pe, availableTools: N, withExport: X, withLoadAndSave: D, withUploadPicture: U, withUrlPicture: le }), s, I && O && p(fn, { gridFormat: he, setGridFormat: (K) => {
|
|
1295
|
+
A(pt[K]);
|
|
1296
|
+
}, disabled: y, shapes: a.current, moveShapes: o, selectedShape: g, removeShape: f, selectShape: H, toggleShapeVisibility: l, toggleShapeLock: h, isLayoutPanelShown: Le }), I && R(pe, { children: [p(Cn, { width: P.width, disabled: y, activeTool: T, availableTools: N, selectedShape: g, settings: W, removeShape: f, updateShape: x, canvas: L.canvas.current, layersManipulation: O, toggleLayoutPanel: () => {
|
|
1297
|
+
Ne((K) => !K);
|
|
1297
1298
|
}, updateToolSettings: Ve }), p(dn, { isLoading: Ee }), p(un, { snackbarList: ye })] })] });
|
|
1298
1299
|
};
|
|
1299
1300
|
export {
|