@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/cjs/model/ModelEditorViewport.js

@@ -1,43 +1,235 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-var i18n = require('../core/i18n.js');
-var ModelEditor_module = require('./ModelEditor.module.css.js');
-
-/** The viewport badge per editor mode: [key, English]. */
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
+const i18n = require("../core/i18n.js");
+const ModelEditor_module = require("./ModelEditor.module.css.js");
 const MODE_BADGE = {
-    object: ['modelEditorViewport.objectMode', 'OBJECT MODE'],
-    edit: ['modelEditorViewport.editMode', 'EDIT MODE'],
-    pose: ['modelEditorViewport.poseMode', 'POSE MODE'],
-    cad: ['modelEditorViewport.cadMode', 'CAD MODE'],
-    sims: ['modelEditorViewport.simsMode', 'SIMS MODE'],
+  object: ["modelEditorViewport.objectMode", "OBJECT MODE"],
+  edit: ["modelEditorViewport.editMode", "EDIT MODE"],
+  pose: ["modelEditorViewport.poseMode", "POSE MODE"],
+  cad: ["modelEditorViewport.cadMode", "CAD MODE"],
+  sims: ["modelEditorViewport.simsMode", "SIMS MODE"]
 };
 const ModelEditorViewport = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = i18n.useNiceTranslation();
-    const { mountRef, dragOver, handleDragOver, handleDragLeave, handleDrop, handleViewportClick, handleContextMenu, editorMode, polyCount, meshCount, boneCount, shadingMode, setShadingMode, gizmoSpace, setGizmoSpace, contextMenu, closeContextMenu, addPrimitive, addSceneLight, duplicateSelected, deleteSelected, selectedNode, rootObjectRef, focusOnObject, snapEnabled, setSnapEnabled, } = api;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { role: "presentation", ref: mountRef, className: `${ModelEditor_module.viewportContainer} ${dragOver ? ModelEditor_module.dragOver : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleViewportClick, onContextMenu: handleContextMenu, children: [jsxRuntime.jsxs("div", { className: ModelEditor_module.viewportOverlay, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.viewportBadge, children: t(...MODE_BADGE[editorMode]) }), jsxRuntime.jsx("span", { className: ModelEditor_module.viewportBadge, children: t('modelEditorViewport.trisMeshesBones', '{polyCount} tris · {meshCount} meshes · {boneCount} bones')
-                                    .replace('{polyCount}', String(polyCount.toLocaleString()))
-                                    .replace('{meshCount}', String(meshCount))
-                                    .replace('{boneCount}', String(boneCount)) })] }), jsxRuntime.jsx("div", { className: ModelEditor_module.viewportShadingBar, children: ['wireframe', 'solid', 'material', 'rendered'].map((m) => (jsxRuntime.jsx("button", { className: `${ModelEditor_module.shadingBtn} ${shadingMode === m ? ModelEditor_module.shadingBtnActive : ''}`, onClick: (e) => {
-                                e.stopPropagation();
-                                setShadingMode(m);
-                            }, title: m.charAt(0).toUpperCase() + m.slice(1), "aria-label": m.charAt(0).toUpperCase() + m.slice(1), children: jsxRuntime.jsx(ui.NiceIcon, { name: m === 'wireframe'
-                                    ? 'hexagon'
-                                    : m === 'solid'
-                                        ? 'box'
-                                        : m === 'material'
-                                            ? 'palette'
-                                            : 'lightbulb', size: 16 }) }, m))) }), jsxRuntime.jsx("div", { className: ModelEditor_module.viewportGizmoInfo, children: jsxRuntime.jsx("button", { className: ModelEditor_module.shadingBtn, onClick: (e) => {
-                                e.stopPropagation();
-                                setGizmoSpace((s) => (s === 'local' ? 'world' : 'local'));
-                            }, title: t('modelEditorViewport.orientation', 'Orientation: {gizmoSpace}').replace('{gizmoSpace}', String(gizmoSpace)), "aria-label": t('modelEditorViewport.orientation', 'Orientation: {gizmoSpace}').replace('{gizmoSpace}', String(gizmoSpace)), children: gizmoSpace === 'local' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "target", size: 14 }), " ", t('modelEditorViewport.local', 'Local')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "globe", size: 14 }), " ", t('modelEditorViewport.world', 'World')] })) }) }), dragOver && (jsxRuntime.jsx("div", { className: ModelEditor_module.viewportDropZone, children: jsxRuntime.jsx("span", { children: t('modelEditorViewport.drop3dFilesHere', 'Drop 3D files here') }) }))] }), contextMenu && (jsxRuntime.jsxs("div", { role: "presentation", className: ModelEditor_module.contextMenu, style: { top: contextMenu.y, left: contextMenu.x }, onClick: closeContextMenu, children: [jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: ui.clickOnActivationKey, className: ModelEditor_module.contextItem, onClick: () => addPrimitive('cube'), children: [jsxRuntime.jsx("span", { children: t('modelEditorViewport.addCube', 'Add Cube') }), jsxRuntime.jsx("span", { className: ModelEditor_module.contextKey, children: "Shift+A" })] }), jsxRuntime.jsx("div", { role: "button", tabIndex: 0, onKeyDown: ui.clickOnActivationKey, className: ModelEditor_module.contextItem, onClick: () => addPrimitive('sphere'), children: jsxRuntime.jsx("span", { children: t('modelEditorViewport.addSphere', 'Add Sphere') }) }), jsxRuntime.jsx("div", { role: "button", tabIndex: 0, onKeyDown: ui.clickOnActivationKey, className: ModelEditor_module.contextItem, onClick: () => addSceneLight('point'), children: jsxRuntime.jsx("span", { children: t('modelEditorViewport.addPointLight', 'Add Point Light') }) }), jsxRuntime.jsx("div", { className: ModelEditor_module.contextSep }), jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, "aria-disabled": !selectedNode, onKeyDown: ui.clickOnActivationKey, className: ModelEditor_module.contextItem, onClick: duplicateSelected, style: !selectedNode ? { opacity: 0.4, pointerEvents: 'none' } : {}, children: [jsxRuntime.jsx("span", { children: t('modelEditorViewport.duplicate', 'Duplicate') }), jsxRuntime.jsx("span", { className: ModelEditor_module.contextKey, children: "Shift+D" })] }), jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, "aria-disabled": !selectedNode, onKeyDown: ui.clickOnActivationKey, className: ModelEditor_module.contextItem, onClick: deleteSelected, style: !selectedNode ? { opacity: 0.4, pointerEvents: 'none' } : {}, children: [jsxRuntime.jsx("span", { children: t('modelEditorViewport.delete', 'Delete') }), jsxRuntime.jsx("span", { className: ModelEditor_module.contextKey, children: "Del" })] }), jsxRuntime.jsx("div", { className: ModelEditor_module.contextSep }), jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: ui.clickOnActivationKey, className: ModelEditor_module.contextItem, onClick: () => {
-                            if (rootObjectRef.current) {
-                                focusOnObject(rootObjectRef.current);
-                            }
-                        }, children: [jsxRuntime.jsx("span", { children: t('modelEditorViewport.focusCamera', 'Focus Camera') }), jsxRuntime.jsx("span", { className: ModelEditor_module.contextKey, children: "F" })] }), jsxRuntime.jsx("div", { role: "button", tabIndex: 0, onKeyDown: ui.clickOnActivationKey, className: ModelEditor_module.contextItem, onClick: () => setSnapEnabled((v) => !v), children: jsxRuntime.jsxs("span", { children: [snapEnabled && jsxRuntime.jsx(ui.NiceIcon, { name: "check", size: 14 }), ' ', t('modelEditorViewport.snapToGrid', 'Snap to Grid')] }) })] }))] }));
-}), { displayName: 'ModelEditorViewport' });
-
-module.exports = ModelEditorViewport;
+    const {
+      mountRef,
+      dragOver,
+      handleDragOver,
+      handleDragLeave,
+      handleDrop,
+      handleViewportClick,
+      handleContextMenu,
+      editorMode,
+      polyCount,
+      meshCount,
+      boneCount,
+      shadingMode,
+      setShadingMode,
+      gizmoSpace,
+      setGizmoSpace,
+      contextMenu,
+      closeContextMenu,
+      addPrimitive,
+      addSceneLight,
+      duplicateSelected,
+      deleteSelected,
+      selectedNode,
+      rootObjectRef,
+      focusOnObject,
+      snapEnabled,
+      setSnapEnabled
+    } = api;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "presentation",
+          ref: mountRef,
+          className: `${ModelEditor_module.default.viewportContainer} ${dragOver ? ModelEditor_module.default.dragOver : ""}`,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          onClick: handleViewportClick,
+          onContextMenu: handleContextMenu,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.viewportOverlay, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.viewportBadge, children: t(...MODE_BADGE[editorMode]) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.viewportBadge, children: t(
+                "modelEditorViewport.trisMeshesBones",
+                "{polyCount} tris · {meshCount} meshes · {boneCount} bones"
+              ).replace("{polyCount}", String(polyCount.toLocaleString())).replace("{meshCount}", String(meshCount)).replace("{boneCount}", String(boneCount)) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.viewportShadingBar, children: ["wireframe", "solid", "material", "rendered"].map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: `${ModelEditor_module.default.shadingBtn} ${shadingMode === m ? ModelEditor_module.default.shadingBtnActive : ""}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShadingMode(m);
+                },
+                title: m.charAt(0).toUpperCase() + m.slice(1),
+                "aria-label": m.charAt(0).toUpperCase() + m.slice(1),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.NiceIcon,
+                  {
+                    name: m === "wireframe" ? "hexagon" : m === "solid" ? "box" : m === "material" ? "palette" : "lightbulb",
+                    size: 16
+                  }
+                )
+              },
+              m
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.viewportGizmoInfo, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: ModelEditor_module.default.shadingBtn,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setGizmoSpace((s) => s === "local" ? "world" : "local");
+                },
+                title: t("modelEditorViewport.orientation", "Orientation: {gizmoSpace}").replace(
+                  "{gizmoSpace}",
+                  String(gizmoSpace)
+                ),
+                "aria-label": t("modelEditorViewport.orientation", "Orientation: {gizmoSpace}").replace(
+                  "{gizmoSpace}",
+                  String(gizmoSpace)
+                ),
+                children: gizmoSpace === "local" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "target", size: 14 }),
+                  " ",
+                  t("modelEditorViewport.local", "Local")
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "globe", size: 14 }),
+                  " ",
+                  t("modelEditorViewport.world", "World")
+                ] })
+              }
+            ) }),
+            dragOver && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.viewportDropZone, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("modelEditorViewport.drop3dFilesHere", "Drop 3D files here") }) })
+          ]
+        }
+      ),
+      contextMenu && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: "presentation",
+          className: ModelEditor_module.default.contextMenu,
+          style: { top: contextMenu.y, left: contextMenu.x },
+          onClick: closeContextMenu,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: ui.clickOnActivationKey,
+                className: ModelEditor_module.default.contextItem,
+                onClick: () => addPrimitive("cube"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("modelEditorViewport.addCube", "Add Cube") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.contextKey, children: "Shift+A" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: ui.clickOnActivationKey,
+                className: ModelEditor_module.default.contextItem,
+                onClick: () => addPrimitive("sphere"),
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("modelEditorViewport.addSphere", "Add Sphere") })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: ui.clickOnActivationKey,
+                className: ModelEditor_module.default.contextItem,
+                onClick: () => addSceneLight("point"),
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("modelEditorViewport.addPointLight", "Add Point Light") })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.contextSep }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-disabled": !selectedNode,
+                onKeyDown: ui.clickOnActivationKey,
+                className: ModelEditor_module.default.contextItem,
+                onClick: duplicateSelected,
+                style: !selectedNode ? { opacity: 0.4, pointerEvents: "none" } : {},
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("modelEditorViewport.duplicate", "Duplicate") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.contextKey, children: "Shift+D" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-disabled": !selectedNode,
+                onKeyDown: ui.clickOnActivationKey,
+                className: ModelEditor_module.default.contextItem,
+                onClick: deleteSelected,
+                style: !selectedNode ? { opacity: 0.4, pointerEvents: "none" } : {},
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("modelEditorViewport.delete", "Delete") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.contextKey, children: "Del" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.contextSep }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: ui.clickOnActivationKey,
+                className: ModelEditor_module.default.contextItem,
+                onClick: () => {
+                  if (rootObjectRef.current) {
+                    focusOnObject(rootObjectRef.current);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("modelEditorViewport.focusCamera", "Focus Camera") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.contextKey, children: "F" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onKeyDown: ui.clickOnActivationKey,
+                className: ModelEditor_module.default.contextItem,
+                onClick: () => setSnapEnabled((v) => !v),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  snapEnabled && /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "check", size: 14 }),
+                  " ",
+                  t("modelEditorViewport.snapToGrid", "Snap to Grid")
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }),
+  { displayName: "ModelEditorViewport" }
+);
+exports.default = ModelEditorViewport;