fixed missing ControlNode port size limit

Cycling74 · Dec 11, 2024 · 3859054 · 3859054
1 parent f75c420
commit 3859054
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/src/components/editor/controlNode.tsx b/src/components/editor/controlNode.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, memo } from "react";
-import { EditorNodeProps, calcPortOffset } from "./util";
+import { EditorNodeProps, calcPortOffset, defaultNodeWidth } from "./util";
 import { GraphPortRecord, PortDirection } from "../../models/graph";
 import EditorPort from "./port";
 import classes from "./editor.module.css";
@@ -16,17 +16,33 @@ const EditorControlNode: FunctionComponent<EditorNodeProps> = memo(function Wrap
 		return result;
 	}, { sinks: [], sources: [] } as { sinks: GraphPortRecord[]; sources: GraphPortRecord[]; });
 
+	const portSizeLimit = sinks.length && sources.length ? Math.round(defaultNodeWidth / 2) : defaultNodeWidth;
+
 	return (
 		<Paper className={ classes.node } shadow="md" withBorder data-selected={ selected } >
 			<div className={ classes.nodeHeader } >
 				{ node.id }
 			</div>
-			<div className={ classes.nodeContent } style={{ height: `${node.contentHeight}px` }} >
+			<div className={ classes.nodeContent } style={{ height: `${node.contentHeight}px`, minWidth: defaultNodeWidth }} >
 				{
-					sinks.map((port, i) => <EditorPort key={ port.id } port={ port } offset={ calcPortOffset(sinks.length, i)}/>)
+					sinks.map((port, i) => (
+						<EditorPort
+							key={ port.id }
+							port={ port }
+							offset={ calcPortOffset(sinks.length, i)}
+							maxWidth={ portSizeLimit }
+						/>
+					))
 				}
 				{
-					sources.map((port, i) => <EditorPort key={ port.id } port={ port } offset={ calcPortOffset(sources.length, i) } />)
+					sources.map((port, i) => (
+						<EditorPort
+							key={ port.id }
+							port={ port }
+							offset={ calcPortOffset(sources.length, i) }
+							maxWidth={ portSizeLimit }
+						/>
+					))
 				}
 			</div>
 		</Paper>

diff --git a/src/components/editor/patcherNode.tsx b/src/components/editor/patcherNode.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, memo } from "react";
-import { EditorNodeProps, calcPortOffset } from "./util";
+import { EditorNodeProps, calcPortOffset, defaultNodeWidth } from "./util";
 import { GraphPatcherNodeRecord, GraphPortRecord, PortDirection } from "../../models/graph";
 import EditorPort from "./port";
 import classes from "./editor.module.css";
@@ -21,7 +21,7 @@ const EditorPatcherNode: FunctionComponent<EditorNodeProps> = memo(function Wrap
 		return result;
 	}, { sinks: [], sources: [] } as { sinks: GraphPortRecord[]; sources: GraphPortRecord[]; });
 
-	const portSizeLimit = sinks.length && sources.length ? Math.round(300 / 2) : 300;
+	const portSizeLimit = sinks.length && sources.length ? Math.round(defaultNodeWidth / 2) : defaultNodeWidth;
 
 	return (
 		<Paper className={ classes.node } shadow="md" withBorder data-selected={ selected } >
@@ -42,7 +42,7 @@ const EditorPatcherNode: FunctionComponent<EditorNodeProps> = memo(function Wrap
 					</Tooltip>
 				</div>
 			</div>
-			<div className={ classes.nodeContent } style={{ height: `${node.contentHeight}px`, minWidth: 300 }} >
+			<div className={ classes.nodeContent } style={{ height: `${node.contentHeight}px`, minWidth: defaultNodeWidth }} >
 				{
 					sinks.map((port, i) => (
 						<EditorPort

diff --git a/src/components/editor/util.ts b/src/components/editor/util.ts
@@ -16,3 +16,5 @@ export type EditorEdgeProps = EdgeProps<EdgeDataProps>;
 export const calcPortOffset = (total: number, index: number): number => {
 	return (index + 1) * (1 / (total + 1)) * 100;
 };
+
+export const defaultNodeWidth = 300;