@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/cjs/pixel/PixelEditorTimeline.js

@@ -1,25 +1,108 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var uiCore = require('@nice2dev/ui-core');
-var React = require('react');
-var i18n = require('../core/i18n.js');
-var PixelEditor_module = require('./PixelEditor.module.css.js');
-
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const uiCore = require("@nice2dev/ui-core");
+const React = require("react");
+const i18n = require("../core/i18n.js");
+const PixelEditor_module = require("./PixelEditor.module.css.js");
 const PixelEditorTimeline = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = i18n.useNiceTranslation();
-    return (jsxRuntime.jsxs("div", { className: PixelEditor_module.bottomPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.timelineControls, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children: t('pixelEditorTimeline.frame', '+ Frame') }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": t('pixelEditorTimeline.duplicateFrame', 'Duplicate frame'), children: t('pixelEditorTimeline.dup', 'Dup') }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": t('pixelEditorTimeline.removeFrame', 'Remove frame'), children: t('pixelEditorTimeline.frame2', '− Frame') }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), "aria-label": api.playing
-                            ? t('pixelEditorTimeline.pause', 'Pause')
-                            : t('pixelEditorTimeline.play', 'Play'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.playing ? 'pause' : 'play', size: 16 }) }), jsxRuntime.jsx("label", { children: t('pixelEditorTimeline.fps', 'FPS:') }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": t('pixelEditorTimeline.framesPerSecond', 'Frames per second') }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: t('pixelEditorTimeline.onion', 'Onion') }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsx("span", { children: api.fc !== 1
-                            ? t('pixelEditorTimeline.framesMany', '{fc} frames').replace('{fc}', String(api.fc))
-                            : t('pixelEditorTimeline.framesOne', '{fc} frame').replace('{fc}', String(api.fc)) })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, "aria-label": t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), "aria-pressed": fi === api.afi, onKeyDown: uiCore.clickOnActivationKey, className: `${PixelEditor_module.frameThumb} ${fi === api.afi ? PixelEditor_module.frameThumbActive : ''}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsxRuntime.jsx("img", { src: api.thumbs[fi], alt: t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), style: {
-                                width: 36,
-                                height: 36,
-                                imageRendering: 'pixelated',
-                                objectFit: 'contain',
-                            } })), jsxRuntime.jsx("span", { className: PixelEditor_module.frameNum, children: fi + 1 })] }, fi))) })] }));
-}), { displayName: 'PixelEditorTimeline' });
-
-module.exports = PixelEditorTimeline;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.bottomPanel, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.timelineControls, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children: t("pixelEditorTimeline.frame", "+ Frame") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.NiceButton,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: api.dupFrame,
+            "aria-label": t("pixelEditorTimeline.duplicateFrame", "Duplicate frame"),
+            children: t("pixelEditorTimeline.dup", "Dup")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.NiceButton,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: api.rmFrame,
+            "aria-label": t("pixelEditorTimeline.removeFrame", "Remove frame"),
+            children: t("pixelEditorTimeline.frame2", "− Frame")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.menuSep }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.NiceButton,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => api.setPlaying((p) => !p),
+            "aria-label": api.playing ? t("pixelEditorTimeline.pause", "Pause") : t("pixelEditorTimeline.play", "Play"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: api.playing ? "pause" : "play", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { children: t("pixelEditorTimeline.fps", "FPS:") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.NiceNumberInput,
+          {
+            min: 1,
+            max: 60,
+            value: api.fps,
+            onChange: (val) => api.setFps(val ?? 8),
+            "aria-label": t("pixelEditorTimeline.framesPerSecond", "Frames per second")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.menuSep }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.NiceCheckbox,
+          {
+            checked: api.onion,
+            onChange: (checked) => api.setOnion(checked),
+            label: t("pixelEditorTimeline.onion", "Onion")
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: api.fc !== 1 ? t("pixelEditorTimeline.framesMany", "{fc} frames").replace("{fc}", String(api.fc)) : t("pixelEditorTimeline.framesOne", "{fc} frame").replace("{fc}", String(api.fc)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          "aria-label": t("pixelEditorTimeline.frame3", "Frame {fi}").replace(
+            "{fi}",
+            String(fi + 1)
+          ),
+          "aria-pressed": fi === api.afi,
+          onKeyDown: uiCore.clickOnActivationKey,
+          className: `${PixelEditor_module.default.frameThumb} ${fi === api.afi ? PixelEditor_module.default.frameThumbActive : ""}`,
+          onClick: () => api.setAfi(fi),
+          children: [
+            api.thumbs[fi] && /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: api.thumbs[fi],
+                alt: t("pixelEditorTimeline.frame3", "Frame {fi}").replace(
+                  "{fi}",
+                  String(fi + 1)
+                ),
+                style: {
+                  width: 36,
+                  height: 36,
+                  imageRendering: "pixelated",
+                  objectFit: "contain"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: PixelEditor_module.default.frameNum, children: fi + 1 })
+          ]
+        },
+        fi
+      )) })
+    ] });
+  }),
+  { displayName: "PixelEditorTimeline" }
+);
+exports.default = PixelEditorTimeline;

package/dist/cjs/pixel/PixelEditorToolbar.js

@@ -1,23 +1,101 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var uiCore = require('@nice2dev/ui-core');
-var React = require('react');
-var i18n = require('../core/i18n.js');
-var PixelEditor_module = require('./PixelEditor.module.css.js');
-var pixelEditorTypes = require('./pixelEditorTypes.js');
-
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const uiCore = require("@nice2dev/ui-core");
+const React = require("react");
+const i18n = require("../core/i18n.js");
+const PixelEditor_module = require("./PixelEditor.module.css.js");
+const pixelEditorTypes = require("./pixelEditorTypes.js");
 const PixelEditorToolbar = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = i18n.useNiceTranslation();
-    return (jsxRuntime.jsxs("div", { className: PixelEditor_module.toolbar, children: [pixelEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.toolBtn} ${api.tool === t.id ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: t.icon, size: 16 }) }, t.id))), jsxRuntime.jsx("div", { className: PixelEditor_module.toolSep }), jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.toolBtn} ${api.shapeFilled ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.shapeFilled ? 'check-square' : 'square', size: 16 }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.toolGroup, children: pixelEditorTypes.SYMMETRY_MODES.map((m) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.miniBtn} ${api.symmetry === m.id ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: m.icon, size: 14 }) }, m.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.colorSwatches, children: [jsxRuntime.jsx("label", { style: { position: 'relative', width: 28, height: 28, cursor: 'pointer' }, title: t('pixelEditorToolbar.primaryColourClickForHsv', 'Primary Colour (click for HSV)'), children: jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsxRuntime.jsx("label", { style: { position: 'relative', width: 22, height: 22, cursor: 'pointer' }, title: t('pixelEditorToolbar.secondaryColour', 'Secondary Colour'), children: jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: "shuffle", size: 14 }) })] })] }));
-}), { displayName: 'PixelEditorToolbar' });
-
-module.exports = PixelEditorToolbar;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.toolbar, children: [
+      pixelEditorTypes.TOOLS.map((t2) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceButton,
+        {
+          className: `${PixelEditor_module.default.toolBtn} ${api.tool === t2.id ? PixelEditor_module.default.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__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: t2.icon, size: 16 })
+        },
+        t2.id
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.toolSep }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceButton,
+        {
+          className: `${PixelEditor_module.default.toolBtn} ${api.shapeFilled ? PixelEditor_module.default.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__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: api.shapeFilled ? "check-square" : "square", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: PixelEditor_module.default.toolGroup, children: pixelEditorTypes.SYMMETRY_MODES.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceButton,
+        {
+          className: `${PixelEditor_module.default.miniBtn} ${api.symmetry === m.id ? PixelEditor_module.default.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__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: m.icon, size: 14 })
+        },
+        m.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.colorSwatches, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            style: { position: "relative", width: 28, height: 28, cursor: "pointer" },
+            title: t(
+              "pixelEditorToolbar.primaryColourClickForHsv",
+              "Primary Colour (click for HSV)"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            style: { position: "relative", width: 22, height: 22, cursor: "pointer" },
+            title: t("pixelEditorToolbar.secondaryColour", "Secondary Colour"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.NiceButton,
+          {
+            className: PixelEditor_module.default.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__ */ jsxRuntime.jsx(uiCore.NiceIcon, { name: "shuffle", size: 14 })
+          }
+        )
+      ] })
+    ] });
+  }),
+  { displayName: "PixelEditorToolbar" }
+);
+exports.default = PixelEditorToolbar;