Update graph UI and improve simplicity and robustness of sending graph and layer panel updates (#1564)

* WIP

* Fix loading the structure of layers

* Fix broken indents

* Remove debugging stuff

* Fix displaying errors and node graph UI fixes/improvements

* Fix compilation failure

---------

Co-authored-by: 0hypercube <0hypercube@gmail.com>
This commit is contained in:
Keavon Chambers
2024-01-13 04:15:36 -08:00
committed by GitHub
co-authored by 0hypercube
parent 83116aa744
commit aab0fcf84c
33 changed files with 836 additions and 813 deletions
+18 -1
View File
@@ -1,7 +1,16 @@
import { writable } from "svelte/store";
import { type Editor } from "@graphite/wasm-communication/editor";
import { type FrontendNode, type FrontendNodeLink, type FrontendNodeType, UpdateNodeGraph, UpdateNodeTypes, UpdateNodeThumbnail, UpdateZoomWithScroll } from "@graphite/wasm-communication/messages";
import {
type FrontendNode,
type FrontendNodeLink,
type FrontendNodeType,
UpdateNodeGraph,
UpdateNodeTypes,
UpdateNodeThumbnail,
UpdateZoomWithScroll,
UpdateNodeGraphSelection,
} from "@graphite/wasm-communication/messages";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createNodeGraphState(editor: Editor) {
@@ -11,6 +20,7 @@ export function createNodeGraphState(editor: Editor) {
nodeTypes: [] as FrontendNodeType[],
zoomWithScroll: false as boolean,
thumbnails: new Map<bigint, string>(),
selected: [] as bigint[],
});
// Set up message subscriptions on creation
@@ -19,6 +29,7 @@ export function createNodeGraphState(editor: Editor) {
state.nodes = updateNodeGraph.nodes;
state.links = updateNodeGraph.links;
const newThumbnails = new Map<bigint, string>();
// Transfer over any preexisting thumbnails from itself
state.nodes.forEach((node) => {
const thumbnail = state.thumbnails.get(node.id);
if (thumbnail) newThumbnails.set(node.id, thumbnail);
@@ -45,6 +56,12 @@ export function createNodeGraphState(editor: Editor) {
return state;
});
});
editor.subscriptions.subscribeJsMessage(UpdateNodeGraphSelection, (updateNodeGraphSelection) => {
update((state) => {
state.selected = updateNodeGraphSelection.selected;
return state;
});
});
return {
subscribe,