Build the node graph frontend with placeholder graph info (#581)

* Build the node graph frontend * Graph pan and zoom * Graph's dot grid now pans/zooms also * Interactive horisontal to vertical curves * Data types and zooming on wires * Icon definitions code beautification * Add a visibility toggle Co-authored-by: 0hypercube <0hypercube@gmail.com>
2026-09-19 10:58:04 +08:00 · 2022-05-10 22:34:25 -07:00
parent 5571f39b41
commit 19b2d3f859
32 changed files with 826 additions and 145 deletions
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -1,5 +1,5 @@
 <template>
-	<LayoutCol class="layer-tree-panel">
+	<LayoutCol class="layer-tree">
 		<LayoutRow class="options-bar">
 			<DropdownInput
 				v-model:selectedIndex="blendModeSelectedIndex"
@@ -32,7 +32,7 @@
 			<IconButton :action="createEmptyFolder" :icon="'NodeFolder'" title="New Folder (Ctrl+Shift+N)" :size="24" />
 			<IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="24" />
 		</LayoutRow>
-		<LayoutRow class="layer-tree" :scrollableY="true">
+		<LayoutRow class="layer-tree-rows" :scrollableY="true">
 			<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
 				<LayoutRow
 					class="layer-row"
@@ -70,10 +70,10 @@
 						:title="`${listing.entry.name}\n${devMode ? 'Layer Path: ' + listing.entry.path.join(' / ') : ''}`.trim() || null"
 					>
 						<LayoutRow class="layer-type-icon">
-							<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" title="Folder" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Image'" :icon="'NodeImage'" title="Image" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Shape'" :icon="'NodeShape'" title="Shape" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Text'" :icon="'NodeText'" title="Path" />
+							<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" :style="'node'" title="Folder" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Image'" :icon="'NodeImage'" :style="'node'" title="Image" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Shape'" :icon="'NodeShape'" :style="'node'" title="Shape" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Text'" :icon="'NodeText'" :style="'node'" title="Path" />
 						</LayoutRow>
 						<LayoutRow class="layer-name" @dblclick="() => onEditLayerName(listing)">
 							<input
@@ -98,7 +98,7 @@
 </template>

 <style lang="scss">
-.layer-tree-panel {
+.layer-tree {
 	min-height: 0;

 	.options-bar {
@@ -117,7 +117,7 @@
 		}
 	}

-	.layer-tree {
+	.layer-tree-rows {
 		margin-top: 4px;
 		// Crop away the 1px border below the bottom layer entry when it uses the full space of this panel
 		margin-bottom: -1px;
@@ -202,12 +202,6 @@
 				.layer-type-icon {
 					flex: 0 0 auto;
 					margin: 0 4px;
-
-					.icon-label {
-						border-radius: 2px;
-						background: var(--color-node-background);
-						fill: var(--color-node-icon);
-					}
 				}

 				.layer-name {
@@ -289,7 +283,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";

-import { BlendMode, DisplayDocumentLayerTreeStructure, UpdateDocumentLayer, LayerPanelEntry } from "@/dispatcher/js-messages";
+import { BlendMode, UpdateDocumentLayerTreeStructure, UpdateDocumentLayer, LayerPanelEntry } from "@/dispatcher/js-messages";

 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -573,14 +567,14 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		this.editor.dispatcher.subscribeJsMessage(DisplayDocumentLayerTreeStructure, (displayDocumentLayerTreeStructure) => {
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentLayerTreeStructure, (updateDocumentLayerTreeStructure) => {
 			const layerWithNameBeingEdited = this.layers.find((layer: LayerListingInfo) => layer.editingName);
 			const layerPathWithNameBeingEdited = layerWithNameBeingEdited?.entry.path;
 			const layerIdWithNameBeingEdited = layerPathWithNameBeingEdited?.slice(-1)[0];
 			const path = [] as bigint[];
 			this.layers = [] as LayerListingInfo[];

-			const recurse = (folder: DisplayDocumentLayerTreeStructure, layers: LayerListingInfo[], cache: Map<string, LayerPanelEntry>): void => {
+			const recurse = (folder: UpdateDocumentLayerTreeStructure, layers: LayerListingInfo[], cache: Map<string, LayerPanelEntry>): void => {
 				folder.children.forEach((item, index) => {
 					// TODO: fix toString
 					const layerId = BigInt(item.layerId.toString());
@@ -603,7 +597,7 @@ export default defineComponent({
 				});
 			};

-			recurse(displayDocumentLayerTreeStructure, this.layers, this.layerCache);
+			recurse(updateDocumentLayerTreeStructure, this.layers, this.layerCache);
 		});

 		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentLayer, (updateDocumentLayer) => {
--- a/frontend/src/components/panels/NodeGraph.vue
+++ b/frontend/src/components/panels/NodeGraph.vue
@@ -0,0 +1,488 @@
+<template>
+	<LayoutCol class="node-graph">
+		<LayoutRow class="options-bar"></LayoutRow>
+		<LayoutRow
+			class="graph"
+			@wheel="(e) => scroll(e)"
+			ref="graph"
+			@pointerdown="(e) => pointerDown(e)"
+			@pointermove="(e) => pointerMove(e)"
+			@pointerup="(e) => pointerUp(e)"
+			:style="`--grid-spacing: ${gridSpacing}px; --grid-offset-x: ${transform.x * transform.scale}px; --grid-offset-y: ${transform.y * transform.scale}px; --dot-radius: ${dotRadius}px`"
+		>
+			<div
+				class="nodes"
+				ref="nodesContainer"
+				:style="{
+					transform: `scale(${transform.scale}) translate(${transform.x}px, ${transform.y}px)`,
+					transformOrigin: `0 0`,
+				}"
+			>
+				<div class="node" style="--offset-left: 3; --offset-top: 2; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
+					<div class="primary">
+						<div class="ports">
+							<!-- <div class="input port" data-datatype="raster">
+							<div></div>
+						</div> -->
+							<div class="output port" data-datatype="raster">
+								<div></div>
+							</div>
+						</div>
+						<IconLabel :icon="'NodeImage'" :style="'node'" />
+						<TextLabel>Image</TextLabel>
+					</div>
+				</div>
+				<div class="node" style="--offset-left: 9; --offset-top: 2; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
+					<div class="primary">
+						<div class="ports">
+							<div class="input port" data-datatype="raster">
+								<div></div>
+							</div>
+							<div class="output port" data-datatype="raster">
+								<div></div>
+							</div>
+						</div>
+						<IconLabel :icon="'NodeImage'" :style="'node'" />
+						<TextLabel>Mask</TextLabel>
+					</div>
+					<div class="arguments">
+						<div class="argument">
+							<div class="ports">
+								<div class="input port" data-datatype="raster" style="--data-color: var(--color-data-raster); --data-color-dim: var(--color-data-vector-dim)">
+									<div></div>
+								</div>
+								<!-- <div class="output port" data-datatype="raster">
+								<div></div>
+							</div> -->
+							</div>
+							<TextLabel>Stencil</TextLabel>
+						</div>
+					</div>
+				</div>
+				<div class="node" style="--offset-left: 15; --offset-top: 2; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
+					<div class="primary">
+						<div class="ports">
+							<!-- <div class="input port" data-datatype="raster">
+							<div></div>
+						</div> -->
+							<div class="output port" data-datatype="raster">
+								<div></div>
+							</div>
+						</div>
+						<IconLabel :icon="'NodeTransform'" :style="'node'" />
+						<TextLabel>Transform</TextLabel>
+					</div>
+				</div>
+				<div class="node" style="--offset-left: 21; --offset-top: 2; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
+					<div class="primary">
+						<div class="ports">
+							<div class="input port" data-datatype="raster">
+								<div></div>
+							</div>
+							<div class="output port" data-datatype="raster">
+								<div></div>
+							</div>
+						</div>
+						<IconLabel :icon="'NodeMotionBlur'" :style="'node'" />
+						<TextLabel>Motion Blur</TextLabel>
+					</div>
+					<div class="arguments">
+						<div class="argument">
+							<div class="ports">
+								<div class="input port" data-datatype="raster">
+									<div></div>
+								</div>
+								<!-- <div class="output port" data-datatype="raster">
+								<div></div>
+							</div> -->
+							</div>
+							<TextLabel>Strength</TextLabel>
+						</div>
+					</div>
+				</div>
+				<div class="node" style="--offset-left: 2; --offset-top: 5; --data-color: var(--color-data-vector); --data-color-dim: var(--color-data-vector-dim)">
+					<div class="primary">
+						<div class="ports">
+							<!-- <div class="input port" data-datatype="vector">
+							<div></div>
+						</div> -->
+							<div class="output port" data-datatype="vector">
+								<div></div>
+							</div>
+						</div>
+						<IconLabel :icon="'NodeShape'" :style="'node'" />
+						<TextLabel>Shape</TextLabel>
+					</div>
+				</div>
+				<div class="node" style="--offset-left: 6; --offset-top: 7; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
+					<div class="primary">
+						<div class="ports">
+							<!-- <div class="input port" data-datatype="raster">
+							<div></div>
+						</div> -->
+							<div class="output port" data-datatype="raster">
+								<div></div>
+							</div>
+						</div>
+						<IconLabel :icon="'NodeBrushwork'" :style="'node'" />
+						<TextLabel>Brushwork</TextLabel>
+					</div>
+				</div>
+				<div class="node" style="--offset-left: 12; --offset-top: 7; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
+					<div class="primary">
+						<div class="ports">
+							<!-- <div class="input port" data-datatype="raster">
+							<div></div>
+						</div> -->
+							<div class="output port" data-datatype="raster">
+								<div></div>
+							</div>
+						</div>
+						<IconLabel :icon="'NodeBlur'" :style="'node'" />
+						<TextLabel>Blur</TextLabel>
+					</div>
+				</div>
+				<div class="node" style="--offset-left: 12; --offset-top: 9; --data-color: var(--color-data-raster); --data-color-dim: var(--color-data-raster-dim)">
+					<div class="primary">
+						<div class="ports">
+							<!-- <div class="input port" data-datatype="raster">
+							<div></div>
+						</div> -->
+							<div class="output port" data-datatype="raster">
+								<div></div>
+							</div>
+						</div>
+						<IconLabel :icon="'NodeGradient'" :style="'node'" />
+						<TextLabel>Gradient</TextLabel>
+					</div>
+				</div>
+			</div>
+			<div
+				class="wires"
+				:style="{
+					transform: `scale(${transform.scale}) translate(${transform.x}px, ${transform.y}px)`,
+					transformOrigin: `0 0`,
+				}"
+			>
+				<svg ref="wiresContainer"></svg>
+			</div>
+		</LayoutRow>
+	</LayoutCol>
+</template>
+
+<style lang="scss">
+.node-graph {
+	height: 100%;
+
+	.options-bar {
+		height: 32px;
+		margin: 0 4px;
+		flex: 0 0 auto;
+		align-items: center;
+	}
+
+	.graph {
+		position: relative;
+		background: var(--color-2-mildblack);
+		width: calc(100% - 8px);
+		margin-left: 4px;
+		margin-bottom: 4px;
+		border-radius: 2px;
+		overflow: hidden;
+
+		// We're displaying the dotted grid in a pseudo-element because `image-rendering` is an inherited property and we don't want it to apply to child elements
+		&::before {
+			content: "";
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			background-size: var(--grid-spacing) var(--grid-spacing);
+			background-position: calc(var(--grid-offset-x) - var(--dot-radius)) calc(var(--grid-offset-y) - var(--dot-radius));
+			background-image: radial-gradient(circle at var(--dot-radius) var(--dot-radius), var(--color-3-darkgray) var(--dot-radius), transparent 0);
+			image-rendering: pixelated;
+		}
+	}
+
+	.nodes,
+	.wires {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+
+		&.wires {
+			width: 100%;
+			height: 100%;
+			pointer-events: none;
+
+			svg {
+				width: 100%;
+				height: 100%;
+
+				path {
+					fill: none;
+					// stroke: var(--color-data-raster-dim);
+					stroke: var(--data-color-dim);
+					stroke-width: 2px;
+				}
+			}
+		}
+
+		&.nodes {
+			.node {
+				position: absolute;
+				display: flex;
+				flex-direction: column;
+				min-width: 120px;
+				border-radius: 4px;
+				background: var(--color-4-dimgray);
+				left: calc(var(--offset-left) * 24px);
+				top: calc(var(--offset-top) * 24px);
+
+				.primary {
+					display: flex;
+					align-items: center;
+					position: relative;
+					gap: 4px;
+					width: 100%;
+					height: 24px;
+					background: var(--color-6-lowergray);
+					border-radius: 4px;
+
+					.icon-label {
+						margin-left: 4px;
+					}
+
+					.text-label {
+						margin-right: 4px;
+					}
+				}
+
+				.arguments {
+					display: flex;
+					width: 100%;
+					position: relative;
+
+					.argument {
+						position: relative;
+						display: flex;
+						align-items: center;
+						height: 24px;
+						width: 100%;
+						margin-left: 24px;
+						margin-right: 24px;
+					}
+
+					// Squares to cover up the rounded corners of the primary area and make them have a straight edge
+					&::before,
+					&::after {
+						content: "";
+						position: absolute;
+						background: var(--color-6-lowergray);
+						width: 4px;
+						height: 4px;
+						top: -4px;
+					}
+
+					&::before {
+						left: 0;
+					}
+
+					&::after {
+						right: 0;
+					}
+				}
+
+				.ports {
+					position: absolute;
+					width: 100%;
+					height: 100%;
+
+					.port {
+						position: absolute;
+						margin: auto 0;
+						top: 0;
+						bottom: 0;
+						width: 12px;
+						height: 12px;
+						border-radius: 50%;
+						background: var(--data-color-dim);
+						// background: var(--color-data-raster-dim);
+
+						div {
+							background: var(--data-color);
+							// background: var(--color-data-raster);
+							width: 8px;
+							height: 8px;
+							border-radius: 50%;
+							position: absolute;
+							top: 0;
+							bottom: 0;
+							left: 0;
+							right: 0;
+							margin: auto;
+						}
+
+						&.input {
+							left: calc(-12px - 6px);
+						}
+
+						&.output {
+							right: calc(-12px - 6px);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import LayoutCol from "@/components/layout/LayoutCol.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+
+const WHEEL_RATE = 1 / 600;
+const GRID_COLLAPSE_SPACING = 10;
+const GRID_SIZE = 24;
+
+export default defineComponent({
+	inject: ["editor"],
+	data() {
+		return {
+			transform: { scale: 1, x: 0, y: 0 },
+			panning: false,
+			drawing: undefined as { port: HTMLElement; output: boolean; path: SVGElement } | undefined,
+		};
+	},
+	computed: {
+		gridSpacing(): number {
+			const dense = this.transform.scale * GRID_SIZE;
+			let sparse = dense;
+
+			while (sparse > 0 && sparse < GRID_COLLAPSE_SPACING) {
+				sparse *= 2;
+			}
+
+			return sparse;
+		},
+		dotRadius(): number {
+			return 1 + Math.floor(this.transform.scale + 0.001) / 2;
+		},
+	},
+	methods: {
+		buildWirePathString(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): string {
+			const containerBounds = (this.$refs.nodesContainer as HTMLElement).getBoundingClientRect();
+
+			const outX = verticalOut ? outputBounds.x + outputBounds.width / 2 : outputBounds.x + outputBounds.width - 1;
+			const outY = verticalOut ? outputBounds.y + 1 : outputBounds.y + outputBounds.height / 2;
+			const outConnectorX = (outX - containerBounds.x) / this.transform.scale;
+			const outConnectorY = (outY - containerBounds.y) / this.transform.scale;
+
+			const inX = verticalIn ? inputBounds.x + inputBounds.width / 2 : inputBounds.x + 1;
+			const inY = verticalIn ? inputBounds.y + inputBounds.height - 1 : inputBounds.y + inputBounds.height / 2;
+			const inConnectorX = (inX - containerBounds.x) / this.transform.scale;
+			const inConnectorY = (inY - containerBounds.y) / this.transform.scale;
+			// debugger;
+			const horizontalGap = Math.abs(outConnectorX - inConnectorX);
+			const verticalGap = Math.abs(outConnectorY - inConnectorY);
+
+			const curveLength = 200;
+			const curveFalloffRate = curveLength * Math.PI * 2;
+
+			const horizontalCurveAmount = -(2 ** ((-10 * horizontalGap) / curveFalloffRate)) + 1;
+			const verticalCurveAmount = -(2 ** ((-10 * verticalGap) / curveFalloffRate)) + 1;
+			const horizontalCurve = horizontalCurveAmount * curveLength;
+			const verticalCurve = verticalCurveAmount * curveLength;
+
+			return `M${outConnectorX},${outConnectorY} C${verticalOut ? outConnectorX : outConnectorX + horizontalCurve},${verticalOut ? outConnectorY - verticalCurve : outConnectorY} ${
+				verticalIn ? inConnectorX : inConnectorX - horizontalCurve
+			},${verticalIn ? inConnectorY + verticalCurve : inConnectorY} ${inConnectorX},${inConnectorY}`;
+		},
+		createWirePath(outputPort: HTMLElement, inputPort: HTMLElement, verticalOut: boolean, verticalIn: boolean): SVGPathElement {
+			const pathString = this.buildWirePathString(outputPort.getBoundingClientRect(), inputPort.getBoundingClientRect(), verticalOut, verticalIn);
+			const dataType = outputPort.dataset.datatype;
+
+			const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+			path.setAttribute("d", pathString);
+			path.setAttribute("style", `--data-color:  var(--color-data-${dataType}); --data-color-dim: var(--color-data-${dataType}-dim)`);
+			(this.$refs.wiresContainer as HTMLElement).appendChild(path);
+
+			return path;
+		},
+		scroll(e: WheelEvent) {
+			const scroll = e.deltaY;
+			let zoomFactor = 1 + Math.abs(scroll) * WHEEL_RATE;
+			if (scroll > 0) zoomFactor = 1 / zoomFactor;
+
+			const { x, y, width, height } = ((this.$refs.graph as typeof LayoutCol).$el as HTMLElement).getBoundingClientRect();
+
+			this.transform.scale *= zoomFactor;
+
+			const newViewportX = width / zoomFactor;
+			const newViewportY = height / zoomFactor;
+
+			const deltaSizeX = width - newViewportX;
+			const deltaSizeY = height - newViewportY;
+
+			const deltaX = deltaSizeX * ((e.x - x) / width);
+			const deltaY = deltaSizeY * ((e.y - y) / height);
+
+			this.transform.x -= (deltaX / this.transform.scale) * zoomFactor;
+			this.transform.y -= (deltaY / this.transform.scale) * zoomFactor;
+		},
+		pointerDown(e: PointerEvent) {
+			const port = (e.target as HTMLElement).closest(".port") as HTMLElement;
+
+			if (port) {
+				const output = port.classList.contains("output");
+				const path = this.createWirePath(port, port, false, false);
+				this.drawing = { port, output, path };
+			} else {
+				this.panning = true;
+			}
+			((this.$refs.graph as typeof LayoutCol).$el as HTMLElement).setPointerCapture(e.pointerId);
+		},
+		pointerMove(e: PointerEvent) {
+			if (this.panning) {
+				this.transform.x += e.movementX / this.transform.scale;
+				this.transform.y += e.movementY / this.transform.scale;
+			} else if (this.drawing) {
+				const mouse = new DOMRect(e.x, e.y);
+				const port = this.drawing.port.getBoundingClientRect();
+				const output = this.drawing.output ? port : mouse;
+				const input = this.drawing.output ? mouse : port;
+
+				const pathString = this.buildWirePathString(output, input, false, false);
+				this.drawing.path.setAttribute("d", pathString);
+			}
+		},
+		pointerUp(e: PointerEvent) {
+			((this.$refs.graph as typeof LayoutCol).$el as HTMLElement).releasePointerCapture(e.pointerId);
+			this.panning = false;
+			this.drawing = undefined;
+		},
+	},
+	mounted() {
+		{
+			const outputPort = document.querySelectorAll(".output.port")[4] as HTMLElement;
+			const inputPort = document.querySelectorAll(".input.port")[1] as HTMLElement;
+			this.createWirePath(outputPort, inputPort, true, true);
+		}
+		{
+			const outputPort = document.querySelectorAll(".output.port")[6] as HTMLElement;
+			const inputPort = document.querySelectorAll(".input.port")[3] as HTMLElement;
+			this.createWirePath(outputPort, inputPort, true, false);
+		}
+	},
+	components: {
+		LayoutRow,
+		LayoutCol,
+		IconLabel,
+		TextLabel,
+	},
+});
+</script>
--- a/frontend/src/components/widgets/inputs/MenuBarInput.vue
+++ b/frontend/src/components/widgets/inputs/MenuBarInput.vue
@@ -154,7 +154,14 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 		{
 			label: "View",
 			ref: undefined,
-			children: [[{ label: "Menu entries coming soon" }]],
+			children: [
+				[
+					{
+						label: "Show/Hide Node Graph (In Development)",
+						action: async (): Promise<void> => editor.instance.toggle_node_graph_visibility(),
+					},
+				],
+			],
 		},
 		{
 			label: "Help",
@@ -190,7 +197,7 @@ function makeMenuEntries(editor: EditorState): MenuListEntries {
 }

 export default defineComponent({
-	inject: ["editor", "dialog"],
+	inject: ["workspace", "editor", "dialog"],
 	methods: {
 		setEntryRefs(menuEntry: MenuListEntry, ref: typeof MenuList) {
 			if (ref) menuEntry.ref = ref;
--- a/frontend/src/components/widgets/labels/IconLabel.vue
+++ b/frontend/src/components/widgets/labels/IconLabel.vue
@@ -1,5 +1,5 @@
 <template>
-	<LayoutRow class="icon-label" :class="`size-${icons[icon].size}`">
+	<LayoutRow :class="['icon-label', iconSize, iconStyle]">
 		<component :is="icon" />
 	</LayoutRow>
 </template>
@@ -23,13 +23,19 @@
 		width: 24px;
 		height: 24px;
 	}
+
+	&.node-style {
+		border-radius: 2px;
+		background: var(--color-node-background);
+		fill: var(--color-node-icon);
+	}
 }
 </style>

 <script lang="ts">
 import { defineComponent, PropType } from "vue";

-import { IconName, icons } from "@/utilities/icons";
+import { IconName, IconStyle, icons, iconComponents } from "@/utilities/icons";

 import LayoutRow from "@/components/layout/LayoutRow.vue";

@@ -37,16 +43,20 @@ export default defineComponent({
 	props: {
 		icon: { type: String as PropType<IconName>, required: true },
 		gapAfter: { type: Boolean as PropType<boolean>, default: false },
+		style: { type: String as PropType<IconStyle>, default: "" },
 	},
-	data() {
-		return {
-			icons,
-		};
+	computed: {
+		iconSize(): string {
+			return `size-${icons[this.icon].size}`;
+		},
+		iconStyle(): string {
+			if (!this.style) return "";
+			return `${this.style}-style`;
+		},
 	},
 	components: {
 		LayoutRow,
-		// Import the components of all the icons
-		...Object.fromEntries(Object.entries(icons).map(([name, data]) => [name, data.component])),
+		...iconComponents,
 	},
 });
 </script>
--- a/frontend/src/components/window/title-bar/TitleBar.vue
+++ b/frontend/src/components/window/title-bar/TitleBar.vue
@@ -50,14 +50,14 @@ import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
 export type Platform = "Windows" | "Mac" | "Linux" | "Web";

 export default defineComponent({
-	inject: ["documents"],
+	inject: ["portfolio"],
 	props: {
 		platform: { type: String as PropType<Platform>, required: true },
 		maximized: { type: Boolean as PropType<boolean>, required: true },
 	},
 	computed: {
 		activeDocumentDisplayName() {
-			return this.documents.state.documents[this.documents.state.activeDocumentIndex].displayName;
+			return this.portfolio.state.documents[this.portfolio.state.activeDocumentIndex].displayName;
 		},
 	},
 	components: {
--- a/frontend/src/components/workspace/Panel.vue
+++ b/frontend/src/components/workspace/Panel.vue
@@ -29,7 +29,7 @@
 <style lang="scss">
 .panel {
 	background: var(--color-1-nearblack);
-	border-radius: 8px;
+	border-radius: 6px;
 	overflow: hidden;

 	.tab-bar {
@@ -64,7 +64,7 @@

 				&.active {
 					background: var(--color-3-darkgray);
-					border-radius: 8px 8px 0 0;
+					border-radius: 6px 6px 0 0;
 					position: relative;

 					&:not(:first-child)::before,
@@ -152,6 +152,7 @@ import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import Document from "@/components/panels/Document.vue";
 import LayerTree from "@/components/panels/LayerTree.vue";
+import NodeGraph from "@/components/panels/NodeGraph.vue";
 import Properties from "@/components/panels/Properties.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
@@ -160,13 +161,14 @@ const panelComponents = {
 	Document,
 	Properties,
 	LayerTree,
+	NodeGraph,
 	IconButton,
 	PopoverButton,
 };
 type PanelTypes = keyof typeof panelComponents;

 export default defineComponent({
-	inject: ["documents"],
+	inject: ["portfolio"],
 	props: {
 		tabMinWidths: { type: Boolean as PropType<boolean>, default: false },
 		tabCloseButtons: { type: Boolean as PropType<boolean>, default: false },
--- a/frontend/src/components/workspace/Workspace.vue
+++ b/frontend/src/components/workspace/Workspace.vue
@@ -2,16 +2,22 @@
 	<LayoutRow class="workspace" data-workspace>
 		<LayoutRow class="workspace-grid-subdivision">
 			<LayoutCol class="workspace-grid-subdivision">
-				<Panel
-					:panelType="'Document'"
-					:tabCloseButtons="true"
-					:tabMinWidths="true"
-					:tabLabels="documents.state.documents.map((doc) => doc.displayName)"
-					:clickAction="(tabIndex) => editor.instance.select_document(documents.state.documents[tabIndex].id)"
-					:closeAction="(tabIndex) => editor.instance.close_document_with_confirmation(documents.state.documents[tabIndex].id)"
-					:tabActiveIndex="documents.state.activeDocumentIndex"
-					ref="documentsPanel"
-				/>
+				<LayoutRow class="workspace-grid-subdivision">
+					<Panel
+						:panelType="'Document'"
+						:tabCloseButtons="true"
+						:tabMinWidths="true"
+						:tabLabels="portfolio.state.documents.map((doc) => doc.displayName)"
+						:clickAction="(tabIndex) => editor.instance.select_document(portfolio.state.documents[tabIndex].id)"
+						:closeAction="(tabIndex) => editor.instance.close_document_with_confirmation(portfolio.state.documents[tabIndex].id)"
+						:tabActiveIndex="portfolio.state.activeDocumentIndex"
+						ref="documentsPanel"
+					/>
+				</LayoutRow>
+				<LayoutRow class="workspace-grid-resize-gutter" @pointerdown="(e) => resizePanel(e)" v-if="nodeGraphVisible"></LayoutRow>
+				<LayoutRow class="workspace-grid-subdivision" v-if="nodeGraphVisible">
+					<Panel :panelType="'NodeGraph'" :tabLabels="['Node Graph']" :tabActiveIndex="0" />
+				</LayoutRow>
 			</LayoutCol>
 			<LayoutCol class="workspace-grid-resize-gutter" @pointerdown="(e) => resizePanel(e)"></LayoutCol>
 			<LayoutCol class="workspace-grid-subdivision" style="flex-grow: 0.17">
@@ -68,7 +74,7 @@ import Panel from "@/components/workspace/Panel.vue";
 const MIN_PANEL_SIZE = 100;

 export default defineComponent({
-	inject: ["documents", "dialog", "editor"],
+	inject: ["workspace", "portfolio", "dialog", "editor"],
 	components: {
 		LayoutRow,
 		LayoutCol,
@@ -77,7 +83,10 @@ export default defineComponent({
 	},
 	computed: {
 		activeDocumentIndex() {
-			return this.documents.state.activeDocumentIndex;
+			return this.portfolio.state.activeDocumentIndex;
+		},
+		nodeGraphVisible() {
+			return this.workspace.state.nodeGraphVisible;
 		},
 	},
 	methods: {