Merge pull request #4990 from systeminit/wendy/bug-663-youre-able-to-…

…get-the-sockets-off-the-frame-bound fix for sockets going off the frame boundary
systeminit · Nov 18, 2024 · 9bf0ec7 · 9bf0ec7
2 parents 96a7b49 + 8031565
commit 9bf0ec7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/app/web/src/components/ModelingDiagram/ModelingDiagram.vue b/app/web/src/components/ModelingDiagram/ModelingDiagram.vue
@@ -1899,6 +1899,14 @@ function onResizeMove() {
         if (sizeDelta.y < minDelta) {
           sizeDelta.y = minDelta;
         }
+        if (
+          resizedElementGeometryPreResize.value.height + sizeDelta.y <
+          resizeElement.value.socketEndingY
+        ) {
+          sizeDelta.y =
+            resizeElement.value.socketEndingY -
+            resizedElementGeometryPreResize.value.height;
+        }
       }
       break;
     case "top":

diff --git a/app/web/src/components/ModelingDiagram/diagram_types.ts b/app/web/src/components/ModelingDiagram/diagram_types.ts
@@ -7,6 +7,7 @@ import { ChangeStatus } from "@/api/sdf/dal/change_set";
 import { ActorAndTimestamp, ComponentId } from "@/api/sdf/dal/component";
 import { ComponentType } from "@/api/sdf/dal/schema";
 import {
+  GROUP_BOTTOM_INTERNAL_PADDING,
   NODE_HEADER_HEIGHT,
   NODE_PADDING_BOTTOM,
   NODE_SUBTITLE_TEXT_HEIGHT,
@@ -52,6 +53,19 @@ abstract class DiagramNodeHasSockets extends DiagramElementData {
       def.sockets?.map((s) => new DiagramSocketData(this, s)) || [];
   }
 
+  get socketEndingY() {
+    return (
+      SOCKET_TOP_MARGIN +
+      SOCKET_MARGIN_TOP +
+      SOCKET_GAP *
+        (this.layoutLeftSockets(0).sockets.length +
+          this.layoutRightSockets(0).sockets.length -
+          1) +
+      SOCKET_SIZE / 2 +
+      GROUP_BOTTOM_INTERNAL_PADDING
+    );
+  }
+
   layoutLeftSockets(nodeWidth: number) {
     if (!this.sockets) return { x: 0, y: 0, sockets: [] };
     const layout: DiagramSocketDataWithPosition[] = [];
@@ -141,6 +155,9 @@ export class DiagramGroupData extends DiagramNodeHasSockets {
     return DiagramGroupData.generateUniqueKey(this.def.id);
   }
 
+  public readonly socketStartingY: number =
+    SOCKET_TOP_MARGIN + SOCKET_MARGIN_TOP;
+
   static generateUniqueKey(id: string | number) {
     return `g-${id}`;
   }