@flowgram.ai/fixed-layout-core 0.1.0-alpha.13 → 0.1.0-alpha.14

package/dist/esm/index.js

@@ -1781,24 +1781,59 @@ var MultiInputsRegistry = {
 };
 
 // src/activities/slot/slot.ts
-import { FlowNodeBaseType as FlowNodeBaseType28 } from "@flowgram.ai/document";
+import { FlowNodeBaseType as FlowNodeBaseType28, getDefaultSpacing as getDefaultSpacing13 } from "@flowgram.ai/document";
 
 // src/activities/slot/utils/transition.ts
 import { Point as Point7 } from "@flowgram.ai/utils";
 import {
   FlowTransitionLineEnum as FlowTransitionLineEnum7,
-  FlowTransitionLabelEnum as FlowTransitionLabelEnum15
+  FlowTransitionLabelEnum as FlowTransitionLabelEnum15,
+  getDefaultSpacing as getDefaultSpacing10
 } from "@flowgram.ai/document";
 
 // src/activities/slot/constants.ts
 import { FlowRendererKey as FlowRendererKey5 } from "@flowgram.ai/renderer";
 var RENDER_SLOT_ADDER_KEY = FlowRendererKey5.SLOT_ADDER;
-var RENDER_SLOT_COLLAPSE_KEY = FlowRendererKey5.SLOT_COLLPASE;
-var SLOT_BLOCK_DISTANCE = 60;
-var SLOT_COLLAPSE_MARGIN = 20;
+var RENDER_SLOT_LABEL_KEY = FlowRendererKey5.SLOT_LABEL;
+var RENDER_SLOT_COLLAPSE_KEY = FlowRendererKey5.SLOT_COLLAPSE;
+var SlotSpacingKey = {
+  /**
+   * = Next Node - Slot END
+   */
+  SLOT_SPACING: "SLOT_SPACING",
+  /**
+   * = Slot Start Line - Slot Icon Right
+   */
+  SLOT_START_DISTANCE: "SLOT_START_DISTANCE",
+  /**
+   * = Slot Radius
+   */
+  SLOT_RADIUS: "SLOT_RADIUS",
+  /**
+   * = Slot Port - Slot Start
+   */
+  SLOT_PORT_DISTANCE: "SLOT_PORT_DISTANCE",
+  /**
+   * = Slot Label - Slot Start
+   */
+  SLOT_LABEL_DISTANCE: "SLOT_LABEL_DISTANCE",
+  /**
+   * = Slot Block - Slot Port
+   */
+  SLOT_BLOCK_PORT_DISTANCE: "SLOT_BLOCK_PORT_DISTANCE",
+  /**
+   * Vertical Layout: Slot Block - Slot Block
+   */
+  SLOT_BLOCK_VERTICAL_SPACING: "SLOT_BLOCK_VERTICAL_SPACING"
+};
+var SLOT_START_DISTANCE = 16;
+var SLOT_PORT_DISTANCE = 100;
+var SLOT_LABEL_DISTANCE = 32;
+var SLOT_BLOCK_PORT_DISTANCE = 32.5;
+var SLOT_RADIUS = 16;
 var SLOT_SPACING = 32;
+var SLOT_BLOCK_VERTICAL_SPACING = 32.5;
 var SLOT_NODE_LAST_SPACING = 10;
-var SLOT_INLINE_BLOCKS_DELTA = SLOT_COLLAPSE_MARGIN + SLOT_BLOCK_DISTANCE * 2;
 
 // src/activities/slot/typings.ts
 import { FlowNodeBaseType as FlowNodeBaseType23 } from "@flowgram.ai/document";
@@ -1825,14 +1860,19 @@ var getSlotChildLineStartPoint = (iconTransform) => {
   if (!iconTransform) {
     return { x: 0, y: 0 };
   }
+  const startDistance = getDefaultSpacing10(
+    iconTransform.entity,
+    SlotSpacingKey.SLOT_START_DISTANCE,
+    SLOT_START_DISTANCE
+  );
   if (!iconTransform.entity.isVertical) {
     return {
       x: iconTransform?.bounds.center.x,
-      y: iconTransform?.bounds.bottom + SLOT_COLLAPSE_MARGIN
+      y: iconTransform?.bounds.bottom + startDistance
     };
   }
   return {
-    x: iconTransform?.bounds.right + SLOT_COLLAPSE_MARGIN,
+    x: iconTransform?.bounds.right + startDistance,
     y: iconTransform?.bounds.center.y
   };
 };
@@ -1919,19 +1959,26 @@ var drawCollapseLabel = (transition) => {
     }
   ];
 };
-var drawCollapseLine = (transition) => [
-  {
-    type: FlowTransitionLineEnum7.STRAIGHT_LINE,
-    from: getSlotChildLineStartPoint(transition.transform),
-    to: Point7.move(
-      getSlotChildLineStartPoint(transition.transform),
-      transition.entity.isVertical ? { x: -SLOT_COLLAPSE_MARGIN, y: 0 } : { x: 0, y: -SLOT_COLLAPSE_MARGIN }
-    ),
-    style: {
-      strokeDasharray: "5 5"
+var drawCollapseLine = (transition) => {
+  const startDistance = getDefaultSpacing10(
+    transition.transform.entity,
+    SlotSpacingKey.SLOT_START_DISTANCE,
+    SLOT_START_DISTANCE
+  );
+  return [
+    {
+      type: FlowTransitionLineEnum7.STRAIGHT_LINE,
+      from: getSlotChildLineStartPoint(transition.transform),
+      to: Point7.move(
+        getSlotChildLineStartPoint(transition.transform),
+        transition.entity.isVertical ? { x: -startDistance, y: 0 } : { x: 0, y: -startDistance }
+      ),
+      style: {
+        strokeDasharray: "5 5"
+      }
     }
-  }
-];
+  ];
+};
 var drawStraightAdder = (transition) => {
   const toPoint = getTransitionToPoint(transition);
   const fromPoint = transition.transform.firstChild.outputPoint;
@@ -1959,7 +2006,7 @@ var getPortChildInput = (_child) => {
 };
 
 // src/activities/slot/utils/layout.ts
-import { mean } from "lodash";
+import { mean } from "lodash-es";
 var getDisplayFirstChildTop = (transform) => {
   if (transform.firstChild) {
     return transform.localBounds.top + getDisplayFirstChildTop(transform.firstChild);
@@ -2050,7 +2097,7 @@ var SlotIconRegistry = {
 };
 
 // src/activities/slot/extends/slot-inline-blocks.ts
-import { FlowNodeBaseType as FlowNodeBaseType26 } from "@flowgram.ai/document";
+import { FlowNodeBaseType as FlowNodeBaseType26, getDefaultSpacing as getDefaultSpacing11 } from "@flowgram.ai/document";
 import { FlowNodeTransformData as FlowNodeTransformData3 } from "@flowgram.ai/document";
 var SlotInlineBlocksRegistry = {
   type: "slotInlineBlocks" /* SlotInlineBlocks */,
@@ -2092,32 +2139,49 @@ var SlotInlineBlocksRegistry = {
     if (!icon) {
       return { x: 0, y: 0 };
     }
+    const startDistance = getDefaultSpacing11(
+      transform.entity,
+      SlotSpacingKey.SLOT_START_DISTANCE,
+      SLOT_START_DISTANCE
+    );
+    const portDistance = getDefaultSpacing11(
+      transform.entity,
+      SlotSpacingKey.SLOT_PORT_DISTANCE,
+      SLOT_PORT_DISTANCE
+    );
+    const portBlockDistance = getDefaultSpacing11(
+      transform.entity,
+      SlotSpacingKey.SLOT_BLOCK_PORT_DISTANCE,
+      SLOT_BLOCK_PORT_DISTANCE
+    );
     if (!transform.entity.isVertical) {
       const noChildren = transform?.children?.every?.((_port) => !_port.children.length);
       if (noChildren) {
         return {
-          x: SLOT_BLOCK_DISTANCE - icon.localBounds.width / 2,
-          y: icon.localBounds.bottom + SLOT_COLLAPSE_MARGIN
+          x: portDistance - icon.localBounds.width / 2,
+          y: icon.localBounds.bottom + startDistance
         };
       }
       return {
-        x: 2 * SLOT_BLOCK_DISTANCE - icon.localBounds.width / 2,
-        y: icon.localBounds.bottom + SLOT_COLLAPSE_MARGIN
+        x: portDistance + portBlockDistance - icon.localBounds.width / 2,
+        y: icon.localBounds.bottom + startDistance
       };
     }
+    const slotInlineBlockDelta = startDistance + portDistance + portBlockDistance;
     return {
-      x: icon.localBounds.right + SLOT_INLINE_BLOCKS_DELTA,
+      x: icon.localBounds.right + slotInlineBlockDelta,
       y: -icon.localBounds.height
     };
   }
 };
 
 // src/activities/slot/extends/slot-block.ts
-import { mean as mean2 } from "lodash";
+import { mean as mean2 } from "lodash-es";
 import {
   FlowNodeBaseType as FlowNodeBaseType27,
   FlowTransitionLabelEnum as FlowTransitionLabelEnum16,
-  FlowTransitionLineEnum as FlowTransitionLineEnum8
+  FlowTransitionLineEnum as FlowTransitionLineEnum8,
+  getDefaultSpacing as getDefaultSpacing12
 } from "@flowgram.ai/document";
 import { FlowNodeTransformData as FlowNodeTransformData4 } from "@flowgram.ai/document";
 var SlotBlockRegistry = {
@@ -2130,7 +2194,11 @@ var SlotBlockRegistry = {
       if (!transform.entity.isVertical && transform.size.width === 0) {
         return 90;
       }
-      return 30;
+      return getDefaultSpacing12(
+        transform.entity,
+        SlotSpacingKey.SLOT_BLOCK_VERTICAL_SPACING,
+        SLOT_BLOCK_VERTICAL_SPACING
+      );
     },
     isInlineBlocks: (node) => !node.isVertical
   },
@@ -2138,22 +2206,67 @@ var SlotBlockRegistry = {
     const icon = transition.transform.parent?.pre;
     const start = getSlotChildLineStartPoint(icon);
     const portPoint = transition.transform.inputPoint;
+    const radius = getDefaultSpacing12(
+      transition.transform.entity,
+      SlotSpacingKey.SLOT_RADIUS,
+      SLOT_RADIUS
+    );
+    let startPortVertices = [{ x: start.x, y: portPoint.y }];
+    if (transition.entity.isVertical) {
+      const deltaY = Math.abs(portPoint.y - start.y);
+      let deltaX = radius;
+      let isTruncated = false;
+      if (deltaY < radius * 2) {
+        isTruncated = true;
+        if (deltaY < radius) {
+          deltaX = Math.sqrt(radius ** 2 - (radius - deltaY) ** 2);
+        }
+      }
+      startPortVertices = [
+        {
+          x: start.x + deltaX,
+          y: start.y,
+          radiusX: radius,
+          radiusY: radius,
+          radiusOverflow: "truncate"
+        },
+        {
+          x: start.x + deltaX,
+          y: portPoint.y,
+          ...isTruncated ? { radiusX: 0, radiusY: 0 } : {}
+        }
+      ];
+    }
+    if (transition.transform.children.length === 1) {
+      return [
+        {
+          type: FlowTransitionLineEnum8.ROUNDED_LINE,
+          from: start,
+          to: getPortChildInput(transition.transform.children[0]),
+          vertices: startPortVertices,
+          style: {
+            strokeDasharray: "5 5"
+          },
+          radius
+        }
+      ];
+    }
     return [
       {
         type: FlowTransitionLineEnum8.ROUNDED_LINE,
         from: start,
         to: portPoint,
-        vertices: [{ x: start.x, y: portPoint.y }],
+        vertices: startPortVertices,
         style: {
           strokeDasharray: "5 5"
         },
-        radius: 5
+        radius
       },
       ...transition.transform.children.map((_child) => {
         const childInput = getPortChildInput(_child);
         return {
           type: FlowTransitionLineEnum8.ROUNDED_LINE,
-          radius: 5,
+          radius,
           from: portPoint,
           to: childInput,
           vertices: [{ x: portPoint.x, y: childInput.y }],
@@ -2165,6 +2278,8 @@ var SlotBlockRegistry = {
     ];
   },
   getLabels(transition) {
+    const icon = transition.transform.parent?.pre;
+    const start = getSlotChildLineStartPoint(icon);
     const portPoint = transition.transform.inputPoint;
     return [
       {
@@ -2174,6 +2289,22 @@ var SlotBlockRegistry = {
           node: transition.entity
         },
         offset: portPoint
+      },
+      {
+        type: FlowTransitionLabelEnum16.CUSTOM_LABEL,
+        renderKey: RENDER_SLOT_LABEL_KEY,
+        props: {
+          node: transition.entity
+        },
+        offset: {
+          x: start.x + getDefaultSpacing12(
+            transition.entity,
+            SlotSpacingKey.SLOT_LABEL_DISTANCE,
+            SLOT_LABEL_DISTANCE
+          ),
+          y: portPoint.y
+        },
+        origin: [0, 0.5]
       }
     ];
   },
@@ -2188,7 +2319,7 @@ var SlotBlockRegistry = {
       ]);
     }
     return {
-      x: start.x + SLOT_BLOCK_DISTANCE,
+      x: start.x + getDefaultSpacing12(transform.entity, SlotSpacingKey.SLOT_PORT_DISTANCE, SLOT_PORT_DISTANCE),
       y: inputY
     };
   },
@@ -2231,10 +2362,10 @@ var SlotRegistry = {
     // Slot 节点内部暂时不允许拖拽
     draggable: (node) => !insideSlot(node),
     hidden: true,
-    spacing: SLOT_SPACING,
+    spacing: (node) => getDefaultSpacing13(node.entity, SlotSpacingKey.SLOT_SPACING, SLOT_SPACING),
     padding: (node) => ({
       left: 0,
-      right: node.collapsed ? SLOT_COLLAPSE_MARGIN : 0,
+      right: node.collapsed ? getDefaultSpacing13(node.entity, SlotSpacingKey.SLOT_START_DISTANCE, SLOT_START_DISTANCE) : 0,
       bottom: !insideSlot(node.entity) && node.isLast ? SLOT_NODE_LAST_SPACING : 0,
       top: 0
     }),
@@ -2405,10 +2536,14 @@ var FixedLayoutRegistries = {
   RootRegistry,
   InlineBlocksRegistry,
   EndRegistry,
-  SlotRegistry
+  SlotRegistry,
+  SlotBlockRegistry,
+  SlotIconRegistry,
+  SlotInlineBlocksRegistry
 };
 export {
   FixedLayoutContainerModule,
-  FixedLayoutRegistries
+  FixedLayoutRegistries,
+  SlotSpacingKey
 };
 //# sourceMappingURL=index.js.map