@flowgram.ai/fixed-layout-core 0.2.22 → 0.2.24

package/dist/esm/index.js

@@ -26,7 +26,7 @@ import {
 } from "@flowgram.ai/renderer";
 import {
   FlowNodeRenderData as FlowNodeRenderData4,
-  FlowNodeTransformData as FlowNodeTransformData3,
+  FlowNodeTransformData as FlowNodeTransformData5,
   FlowNodeTransitionData
 } from "@flowgram.ai/document";
 import { PlaygroundLayer } from "@flowgram.ai/core";
@@ -1780,6 +1780,523 @@ var MultiInputsRegistry = {
   }
 };
 
+// src/activities/slot/slot.ts
+import { FlowNodeBaseType as FlowNodeBaseType28 } 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
+} 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 SLOT_SPACING = 32;
+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";
+var SlotNodeType = ((SlotNodeType2) => {
+  SlotNodeType2[SlotNodeType2["Slot"] = FlowNodeBaseType23.SLOT] = "Slot";
+  SlotNodeType2[SlotNodeType2["SlotBlock"] = FlowNodeBaseType23.SLOT_BLOCK] = "SlotBlock";
+  SlotNodeType2["SlotInlineBlocks"] = "slotInlineBlocks";
+  SlotNodeType2["SlotBlockInlineBlocks"] = "slotBlockInlineBlocks";
+  return SlotNodeType2;
+})(SlotNodeType || {});
+
+// src/activities/slot/utils/node.ts
+var canSlotDrilldown = (Slot) => !!Slot?.lastCollapsedChild?.blocks.length;
+var insideSlot = (entity) => !!entity?.parent?.isTypeOrExtendType(SlotNodeType.SlotBlock);
+var getDisplayFirstChildTransform = (transform) => {
+  if (transform.firstChild) {
+    return getDisplayFirstChildTransform(transform.firstChild);
+  }
+  return transform;
+};
+
+// src/activities/slot/utils/transition.ts
+var getSlotChildLineStartPoint = (iconTransform) => {
+  if (!iconTransform) {
+    return { x: 0, y: 0 };
+  }
+  if (!iconTransform.entity.isVertical) {
+    return {
+      x: iconTransform?.bounds.center.x,
+      y: iconTransform?.bounds.bottom + SLOT_COLLAPSE_MARGIN
+    };
+  }
+  return {
+    x: iconTransform?.bounds.right + SLOT_COLLAPSE_MARGIN,
+    y: iconTransform?.bounds.center.y
+  };
+};
+var getOutputPoint = (transform) => {
+  const icon = transform.firstChild;
+  if (!icon) {
+    return { x: 0, y: 0 };
+  }
+  if (!transform.entity.isVertical) {
+    return {
+      x: transform.bounds.right,
+      y: icon.outputPoint.y
+    };
+  }
+  return {
+    x: icon.outputPoint.x,
+    y: transform.bounds.bottom
+  };
+};
+var getInputPoint = (transform) => {
+  const icon = transform.firstChild;
+  if (!icon) {
+    return { x: 0, y: 0 };
+  }
+  if (!transform.entity.isVertical) {
+    return {
+      x: transform.bounds.left,
+      y: icon.outputPoint.y
+    };
+  }
+  return icon.inputPoint;
+};
+var getTransitionToPoint = (transition) => {
+  let toPoint = transition.transform.next?.inputPoint;
+  const icon = transition.transform.firstChild;
+  const parent = transition.transform.parent;
+  if (!icon || !parent) {
+    return { x: 0, y: 0 };
+  }
+  if (!transition.transform.next) {
+    if (!transition.entity.isVertical) {
+      toPoint = {
+        x: parent.outputPoint.x,
+        y: icon.outputPoint.y
+      };
+    } else {
+      toPoint = {
+        x: icon.outputPoint.x,
+        y: parent.outputPoint.y
+      };
+    }
+  }
+  return toPoint || { x: 0, y: 0 };
+};
+var drawStraightLine = (transition) => {
+  const icon = transition.transform.firstChild;
+  const toPoint = getTransitionToPoint(transition);
+  if (!icon) {
+    return [];
+  }
+  return [
+    {
+      type: FlowTransitionLineEnum7.STRAIGHT_LINE,
+      from: icon.outputPoint,
+      to: toPoint
+    },
+    {
+      type: FlowTransitionLineEnum7.STRAIGHT_LINE,
+      from: icon.inputPoint,
+      to: transition.transform.inputPoint
+    }
+  ];
+};
+var drawCollapseLabel = (transition) => {
+  const icon = transition.transform;
+  return [
+    {
+      type: FlowTransitionLabelEnum15.CUSTOM_LABEL,
+      renderKey: RENDER_SLOT_COLLAPSE_KEY,
+      offset: getSlotChildLineStartPoint(icon),
+      props: {
+        node: transition.entity.parent
+      }
+    }
+  ];
+};
+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 drawStraightAdder = (transition) => {
+  const toPoint = getTransitionToPoint(transition);
+  const fromPoint = transition.transform.firstChild.outputPoint;
+  const hoverProps = transition.entity.isVertical ? {
+    hoverHeight: toPoint.y - fromPoint.y,
+    hoverWidth: transition.transform.firstChild?.bounds.width
+  } : {
+    hoverHeight: transition.transform.firstChild?.bounds.height,
+    hoverWidth: toPoint.x - fromPoint.x
+  };
+  return [
+    {
+      offset: Point7.getMiddlePoint(fromPoint, toPoint),
+      type: FlowTransitionLabelEnum15.ADDER_LABEL,
+      props: hoverProps
+    }
+  ];
+};
+var getPortChildInput = (_child) => {
+  if (!_child) {
+    return { x: 0, y: 0 };
+  }
+  const firstChild = getDisplayFirstChildTransform(_child);
+  return { x: _child.bounds.left, y: firstChild.bounds.center.y };
+};
+
+// src/activities/slot/utils/layout.ts
+import { mean } from "lodash";
+var getDisplayFirstChildTop = (transform) => {
+  if (transform.firstChild) {
+    return transform.localBounds.top + getDisplayFirstChildTop(transform.firstChild);
+  }
+  return transform.localBounds.center.y;
+};
+var getPortMiddle = (_port) => {
+  if (!_port.children.length) {
+    return _port.localBounds.top;
+  }
+  const portChildInputs = [_port.firstChild, _port.lastChild].map(
+    (_portChild) => getDisplayFirstChildTop(_portChild)
+  );
+  return _port.localBounds.top + mean(portChildInputs);
+};
+var getAllPortsMiddle = (inlineBlocks) => {
+  if (!inlineBlocks.children.length) {
+    return inlineBlocks.localBounds.height / 2;
+  }
+  const portInputs = [inlineBlocks.firstChild, inlineBlocks.lastChild].map(
+    (_port) => getPortMiddle(_port)
+  );
+  return mean(portInputs);
+};
+
+// src/activities/slot/utils/create.ts
+import { FlowNodeBaseType as FlowNodeBaseType24 } from "@flowgram.ai/document";
+var createSlotFromJSON = (node, json) => {
+  const { document } = node;
+  const addedNodes = [];
+  const blockIconNode = document.addNode({
+    id: `$slotIcon$${node.id}`,
+    type: FlowNodeBaseType24.BLOCK_ICON,
+    originParent: node,
+    parent: node
+  });
+  const inlineBlocksNode = document.addNode({
+    id: `$slotInlineBlocks$${node.id}`,
+    type: "slotInlineBlocks" /* SlotInlineBlocks */,
+    originParent: node,
+    parent: node
+  });
+  addedNodes.push(blockIconNode);
+  addedNodes.push(inlineBlocksNode);
+  const portJSONList = json.blocks || [];
+  portJSONList.forEach((_portJSON) => {
+    const port = document.addNode({
+      type: SlotNodeType.SlotBlock,
+      ..._portJSON,
+      originParent: node,
+      parent: inlineBlocksNode
+    });
+    addedNodes.push(port);
+    (_portJSON.blocks || []).forEach((_portChild) => {
+      document.addNode(
+        {
+          type: SlotNodeType.Slot,
+          ..._portChild,
+          parent: port
+        },
+        addedNodes
+      );
+    });
+  });
+  return addedNodes;
+};
+
+// src/activities/slot/extends/slot-icon.ts
+import { FlowNodeBaseType as FlowNodeBaseType25 } from "@flowgram.ai/document";
+var SlotIconRegistry = {
+  type: FlowNodeBaseType25.BLOCK_ICON,
+  meta: {
+    defaultExpanded: false,
+    spacing: 0
+  },
+  getLines: (transition) => [
+    ...canSlotDrilldown(transition.entity.parent) ? drawCollapseLine(transition) : []
+  ],
+  getLabels: (transition) => [
+    ...canSlotDrilldown(transition.entity.parent) ? drawCollapseLabel(transition) : []
+  ],
+  getDelta: (transform) => {
+    if (insideSlot(transform.entity.parent)) {
+      return transform.entity.isVertical ? { x: -transform.originDeltaX, y: 0 } : { x: 0, y: -transform.originDeltaY };
+    }
+    return { x: 0, y: 0 };
+  }
+};
+
+// src/activities/slot/extends/slot-inline-blocks.ts
+import { FlowNodeBaseType as FlowNodeBaseType26 } from "@flowgram.ai/document";
+import { FlowNodeTransformData as FlowNodeTransformData3 } from "@flowgram.ai/document";
+var SlotInlineBlocksRegistry = {
+  type: "slotInlineBlocks" /* SlotInlineBlocks */,
+  extend: FlowNodeBaseType26.BLOCK,
+  meta: {
+    spacing: 0,
+    inlineSpacingPre: 0,
+    inlineSpacingAfter: 0,
+    isInlineBlocks: (node) => !node.isVertical
+  },
+  getLines() {
+    return [];
+  },
+  getLabels() {
+    return [];
+  },
+  getChildDelta(child, layout) {
+    if (child.entity.isVertical) {
+      return { x: 0, y: 0 };
+    }
+    const preTransform = child.entity.pre?.getData(FlowNodeTransformData3);
+    if (preTransform) {
+      const { localBounds: preBounds } = preTransform;
+      return {
+        x: 0,
+        y: preBounds.bottom + 30
+      };
+    }
+    return { x: 0, y: 0 };
+  },
+  /**
+   * 控制条件分支居右布局
+   */
+  getDelta(transform) {
+    if (!transform.children.length) {
+      return { x: 0, y: 0 };
+    }
+    const icon = transform.pre;
+    if (!icon) {
+      return { x: 0, y: 0 };
+    }
+    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
+        };
+      }
+      return {
+        x: 2 * SLOT_BLOCK_DISTANCE - icon.localBounds.width / 2,
+        y: icon.localBounds.bottom + SLOT_COLLAPSE_MARGIN
+      };
+    }
+    return {
+      x: icon.localBounds.right + SLOT_INLINE_BLOCKS_DELTA,
+      y: -icon.localBounds.height
+    };
+  }
+};
+
+// src/activities/slot/extends/slot-block.ts
+import { mean as mean2 } from "lodash";
+import {
+  FlowNodeBaseType as FlowNodeBaseType27,
+  FlowTransitionLabelEnum as FlowTransitionLabelEnum16,
+  FlowTransitionLineEnum as FlowTransitionLineEnum8
+} from "@flowgram.ai/document";
+import { FlowNodeTransformData as FlowNodeTransformData4 } from "@flowgram.ai/document";
+var SlotBlockRegistry = {
+  type: SlotNodeType.SlotBlock,
+  extend: FlowNodeBaseType27.BLOCK,
+  meta: {
+    inlineSpacingAfter: 0,
+    inlineSpacingPre: 0,
+    spacing: (transform) => {
+      if (!transform.entity.isVertical && transform.size.width === 0) {
+        return 90;
+      }
+      return 30;
+    },
+    isInlineBlocks: (node) => !node.isVertical
+  },
+  getLines(transition) {
+    const icon = transition.transform.parent?.pre;
+    const start = getSlotChildLineStartPoint(icon);
+    const portPoint = transition.transform.inputPoint;
+    return [
+      {
+        type: FlowTransitionLineEnum8.ROUNDED_LINE,
+        from: start,
+        to: portPoint,
+        vertices: [{ x: start.x, y: portPoint.y }],
+        style: {
+          strokeDasharray: "5 5"
+        },
+        radius: 5
+      },
+      ...transition.transform.children.map((_child) => {
+        const childInput = getPortChildInput(_child);
+        return {
+          type: FlowTransitionLineEnum8.ROUNDED_LINE,
+          radius: 5,
+          from: portPoint,
+          to: childInput,
+          vertices: [{ x: portPoint.x, y: childInput.y }],
+          style: {
+            strokeDasharray: "5 5"
+          }
+        };
+      })
+    ];
+  },
+  getLabels(transition) {
+    const portPoint = transition.transform.inputPoint;
+    return [
+      {
+        type: FlowTransitionLabelEnum16.CUSTOM_LABEL,
+        renderKey: RENDER_SLOT_ADDER_KEY,
+        props: {
+          node: transition.entity
+        },
+        offset: portPoint
+      }
+    ];
+  },
+  getInputPoint(transform) {
+    const icon = transform.parent?.pre;
+    const start = getSlotChildLineStartPoint(icon);
+    let inputY = transform.bounds.center.y;
+    if (transform.children.length) {
+      inputY = mean2([
+        getPortChildInput(transform.firstChild).y,
+        getPortChildInput(transform.lastChild).y
+      ]);
+    }
+    return {
+      x: start.x + SLOT_BLOCK_DISTANCE,
+      y: inputY
+    };
+  },
+  getChildDelta(child, layout) {
+    const hasChild = !!child.firstChild;
+    if (child.entity.isVertical) {
+      let deltaX = hasChild ? 0 : -child.originDeltaX;
+      return { x: deltaX, y: 0 };
+    }
+    let deltaY = hasChild ? 0 : -child.originDeltaY;
+    const preTransform = child.entity.pre?.getData(FlowNodeTransformData4);
+    if (preTransform) {
+      const { localBounds: preBounds } = preTransform;
+      return {
+        x: 0,
+        y: preBounds.bottom + 30 + deltaY
+      };
+    }
+    return { x: 0, y: deltaY };
+  },
+  getChildLabels() {
+    return [];
+  },
+  getChildLines() {
+    return [];
+  },
+  getDelta(transform) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+};
+
+// src/activities/slot/slot.ts
+var SlotRegistry = {
+  type: FlowNodeBaseType28.SLOT,
+  extend: "block",
+  meta: {
+    // Slot 节点内部暂时不允许拖拽
+    draggable: (node) => !insideSlot(node),
+    hidden: true,
+    spacing: SLOT_SPACING,
+    padding: (node) => ({
+      left: 0,
+      right: node.collapsed ? SLOT_COLLAPSE_MARGIN : 0,
+      bottom: !insideSlot(node.entity) && node.isLast ? SLOT_NODE_LAST_SPACING : 0,
+      top: 0
+    }),
+    copyDisable: false,
+    defaultExpanded: false
+  },
+  /**
+   * 业务通常需要重载方法
+   */
+  onCreate: createSlotFromJSON,
+  getLines: (transition) => [
+    ...!insideSlot(transition.entity) ? drawStraightLine(transition) : []
+  ],
+  getLabels: (transition) => [
+    ...!insideSlot(transition.entity) ? drawStraightAdder(transition) : []
+  ],
+  getInputPoint,
+  getOutputPoint,
+  onAfterUpdateLocalTransform(transform) {
+    const { isVertical } = transform.entity;
+    if (!isVertical) {
+      return;
+    }
+    const icon = transform.firstChild;
+    const inlineBlocks = transform.lastChild;
+    if (!icon || !inlineBlocks) {
+      return;
+    }
+    const iconSize = icon.localBounds.height;
+    const inlineBlocksSize = inlineBlocks.localBounds.height;
+    if (transform.collapsed || !inlineBlocks) {
+      return;
+    }
+    const portsMiddle = getAllPortsMiddle(inlineBlocks);
+    icon.entity.clearMemoLocal();
+    inlineBlocks.entity.clearMemoLocal();
+    if (iconSize / 2 + portsMiddle > inlineBlocksSize || !inlineBlocks.children.length) {
+      icon.transform.update({
+        position: { x: icon.transform.position.x, y: 0 }
+      });
+      inlineBlocks.transform.update({
+        position: {
+          x: inlineBlocks.transform.position.x,
+          y: Math.max(iconSize / 2 - inlineBlocksSize / 2, 0)
+        }
+      });
+      return;
+    }
+    inlineBlocks.transform.update({
+      position: { x: inlineBlocks.transform.position.x, y: 0 }
+    });
+    icon?.transform.update({
+      position: {
+        x: icon.transform.position.x,
+        y: Math.max(portsMiddle - iconSize / 2, 0)
+        // 所有 port 的中间点
+      }
+    });
+  },
+  extendChildRegistries: [SlotIconRegistry, SlotInlineBlocksRegistry]
+};
+
 // src/flow-registers.ts
 var FlowRegisters = class {
   /**
@@ -1819,14 +2336,16 @@ var FlowRegisters = class {
       MultiOuputsRegistry,
       MultiInputsRegistry,
       InputRegistry,
-      OuputRegistry
+      OuputRegistry,
+      SlotRegistry,
+      SlotBlockRegistry
     );
     document.registerNodeDatas(
       FlowNodeRenderData4,
       // 渲染节点相关数据
       FlowNodeTransitionData,
       // 线条绘制数据
-      FlowNodeTransformData3
+      FlowNodeTransformData5
       // 坐标计算数据
     );
   }
@@ -1885,7 +2404,8 @@ var FixedLayoutRegistries = {
   StartRegistry,
   RootRegistry,
   InlineBlocksRegistry,
-  EndRegistry
+  EndRegistry,
+  SlotRegistry
 };
 export {
   FixedLayoutContainerModule,