Add secondary inputs to nodes UI (#863)

* Add secondary inputs to UI

* Fix add node

* Dragging nodes

* Add ParameterExposeButton component

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/App.vue

@@ -41,6 +41,8 @@
 
 	--color-data-general: #c5c5c5;
 	--color-data-general-rgb: 197, 197, 197;
+	--color-data-general-dim: #767676;
+	--color-data-general-dim-rgb: 118, 118, 118;
 	--color-data-vector: #65bbe5;
 	--color-data-vector-rgb: 101, 187, 229;
 	--color-data-vector-dim: #4b778c;
@@ -51,10 +53,14 @@
 	--color-data-raster-dim-rgb: 139, 119, 82;
 	--color-data-mask: #8d85c7;
 	--color-data-mask-rgb: 141, 133, 199;
-	--color-data-unused1: #d6536e;
-	--color-data-unused1-rgb: 214, 83, 110;
-	--color-data-unused2: #70a898;
-	--color-data-unused2-rgb: 112, 168, 152;
+	--color-data-number: #d6536e;
+	--color-data-number-rgb: 214, 83, 110;
+	--color-data-number-dim: #803242;
+	--color-data-number-dim-rgb: 128, 50, 66;
+	--color-data-color: #70a898;
+	--color-data-color-rgb: 112, 168, 152;
+	--color-data-color-dim: #43645b;
+	--color-data-color-dim-rgb: 67, 100, 91;
 
 	--color-none: white;
 	--color-none-repeat: no-repeat;

frontend/src/components/panels/NodeGraph.vue

@@ -35,8 +35,8 @@
 					class="node"
 					:class="{ selected: selected.includes(node.id) }"
 					:style="{
-						'--offset-left': node.position?.x || 0,
-						'--offset-top': node.position?.y || 0,
+						'--offset-left': (node.position?.x || 0) + (selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0),
+						'--offset-top': (node.position?.y || 0) + (selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0),
 						'--data-color': 'var(--color-data-raster)',
 						'--data-color-dim': 'var(--color-data-raster-dim)',
 					}"
@@ -44,16 +44,43 @@
 				>
 					<div class="primary">
 						<div class="ports">
-							<div class="input port" data-port="input" data-datatype="raster">
+							<div
+								v-if="node.exposedInputs.length > 0"
+								class="input port"
+								data-port="input"
+								:data-datatype="node.exposedInputs[0].dataType"
+								:style="{ '--data-color': `var(--color-data-${node.exposedInputs[0].dataType})`, '--data-color-dim': `var(--color-data-${node.exposedInputs[0].dataType}-dim)` }"
+							>
 								<div></div>
 							</div>
-							<div class="output port" data-port="output" data-datatype="raster">
+							<div
+								v-if="node.outputs.length > 0"
+								class="output port"
+								data-port="output"
+								:data-datatype="node.outputs[0]"
+								:style="{ '--data-color': `var(--color-data-${node.outputs[0]})`, '--data-color-dim': `var(--color-data-${node.outputs[0]}-dim)` }"
+							>
 								<div></div>
 							</div>
 						</div>
 						<IconLabel :icon="nodeIcon(node.displayName)" />
 						<TextLabel>{{ node.displayName }}</TextLabel>
 					</div>
+					<div v-if="node.exposedInputs.length > 1" class="arguments">
+						<div v-for="(argument, index) in node.exposedInputs.slice(1)" :key="index" class="argument">
+							<div class="ports">
+								<div
+									class="input port"
+									data-port="input"
+									:data-datatype="argument.dataType"
+									:style="{ '--data-color': `var(--color-data-${argument.dataType})`, '--data-color-dim': `var(--color-data-${argument.dataType}-dim)` }"
+								>
+									<div></div>
+								</div>
+							</div>
+							<TextLabel>{{ argument.name }}</TextLabel>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div
@@ -284,6 +311,8 @@ export default defineComponent({
 			transform: { scale: 1, x: 0, y: 0 },
 			panning: false,
 			selected: [] as bigint[],
+			draggingNodes: undefined as { startX: number; startY: number; roundX: number; roundY: number } | undefined,
+			selectIfNotDragged: undefined as undefined | bigint,
 			linkInProgressFromConnector: undefined as HTMLDivElement | undefined,
 			linkInProgressToConnector: undefined as HTMLDivElement | DOMRect | undefined,
 			nodeLinkPaths: [] as [string, string][],
@@ -324,31 +353,36 @@ export default defineComponent({
 		nodes: {
 			immediate: true,
 			async handler() {
-				await nextTick();
-
-				const containerBounds = this.$refs.nodesContainer as HTMLDivElement | undefined;
-				if (!containerBounds) return;
-
-				const links = this.nodeGraph.state.links;
-				this.nodeLinkPaths = links.flatMap((link) => {
-					const connectorIndex = 0;
-
-					const nodePrimaryOutput = (containerBounds.querySelector(`[data-node="${String(link.linkStart)}"] [data-port="output"]`) || undefined) as HTMLDivElement | undefined;
-
-					const nodeInputConnectors = containerBounds.querySelectorAll(`[data-node="${String(link.linkEnd)}"] [data-port="input"]`) || undefined;
-					const nodePrimaryInput = nodeInputConnectors?.[connectorIndex] as HTMLDivElement | undefined;
-
-					if (!nodePrimaryInput || !nodePrimaryOutput) return [];
-					return [this.createWirePath(nodePrimaryOutput, nodePrimaryInput.getBoundingClientRect(), false, false)];
-				});
+				await this.refreshLinks();
 			},
 		},
 	},
 	methods: {
+		async refreshLinks(): Promise<void> {
+			await nextTick();
+
+			const containerBounds = this.$refs.nodesContainer as HTMLDivElement | undefined;
+			if (!containerBounds) return;
+
+			const links = this.nodeGraph.state.links;
+			this.nodeLinkPaths = links.flatMap((link) => {
+				const connectorIndex = 0;
+
+				const nodePrimaryOutput = (containerBounds.querySelector(`[data-node="${String(link.linkStart)}"] [data-port="output"]`) || undefined) as HTMLDivElement | undefined;
+
+				const nodeInputConnectors = containerBounds.querySelectorAll(`[data-node="${String(link.linkEnd)}"] [data-port="input"]`) || undefined;
+				const nodePrimaryInput = nodeInputConnectors?.[connectorIndex] as HTMLDivElement | undefined;
+
+				if (!nodePrimaryInput || !nodePrimaryOutput) return [];
+				return [this.createWirePath(nodePrimaryOutput, nodePrimaryInput.getBoundingClientRect(), false, false)];
+			});
+		},
 		nodeIcon(nodeName: string): IconName {
 			const iconMap: Record<string, IconName> = {
-				Grayscale: "NodeColorCorrection",
-				"Map Image": "NodeOutput",
+				Output: "NodeOutput",
+				"Hue Shift Image": "NodeColorCorrection",
+				"Brighten Image": "NodeColorCorrection",
+				"Grayscale Image": "NodeColorCorrection",
 			};
 			return iconMap[nodeName] || "NodeNodes";
 		},
@@ -441,8 +475,16 @@ export default defineComponent({
 					if (e.shiftKey || e.ctrlKey) {
 						if (this.selected.includes(id)) this.selected.splice(this.selected.lastIndexOf(id), 1);
 						else this.selected.push(id);
-					} else {
+					} else if (!this.selected.includes(id)) {
 						this.selected = [id];
+					} else {
+						this.selectIfNotDragged = id;
+					}
+
+					if (this.selected.includes(id)) {
+						this.draggingNodes = { startX: e.x, startY: e.y, roundX: 0, roundY: 0 };
+						const graphDiv: HTMLDivElement | undefined = (this.$refs.graph as typeof LayoutCol | undefined)?.$el;
+						graphDiv?.setPointerCapture(e.pointerId);
 					}
 
 					this.editor.instance.selectNodes(new BigUint64Array(this.selected));
@@ -468,6 +510,14 @@ export default defineComponent({
 				} else {
 					this.linkInProgressToConnector = new DOMRect(e.x, e.y);
 				}
+			} else if (this.draggingNodes) {
+				const deltaX = Math.round((e.x - this.draggingNodes.startX) / this.transform.scale / this.gridSpacing);
+				const deltaY = Math.round((e.y - this.draggingNodes.startY) / this.transform.scale / this.gridSpacing);
+				if (this.draggingNodes.roundX !== deltaX || this.draggingNodes.roundY !== deltaY) {
+					this.draggingNodes.roundX = deltaX;
+					this.draggingNodes.roundY = deltaY;
+					this.refreshLinks();
+				}
 			}
 		},
 		pointerUp(e: PointerEvent) {
@@ -494,6 +544,16 @@ export default defineComponent({
 						this.editor.instance.connectNodesByLink(BigInt(outputConnectedNodeID), BigInt(inputConnectedNodeID), inputNodeConnectionIndex);
 					}
 				}
+			} else if (this.draggingNodes) {
+				if (this.draggingNodes.startX === e.x || this.draggingNodes.startY === e.y) {
+					if (this.selectIfNotDragged) {
+						this.selected = [this.selectIfNotDragged];
+						this.editor.instance.selectNodes(new BigUint64Array(this.selected));
+					}
+				}
+				this.editor.instance.moveSelectedNodes(this.draggingNodes.roundX, this.draggingNodes.roundY);
+				this.draggingNodes = undefined;
+				this.selectIfNotDragged = undefined;
 			}
 
 			this.linkInProgressFromConnector = undefined;

frontend/src/components/widgets/WidgetRow.vue

@@ -26,6 +26,7 @@
 				@changeFont="(value: unknown) => updateLayout(component.widgetId, value)"
 				:sharpRightCorners="nextIsSuffix"
 			/>
+			<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
 			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
 			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
 			<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(component.widgetId, value)" />
@@ -104,6 +105,7 @@ import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "
 
 import PivotAssist from "@/components/widgets/assists/PivotAssist.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import TextButton from "@/components/widgets/buttons/TextButton.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
@@ -175,6 +177,7 @@ export default defineComponent({
 		LayerReferenceInput,
 		NumberInput,
 		OptionalInput,
+		ParameterExposeButton,
 		PivotAssist,
 		PopoverButton,
 		RadioInput,

frontend/src/components/widgets/buttons/ParameterExposeButton.vue

@@ -0,0 +1,73 @@
+<template>
+	<LayoutRow class="parameter-expose-button">
+		<button :class="{ exposed }" :style="{ '--data-type-color': dataTypeColor }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.parameter-expose-button {
+	display: flex;
+	align-items: center;
+	flex: 0 0 auto;
+
+	button {
+		flex: 0 0 auto;
+		width: 8px;
+		height: 8px;
+		margin: 0;
+		padding: 0;
+		border: none;
+		border-radius: 50%;
+
+		&:not(.exposed) {
+			background: none;
+			border: 1px solid var(--data-type-color);
+
+			&:hover {
+				background: var(--color-6-lowergray);
+			}
+		}
+
+		&.exposed {
+			background: var(--data-type-color);
+
+			&:hover {
+				border: 1px solid var(--color-f-white);
+			}
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
+export default defineComponent({
+	props: {
+		exposed: { type: Boolean as PropType<boolean>, required: true },
+		dataType: { type: String as PropType<string>, required: true },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+	},
+	computed: {
+		dataTypeColor(): string {
+			// TODO: Move this function somewhere where it can be reused by other components
+			const colorsMap = {
+				general: "var(--color-data-general)",
+				vector: "var(--color-data-vector)",
+				raster: "var(--color-data-raster)",
+				mask: "var(--color-data-mask)",
+				number: "var(--color-data-number)",
+				color: "var(--color-data-color)",
+			} as const;
+
+			return colorsMap[this.dataType as keyof typeof colorsMap] || colorsMap.general;
+		},
+	},
+	components: { LayoutRow },
+});
+</script>

frontend/src/components/widgets/groups/WidgetSection.vue

@@ -100,6 +100,10 @@
 				text-align: right;
 			}
 
+			> .parameter-expose-button ~ .text-label:first-of-type {
+				text-align: left;
+			}
+
 			> .text-button {
 				flex-grow: 1;
 			}

frontend/src/components/widgets/inputs/LayerReferenceInput.vue

@@ -58,7 +58,8 @@
 		text-align: center;
 
 		&.missing {
-			color: var(--color-data-unused1);
+			// TODO: Define this as a permanent color palette choice
+			color: #d6536e;
 		}
 
 		&.layer-name {

frontend/src/wasm-communication/messages.ts

@@ -69,16 +69,22 @@ export class FrontendDocumentDetails extends DocumentDetails {
 	readonly id!: bigint;
 }
 
-export type DataType = "Raster" | "Color" | "Image" | "F32";
+export type FrontendGraphDataType = "general" | "raster" | "color" | "vector" | "number";
+
+export class NodeGraphInput {
+	readonly dataType!: FrontendGraphDataType;
+
+	readonly name!: string;
+}
 
 export class FrontendNode {
 	readonly id!: bigint;
 
 	readonly displayName!: string;
 
-	readonly exposedInputs!: DataType[];
+	readonly exposedInputs!: NodeGraphInput[];
 
-	readonly outputs!: DataType[];
+	readonly outputs!: FrontendGraphDataType[];
 
 	@TupleToVec2
 	readonly position!: XY | undefined;
@@ -1006,6 +1012,15 @@ export class TextAreaInput extends WidgetProps {
 	tooltip!: string | undefined;
 }
 
+export class ParameterExposeButton extends WidgetProps {
+	exposed!: boolean;
+
+	dataType!: string;
+
+	@Transform(({ value }: { value: string }) => value || undefined)
+	tooltip!: string | undefined;
+}
+
 export class TextButton extends WidgetProps {
 	label!: string;
 
@@ -1099,6 +1114,7 @@ const widgetSubTypes = [
 	{ value: SwatchPairInput, name: "SwatchPairInput" },
 	{ value: TextAreaInput, name: "TextAreaInput" },
 	{ value: TextButton, name: "TextButton" },
+	{ value: ParameterExposeButton, name: "ParameterExposeButton" },
 	{ value: TextInput, name: "TextInput" },
 	{ value: TextLabel, name: "TextLabel" },
 	{ value: PivotAssist, name: "PivotAssist" },