Resizable Image Previews

src/common/SaveFile.ts

@@ -77,6 +77,7 @@ export class SaveFile {
                         schemaId: n.data.schemaId,
                         inputData: n.data.inputData,
                         inputHeight: n.data.inputHeight,
+                        outputHeight: n.data.outputHeight,
                         nodeWidth: n.data.nodeWidth,
                         id: n.data.id,
                         iteratorSize: n.data.iteratorSize,

src/common/common-types.ts

@@ -242,6 +242,7 @@ export type NodeType = 'regularNode' | 'iterator' | 'iteratorHelper';
 export type InputData = Readonly<Record<InputId, InputValue>>;
 export type InputHeight = Readonly<Record<InputId, number>>;
 export type OutputData = Readonly<Record<OutputId, unknown>>;
+export type OutputHeight = Readonly<Record<OutputId, number>>;
 export type OutputTypes = Readonly<Partial<Record<OutputId, ExpressionJson | null>>>;
 export type GroupState = Readonly<Record<GroupId, unknown>>;
 
@@ -278,6 +279,7 @@ export interface NodeData {
     readonly inputData: InputData;
     readonly groupState?: GroupState;
     readonly inputHeight?: InputHeight;
+    readonly outputHeight?: OutputHeight;
     readonly nodeWidth?: number;
     readonly invalid?: boolean;
     readonly iteratorSize?: Readonly<IteratorSize>;

src/renderer/components/NodeDocumentation/NodeExample.tsx

@@ -10,6 +10,8 @@ import {
     InputValue,
     NodeData,
     NodeSchema,
+    OutputHeight,
+    OutputId,
 } from '../../../common/common-types';
 import { checkNodeValidity } from '../../../common/nodes/checkNodeValidity';
 import { DisabledStatus } from '../../../common/nodes/disabled';
@@ -90,6 +92,17 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
         [setNodeWidth]
     );
 
+    const [outputHeight, setOutputHeight] = useStateForSchema<OutputHeight>(
+        selectedSchema,
+        EMPTY_OBJECT
+    );
+    const setSingleOutputHeight = useCallback(
+        (outputId: OutputId, height: number): void => {
+            setOutputHeight((prev) => ({ ...prev, [outputId]: height }));
+        },
+        [setOutputHeight]
+    );
+
     const nodeIdPrefix = 'FakeId ';
     const suffixLength = 36 - nodeIdPrefix.length;
     const nodeId =
@@ -168,6 +181,8 @@ export const NodeExample = memo(({ accentColor, selectedSchema }: NodeExamplePro
                                     setInputValue,
                                     inputHeight,
                                     nodeWidth,
+                                    outputHeight,
+                                    setOutputHeight: setSingleOutputHeight,
                                     setWidth,
                                     setInputHeight: setSingleInputHeight,
                                     isLocked: false,

src/renderer/components/node/NodeOutputs.tsx

@@ -1,7 +1,7 @@
 import { NeverType, Type, evaluate } from '@chainner/navi';
 import { memo, useCallback, useEffect } from 'react';
 import { useContext, useContextSelector } from 'use-context-selector';
-import { OutputId, OutputKind } from '../../../common/common-types';
+import { OutputId, OutputKind, Size } from '../../../common/common-types';
 import { log } from '../../../common/log';
 import { getChainnerScope } from '../../../common/types/chainner-scope';
 import { ExpressionJson, fromJson } from '../../../common/types/json';
@@ -48,7 +48,7 @@ interface NodeOutputProps {
 }
 
 export const NodeOutputs = memo(({ nodeState, animated }: NodeOutputProps) => {
-    const { id, schema, schemaId } = nodeState;
+    const { id, schema, schemaId, outputHeight, setOutputHeight, nodeWidth, setWidth } = nodeState;
 
     const { functionDefinitions } = useContext(BackendContext);
     const { setManualOutputType } = useContext(GlobalContext);
@@ -90,6 +90,15 @@ export const NodeOutputs = memo(({ nodeState, animated }: NodeOutputProps) => {
                 const definitionType = functions?.get(output.id) ?? NeverType.instance;
                 const type = nodeState.type.instance?.outputs.get(output.id);
 
+                const size =
+                    outputHeight?.[output.id] && nodeWidth
+                        ? { height: outputHeight[output.id], width: nodeWidth }
+                        : undefined;
+                const setSize = (newSize: Readonly<Size>) => {
+                    setOutputHeight(output.id, newSize.height);
+                    setWidth(newSize.width);
+                };
+
                 const OutputType = OutputComponents[output.kind];
                 return (
                     <OutputContainer
@@ -107,6 +116,8 @@ export const NodeOutputs = memo(({ nodeState, animated }: NodeOutputProps) => {
                             id={id}
                             output={output}
                             schema={nodeState.schema}
+                            setSize={setSize}
+                            size={size}
                             type={type ?? NeverType.instance}
                             useOutputData={useOutputData}
                         />