@flowgram.ai/fixed-semi-materials 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/index.js

@@ -28,15 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   PlaygroundTools: () => PlaygroundTools,
   defaultFixedSemiMaterials: () => defaultFixedSemiMaterials
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/components/index.tsx
-var import_fixed_layout_editor6 = require("@flowgram.ai/fixed-layout-editor");
+var import_fixed_layout_editor9 = require("@flowgram.ai/fixed-layout-editor");
 
 // src/assets/ellipsis.tsx
 var import_react = __toESM(require("react"));
@@ -199,6 +199,8 @@ var import_fixed_layout_editor = require("@flowgram.ai/fixed-layout-editor");
 var import_semi_icons = require("@douyinfe/semi-icons");
 function TryCatchCollapse(props) {
   const { node } = props;
+  const { baseColor, baseActivatedColor } = (0, import_fixed_layout_editor.useBaseColor)();
+  const playground = (0, import_fixed_layout_editor.usePlayground)();
   const activateData = node.getData(import_fixed_layout_editor.FlowNodeRenderData);
   const transform = node.getData(import_fixed_layout_editor.FlowNodeTransformData);
   const [hoverActivated, setHoverActivated] = (0, import_react3.useState)(false);
@@ -209,7 +211,7 @@ function TryCatchCollapse(props) {
   const height = 40;
   const scrollToActivateNode = () => {
     setTimeout(() => {
-      import_fixed_layout_editor.Playground.getLatest()?.scrollToView({
+      playground.config.scrollToView({
         position: node?.getData(import_fixed_layout_editor.FlowNodeTransformData)?.inputPoint,
         scrollToCenter: true
       });
@@ -251,7 +253,7 @@ function TryCatchCollapse(props) {
             cursor: "pointer",
             justifyContent: "center",
             alignItems: "center",
-            background: hoverActivated ? "#82A7FC" : "#BBBFC4"
+            background: hoverActivated || activateData.lineActivated ? baseActivatedColor : baseColor
           },
           "aria-hidden": "true"
         },
@@ -273,7 +275,7 @@ function TryCatchCollapse(props) {
             cursor: "pointer",
             justifyContent: "center",
             alignItems: "center",
-            background: "#82A7FC"
+            background: baseActivatedColor
           },
           "aria-hidden": "true"
         },
@@ -299,28 +301,187 @@ function TryCatchCollapse(props) {
     /* @__PURE__ */ import_react3.default.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(import_fixed_layout_editor.FlowRendererRegistry).getText(import_fixed_layout_editor.FlowTextKey.CATCH_TEXT)
     ),
     renderCollapse()
   );
 }
 var try_catch_collapse_default = TryCatchCollapse;
 
-// src/components/dragging-adder/index.tsx
+// src/components/slot-collapse.tsx
+var import_react5 = __toESM(require("react"));
+var import_fixed_layout_editor3 = require("@flowgram.ai/fixed-layout-editor");
+
+// src/components/collapse/index.tsx
 var import_react4 = __toESM(require("react"));
+var import_fixed_layout_editor2 = require("@flowgram.ai/fixed-layout-editor");
 
-// src/components/dragging-adder/styles.tsx
+// src/components/collapse/styles.tsx
 var import_styled_components = __toESM(require("styled-components"));
-var UIDragNodeContainer = import_styled_components.default.div`
+var Container = import_styled_components.default.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 = (0, import_fixed_layout_editor2.usePlayground)();
+  const activateData = activateNode?.getData(import_fixed_layout_editor2.FlowNodeRenderData);
+  const transform = collapseNode.getData(import_fixed_layout_editor2.FlowNodeTransformData);
+  if (!transform) {
+    return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null);
+  }
+  const scrollToActivateNode = () => {
+    setTimeout(() => {
+      playground.config.scrollToView({
+        position: activateNode?.getData(import_fixed_layout_editor2.FlowNodeTransformData)?.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__ */ import_react4.default.createElement(
+      Container,
+      {
+        onClick: openBlock,
+        hoverActivated,
+        "aria-hidden": "true",
+        style
+      },
+      childCount
+    );
+  }
+  const circleColor = "var(--semi-color-white)";
+  const color = hoverActivated ? "#82A7FC" : "#BBBFC4";
+  return /* @__PURE__ */ import_react4.default.createElement(
+    Container,
+    {
+      onClick: collapseBlock,
+      hoverActivated,
+      isVertical: activateNode?.isVertical,
+      isCollapse: true,
+      style,
+      "aria-hidden": "true"
+    },
+    /* @__PURE__ */ import_react4.default.createElement(Arrow, { color, circleColor })
+  );
+}
+var collapse_default = Collapse;
+
+// src/components/slot-collapse.tsx
+function SlotCollapse({ node }) {
+  const [hoverActivated, setHoverActivated] = (0, import_react5.useState)(false);
+  const icon = node.firstChild;
+  const iconActivated = icon.getData(import_fixed_layout_editor3.FlowNodeRenderData).activated;
+  const iconHeight = icon.getData(import_fixed_layout_editor3.FlowNodeTransformData).size.height;
+  const isChildVisible = node.collapsed || hoverActivated || iconActivated;
+  return /* @__PURE__ */ import_react5.default.createElement(
+    "div",
+    {
+      style: {
+        width: 30,
+        height: iconHeight || 100,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      onMouseEnter: () => setHoverActivated(true),
+      onMouseLeave: () => setHoverActivated(false)
+    },
+    isChildVisible && /* @__PURE__ */ import_react5.default.createElement(
+      collapse_default,
+      {
+        style: !node.collapsed ? {
+          transform: node.isVertical ? "rotate(-90deg)" : "rotate(90deg)"
+        } : {},
+        node,
+        activateNode: icon,
+        collapseNode: node,
+        hoverActivated
+      }
+    )
+  );
+}
+
+// src/components/slot-adder.tsx
+var import_react6 = __toESM(require("react"));
+var import_nanoid = require("nanoid");
+var import_fixed_layout_editor4 = require("@flowgram.ai/fixed-layout-editor");
+var import_semi_ui = require("@douyinfe/semi-ui");
+var import_semi_icons2 = require("@douyinfe/semi-icons");
+function SlotAdder(props) {
+  const { node } = props;
+  const nodeData = node.firstChild?.getData(import_fixed_layout_editor4.FlowNodeRenderData);
+  const document = (0, import_fixed_layout_editor4.useService)(import_fixed_layout_editor4.FlowDocument);
+  async function addPort() {
+    document.addNode({
+      id: (0, import_nanoid.nanoid)(5),
+      type: "custom",
+      parent: node
+    });
+  }
+  return /* @__PURE__ */ import_react6.default.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        background: "var(--semi-color-bg-0)"
+      },
+      onMouseEnter: () => nodeData?.toggleMouseEnter(),
+      onMouseLeave: () => nodeData?.toggleMouseLeave()
+    },
+    /* @__PURE__ */ import_react6.default.createElement(
+      import_semi_ui.Button,
+      {
+        onClick: () => {
+          addPort();
+        },
+        size: "small",
+        icon: /* @__PURE__ */ import_react6.default.createElement(import_semi_icons2.IconPlus, null)
+      }
+    )
+  );
+}
+
+// src/components/dragging-adder/index.tsx
+var import_react7 = __toESM(require("react"));
+var import_fixed_layout_editor5 = require("@flowgram.ai/fixed-layout-editor");
+
+// src/components/dragging-adder/styles.tsx
+var import_styled_components2 = __toESM(require("styled-components"));
+var UIDragNodeContainer = import_styled_components2.default.div`
   width: 16px;
   height: 16px;
   border-radius: 100px;
@@ -329,22 +490,32 @@ var UIDragNodeContainer = import_styled_components.default.div`
 `;
 
 // src/components/dragging-adder/index.tsx
-function DraggingAdder() {
-  return /* @__PURE__ */ import_react4.default.createElement(UIDragNodeContainer, null);
+function DraggingAdder(props) {
+  const playground = (0, import_fixed_layout_editor5.usePlayground)();
+  const layer = playground.getLayer(import_fixed_layout_editor5.FlowDragLayer);
+  if (!layer) return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null);
+  if (layer.options.canDrop && !layer.options.canDrop({
+    dragNodes: layer.dragEntities || [],
+    dropNode: props.from,
+    isBranch: false
+  })) {
+    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null);
+  }
+  return /* @__PURE__ */ import_react7.default.createElement(UIDragNodeContainer, null);
 }
 
 // src/components/drag-node/index.tsx
-var import_react5 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/components/drag-node/styles.tsx
-var import_styled_components2 = __toESM(require("styled-components"));
+var import_styled_components3 = __toESM(require("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 = import_styled_components2.default.div`
+var UIDragNodeContainer2 = import_styled_components3.default.div`
   position: relative;
   height: 32px;
   border-radius: 5px;
@@ -359,7 +530,7 @@ var UIDragNodeContainer2 = import_styled_components2.default.div`
     color: ${primary};
   }
 `;
-var UIDragCounts = import_styled_components2.default.div`
+var UIDragCounts = import_styled_components3.default.div`
   position: absolute;
   top: -8px;
   right: -8px;
@@ -375,11 +546,11 @@ var UIDragCounts = import_styled_components2.default.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__ */ import_react5.default.createElement(UIDragNodeContainer2, null, dragStart?.id, dragLength > 1 && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(UIDragCounts, null, dragLength), /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(UIDragNodeContainer2, null, dragStart?.id || dragJSON?.id, dragLength > 1 && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(UIDragCounts, null, dragLength), /* @__PURE__ */ import_react8.default.createElement(
     UIDragNodeContainer2,
     {
       style: {
@@ -395,17 +566,17 @@ function DragNode(props) {
 }
 
 // src/components/drag-highlight-adder/index.tsx
-var import_react6 = __toESM(require("react"));
-var import_lodash = require("lodash");
-var import_fixed_layout_editor2 = require("@flowgram.ai/fixed-layout-editor");
+var import_react9 = __toESM(require("react"));
+var import_lodash_es = require("lodash-es");
+var import_fixed_layout_editor6 = require("@flowgram.ai/fixed-layout-editor");
 
 // src/components/drag-highlight-adder/styles.tsx
-var import_styled_components3 = __toESM(require("styled-components"));
-var UILineContainer = import_styled_components3.default.div`
+var import_styled_components4 = __toESM(require("styled-components"));
+var UILineContainer = import_styled_components4.default.div`
   display: flex;
   align-items: center;
 `;
-var UILine = (width, height) => import_styled_components3.default.div`
+var UILine = (width, height) => import_styled_components4.default.div`
     width: ${width}px;
     height: ${height}px;
     background: #3370ff;
@@ -419,97 +590,30 @@ var getMinSize = (preWidth, nextWidth) => {
   if (!nextWidth || nextWidth < 0) {
     return preWidth;
   }
-  return (0, import_lodash.min)([preWidth, nextWidth]) || 0;
+  return (0, import_lodash_es.min)([preWidth, nextWidth]) || 0;
 };
 function DragHighlightAdder({ node }) {
-  const transformBounds = node.getData(import_fixed_layout_editor2.FlowNodeTransformData)?.bounds;
+  const transformBounds = node.getData(import_fixed_layout_editor6.FlowNodeTransformData)?.bounds;
   const { isVertical } = node;
   if (isVertical) {
     const preWidth = (transformBounds?.width || 0) - 16;
-    const nextNodeBounds2 = node?.next?.getData(import_fixed_layout_editor2.FlowNodeTransformData)?.bounds?.width;
+    const nextNodeBounds2 = node?.next?.getData(import_fixed_layout_editor6.FlowNodeTransformData)?.bounds?.width;
     const nextWidth = (nextNodeBounds2 || 0) - 16;
     const LineDom2 = UILine(getMinSize(preWidth, nextWidth), 2);
-    return /* @__PURE__ */ import_react6.default.createElement(UILineContainer, null, /* @__PURE__ */ import_react6.default.createElement(Ellipse, null), /* @__PURE__ */ import_react6.default.createElement(LineDom2, null), /* @__PURE__ */ import_react6.default.createElement(Ellipse, null));
+    return /* @__PURE__ */ import_react9.default.createElement(UILineContainer, null, /* @__PURE__ */ import_react9.default.createElement(Ellipse, null), /* @__PURE__ */ import_react9.default.createElement(LineDom2, null), /* @__PURE__ */ import_react9.default.createElement(Ellipse, null));
   }
   const preHeight = (transformBounds?.height || 0) - 16;
-  const nextNodeBounds = node?.next?.getData(import_fixed_layout_editor2.FlowNodeTransformData)?.bounds?.height;
+  const nextNodeBounds = node?.next?.getData(import_fixed_layout_editor6.FlowNodeTransformData)?.bounds?.height;
   const nextHeight = (nextNodeBounds || 0) - 16;
   const LineDom = UILine(2, getMinSize(preHeight, nextHeight));
-  return /* @__PURE__ */ import_react6.default.createElement(UILineContainer, { style: { flexDirection: "column" } }, /* @__PURE__ */ import_react6.default.createElement(Ellipse, null), /* @__PURE__ */ import_react6.default.createElement(LineDom, null), /* @__PURE__ */ import_react6.default.createElement(Ellipse, null));
-}
-
-// src/components/collapse/index.tsx
-var import_react7 = __toESM(require("react"));
-var import_fixed_layout_editor3 = require("@flowgram.ai/fixed-layout-editor");
-
-// src/components/collapse/styles.tsx
-var import_styled_components4 = __toESM(require("styled-components"));
-var Container = import_styled_components4.default.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(import_fixed_layout_editor3.FlowNodeRenderData);
-  const transform = collapseNode.getData(import_fixed_layout_editor3.FlowNodeTransformData);
-  if (!transform) {
-    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null);
-  }
-  const scrollToActivateNode = () => {
-    setTimeout(() => {
-      import_fixed_layout_editor3.Playground.getLatest()?.scrollToView({
-        position: activateNode?.getData(import_fixed_layout_editor3.FlowNodeTransformData)?.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__ */ import_react7.default.createElement(Container, { onClick: openBlock, hoverActivated, "aria-hidden": "true" }, childCount);
-  }
-  const circleColor = "var(--semi-color-white)";
-  const color = hoverActivated ? "#82A7FC" : "#BBBFC4";
-  return /* @__PURE__ */ import_react7.default.createElement(
-    Container,
-    {
-      onClick: collapseBlock,
-      hoverActivated,
-      isVertical: activateNode?.isVertical,
-      isCollapse: true,
-      "aria-hidden": "true"
-    },
-    /* @__PURE__ */ import_react7.default.createElement(Arrow, { color, circleColor })
-  );
+  return /* @__PURE__ */ import_react9.default.createElement(UILineContainer, { style: { flexDirection: "column" } }, /* @__PURE__ */ import_react9.default.createElement(Ellipse, null), /* @__PURE__ */ import_react9.default.createElement(LineDom, null), /* @__PURE__ */ import_react9.default.createElement(Ellipse, null));
 }
-var collapse_default = Collapse;
 
 // src/components/branch-adder/index.tsx
-var import_react8 = __toESM(require("react"));
-var import_nanoid = require("nanoid");
-var import_fixed_layout_editor4 = require("@flowgram.ai/fixed-layout-editor");
-var import_semi_icons2 = require("@douyinfe/semi-icons");
+var import_react10 = __toESM(require("react"));
+var import_nanoid2 = require("nanoid");
+var import_fixed_layout_editor7 = require("@flowgram.ai/fixed-layout-editor");
+var import_semi_icons3 = require("@douyinfe/semi-icons");
 
 // src/components/branch-adder/styles.tsx
 var import_styled_components5 = __toESM(require("styled-components"));
@@ -539,72 +643,72 @@ var Container2 = import_styled_components5.default.div`
 // src/components/branch-adder/index.tsx
 function BranchAdder(props) {
   const { activated, node } = props;
-  const nodeData = node.firstChild?.getData(import_fixed_layout_editor4.FlowNodeRenderData);
-  const playground = (0, import_fixed_layout_editor4.usePlayground)();
-  const flowOperationService = (0, import_fixed_layout_editor4.useService)(import_fixed_layout_editor4.FlowOperationService);
+  const nodeData = node.firstChild?.getData(import_fixed_layout_editor7.FlowNodeRenderData);
+  const playground = (0, import_fixed_layout_editor7.usePlayground)();
+  const flowOperationService = (0, import_fixed_layout_editor7.useService)(import_fixed_layout_editor7.FlowOperationService);
   const { isVertical } = node;
   function addBranch() {
-    const block = flowOperationService.addBlock(node, { id: (0, import_nanoid.nanoid)(5) });
+    const block = flowOperationService.addBlock(node, { id: (0, import_nanoid2.nanoid)(5) });
     setTimeout(() => {
       playground.scrollToView({
-        bounds: block.getData(import_fixed_layout_editor4.FlowNodeTransformData).bounds,
+        bounds: block.getData(import_fixed_layout_editor7.FlowNodeTransformData).bounds,
         scrollToCenter: true
       });
     }, 10);
   }
   if (playground.config.readonlyOrDisabled) return null;
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     Container2,
     {
       isVertical,
-      activated,
+      activated: activated || nodeData?.hovered,
       onMouseEnter: () => nodeData?.toggleMouseEnter(),
       onMouseLeave: () => nodeData?.toggleMouseLeave()
     },
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       "div",
       {
         onClick: () => {
           addBranch();
         },
         "aria-hidden": "true",
-        style: { flexGrow: 1, textAlign: "center" }
+        style: { flexGrow: 1, textAlign: "center", cursor: "pointer" }
       },
-      /* @__PURE__ */ import_react8.default.createElement(import_semi_icons2.IconPlus, null)
+      /* @__PURE__ */ import_react10.default.createElement(import_semi_icons3.IconPlus, null)
     )
   );
 }
 
 // src/components/adder/index.tsx
-var import_react11 = __toESM(require("react"));
-var import_nanoid3 = require("nanoid");
-var import_fixed_layout_editor5 = require("@flowgram.ai/fixed-layout-editor");
-var import_semi_ui = require("@douyinfe/semi-ui");
+var import_react13 = __toESM(require("react"));
+var import_nanoid4 = require("nanoid");
+var import_fixed_layout_editor8 = require("@flowgram.ai/fixed-layout-editor");
+var import_semi_ui2 = require("@douyinfe/semi-ui");
 
 // src/components/nodes/index.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 
 // src/components/metadata.tsx
-var import_react9 = __toESM(require("react"));
-var import_nanoid2 = require("nanoid");
+var import_react11 = __toESM(require("react"));
+var import_nanoid3 = require("nanoid");
 var metadata = {
   nodes: [
     {
       type: "start",
       label: "Start",
-      icon: /* @__PURE__ */ import_react9.default.createElement(IconStyleBorder, null)
+      icon: /* @__PURE__ */ import_react11.default.createElement(IconStyleBorder, null)
     },
     {
       type: "dynamicSplit",
       label: "Split Branch",
-      icon: /* @__PURE__ */ import_react9.default.createElement(IconParkRightBranch, null),
+      icon: /* @__PURE__ */ import_react11.default.createElement(IconParkRightBranch, null),
       blocks() {
         return [
           {
-            id: (0, import_nanoid2.nanoid)(5)
+            id: (0, import_nanoid3.nanoid)(5)
           },
           {
-            id: (0, import_nanoid2.nanoid)(5)
+            id: (0, import_nanoid3.nanoid)(5)
           }
         ];
       }
@@ -612,32 +716,32 @@ var metadata = {
     {
       type: "end",
       label: "Branch End",
-      icon: /* @__PURE__ */ import_react9.default.createElement(FeAlignCenter, null),
+      icon: /* @__PURE__ */ import_react11.default.createElement(FeAlignCenter, null),
       branchEnd: true
     },
     {
       type: "loop",
       schemaType: "loop",
       label: "Loop",
-      icon: /* @__PURE__ */ import_react9.default.createElement(BiBootstrapReboot, null)
+      icon: /* @__PURE__ */ import_react11.default.createElement(BiBootstrapReboot, null)
     },
     {
       type: "tryCatch",
       schemaType: "tryCatch",
       label: "TryCatch",
-      icon: /* @__PURE__ */ import_react9.default.createElement(IconParkRightBranch, null),
+      icon: /* @__PURE__ */ import_react11.default.createElement(IconParkRightBranch, null),
       blocks() {
         return [
           {
-            id: `try_${(0, import_nanoid2.nanoid)(5)}`
+            id: `try_${(0, import_nanoid3.nanoid)(5)}`
             // try branch
           },
           {
-            id: `catch_${(0, import_nanoid2.nanoid)(5)}`
+            id: `catch_${(0, import_nanoid3.nanoid)(5)}`
             // catch branch 1
           },
           {
-            id: `catch_${(0, import_nanoid2.nanoid)(5)}`
+            id: `catch_${(0, import_nanoid3.nanoid)(5)}`
             // catch branch 2
           }
         ];
@@ -646,12 +750,12 @@ var metadata = {
     {
       type: "noop",
       label: "Noop Node",
-      icon: /* @__PURE__ */ import_react9.default.createElement(BiCloud, null)
+      icon: /* @__PURE__ */ import_react11.default.createElement(BiCloud, null)
     },
     {
       type: "end",
       label: "End",
-      icon: /* @__PURE__ */ import_react9.default.createElement(PhCircleBold, null)
+      icon: /* @__PURE__ */ import_react11.default.createElement(PhCircleBold, null)
     }
   ],
   find: function find(type) {
@@ -690,19 +794,19 @@ var NodesWrap = import_styled_components6.default.div`
 
 // src/components/nodes/index.tsx
 function Node(props) {
-  return /* @__PURE__ */ import_react10.default.createElement(NodeWrap, { onClick: props.onClick }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { fontSize: 14 } }, props.icon), /* @__PURE__ */ import_react10.default.createElement(NodeLabel, null, props.label));
+  return /* @__PURE__ */ import_react12.default.createElement(NodeWrap, { onClick: props.onClick }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { fontSize: 14 } }, props.icon), /* @__PURE__ */ import_react12.default.createElement(NodeLabel, null, props.label));
 }
 var addings = metadata_default.nodes.filter((node) => node.type !== "start");
 function Nodes(props) {
-  return /* @__PURE__ */ import_react10.default.createElement(NodesWrap, { style: { width: 80 * 2 + 20 } }, addings.map((n, i) => (
+  return /* @__PURE__ */ import_react12.default.createElement(NodesWrap, { style: { width: 80 * 2 + 20 } }, addings.map((n, i) => (
     // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ import_react10.default.createElement(Node, { key: i, icon: n.icon, label: n.label, onClick: () => props.onSelect?.(n) })
+    /* @__PURE__ */ import_react12.default.createElement(Node, { key: i, icon: n.icon, label: n.label, onClick: () => props.onSelect?.(n) })
   )));
 }
 
 // src/components/adder/styles.tsx
 var import_styled_components7 = __toESM(require("styled-components"));
-var import_semi_icons3 = require("@douyinfe/semi-icons");
+var import_semi_icons4 = require("@douyinfe/semi-icons");
 var AdderWrap = import_styled_components7.default.div`
   width: ${(props) => props.hovered ? 15 : 6}px;
   height: ${(props) => props.hovered ? 15 : 6}px;
@@ -714,7 +818,7 @@ var AdderWrap = import_styled_components7.default.div`
   justify-content: center;
   cursor: pointer;
 `;
-var IconPlus2 = (0, import_styled_components7.default)(import_semi_icons3.IconPlusCircle)`
+var IconPlus3 = (0, import_styled_components7.default)(import_semi_icons4.IconPlusCircle)`
   color: #3370ff;
   background-color: #fff;
   border-radius: 15px;
@@ -723,36 +827,36 @@ var IconPlus2 = (0, import_styled_components7.default)(import_semi_icons3.IconPl
 // src/components/adder/index.tsx
 function Adder(props) {
   const { from } = props;
-  const [visible, setVisible] = (0, import_react11.useState)(false);
-  const playground = (0, import_fixed_layout_editor5.usePlayground)();
-  const flowOperationService = (0, import_fixed_layout_editor5.useService)(import_fixed_layout_editor5.FlowOperationService);
+  const [visible, setVisible] = (0, import_react13.useState)(false);
+  const playground = (0, import_fixed_layout_editor8.usePlayground)();
+  const flowOperationService = (0, import_fixed_layout_editor8.useService)(import_fixed_layout_editor8.FlowOperationService);
   const add = (addProps) => {
     const block = flowOperationService.addFromNode(from, {
-      id: addProps.type + (0, import_nanoid3.nanoid)(5),
+      id: addProps.type + (0, import_nanoid4.nanoid)(5),
       type: addProps.type,
       blocks: addProps.blocks ? addProps.blocks() : void 0
     });
     setTimeout(() => {
       playground.scrollToView({
-        bounds: block.getData(import_fixed_layout_editor5.FlowNodeTransformData).bounds,
+        bounds: block.getData(import_fixed_layout_editor8.FlowNodeTransformData).bounds,
         scrollToCenter: true
       });
     }, 10);
   };
   if (playground.config.readonlyOrDisabled) return null;
-  return /* @__PURE__ */ import_react11.default.createElement(
-    import_semi_ui.Popover,
+  return /* @__PURE__ */ import_react13.default.createElement(
+    import_semi_ui2.Popover,
     {
       visible,
       onVisibleChange: setVisible,
-      content: /* @__PURE__ */ import_react11.default.createElement(Nodes, { onSelect: add }),
+      content: /* @__PURE__ */ import_react13.default.createElement(Nodes, { onSelect: add }),
       placement: "right",
       trigger: "click",
       overlayStyle: {
         padding: 0
       }
     },
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react13.default.createElement(
       AdderWrap,
       {
         hovered: props.hoverActivated,
@@ -761,32 +865,34 @@ function Adder(props) {
           setVisible(true);
         }
       },
-      props.hoverActivated ? /* @__PURE__ */ import_react11.default.createElement(IconPlus2, null) : null
+      props.hoverActivated ? /* @__PURE__ */ import_react13.default.createElement(IconPlus3, null) : null
     )
   );
 }
 
 // src/components/index.tsx
 var defaultFixedSemiMaterials = {
-  [import_fixed_layout_editor6.FlowRendererKey.ADDER]: Adder,
-  [import_fixed_layout_editor6.FlowRendererKey.COLLAPSE]: collapse_default,
-  [import_fixed_layout_editor6.FlowRendererKey.TRY_CATCH_COLLAPSE]: try_catch_collapse_default,
-  [import_fixed_layout_editor6.FlowRendererKey.BRANCH_ADDER]: BranchAdder,
-  [import_fixed_layout_editor6.FlowRendererKey.DRAG_NODE]: DragNode,
-  [import_fixed_layout_editor6.FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,
-  [import_fixed_layout_editor6.FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,
-  [import_fixed_layout_editor6.FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse
+  [import_fixed_layout_editor9.FlowRendererKey.ADDER]: Adder,
+  [import_fixed_layout_editor9.FlowRendererKey.COLLAPSE]: collapse_default,
+  [import_fixed_layout_editor9.FlowRendererKey.TRY_CATCH_COLLAPSE]: try_catch_collapse_default,
+  [import_fixed_layout_editor9.FlowRendererKey.BRANCH_ADDER]: BranchAdder,
+  [import_fixed_layout_editor9.FlowRendererKey.DRAG_NODE]: DragNode,
+  [import_fixed_layout_editor9.FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,
+  [import_fixed_layout_editor9.FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,
+  [import_fixed_layout_editor9.FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse,
+  [import_fixed_layout_editor9.FlowRendererKey.SLOT_COLLAPSE]: SlotCollapse,
+  [import_fixed_layout_editor9.FlowRendererKey.SLOT_ADDER]: SlotAdder
 };
 
 // src/components/tools.tsx
-var import_react12 = __toESM(require("react"));
-var import_fixed_layout_editor7 = require("@flowgram.ai/fixed-layout-editor");
-var import_semi_ui2 = require("@douyinfe/semi-ui");
-var import_semi_icons4 = require("@douyinfe/semi-icons");
+var import_react14 = __toESM(require("react"));
+var import_fixed_layout_editor10 = require("@flowgram.ai/fixed-layout-editor");
+var import_semi_ui3 = require("@douyinfe/semi-ui");
+var import_semi_icons5 = require("@douyinfe/semi-icons");
 var PlaygroundTools = ({ layoutText }) => {
-  const tools = (0, import_fixed_layout_editor7.usePlaygroundTools)();
+  const tools = (0, import_fixed_layout_editor10.usePlaygroundTools)();
   const { zoom } = tools;
-  return /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.Space, null, /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.Checkbox, { onChange: () => tools.changeLayout(), checked: !tools.isVertical }, layoutText || "isHorizontal"), /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.Tooltip, { content: "fit view" }, /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.IconButton, { icon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons4.IconGridView, null), onClick: () => tools.fitView() })), /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.Tooltip, { content: "zoom out" }, /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.IconButton, { icon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons4.IconShrink, null), onClick: () => tools.zoomout() })), /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.Tooltip, { content: "zoom in" }, /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.IconButton, { icon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons4.IconExpand, null), onClick: () => tools.zoomin() })), /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.Tooltip, { content: "undo" }, /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.IconButton, { icon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons4.IconUndo, null), disabled: tools.canUndo, onClick: () => tools.undo() })), /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.Tooltip, { content: "redo" }, /* @__PURE__ */ import_react12.default.createElement(import_semi_ui2.IconButton, { icon: /* @__PURE__ */ import_react12.default.createElement(import_semi_icons4.IconRedo, null), disabled: tools.canRedo, onClick: () => tools.redo() })), /* @__PURE__ */ import_react12.default.createElement("span", null, Math.floor(zoom * 100), "%"));
+  return /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.Space, null, /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.Checkbox, { onChange: () => tools.changeLayout(), checked: !tools.isVertical }, layoutText || "isHorizontal"), /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.Tooltip, { content: "fit view" }, /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.IconButton, { icon: /* @__PURE__ */ import_react14.default.createElement(import_semi_icons5.IconGridView, null), onClick: () => tools.fitView() })), /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.Tooltip, { content: "zoom out" }, /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.IconButton, { icon: /* @__PURE__ */ import_react14.default.createElement(import_semi_icons5.IconShrink, null), onClick: () => tools.zoomout() })), /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.Tooltip, { content: "zoom in" }, /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.IconButton, { icon: /* @__PURE__ */ import_react14.default.createElement(import_semi_icons5.IconExpand, null), onClick: () => tools.zoomin() })), /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.Tooltip, { content: "undo" }, /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.IconButton, { icon: /* @__PURE__ */ import_react14.default.createElement(import_semi_icons5.IconUndo, null), disabled: tools.canUndo, onClick: () => tools.undo() })), /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.Tooltip, { content: "redo" }, /* @__PURE__ */ import_react14.default.createElement(import_semi_ui3.IconButton, { icon: /* @__PURE__ */ import_react14.default.createElement(import_semi_icons5.IconRedo, null), disabled: tools.canRedo, onClick: () => tools.redo() })), /* @__PURE__ */ import_react14.default.createElement("span", null, Math.floor(zoom * 100), "%"));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {