Hide the left border notch in layers when a wire isn't entering from the layer's left
This commit is contained in:
parent
35f7cfac80
commit
12ca06035c
|
|
@ -158,6 +158,8 @@ pub enum FrontendMessage {
|
||||||
layer_widths: HashMap<NodeId, u32>,
|
layer_widths: HashMap<NodeId, u32>,
|
||||||
#[serde(rename = "chainWidths")]
|
#[serde(rename = "chainWidths")]
|
||||||
chain_widths: HashMap<NodeId, u32>,
|
chain_widths: HashMap<NodeId, u32>,
|
||||||
|
#[serde(rename = "hasLeftInputWire")]
|
||||||
|
has_left_input_wire: HashMap<NodeId, bool>,
|
||||||
},
|
},
|
||||||
UpdateDialogButtons {
|
UpdateDialogButtons {
|
||||||
#[serde(rename = "layoutTarget")]
|
#[serde(rename = "layoutTarget")]
|
||||||
|
|
|
||||||
|
|
@ -1076,12 +1076,16 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphHandlerData<'a>> for NodeGrap
|
||||||
// TODO: Implement culling of nodes and wires whose bounding boxes are outside of the viewport
|
// TODO: Implement culling of nodes and wires whose bounding boxes are outside of the viewport
|
||||||
let wires = Self::collect_wires(network_interface, breadcrumb_network_path);
|
let wires = Self::collect_wires(network_interface, breadcrumb_network_path);
|
||||||
let nodes = self.collect_nodes(network_interface, breadcrumb_network_path);
|
let nodes = self.collect_nodes(network_interface, breadcrumb_network_path);
|
||||||
let (layer_widths, chain_widths) = network_interface.collect_layer_widths(breadcrumb_network_path);
|
let (layer_widths, chain_widths, has_left_input_wire) = network_interface.collect_layer_widths(breadcrumb_network_path);
|
||||||
let imports = network_interface.frontend_imports(breadcrumb_network_path).unwrap_or_default();
|
let imports = network_interface.frontend_imports(breadcrumb_network_path).unwrap_or_default();
|
||||||
let exports = network_interface.frontend_exports(breadcrumb_network_path).unwrap_or_default();
|
let exports = network_interface.frontend_exports(breadcrumb_network_path).unwrap_or_default();
|
||||||
responses.add(FrontendMessage::UpdateImportsExports { imports, exports });
|
responses.add(FrontendMessage::UpdateImportsExports { imports, exports });
|
||||||
responses.add(FrontendMessage::UpdateNodeGraph { nodes, wires });
|
responses.add(FrontendMessage::UpdateNodeGraph { nodes, wires });
|
||||||
responses.add(FrontendMessage::UpdateLayerWidths { layer_widths, chain_widths });
|
responses.add(FrontendMessage::UpdateLayerWidths {
|
||||||
|
layer_widths,
|
||||||
|
chain_widths,
|
||||||
|
has_left_input_wire,
|
||||||
|
});
|
||||||
responses.add(NodeGraphMessage::SendSelectedNodes);
|
responses.add(NodeGraphMessage::SendSelectedNodes);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2783,10 +2783,10 @@ impl NodeNetworkInterface {
|
||||||
bounding_box_subpath.bounding_box_with_transform(network_metadata.persistent_metadata.navigation_metadata.node_graph_to_viewport)
|
bounding_box_subpath.bounding_box_with_transform(network_metadata.persistent_metadata.navigation_metadata.node_graph_to_viewport)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn collect_layer_widths(&mut self, network_path: &[NodeId]) -> (HashMap<NodeId, u32>, HashMap<NodeId, u32>) {
|
pub fn collect_layer_widths(&mut self, network_path: &[NodeId]) -> (HashMap<NodeId, u32>, HashMap<NodeId, u32>, HashMap<NodeId, bool>) {
|
||||||
let Some(network_metadata) = self.network_metadata(network_path) else {
|
let Some(network_metadata) = self.network_metadata(network_path) else {
|
||||||
log::error!("Could not get nested network_metadata in collect_layer_widths");
|
log::error!("Could not get nested network_metadata in collect_layer_widths");
|
||||||
return (HashMap::new(), HashMap::new());
|
return (HashMap::new(), HashMap::new(), HashMap::new());
|
||||||
};
|
};
|
||||||
let nodes = network_metadata
|
let nodes = network_metadata
|
||||||
.persistent_metadata
|
.persistent_metadata
|
||||||
|
|
@ -2794,13 +2794,25 @@ impl NodeNetworkInterface {
|
||||||
.iter()
|
.iter()
|
||||||
.filter_map(|(node_id, _)| if self.is_layer(node_id, network_path) { Some(*node_id) } else { None })
|
.filter_map(|(node_id, _)| if self.is_layer(node_id, network_path) { Some(*node_id) } else { None })
|
||||||
.collect::<Vec<_>>();
|
.collect::<Vec<_>>();
|
||||||
(
|
let layer_widths = nodes
|
||||||
nodes
|
.iter()
|
||||||
.iter()
|
.filter_map(|node_id| self.layer_width(node_id, network_path).map(|layer_width| (*node_id, layer_width)))
|
||||||
.filter_map(|node_id| self.layer_width(node_id, network_path).map(|layer_width| (*node_id, layer_width)))
|
.collect::<HashMap<NodeId, u32>>();
|
||||||
.collect::<HashMap<NodeId, u32>>(),
|
let chain_widths = nodes.iter().map(|node_id| (*node_id, self.chain_width(node_id, network_path))).collect::<HashMap<NodeId, u32>>();
|
||||||
nodes.iter().map(|node_id| (*node_id, self.chain_width(node_id, network_path))).collect::<HashMap<NodeId, u32>>(),
|
let has_left_input_wire = nodes
|
||||||
)
|
.iter()
|
||||||
|
.map(|node_id| {
|
||||||
|
(
|
||||||
|
*node_id,
|
||||||
|
!self
|
||||||
|
.upstream_flow_back_from_nodes(vec![*node_id], network_path, FlowType::HorizontalFlow)
|
||||||
|
.skip(1)
|
||||||
|
.all(|node_id| self.is_chain(&node_id, network_path)),
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.collect::<HashMap<NodeId, bool>>();
|
||||||
|
|
||||||
|
(layer_widths, chain_widths, has_left_input_wire)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn compute_modified_vector(&self, layer: LayerNodeIdentifier) -> Option<VectorData> {
|
pub fn compute_modified_vector(&self, layer: LayerNodeIdentifier) -> Option<VectorData> {
|
||||||
|
|
|
||||||
|
|
@ -231,7 +231,7 @@
|
||||||
return borderMask(boxes, nodeWidth, nodeHeight);
|
return borderMask(boxes, nodeWidth, nodeHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
function layerBorderMask(nodeWidthFromThumbnail: number, nodeChainAreaLeftExtension: number): string {
|
function layerBorderMask(nodeWidthFromThumbnail: number, nodeChainAreaLeftExtension: number, hasLeftInputWire: boolean): string {
|
||||||
const NODE_HEIGHT = 2 * 24;
|
const NODE_HEIGHT = 2 * 24;
|
||||||
const THUMBNAIL_WIDTH = 72 + 8 * 2;
|
const THUMBNAIL_WIDTH = 72 + 8 * 2;
|
||||||
const FUDGE_HEIGHT_BEYOND_LAYER_HEIGHT = 2;
|
const FUDGE_HEIGHT_BEYOND_LAYER_HEIGHT = 2;
|
||||||
|
|
@ -241,7 +241,7 @@
|
||||||
const boxes: { x: number; y: number; width: number; height: number }[] = [];
|
const boxes: { x: number; y: number; width: number; height: number }[] = [];
|
||||||
|
|
||||||
// Left input
|
// Left input
|
||||||
if (nodeChainAreaLeftExtension > 0) {
|
if (hasLeftInputWire && nodeChainAreaLeftExtension > 0) {
|
||||||
boxes.push({ x: -8, y: 16, width: 16, height: 16 });
|
boxes.push({ x: -8, y: 16, width: 16, height: 16 });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -461,6 +461,7 @@
|
||||||
{@const stackDataInput = node.exposedInputs[0]}
|
{@const stackDataInput = node.exposedInputs[0]}
|
||||||
{@const layerAreaWidth = $nodeGraph.layerWidths.get(node.id) || 8}
|
{@const layerAreaWidth = $nodeGraph.layerWidths.get(node.id) || 8}
|
||||||
{@const layerChainWidth = $nodeGraph.chainWidths.get(node.id) || 0}
|
{@const layerChainWidth = $nodeGraph.chainWidths.get(node.id) || 0}
|
||||||
|
{@const hasLeftInputWire = $nodeGraph.hasLeftInputWire.get(node.id) || false}
|
||||||
{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
|
{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
|
||||||
<div
|
<div
|
||||||
class="layer"
|
class="layer"
|
||||||
|
|
@ -576,7 +577,7 @@
|
||||||
<defs>
|
<defs>
|
||||||
<clipPath id={clipPathId}>
|
<clipPath id={clipPathId}>
|
||||||
<!-- Keep this equation in sync with the equivalent one in the CSS rule for `.layer { width: ... }` below -->
|
<!-- Keep this equation in sync with the equivalent one in the CSS rule for `.layer { width: ... }` below -->
|
||||||
<path clip-rule="evenodd" d={layerBorderMask(24 * layerAreaWidth - 12, layerChainWidth ? (0.5 + layerChainWidth) * 24 : 0)} />
|
<path clip-rule="evenodd" d={layerBorderMask(24 * layerAreaWidth - 12, layerChainWidth ? (0.5 + layerChainWidth) * 24 : 0, hasLeftInputWire)} />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,7 @@ export function createNodeGraphState(editor: Editor) {
|
||||||
contextMenuInformation: undefined as ContextMenuInformation | undefined,
|
contextMenuInformation: undefined as ContextMenuInformation | undefined,
|
||||||
layerWidths: new Map<bigint, number>(),
|
layerWidths: new Map<bigint, number>(),
|
||||||
chainWidths: new Map<bigint, number>(),
|
chainWidths: new Map<bigint, number>(),
|
||||||
|
hasLeftInputWire: new Map<bigint, boolean>(),
|
||||||
imports: [] as { outputMetadata: FrontendGraphOutput; position: { x: number; y: number } }[],
|
imports: [] as { outputMetadata: FrontendGraphOutput; position: { x: number; y: number } }[],
|
||||||
exports: [] as { inputMetadata: FrontendGraphInput; position: { x: number; y: number } }[],
|
exports: [] as { inputMetadata: FrontendGraphInput; position: { x: number; y: number } }[],
|
||||||
nodes: new Map<bigint, FrontendNode>(),
|
nodes: new Map<bigint, FrontendNode>(),
|
||||||
|
|
@ -92,6 +93,7 @@ export function createNodeGraphState(editor: Editor) {
|
||||||
update((state) => {
|
update((state) => {
|
||||||
state.layerWidths = updateLayerWidths.layerWidths;
|
state.layerWidths = updateLayerWidths.layerWidths;
|
||||||
state.chainWidths = updateLayerWidths.chainWidths;
|
state.chainWidths = updateLayerWidths.chainWidths;
|
||||||
|
state.hasLeftInputWire = updateLayerWidths.hasLeftInputWire;
|
||||||
return state;
|
return state;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -69,12 +69,15 @@ export class UpdateInSelectedNetwork extends JsMessage {
|
||||||
|
|
||||||
const LayerWidths = Transform(({ obj }) => obj.layerWidths);
|
const LayerWidths = Transform(({ obj }) => obj.layerWidths);
|
||||||
const ChainWidths = Transform(({ obj }) => obj.chainWidths);
|
const ChainWidths = Transform(({ obj }) => obj.chainWidths);
|
||||||
|
const HasLeftInputWire = Transform(({ obj }) => obj.hasLeftInputWire);
|
||||||
|
|
||||||
export class UpdateLayerWidths extends JsMessage {
|
export class UpdateLayerWidths extends JsMessage {
|
||||||
@LayerWidths
|
@LayerWidths
|
||||||
readonly layerWidths!: Map<bigint, number>;
|
readonly layerWidths!: Map<bigint, number>;
|
||||||
@ChainWidths
|
@ChainWidths
|
||||||
readonly chainWidths!: Map<bigint, number>;
|
readonly chainWidths!: Map<bigint, number>;
|
||||||
|
@HasLeftInputWire
|
||||||
|
readonly hasLeftInputWire!: Map<bigint, boolean>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class UpdateNodeGraph extends JsMessage {
|
export class UpdateNodeGraph extends JsMessage {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue