fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-24 12:38:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve native UI network

Browse Source
This commit is contained in:
Adam
2025-09-08 19:33:32 -07:00
parent 405bd5d36f
commit b47b3b72cb
18 changed files with 553 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Editor.svelte
+1
View File
@@ -74,6 +74,7 @@
// Replace usage of `-rgb` variants with CSS color() function to calculate alpha when browsers support it
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
// Specifically, support for the relative syntax is needed: `color(from var(--color-0-black) srgb r g b / 0.5)` to convert black to 50% alpha
// Keep in sync with node_graph_overlay/consts.rs
--color-0-black: #000;
--color-0-black-rgb: 0, 0, 0;
--color-1-nearblack: #111;
frontend/src/messages.ts
+7 -3
View File
@@ -106,7 +106,7 @@ export class UpdateLayerWidths extends JsMessage {
readonly layerWidths!: Map<bigint, number>;
}
export class UpdateNodeGraphRender extends JsMessage {
export class UpdateNodeGraphSvelteRender extends JsMessage {
readonly nodesToRender!: FrontendNodeToRender[];
readonly open!: boolean;
@@ -118,8 +118,12 @@ export class UpdateNodeGraphRender extends JsMessage {
readonly previewedNode!: bigint | undefined;
}
export class UpdateNativeNodeGraphRender extends JsMessage {
readonly nativeNodeGraphRender!: boolean;
export class UpdateShouldRenderSvelteNodes extends JsMessage {
readonly shouldRenderSvelteNodes!: boolean;
}
export class UpdateNativeNodeGraphSVG extends JsMessage {
readonly svgString!: string;
}
export class UpdateVisibleNodes extends JsMessage {
frontend/src/state-providers/node-graph.ts
+18 -9
View File
@@ -15,8 +15,9 @@ import {
UpdateExportReorderIndex,
UpdateImportsExports,
UpdateLayerWidths,
UpdateNodeGraphRender,
UpdateNativeNodeGraphRender,
UpdateNodeGraphSvelteRender,
UpdateShouldRenderSvelteNodes,
UpdateNativeNodeGraphSVG,
UpdateVisibleNodes,
UpdateNodeGraphTransform,
UpdateNodeThumbnail,
@@ -33,6 +34,7 @@ export function createNodeGraphState(editor: Editor) {
updateImportsExports: undefined as UpdateImportsExports | undefined,
reorderImportIndex: undefined as number | undefined,
reorderExportIndex: undefined as number | undefined,
nativeNodeGraphSVGString: "",
contextMenuInformation: undefined as ContextMenuInformation | undefined,
nodeTypes: [] as FrontendNodeType[],
@@ -47,6 +49,7 @@ export function createNodeGraphState(editor: Editor) {
// TODO: Remove these fields
visibleNodes: new Set<bigint>(),
layerWidths: new Map<bigint, number>(),
shouldRenderSvelteNodes: false,
// Data that will be passed in the context
thumbnails: new Map<bigint, string>(),
@@ -110,21 +113,27 @@ export function createNodeGraphState(editor: Editor) {
return state;
});
});
editor.subscriptions.subscribeJsMessage(UpdateNodeGraphRender, (updateNodeGraphRender) => {
editor.subscriptions.subscribeJsMessage(UpdateNodeGraphSvelteRender, (updateNodeGraphSvelteRender) => {
update((state) => {
state.nodesToRender.clear();
updateNodeGraphRender.nodesToRender.forEach((node) => {
updateNodeGraphSvelteRender.nodesToRender.forEach((node) => {
state.nodesToRender.set(node.metadata.nodeId, node);
});
state.opacity = updateNodeGraphRender.opacity;
state.inSelectedNetwork = updateNodeGraphRender.inSelectedNetwork;
state.previewedNode = updateNodeGraphRender.previewedNode;
state.opacity = updateNodeGraphSvelteRender.opacity;
state.inSelectedNetwork = updateNodeGraphSvelteRender.inSelectedNetwork;
state.previewedNode = updateNodeGraphSvelteRender.previewedNode;
return state;
});
});
editor.subscriptions.subscribeJsMessage(UpdateNativeNodeGraphRender, (updateNativeNodeGraphRender) => {
editor.subscriptions.subscribeJsMessage(UpdateShouldRenderSvelteNodes, (UpdateShouldRenderSvelteNodes) => {
update((state) => {
state.nativeNodeGraphRender = updateNativeNodeGraphRender.nativeNodeGraphRender;
state.shouldRenderSvelteNodes = UpdateShouldRenderSvelteNodes.shouldRenderSvelteNodes;
return state;
});
});
editor.subscriptions.subscribeJsMessage(UpdateNativeNodeGraphSVG, (updateNativeNodeGraphRender) => {
update((state) => {
state.nativeNodeGraphSVGString = updateNativeNodeGraphRender.svgString;
return state;
});
});