@flowgram.ai/fixed-semi-materials 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/esm/index.js

@@ -161,11 +161,16 @@ import React3, { useState } from "react";
 import {
   FlowNodeRenderData,
   FlowNodeTransformData,
-  Playground
+  useBaseColor,
+  FlowTextKey,
+  usePlayground,
+  FlowRendererRegistry
 } from "@flowgram.ai/fixed-layout-editor";
 import { IconChevronLeft } from "@douyinfe/semi-icons";
 function TryCatchCollapse(props) {
   const { node } = props;
+  const { baseColor, baseActivatedColor } = useBaseColor();
+  const playground = usePlayground();
   const activateData = node.getData(FlowNodeRenderData);
   const transform = node.getData(FlowNodeTransformData);
   const [hoverActivated, setHoverActivated] = useState(false);
@@ -176,7 +181,7 @@ function TryCatchCollapse(props) {
   const height = 40;
   const scrollToActivateNode = () => {
     setTimeout(() => {
-      Playground.getLatest()?.scrollToView({
+      playground.config.scrollToView({
         position: node?.getData(FlowNodeTransformData)?.inputPoint,
         scrollToCenter: true
       });
@@ -218,7 +223,7 @@ function TryCatchCollapse(props) {
             cursor: "pointer",
             justifyContent: "center",
             alignItems: "center",
-            background: hoverActivated ? "#82A7FC" : "#BBBFC4"
+            background: hoverActivated || activateData.lineActivated ? baseActivatedColor : baseColor
           },
           "aria-hidden": "true"
         },
@@ -240,7 +245,7 @@ function TryCatchCollapse(props) {
             cursor: "pointer",
             justifyContent: "center",
             alignItems: "center",
-            background: "#82A7FC"
+            background: baseActivatedColor
           },
           "aria-hidden": "true"
         },
@@ -266,28 +271,198 @@ function TryCatchCollapse(props) {
     /* @__PURE__ */ React3.createElement(
       "div",
       {
+        "data-label-id": props.labelId,
         style: {
           fontSize: 12,
-          color: "#8F959E",
+          color: hoverActivated || activateData.lineActivated ? baseActivatedColor : baseColor,
           textAlign: "center",
           whiteSpace: "nowrap",
           backgroundColor: "var(--g-editor-background)",
           lineHeight: "20px"
         }
       },
-      "Something error"
+      node.getService(FlowRendererRegistry).getText(FlowTextKey.CATCH_TEXT)
     ),
     renderCollapse()
   );
 }
 var try_catch_collapse_default = TryCatchCollapse;
 
-// src/components/dragging-adder/index.tsx
+// src/components/slot-collapse.tsx
+import React5, { useState as useState2 } from "react";
+import {
+  FlowNodeRenderData as FlowNodeRenderData3,
+  FlowNodeTransformData as FlowNodeTransformData3
+} from "@flowgram.ai/fixed-layout-editor";
+
+// src/components/collapse/index.tsx
 import React4 from "react";
+import {
+  FlowNodeRenderData as FlowNodeRenderData2,
+  FlowNodeTransformData as FlowNodeTransformData2,
+  usePlayground as usePlayground2
+} from "@flowgram.ai/fixed-layout-editor";
 
-// src/components/dragging-adder/styles.tsx
+// src/components/collapse/styles.tsx
 import styled from "styled-components";
-var UIDragNodeContainer = styled.div`
+var Container = styled.div`
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  border-radius: 9px;
+  display: flex;
+  color: #fff;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  background: ${(props) => props.hoverActivated ? "#82A7FC" : "#BBBFC4"};
+  transform: ${(props) => !props.isVertical && props.isCollapse ? "rotate(-90deg)" : ""};
+`;
+
+// src/components/collapse/index.tsx
+function Collapse(props) {
+  const { collapseNode, activateNode, hoverActivated, style } = props;
+  const playground = usePlayground2();
+  const activateData = activateNode?.getData(FlowNodeRenderData2);
+  const transform = collapseNode.getData(FlowNodeTransformData2);
+  if (!transform) {
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+  }
+  const scrollToActivateNode = () => {
+    setTimeout(() => {
+      playground.config.scrollToView({
+        position: activateNode?.getData(FlowNodeTransformData2)?.outputPoint,
+        scrollToCenter: true
+      });
+    }, 100);
+  };
+  const collapseBlock = () => {
+    transform.collapsed = true;
+    activateData?.toggleMouseLeave();
+    scrollToActivateNode();
+  };
+  const openBlock = () => {
+    transform.collapsed = false;
+    scrollToActivateNode();
+  };
+  if (transform.collapsed) {
+    const childCount = collapseNode.allCollapsedChildren.filter(
+      (child) => !child.hidden && child !== activateNode
+    ).length;
+    return /* @__PURE__ */ React4.createElement(
+      Container,
+      {
+        onClick: openBlock,
+        hoverActivated,
+        "aria-hidden": "true",
+        style
+      },
+      childCount
+    );
+  }
+  const circleColor = "var(--semi-color-white)";
+  const color = hoverActivated ? "#82A7FC" : "#BBBFC4";
+  return /* @__PURE__ */ React4.createElement(
+    Container,
+    {
+      onClick: collapseBlock,
+      hoverActivated,
+      isVertical: activateNode?.isVertical,
+      isCollapse: true,
+      style,
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ React4.createElement(Arrow, { color, circleColor })
+  );
+}
+var collapse_default = Collapse;
+
+// src/components/slot-collapse.tsx
+function SlotCollapse({ node }) {
+  const [hoverActivated, setHoverActivated] = useState2(false);
+  const icon = node.firstChild;
+  const iconActivated = icon.getData(FlowNodeRenderData3).activated;
+  const iconHeight = icon.getData(FlowNodeTransformData3).size.height;
+  const isChildVisible = node.collapsed || hoverActivated || iconActivated;
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      style: {
+        width: 30,
+        height: iconHeight || 100,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      onMouseEnter: () => setHoverActivated(true),
+      onMouseLeave: () => setHoverActivated(false)
+    },
+    isChildVisible && /* @__PURE__ */ React5.createElement(
+      collapse_default,
+      {
+        style: !node.collapsed ? {
+          transform: node.isVertical ? "rotate(-90deg)" : "rotate(90deg)"
+        } : {},
+        node,
+        activateNode: icon,
+        collapseNode: node,
+        hoverActivated
+      }
+    )
+  );
+}
+
+// src/components/slot-adder.tsx
+import React6 from "react";
+import { nanoid } from "nanoid";
+import {
+  FlowNodeRenderData as FlowNodeRenderData4,
+  FlowDocument,
+  useService
+} from "@flowgram.ai/fixed-layout-editor";
+import { Button } from "@douyinfe/semi-ui";
+import { IconPlus } from "@douyinfe/semi-icons";
+function SlotAdder(props) {
+  const { node } = props;
+  const nodeData = node.firstChild?.getData(FlowNodeRenderData4);
+  const document = useService(FlowDocument);
+  async function addPort() {
+    document.addNode({
+      id: nanoid(5),
+      type: "custom",
+      parent: node
+    });
+  }
+  return /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        background: "var(--semi-color-bg-0)"
+      },
+      onMouseEnter: () => nodeData?.toggleMouseEnter(),
+      onMouseLeave: () => nodeData?.toggleMouseLeave()
+    },
+    /* @__PURE__ */ React6.createElement(
+      Button,
+      {
+        onClick: () => {
+          addPort();
+        },
+        size: "small",
+        icon: /* @__PURE__ */ React6.createElement(IconPlus, null)
+      }
+    )
+  );
+}
+
+// src/components/dragging-adder/index.tsx
+import React7 from "react";
+import { FlowDragLayer, usePlayground as usePlayground3 } from "@flowgram.ai/fixed-layout-editor";
+
+// src/components/dragging-adder/styles.tsx
+import styled2 from "styled-components";
+var UIDragNodeContainer = styled2.div`
   width: 16px;
   height: 16px;
   border-radius: 100px;
@@ -296,22 +471,32 @@ var UIDragNodeContainer = styled.div`
 `;
 
 // src/components/dragging-adder/index.tsx
-function DraggingAdder() {
-  return /* @__PURE__ */ React4.createElement(UIDragNodeContainer, null);
+function DraggingAdder(props) {
+  const playground = usePlayground3();
+  const layer = playground.getLayer(FlowDragLayer);
+  if (!layer) return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
+  if (layer.options.canDrop && !layer.options.canDrop({
+    dragNodes: layer.dragEntities || [],
+    dropNode: props.from,
+    isBranch: false
+  })) {
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
+  }
+  return /* @__PURE__ */ React7.createElement(UIDragNodeContainer, null);
 }
 
 // src/components/drag-node/index.tsx
-import React5 from "react";
+import React8 from "react";
 
 // src/components/drag-node/styles.tsx
-import styled2 from "styled-components";
+import styled3 from "styled-components";
 
 // src/components/constants.tsx
 var primary = "hsl(252 62% 54.9%)";
 var primaryOpacity09 = "hsl(252deg 62% 55% / 9%)";
 
 // src/components/drag-node/styles.tsx
-var UIDragNodeContainer2 = styled2.div`
+var UIDragNodeContainer2 = styled3.div`
   position: relative;
   height: 32px;
   border-radius: 5px;
@@ -326,7 +511,7 @@ var UIDragNodeContainer2 = styled2.div`
     color: ${primary};
   }
 `;
-var UIDragCounts = styled2.div`
+var UIDragCounts = styled3.div`
   position: absolute;
   top: -8px;
   right: -8px;
@@ -342,11 +527,11 @@ var UIDragCounts = styled2.div`
 
 // src/components/drag-node/index.tsx
 function DragNode(props) {
-  const { dragStart, dragNodes } = props;
+  const { dragStart, dragNodes, dragJSON } = props;
   const dragLength = (dragNodes || []).map(
     (_node) => _node.allCollapsedChildren.length ? _node.allCollapsedChildren.filter((_n) => !_n.hidden).length : 1
   ).reduce((acm, curr) => acm + curr, 0);
-  return /* @__PURE__ */ React5.createElement(UIDragNodeContainer2, null, dragStart?.id, dragLength > 1 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(UIDragCounts, null, dragLength), /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React8.createElement(UIDragNodeContainer2, null, dragStart?.id || dragJSON?.id, dragLength > 1 && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(UIDragCounts, null, dragLength), /* @__PURE__ */ React8.createElement(
     UIDragNodeContainer2,
     {
       style: {
@@ -362,17 +547,17 @@ function DragNode(props) {
 }
 
 // src/components/drag-highlight-adder/index.tsx
-import React6 from "react";
-import { min } from "lodash";
-import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/fixed-layout-editor";
+import React9 from "react";
+import { min } from "lodash-es";
+import { FlowNodeTransformData as FlowNodeTransformData4 } from "@flowgram.ai/fixed-layout-editor";
 
 // src/components/drag-highlight-adder/styles.tsx
-import styled3 from "styled-components";
-var UILineContainer = styled3.div`
+import styled4 from "styled-components";
+var UILineContainer = styled4.div`
   display: flex;
   align-items: center;
 `;
-var UILine = (width, height) => styled3.div`
+var UILine = (width, height) => styled4.div`
     width: ${width}px;
     height: ${height}px;
     background: #3370ff;
@@ -389,104 +574,33 @@ var getMinSize = (preWidth, nextWidth) => {
   return min([preWidth, nextWidth]) || 0;
 };
 function DragHighlightAdder({ node }) {
-  const transformBounds = node.getData(FlowNodeTransformData2)?.bounds;
+  const transformBounds = node.getData(FlowNodeTransformData4)?.bounds;
   const { isVertical } = node;
   if (isVertical) {
     const preWidth = (transformBounds?.width || 0) - 16;
-    const nextNodeBounds2 = node?.next?.getData(FlowNodeTransformData2)?.bounds?.width;
+    const nextNodeBounds2 = node?.next?.getData(FlowNodeTransformData4)?.bounds?.width;
     const nextWidth = (nextNodeBounds2 || 0) - 16;
     const LineDom2 = UILine(getMinSize(preWidth, nextWidth), 2);
-    return /* @__PURE__ */ React6.createElement(UILineContainer, null, /* @__PURE__ */ React6.createElement(Ellipse, null), /* @__PURE__ */ React6.createElement(LineDom2, null), /* @__PURE__ */ React6.createElement(Ellipse, null));
+    return /* @__PURE__ */ React9.createElement(UILineContainer, null, /* @__PURE__ */ React9.createElement(Ellipse, null), /* @__PURE__ */ React9.createElement(LineDom2, null), /* @__PURE__ */ React9.createElement(Ellipse, null));
   }
   const preHeight = (transformBounds?.height || 0) - 16;
-  const nextNodeBounds = node?.next?.getData(FlowNodeTransformData2)?.bounds?.height;
+  const nextNodeBounds = node?.next?.getData(FlowNodeTransformData4)?.bounds?.height;
   const nextHeight = (nextNodeBounds || 0) - 16;
   const LineDom = UILine(2, getMinSize(preHeight, nextHeight));
-  return /* @__PURE__ */ React6.createElement(UILineContainer, { style: { flexDirection: "column" } }, /* @__PURE__ */ React6.createElement(Ellipse, null), /* @__PURE__ */ React6.createElement(LineDom, null), /* @__PURE__ */ React6.createElement(Ellipse, null));
+  return /* @__PURE__ */ React9.createElement(UILineContainer, { style: { flexDirection: "column" } }, /* @__PURE__ */ React9.createElement(Ellipse, null), /* @__PURE__ */ React9.createElement(LineDom, null), /* @__PURE__ */ React9.createElement(Ellipse, null));
 }
 
-// src/components/collapse/index.tsx
-import React7 from "react";
-import {
-  Playground as Playground2,
-  FlowNodeRenderData as FlowNodeRenderData2,
-  FlowNodeTransformData as FlowNodeTransformData3
-} from "@flowgram.ai/fixed-layout-editor";
-
-// src/components/collapse/styles.tsx
-import styled4 from "styled-components";
-var Container = styled4.div`
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  border-radius: 9px;
-  display: flex;
-  color: #fff;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-  background: ${(props) => props.hoverActivated ? "#82A7FC" : "#BBBFC4"};
-  transform: ${(props) => !props.isVertical && props.isCollapse ? "rotate(-90deg)" : ""};
-`;
-
-// src/components/collapse/index.tsx
-function Collapse(props) {
-  const { collapseNode, activateNode, hoverActivated } = props;
-  const activateData = activateNode?.getData(FlowNodeRenderData2);
-  const transform = collapseNode.getData(FlowNodeTransformData3);
-  if (!transform) {
-    return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
-  }
-  const scrollToActivateNode = () => {
-    setTimeout(() => {
-      Playground2.getLatest()?.scrollToView({
-        position: activateNode?.getData(FlowNodeTransformData3)?.outputPoint,
-        scrollToCenter: true
-      });
-    }, 100);
-  };
-  const collapseBlock = () => {
-    transform.collapsed = true;
-    activateData?.toggleMouseLeave();
-    scrollToActivateNode();
-  };
-  const openBlock = () => {
-    transform.collapsed = false;
-    scrollToActivateNode();
-  };
-  if (transform.collapsed) {
-    const childCount = collapseNode.allCollapsedChildren.filter(
-      (child) => !child.hidden && child !== activateNode
-    ).length;
-    return /* @__PURE__ */ React7.createElement(Container, { onClick: openBlock, hoverActivated, "aria-hidden": "true" }, childCount);
-  }
-  const circleColor = "var(--semi-color-white)";
-  const color = hoverActivated ? "#82A7FC" : "#BBBFC4";
-  return /* @__PURE__ */ React7.createElement(
-    Container,
-    {
-      onClick: collapseBlock,
-      hoverActivated,
-      isVertical: activateNode?.isVertical,
-      isCollapse: true,
-      "aria-hidden": "true"
-    },
-    /* @__PURE__ */ React7.createElement(Arrow, { color, circleColor })
-  );
-}
-var collapse_default = Collapse;
-
 // src/components/branch-adder/index.tsx
-import React8 from "react";
-import { nanoid } from "nanoid";
+import React10 from "react";
+import { nanoid as nanoid2 } from "nanoid";
 import {
-  FlowNodeRenderData as FlowNodeRenderData3,
-  FlowNodeTransformData as FlowNodeTransformData4,
-  usePlayground,
-  useService,
-  FlowOperationService
+  FlowNodeRenderData as FlowNodeRenderData5,
+  FlowNodeTransformData as FlowNodeTransformData5,
+  FlowOperationService,
+  usePlayground as usePlayground4,
+  useService as useService2
 } from "@flowgram.ai/fixed-layout-editor";
-import { IconPlus } from "@douyinfe/semi-icons";
+import { IconPlus as IconPlus2 } from "@douyinfe/semi-icons";
 
 // src/components/branch-adder/styles.tsx
 import styled5 from "styled-components";
@@ -516,77 +630,77 @@ var Container2 = styled5.div`
 // src/components/branch-adder/index.tsx
 function BranchAdder(props) {
   const { activated, node } = props;
-  const nodeData = node.firstChild?.getData(FlowNodeRenderData3);
-  const playground = usePlayground();
-  const flowOperationService = useService(FlowOperationService);
+  const nodeData = node.firstChild?.getData(FlowNodeRenderData5);
+  const playground = usePlayground4();
+  const flowOperationService = useService2(FlowOperationService);
   const { isVertical } = node;
   function addBranch() {
-    const block = flowOperationService.addBlock(node, { id: nanoid(5) });
+    const block = flowOperationService.addBlock(node, { id: nanoid2(5) });
     setTimeout(() => {
       playground.scrollToView({
-        bounds: block.getData(FlowNodeTransformData4).bounds,
+        bounds: block.getData(FlowNodeTransformData5).bounds,
         scrollToCenter: true
       });
     }, 10);
   }
   if (playground.config.readonlyOrDisabled) return null;
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Container2,
     {
       isVertical,
-      activated,
+      activated: activated || nodeData?.hovered,
       onMouseEnter: () => nodeData?.toggleMouseEnter(),
       onMouseLeave: () => nodeData?.toggleMouseLeave()
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         onClick: () => {
           addBranch();
         },
         "aria-hidden": "true",
-        style: { flexGrow: 1, textAlign: "center" }
+        style: { flexGrow: 1, textAlign: "center", cursor: "pointer" }
       },
-      /* @__PURE__ */ React8.createElement(IconPlus, null)
+      /* @__PURE__ */ React10.createElement(IconPlus2, null)
     )
   );
 }
 
 // src/components/adder/index.tsx
-import React11, { useState as useState2 } from "react";
-import { nanoid as nanoid3 } from "nanoid";
+import React13, { useState as useState3 } from "react";
+import { nanoid as nanoid4 } from "nanoid";
 import {
-  FlowNodeTransformData as FlowNodeTransformData5,
-  usePlayground as usePlayground2,
-  useService as useService2,
+  FlowNodeTransformData as FlowNodeTransformData6,
+  usePlayground as usePlayground5,
+  useService as useService3,
   FlowOperationService as FlowOperationService2
 } from "@flowgram.ai/fixed-layout-editor";
 import { Popover } from "@douyinfe/semi-ui";
 
 // src/components/nodes/index.tsx
-import React10 from "react";
+import React12 from "react";
 
 // src/components/metadata.tsx
-import React9 from "react";
-import { nanoid as nanoid2 } from "nanoid";
+import React11 from "react";
+import { nanoid as nanoid3 } from "nanoid";
 var metadata = {
   nodes: [
     {
       type: "start",
       label: "Start",
-      icon: /* @__PURE__ */ React9.createElement(IconStyleBorder, null)
+      icon: /* @__PURE__ */ React11.createElement(IconStyleBorder, null)
     },
     {
       type: "dynamicSplit",
       label: "Split Branch",
-      icon: /* @__PURE__ */ React9.createElement(IconParkRightBranch, null),
+      icon: /* @__PURE__ */ React11.createElement(IconParkRightBranch, null),
       blocks() {
         return [
           {
-            id: nanoid2(5)
+            id: nanoid3(5)
           },
           {
-            id: nanoid2(5)
+            id: nanoid3(5)
           }
         ];
       }
@@ -594,32 +708,32 @@ var metadata = {
     {
       type: "end",
       label: "Branch End",
-      icon: /* @__PURE__ */ React9.createElement(FeAlignCenter, null),
+      icon: /* @__PURE__ */ React11.createElement(FeAlignCenter, null),
       branchEnd: true
     },
     {
       type: "loop",
       schemaType: "loop",
       label: "Loop",
-      icon: /* @__PURE__ */ React9.createElement(BiBootstrapReboot, null)
+      icon: /* @__PURE__ */ React11.createElement(BiBootstrapReboot, null)
     },
     {
       type: "tryCatch",
       schemaType: "tryCatch",
       label: "TryCatch",
-      icon: /* @__PURE__ */ React9.createElement(IconParkRightBranch, null),
+      icon: /* @__PURE__ */ React11.createElement(IconParkRightBranch, null),
       blocks() {
         return [
           {
-            id: `try_${nanoid2(5)}`
+            id: `try_${nanoid3(5)}`
             // try branch
           },
           {
-            id: `catch_${nanoid2(5)}`
+            id: `catch_${nanoid3(5)}`
             // catch branch 1
           },
           {
-            id: `catch_${nanoid2(5)}`
+            id: `catch_${nanoid3(5)}`
             // catch branch 2
           }
         ];
@@ -628,12 +742,12 @@ var metadata = {
     {
       type: "noop",
       label: "Noop Node",
-      icon: /* @__PURE__ */ React9.createElement(BiCloud, null)
+      icon: /* @__PURE__ */ React11.createElement(BiCloud, null)
     },
     {
       type: "end",
       label: "End",
-      icon: /* @__PURE__ */ React9.createElement(PhCircleBold, null)
+      icon: /* @__PURE__ */ React11.createElement(PhCircleBold, null)
     }
   ],
   find: function find(type) {
@@ -672,13 +786,13 @@ var NodesWrap = styled6.div`
 
 // src/components/nodes/index.tsx
 function Node(props) {
-  return /* @__PURE__ */ React10.createElement(NodeWrap, { onClick: props.onClick }, /* @__PURE__ */ React10.createElement("div", { style: { fontSize: 14 } }, props.icon), /* @__PURE__ */ React10.createElement(NodeLabel, null, props.label));
+  return /* @__PURE__ */ React12.createElement(NodeWrap, { onClick: props.onClick }, /* @__PURE__ */ React12.createElement("div", { style: { fontSize: 14 } }, props.icon), /* @__PURE__ */ React12.createElement(NodeLabel, null, props.label));
 }
 var addings = metadata_default.nodes.filter((node) => node.type !== "start");
 function Nodes(props) {
-  return /* @__PURE__ */ React10.createElement(NodesWrap, { style: { width: 80 * 2 + 20 } }, addings.map((n, i) => (
+  return /* @__PURE__ */ React12.createElement(NodesWrap, { style: { width: 80 * 2 + 20 } }, addings.map((n, i) => (
     // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ React10.createElement(Node, { key: i, icon: n.icon, label: n.label, onClick: () => props.onSelect?.(n) })
+    /* @__PURE__ */ React12.createElement(Node, { key: i, icon: n.icon, label: n.label, onClick: () => props.onSelect?.(n) })
   )));
 }
 
@@ -696,7 +810,7 @@ var AdderWrap = styled7.div`
   justify-content: center;
   cursor: pointer;
 `;
-var IconPlus2 = styled7(IconPlusCircle)`
+var IconPlus3 = styled7(IconPlusCircle)`
   color: #3370ff;
   background-color: #fff;
   border-radius: 15px;
@@ -705,36 +819,36 @@ var IconPlus2 = styled7(IconPlusCircle)`
 // src/components/adder/index.tsx
 function Adder(props) {
   const { from } = props;
-  const [visible, setVisible] = useState2(false);
-  const playground = usePlayground2();
-  const flowOperationService = useService2(FlowOperationService2);
+  const [visible, setVisible] = useState3(false);
+  const playground = usePlayground5();
+  const flowOperationService = useService3(FlowOperationService2);
   const add = (addProps) => {
     const block = flowOperationService.addFromNode(from, {
-      id: addProps.type + nanoid3(5),
+      id: addProps.type + nanoid4(5),
       type: addProps.type,
       blocks: addProps.blocks ? addProps.blocks() : void 0
     });
     setTimeout(() => {
       playground.scrollToView({
-        bounds: block.getData(FlowNodeTransformData5).bounds,
+        bounds: block.getData(FlowNodeTransformData6).bounds,
         scrollToCenter: true
       });
     }, 10);
   };
   if (playground.config.readonlyOrDisabled) return null;
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Popover,
     {
       visible,
       onVisibleChange: setVisible,
-      content: /* @__PURE__ */ React11.createElement(Nodes, { onSelect: add }),
+      content: /* @__PURE__ */ React13.createElement(Nodes, { onSelect: add }),
       placement: "right",
       trigger: "click",
       overlayStyle: {
         padding: 0
       }
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       AdderWrap,
       {
         hovered: props.hoverActivated,
@@ -743,7 +857,7 @@ function Adder(props) {
           setVisible(true);
         }
       },
-      props.hoverActivated ? /* @__PURE__ */ React11.createElement(IconPlus2, null) : null
+      props.hoverActivated ? /* @__PURE__ */ React13.createElement(IconPlus3, null) : null
     )
   );
 }
@@ -757,18 +871,20 @@ var defaultFixedSemiMaterials = {
   [FlowRendererKey.DRAG_NODE]: DragNode,
   [FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,
   [FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,
-  [FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse
+  [FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse,
+  [FlowRendererKey.SLOT_COLLAPSE]: SlotCollapse,
+  [FlowRendererKey.SLOT_ADDER]: SlotAdder
 };
 
 // src/components/tools.tsx
-import React12 from "react";
+import React14 from "react";
 import { usePlaygroundTools } from "@flowgram.ai/fixed-layout-editor";
 import { Checkbox, IconButton, Space, Tooltip } from "@douyinfe/semi-ui";
 import { IconUndo, IconRedo, IconShrink, IconExpand, IconGridView } from "@douyinfe/semi-icons";
 var PlaygroundTools = ({ layoutText }) => {
   const tools = usePlaygroundTools();
   const { zoom } = tools;
-  return /* @__PURE__ */ React12.createElement(Space, null, /* @__PURE__ */ React12.createElement(Checkbox, { onChange: () => tools.changeLayout(), checked: !tools.isVertical }, layoutText || "isHorizontal"), /* @__PURE__ */ React12.createElement(Tooltip, { content: "fit view" }, /* @__PURE__ */ React12.createElement(IconButton, { icon: /* @__PURE__ */ React12.createElement(IconGridView, null), onClick: () => tools.fitView() })), /* @__PURE__ */ React12.createElement(Tooltip, { content: "zoom out" }, /* @__PURE__ */ React12.createElement(IconButton, { icon: /* @__PURE__ */ React12.createElement(IconShrink, null), onClick: () => tools.zoomout() })), /* @__PURE__ */ React12.createElement(Tooltip, { content: "zoom in" }, /* @__PURE__ */ React12.createElement(IconButton, { icon: /* @__PURE__ */ React12.createElement(IconExpand, null), onClick: () => tools.zoomin() })), /* @__PURE__ */ React12.createElement(Tooltip, { content: "undo" }, /* @__PURE__ */ React12.createElement(IconButton, { icon: /* @__PURE__ */ React12.createElement(IconUndo, null), disabled: tools.canUndo, onClick: () => tools.undo() })), /* @__PURE__ */ React12.createElement(Tooltip, { content: "redo" }, /* @__PURE__ */ React12.createElement(IconButton, { icon: /* @__PURE__ */ React12.createElement(IconRedo, null), disabled: tools.canRedo, onClick: () => tools.redo() })), /* @__PURE__ */ React12.createElement("span", null, Math.floor(zoom * 100), "%"));
+  return /* @__PURE__ */ React14.createElement(Space, null, /* @__PURE__ */ React14.createElement(Checkbox, { onChange: () => tools.changeLayout(), checked: !tools.isVertical }, layoutText || "isHorizontal"), /* @__PURE__ */ React14.createElement(Tooltip, { content: "fit view" }, /* @__PURE__ */ React14.createElement(IconButton, { icon: /* @__PURE__ */ React14.createElement(IconGridView, null), onClick: () => tools.fitView() })), /* @__PURE__ */ React14.createElement(Tooltip, { content: "zoom out" }, /* @__PURE__ */ React14.createElement(IconButton, { icon: /* @__PURE__ */ React14.createElement(IconShrink, null), onClick: () => tools.zoomout() })), /* @__PURE__ */ React14.createElement(Tooltip, { content: "zoom in" }, /* @__PURE__ */ React14.createElement(IconButton, { icon: /* @__PURE__ */ React14.createElement(IconExpand, null), onClick: () => tools.zoomin() })), /* @__PURE__ */ React14.createElement(Tooltip, { content: "undo" }, /* @__PURE__ */ React14.createElement(IconButton, { icon: /* @__PURE__ */ React14.createElement(IconUndo, null), disabled: tools.canUndo, onClick: () => tools.undo() })), /* @__PURE__ */ React14.createElement(Tooltip, { content: "redo" }, /* @__PURE__ */ React14.createElement(IconButton, { icon: /* @__PURE__ */ React14.createElement(IconRedo, null), disabled: tools.canRedo, onClick: () => tools.redo() })), /* @__PURE__ */ React14.createElement("span", null, Math.floor(zoom * 100), "%"));
 };
 export {
   PlaygroundTools,