Skip to content

Commit 3bfc82a

Browse files
adamgerhantadamgerhant
committed
Improve button
1 parent d6b3408 commit 3bfc82a

File tree

8 files changed

+82
-86
lines changed

8 files changed

+82
-86
lines changed

‎editor/src/messages/frontend/frontend_message.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,9 +134,9 @@ pub enum FrontendMessage {
134134
imports: Vec<(FrontendGraphOutput, i32, i32)>,
135135
exports: Vec<(FrontendGraphInput, i32, i32)>,
136136
#[serde(rename = "addImport")]
137-
add_import: (i32, i32),
137+
add_import: Option<(i32, i32)>,
138138
#[serde(rename = "addExport")]
139-
add_export: (i32, i32),
139+
add_export: Option<(i32, i32)>,
140140
},
141141
UpdateInSelectedNetwork {
142142
#[serde(rename = "inSelectedNetwork")]

‎editor/src/messages/portfolio/document/document_message_handler.rs‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1210,26 +1210,9 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
12101210
self.network_interface.set_transform(transform, &self.breadcrumb_network_path);
12111211
let imports = self.network_interface.frontend_imports(&self.breadcrumb_network_path).unwrap_or_default();
12121212
let exports = self.network_interface.frontend_exports(&self.breadcrumb_network_path).unwrap_or_default();
1213-
let add_import = self
1214-
.network_interface
1215-
.modify_import_export(&self.breadcrumb_network_path)
1216-
.and_then(|modify_import_export_click_target| {
1217-
modify_import_export_click_target
1218-
.add_import
1219-
.bounding_box()
1220-
.map(|bounding_box| (bounding_box[0].x as i32, bounding_box[0].y as i32))
1221-
})
1222-
.unwrap_or((0, 0));
1223-
let add_export = self
1224-
.network_interface
1225-
.modify_import_export(&self.breadcrumb_network_path)
1226-
.and_then(|modify_import_export_click_target| {
1227-
modify_import_export_click_target
1228-
.add_export
1229-
.bounding_box()
1230-
.map(|bounding_box| (bounding_box[0].x as i32, bounding_box[0].y as i32))
1231-
})
1232-
.unwrap_or((0, 0));
1213+
let add_import = self.network_interface.frontend_import_modify(&self.breadcrumb_network_path);
1214+
let add_export = self.network_interface.frontend_export_modify(&self.breadcrumb_network_path);
1215+
12331216
responses.add(DocumentMessage::RenderRulers);
12341217
responses.add(DocumentMessage::RenderScrollbars);
12351218
responses.add(NodeGraphMessage::UpdateEdges);

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
7878
..Default::default()
7979
},
8080
},
81+
description: Cow::Borrowed("A default node network you can use to create your own custom nodes."),
8182
properties: &node_properties::node_no_properties,
8283
},
8384
// TODO: Auto-generate this from its proto node macro
@@ -96,7 +97,7 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
9697
..Default::default()
9798
},
9899
},
99-
description: Cow::Borrowed("The identity node simply passes its data through. You can use this to organize your node graph if you want."),
100+
description: Cow::Borrowed("The identity node passes its data through. You can use this to organize your node graph."),
100101
properties: &|_document_node, _node_id, _context| node_properties::string_properties("The identity node simply passes its data through"),
101102
},
102103
// TODO: Auto-generate this from its proto node macro
@@ -117,7 +118,7 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
117118
..Default::default()
118119
},
119120
},
120-
description: Cow::Borrowed("The Monitor node is used by the editor to access the data flowing through it"),
121+
description: Cow::Borrowed("The Monitor node is used by the editor to access the data flowing through it."),
121122
properties: &|_document_node, _node_id, _context| node_properties::string_properties("The Monitor node is used by the editor to access the data flowing through it"),
122123
},
123124
DocumentNodeDefinition {
@@ -224,7 +225,7 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
224225
..Default::default()
225226
},
226227
},
227-
description: Cow::Borrowed("The Merge node combines graphical data through composition"),
228+
description: Cow::Borrowed("The Merge node combines graphical data through composition."),
228229
properties: &node_properties::node_no_properties,
229230
},
230231
DocumentNodeDefinition {
@@ -335,7 +336,7 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
335336
..Default::default()
336337
},
337338
},
338-
description: Cow::Borrowed("Creates a new Artboard which can be used as a working surface"),
339+
description: Cow::Borrowed("Creates a new Artboard which can be used as a working surface."),
339340
properties: &node_properties::artboard_properties,
340341
},
341342
DocumentNodeDefinition {
@@ -735,7 +736,7 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
735736
..Default::default()
736737
},
737738
},
738-
description: Cow::Borrowed("Creates an embedded image with the given transform"),
739+
description: Cow::Borrowed("Creates an embedded image with the given transform."),
739740
properties: &|_document_node, _node_id, _context| node_properties::string_properties("Creates an embedded image with the given transform"),
740741
},
741742
DocumentNodeDefinition {
@@ -814,7 +815,7 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
814815
..Default::default()
815816
},
816817
},
817-
description: Cow::Borrowed("Generates different noise patters"),
818+
description: Cow::Borrowed("Generates different noise patterns."),
818819
properties: &node_properties::noise_pattern_properties,
819820
},
820821
// TODO: This needs to work with resolution-aware (raster with footprint, post-Cull node) data.

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

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1232,24 +1232,8 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphHandlerData<'a>> for NodeGrap
12321232
let (layer_widths, chain_widths, has_left_input_wire) = network_interface.collect_layer_widths(breadcrumb_network_path);
12331233
let imports = network_interface.frontend_imports(breadcrumb_network_path).unwrap_or_default();
12341234
let exports = network_interface.frontend_exports(breadcrumb_network_path).unwrap_or_default();
1235-
let add_import = network_interface
1236-
.modify_import_export(breadcrumb_network_path)
1237-
.and_then(|modify_import_export_click_target| {
1238-
modify_import_export_click_target
1239-
.add_import
1240-
.bounding_box()
1241-
.map(|bounding_box| (bounding_box[0].x as i32, bounding_box[0].y as i32))
1242-
})
1243-
.unwrap_or((0, 0));
1244-
let add_export = network_interface
1245-
.modify_import_export(breadcrumb_network_path)
1246-
.and_then(|modify_import_export_click_target| {
1247-
modify_import_export_click_target
1248-
.add_export
1249-
.bounding_box()
1250-
.map(|bounding_box| (bounding_box[0].x as i32, bounding_box[0].y as i32))
1251-
})
1252-
.unwrap_or((0, 0));
1235+
let add_import = network_interface.frontend_import_modify(breadcrumb_network_path);
1236+
let add_export = network_interface.frontend_export_modify(breadcrumb_network_path);
12531237
responses.add(FrontendMessage::UpdateImportsExports {
12541238
imports,
12551239
exports,
@@ -1271,24 +1255,8 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphHandlerData<'a>> for NodeGrap
12711255
// Send the new edges to the frontend
12721256
let imports = network_interface.frontend_imports(breadcrumb_network_path).unwrap_or_default();
12731257
let exports = network_interface.frontend_exports(breadcrumb_network_path).unwrap_or_default();
1274-
let add_import = network_interface
1275-
.modify_import_export(breadcrumb_network_path)
1276-
.and_then(|modify_import_export_click_target| {
1277-
modify_import_export_click_target
1278-
.add_import
1279-
.bounding_box()
1280-
.map(|bounding_box| (bounding_box[0].x as i32, bounding_box[0].y as i32))
1281-
})
1282-
.unwrap_or((0, 0));
1283-
let add_export = network_interface
1284-
.modify_import_export(breadcrumb_network_path)
1285-
.and_then(|modify_import_export_click_target| {
1286-
modify_import_export_click_target
1287-
.add_export
1288-
.bounding_box()
1289-
.map(|bounding_box| (bounding_box[0].x as i32, bounding_box[0].y as i32))
1290-
})
1291-
.unwrap_or((0, 0));
1258+
let add_import = network_interface.frontend_import_modify(breadcrumb_network_path);
1259+
let add_export = network_interface.frontend_export_modify(breadcrumb_network_path);
12921260
responses.add(FrontendMessage::UpdateImportsExports {
12931261
imports,
12941262
exports,

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

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -837,6 +837,32 @@ impl NodeNetworkInterface {
837837
})
838838
}
839839

840+
pub fn frontend_import_modify(&mut self, network_path: &[NodeId]) -> Option<(i32, i32)> {
841+
(!network_path.is_empty())
842+
.then(|| {
843+
self.modify_import_export(network_path).and_then(|modify_import_export_click_target| {
844+
modify_import_export_click_target
845+
.add_export
846+
.bounding_box()
847+
.map(|bounding_box| (bounding_box[0].x as i32, bounding_box[0].y as i32))
848+
})
849+
})
850+
.flatten()
851+
}
852+
853+
pub fn frontend_export_modify(&mut self, network_path: &[NodeId]) -> Option<(i32, i32)> {
854+
(!network_path.is_empty())
855+
.then(|| {
856+
self.modify_import_export(network_path).and_then(|modify_import_export_click_target| {
857+
modify_import_export_click_target
858+
.add_import
859+
.bounding_box()
860+
.map(|bounding_box| (bounding_box[0].x as i32, bounding_box[0].y as i32))
861+
})
862+
})
863+
.flatten()
864+
}
865+
840866
pub fn height_from_click_target(&mut self, node_id: &NodeId, network_path: &[NodeId]) -> Option<u32> {
841867
let mut node_height: Option<u32> = self
842868
.node_click_targets(node_id, network_path)
@@ -3138,14 +3164,6 @@ impl NodeNetworkInterface {
31383164

31393165
/// Inserts a new export at insert index. If the insert index is -1 it is inserted at the end. The output_name is used by the encapsulating node.
31403166
pub fn add_export(&mut self, default_value: TaggedValue, insert_index: isize, output_name: String, network_path: &[NodeId]) {
3141-
let mut encapsulating_path = network_path.to_vec();
3142-
// Set the parent node (if it exists) to be a non layer if it is no longer eligible to be a layer
3143-
if let Some(parent_id) = encapsulating_path.pop() {
3144-
if !self.is_eligible_to_be_layer(&parent_id, &encapsulating_path) && self.is_layer(&parent_id, &encapsulating_path) {
3145-
self.set_to_node_or_layer(&parent_id, &encapsulating_path, false);
3146-
}
3147-
};
3148-
31493167
let Some(network) = self.network_mut(network_path) else {
31503168
log::error!("Could not get nested network in add_export");
31513169
return;
@@ -3160,6 +3178,14 @@ impl NodeNetworkInterface {
31603178

31613179
self.transaction_modified();
31623180

3181+
let mut encapsulating_path = network_path.to_vec();
3182+
// Set the parent node (if it exists) to be a non layer if it is no longer eligible to be a layer
3183+
if let Some(parent_id) = encapsulating_path.pop() {
3184+
if !self.is_eligible_to_be_layer(&parent_id, &encapsulating_path) && self.is_layer(&parent_id, &encapsulating_path) {
3185+
self.set_to_node_or_layer(&parent_id, &encapsulating_path, false);
3186+
}
3187+
};
3188+
31633189
// There will not be an encapsulating node if the network is the document network
31643190
if let Some(encapsulating_node_metadata) = self.encapsulating_node_metadata_mut(network_path) {
31653191
if insert_index == -1 {

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

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -441,9 +441,19 @@
441441
</svg>
442442
<p class="import-text" style:--offset-left={position.x / 24} style:--offset-top={position.y / 24}>{outputMetadata.name}</p>
443443
{/each}
444-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" class="plus" style:--offset-left={$nodeGraph.addImport.x / 24} style:--offset-top={$nodeGraph.addImport.y / 24}>
445-
<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="green" />
446-
</svg>
444+
{#if $nodeGraph.addImport !== undefined}
445+
<div class="plus" style:--offset-left={$nodeGraph.addImport.x / 24} style:--offset-top={$nodeGraph.addImport.y / 24}>
446+
<IconButton
447+
class={"visibility"}
448+
data-visibility-button
449+
size={24}
450+
icon={"Add"}
451+
action={() => {
452+
/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
453+
}}
454+
/>
455+
</div>
456+
{/if}
447457
{#each $nodeGraph.exports as { inputMetadata, position }, index}
448458
<svg
449459
xmlns="http://www.w3.org/2000/svg"
@@ -466,9 +476,19 @@
466476
</svg>
467477
<p class="export-text" style:--offset-left={position.x / 24} style:--offset-top={position.y / 24}>{inputMetadata.name}</p>
468478
{/each}
469-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" class="plus" style:--offset-left={$nodeGraph.addExport.x / 24} style:--offset-top={$nodeGraph.addExport.y / 24}>
470-
<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="green" />
471-
</svg>
479+
{#if $nodeGraph.addExport !== undefined}
480+
<div class="plus" style:--offset-left={$nodeGraph.addExport.x / 24} style:--offset-top={$nodeGraph.addExport.y / 24}>
481+
<IconButton
482+
class={"visibility"}
483+
data-visibility-button
484+
size={24}
485+
icon={"Add"}
486+
action={() => {
487+
/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
488+
}}
489+
/>
490+
</div>
491+
{/if}
472492
</div>
473493

474494
<!-- Layers and nodes -->
@@ -899,11 +919,9 @@
899919
}
900920
901921
.plus {
922+
margin-top: -4px;
923+
margin-left: -4px;
902924
position: absolute;
903-
width: 8px;
904-
height: 8px;
905-
margin-top: 4px;
906-
margin-left: 5px;
907925
top: calc(var(--offset-top) * 24px);
908926
left: calc(var(--offset-left) * 24px);
909927
}

‎frontend/src/state-providers/node-graph.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ export function createNodeGraphState(editor: Editor) {
3636
hasLeftInputWire: new Map<bigint, boolean>(),
3737
imports: [] as { outputMetadata: FrontendGraphOutput; position: { x: number; y: number } }[],
3838
exports: [] as { inputMetadata: FrontendGraphInput; position: { x: number; y: number } }[],
39-
addImport: { x: 0, y: 0 },
40-
addExport: { x: 0, y: 0 },
39+
addImport: undefined as { x: number; y: number } | undefined,
40+
addExport: undefined as { x: number; y: number } | undefined,
4141
nodes: new Map<bigint, FrontendNode>(),
4242
wires: [] as FrontendNodeWire[],
4343
wirePathInProgress: undefined as WirePath | undefined,

‎frontend/src/wasm-communication/messages.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ export class UpdateImportsExports extends JsMessage {
6363
readonly exports!: { inputMetadata: FrontendGraphInput; position: XY }[];
6464

6565
@TupleToVec2
66-
readonly addImport!: XY;
66+
readonly addImport!: XY | undefined;
6767

6868
@TupleToVec2
69-
readonly addExport!: XY;
69+
readonly addExport!: XY | undefined;
7070
}
7171

7272
export class UpdateInSelectedNetwork extends JsMessage {

0 commit comments

Comments
 (0)