@base2datadesign/viewer-react 0.1.4 → 0.1.6

package/dist/AccessAssetsMenu.d.ts

@@ -9,6 +9,7 @@ export type AccessAssetsMenuProps = {
     items: AccessAssetsItem[];
     disabled?: boolean;
     className?: string;
+    fullWidth?: boolean;
 };
-export default function AccessAssetsMenu({ label, items, disabled, className, }: AccessAssetsMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default function AccessAssetsMenu({ label, items, disabled, className, fullWidth, }: AccessAssetsMenuProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=AccessAssetsMenu.d.ts.map

package/dist/AccessAssetsMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccessAssetsMenu.d.ts","sourceRoot":"","sources":["../src/AccessAssetsMenu.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAuB,EACvB,KAAK,EACL,QAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,kDAsFvB"}
+{"version":3,"file":"AccessAssetsMenu.d.ts","sourceRoot":"","sources":["../src/AccessAssetsMenu.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAuB,EACvB,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,SAAiB,GAClB,EAAE,qBAAqB,kDA0FvB"}

package/dist/AccessAssetsMenu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-export default function AccessAssetsMenu({ label = "access assets", items, disabled = false, className, }) {
+export default function AccessAssetsMenu({ label = "access assets", items, disabled = false, className, fullWidth = false, }) {
     const containerRef = useRef(null);
     const [open, setOpen] = useState(false);
     const resolvedItems = useMemo(() => items.filter((item) => item && item.label && typeof item.onClick === "function"), [items]);
@@ -19,7 +19,7 @@ export default function AccessAssetsMenu({ label = "access assets", items, disab
     }, [open]);
     if (!resolvedItems.length)
         return null;
-    return (_jsxs("div", { ref: containerRef, className: className, style: { width: "100%", maxWidth: "220px" }, children: [_jsxs("button", { type: "button", onClick: () => setOpen((prev) => !prev), disabled: disabled, style: {
+    return (_jsxs("div", { ref: containerRef, className: className, style: { width: "100%", maxWidth: fullWidth ? "none" : "220px" }, children: [_jsxs("button", { type: "button", onClick: () => setOpen((prev) => !prev), disabled: disabled, style: {
                     width: "100%",
                     borderRadius: "8px",
                     border: "1px solid #e2e8f0",

package/dist/ViewControls.d.ts

@@ -3,6 +3,11 @@ export type LightingOption = {
     label: string;
     summary?: string;
 };
+export type MaterialOption = {
+    id: string;
+    label: string;
+    summary?: string;
+};
 export type SkyOption = {
     id: string;
     label: string;
@@ -11,6 +16,9 @@ export type SkyOption = {
 export type ViewControlsProps = {
     activeLightingPreset: string;
     onLightingChange: (preset: string) => void;
+    materialOptions?: MaterialOption[];
+    activeMaterialPreset?: string;
+    onMaterialChange?: (preset: string) => void;
     onCameraViewChange: (view: string) => void;
     skyOptions: SkyOption[];
     activeSkyId: string;
@@ -19,5 +27,5 @@ export type ViewControlsProps = {
     veilsEnabled?: boolean;
     onToggleVeils?: () => void;
 };
-export default function ViewControls({ activeLightingPreset, onLightingChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, veilsEnabled, onToggleVeils, }: ViewControlsProps): import("react/jsx-runtime").JSX.Element;
+export default function ViewControls({ activeLightingPreset, onLightingChange, materialOptions, activeMaterialPreset, onMaterialChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, veilsEnabled, onToggleVeils, }: ViewControlsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ViewControls.d.ts.map

package/dist/ViewControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewControls.d.ts","sourceRoot":"","sources":["../src/ViewControls.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AA2CF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,WAAW,EACX,eAAe,EACf,YAAmB,EACnB,aAAa,GACd,EAAE,iBAAiB,2CA6QnB"}
+{"version":3,"file":"ViewControls.d.ts","sourceRoot":"","sources":["../src/ViewControls.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AA2CF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,WAAW,EACX,eAAe,EACf,YAAmB,EACnB,aAAa,GACd,EAAE,iBAAiB,2CA8WnB"}

package/dist/ViewControls.js

@@ -37,18 +37,23 @@ const dropdownStyle = {
     minWidth: "220px",
     zIndex: 60,
 };
-export default function ViewControls({ activeLightingPreset, onLightingChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, veilsEnabled = true, onToggleVeils, }) {
+export default function ViewControls({ activeLightingPreset, onLightingChange, materialOptions, activeMaterialPreset, onMaterialChange, onCameraViewChange, skyOptions, activeSkyId, onSkyChange, lightingOptions, veilsEnabled = true, onToggleVeils, }) {
     const lightingMenuRef = useRef(null);
+    const materialMenuRef = useRef(null);
     const skyMenuRef = useRef(null);
     const [lightingExpanded, setLightingExpanded] = useState(false);
+    const [materialExpanded, setMaterialExpanded] = useState(false);
     const [skyExpanded, setSkyExpanded] = useState(false);
     const [lightingHover, setLightingHover] = useState(false);
+    const [materialHover, setMaterialHover] = useState(false);
     const [skyHover, setSkyHover] = useState(false);
     const [viewHover, setViewHover] = useState(false);
     const activeLighting = useMemo(() => lightingOptions.find((option) => option.id === activeLightingPreset) ?? lightingOptions[0], [lightingOptions, activeLightingPreset]);
     const activeSky = useMemo(() => skyOptions.find((option) => option.id === activeSkyId) ?? skyOptions[0], [skyOptions, activeSkyId]);
+    const activeMaterial = useMemo(() => materialOptions?.find((option) => option.id === activeMaterialPreset) ??
+        materialOptions?.[0], [materialOptions, activeMaterialPreset]);
     useEffect(() => {
-        if (!lightingExpanded && !skyExpanded)
+        if (!lightingExpanded && !skyExpanded && !materialExpanded)
             return;
         const onMouseDown = (event) => {
             const target = event.target;
@@ -56,15 +61,19 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, o
                 return;
             if (lightingMenuRef.current?.contains(target))
                 return;
+            if (materialMenuRef.current?.contains(target))
+                return;
             if (skyMenuRef.current?.contains(target))
                 return;
             setLightingExpanded(false);
+            setMaterialExpanded(false);
             setSkyExpanded(false);
         };
         const onKeyDown = (event) => {
             if (event.key !== "Escape")
                 return;
             setLightingExpanded(false);
+            setMaterialExpanded(false);
             setSkyExpanded(false);
         };
         window.addEventListener("mousedown", onMouseDown);
@@ -73,7 +82,7 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, o
             window.removeEventListener("mousedown", onMouseDown);
             window.removeEventListener("keydown", onKeyDown);
         };
-    }, [lightingExpanded, skyExpanded]);
+    }, [lightingExpanded, materialExpanded, skyExpanded]);
     return (_jsxs("div", { style: { display: "flex", gap: "10px", alignItems: "flex-end" }, children: [_jsx("div", { ref: lightingMenuRef, children: _jsxs("div", { style: cardStyle, onMouseEnter: () => setLightingHover(true), onMouseLeave: () => setLightingHover(false), children: [lightingExpanded ? (_jsx("div", { style: dropdownStyle, children: lightingOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => {
                                     onLightingChange(option.id);
                                     setLightingExpanded(false);
@@ -113,7 +122,47 @@ export default function ViewControls({ activeLightingPreset, onLightingChange, o
                                         color: "#64748b",
                                         opacity: !veilsEnabled || lightingExpanded || lightingHover ? 1 : 0,
                                         transition: "opacity 0.2s ease",
-                                    }, children: lightingExpanded ? "▼" : "▲" })] }), veilsEnabled && !lightingExpanded && !lightingHover ? _jsx("div", { style: veilStyle, children: "LIGHTING" }) : null] }) }), _jsxs("div", { style: { ...cardStyle, display: "flex" }, onMouseEnter: () => setViewHover(true), onMouseLeave: () => setViewHover(false), children: [_jsx("button", { type: "button", onClick: () => onCameraViewChange("interior"), style: {
+                                    }, children: lightingExpanded ? "▼" : "▲" })] }), veilsEnabled && !lightingExpanded && !lightingHover ? _jsx("div", { style: veilStyle, children: "LIGHTING" }) : null] }) }), materialOptions && materialOptions.length && onMaterialChange ? (_jsx("div", { ref: materialMenuRef, children: _jsxs("div", { style: cardStyle, onMouseEnter: () => setMaterialHover(true), onMouseLeave: () => setMaterialHover(false), children: [materialExpanded ? (_jsx("div", { style: dropdownStyle, children: materialOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => {
+                                    onMaterialChange(option.id);
+                                    setMaterialExpanded(false);
+                                }, style: {
+                                    width: "100%",
+                                    border: "none",
+                                    borderRadius: "8px",
+                                    padding: "8px 10px",
+                                    textAlign: "left",
+                                    background: option.id === activeMaterialPreset ? "rgba(49,67,144,0.12)" : "transparent",
+                                    color: option.id === activeMaterialPreset ? "#314390" : "#475569",
+                                    cursor: "pointer",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "2px",
+                                    fontSize: "12px",
+                                    textTransform: "lowercase",
+                                }, children: [_jsx("span", { children: option.label }), option.summary ? (_jsx("span", { style: { fontSize: "10px", opacity: 0.7 }, children: option.summary })) : null] }, option.id))) })) : null, _jsxs("button", { type: "button", onClick: () => {
+                                setMaterialExpanded((prev) => !prev);
+                                setLightingExpanded(false);
+                                setSkyExpanded(false);
+                            }, style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                gap: "10px",
+                                padding: "8px 12px",
+                                border: "none",
+                                background: "transparent",
+                                width: "100%",
+                                cursor: "pointer",
+                            }, children: [_jsx("span", { style: {
+                                        ...labelStyle,
+                                        opacity: !veilsEnabled || materialExpanded || materialHover ? 1 : 0,
+                                        transition: "opacity 0.2s ease",
+                                    }, children: activeMaterial?.label ?? activeMaterialPreset ?? "materials" }), _jsx("span", { style: {
+                                        fontSize: "11px",
+                                        color: "#64748b",
+                                        opacity: !veilsEnabled || materialExpanded || materialHover ? 1 : 0,
+                                        transition: "opacity 0.2s ease",
+                                    }, children: materialExpanded ? "▼" : "▲" })] }), veilsEnabled && !materialExpanded && !materialHover ? _jsx("div", { style: veilStyle, children: "MATERIALS" }) : null] }) })) : null, _jsxs("div", { style: { ...cardStyle, display: "flex" }, onMouseEnter: () => setViewHover(true), onMouseLeave: () => setViewHover(false), children: [_jsx("button", { type: "button", onClick: () => onCameraViewChange("interior"), style: {
                             padding: "8px 12px",
                             border: "none",
                             borderRight: "1px solid #e2e8f0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base2datadesign/viewer-react",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/index.js",