Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Local prop override interface for scene tree GUI #323

Merged
merged 3 commits into from
Nov 9, 2024
Merged

Local prop override interface for scene tree GUI #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e9a3f7
Add GUI for locally overriding scene node props
brentyi Nov 9, 2024
5a75f69
support infinity
brentyi Nov 9, 2024
5d07bb8
Minor UX adjustments
brentyi Nov 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/viser/client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"dependencies": {
"@mantine/core": "^7.6.2",
"@mantine/dates": "^7.6.2",
"@mantine/form": "^7.13.5",
"@mantine/hooks": "^7.6.2",
"@mantine/notifications": "^7.6.2",
"@mantine/vanilla-extract": "^7.6.2",
Expand Down
28 changes: 25 additions & 3 deletions src/viser/client/src/ControlPanel/SceneTreeTable.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { style } from "@vanilla-extract/css";
import { globalStyle, style } from "@vanilla-extract/css";
import { vars } from "../AppTheme";

export const tableWrapper = style({
border: "1px solid",
borderColor: vars.colors.defaultBorder,
borderRadius: vars.radius.xs,
padding: "0.1em 0",
overflowX: "auto",
Expand All @@ -12,13 +10,33 @@ export const tableWrapper = style({
gap: "0",
});

export const propsWrapper = style({
position: "relative",
borderRadius: vars.radius.xs,
border: "1px solid",
borderColor: vars.colors.defaultBorder,
padding: vars.spacing.xs,
paddingTop: "1.5em",
boxSizing: "border-box",
margin: vars.spacing.xs,
marginTop: "0.1em",
overflowX: "auto",
display: "flex",
flexDirection: "column",
gap: vars.spacing.xs,
});

export const caretIcon = style({
opacity: 0.5,
height: "1em",
width: "1em",
transform: "translateY(0.1em)",
});

export const editIconWrapper = style({
opacity: "0",
});

export const tableRow = style({
display: "flex",
alignItems: "center",
Expand All @@ -27,3 +45,7 @@ export const tableRow = style({
lineHeight: "2em",
fontSize: "0.875em",
});

globalStyle(`${tableRow}:hover ${editIconWrapper}`, {
opacity: "1.0",
});
285 changes: 281 additions & 4 deletions src/viser/client/src/ControlPanel/SceneTreeTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,258 @@
import { ViewerContext } from "../App";
import { Box, ScrollArea, Tooltip } from "@mantine/core";
import {
IconCaretDown,
IconCaretRight,
IconEye,
IconEyeOff,
IconPencil,
IconDeviceFloppy,
IconX,
} from "@tabler/icons-react";
import React from "react";
import { caretIcon, tableRow, tableWrapper } from "./SceneTreeTable.css";
import {
caretIcon,
editIconWrapper,
propsWrapper,
tableRow,
tableWrapper,
} from "./SceneTreeTable.css";
import { useDisclosure } from "@mantine/hooks";
import { useForm } from "@mantine/form";
import { ViewerContext } from "../App";
import {
Box,
Flex,
ScrollArea,
TextInput,
Tooltip,
ColorInput,
} from "@mantine/core";

function EditNodeProps({
nodeName,
close,
}: {
nodeName: string;
close: () => void;
}) {
const viewer = React.useContext(ViewerContext)!;
const node = viewer.useSceneTree((state) => state.nodeFromName[nodeName]);
const updateSceneNode = viewer.useSceneTree((state) => state.updateSceneNode);

if (node === undefined) {
return null;
}

// We'll use JSON, but add support for Infinity.
// We use infinity for point cloud rendering norms.
function stringify(value: any) {
if (value == Number.POSITIVE_INFINITY) {
return "Infinity";
} else {
return JSON.stringify(value);
}
}
function parse(value: string) {
if (value === "Infinity") {
return Number.POSITIVE_INFINITY;
} else {
return JSON.parse(value);
}
}

const props = node.message.props;
console.log(props);
const initialValues = Object.fromEntries(
Object.entries(props)
.filter(([, value]) => !(value instanceof Uint8Array))
.map(([key, value]) => [key, stringify(value)]),
);

const form = useForm({
initialValues: {
...initialValues,
},
validate: {
...Object.fromEntries(
Object.keys(initialValues).map((key) => [
key,
(value: string) => {
try {
parse(value);
return null;
} catch (e) {
return "Invalid JSON";
}
},
]),
),
},
});

const handleSubmit = (values: Record<string, string>) => {
Object.entries(values).forEach(([key, value]) => {
if (value !== initialValues[key]) {
try {
const parsedValue = parse(value);
updateSceneNode(nodeName, { [key]: parsedValue });
// Update the form value to match the parsed value
form.setFieldValue(key, stringify(parsedValue));
} catch (e) {
console.error("Failed to parse JSON:", e);
}
}
});
};

return (
<Box
className={propsWrapper}
component="form"
onSubmit={form.onSubmit(handleSubmit)}
>
<Box
style={{
position: "absolute",
top: "0.3em",
right: "0.4em",
}}
>
<Tooltip label={"Close props"}>
<IconX
style={{
cursor: "pointer",
width: "1em",
height: "1em",
display: "block",
color: "--mantine-color-error",
opacity: "0.7",
}}
onClick={(evt) => {
evt.stopPropagation();
close();
}}
/>
</Tooltip>
</Box>
{Object.entries(props).map(([key, value]) => {
if (value instanceof Uint8Array) {
return null;
}

const isDirty = form.values[key] !== initialValues[key];

return (
<Flex key={key} align="center">
<Box size="sm" fz="xs" style={{ flexGrow: "1" }}>
{key.charAt(0).toUpperCase() + key.slice(1).split("_").join(" ")}
</Box>
<Flex gap="xs" w="9em">
{(() => {
// Check if this is a color property
try {
const parsedValue = parse(form.values[key]);
const isColorProp =
key.toLowerCase().includes("color") &&
Array.isArray(parsedValue) &&
parsedValue.length === 3 &&
parsedValue.every((v) => typeof v === "number");

if (isColorProp) {
// Convert RGB array [0-1] to hex color
const rgbToHex = (r: number, g: number, b: number) => {
const toHex = (n: number) => {
const hex = Math.round(n).toString(16);
return hex.length === 1 ? "0" + hex : hex;
};
return "#" + toHex(r) + toHex(g) + toHex(b);
};

// Convert hex color to RGB array [0-1]
const hexToRgb = (hex: string) => {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return [r, g, b];
};

return (
<ColorInput
size="xs"
styles={{
input: { height: "1.625rem", minHeight: "1.625rem" },
// icon: { transform: "scale(0.8)" },
}}
w="100%"
value={rgbToHex(
parsedValue[0],
parsedValue[1],
parsedValue[2],
)}
onChange={(hex) => {
const rgb = hexToRgb(hex);
form.setFieldValue(key, stringify(rgb));
form.onSubmit(handleSubmit)();
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
form.onSubmit(handleSubmit)();
}
}}
/>
);
}
} catch (e) {
// If parsing fails, fall back to TextInput
}

// Default TextInput for non-color properties
return (
<TextInput
size="xs"
styles={{
input: {
height: "1.625rem",
minHeight: "1.625rem",
width: "100%",
},
// icon: { transform: "scale(0.8)" },
}}
w="100%"
{...form.getInputProps(key)}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
form.onSubmit(handleSubmit)();
}
}}
rightSection={
<IconDeviceFloppy
style={{
width: "1rem",
height: "1rem",
opacity: isDirty ? 1.0 : 0.3,
cursor: isDirty ? "pointer" : "default",
}}
onClick={() => {
if (isDirty) {
form.onSubmit(handleSubmit)();
}
}}
/>
}
/>
);
})()}
</Flex>
</Flex>
);
})}
<Box fz="xs" opacity="0.4">
Changes can be overwritten by updates from the server.
</Box>
</Box>
);
}

/* Table for seeing an overview of the scene tree, toggling visibility, etc. * */
export default function SceneTreeTable() {
Expand Down Expand Up @@ -74,6 +318,9 @@ const SceneTreeTableRow = React.memo(function SceneTreeTableRow(props: {
const isVisibleEffective = isVisible && props.isParentVisible;
const VisibleIcon = isVisible ? IconEye : IconEyeOff;

const [modalOpened, { open: openEditModal, close: closeEditModal }] =
useDisclosure(false);

return (
<>
<Box
Expand Down Expand Up @@ -105,6 +352,7 @@ const SceneTreeTableRow = React.memo(function SceneTreeTableRow(props: {
opacity: isVisibleEffective ? 0.85 : 0.25,
width: "1.5em",
height: "1.5em",
display: "block",
}}
onClick={(evt) => {
evt.stopPropagation();
Expand All @@ -113,7 +361,7 @@ const SceneTreeTableRow = React.memo(function SceneTreeTableRow(props: {
/>
</Tooltip>
</Box>
<Box>
<Box style={{ flexGrow: "1" }}>
{props.nodeName
.split("/")
.filter((part) => part.length > 0)
Expand All @@ -128,7 +376,36 @@ const SceneTreeTableRow = React.memo(function SceneTreeTableRow(props: {
</span>
))}
</Box>
{!modalOpened ? (
<Box
className={editIconWrapper}
style={{
width: "1.25em",
height: "1.25em",
display: "block",
transition: "opacity 0.2s",
}}
>
<Tooltip label={"Local props"}>
<IconPencil
style={{
cursor: "pointer",
width: "1.25em",
height: "1.25em",
display: "block",
}}
onClick={(evt) => {
evt.stopPropagation();
openEditModal();
}}
/>
</Tooltip>
</Box>
) : null}
</Box>
{modalOpened ? (
<EditNodeProps nodeName={props.nodeName} close={closeEditModal} />
) : null}
{expanded
? childrenName.map((name) => (
<SceneTreeTableRow
Expand Down
2 changes: 1 addition & 1 deletion src/viser/client/src/ControlPanel/ServerControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export default function ServerControls() {
/>
<Divider mt="xs" />
<Box>
<Text mb="0.2em" fw={500}>
<Text mb="0.2em" fw={500} fz="sm">
Scene tree
</Text>
<MemoizedTable />
Expand Down
Loading
Loading