@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/photo/PhotoEditorCanvas.js

@@ -1,93 +1,254 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { NiceIcon } from '@nice2dev/ui-core';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import cs from './PhotoEditor.module.css.js';
-
-// ── Crop Overlay (rule-of-thirds + 8 handles + size indicator) ──
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NiceIcon } from "@nice2dev/ui-core";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import cs from "./PhotoEditor.module.css.js";
 const CropOverlay = ({ api }) => {
-    const { cropMode, cropRect, mainCanvasRef, accent, handleCropMouseDown } = api;
-    if (!cropMode || !cropRect || !mainCanvasRef.current) {
-        return null;
-    }
-    const canvasEl = mainCanvasRef.current;
-    const cw = canvasEl.width;
-    const ch = canvasEl.height;
-    const left = (cropRect.x / cw) * 100;
-    const top = (cropRect.y / ch) * 100;
-    const width = (cropRect.w / cw) * 100;
-    const height = (cropRect.h / ch) * 100;
-    const handleStyle = (cursor) => ({
-        position: 'absolute',
-        width: 14,
-        height: 14,
-        background: accent,
-        border: '2px solid var(--nice-bg, #FFF)',
-        borderRadius: 3,
-        cursor,
-        zIndex: 3,
-    });
-    return (jsxs("div", { className: cs.cropOverlay, children: [jsx("div", { className: cs.cropDarkBg }), jsxs("div", { style: {
-                    position: 'absolute',
-                    left: `${left}%`,
-                    top: `${top}%`,
-                    width: `${width}%`,
-                    height: `${height}%`,
-                    background: 'transparent',
-                    boxShadow: '0 0 0 9999px var(--nice-overlay-55, rgba(0, 0, 0, 0.55))',
-                    border: `2px solid ${accent}`,
-                    pointerEvents: 'auto',
-                    cursor: 'move',
-                }, onMouseDown: (e) => handleCropMouseDown(e, 'move'), children: [jsxs("div", { className: cs.cropGridContainer, children: [[1, 2].map((i) => (jsx("div", { style: {
-                                    position: 'absolute',
-                                    left: 0,
-                                    right: 0,
-                                    top: `${(i / 3) * 100}%`,
-                                    height: 1,
-                                    background: 'var(--nice-overlay-light-30, rgba(255, 255, 255, 0.3))',
-                                } }, `h${i}`))), [1, 2].map((i) => (jsx("div", { style: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    bottom: 0,
-                                    left: `${(i / 3) * 100}%`,
-                                    width: 1,
-                                    background: 'var(--nice-overlay-light-30, rgba(255, 255, 255, 0.3))',
-                                } }, `v${i}`)))] }), jsx("div", { style: { ...handleStyle('nw-resize'), top: -7, left: -7 }, onMouseDown: (e) => handleCropMouseDown(e, 'nw') }), jsx("div", { style: { ...handleStyle('ne-resize'), top: -7, right: -7 }, onMouseDown: (e) => handleCropMouseDown(e, 'ne') }), jsx("div", { style: { ...handleStyle('sw-resize'), bottom: -7, left: -7 }, onMouseDown: (e) => handleCropMouseDown(e, 'sw') }), jsx("div", { style: { ...handleStyle('se-resize'), bottom: -7, right: -7 }, onMouseDown: (e) => handleCropMouseDown(e, 'se') }), jsx("div", { style: {
-                            ...handleStyle('n-resize'),
-                            top: -7,
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                        }, onMouseDown: (e) => handleCropMouseDown(e, 'n') }), jsx("div", { style: {
-                            ...handleStyle('s-resize'),
-                            bottom: -7,
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                        }, onMouseDown: (e) => handleCropMouseDown(e, 's') }), jsx("div", { style: {
-                            ...handleStyle('w-resize'),
-                            top: '50%',
-                            left: -7,
-                            transform: 'translateY(-50%)',
-                        }, onMouseDown: (e) => handleCropMouseDown(e, 'w') }), jsx("div", { style: {
-                            ...handleStyle('e-resize'),
-                            top: '50%',
-                            right: -7,
-                            transform: 'translateY(-50%)',
-                        }, onMouseDown: (e) => handleCropMouseDown(e, 'e') }), jsxs("div", { className: cs.cropSizeLabel, children: [Math.round(cropRect.w), " \u00D7 ", Math.round(cropRect.h)] })] })] }));
+  const { cropMode, cropRect, mainCanvasRef, accent, handleCropMouseDown } = api;
+  if (!cropMode || !cropRect || !mainCanvasRef.current) {
+    return null;
+  }
+  const canvasEl = mainCanvasRef.current;
+  const cw = canvasEl.width;
+  const ch = canvasEl.height;
+  const left = cropRect.x / cw * 100;
+  const top = cropRect.y / ch * 100;
+  const width = cropRect.w / cw * 100;
+  const height = cropRect.h / ch * 100;
+  const handleStyle = (cursor) => ({
+    position: "absolute",
+    width: 14,
+    height: 14,
+    background: accent,
+    border: "2px solid var(--nice-bg, #FFF)",
+    borderRadius: 3,
+    cursor,
+    zIndex: 3
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cs.cropOverlay, children: [
+    /* @__PURE__ */ jsx("div", { className: cs.cropDarkBg }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: `${left}%`,
+          top: `${top}%`,
+          width: `${width}%`,
+          height: `${height}%`,
+          background: "transparent",
+          boxShadow: "0 0 0 9999px var(--nice-overlay-55, rgba(0, 0, 0, 0.55))",
+          border: `2px solid ${accent}`,
+          pointerEvents: "auto",
+          cursor: "move"
+        },
+        onMouseDown: (e) => handleCropMouseDown(e, "move"),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cs.cropGridContainer, children: [
+            [1, 2].map((i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  right: 0,
+                  top: `${i / 3 * 100}%`,
+                  height: 1,
+                  background: "var(--nice-overlay-light-30, rgba(255, 255, 255, 0.3))"
+                }
+              },
+              `h${i}`
+            )),
+            [1, 2].map((i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  left: `${i / 3 * 100}%`,
+                  width: 1,
+                  background: "var(--nice-overlay-light-30, rgba(255, 255, 255, 0.3))"
+                }
+              },
+              `v${i}`
+            ))
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { ...handleStyle("nw-resize"), top: -7, left: -7 },
+              onMouseDown: (e) => handleCropMouseDown(e, "nw")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { ...handleStyle("ne-resize"), top: -7, right: -7 },
+              onMouseDown: (e) => handleCropMouseDown(e, "ne")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { ...handleStyle("sw-resize"), bottom: -7, left: -7 },
+              onMouseDown: (e) => handleCropMouseDown(e, "sw")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { ...handleStyle("se-resize"), bottom: -7, right: -7 },
+              onMouseDown: (e) => handleCropMouseDown(e, "se")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...handleStyle("n-resize"),
+                top: -7,
+                left: "50%",
+                transform: "translateX(-50%)"
+              },
+              onMouseDown: (e) => handleCropMouseDown(e, "n")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...handleStyle("s-resize"),
+                bottom: -7,
+                left: "50%",
+                transform: "translateX(-50%)"
+              },
+              onMouseDown: (e) => handleCropMouseDown(e, "s")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...handleStyle("w-resize"),
+                top: "50%",
+                left: -7,
+                transform: "translateY(-50%)"
+              },
+              onMouseDown: (e) => handleCropMouseDown(e, "w")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...handleStyle("e-resize"),
+                top: "50%",
+                right: -7,
+                transform: "translateY(-50%)"
+              },
+              onMouseDown: (e) => handleCropMouseDown(e, "e")
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cs.cropSizeLabel, children: [
+            Math.round(cropRect.w),
+            " × ",
+            Math.round(cropRect.h)
+          ] })
+        ]
+      }
+    )
+  ] });
 };
-// ── Canvas Viewport ──
 const PhotoEditorCanvas = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = useNiceTranslation();
-    const { containerRef, activeTab, zoom, accent, showCompare, comparePosition, setCompareDragging, mainCanvasRef, compareCanvasRef, handleCanvasMouseDown, handleCanvasMouseMove, handleCanvasMouseUp, } = api;
-    return (jsx("div", { ref: containerRef, className: cs.canvasViewport, style: { cursor: activeTab === 'draw' ? 'crosshair' : undefined }, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, children: jsx("div", { className: cs.zoomWrap, style: { transform: `scale(${zoom})` }, children: showCompare ? (
-            // ── Before / After comparison ──
-            jsxs("div", { className: cs.compareWrap, onMouseDown: () => setCompareDragging(true), children: [jsx("canvas", { ref: compareCanvasRef, className: cs.canvasOriginal, role: "img", "aria-label": t('photoEditorCanvas.photoEditorOriginalPreviewCanvas', 'Photo editor original preview canvas') }), jsx("div", { className: cs.compareClip, style: { width: `${comparePosition}%` }, children: jsx("canvas", { ref: mainCanvasRef, className: cs.canvasEdited, role: "img", "aria-label": t('photoEditorCanvas.photoEditorEditedPreviewCanvas', 'Photo editor edited preview canvas') }) }), jsx("div", { className: cs.compareSlider, style: {
-                            left: `${comparePosition}%`,
-                            background: accent,
-                            boxShadow: `0 0 8px ${accent}`,
-                        }, children: jsx("div", { className: cs.compareSliderKnob, style: { background: accent }, children: jsx(NiceIcon, { name: "move", size: 14, className: cs.compareSliderIcon }) }) }), jsx("div", { className: cs.compareLabelOriginal, children: t('photoEditorCanvas.original', 'Original') }), jsx("div", { className: cs.compareLabelEdited, style: { background: `${accent}cc` }, children: t('photoEditorCanvas.edited', 'Edited') })] })) : (
-            // ── Regular canvas view ──
-            jsxs("div", { className: cs.regularWrap, children: [jsx("canvas", { ref: mainCanvasRef, className: cs.canvasRegular, role: "img", "aria-label": t('photoEditorCanvas.photoEditorCanvas', 'Photo editor canvas') }), jsx(CropOverlay, { api: api })] })) }) }));
-}), { displayName: 'PhotoEditorCanvas' });
-
-export { PhotoEditorCanvas as default };
+    const {
+      containerRef,
+      activeTab,
+      zoom,
+      accent,
+      showCompare,
+      comparePosition,
+      setCompareDragging,
+      mainCanvasRef,
+      compareCanvasRef,
+      handleCanvasMouseDown,
+      handleCanvasMouseMove,
+      handleCanvasMouseUp
+    } = api;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: cs.canvasViewport,
+        style: { cursor: activeTab === "draw" ? "crosshair" : void 0 },
+        onMouseDown: handleCanvasMouseDown,
+        onMouseMove: handleCanvasMouseMove,
+        onMouseUp: handleCanvasMouseUp,
+        onMouseLeave: handleCanvasMouseUp,
+        children: /* @__PURE__ */ jsx("div", { className: cs.zoomWrap, style: { transform: `scale(${zoom})` }, children: showCompare ? (
+          // ── Before / After comparison ──
+          /* @__PURE__ */ jsxs("div", { className: cs.compareWrap, onMouseDown: () => setCompareDragging(true), children: [
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: compareCanvasRef,
+                className: cs.canvasOriginal,
+                role: "img",
+                "aria-label": t(
+                  "photoEditorCanvas.photoEditorOriginalPreviewCanvas",
+                  "Photo editor original preview canvas"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: cs.compareClip, style: { width: `${comparePosition}%` }, children: /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: mainCanvasRef,
+                className: cs.canvasEdited,
+                role: "img",
+                "aria-label": t(
+                  "photoEditorCanvas.photoEditorEditedPreviewCanvas",
+                  "Photo editor edited preview canvas"
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cs.compareSlider,
+                style: {
+                  left: `${comparePosition}%`,
+                  background: accent,
+                  boxShadow: `0 0 8px ${accent}`
+                },
+                children: /* @__PURE__ */ jsx("div", { className: cs.compareSliderKnob, style: { background: accent }, children: /* @__PURE__ */ jsx(NiceIcon, { name: "move", size: 14, className: cs.compareSliderIcon }) })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: cs.compareLabelOriginal, children: t("photoEditorCanvas.original", "Original") }),
+            /* @__PURE__ */ jsx("div", { className: cs.compareLabelEdited, style: { background: `${accent}cc` }, children: t("photoEditorCanvas.edited", "Edited") })
+          ] })
+        ) : (
+          // ── Regular canvas view ──
+          /* @__PURE__ */ jsxs("div", { className: cs.regularWrap, children: [
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: mainCanvasRef,
+                className: cs.canvasRegular,
+                role: "img",
+                "aria-label": t("photoEditorCanvas.photoEditorCanvas", "Photo editor canvas")
+              }
+            ),
+            /* @__PURE__ */ jsx(CropOverlay, { api })
+          ] })
+        ) })
+      }
+    );
+  }),
+  { displayName: "PhotoEditorCanvas" }
+);
+export {
+  PhotoEditorCanvas as default
+};