Nested properties

__tests__/nodeEditor/nodeEditorUtils.spec.ts

@@ -0,0 +1,139 @@
+import "~/globals";
+
+import {
+	findInputsThatReferenceNodeOutputs,
+	removeNodeAndReferencesToItInGraph,
+} from "~/nodeEditor/nodeEditorUtils";
+import { NodeEditorGraphState } from "~/nodeEditor/nodeEditorReducers";
+import { ValueType } from "~/types";
+import { NodeEditorNode } from "~/nodeEditor/nodeEditorIO";
+
+const _graphBase: NodeEditorGraphState = {
+	_addNodeOfTypeOnClick: null,
+	_dragInputTo: null,
+	_dragOutputTo: null,
+	_dragSelectRect: null,
+	moveVector: Vec2.new(0, 0),
+	id: "0",
+	layerId: "",
+	nodes: {},
+	selection: { nodes: {} },
+};
+
+const _nodeBase: NodeEditorNode<any> = {
+	id: "0",
+	inputs: [],
+	outputs: [],
+	position: Vec2.new(0, 0),
+	state: {},
+	type: null,
+	width: 0,
+};
+
+describe("findInputsThatReferenceNodeOutputs", () => {
+	it("correctly finds references", () => {
+		const graph: NodeEditorGraphState = {
+			..._graphBase,
+			nodes: {
+				a: {
+					..._nodeBase,
+					id: "a",
+					inputs: [
+						{
+							name: "Input 0",
+							pointer: null,
+							type: ValueType.Any,
+							value: null,
+						},
+						{
+							name: "Input 1",
+							pointer: { nodeId: "b", outputIndex: 1 },
+							type: ValueType.Any,
+							value: null,
+						},
+					],
+				},
+				b: {
+					..._nodeBase,
+					id: "b",
+					outputs: [
+						{
+							type: ValueType.Any,
+							name: "Output 0",
+						},
+					],
+				},
+			},
+		};
+
+		const output: ReturnType<typeof findInputsThatReferenceNodeOutputs> = [
+			{ nodeId: "a", inputIndex: 1 },
+		];
+
+		expect(findInputsThatReferenceNodeOutputs("b", graph)).toEqual(output);
+	});
+});
+
+describe("removeNodeAndReferencesToItInGraph", () => {
+	it("removes the node and references to it", () => {
+		const graph: NodeEditorGraphState = {
+			..._graphBase,
+			nodes: {
+				a: {
+					..._nodeBase,
+					id: "a",
+					inputs: [
+						{
+							name: "Input 0",
+							pointer: null,
+							type: ValueType.Any,
+							value: null,
+						},
+						{
+							name: "Input 1",
+							pointer: { nodeId: "b", outputIndex: 1 },
+							type: ValueType.Any,
+							value: null,
+						},
+					],
+				},
+				b: {
+					..._nodeBase,
+					id: "b",
+					outputs: [
+						{
+							type: ValueType.Any,
+							name: "Output 0",
+						},
+					],
+				},
+			},
+		};
+
+		const output: ReturnType<typeof removeNodeAndReferencesToItInGraph> = {
+			..._graphBase,
+			nodes: {
+				a: {
+					..._nodeBase,
+					id: "a",
+					inputs: [
+						{
+							name: "Input 0",
+							pointer: null,
+							type: ValueType.Any,
+							value: null,
+						},
+						{
+							name: "Input 1",
+							pointer: null,
+							type: ValueType.Any,
+							value: null,
+						},
+					],
+				},
+			},
+		};
+
+		expect(removeNodeAndReferencesToItInGraph("b", graph)).toEqual(output);
+	});
+});

__tests__/util/mapUtils.spec.ts

@@ -0,0 +1,139 @@
+import { removeKeysFromMap, addListToMap, modifyItemInMap, reduceMap } from "~/util/mapUtils";
+
+describe("removeKeysFromMap", () => {
+	test("it removes a single key", () => {
+		const input: { [key: string]: number } = {
+			a: 1,
+			b: 2,
+			c: 3,
+		};
+		const output = {
+			a: 1,
+			c: 3,
+		};
+		expect(removeKeysFromMap(input, ["b"])).toEqual(output);
+	});
+
+	test("it removes multiple keys", () => {
+		const input: { [key: string]: number } = {
+			a: 1,
+			b: 2,
+			c: 3,
+		};
+		const output = {
+			a: 1,
+		};
+		expect(removeKeysFromMap(input, ["b", "c"])).toEqual(output);
+	});
+
+	test("it does not modify the original object", () => {
+		const input: { [key: string]: number } = {
+			a: 1,
+			b: 2,
+			c: 3,
+		};
+		const copyOfInput = { ...input };
+		const output = {
+			a: 1,
+			c: 3,
+		};
+		expect(removeKeysFromMap(input, ["b"])).toEqual(output);
+		expect(input).toEqual(copyOfInput);
+	});
+});
+
+describe("addListToMap", () => {
+	test("it adds a list of items to a map", () => {
+		{
+			const input: { [key: string]: { id: string; value: number } } = {
+				a: { id: "a", value: 1 },
+			};
+			const items = [{ id: "b", value: 2 }];
+			const output: { [key: string]: { id: string; value: number } } = {
+				a: { id: "a", value: 1 },
+				b: { id: "b", value: 2 },
+			};
+			expect(addListToMap(input, items, "id")).toEqual(output);
+		}
+
+		{
+			// With a different id field
+			const input: { [key: string]: { key: string; value: number } } = {
+				a: { key: "a", value: 1 },
+			};
+			const items = [{ key: "b", value: 2 }];
+			const output: { [key: string]: { key: string; value: number } } = {
+				a: { key: "a", value: 1 },
+				b: { key: "b", value: 2 },
+			};
+			expect(addListToMap(input, items, "key")).toEqual(output);
+		}
+	});
+
+	test("it overrides existing items in the map", () => {
+		const input: { [key: string]: { id: string; value: number } } = {
+			a: { id: "a", value: 1 },
+			b: { id: "b", value: 3 },
+		};
+		const items = [{ id: "b", value: 2 }];
+		const output: { [key: string]: { id: string; value: number } } = {
+			a: { id: "a", value: 1 },
+			b: { id: "b", value: 2 },
+		};
+		expect(addListToMap(input, items, "id")).toEqual(output);
+	});
+});
+
+describe("modifyItemInMap", () => {
+	test("it modifies a single item by id in the map", () => {
+		{
+			const input: { [key: string]: number } = {
+				a: 1,
+				b: 2,
+			};
+			const output = {
+				a: 1,
+				b: 4,
+			};
+			expect(modifyItemInMap(input, "b", (value) => value * 2)).toEqual(output);
+		}
+
+		{
+			const input: { [key: string]: { id: string; value: number } } = {
+				a: { id: "a", value: 1 },
+				b: { id: "b", value: 2 },
+			};
+			const output: { [key: string]: { id: string; value: number } } = {
+				a: { id: "a", value: 1 },
+				b: { id: "b", value: 4 },
+			};
+			expect(
+				modifyItemInMap(input, "b", (item) => ({
+					...item,
+					value: item.value * 2,
+				})),
+			).toEqual(output);
+		}
+	});
+
+	it("throws an error if the provided key does not exist in map", () => {
+		const input: { [key: string]: number } = {
+			a: 5,
+		};
+		expect(() => modifyItemInMap(input, "b", (value) => value * 2)).toThrow();
+	});
+});
+
+describe("reduceMap", () => {
+	test("it correctly reduces a map", () => {
+		const input: { [key: string]: number } = {
+			a: 1,
+			b: 2,
+		};
+		const output: { [key: string]: number } = {
+			a: 2,
+			b: 4,
+		};
+		expect(reduceMap(input, (value) => value * 2)).toEqual(output);
+	});
+});

src/App.tsx

@@ -8,6 +8,7 @@ import { AreaRoot } from "~/area/components/AreaRoot";
 import { ContextMenu } from "~/contextMenu/ContextMenu";
 import { addListener, removeListener } from "~/listener/addListener";
 import { isKeyCodeOf } from "~/listener/keyboard";
+import { CustomContextMenu } from "~/contextMenu/CustomContextMenu";
 
 export const AppComponent: React.FC = () => {
 	useEffect(() => {
@@ -27,6 +28,7 @@ export const AppComponent: React.FC = () => {
 		<>
 			<Provider store={store}>
 				<ContextMenu />
+				<CustomContextMenu />
 				<Toolbar />
 				<AreaRoot />
 			</Provider>

src/area/components/Area.styles.ts

@@ -82,15 +82,15 @@ export default ({ css }: StyleParams) => ({
 
 	selectArea__inner: css`
 		border: 1px solid ${cssVariables.gray800};
-		background: ${cssVariables.dark700};
+		background: ${cssVariables.dark800};
 	`,
 
 	selectArea__item: css`
 		color: white;
 		border: none;
 		border-radius: 4px;
 		padding: 0 24px;
-		background: ${cssVariables.dark700};
+		background: ${cssVariables.dark800};
 		display: block;
 		width: 128px;
 	`,

src/components/common/NumberInput.styles.ts

@@ -29,6 +29,10 @@ export default ({ css }: StyleParams) => ({
 		&--fillWidth {
 			width: 100%;
 		}
+
+		&--computed {
+			color: red;
+		}
 	`,
 
 	button__label: css`

src/components/common/NumberInput.tsx

@@ -31,6 +31,7 @@ interface Props {
 	tick?: number;
 	pxPerTick?: number;
 	value: number | number[];
+	showValue?: number;
 	onChange: (value: number) => void;
 	onChangeEnd?: (type: "relative" | "absolute") => void;
 	shiftSnap?: number;
@@ -133,15 +134,21 @@ export class NumberInput extends React.Component<Props, State> {
 				? "Mixed"
 				: (this.state.useState
 						? this.state.value
-						: getUnmixedValue(this.props.value)
+						: this.props.showValue ?? getUnmixedValue(this.props.value)
 				  ).toFixed(
 						typeof this.props.decimalPlaces === "number" ? this.props.decimalPlaces : 1,
 				  );
 
 		return (
 			<div className={s("container", { fullWidth })} style={{ width }}>
 				<button
-					className={s("button", { fillWidth })}
+					className={s("button", {
+						fillWidth,
+						computed:
+							!this.state.useState &&
+							typeof this.props.showValue === "number" &&
+							this.props.showValue !== getUnmixedValue(this.props.value),
+					})}
 					onMouseDown={this.onMouseDown}
 					tabIndex={-1}
 				>

src/composition/compositionTypes.ts

@@ -1,4 +1,4 @@
-import { ValueType } from "~/types";
+import { ValueType, PropertyName, PropertyGroupName } from "~/types";
 
 export interface Composition {
 	id: string;
@@ -20,13 +20,21 @@ export interface CompositionLayer {
 	properties: string[];
 }
 
-export interface CompositionLayerProperty {
+export interface CompositionPropertyGroup {
+	type: "group";
+	name: PropertyGroupName;
+	id: string;
+	properties: string[];
+	collapsed: boolean;
+}
+
+export interface CompositionProperty {
+	type: "property";
 	id: string;
 	layerId: string;
 	compositionId: string;
-	label: string;
-	name: string;
-	type: ValueType;
+	name: PropertyName;
+	valueType: ValueType;
 	value: number;
 	timelineId: string;
 	color?: string;