improving positioning a little bit for compositions and thumb-input/output when creating a composition

Author: devhelpr

libs/app-canvas/src/app/app.element.tsx

@@ -1020,25 +1020,46 @@ export class AppElement<T extends BaseNodeInfo> {
     let minY = -1;
     let maxX = -1;
     let maxY = -1;
+    let nodeCounter = 0;
+    let lastNode: FlowNode<T> | undefined = undefined;
     composition.nodes.forEach((node) => {
+      if (
+        node.nodeInfo?.type === 'thumb-input' ||
+        node.nodeInfo?.type === 'thumb-output'
+      ) {
+        return;
+      } else if (node.nodeType === NodeType.Connection) {
+        return;
+      }
       if (node.x < minX || minX === -1) {
         minX = node.x;
       }
       if (node.y < minY || minY === -1) {
         minY = node.y;
       }
       if (node.x + (node.width ?? 0) > maxX || maxX === -1) {
-        maxX = node.x;
+        maxX = node.x + (node.width ?? 0);
       }
       if (node.y + (node.height ?? 0) > maxY || maxY === -1) {
-        maxY = node.y;
+        maxY = node.y + (node.height ?? 0);
       }
+      lastNode = node;
+      nodeCounter++;
     });
     minX = minX === -1 ? minX : composition.nodes[0]?.x ?? 0;
     minY = minY === -1 ? minY : composition.nodes[0]?.y ?? 0;
     let x = (minX + maxX) / 2 - 100;
     let y = (minY + maxY) / 2 - 100;
 
+    function isFlowNode(node: FlowNode<T> | undefined): node is FlowNode<T> {
+      return node !== undefined;
+    }
+    if (nodeCounter === 1 && isFlowNode(lastNode)) {
+      const node: FlowNode<T> = lastNode;
+      x = node.x;
+      y = node.y;
+    }
+
     if (minX === -1) {
       let halfWidth = 0;
       let halfHeight = 0;

libs/visual-programming-system/src/components/node-selector.ts

@@ -532,6 +532,42 @@ export class NodeSelector<T extends BaseNodeInfo> {
         return;
       }
 
+      let minX = -1;
+      let minY = -1;
+      let maxX = -1;
+      let maxY = -1;
+      this.elements.forEach((element) => {
+        const nodeComponent = element as unknown as IRectNodeComponent<T>;
+        if (nodeComponent.nodeType === NodeType.Shape) {
+          const isNodeSelected = this.selectedNodes.find(
+            (n) => n.id === nodeComponent.id
+          );
+          if (isNodeSelected) {
+            if (nodeComponent.x < minX || minX === -1) {
+              minX = nodeComponent.x;
+            }
+            if (nodeComponent.y < minY || minY === -1) {
+              minY = nodeComponent.y;
+            }
+            if (
+              nodeComponent.x + (nodeComponent.width ?? 0) > maxX ||
+              maxX === -1
+            ) {
+              maxX = nodeComponent.x + (nodeComponent.width ?? 0);
+            }
+            if (
+              nodeComponent.y + (nodeComponent.height ?? 0) > maxY ||
+              maxY === -1
+            ) {
+              maxY = nodeComponent.y + (nodeComponent.height ?? 0);
+            }
+          }
+        }
+      });
+
+      minX -= 300;
+      maxX += 300;
+
       this.elements.forEach((element) => {
         const nodeComponent = element as unknown as IRectNodeComponent<T>;
         if (nodeComponent.nodeType === NodeType.Shape) {
@@ -584,8 +620,8 @@ export class NodeSelector<T extends BaseNodeInfo> {
                         nodeTask.setTitle?.(thumb.name);
                         const thumbOutput = nodeTask.createVisualNode(
                           this.canvasApp,
-                          0 + 100,
-                          0 + 100 + outputThumbIndex * 200,
+                          maxX + 100,
+                          minY - 100 + outputThumbIndex * 200,
                           undefined,
                           {
                             valueType: thumb.thumbConstraint,
@@ -735,8 +771,8 @@ export class NodeSelector<T extends BaseNodeInfo> {
                         nodeTask.setTitle?.(thumb.name);
                         const thumbInput = nodeTask.createVisualNode(
                           this.canvasApp,
-                          0 - 100,
-                          0 - 100 + inputThumbIndex * 200,
+                          minX - 100,
+                          minY - 100 + inputThumbIndex * 200,
                           undefined,
                           {
                             valueType: thumb.thumbConstraint,