Initial code review

This commit is contained in:
Keavon Chambers
2026-01-16 00:03:14 -08:00
parent 44446e4ea5
commit d8d1a553ca
8 changed files with 36 additions and 33 deletions
+10 -8
View File
@@ -14,7 +14,9 @@
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
// These components will continue to be rendered in svelte after the first stage of native node graph rendering.
// Note on upcoming changes for poting this component to Rust for native rendering:
//
// These components will continue to be rendered in Svelte after the first stage of native node graph rendering.
// - Import and export ports
// - Wires to import and export
// - Wire in progress
@@ -23,8 +25,8 @@
// - Error dialog
// - Node/Input/Output Tooltips
// - Solo drag grip tooltip
// These elements will be not be rendered in svelte when rendering the native node graph. They are rendered below all other components
//
// These elements will be not be rendered in Svelte when rendering with the native node graph. They are rendered below all other components.
// - Dot grid background
// - Nodes/Layers
// - Wires between nodes/layers
@@ -288,8 +290,8 @@
<div class="wires" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
<svg>
{#each $nodeGraph.wires.values() as map}
{#each map.values() as { pathString, dataType, thick, dashed }}
{#if thick}
{#each map.values() as { pathString, dataType, forLayerStack, dashed }}
{#if forLayerStack}
<path
d={pathString}
style:--data-line-width="8px"
@@ -619,8 +621,8 @@
<div class="wires">
<svg>
{#each $nodeGraph.wires.values() as map}
{#each map.values() as { pathString, dataType, thick, dashed }}
{#if !thick}
{#each map.values() as { pathString, dataType, forLayerStack, dashed }}
{#if !forLayerStack}
<path
d={pathString}
style:--data-line-width="2px"
@@ -634,7 +636,7 @@
{#if $nodeGraph.wirePathInProgress}
<path
d={$nodeGraph.wirePathInProgress?.wire}
style:--data-line-width={`${$nodeGraph.wirePathInProgress.thick ? 8 : 2}px`}
style:--data-line-width={`${$nodeGraph.wirePathInProgress.forLayerStack ? 8 : 2}px`}
style:--data-color={`var(--color-data-${$nodeGraph.wirePathInProgress.dataType.toLowerCase()})`}
style:--data-color-dim={`var(--color-data-${$nodeGraph.wirePathInProgress.dataType.toLowerCase()}-dim)`}
/>
+2 -2
View File
@@ -150,7 +150,7 @@ export class UpdateOpenDocumentsList extends JsMessage {
export class WirePathInProgress {
readonly wire!: string;
readonly thick!: boolean;
readonly forLayerStack!: boolean;
readonly dataType!: FrontendGraphDataType;
}
@@ -277,7 +277,7 @@ export class NodeGraphTransform {
export class WirePath {
readonly pathString!: string;
readonly dataType!: FrontendGraphDataType;
readonly thick!: boolean;
readonly forLayerStack!: boolean;
readonly dashed!: boolean;
}
+3 -3
View File
@@ -30,12 +30,10 @@ import {
export function createNodeGraphState(editor: Editor) {
const { subscribe, update } = writable({
selectionBox: undefined as NodeGraphSelectionBox | undefined,
clickTargets: undefined as FrontendClickTargets | undefined,
contextMenuInformation: undefined as ContextMenuInformation | undefined,
error: undefined as NodeGraphError | undefined,
selectionBox: undefined as NodeGraphSelectionBox | undefined,
transform: { scale: 1, x: 0, y: 0 },
wirePathInProgress: undefined as WirePathInProgress | undefined,
layerWidths: new Map<bigint, number>(),
chainWidths: new Map<bigint, number>(),
hasLeftInputWire: new Map<bigint, boolean>(),
@@ -44,10 +42,12 @@ export function createNodeGraphState(editor: Editor) {
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>>(),
wirePathInProgress: undefined as WirePathInProgress | undefined,
nodeDescriptions: new Map<string, string>(),
nodeTypes: [] as FrontendNodeType[],
thumbnails: new Map<bigint, string>(),
selected: [] as bigint[],
transform: { scale: 1, x: 0, y: 0 },
inSelectedNetwork: true,
reorderImportIndex: undefined as number | undefined,
reorderExportIndex: undefined as number | undefined,