Separate input height from node width (#2174)

* Separate input height from node width * finish refactor * Add migration * ...
chaiNNer-org · Sep 3, 2023 · 5d92eb6 · 5d92eb6
1 parent 572bb9c
commit 5d92eb6
Show file tree

Hide file tree

Showing 8 changed files with 545 additions and 411 deletions.
diff --git a/src/common/SaveFile.ts b/src/common/SaveFile.ts
@@ -76,7 +76,8 @@ export class SaveFile {
                     data: {
                         schemaId: n.data.schemaId,
                         inputData: n.data.inputData,
-                        inputSize: n.data.inputSize,
+                        inputHeight: n.data.inputHeight,
+                        nodeWidth: n.data.nodeWidth,
                         id: n.data.id,
                         iteratorSize: n.data.iteratorSize,
                         isDisabled: n.data.isDisabled,

diff --git a/src/common/common-types.ts b/src/common/common-types.ts
@@ -240,7 +240,7 @@ export type OfKind<T extends { readonly kind: string }, Kind extends T['kind']>
 export type NodeType = 'regularNode' | 'iterator' | 'iteratorHelper';
 
 export type InputData = Readonly<Record<InputId, InputValue>>;
-export type InputSize = Readonly<Record<InputId, Readonly<Size>>>;
+export type InputHeight = Readonly<Record<InputId, number>>;
 export type OutputData = Readonly<Record<OutputId, unknown>>;
 export type OutputTypes = Readonly<Partial<Record<OutputId, ExpressionJson | null>>>;
 export type GroupState = Readonly<Record<GroupId, unknown>>;
@@ -277,7 +277,8 @@ export interface NodeData {
     readonly isLocked?: boolean;
     readonly inputData: InputData;
     readonly groupState?: GroupState;
-    readonly inputSize?: InputSize;
+    readonly inputHeight?: InputHeight;
+    readonly nodeWidth?: number;
     readonly invalid?: boolean;
     readonly iteratorSize?: Readonly<IteratorSize>;
     readonly minWidth?: number;

diff --git a/src/common/migrations.ts b/src/common/migrations.ts
@@ -1293,6 +1293,33 @@ const unifiedCrop: ModernMigration = (data) => {
     return data;
 };
 
+const separateNodeWidthAndInputHeight: ModernMigration = (data) => {
+    data.nodes.forEach((node) => {
+        let maxWidth = 0;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (node.data.inputSize) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            const inputSize = node.data.inputSize as Record<
+                InputId,
+                { height: number; width: number }
+            >;
+            if (!node.data.inputHeight) {
+                node.data.inputHeight = {};
+            }
+            for (const [inputId, { width, height }] of Object.entries(inputSize)) {
+                maxWidth = Math.max(maxWidth, width);
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                node.data.inputHeight[inputId as InputId] = height;
+            }
+            node.data.nodeWidth = maxWidth;
+        }
+    });
+    return data;
+};
+
 // ==============
 
 const versionToMigration = (version: string) => {
@@ -1343,6 +1370,7 @@ const migrations = [
     surfaceBlurRadius,
     saveImageWebPLossless,
     unifiedCrop,
+    separateNodeWidthAndInputHeight,
 ];
 
 export const currentMigration = migrations.length;

diff --git a/src/renderer/components/NodeDocumentation/NodeExample.tsx b/src/renderer/components/NodeDocumentation/NodeExample.tsx
@@ -5,12 +5,11 @@ import { useContext } from 'use-context-selector';
 import {
     Condition,
     InputData,
+    InputHeight,
     InputId,
-    InputSize,
     InputValue,
     NodeData,
     NodeSchema,
-    Size,
 } from '../../../common/common-types';
 import { checkNodeValidity } from '../../../common/nodes/checkNodeValidity';
 import { DisabledStatus } from '../../../common/nodes/disabled';
@@ -69,12 +68,26 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
         [setInputData]
     );
 
-    const [inputSize, setInputSize] = useStateForSchema<InputSize>(selectedSchema, EMPTY_OBJECT);
-    const setSingleInputSize = useCallback(
-        (inputId: InputId, size: Readonly<Size>): void => {
-            setInputSize((prev) => ({ ...prev, [inputId]: size }));
+    const [inputHeight, setInputHeight] = useStateForSchema<InputHeight>(
+        selectedSchema,
+        EMPTY_OBJECT
+    );
+    const setSingleInputHeight = useCallback(
+        (inputId: InputId, height: number): void => {
+            setInputHeight((prev) => ({ ...prev, [inputId]: height }));
+        },
+        [setInputHeight]
+    );
+
+    const [nodeWidth, setNodeWidth] = useStateForSchema<number | undefined>(
+        selectedSchema,
+        undefined
+    );
+    const setWidth = useCallback(
+        (width: number): void => {
+            setNodeWidth((prev) => (prev === undefined ? width : Math.max(prev, width)));
         },
-        [setInputSize]
+        [setNodeWidth]
     );
 
     const nodeIdPrefix = 'FakeId ';
@@ -153,8 +166,10 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
                                     schema: selectedSchema,
                                     inputData,
                                     setInputValue,
-                                    inputSize,
-                                    setInputSize: setSingleInputSize,
+                                    inputHeight,
+                                    nodeWidth,
+                                    setWidth,
+                                    setInputHeight: setSingleInputHeight,
                                     isLocked: false,
                                     connectedInputs: EMPTY_SET,
                                     connectedOutputs: EMPTY_SET,

diff --git a/src/renderer/components/inputs/SchemaInput.tsx b/src/renderer/components/inputs/SchemaInput.tsx
@@ -48,8 +48,10 @@ export const SchemaInput = memo(({ input, nodeState, afterInput }: SingleInputPr
         id: nodeId,
         inputData,
         setInputValue,
-        inputSize,
-        setInputSize,
+        inputHeight,
+        setInputHeight,
+        nodeWidth,
+        setWidth,
         isLocked,
         connectedInputs,
         type,
@@ -73,12 +75,16 @@ export const SchemaInput = memo(({ input, nodeState, afterInput }: SingleInputPr
         setInputValue(inputId, undefined);
     }, [inputId, setInputValue]);
 
-    const size = inputSize?.[inputId];
+    const size =
+        inputHeight?.[inputId] && nodeWidth
+            ? { height: inputHeight[inputId], width: nodeWidth }
+            : undefined;
     const setSize = useCallback(
         (newSize: Readonly<Size>) => {
-            setInputSize(inputId, newSize);
+            setInputHeight(inputId, newSize.height);
+            setWidth(newSize.width);
         },
-        [inputId, setInputSize]
+        [inputId, setInputHeight, setWidth]
     );
 
     const inputType = type.instance?.inputs.get(inputId) ?? NeverType.instance;

diff --git a/src/renderer/contexts/GlobalNodeState.tsx b/src/renderer/contexts/GlobalNodeState.tsx
@@ -129,7 +129,8 @@ interface Global {
     createEdge: (from: ParsedSourceHandle, to: ParsedTargetHandle) => void;
     createConnection: (connection: Connection) => void;
     setNodeInputValue: <T extends InputValue>(nodeId: string, inputId: InputId, value: T) => void;
-    setNodeInputSize: (nodeId: string, inputId: InputId, value: Readonly<Size>) => void;
+    setNodeInputHeight: (nodeId: string, inputId: InputId, value: number) => void;
+    setNodeWidth: (nodeId: string, value: number) => void;
     removeNodesById: (ids: readonly string[]) => void;
     removeEdgeById: (id: string) => void;
     duplicateNodes: (nodeIds: readonly string[], withInputEdges?: boolean) => void;
@@ -970,20 +971,23 @@ export const GlobalProvider = memo(
             [modifyNode, addInputDataChanges]
         );
 
-        const setNodeInputSize = useCallback(
-            (nodeId: string, inputId: InputId, size: Readonly<Size>): void => {
+        const setNodeInputHeight = useCallback(
+            (nodeId: string, inputId: InputId, height: number): void => {
                 modifyNode(nodeId, (old) => {
-                    const newInputSize: Record<string, Readonly<Size>> = {
-                        ...old.data.inputSize,
-                        [inputId]: size,
+                    const newInputHeight: Record<string, number> = {
+                        ...old.data.inputHeight,
+                        [inputId]: height,
                     };
-                    Object.entries(newInputSize).forEach(([key, value]) => {
-                        newInputSize[key] = {
-                            ...value,
-                            width: size.width,
-                        };
-                    });
-                    return withNewData(old, 'inputSize', newInputSize);
+                    return withNewData(old, 'inputHeight', newInputHeight);
+                });
+            },
+            [modifyNode]
+        );
+
+        const setNodeWidth = useCallback(
+            (nodeId: string, width: number): void => {
+                modifyNode(nodeId, (old) => {
+                    return withNewData(old, 'nodeWidth', width);
                 });
             },
             [modifyNode]
@@ -1383,7 +1387,8 @@ export const GlobalProvider = memo(
             createEdge,
             createConnection,
             setNodeInputValue,
-            setNodeInputSize,
+            setNodeInputHeight,
+            setNodeWidth,
             toggleNodeLock,
             clearNodes,
             removeNodesById,

diff --git a/src/renderer/helpers/nodeState.ts b/src/renderer/helpers/nodeState.ts
@@ -3,14 +3,13 @@ import { useContext, useContextSelector } from 'use-context-selector';
 import {
     Condition,
     InputData,
+    InputHeight,
     InputId,
-    InputSize,
     InputValue,
     NodeData,
     NodeSchema,
     OutputId,
     SchemaId,
-    Size,
 } from '../../common/common-types';
 import { IdSet } from '../../common/IdSet';
 import { testInputCondition } from '../../common/nodes/condition';
@@ -64,8 +63,10 @@ export interface NodeState {
     readonly schema: NodeSchema;
     readonly inputData: InputData;
     readonly setInputValue: (inputId: InputId, value: InputValue) => void;
-    readonly inputSize: InputSize | undefined;
-    readonly setInputSize: (inputId: InputId, size: Readonly<Size>) => void;
+    readonly inputHeight: InputHeight | undefined;
+    readonly setInputHeight: (inputId: InputId, height: number) => void;
+    readonly nodeWidth: number | undefined;
+    readonly setWidth: (width: number) => void;
     readonly isLocked: boolean;
     readonly connectedInputs: ReadonlySet<InputId>;
     readonly connectedOutputs: ReadonlySet<OutputId>;
@@ -74,12 +75,17 @@ export interface NodeState {
 }
 
 export const useNodeStateFromData = (data: NodeData): NodeState => {
-    const { setNodeInputValue, setNodeInputSize } = useContext(GlobalContext);
+    const { setNodeInputValue, setNodeInputHeight, setNodeWidth } = useContext(GlobalContext);
 
-    const { id, inputData, inputSize, isLocked, schemaId } = data;
+    const { id, inputData, inputHeight, isLocked, schemaId, nodeWidth } = data;
 
     const setInputValue = useMemo(() => setNodeInputValue.bind(null, id), [id, setNodeInputValue]);
-    const setInputSize = useMemo(() => setNodeInputSize.bind(null, id), [id, setNodeInputSize]);
+    const setInputHeight = useMemo(
+        () => setNodeInputHeight.bind(null, id),
+        [id, setNodeInputHeight]
+    );
+
+    const setWidth = useMemo(() => setNodeWidth.bind(null, id), [id, setNodeWidth]);
 
     const { schemata } = useContext(BackendContext);
     const schema = schemata.get(schemaId);
@@ -109,8 +115,10 @@ export const useNodeStateFromData = (data: NodeData): NodeState => {
         schema,
         inputData,
         setInputValue,
-        inputSize,
-        setInputSize,
+        inputHeight,
+        setInputHeight,
+        nodeWidth,
+        setWidth,
         isLocked: isLocked ?? false,
         connectedInputs,
         connectedOutputs,