@flowgram.ai/fixed-layout-core 0.2.23 → 0.2.25

package/dist/index.d.ts

@@ -21,6 +21,7 @@ declare const FixedLayoutRegistries: {
     RootRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
     InlineBlocksRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
     EndRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
+    SlotRegistry: _flowgram_ai_document.FlowNodeRegistry<_flowgram_ai_document.FlowNodeMeta>;
 };
 
 export { FixedLayoutContainerModule, FixedLayoutRegistries };

package/dist/index.js

@@ -35,15 +35,15 @@ module.exports = __toCommonJS(src_exports);
 
 // src/fixed-layout-container-module.ts
 var import_inversify2 = require("inversify");
-var import_renderer8 = require("@flowgram.ai/renderer");
-var import_document30 = require("@flowgram.ai/document");
+var import_renderer9 = require("@flowgram.ai/renderer");
+var import_document39 = require("@flowgram.ai/document");
 var import_core2 = require("@flowgram.ai/core");
-var import_utils7 = require("@flowgram.ai/utils");
+var import_utils8 = require("@flowgram.ai/utils");
 
 // src/flow-registers.ts
 var import_inversify = require("inversify");
-var import_renderer7 = require("@flowgram.ai/renderer");
-var import_document29 = require("@flowgram.ai/document");
+var import_renderer8 = require("@flowgram.ai/renderer");
+var import_document38 = require("@flowgram.ai/document");
 var import_core = require("@flowgram.ai/core");
 
 // src/activities/end.ts
@@ -1710,6 +1710,516 @@ var MultiInputsRegistry = {
   }
 };
 
+// src/activities/slot/slot.ts
+var import_document37 = require("@flowgram.ai/document");
+
+// src/activities/slot/utils/transition.ts
+var import_utils7 = require("@flowgram.ai/utils");
+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 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
+var import_document29 = require("@flowgram.ai/document");
+var SlotNodeType = ((SlotNodeType2) => {
+  SlotNodeType2[SlotNodeType2["Slot"] = import_document29.FlowNodeBaseType.SLOT] = "Slot";
+  SlotNodeType2[SlotNodeType2["SlotBlock"] = import_document29.FlowNodeBaseType.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: import_document30.FlowTransitionLineEnum.STRAIGHT_LINE,
+      from: icon.outputPoint,
+      to: toPoint
+    },
+    {
+      type: import_document30.FlowTransitionLineEnum.STRAIGHT_LINE,
+      from: icon.inputPoint,
+      to: transition.transform.inputPoint
+    }
+  ];
+};
+var drawCollapseLabel = (transition) => {
+  const icon = transition.transform;
+  return [
+    {
+      type: import_document30.FlowTransitionLabelEnum.CUSTOM_LABEL,
+      renderKey: RENDER_SLOT_COLLAPSE_KEY,
+      offset: getSlotChildLineStartPoint(icon),
+      props: {
+        node: transition.entity.parent
+      }
+    }
+  ];
+};
+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 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: import_utils7.Point.getMiddlePoint(fromPoint, toPoint),
+      type: import_document30.FlowTransitionLabelEnum.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
+var import_lodash = require("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 + (0, import_lodash.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 (0, import_lodash.mean)(portInputs);
+};
+
+// src/activities/slot/utils/create.ts
+var import_document31 = require("@flowgram.ai/document");
+var createSlotFromJSON = (node, json) => {
+  const { document } = node;
+  const addedNodes = [];
+  const blockIconNode = document.addNode({
+    id: `$slotIcon$${node.id}`,
+    type: import_document31.FlowNodeBaseType.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
+var import_document32 = require("@flowgram.ai/document");
+var SlotIconRegistry = {
+  type: import_document32.FlowNodeBaseType.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
+var import_document33 = require("@flowgram.ai/document");
+var import_document34 = require("@flowgram.ai/document");
+var SlotInlineBlocksRegistry = {
+  type: "slotInlineBlocks" /* SlotInlineBlocks */,
+  extend: import_document33.FlowNodeBaseType.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(import_document34.FlowNodeTransformData);
+    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
+var import_lodash2 = require("lodash");
+var import_document35 = require("@flowgram.ai/document");
+var import_document36 = require("@flowgram.ai/document");
+var SlotBlockRegistry = {
+  type: SlotNodeType.SlotBlock,
+  extend: import_document35.FlowNodeBaseType.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: import_document35.FlowTransitionLineEnum.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: import_document35.FlowTransitionLineEnum.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: import_document35.FlowTransitionLabelEnum.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 = (0, import_lodash2.mean)([
+        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(import_document36.FlowNodeTransformData);
+    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: import_document37.FlowNodeBaseType.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 {
   /**
@@ -1749,14 +2259,16 @@ var FlowRegisters = class {
       MultiOuputsRegistry,
       MultiInputsRegistry,
       InputRegistry,
-      OuputRegistry
+      OuputRegistry,
+      SlotRegistry,
+      SlotBlockRegistry
     );
     document.registerNodeDatas(
-      import_document29.FlowNodeRenderData,
+      import_document38.FlowNodeRenderData,
       // 渲染节点相关数据
-      import_document29.FlowNodeTransitionData,
+      import_document38.FlowNodeTransitionData,
       // 线条绘制数据
-      import_document29.FlowNodeTransformData
+      import_document38.FlowNodeTransformData
       // 坐标计算数据
     );
   }
@@ -1766,13 +2278,13 @@ var FlowRegisters = class {
    */
   registerRenderer(renderer) {
     renderer.registerLayers(
-      import_renderer7.FlowNodesTransformLayer,
+      import_renderer8.FlowNodesTransformLayer,
       // 节点位置渲染
-      import_renderer7.FlowNodesContentLayer,
+      import_renderer8.FlowNodesContentLayer,
       // 节点内容渲染
-      import_renderer7.FlowLinesLayer,
+      import_renderer8.FlowLinesLayer,
       // 线条渲染
-      import_renderer7.FlowLabelsLayer,
+      import_renderer8.FlowLabelsLayer,
       // Label 渲染
       import_core.PlaygroundLayer
       // 画布基础层，提供缩放、手势等能力
@@ -1795,9 +2307,9 @@ FlowRegisters = __decorateClass([
 
 // src/fixed-layout-container-module.ts
 var FixedLayoutContainerModule = new import_inversify2.ContainerModule((bind) => {
-  (0, import_utils7.bindContributions)(bind, FlowRegisters, [
-    import_document30.FlowDocumentContribution,
-    import_renderer8.FlowRendererContribution,
+  (0, import_utils8.bindContributions)(bind, FlowRegisters, [
+    import_document39.FlowDocumentContribution,
+    import_renderer9.FlowRendererContribution,
     import_core2.PlaygroundContribution
   ]);
 });
@@ -1815,7 +2327,8 @@ var FixedLayoutRegistries = {
   StartRegistry,
   RootRegistry,
   InlineBlocksRegistry,
-  EndRegistry
+  EndRegistry,
+  SlotRegistry
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {