Improve the node graph with revamped top bar and disabling tools when graph is open (#2093)

* Add "Fade Artwork" slider and disable tools when graph is open

* Add navigation and layer/node management buttons to graph top bar

* Reduce code duplication
This commit is contained in:
Keavon Chambers
2024-11-04 20:41:53 +00:00
committed by GitHub
parent 12ca06035c
commit f1b0d8fa87
19 changed files with 480 additions and 285 deletions
+11 -3
View File
@@ -11,8 +11,9 @@ import {
UpdateToolShelfLayout,
UpdateWorkingColorsLayout,
UpdateNodeGraphBarLayout,
TriggerGraphViewOverlay,
UpdateGraphViewOverlay,
TriggerDelayedZoomCanvasToFitAll,
UpdateGraphFadeArtwork,
} from "@graphite/wasm-communication/messages";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -27,10 +28,17 @@ export function createDocumentState(editor: Editor) {
nodeGraphBarLayout: 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();
@@ -84,9 +92,9 @@ export function createDocumentState(editor: Editor) {
});
// Show or hide the graph view overlay
editor.subscriptions.subscribeJsMessage(TriggerGraphViewOverlay, (triggerGraphViewOverlay) => {
editor.subscriptions.subscribeJsMessage(UpdateGraphViewOverlay, (updateGraphViewOverlay) => {
update((state) => {
state.graphViewOverlayOpen = triggerGraphViewOverlay.open;
state.graphViewOverlayOpen = updateGraphViewOverlay.open;
return state;
});
});