@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/cjs/model/ModelEditorSubComponents.js

@@ -1,125 +1,290 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-var THREE = require('three');
-var i18n = require('../core/i18n.js');
-var ModelEditor_module = require('./ModelEditor.module.css.js');
-var modelEditorTypes = require('./modelEditorTypes.js');
-
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
+const THREE = require("three");
+const i18n = require("../core/i18n.js");
+const ModelEditor_module = require("./ModelEditor.module.css.js");
+const modelEditorTypes = require("./modelEditorTypes.js");
 function _interopNamespaceDefault(e) {
-   var n = Object.create(null);
-   if (e) {
-      Object.keys(e).forEach(function (k) {
-         if (k !== 'default') {
-            var d = Object.getOwnPropertyDescriptor(e, k);
-            Object.defineProperty(n, k, d.get ? d : {
-               enumerable: true,
-               get: function () { return e[k]; }
-            });
-         }
-      });
-   }
-   n.default = e;
-   return Object.freeze(n);
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
-
-var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
-
-/* ═══════════════════════════════════════════
-   Sub-components
-   ═══════════════════════════════════════════ */
-/** Vec3 input row for position/scale */
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
 const Vec3Row = ({ label, value, onChange }) => {
-    const [, forceUpdate] = React.useState(0);
-    const set = (axis, v) => {
-        const n = parseFloat(v);
-        if (!isNaN(n)) {
-            value[axis] = n;
-            forceUpdate((x) => x + 1);
-            onChange();
+  const [, forceUpdate] = React.useState(0);
+  const set = (axis, v) => {
+    const n = parseFloat(v);
+    if (!isNaN(n)) {
+      value[axis] = n;
+      forceUpdate((x) => x + 1);
+      onChange();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propVec3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceTextInput,
+        {
+          className: ModelEditor_module.default.propVec3X,
+          value: value.x.toFixed(3),
+          onChange: (val) => set("x", val)
         }
-    };
-    return (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: label }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propVec3, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: ModelEditor_module.propVec3X, value: value.x.toFixed(3), onChange: (val) => set('x', val) }), jsxRuntime.jsx(ui.NiceTextInput, { className: ModelEditor_module.propVec3Y, value: value.y.toFixed(3), onChange: (val) => set('y', val) }), jsxRuntime.jsx(ui.NiceTextInput, { className: ModelEditor_module.propVec3Z, value: value.z.toFixed(3), onChange: (val) => set('z', val) })] })] }));
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceTextInput,
+        {
+          className: ModelEditor_module.default.propVec3Y,
+          value: value.y.toFixed(3),
+          onChange: (val) => set("y", val)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceTextInput,
+        {
+          className: ModelEditor_module.default.propVec3Z,
+          value: value.z.toFixed(3),
+          onChange: (val) => set("z", val)
+        }
+      )
+    ] })
+  ] });
 };
-/** Vec3 input row for rotation (shows degrees) */
 const Vec3RowDeg = ({ label, value, onChange }) => {
-    const [, forceUpdate] = React.useState(0);
-    const set = (axis, v) => {
-        const n = parseFloat(v);
-        if (!isNaN(n)) {
-            value[axis] = n / modelEditorTypes.DEG;
-            forceUpdate((x) => x + 1);
-            onChange();
+  const [, forceUpdate] = React.useState(0);
+  const set = (axis, v) => {
+    const n = parseFloat(v);
+    if (!isNaN(n)) {
+      value[axis] = n / modelEditorTypes.DEG;
+      forceUpdate((x) => x + 1);
+      onChange();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propVec3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceTextInput,
+        {
+          className: ModelEditor_module.default.propVec3X,
+          value: (value.x * modelEditorTypes.DEG).toFixed(1),
+          onChange: (val) => set("x", val)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceTextInput,
+        {
+          className: ModelEditor_module.default.propVec3Y,
+          value: (value.y * modelEditorTypes.DEG).toFixed(1),
+          onChange: (val) => set("y", val)
         }
-    };
-    return (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: label }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propVec3, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: ModelEditor_module.propVec3X, value: (value.x * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set('x', val) }), jsxRuntime.jsx(ui.NiceTextInput, { className: ModelEditor_module.propVec3Y, value: (value.y * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set('y', val) }), jsxRuntime.jsx(ui.NiceTextInput, { className: ModelEditor_module.propVec3Z, value: (value.z * modelEditorTypes.DEG).toFixed(1), onChange: (val) => set('z', val) })] })] }));
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.NiceTextInput,
+        {
+          className: ModelEditor_module.default.propVec3Z,
+          value: (value.z * modelEditorTypes.DEG).toFixed(1),
+          onChange: (val) => set("z", val)
+        }
+      )
+    ] })
+  ] });
 };
-/** Material card with editable properties */
 const MaterialCard = ({ material, active, onClick, onUpdate }) => {
-    var _a, _b, _c, _d;
-    const { t } = i18n.useNiceTranslation();
-    const mat = material;
-    const hasColor = 'color' in mat;
-    const hasMetalness = 'metalness' in mat;
-    const hasRoughness = 'roughness' in mat;
-    const hasEmissive = 'emissive' in mat;
-    const hasMap = 'map' in mat;
-    const hasNormalMap = 'normalMap' in mat;
-    const setColor = (hex) => {
-        if (hasColor) {
-            mat.color.set(hex);
-            mat.needsUpdate = true;
-            onUpdate();
-        }
-    };
-    const setNum = (prop, val) => {
-        mat[prop] = val;
-        mat.needsUpdate = true;
-        onUpdate();
-    };
-    return (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: ui.clickOnActivationKey, className: `${ModelEditor_module.materialCard} ${active ? ModelEditor_module.materialCardActive : ''}`, onClick: onClick, children: [jsxRuntime.jsx("div", { className: ModelEditor_module.materialHeader, children: jsxRuntime.jsx("span", { className: ModelEditor_module.materialName, children: mat.name || mat.type }) }), hasColor && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorSubComponents.color', 'Color') }), jsxRuntime.jsx(ui.NiceColorPicker, { value: `#${mat.color.getHexString()}`, onChange: (c) => setColor(c) }), jsxRuntime.jsxs("span", { style: { fontSize: 10, color: 'var(--nice-text-secondary, #888)' }, children: ["#", mat.color.getHexString()] })] })), hasMetalness && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorSubComponents.metal', 'Metal') }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 1, step: 0.01, value: mat.metalness, onChange: (val) => setNum('metalness', val), style: { flex: 1 } }), jsxRuntime.jsx("span", { style: {
-                            fontSize: 9,
-                            color: 'var(--nice-text-secondary, #888)',
-                            width: 28,
-                            textAlign: 'right',
-                        }, children: mat.metalness.toFixed(2) })] })), hasRoughness && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorSubComponents.rough', 'Rough') }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 1, step: 0.01, value: mat.roughness, onChange: (val) => setNum('roughness', val), style: { flex: 1 } }), jsxRuntime.jsx("span", { style: {
-                            fontSize: 9,
-                            color: 'var(--nice-text-secondary, #888)',
-                            width: 28,
-                            textAlign: 'right',
-                        }, children: mat.roughness.toFixed(2) })] })), hasEmissive && mat.emissive && (jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorSubComponents.emissive', 'Emissive') }), jsxRuntime.jsx(ui.NiceColorPicker, { value: `#${mat.emissive.getHexString()}`, onChange: (c) => {
-                            mat.emissive.set(c);
-                            mat.needsUpdate = true;
-                            onUpdate();
-                        } })] })), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorSubComponents.opacity', 'Opacity') }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 1, step: 0.01, value: mat.opacity, onChange: (val) => {
-                            mat.opacity = val;
-                            mat.transparent = val < 1;
-                            mat.needsUpdate = true;
-                            onUpdate();
-                        }, style: { flex: 1 } }), jsxRuntime.jsx("span", { style: {
-                            fontSize: 9,
-                            color: 'var(--nice-text-secondary, #888)',
-                            width: 28,
-                            textAlign: 'right',
-                        }, children: mat.opacity.toFixed(2) })] }), jsxRuntime.jsxs("div", { className: ModelEditor_module.propRow, children: [jsxRuntime.jsx("span", { className: ModelEditor_module.propLabel, children: t('modelEditorSubComponents.side', 'Side') }), jsxRuntime.jsx(ui.NiceSelect, { className: ModelEditor_module.propSelect, value: String(mat.side), onChange: (val) => {
-                            mat.side = parseInt(val);
-                            mat.needsUpdate = true;
-                            onUpdate();
-                        }, options: [
-                            {
-                                value: String(THREE__namespace.FrontSide),
-                                label: t('modelEditorSubComponents.front', 'Front'),
-                            },
-                            { value: String(THREE__namespace.BackSide), label: t('modelEditorSubComponents.back', 'Back') },
-                            {
-                                value: String(THREE__namespace.DoubleSide),
-                                label: t('modelEditorSubComponents.double', 'Double'),
-                            },
-                        ] })] }), hasMap && mat.map && (jsxRuntime.jsxs("div", { className: ModelEditor_module.textureSlot, children: [jsxRuntime.jsx("div", { className: ModelEditor_module.textureThumb, children: mat.map.image != null && (jsxRuntime.jsx("img", { src: (_a = mat.map.image.src) !== null && _a !== void 0 ? _a : '', alt: "diffuse" })) }), jsxRuntime.jsxs("div", { className: ModelEditor_module.textureInfo, children: [jsxRuntime.jsx("div", { className: ModelEditor_module.textureName, children: t('modelEditorSubComponents.diffuseMap', 'Diffuse Map') }), jsxRuntime.jsxs("div", { style: { fontSize: 9, color: 'var(--nice-text-secondary, #666)' }, children: [(_b = mat.map.image) === null || _b === void 0 ? void 0 : _b.width, "\u00D7", (_c = mat.map.image) === null || _c === void 0 ? void 0 : _c.height] })] })] })), hasNormalMap && mat.normalMap && (jsxRuntime.jsxs("div", { className: ModelEditor_module.textureSlot, children: [jsxRuntime.jsx("div", { className: ModelEditor_module.textureThumb, children: mat.normalMap.image != null && (jsxRuntime.jsx("img", { src: (_d = mat.normalMap.image.src) !== null && _d !== void 0 ? _d : '', alt: "normal" })) }), jsxRuntime.jsx("div", { className: ModelEditor_module.textureInfo, children: jsxRuntime.jsx("div", { className: ModelEditor_module.textureName, children: t('modelEditorSubComponents.normalMap', 'Normal Map') }) })] }))] }));
+  const { t } = i18n.useNiceTranslation();
+  const mat = material;
+  const hasColor = "color" in mat;
+  const hasMetalness = "metalness" in mat;
+  const hasRoughness = "roughness" in mat;
+  const hasEmissive = "emissive" in mat;
+  const hasMap = "map" in mat;
+  const hasNormalMap = "normalMap" in mat;
+  const setColor = (hex) => {
+    if (hasColor) {
+      mat.color.set(hex);
+      mat.needsUpdate = true;
+      onUpdate();
+    }
+  };
+  const setNum = (prop, val) => {
+    mat[prop] = val;
+    mat.needsUpdate = true;
+    onUpdate();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: ui.clickOnActivationKey,
+      className: `${ModelEditor_module.default.materialCard} ${active ? ModelEditor_module.default.materialCardActive : ""}`,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.materialHeader, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.materialName, children: mat.name || mat.type }) }),
+        hasColor && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorSubComponents.color", "Color") }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.NiceColorPicker, { value: `#${mat.color.getHexString()}`, onChange: (c) => setColor(c) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 10, color: "var(--nice-text-secondary, #888)" }, children: [
+            "#",
+            mat.color.getHexString()
+          ] })
+        ] }),
+        hasMetalness && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorSubComponents.metal", "Metal") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceSlider,
+            {
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: mat.metalness,
+              onChange: (val) => setNum("metalness", val),
+              style: { flex: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 9,
+                color: "var(--nice-text-secondary, #888)",
+                width: 28,
+                textAlign: "right"
+              },
+              children: mat.metalness.toFixed(2)
+            }
+          )
+        ] }),
+        hasRoughness && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorSubComponents.rough", "Rough") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceSlider,
+            {
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: mat.roughness,
+              onChange: (val) => setNum("roughness", val),
+              style: { flex: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 9,
+                color: "var(--nice-text-secondary, #888)",
+                width: 28,
+                textAlign: "right"
+              },
+              children: mat.roughness.toFixed(2)
+            }
+          )
+        ] }),
+        hasEmissive && mat.emissive && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorSubComponents.emissive", "Emissive") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceColorPicker,
+            {
+              value: `#${mat.emissive.getHexString()}`,
+              onChange: (c) => {
+                mat.emissive.set(c);
+                mat.needsUpdate = true;
+                onUpdate();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorSubComponents.opacity", "Opacity") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceSlider,
+            {
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: mat.opacity,
+              onChange: (val) => {
+                mat.opacity = val;
+                mat.transparent = val < 1;
+                mat.needsUpdate = true;
+                onUpdate();
+              },
+              style: { flex: 1 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 9,
+                color: "var(--nice-text-secondary, #888)",
+                width: 28,
+                textAlign: "right"
+              },
+              children: mat.opacity.toFixed(2)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.propRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: ModelEditor_module.default.propLabel, children: t("modelEditorSubComponents.side", "Side") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceSelect,
+            {
+              className: ModelEditor_module.default.propSelect,
+              value: String(mat.side),
+              onChange: (val) => {
+                mat.side = parseInt(val);
+                mat.needsUpdate = true;
+                onUpdate();
+              },
+              options: [
+                {
+                  value: String(THREE__namespace.FrontSide),
+                  label: t("modelEditorSubComponents.front", "Front")
+                },
+                { value: String(THREE__namespace.BackSide), label: t("modelEditorSubComponents.back", "Back") },
+                {
+                  value: String(THREE__namespace.DoubleSide),
+                  label: t("modelEditorSubComponents.double", "Double")
+                }
+              ]
+            }
+          )
+        ] }),
+        hasMap && mat.map && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.textureSlot, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.textureThumb, children: mat.map.image != null && /* @__PURE__ */ jsxRuntime.jsx("img", { src: mat.map.image.src ?? "", alt: "diffuse" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.textureInfo, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.textureName, children: t("modelEditorSubComponents.diffuseMap", "Diffuse Map") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 9, color: "var(--nice-text-secondary, #666)" }, children: [
+              mat.map.image?.width,
+              "×",
+              mat.map.image?.height
+            ] })
+          ] })
+        ] }),
+        hasNormalMap && mat.normalMap && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ModelEditor_module.default.textureSlot, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.textureThumb, children: mat.normalMap.image != null && /* @__PURE__ */ jsxRuntime.jsx("img", { src: mat.normalMap.image.src ?? "", alt: "normal" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.textureInfo, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ModelEditor_module.default.textureName, children: t("modelEditorSubComponents.normalMap", "Normal Map") }) })
+        ] })
+      ]
+    }
+  );
 };
-
 exports.MaterialCard = MaterialCard;
 exports.Vec3Row = Vec3Row;
 exports.Vec3RowDeg = Vec3RowDeg;