@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/vector/VectorEditorMenuBar.js

@@ -1,276 +1,336 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { NiceMenu, NiceSelect, NiceCheckbox, NiceButton } from '@nice2dev/ui';
-import { NiceIcon } from '@nice2dev/ui-core';
-import React, { useMemo } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './VectorEditor.module.css.js';
-
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { NiceMenu, NiceSelect, NiceCheckbox, NiceButton } from "@nice2dev/ui";
+import { NiceIcon } from "@nice2dev/ui-core";
+import React, { useMemo } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./VectorEditor.module.css.js";
 const VectorEditorMenuBar$1 = ({ api, hasOnSaveToLibrary, onExportIconSnippet }) => {
-    const { t } = useNiceTranslation();
-    const { selId, hasClipboard, snapGrid, fInp, shapes, boolSecondShape, newCanvas, setDlgSvg, setBoolSecondShape, exportSVG, exportPNG, exportJPG, exportWebP, exportBMP, undo, redo, duplicateShape, copyShape, pasteShape, deleteShape, bringToFront, sendToBack, flipH, flipV, alignShapes, setSnapGrid, saveToLibrary, unionShapes, subtractShapes, intersectShapes, excludeShapes, outlineStroke, } = api;
-    // Check if we can perform boolean ops (need 2 shapes selected)
-    const canBool = !!(selId && boolSecondShape && selId !== boolSecondShape);
-    const hasSel = !!selId;
-    const menuItems = useMemo(() => [
+  const { t } = useNiceTranslation();
+  const {
+    selId,
+    hasClipboard,
+    snapGrid,
+    fInp,
+    shapes,
+    boolSecondShape,
+    newCanvas,
+    setDlgSvg,
+    setBoolSecondShape,
+    exportSVG,
+    exportPNG,
+    exportJPG,
+    exportWebP,
+    exportBMP,
+    undo,
+    redo,
+    duplicateShape,
+    copyShape,
+    pasteShape,
+    deleteShape,
+    bringToFront,
+    sendToBack,
+    flipH,
+    flipV,
+    alignShapes,
+    setSnapGrid,
+    saveToLibrary,
+    unionShapes,
+    subtractShapes,
+    intersectShapes,
+    excludeShapes,
+    outlineStroke
+  } = api;
+  const canBool = !!(selId && boolSecondShape && selId !== boolSecondShape);
+  const hasSel = !!selId;
+  const menuItems = useMemo(
+    () => [
+      {
+        id: "file",
+        label: t("vectorEditor.menu.file", "File"),
+        children: [
+          {
+            id: "new",
+            label: t("vectorEditor.menu.newCanvas", "New canvas"),
+            onClick: () => newCanvas()
+          },
+          {
+            id: "open",
+            label: t("vectorEditor.menu.openSvg", "Open SVG…"),
+            onClick: () => fInp.current?.click()
+          },
+          {
+            id: "paste",
+            label: t("vectorEditor.menu.pasteSvg", "Paste SVG…"),
+            onClick: () => setDlgSvg(true)
+          },
+          { id: "sep1", divider: true },
+          {
+            id: "exp-svg",
+            label: t("vectorEditor.menu.exportSvg", "Export SVG"),
+            onClick: () => exportSVG()
+          },
+          {
+            id: "exp-png",
+            label: t("vectorEditor.menu.exportPng", "Export PNG"),
+            onClick: () => exportPNG()
+          },
+          {
+            id: "exp-jpg",
+            label: t("vectorEditor.menu.exportJpg", "Export JPG"),
+            onClick: () => exportJPG()
+          },
+          {
+            id: "exp-webp",
+            label: t("vectorEditor.menu.exportWebp", "Export WebP"),
+            onClick: () => exportWebP()
+          },
+          {
+            id: "exp-bmp",
+            label: t("vectorEditor.menu.exportBmp", "Export BMP"),
+            onClick: () => exportBMP()
+          },
+          ...hasOnSaveToLibrary ? [
+            { id: "sep2", divider: true },
+            {
+              id: "save-lib",
+              icon: /* @__PURE__ */ jsx(NiceIcon, { name: "box", size: 14 }),
+              label: t("vectorEditor.menu.saveToLibrary", "Save to Library"),
+              onClick: () => saveToLibrary()
+            }
+          ] : [],
+          ...onExportIconSnippet ? [
+            { id: "sep3", divider: true },
+            {
+              id: "export-snippet",
+              icon: /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 14 }),
+              label: t("vectorEditor.menu.exportIconSnippet", "Export Icon Snippet"),
+              onClick: () => onExportIconSnippet()
+            }
+          ] : []
+        ]
+      },
+      {
+        id: "edit",
+        label: t("vectorEditor.menu.edit", "Edit"),
+        children: [
+          {
+            id: "undo",
+            label: t("vectorEditor.menu.undo", "Undo  (Ctrl+Z)"),
+            onClick: () => undo()
+          },
+          {
+            id: "redo",
+            label: t("vectorEditor.menu.redo", "Redo  (Ctrl+Y)"),
+            onClick: () => redo()
+          },
+          { id: "sep1", divider: true },
+          {
+            id: "cut",
+            label: t("vectorEditor.menu.copy", "Copy  (Ctrl+C)"),
+            onClick: () => copyShape(),
+            disabled: !hasSel
+          },
+          {
+            id: "paste",
+            label: t("vectorEditor.menu.paste", "Paste  (Ctrl+V)"),
+            onClick: () => pasteShape(),
+            disabled: !hasClipboard
+          },
+          {
+            id: "dup",
+            label: t("vectorEditor.menu.duplicate", "Duplicate  (Ctrl+D)"),
+            onClick: () => duplicateShape(),
+            disabled: !hasSel
+          },
+          { id: "sep2", divider: true },
+          {
+            id: "del",
+            label: t("vectorEditor.menu.delete", "Delete  (Del)"),
+            onClick: () => deleteShape(),
+            disabled: !hasSel,
+            danger: true
+          }
+        ]
+      },
+      {
+        id: "object",
+        label: t("vectorEditor.menu.object", "Object"),
+        children: [
+          {
+            id: "front",
+            label: t("vectorEditor.menu.bringToFront", "Bring to Front"),
+            onClick: () => bringToFront(),
+            disabled: !hasSel
+          },
+          {
+            id: "back",
+            label: t("vectorEditor.menu.sendToBack", "Send to Back"),
+            onClick: () => sendToBack(),
+            disabled: !hasSel
+          },
+          { id: "sep1", divider: true },
+          {
+            id: "fh",
+            label: t("vectorEditor.menu.flipH", "Flip Horizontal"),
+            onClick: () => flipH(),
+            disabled: !hasSel
+          },
+          {
+            id: "fv",
+            label: t("vectorEditor.menu.flipV", "Flip Vertical"),
+            onClick: () => flipV(),
+            disabled: !hasSel
+          },
+          { id: "sep2", divider: true },
+          {
+            id: "al",
+            label: t("vectorEditor.menu.alignLeft", "Align Left"),
+            onClick: () => alignShapes("left"),
+            disabled: !hasSel
+          },
+          {
+            id: "ac",
+            label: t("vectorEditor.menu.alignCenter", "Align Center"),
+            onClick: () => alignShapes("center"),
+            disabled: !hasSel
+          },
+          {
+            id: "ar",
+            label: t("vectorEditor.menu.alignRight", "Align Right"),
+            onClick: () => alignShapes("right"),
+            disabled: !hasSel
+          }
+        ]
+      },
+      {
+        id: "path",
+        label: t("vectorEditor.menu.path", "Path"),
+        children: [
+          {
+            id: "union",
+            label: t("vectorEditor.menu.union", "Union (∪)"),
+            onClick: () => unionShapes(),
+            disabled: !canBool
+          },
+          {
+            id: "sub",
+            label: t("vectorEditor.menu.subtract", "Subtract (−)"),
+            onClick: () => subtractShapes(),
+            disabled: !canBool
+          },
+          {
+            id: "int",
+            label: t("vectorEditor.menu.intersect", "Intersect (∩)"),
+            onClick: () => intersectShapes(),
+            disabled: !canBool
+          },
+          {
+            id: "exc",
+            label: t("vectorEditor.menu.exclude", "Exclude (⊕)"),
+            onClick: () => excludeShapes(),
+            disabled: !canBool
+          },
+          { id: "sep1", divider: true },
+          {
+            id: "outline",
+            label: t("vectorEditor.menu.outlineStroke", "Outline stroke"),
+            onClick: () => outlineStroke(),
+            disabled: !hasSel
+          }
+        ]
+      },
+      {
+        id: "view",
+        label: t("vectorEditor.menu.view", "View"),
+        children: [
+          {
+            id: "snap",
+            label: t("vectorEditor.menu.snapToGrid", "Snap to grid"),
+            badge: snapGrid ? /* @__PURE__ */ jsx(NiceIcon, { name: "check", size: 14 }) : void 0,
+            onClick: () => setSnapGrid((v) => !v)
+          }
+        ]
+      }
+    ],
+    [
+      t,
+      newCanvas,
+      fInp,
+      setDlgSvg,
+      exportSVG,
+      exportPNG,
+      exportJPG,
+      exportWebP,
+      exportBMP,
+      hasOnSaveToLibrary,
+      saveToLibrary,
+      onExportIconSnippet,
+      undo,
+      redo,
+      hasSel,
+      copyShape,
+      pasteShape,
+      hasClipboard,
+      duplicateShape,
+      deleteShape,
+      bringToFront,
+      sendToBack,
+      flipH,
+      flipV,
+      alignShapes,
+      unionShapes,
+      subtractShapes,
+      intersectShapes,
+      excludeShapes,
+      outlineStroke,
+      canBool,
+      snapGrid,
+      setSnapGrid
+    ]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.menuBar, children: [
+    /* @__PURE__ */ jsx(NiceMenu, { items: menuItems, variant: "ghost", density: "compact", size: "sm", openTrigger: "click" }),
+    /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+    shapes.length >= 2 && /* @__PURE__ */ jsx(
+      NiceSelect,
+      {
+        className: styles.menuBtn,
+        value: boolSecondShape || "",
+        onChange: (val) => setBoolSecondShape(val || null),
+        options: [
+          { value: "", label: t("vectorEditor.menu.secondShape", "2nd Shape") },
+          ...shapes.filter((s) => s.id !== selId).map((s, i) => ({
+            value: s.id,
+            label: s.name ?? t("vectorEditor.shape", "Shape {i}").replace("{i}", String(i + 1))
+          }))
+        ],
+        style: { minWidth: 100 }
+      }
+    ),
+    /* @__PURE__ */ jsxs("label", { className: styles.menuLabel, children: [
+      /* @__PURE__ */ jsx(NiceCheckbox, { checked: snapGrid, onChange: () => setSnapGrid((v) => !v) }),
+      t("vectorEditor.menu.snap", "Snap")
+    ] }),
+    onExportIconSnippet && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
         {
-            id: 'file',
-            label: t('vectorEditor.menu.file', 'File'),
-            children: [
-                {
-                    id: 'new',
-                    label: t('vectorEditor.menu.newCanvas', 'New canvas'),
-                    onClick: () => newCanvas(),
-                },
-                {
-                    id: 'open',
-                    label: t('vectorEditor.menu.openSvg', 'Open SVG…'),
-                    onClick: () => { var _a; return (_a = fInp.current) === null || _a === void 0 ? void 0 : _a.click(); },
-                },
-                {
-                    id: 'paste',
-                    label: t('vectorEditor.menu.pasteSvg', 'Paste SVG…'),
-                    onClick: () => setDlgSvg(true),
-                },
-                { id: 'sep1', divider: true },
-                {
-                    id: 'exp-svg',
-                    label: t('vectorEditor.menu.exportSvg', 'Export SVG'),
-                    onClick: () => exportSVG(),
-                },
-                {
-                    id: 'exp-png',
-                    label: t('vectorEditor.menu.exportPng', 'Export PNG'),
-                    onClick: () => exportPNG(),
-                },
-                {
-                    id: 'exp-jpg',
-                    label: t('vectorEditor.menu.exportJpg', 'Export JPG'),
-                    onClick: () => exportJPG(),
-                },
-                {
-                    id: 'exp-webp',
-                    label: t('vectorEditor.menu.exportWebp', 'Export WebP'),
-                    onClick: () => exportWebP(),
-                },
-                {
-                    id: 'exp-bmp',
-                    label: t('vectorEditor.menu.exportBmp', 'Export BMP'),
-                    onClick: () => exportBMP(),
-                },
-                ...(hasOnSaveToLibrary
-                    ? [
-                        { id: 'sep2', divider: true },
-                        {
-                            id: 'save-lib',
-                            icon: jsx(NiceIcon, { name: "box", size: 14 }),
-                            label: t('vectorEditor.menu.saveToLibrary', 'Save to Library'),
-                            onClick: () => saveToLibrary(),
-                        },
-                    ]
-                    : []),
-                ...(onExportIconSnippet
-                    ? [
-                        { id: 'sep3', divider: true },
-                        {
-                            id: 'export-snippet',
-                            icon: jsx(NiceIcon, { name: "clipboard", size: 14 }),
-                            label: t('vectorEditor.menu.exportIconSnippet', 'Export Icon Snippet'),
-                            onClick: () => onExportIconSnippet(),
-                        },
-                    ]
-                    : []),
-            ],
-        },
-        {
-            id: 'edit',
-            label: t('vectorEditor.menu.edit', 'Edit'),
-            children: [
-                {
-                    id: 'undo',
-                    label: t('vectorEditor.menu.undo', 'Undo  (Ctrl+Z)'),
-                    onClick: () => undo(),
-                },
-                {
-                    id: 'redo',
-                    label: t('vectorEditor.menu.redo', 'Redo  (Ctrl+Y)'),
-                    onClick: () => redo(),
-                },
-                { id: 'sep1', divider: true },
-                {
-                    id: 'cut',
-                    label: t('vectorEditor.menu.copy', 'Copy  (Ctrl+C)'),
-                    onClick: () => copyShape(),
-                    disabled: !hasSel,
-                },
-                {
-                    id: 'paste',
-                    label: t('vectorEditor.menu.paste', 'Paste  (Ctrl+V)'),
-                    onClick: () => pasteShape(),
-                    disabled: !hasClipboard,
-                },
-                {
-                    id: 'dup',
-                    label: t('vectorEditor.menu.duplicate', 'Duplicate  (Ctrl+D)'),
-                    onClick: () => duplicateShape(),
-                    disabled: !hasSel,
-                },
-                { id: 'sep2', divider: true },
-                {
-                    id: 'del',
-                    label: t('vectorEditor.menu.delete', 'Delete  (Del)'),
-                    onClick: () => deleteShape(),
-                    disabled: !hasSel,
-                    danger: true,
-                },
-            ],
-        },
-        {
-            id: 'object',
-            label: t('vectorEditor.menu.object', 'Object'),
-            children: [
-                {
-                    id: 'front',
-                    label: t('vectorEditor.menu.bringToFront', 'Bring to Front'),
-                    onClick: () => bringToFront(),
-                    disabled: !hasSel,
-                },
-                {
-                    id: 'back',
-                    label: t('vectorEditor.menu.sendToBack', 'Send to Back'),
-                    onClick: () => sendToBack(),
-                    disabled: !hasSel,
-                },
-                { id: 'sep1', divider: true },
-                {
-                    id: 'fh',
-                    label: t('vectorEditor.menu.flipH', 'Flip Horizontal'),
-                    onClick: () => flipH(),
-                    disabled: !hasSel,
-                },
-                {
-                    id: 'fv',
-                    label: t('vectorEditor.menu.flipV', 'Flip Vertical'),
-                    onClick: () => flipV(),
-                    disabled: !hasSel,
-                },
-                { id: 'sep2', divider: true },
-                {
-                    id: 'al',
-                    label: t('vectorEditor.menu.alignLeft', 'Align Left'),
-                    onClick: () => alignShapes('left'),
-                    disabled: !hasSel,
-                },
-                {
-                    id: 'ac',
-                    label: t('vectorEditor.menu.alignCenter', 'Align Center'),
-                    onClick: () => alignShapes('center'),
-                    disabled: !hasSel,
-                },
-                {
-                    id: 'ar',
-                    label: t('vectorEditor.menu.alignRight', 'Align Right'),
-                    onClick: () => alignShapes('right'),
-                    disabled: !hasSel,
-                },
-            ],
-        },
-        {
-            id: 'path',
-            label: t('vectorEditor.menu.path', 'Path'),
-            children: [
-                {
-                    id: 'union',
-                    label: t('vectorEditor.menu.union', 'Union (∪)'),
-                    onClick: () => unionShapes(),
-                    disabled: !canBool,
-                },
-                {
-                    id: 'sub',
-                    label: t('vectorEditor.menu.subtract', 'Subtract (−)'),
-                    onClick: () => subtractShapes(),
-                    disabled: !canBool,
-                },
-                {
-                    id: 'int',
-                    label: t('vectorEditor.menu.intersect', 'Intersect (∩)'),
-                    onClick: () => intersectShapes(),
-                    disabled: !canBool,
-                },
-                {
-                    id: 'exc',
-                    label: t('vectorEditor.menu.exclude', 'Exclude (⊕)'),
-                    onClick: () => excludeShapes(),
-                    disabled: !canBool,
-                },
-                { id: 'sep1', divider: true },
-                {
-                    id: 'outline',
-                    label: t('vectorEditor.menu.outlineStroke', 'Outline stroke'),
-                    onClick: () => outlineStroke(),
-                    disabled: !hasSel,
-                },
-            ],
-        },
-        {
-            id: 'view',
-            label: t('vectorEditor.menu.view', 'View'),
-            children: [
-                {
-                    id: 'snap',
-                    label: t('vectorEditor.menu.snapToGrid', 'Snap to grid'),
-                    badge: snapGrid ? jsx(NiceIcon, { name: "check", size: 14 }) : undefined,
-                    onClick: () => setSnapGrid((v) => !v),
-                },
-            ],
-        },
-    ], [
-        t,
-        newCanvas,
-        fInp,
-        setDlgSvg,
-        exportSVG,
-        exportPNG,
-        exportJPG,
-        exportWebP,
-        exportBMP,
-        hasOnSaveToLibrary,
-        saveToLibrary,
-        onExportIconSnippet,
-        undo,
-        redo,
-        hasSel,
-        copyShape,
-        pasteShape,
-        hasClipboard,
-        duplicateShape,
-        deleteShape,
-        bringToFront,
-        sendToBack,
-        flipH,
-        flipV,
-        alignShapes,
-        unionShapes,
-        subtractShapes,
-        intersectShapes,
-        excludeShapes,
-        outlineStroke,
-        canBool,
-        snapGrid,
-        setSnapGrid,
-    ]);
-    return (jsxs("div", { className: styles.menuBar, children: [jsx(NiceMenu, { items: menuItems, variant: "ghost", density: "compact", size: "sm", openTrigger: "click" }), jsx("div", { className: styles.menuSep }), shapes.length >= 2 && (jsx(NiceSelect, { className: styles.menuBtn, value: boolSecondShape || '', onChange: (val) => setBoolSecondShape(val || null), options: [
-                    { value: '', label: t('vectorEditor.menu.secondShape', '2nd Shape') },
-                    ...shapes
-                        .filter((s) => s.id !== selId)
-                        .map((s, i) => {
-                        var _a;
-                        return ({
-                            value: s.id,
-                            label: (_a = s.name) !== null && _a !== void 0 ? _a : t('vectorEditor.shape', 'Shape {i}').replace('{i}', String(i + 1)),
-                        });
-                    }),
-                ], style: { minWidth: 100 } })), jsxs("label", { className: styles.menuLabel, children: [jsx(NiceCheckbox, { checked: snapGrid, onChange: () => setSnapGrid((v) => !v) }), t('vectorEditor.menu.snap', 'Snap')] }), onExportIconSnippet && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsxs(NiceButton, { className: styles.menuBtn, variant: "primary", size: "sm", onClick: onExportIconSnippet, children: [jsx(NiceIcon, { name: "clipboard", size: 14 }), ' ', t('vectorEditor.menu.exportIcon', 'Export Icon')] })] }))] }));
+          className: styles.menuBtn,
+          variant: "primary",
+          size: "sm",
+          onClick: onExportIconSnippet,
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 14 }),
+            " ",
+            t("vectorEditor.menu.exportIcon", "Export Icon")
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const VectorEditorMenuBar = React.memo(VectorEditorMenuBar$1);
+export {
+  VectorEditorMenuBar as default
 };
-var VectorEditorMenuBar = React.memo(VectorEditorMenuBar$1);
-
-export { VectorEditorMenuBar as default };