Skip to content

Commit 24a5447

Browse files
adamgerhantadamgerhant
committed
Improve context menu data
1 parent caacc9b commit 24a5447

File tree

4 files changed

+40
-65
lines changed

4 files changed

+40
-65
lines changed

‎editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -776,8 +776,13 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
776776
}
777777

778778
let context_menu_data = if let Some(node_id) = clicked_id {
779-
let currently_is_node = !network_interface.is_layer(&node_id, selection_network_path);
780-
ContextMenuData::ToggleLayer { node_id, currently_is_node }
779+
let currently_is_node = !network_interface.is_layer(&node_id, breadcrumb_network_path);
780+
let can_be_layer = network_interface.is_eligible_to_be_layer(&node_id, breadcrumb_network_path);
781+
ContextMenuData::ModifyNode {
782+
can_be_layer,
783+
currently_is_node,
784+
node_id,
785+
}
781786
} else {
782787
ContextMenuData::CreateNode { compatible_type: None }
783788
};
@@ -2594,24 +2599,24 @@ impl NodeGraphMessageHandler {
25942599
}
25952600

25962601
fn node_graph_error(&self, network_interface: &mut NodeNetworkInterface, breadcrumb_network_path: &[NodeId]) -> Option<NodeGraphError> {
2597-
let error = network_interface
2602+
let graph_error = network_interface
25982603
.resolved_types
25992604
.node_graph_errors
26002605
.iter()
26012606
.filter(|error| error.node_path.starts_with(breadcrumb_network_path) && error.node_path.len() > breadcrumb_network_path.len())
26022607
.next()?;
2603-
let error_node = error.node_path[breadcrumb_network_path.len()];
2608+
let error = if graph_error.node_path.len() == breadcrumb_network_path.len() + 1 {
2609+
format!("{:?}", graph_error.error)
2610+
} else {
2611+
"Node graph type error within this node".to_string()
2612+
};
2613+
let error_node = graph_error.node_path[breadcrumb_network_path.len()];
26042614
let mut position = network_interface.position(&error_node, breadcrumb_network_path)?;
26052615
// Convert to graph space
26062616
position *= 24;
26072617
if network_interface.is_layer(&error_node, breadcrumb_network_path) {
26082618
position += IVec2::new(12, -12)
26092619
}
2610-
let error = if error.node_path.len() == breadcrumb_network_path.len() + 1 {
2611-
format!("{:?}", error.error)
2612-
} else {
2613-
"Node graph type error within this node".to_string()
2614-
};
26152620
Some(NodeGraphError { position: position.into(), error })
26162621
}
26172622

‎editor/src/messages/portfolio/document/node_graph/utility_types.rs‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,16 +153,18 @@ pub struct BoxSelection {
153153
}
154154

155155
#[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
156+
#[serde(tag = "type", content = "data")]
156157
pub enum ContextMenuData {
157-
ToggleLayer {
158-
#[serde(rename = "nodeId")]
159-
node_id: NodeId,
158+
ModifyNode {
159+
#[serde(rename = "canBeLayer")]
160+
can_be_layer: bool,
160161
#[serde(rename = "currentlyIsNode")]
161162
currently_is_node: bool,
163+
#[serde(rename = "nodeId")]
164+
node_id: NodeId,
162165
},
163166
CreateNode {
164167
#[serde(rename = "compatibleType")]
165-
#[serde(default)]
166168
compatible_type: Option<String>,
167169
},
168170
}

‎frontend/src/components/views/Graph.svelte‎

Lines changed: 19 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@
2727
2828
let graph: HTMLDivElement | undefined;
2929
30-
// Key value is node id + input/output index
31-
// Imports/Export are stored at a key value of 0
32-
3330
$: gridSpacing = calculateGridSpacing($nodeGraph.transform.scale);
3431
$: gridDotRadius = 1 + Math.floor($nodeGraph.transform.scale - 0.5 + 0.001) / 2;
3532
@@ -115,15 +112,6 @@
115112
return iconMap[icon] || "NodeNodes";
116113
}
117114
118-
function toggleLayerDisplay(displayAsLayer: boolean, toggleId: bigint) {
119-
let node = $nodeGraph.nodes.get(toggleId);
120-
if (node) editor.handle.setToNodeOrLayer(node.id, displayAsLayer);
121-
}
122-
123-
function canBeToggledBetweenNodeAndLayer(toggleDisplayAsLayerNodeId: bigint) {
124-
return $nodeGraph.nodes.get(toggleDisplayAsLayerNodeId)?.canBeLayer || false;
125-
}
126-
127115
function createNode(nodeType: string) {
128116
if ($nodeGraph.contextMenuInformation === undefined) return;
129117
@@ -176,24 +164,24 @@
176164
return `M-2,-2 L${nodeWidth + 2},-2 L${nodeWidth + 2},${nodeHeight + 2} L-2,${nodeHeight + 2}z ${rectangles.join(" ")}`;
177165
}
178166
179-
function dataTypeTooltip(value: FrontendGraphInput | FrontendGraphOutput): string {
180-
return `Data Type: ${value.resolvedType}`;
181-
}
167+
// function dataTypeTooltip(value: FrontendGraphInput | FrontendGraphOutput): string {
168+
// return `Data Type: ${value.resolvedType}`;
169+
// }
182170
183171
// function validTypesText(value: FrontendGraphInput): string {
184172
// const validTypes = value.validTypes.length > 0 ? value.validTypes.map((x) => `• ${x}`).join("\n") : "None";
185173
// return `Valid Types:\n${validTypes}`;
186174
// }
187175
188-
function outputConnectedToText(output: FrontendGraphOutput): string {
189-
if (output.connectedTo.length === 0) return "Connected to nothing";
176+
// function outputConnectedToText(output: FrontendGraphOutput): string {
177+
// if (output.connectedTo.length === 0) return "Connected to nothing";
190178
191-
return `Connected to:\n${output.connectedTo.join("\n")}`;
192-
}
179+
// return `Connected to:\n${output.connectedTo.join("\n")}`;
180+
// }
193181
194-
function inputConnectedToText(input: FrontendGraphInput): string {
195-
return `Connected to:\n${input.connectedTo}`;
196-
}
182+
// function inputConnectedToText(input: FrontendGraphInput): string {
183+
// return `Connected to:\n${input.connectedTo}`;
184+
// }
197185
198186
function zipWithUndefined(arr1: FrontendGraphInput[], arr2: FrontendGraphOutput[]) {
199187
const maxLength = Math.max(arr1.length, arr2.length);
@@ -224,29 +212,26 @@
224212
top: `${$nodeGraph.contextMenuInformation.contextMenuCoordinates.y * $nodeGraph.transform.scale + $nodeGraph.transform.y}px`,
225213
}}
226214
>
227-
{#if typeof $nodeGraph.contextMenuInformation.contextMenuData === "string" && $nodeGraph.contextMenuInformation.contextMenuData === "CreateNode"}
228-
<NodeCatalog on:selectNodeType={(e) => createNode(e.detail)} />
229-
{:else if $nodeGraph.contextMenuInformation.contextMenuData && "compatibleType" in $nodeGraph.contextMenuInformation.contextMenuData}
230-
<NodeCatalog initialSearchTerm={$nodeGraph.contextMenuInformation.contextMenuData.compatibleType || ""} on:selectNodeType={(e) => createNode(e.detail)} />
231-
{:else}
232-
{@const contextMenuData = $nodeGraph.contextMenuInformation.contextMenuData}
215+
{#if $nodeGraph.contextMenuInformation.contextMenuData.type == "CreateNode"}
216+
<NodeCatalog initialSearchTerm={$nodeGraph.contextMenuInformation.contextMenuData.data.compatibleType || ""} on:selectNodeType={(e) => createNode(e.detail)} />
217+
{:else if $nodeGraph.contextMenuInformation.contextMenuData.type == "ModifyNode"}
233218
<LayoutRow class="toggle-layer-or-node">
234219
<TextLabel>Display as</TextLabel>
235220
<RadioInput
236-
selectedIndex={contextMenuData.currentlyIsNode ? 0 : 1}
221+
selectedIndex={$nodeGraph.contextMenuInformation.contextMenuData.data.currentlyIsNode ? 0 : 1}
237222
entries={[
238223
{
239224
value: "node",
240225
label: "Node",
241-
action: () => toggleLayerDisplay(false, contextMenuData.nodeId),
226+
action: () => editor.handle.setToNodeOrLayer($nodeGraph.contextMenuInformation.contextMenuData.data.nodeId, false),
242227
},
243228
{
244229
value: "layer",
245230
label: "Layer",
246-
action: () => toggleLayerDisplay(true, contextMenuData.nodeId),
231+
action: () => editor.handle.setToNodeOrLayer($nodeGraph.contextMenuInformation.contextMenuData.data.nodeId, true),
247232
},
248233
]}
249-
disabled={!canBeToggledBetweenNodeAndLayer(contextMenuData.nodeId)}
234+
disabled={!$nodeGraph.contextMenuInformation.contextMenuData.data.canBeLayer}
250235
/>
251236
</LayoutRow>
252237
<Separator type="Section" direction="Vertical" />
@@ -264,15 +249,13 @@
264249
style={`left: ${$nodeGraph.error.position.x}px;
265250
top: ${$nodeGraph.error.position.y}px;`}
266251
transition:fade={FADE_TRANSITION}
267-
title=""
268252
data-node-error>{$nodeGraph.error.error}</span
269253
>
270254
<span
271255
class="node-error hover"
272256
style={`left: ${$nodeGraph.error.position.x}px;
273257
top: ${$nodeGraph.error.position.y}px;`}
274258
transition:fade={FADE_TRANSITION}
275-
title=""
276259
data-node-error>{$nodeGraph.error.error}</span
277260
>
278261
</div>
@@ -338,7 +321,6 @@
338321
style:--offset-left={($nodeGraph.updateImportsExports.importPosition.x - 8) / 24}
339322
style:--offset-top={($nodeGraph.updateImportsExports.importPosition.y - 8) / 24 + index}
340323
>
341-
<title>{`${dataTypeTooltip(frontendOutput)}\n\n${outputConnectedToText(frontendOutput)}`}</title>
342324
{#if frontendOutput.connectedTo.length > 0}
343325
<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
344326
{:else}
@@ -382,7 +364,7 @@
382364
}}
383365
/>
384366
{#if index > 0}
385-
<div class="reorder-drag-grip" title="Reorder this export" />
367+
<div class="reorder-drag-grip" />
386368
{/if}
387369
{/if}
388370
</div>
@@ -410,7 +392,6 @@
410392
style:--offset-left={($nodeGraph.updateImportsExports.exportPosition.x - 8) / 24}
411393
style:--offset-top={($nodeGraph.updateImportsExports.exportPosition.y - 8) / 24 + index}
412394
>
413-
<title>{`${dataTypeTooltip(frontendInput)}\n\n${inputConnectedToText(frontendInput)}`}</title>
414395
{#if frontendInput.connectedTo !== "nothing"}
415396
<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
416397
{:else}
@@ -428,7 +409,7 @@
428409
>
429410
{#if (hoveringExportIndex === index || editingNameExportIndex === index) && $nodeGraph.updateImportsExports.addImportExport}
430411
{#if index > 0}
431-
<div class="reorder-drag-grip" title="Reorder this export" />
412+
<div class="reorder-drag-grip" />
432413
{/if}
433414
<IconButton
434415
size={16}

‎frontend/src/messages.ts‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,7 @@ export class UpdateClickTargets extends JsMessage {
3333
readonly clickTargets!: FrontendClickTargets | undefined;
3434
}
3535

36-
const ContextTupleToVec2 = Transform((data) => {
37-
if (data.obj.contextMenuInformation === undefined) return undefined;
38-
const contextMenuCoordinates = data.obj.contextMenuInformation.contextMenuCoordinates;
39-
let contextMenuData = data.obj.contextMenuInformation.contextMenuData;
40-
if (contextMenuData.ToggleLayer !== undefined) {
41-
contextMenuData = { nodeId: contextMenuData.ToggleLayer.nodeId, currentlyIsNode: contextMenuData.ToggleLayer.currentlyIsNode };
42-
} else if (contextMenuData.CreateNode !== undefined) {
43-
contextMenuData = { type: "CreateNode", compatibleType: contextMenuData.CreateNode.compatibleType };
44-
}
45-
return { contextMenuCoordinates, contextMenuData };
46-
});
47-
4836
export class UpdateContextMenuInformation extends JsMessage {
49-
@ContextTupleToVec2
5037
readonly contextMenuInformation!: ContextMenuInformation | undefined;
5138
}
5239

@@ -183,7 +170,7 @@ export type FrontendClickTargets = {
183170

184171
export type ContextMenuInformation = {
185172
contextMenuCoordinates: XY;
186-
contextMenuData: "CreateNode" | { type: "CreateNode"; compatibleType: string } | { nodeId: bigint; currentlyIsNode: boolean };
173+
contextMenuData: { type: "CreateNode"; data: { compatibleType: string | undefined } } | { type: "ModifyNode"; data: { canBeLayer: boolean; currentlyIsNode: boolean; nodeId: bigint } };
187174
};
188175

189176
export type FrontendGraphDataType = "General" | "Number" | "Artboard" | "Graphic" | "Raster" | "Vector" | "Color" | "Invalid";

0 commit comments

Comments
 (0)