@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/esm/pixel/PixelEditorToolbar.js

@@ -1,21 +1,101 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceButton, NiceColorPicker } from '@nice2dev/ui';
-import { NiceIcon } from '@nice2dev/ui-core';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './PixelEditor.module.css.js';
-import { TOOLS, SYMMETRY_MODES } from './pixelEditorTypes.js';
-
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceButton, NiceColorPicker } from "@nice2dev/ui";
+import { NiceIcon } from "@nice2dev/ui-core";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./PixelEditor.module.css.js";
+import { TOOLS, SYMMETRY_MODES } from "./pixelEditorTypes.js";
 const PixelEditorToolbar = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = useNiceTranslation();
-    return (jsxs("div", { className: styles.toolbar, children: [TOOLS.map((t) => (jsx(NiceButton, { className: `${styles.toolBtn} ${api.tool === t.id ? styles.toolBtnActive : ''}`, variant: api.tool === t.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTool(t.id), title: `${t.label} (${t.key})`, "aria-label": t.label, children: jsx(NiceIcon, { name: t.icon, size: 16 }) }, t.id))), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: `${styles.toolBtn} ${api.shapeFilled ? styles.toolBtnActive : ''}`, variant: api.shapeFilled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShapeFilled((f) => !f), title: `${api.shapeFilled ? 'Filled' : 'Outline'} (F)`, "aria-label": api.shapeFilled
-                    ? t('pixelEditorToolbar.filledShape', 'Filled shape')
-                    : t('pixelEditorToolbar.outlineShape', 'Outline shape'), children: jsx(NiceIcon, { name: api.shapeFilled ? 'check-square' : 'square', size: 16 }) }), jsx("div", { className: styles.toolGroup, children: SYMMETRY_MODES.map((m) => (jsx(NiceButton, { className: `${styles.miniBtn} ${api.symmetry === m.id ? styles.miniBtnActive : ''}`, variant: api.symmetry === m.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSymmetry(m.id), title: t('pixelEditorToolbar.symmetry', 'Symmetry: {label}').replace('{label}', String(m.label)), "aria-label": t('pixelEditorToolbar.symmetry', 'Symmetry: {label}').replace('{label}', String(m.label)), children: jsx(NiceIcon, { name: m.icon, size: 14 }) }, m.id))) }), jsxs("div", { className: styles.colorSwatches, children: [jsx("label", { style: { position: 'relative', width: 28, height: 28, cursor: 'pointer' }, title: t('pixelEditorToolbar.primaryColourClickForHsv', 'Primary Colour (click for HSV)'), children: jsx(NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsx("label", { style: { position: 'relative', width: 22, height: 22, cursor: 'pointer' }, title: t('pixelEditorToolbar.secondaryColour', 'Secondary Colour'), children: jsx(NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
-                            const tmp = api.col1;
-                            api.setCol1(api.col2);
-                            api.setCol2(tmp);
-                        }, title: t('pixelEditorToolbar.swapX', 'Swap (X)'), "aria-label": t('pixelEditorToolbar.swapColours', 'Swap colours'), style: { fontSize: 12, width: 24, height: 24 }, children: jsx(NiceIcon, { name: "shuffle", size: 14 }) })] })] }));
-}), { displayName: 'PixelEditorToolbar' });
-
-export { PixelEditorToolbar as default };
+    return /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+      TOOLS.map((t2) => /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: `${styles.toolBtn} ${api.tool === t2.id ? styles.toolBtnActive : ""}`,
+          variant: api.tool === t2.id ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => api.setTool(t2.id),
+          title: `${t2.label} (${t2.key})`,
+          "aria-label": t2.label,
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: t2.icon, size: 16 })
+        },
+        t2.id
+      )),
+      /* @__PURE__ */ jsx("div", { className: styles.toolSep }),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: `${styles.toolBtn} ${api.shapeFilled ? styles.toolBtnActive : ""}`,
+          variant: api.shapeFilled ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => api.setShapeFilled((f) => !f),
+          title: `${api.shapeFilled ? "Filled" : "Outline"} (F)`,
+          "aria-label": api.shapeFilled ? t("pixelEditorToolbar.filledShape", "Filled shape") : t("pixelEditorToolbar.outlineShape", "Outline shape"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: api.shapeFilled ? "check-square" : "square", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.toolGroup, children: SYMMETRY_MODES.map((m) => /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          className: `${styles.miniBtn} ${api.symmetry === m.id ? styles.miniBtnActive : ""}`,
+          variant: api.symmetry === m.id ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => api.setSymmetry(m.id),
+          title: t("pixelEditorToolbar.symmetry", "Symmetry: {label}").replace(
+            "{label}",
+            String(m.label)
+          ),
+          "aria-label": t("pixelEditorToolbar.symmetry", "Symmetry: {label}").replace(
+            "{label}",
+            String(m.label)
+          ),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: m.icon, size: 14 })
+        },
+        m.id
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.colorSwatches, children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            style: { position: "relative", width: 28, height: 28, cursor: "pointer" },
+            title: t(
+              "pixelEditorToolbar.primaryColourClickForHsv",
+              "Primary Colour (click for HSV)"
+            ),
+            children: /* @__PURE__ */ jsx(NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            style: { position: "relative", width: 22, height: 22, cursor: "pointer" },
+            title: t("pixelEditorToolbar.secondaryColour", "Secondary Colour"),
+            children: /* @__PURE__ */ jsx(NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NiceButton,
+          {
+            className: styles.toolBtn,
+            variant: "ghost",
+            size: "sm",
+            onClick: () => {
+              const tmp = api.col1;
+              api.setCol1(api.col2);
+              api.setCol2(tmp);
+            },
+            title: t("pixelEditorToolbar.swapX", "Swap (X)"),
+            "aria-label": t("pixelEditorToolbar.swapColours", "Swap colours"),
+            style: { fontSize: 12, width: 24, height: 24 },
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "shuffle", size: 14 })
+          }
+        )
+      ] })
+    ] });
+  }),
+  { displayName: "PixelEditorToolbar" }
+);
+export {
+  PixelEditorToolbar as default
+};