@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/model/ModelEditorMenuBar.js

@@ -1,32 +1,361 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceSelect, NiceButton, NiceIcon, clickOnActivationKey, NiceCheckbox, NiceColorPicker } from '@nice2dev/ui';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './ModelEditor.module.css.js';
-
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceSelect, NiceButton, NiceIcon, clickOnActivationKey, NiceCheckbox, NiceColorPicker } from "@nice2dev/ui";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./ModelEditor.module.css.js";
 const ModelEditorMenuBar = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api, hasOnSaveToLibrary }) => {
+  /* @__PURE__ */ React.memo(({ api, hasOnSaveToLibrary }) => {
     const { t } = useNiceTranslation();
-    const { editorMode, setEditorMode, fileInputRef, mergeInputRef, addMenuOpen, setAddMenuOpen, addPrimitive, addSceneLight, addCameraObject, addEmpty, selectedNode, duplicateSelected, deleteSelected, exportGLTF, exportOBJ, exportSTL, exportPLY, exportUSDZ, saveToLibrary, clearScene, showGrid, setShowGrid, showAxes, setShowAxes, wireframe, setWireframe, showSkeleton, setShowSkeleton, showLightHelpers, setShowLightHelpers, bgColor, setBgColor, } = api;
-    return (jsxs("div", { className: styles.menuBar, children: [jsx(NiceSelect, { className: styles.modeSelect, value: editorMode, onChange: (val) => setEditorMode(val), options: [
-                    { value: 'object', label: t('modelEditorMenuBar.objectMode', 'Object Mode') },
-                    { value: 'edit', label: t('modelEditorMenuBar.editMode', 'Edit Mode') },
-                    { value: 'pose', label: t('modelEditorMenuBar.poseMode', 'Pose Mode') },
-                ] }), jsx("div", { className: styles.menuSep }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsx(NiceIcon, { name: "folder", size: 14 }), " ", t('modelEditorMenuBar.open', 'Open')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = mergeInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, title: t('modelEditorMenuBar.mergeAnimationsFromFbxGltf', 'Merge animations from FBX/GLTF onto current model'), children: [jsx(NiceIcon, { name: "plus", size: 14 }), " ", t('modelEditorMenuBar.mergeAnim', 'Merge Anim')] }), jsx("div", { className: styles.menuSep }), jsxs("div", { className: styles.menuDropdownWrap, children: [jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => setAddMenuOpen(addMenuOpen ? null : 'mesh'), children: [jsx(NiceIcon, { name: "plus", size: 14 }), " ", t('modelEditorMenuBar.add', 'Add'), ' ', jsx(NiceIcon, { name: "chevron-down", size: 14 })] }), addMenuOpen && (jsxs("div", { className: styles.dropdownMenu, children: [jsx("div", { className: styles.dropdownTitle, children: t('modelEditorMenuBar.mesh', 'Mesh') }), [
-                                'cube',
-                                'sphere',
-                                'cylinder',
-                                'cone',
-                                'torus',
-                                'plane',
-                                'circle',
-                                'ring',
-                                'dodecahedron',
-                                'icosahedron',
-                                'octahedron',
-                                'tetrahedron',
-                                'torusKnot',
-                            ].map((t) => (jsx("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.dropdownItem, onClick: () => addPrimitive(t), children: t.charAt(0).toUpperCase() + t.slice(1) }, t))), jsx("div", { className: styles.dropdownSep }), jsx("div", { className: styles.dropdownTitle, children: t('modelEditorMenuBar.light', 'Light') }), ['point', 'spot', 'directional', 'hemisphere'].map((t) => (jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.dropdownItem, onClick: () => addSceneLight(t), children: [jsx(NiceIcon, { name: "lightbulb", size: 14 }), " ", t.charAt(0).toUpperCase() + t.slice(1)] }, t))), jsx("div", { className: styles.dropdownSep }), jsx("div", { className: styles.dropdownTitle, children: t('modelEditorMenuBar.other', 'Other') }), jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.dropdownItem, onClick: addCameraObject, children: [jsx(NiceIcon, { name: "camera", size: 14 }), " ", t('modelEditorMenuBar.camera', 'Camera')] }), jsxs("div", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, className: styles.dropdownItem, onClick: () => addEmpty('arrows'), children: [jsx(NiceIcon, { name: "move", size: 14 }), ' ', t('modelEditorMenuBar.emptyArrows', 'Empty (Arrows)')] })] }))] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: duplicateSelected, disabled: !selectedNode, title: t('modelEditorMenuBar.duplicateSelectedShiftD', 'Duplicate selected (Shift+D)'), children: [jsx(NiceIcon, { name: "clipboard", size: 14 }), " ", t('modelEditorMenuBar.duplicate', 'Duplicate')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: deleteSelected, disabled: !selectedNode, title: t('modelEditorMenuBar.deleteSelectedDelete', 'Delete selected (Delete)'), children: [jsx(NiceIcon, { name: "close", size: 14 }), " ", t('modelEditorMenuBar.delete', 'Delete')] }), jsx("div", { className: styles.menuSep }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportGLTF(true), children: [jsx(NiceIcon, { name: "save", size: 14 }), " ", t('modelEditorMenuBar.exportGlb', 'Export GLB')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportGLTF(false), children: [jsx(NiceIcon, { name: "file", size: 14 }), " ", t('modelEditorMenuBar.exportGltf', 'Export GLTF')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportOBJ, children: [jsx(NiceIcon, { name: "file", size: 14 }), " ", t('modelEditorMenuBar.exportObj', 'Export OBJ')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportSTL(true), children: [jsx(NiceIcon, { name: "file", size: 14 }), " ", t('modelEditorMenuBar.exportStl', 'Export STL')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: () => exportPLY(true), children: [jsx(NiceIcon, { name: "file", size: 14 }), " ", t('modelEditorMenuBar.exportPly', 'Export PLY')] }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportUSDZ, children: [jsx(NiceIcon, { name: "file", size: 14 }), " ", t('modelEditorMenuBar.exportUsdz', 'Export USDZ')] }), hasOnSaveToLibrary && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: saveToLibrary, children: [jsx(NiceIcon, { name: "box", size: 14 }), ' ', t('modelEditorMenuBar.saveToLibrary', 'Save to Library')] })] })), jsx("div", { className: styles.menuSep }), jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: clearScene, children: [jsx(NiceIcon, { name: "trash", size: 14 }), " ", t('modelEditorMenuBar.clear', 'Clear')] }), jsx("div", { className: styles.menuSep }), jsx(NiceCheckbox, { checked: showGrid, onChange: () => setShowGrid((v) => !v), label: t('modelEditorMenuBar.grid', 'Grid') }), jsx(NiceCheckbox, { checked: showAxes, onChange: () => setShowAxes((v) => !v), label: t('modelEditorMenuBar.axes', 'Axes') }), jsx(NiceCheckbox, { checked: wireframe, onChange: () => setWireframe((v) => !v), label: t('modelEditorMenuBar.wire', 'Wire') }), jsx(NiceCheckbox, { checked: showSkeleton, onChange: () => setShowSkeleton((v) => !v), label: t('modelEditorMenuBar.skel', 'Skel') }), jsx(NiceCheckbox, { checked: showLightHelpers, onChange: () => setShowLightHelpers((v) => !v), label: t('modelEditorMenuBar.helpers', 'Helpers') }), jsxs("div", { className: styles.menuRight, children: [jsx("label", { className: styles.menuLabel, children: t('modelEditorMenuBar.bg', 'BG') }), jsx(NiceColorPicker, { value: bgColor, onChange: (c) => setBgColor(c) })] })] }));
-}), { displayName: 'ModelEditorMenuBar' });
-
-export { ModelEditorMenuBar as default };
+    const {
+      editorMode,
+      setEditorMode,
+      fileInputRef,
+      mergeInputRef,
+      addMenuOpen,
+      setAddMenuOpen,
+      addPrimitive,
+      addSceneLight,
+      addCameraObject,
+      addEmpty,
+      selectedNode,
+      duplicateSelected,
+      deleteSelected,
+      exportGLTF,
+      exportOBJ,
+      exportSTL,
+      exportPLY,
+      exportUSDZ,
+      saveToLibrary,
+      clearScene,
+      showGrid,
+      setShowGrid,
+      showAxes,
+      setShowAxes,
+      wireframe,
+      setWireframe,
+      showSkeleton,
+      setShowSkeleton,
+      showLightHelpers,
+      setShowLightHelpers,
+      bgColor,
+      setBgColor
+    } = api;
+    return /* @__PURE__ */ jsxs("div", { className: styles.menuBar, children: [
+      /* @__PURE__ */ jsx(
+        NiceSelect,
+        {
+          className: styles.modeSelect,
+          value: editorMode,
+          onChange: (val) => setEditorMode(val),
+          options: [
+            { value: "object", label: t("modelEditorMenuBar.objectMode", "Object Mode") },
+            { value: "edit", label: t("modelEditorMenuBar.editMode", "Edit Mode") },
+            { value: "pose", label: t("modelEditorMenuBar.poseMode", "Pose Mode") }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => fileInputRef.current?.click(),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "folder", size: 14 }),
+            " ",
+            t("modelEditorMenuBar.open", "Open")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => mergeInputRef.current?.click(),
+          title: t(
+            "modelEditorMenuBar.mergeAnimationsFromFbxGltf",
+            "Merge animations from FBX/GLTF onto current model"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "plus", size: 14 }),
+            " ",
+            t("modelEditorMenuBar.mergeAnim", "Merge Anim")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+      /* @__PURE__ */ jsxs("div", { className: styles.menuDropdownWrap, children: [
+        /* @__PURE__ */ jsxs(
+          NiceButton,
+          {
+            className: styles.menuBtn,
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setAddMenuOpen(addMenuOpen ? null : "mesh"),
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "plus", size: 14 }),
+              " ",
+              t("modelEditorMenuBar.add", "Add"),
+              " ",
+              /* @__PURE__ */ jsx(NiceIcon, { name: "chevron-down", size: 14 })
+            ]
+          }
+        ),
+        addMenuOpen && /* @__PURE__ */ jsxs("div", { className: styles.dropdownMenu, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.dropdownTitle, children: t("modelEditorMenuBar.mesh", "Mesh") }),
+          [
+            "cube",
+            "sphere",
+            "cylinder",
+            "cone",
+            "torus",
+            "plane",
+            "circle",
+            "ring",
+            "dodecahedron",
+            "icosahedron",
+            "octahedron",
+            "tetrahedron",
+            "torusKnot"
+          ].map((t2) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: clickOnActivationKey,
+              className: styles.dropdownItem,
+              onClick: () => addPrimitive(t2),
+              children: t2.charAt(0).toUpperCase() + t2.slice(1)
+            },
+            t2
+          )),
+          /* @__PURE__ */ jsx("div", { className: styles.dropdownSep }),
+          /* @__PURE__ */ jsx("div", { className: styles.dropdownTitle, children: t("modelEditorMenuBar.light", "Light") }),
+          ["point", "spot", "directional", "hemisphere"].map((t2) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: clickOnActivationKey,
+              className: styles.dropdownItem,
+              onClick: () => addSceneLight(t2),
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "lightbulb", size: 14 }),
+                " ",
+                t2.charAt(0).toUpperCase() + t2.slice(1)
+              ]
+            },
+            t2
+          )),
+          /* @__PURE__ */ jsx("div", { className: styles.dropdownSep }),
+          /* @__PURE__ */ jsx("div", { className: styles.dropdownTitle, children: t("modelEditorMenuBar.other", "Other") }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: clickOnActivationKey,
+              className: styles.dropdownItem,
+              onClick: addCameraObject,
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "camera", size: 14 }),
+                " ",
+                t("modelEditorMenuBar.camera", "Camera")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: clickOnActivationKey,
+              className: styles.dropdownItem,
+              onClick: () => addEmpty("arrows"),
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "move", size: 14 }),
+                " ",
+                t("modelEditorMenuBar.emptyArrows", "Empty (Arrows)")
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: duplicateSelected,
+          disabled: !selectedNode,
+          title: t("modelEditorMenuBar.duplicateSelectedShiftD", "Duplicate selected (Shift+D)"),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "clipboard", size: 14 }),
+            " ",
+            t("modelEditorMenuBar.duplicate", "Duplicate")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: deleteSelected,
+          disabled: !selectedNode,
+          title: t("modelEditorMenuBar.deleteSelectedDelete", "Delete selected (Delete)"),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "close", size: 14 }),
+            " ",
+            t("modelEditorMenuBar.delete", "Delete")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => exportGLTF(true),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "save", size: 14 }),
+            " ",
+            t("modelEditorMenuBar.exportGlb", "Export GLB")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => exportGLTF(false),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 14 }),
+            " ",
+            t("modelEditorMenuBar.exportGltf", "Export GLTF")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportOBJ, children: [
+        /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 14 }),
+        " ",
+        t("modelEditorMenuBar.exportObj", "Export OBJ")
+      ] }),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => exportSTL(true),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 14 }),
+            " ",
+            t("modelEditorMenuBar.exportStl", "Export STL")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        NiceButton,
+        {
+          className: styles.menuBtn,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => exportPLY(true),
+          children: [
+            /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 14 }),
+            " ",
+            t("modelEditorMenuBar.exportPly", "Export PLY")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: exportUSDZ, children: [
+        /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 14 }),
+        " ",
+        t("modelEditorMenuBar.exportUsdz", "Export USDZ")
+      ] }),
+      hasOnSaveToLibrary && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+        /* @__PURE__ */ jsxs(
+          NiceButton,
+          {
+            className: styles.menuBtn,
+            variant: "ghost",
+            size: "sm",
+            onClick: saveToLibrary,
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "box", size: 14 }),
+              " ",
+              t("modelEditorMenuBar.saveToLibrary", "Save to Library")
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+      /* @__PURE__ */ jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", onClick: clearScene, children: [
+        /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 14 }),
+        " ",
+        t("modelEditorMenuBar.clear", "Clear")
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.menuSep }),
+      /* @__PURE__ */ jsx(
+        NiceCheckbox,
+        {
+          checked: showGrid,
+          onChange: () => setShowGrid((v) => !v),
+          label: t("modelEditorMenuBar.grid", "Grid")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceCheckbox,
+        {
+          checked: showAxes,
+          onChange: () => setShowAxes((v) => !v),
+          label: t("modelEditorMenuBar.axes", "Axes")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceCheckbox,
+        {
+          checked: wireframe,
+          onChange: () => setWireframe((v) => !v),
+          label: t("modelEditorMenuBar.wire", "Wire")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceCheckbox,
+        {
+          checked: showSkeleton,
+          onChange: () => setShowSkeleton((v) => !v),
+          label: t("modelEditorMenuBar.skel", "Skel")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceCheckbox,
+        {
+          checked: showLightHelpers,
+          onChange: () => setShowLightHelpers((v) => !v),
+          label: t("modelEditorMenuBar.helpers", "Helpers")
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: styles.menuRight, children: [
+        /* @__PURE__ */ jsx("label", { className: styles.menuLabel, children: t("modelEditorMenuBar.bg", "BG") }),
+        /* @__PURE__ */ jsx(NiceColorPicker, { value: bgColor, onChange: (c) => setBgColor(c) })
+      ] })
+    ] });
+  }),
+  { displayName: "ModelEditorMenuBar" }
+);
+export {
+  ModelEditorMenuBar as default
+};