@flowgram.ai/fixed-layout-core 0.3.5 → 0.4.0

package/dist/index.d.mts

@@ -8,6 +8,37 @@ import { ContainerModule } from 'inversify';
 
 declare const FixedLayoutContainerModule: ContainerModule;
 
+declare const SlotSpacingKey: {
+    /**
+     * = Next Node - Slot END
+     */
+    SLOT_SPACING: string;
+    /**
+     * = Slot Start Line - Slot Icon Right
+     */
+    SLOT_START_DISTANCE: string;
+    /**
+     * = Slot Radius
+     */
+    SLOT_RADIUS: string;
+    /**
+     * = Slot Port - Slot Start
+     */
+    SLOT_PORT_DISTANCE: string;
+    /**
+     * = Slot Label - Slot Start
+     */
+    SLOT_LABEL_DISTANCE: string;
+    /**
+     * = Slot Block - Slot Port
+     */
+    SLOT_BLOCK_PORT_DISTANCE: string;
+    /**
+     * Vertical Layout: Slot Block - Slot Block
+     */
+    SLOT_BLOCK_VERTICAL_SPACING: string;
+};
+
 declare const FixedLayoutRegistries: {
     BlockIconRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
     BlockOrderIconRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
@@ -24,4 +55,4 @@ declare const FixedLayoutRegistries: {
     SlotRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
 };
 
-export { FixedLayoutContainerModule, FixedLayoutRegistries };
+export { FixedLayoutContainerModule, FixedLayoutRegistries, SlotSpacingKey };

package/dist/index.d.ts

@@ -8,6 +8,37 @@ import { ContainerModule } from 'inversify';
 
 declare const FixedLayoutContainerModule: ContainerModule;
 
+declare const SlotSpacingKey: {
+    /**
+     * = Next Node - Slot END
+     */
+    SLOT_SPACING: string;
+    /**
+     * = Slot Start Line - Slot Icon Right
+     */
+    SLOT_START_DISTANCE: string;
+    /**
+     * = Slot Radius
+     */
+    SLOT_RADIUS: string;
+    /**
+     * = Slot Port - Slot Start
+     */
+    SLOT_PORT_DISTANCE: string;
+    /**
+     * = Slot Label - Slot Start
+     */
+    SLOT_LABEL_DISTANCE: string;
+    /**
+     * = Slot Block - Slot Port
+     */
+    SLOT_BLOCK_PORT_DISTANCE: string;
+    /**
+     * Vertical Layout: Slot Block - Slot Block
+     */
+    SLOT_BLOCK_VERTICAL_SPACING: string;
+};
+
 declare const FixedLayoutRegistries: {
     BlockIconRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
     BlockOrderIconRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
@@ -24,4 +55,4 @@ declare const FixedLayoutRegistries: {
     SlotRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
 };
 
-export { FixedLayoutContainerModule, FixedLayoutRegistries };
+export { FixedLayoutContainerModule, FixedLayoutRegistries, SlotSpacingKey };

package/dist/index.js

@@ -29,7 +29,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 var src_exports = {};
 __export(src_exports, {
   FixedLayoutContainerModule: () => FixedLayoutContainerModule,
-  FixedLayoutRegistries: () => FixedLayoutRegistries
+  FixedLayoutRegistries: () => FixedLayoutRegistries,
+  SlotSpacingKey: () => SlotSpacingKey
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -1720,12 +1721,46 @@ var import_document30 = require("@flowgram.ai/document");
 // src/activities/slot/constants.ts
 var import_renderer7 = require("@flowgram.ai/renderer");
 var RENDER_SLOT_ADDER_KEY = import_renderer7.FlowRendererKey.SLOT_ADDER;
-var RENDER_SLOT_COLLAPSE_KEY = import_renderer7.FlowRendererKey.SLOT_COLLPASE;
-var SLOT_BLOCK_DISTANCE = 60;
-var SLOT_COLLAPSE_MARGIN = 20;
+var RENDER_SLOT_LABEL_KEY = import_renderer7.FlowRendererKey.SLOT_LABEL;
+var RENDER_SLOT_COLLAPSE_KEY = import_renderer7.FlowRendererKey.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
 var import_document29 = require("@flowgram.ai/document");
@@ -1752,14 +1787,19 @@ var getSlotChildLineStartPoint = (iconTransform) => {
   if (!iconTransform) {
     return { x: 0, y: 0 };
   }
+  const startDistance = (0, import_document30.getDefaultSpacing)(
+    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
   };
 };
@@ -1846,19 +1886,26 @@ var drawCollapseLabel = (transition) => {
     }
   ];
 };
-var drawCollapseLine = (transition) => [
-  {
-    type: import_document30.FlowTransitionLineEnum.STRAIGHT_LINE,
-    from: getSlotChildLineStartPoint(transition.transform),
-    to: import_utils7.Point.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 = (0, import_document30.getDefaultSpacing)(
+    transition.transform.entity,
+    SlotSpacingKey.SLOT_START_DISTANCE,
+    SLOT_START_DISTANCE
+  );
+  return [
+    {
+      type: import_document30.FlowTransitionLineEnum.STRAIGHT_LINE,
+      from: getSlotChildLineStartPoint(transition.transform),
+      to: import_utils7.Point.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;
@@ -2019,21 +2066,37 @@ var SlotInlineBlocksRegistry = {
     if (!icon) {
       return { x: 0, y: 0 };
     }
+    const startDistance = (0, import_document33.getDefaultSpacing)(
+      transform.entity,
+      SlotSpacingKey.SLOT_START_DISTANCE,
+      SLOT_START_DISTANCE
+    );
+    const portDistance = (0, import_document33.getDefaultSpacing)(
+      transform.entity,
+      SlotSpacingKey.SLOT_PORT_DISTANCE,
+      SLOT_PORT_DISTANCE
+    );
+    const portBlockDistance = (0, import_document33.getDefaultSpacing)(
+      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
     };
   }
@@ -2053,7 +2116,11 @@ var SlotBlockRegistry = {
       if (!transform.entity.isVertical && transform.size.width === 0) {
         return 90;
       }
-      return 30;
+      return (0, import_document35.getDefaultSpacing)(
+        transform.entity,
+        SlotSpacingKey.SLOT_BLOCK_VERTICAL_SPACING,
+        SLOT_BLOCK_VERTICAL_SPACING
+      );
     },
     isInlineBlocks: (node) => !node.isVertical
   },
@@ -2061,22 +2128,53 @@ var SlotBlockRegistry = {
     const icon = transition.transform.parent?.pre;
     const start = getSlotChildLineStartPoint(icon);
     const portPoint = transition.transform.inputPoint;
+    const radius = (0, import_document35.getDefaultSpacing)(
+      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 } : {}
+        }
+      ];
+    }
     return [
       {
         type: import_document35.FlowTransitionLineEnum.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: import_document35.FlowTransitionLineEnum.ROUNDED_LINE,
-          radius: 5,
+          radius,
           from: portPoint,
           to: childInput,
           vertices: [{ x: portPoint.x, y: childInput.y }],
@@ -2088,6 +2186,8 @@ var SlotBlockRegistry = {
     ];
   },
   getLabels(transition) {
+    const icon = transition.transform.parent?.pre;
+    const start = getSlotChildLineStartPoint(icon);
     const portPoint = transition.transform.inputPoint;
     return [
       {
@@ -2097,6 +2197,22 @@ var SlotBlockRegistry = {
           node: transition.entity
         },
         offset: portPoint
+      },
+      {
+        type: import_document35.FlowTransitionLabelEnum.CUSTOM_LABEL,
+        renderKey: RENDER_SLOT_LABEL_KEY,
+        props: {
+          node: transition.entity
+        },
+        offset: {
+          x: start.x + (0, import_document35.getDefaultSpacing)(
+            transition.entity,
+            SlotSpacingKey.SLOT_LABEL_DISTANCE,
+            SLOT_LABEL_DISTANCE
+          ),
+          y: portPoint.y
+        },
+        origin: [0, 0.5]
       }
     ];
   },
@@ -2111,7 +2227,7 @@ var SlotBlockRegistry = {
       ]);
     }
     return {
-      x: start.x + SLOT_BLOCK_DISTANCE,
+      x: start.x + (0, import_document35.getDefaultSpacing)(transform.entity, SlotSpacingKey.SLOT_PORT_DISTANCE, SLOT_PORT_DISTANCE),
       y: inputY
     };
   },
@@ -2154,10 +2270,10 @@ var SlotRegistry = {
     // Slot 节点内部暂时不允许拖拽
     draggable: (node) => !insideSlot(node),
     hidden: true,
-    spacing: SLOT_SPACING,
+    spacing: (node) => (0, import_document37.getDefaultSpacing)(node.entity, SlotSpacingKey.SLOT_SPACING, SLOT_SPACING),
     padding: (node) => ({
       left: 0,
-      right: node.collapsed ? SLOT_COLLAPSE_MARGIN : 0,
+      right: node.collapsed ? (0, import_document37.getDefaultSpacing)(node.entity, SlotSpacingKey.SLOT_START_DISTANCE, SLOT_START_DISTANCE) : 0,
       bottom: !insideSlot(node.entity) && node.isLast ? SLOT_NODE_LAST_SPACING : 0,
       top: 0
     }),
@@ -2333,6 +2449,7 @@ var FixedLayoutRegistries = {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FixedLayoutContainerModule,
-  FixedLayoutRegistries
+  FixedLayoutRegistries,
+  SlotSpacingKey
 });
 //# sourceMappingURL=index.js.map