fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-17 15:28:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add opacity and open to the render data

Browse Source
This commit is contained in:
Adam
2025-09-01 11:59:49 -07:00
parent a917c0c88d
commit e2c45195ef
9 changed files with 551 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
editor/src/messages/frontend/frontend_message.rs
View File

@@ -244,9 +244,6 @@ pub enum FrontendMessage {
#[serde(rename = "setColorChoice")]
set_color_choice: Option<String>,
},
UpdateGraphFadeArtwork {
percentage: f64,
},
UpdateInputHints {
#[serde(rename = "hintData")]
hint_data: HintData,
@@ -274,9 +271,11 @@ pub enum FrontendMessage {
UpdateMouseCursor {
cursor: MouseCursorIcon,
},
UpdateNodeGraphNodes {
UpdateNodeGraphRender {
#[serde(rename = "nodesToRender")]
nodes_to_render: Vec<FrontendNodeToRender>,
open: bool,
opacity: f64,
#[serde(rename = "inSelectedNetwork")]
in_selected_network: bool,
// Displays a dashed border around the node

8
editor/src/messages/portfolio/document/document_message_handler.rs
View File

@@ -561,9 +561,6 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
self.graph_view_overlay_open = open;
responses.add(FrontendMessage::UpdateGraphViewOverlay { open });
responses.add(FrontendMessage::UpdateGraphFadeArtwork {
percentage: self.graph_fade_artwork_percentage,
});
// Update the tilt menu bar buttons to be disabled when the graph is open
responses.add(MenuBarMessage::SendLayout);
@@ -579,12 +576,13 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
responses.add(NavigationMessage::CanvasTiltSet { angle_radians: 0. });
responses.add(NodeGraphMessage::SetGridAlignedEdges);
responses.add(NodeGraphMessage::UpdateGraphBarRight);
responses.add(NodeGraphMessage::SendGraph);
responses.add(NodeGraphMessage::UpdateHints);
} else {
responses.add(ToolMessage::ActivateTool { tool_type: *current_tool });
responses.add(OverlaysMessage::Draw); // Redraw overlays when graph is closed
}
responses.add(NodeGraphMessage::SendGraph);
}
DocumentMessage::GraphViewOverlayToggle => {
responses.add(DocumentMessage::GraphViewOverlay { open: !self.graph_view_overlay_open });
@@ -1200,7 +1198,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
}
DocumentMessage::SetGraphFadeArtwork { percentage } => {
self.graph_fade_artwork_percentage = percentage;
responses.add(FrontendMessage::UpdateGraphFadeArtwork { percentage });
responses.add(NodeGraphMessage::SendGraph);
}
DocumentMessage::SetNodePinned { node_id, pinned } => {
responses.add(DocumentMessage::AddTransaction);

32
editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs
View File

@@ -1634,24 +1634,24 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
responses.add(DocumentMessage::DocumentStructureChanged);
responses.add(PropertiesPanelMessage::Refresh);
responses.add(NodeGraphMessage::UpdateActionButtons);
if graph_view_overlay_open {
let nodes_to_render = network_interface.collect_nodes(&self.node_graph_errors, breadcrumb_network_path);
self.frontend_nodes = nodes_to_render.iter().map(|node| node.metadata.node_id).collect();
let previewed_node = network_interface.previewed_node(breadcrumb_network_path);
responses.add(FrontendMessage::UpdateNodeGraphNodes {
nodes_to_render,
in_selected_network: selection_network_path == breadcrumb_network_path,
previewed_node,
});
responses.add(NodeGraphMessage::UpdateVisibleNodes);
let nodes_to_render = network_interface.collect_nodes(&self.node_graph_errors, breadcrumb_network_path);
self.frontend_nodes = nodes_to_render.iter().map(|node| node.metadata.node_id).collect();
let previewed_node = network_interface.previewed_node(breadcrumb_network_path);
responses.add(FrontendMessage::UpdateNodeGraphRender {
nodes_to_render,
open: graph_view_overlay_open,
opacity: graph_fade_artwork_percentage,
in_selected_network: selection_network_path == breadcrumb_network_path,
previewed_node,
});
responses.add(NodeGraphMessage::UpdateVisibleNodes);
let layer_widths = network_interface.collect_layer_widths(breadcrumb_network_path);
let layer_widths = network_interface.collect_layer_widths(breadcrumb_network_path);
responses.add(NodeGraphMessage::UpdateImportsExports);
responses.add(FrontendMessage::UpdateLayerWidths { layer_widths });
responses.add(NodeGraphMessage::SendWires);
self.update_node_graph_hints(responses);
}
responses.add(NodeGraphMessage::UpdateImportsExports);
responses.add(FrontendMessage::UpdateLayerWidths { layer_widths });
responses.add(NodeGraphMessage::SendWires);
self.update_node_graph_hints(responses);
}
NodeGraphMessage::SetGridAlignedEdges => {
if graph_view_overlay_open {

8
editor/src/test_utils.rs
View File

@@ -301,11 +301,11 @@ pub trait FrontendMessageTestUtils {
impl FrontendMessageTestUtils for FrontendMessage {
fn check_node_graph_error(&self) {
let FrontendMessage::UpdateNodeGraphNodes { nodes, .. } = self else { return };
let FrontendMessage::UpdateNodeGraphRender { nodes_to_render, .. } = self else { return };
for node in nodes {
if let Some(error) = &node.errors {
panic!("error on {}: {}", node.display_name, error);
for node in nodes_to_render {
if let Some(error) = &node.metadata.errors {
panic!("error on {}: {}", node.metadata.display_name, error);
}
}
}

28
frontend/src/components/panels/Document.svelte
View File

@@ -565,9 +565,7 @@
{/if}
</div>
<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
<Graph />
</div>
<Graph />
</LayoutCol>
<LayoutCol class="ruler-or-scrollbar right-scrollbar">
<ScrollbarInput
@@ -825,30 +823,6 @@
}
}
.graph-view {
pointer-events: none;
transition: opacity 0.2s;
opacity: 0;
&.open {
cursor: auto;
pointer-events: auto;
opacity: 1;
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-2-mildblack);
opacity: var(--fade-artwork);
pointer-events: none;
}
}
.fade-artwork,
.graph {
position: absolute;

987
frontend/src/components/views/Graph.svelte
View File

File diff suppressed because it is too large Load Diff

13
frontend/src/messages.ts
View File

@@ -77,9 +77,13 @@ export class UpdateLayerWidths extends JsMessage {
readonly layerWidths!: Map<bigint, number>;
}
export class UpdateNodeGraphNodes extends JsMessage {
export class UpdateNodeGraphRender extends JsMessage {
readonly nodesToRender!: FrontendNodeToRender[];
readonly open!: boolean;
readonly opacity!: number;
readonly inSelectedNetwork!: boolean;
readonly previewedNode!: bigint | undefined;
@@ -730,10 +734,6 @@ export class UpdateGraphViewOverlay extends JsMessage {
open!: boolean;
}
export class UpdateGraphFadeArtwork extends JsMessage {
readonly percentage!: number;
}
export class UpdateDataPanelState extends JsMessage {
readonly open!: boolean;
}
@@ -1691,7 +1691,6 @@ export const messageMakers: Record<string, MessageMaker> = {
UpdateDocumentScrollbars,
UpdateExportReorderIndex,
UpdateEyedropperSamplingState,
UpdateGraphFadeArtwork,
UpdateGraphViewOverlay,
UpdateImportReorderIndex,
UpdateImportsExports,
@@ -1704,7 +1703,7 @@ export const messageMakers: Record<string, MessageMaker> = {
UpdateMenuBarLayout,
UpdateMouseCursor,
UpdateNodeGraphControlBarLayout,
UpdateNodeGraphNodes,
UpdateNodeGraphRender,
UpdateNodeGraphTransform,
UpdateNodeGraphWires,
UpdateNodeThumbnail,

9
frontend/src/state-providers/document.ts
View File

@@ -13,7 +13,6 @@ import {
UpdateWorkingColorsLayout,
UpdateNodeGraphControlBarLayout,
UpdateGraphViewOverlay,
UpdateGraphFadeArtwork,
} from "@graphite/messages";
export function createDocumentState(editor: Editor) {
@@ -25,19 +24,11 @@ export function createDocumentState(editor: Editor) {
toolShelfLayout: defaultWidgetLayout(),
workingColorsLayout: defaultWidgetLayout(),
nodeGraphControlBarLayout: defaultWidgetLayout(),
// Graph view overlay
graphViewOverlayOpen: false,
fadeArtwork: 100,
});
const { subscribe, update } = state;
// Update layouts
editor.subscriptions.subscribeJsMessage(UpdateGraphFadeArtwork, (updateGraphFadeArtwork) => {
update((state) => {
state.fadeArtwork = updateGraphFadeArtwork.percentage;
return state;
});
});
editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, async (updateDocumentModeLayout) => {
await tick();

15
frontend/src/state-providers/node-graph.ts
View File

@@ -17,7 +17,7 @@ import {
UpdateExportReorderIndex,
UpdateImportsExports,
UpdateLayerWidths,
UpdateNodeGraphNodes,
UpdateNodeGraphRender,
UpdateVisibleNodes,
UpdateNodeGraphWires,
UpdateNodeGraphTransform,
@@ -33,6 +33,9 @@ export function createNodeGraphState(editor: Editor) {
layerWidths: new Map<bigint, number>(),
updateImportsExports: undefined as UpdateImportsExports | undefined,
nodesToRender: new Map<bigint, FrontendNodeToRender>(),
open: false,
opacity: 0.8,
visibleNodes: new Set<bigint>(),
/// The index is the exposed input index. The exports have a first key value of u32::MAX.
wires: new Map<bigint, Map<number, WirePath>>(),
@@ -98,14 +101,16 @@ export function createNodeGraphState(editor: Editor) {
return state;
});
});
editor.subscriptions.subscribeJsMessage(UpdateNodeGraphNodes, (updateNodeGraphNodes) => {
editor.subscriptions.subscribeJsMessage(UpdateNodeGraphRender, (updateNodeGraphRender) => {
update((state) => {
state.nodesToRender.clear();
updateNodeGraphNodes.nodesToRender.forEach((node) => {
updateNodeGraphRender.nodesToRender.forEach((node) => {
state.nodesToRender.set(node.metadata.nodeId, node);
});
state.inSelectedNetwork = updateNodeGraphNodes.inSelectedNetwork;
state.previewedNode = updateNodeGraphNodes.previewedNode;
state.open = updateNodeGraphRender.open;
state.opacity = updateNodeGraphRender.opacity;
state.inSelectedNetwork = updateNodeGraphRender.inSelectedNetwork;
state.previewedNode = updateNodeGraphRender.previewedNode;
return state;
});
});