fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-20 03:18:06 +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

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;
});
});