diff --git a/editor/src/messages/portfolio/document/node_graph/graph_operation_message_handler.rs b/editor/src/messages/portfolio/document/node_graph/graph_operation_message_handler.rs
index 1ef21edd..07286e49 100644
--- a/editor/src/messages/portfolio/document/node_graph/graph_operation_message_handler.rs
+++ b/editor/src/messages/portfolio/document/node_graph/graph_operation_message_handler.rs
@@ -113,7 +113,7 @@ impl<'a> ModifyInputsContext<'a> {
}
let layer_node = resolve_document_node_type("Layer").expect("Node").to_document_node_default_inputs([], Default::default());
- let layer_node = self.insert_node_before(new_id, current_node, input_index, layer_node, IVec2::new(0, 3))?;
+ let layer_node = self.insert_node_before(new_id, current_node, input_index, layer_node, IVec2::new(-4, 3))?;
Some(layer_node)
}
diff --git a/frontend/src/components/panels/NodeGraph.svelte b/frontend/src/components/panels/NodeGraph.svelte
index f6cde7f5..c7fb6f03 100644
--- a/frontend/src/components/panels/NodeGraph.svelte
+++ b/frontend/src/components/panels/NodeGraph.svelte
@@ -180,12 +180,12 @@
const containerBounds = nodesContainer.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 outY = verticalOut ? outputBounds.y - 1 : outputBounds.y + outputBounds.height / 2;
const outConnectorX = (outX - containerBounds.x) / transform.scale;
const outConnectorY = (outY - containerBounds.y) / 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 inY = verticalIn ? inputBounds.y + inputBounds.height + 2 : inputBounds.y + inputBounds.height / 2;
const inConnectorX = (inX - containerBounds.x) / transform.scale;
const inConnectorY = (inY - containerBounds.y) / transform.scale;
const horizontalGap = Math.abs(outConnectorX - inConnectorX);
@@ -364,7 +364,7 @@
draggingNodes = { startX: e.x, startY: e.y, roundX: 0, roundY: 0 };
}
- if (modifiedSelected) editor.instance.selectNodes(selected.length > 0 ? new BigUint64Array(selected) : null);
+ if (modifiedSelected) editor.instance.selectNodes(selected.length > 0 ? new BigUint64Array(selected) : undefined);
return;
}
@@ -372,7 +372,7 @@
// Clicked on the graph background
if (lmb && selected.length !== 0) {
selected = [];
- editor.instance.selectNodes(null);
+ editor.instance.selectNodes(undefined);
}
// LMB clicked on the graph background or MMB clicked anywhere
@@ -524,15 +524,40 @@
nodeListLocation = undefined;
}
- function buildBorderMask(nodeWidth: number, primaryInputExists: boolean, parameters: number, primaryOutputExists: boolean, exposedOutputs: number): string {
+ function nodeBorderMask(nodeWidth: number, primaryInputExists: boolean, parameters: number, primaryOutputExists: boolean, exposedOutputs: number): string {
const nodeHeight = Math.max(1 + parameters, 1 + exposedOutputs) * 24;
const boxes: { x: number; y: number; width: number; height: number }[] = [];
+
+ // Primary input
if (primaryInputExists) boxes.push({ x: -8, y: 4, width: 16, height: 16 });
+ // Parameter inputs
for (let i = 0; i < parameters; i++) boxes.push({ x: -8, y: 4 + (i + 1) * 24, width: 16, height: 16 });
+
+ // Primary output
if (primaryOutputExists) boxes.push({ x: nodeWidth - 8, y: 4, width: 16, height: 16 });
+ // Exposed outputs
for (let i = 0; i < exposedOutputs; i++) boxes.push({ x: nodeWidth - 8, y: 4 + (i + 1) * 24, width: 16, height: 16 });
+ return borderMask(boxes, nodeWidth, nodeHeight);
+ }
+
+ function layerBorderMask(nodeWidth: number): string {
+ const NODE_HEIGHT = 2 * 24;
+ const THUMBNAIL_WIDTH = 96;
+ const FUDGE = 2;
+
+ const boxes: { x: number; y: number; width: number; height: number }[] = [];
+ // Left input
+ boxes.push({ x: -8, y: 16, width: 16, height: 16 });
+
+ // Thumbnail
+ boxes.push({ x: 24, y: -FUDGE, width: THUMBNAIL_WIDTH, height: NODE_HEIGHT + FUDGE * 2 });
+
+ return borderMask(boxes, nodeWidth, NODE_HEIGHT);
+ }
+
+ function borderMask(boxes: { x: number; y: number; width: number; height: number }[], nodeWidth: number, nodeHeight: number): string {
const rectangles = boxes.map((box) => `M${box.x},${box.y} L${box.x + box.width},${box.y} L${box.x + box.width},${box.y + box.height} L${box.x},${box.y + box.height}z`);
return `M-2,-2 L${nodeWidth + 2},-2 L${nodeWidth + 2},${nodeHeight + 2} L-2,${nodeHeight + 2}z ${rectangles.join(" ")}`;
}
@@ -599,7 +624,7 @@
{#each linkPaths as { pathString, dataType, thick }}
@@ -650,7 +675,7 @@
style:--data-color={`var(--color-data-${node.primaryOutput.dataType})`}
style:--data-color-dim={`var(--color-data-${node.primaryOutput.dataType}-dim)`}
>
-
+
{/if}
- {node.displayName}
+ {node.displayName}
@@ -696,15 +721,15 @@
- {node.displayName}
+ {node.displayName}
{#if exposedInputsOutputs.length > 0}
{#each exposedInputsOutputs as parameter, index}
-
+
-
{parameter.name}
+
{parameter.name}
{/each}
@@ -715,7 +740,7 @@