feat(free-layout): auto create line from bottom port (#737)

Author: xiamidaxia

apps/demo-free-layout/src/hooks/use-port-click.ts

@@ -55,10 +55,16 @@ export const usePortClick = () => {
     // calculate position for the new node - 计算新节点的位置
     const nodePosition = WorkflowNodePanelUtils.adjustNodePosition({
       nodeType,
-      position: {
-        x: mousePos.x + 100,
-        y: mousePos.y,
-      },
+      position:
+        port.location === 'bottom'
+          ? {
+              x: mousePos.x,
+              y: mousePos.y + 100,
+            }
+          : {
+              x: mousePos.x + 100,
+              y: mousePos.y,
+            },
       fromPort: port,
       containerNode,
       document,

apps/demo-free-layout/src/utils/on-drag-line-end.ts

@@ -43,10 +43,16 @@ export const onDragLineEnd = async (ctx: FreeLayoutPluginContext, params: onDrag
 
   // get container node for the new node - 获取新节点的容器节点
   const containerNode = fromPort.node.parent;
+  const isVertical = fromPort.location === 'bottom';
 
   // open node selection panel - 打开节点选择面板
   const result = await nodePanelService.singleSelectNodePanel({
-    position: mousePos,
+    position: isVertical
+      ? {
+          x: mousePos.x - 165,
+          y: mousePos.y + 60,
+        }
+      : mousePos,
     containerNode,
     panelProps: {
       enableNodePlaceholder: true,

packages/plugins/free-node-panel-plugin/src/utils/adjust-node-position.ts

@@ -39,10 +39,17 @@ export const adjustNodePosition: IAdjustNodePosition = (params) => {
     };
   } else if (fromPort && !toPort) {
     // 仅输入
-    adjustedPosition = {
-      x: position.x + size.width / 2,
-      y: position.y - size.height / 2,
-    };
+    if (fromPort.location === 'bottom') {
+      adjustedPosition = {
+        x: position.x,
+        y: position.y,
+      };
+    } else {
+      adjustedPosition = {
+        x: position.x + size.width / 2,
+        y: position.y - size.height / 2,
+      };
+    }
   } else if (!fromPort && toPort) {
     // 仅输出
     adjustedPosition = {

packages/plugins/free-node-panel-plugin/src/utils/build-line.ts

@@ -27,7 +27,10 @@ export const buildLine: IBuildLine = (params) => {
 
   const shouldBuildFromLine = portsData.inputPorts?.length > 0;
   if (fromPort && shouldBuildFromLine) {
-    const toTargetPort = portsData.inputPorts[0];
+    const isVertical = fromPort.location === 'bottom';
+    const toTargetPort =
+      portsData.inputPorts.find((port) => (isVertical ? port.location === 'top' : true)) ||
+      portsData.inputPorts[0];
     linesManager.createLine({
       from: fromPort.node.id,
       fromPort: fromPort.portID,