@flowgram.ai/fixed-semi-materials 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,777 @@
+// src/components/index.tsx
+import { FlowRendererKey } from "@flowgram.ai/fixed-layout-editor";
+
+// src/assets/ellipsis.tsx
+import React from "react";
+function Ellipse() {
+  return /* @__PURE__ */ React.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React.createElement("circle", { id: "Ellipse 465", cx: "4", cy: "4", r: "3", fill: "white", stroke: "#3370FF", strokeWidth: "2" }));
+}
+
+// src/assets/icons.tsx
+import React2 from "react";
+function IconStyleBorder(props) {
+  return /* @__PURE__ */ React2.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React2.createElement(
+    "g",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeMiterlimit: "1.5",
+      strokeWidth: "1.499"
+    },
+    /* @__PURE__ */ React2.createElement(
+      "path",
+      {
+        strokeDasharray: "2 2",
+        d: "M16 2H8a6 6 0 0 0-6 6v8a6 6 0 0 0 6 6h8a6 6 0 0 0 6-6V8a6 6 0 0 0-6-6Z"
+      }
+    ),
+    /* @__PURE__ */ React2.createElement("path", { d: "M16 5H8a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3Z" })
+  ));
+}
+function IconParkRightBranch(props) {
+  return /* @__PURE__ */ React2.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 48 48", ...props }, /* @__PURE__ */ React2.createElement("g", { fill: "none" }, /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M22 8.01176C20.5 8.01193 16.0714 7.93811 15 13.0005C13.917 18.1177 9.85714 22.8477 8 24"
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M22 40C20.5 40.0003 16.0714 40.0628 15 35.0005C13.917 29.8833 9.85714 25.1522 8 23.9999"
+    }
+  ), /* @__PURE__ */ React2.createElement("circle", { cx: "8", cy: "24", r: "4", fill: "currentColor" }), /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M8 24L22 24"
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M30 24.001H42"
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M30 8.00098H42"
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M30 40.001H42"
+    }
+  )));
+}
+function PhCircleBold(props) {
+  return /* @__PURE__ */ React2.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 256 256", ...props }, /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M128 236a108 108 0 1 1 108-108a108.1 108.1 0 0 1-108 108Zm0-192a84 84 0 1 0 84 84a84.1 84.1 0 0 0-84-84Z"
+    }
+  ));
+}
+function BiCloud(props) {
+  return /* @__PURE__ */ React2.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", ...props }, /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773C16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593c.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318C1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"
+    }
+  ));
+}
+function BiBootstrapReboot(props) {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 16 16",
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement("g", { fill: "currentColor" }, /* @__PURE__ */ React2.createElement("path", { d: "M1.161 8a6.84 6.84 0 1 0 6.842-6.84a.58.58 0 1 1 0-1.16a8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z" }), /* @__PURE__ */ React2.createElement("path", { d: "M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1c0-1.37-.943-2.246-2.456-2.246H5.5v7.352h1.141zm0-3.75V5.277h1.57c.881 0 1.416.499 1.416 1.32c0 .84-.504 1.324-1.386 1.324h-1.6z" }))
+  );
+}
+function FeAlignCenter(props) {
+  return /* @__PURE__ */ React2.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    /* @__PURE__ */ React2.createElement(
+      "path",
+      {
+        fill: "#888888",
+        fillRule: "evenodd",
+        d: "M11 13v-2H6.286C5.023 11 4 10.105 4 9s1.023-2 2.286-2H11V3a1 1 0 0 1 2 0v4h4.714C18.977 7 20 7.895 20 9s-1.023 2-2.286 2H13v2h3a2 2 0 1 1 0 4h-3v4a1 1 0 0 1-2 0v-4H8a2 2 0 1 1 0-4h3Z"
+      }
+    )
+  );
+}
+function Arrow({ color, circleColor }) {
+  return /* @__PURE__ */ React2.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("circle", { cx: "8", cy: "8", r: "7", fill: circleColor }), /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      fill: color,
+      d: "M10.8281 9.4715C11.0883 9.21131 11.0885 8.78909 10.8291 8.52804C10.6413 8.33892 10.4536 8.14952 10.266 7.9601C9.66706 7.35551 9.06799 6.75079 8.46068 6.15496C8.20439 5.90352 7.7947 5.90352 7.53841 6.15496C6.93103 6.75085 6.33191 7.35564 5.73291 7.96029C5.5454 8.14957 5.3579 8.33884 5.17017 8.52782C4.91075 8.78895 4.91096 9.21099 5.17124 9.47127C5.43152 9.73155 5.85355 9.73176 6.11383 9.47148L7.99955 7.58576L9.88548 9.4717C10.1457 9.73189 10.5679 9.73169 10.8281 9.4715Z"
+    }
+  ), /* @__PURE__ */ React2.createElement(
+    "path",
+    {
+      fill: color,
+      d: "M0.888672 7.99997C0.888672 4.07261 4.07242 0.888855 7.99978 0.888855C11.9271 0.888855 15.1109 4.07261 15.1109 7.99997C15.1109 11.9273 11.9271 15.1111 7.99978 15.1111C4.07242 15.1111 0.888672 11.9273 0.888672 7.99997ZM13.818 7.99997C13.818 4.78667 11.2131 2.18178 7.99978 2.18178C4.78649 2.18178 2.1816 4.78667 2.1816 7.99997C2.1816 11.2133 4.78649 13.8181 7.99978 13.8181C11.2131 13.8181 13.818 11.2133 13.818 7.99997Z"
+    }
+  ));
+}
+
+// src/components/try-catch-collapse.tsx
+import React3, { useState } from "react";
+import {
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+  Playground
+} from "@flowgram.ai/fixed-layout-editor";
+import { IconChevronLeft } from "@douyinfe/semi-icons";
+function TryCatchCollapse(props) {
+  const { node } = props;
+  const activateData = node.getData(FlowNodeRenderData);
+  const transform = node.getData(FlowNodeTransformData);
+  const [hoverActivated, setHoverActivated] = useState(false);
+  if (!transform || !transform.parent) {
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null);
+  }
+  const width = transform.inputPoint.x - transform.parent.inputPoint.x;
+  const height = 40;
+  const scrollToActivateNode = () => {
+    setTimeout(() => {
+      Playground.getLatest()?.scrollToView({
+        position: node?.getData(FlowNodeTransformData)?.inputPoint,
+        scrollToCenter: true
+      });
+    }, 100);
+  };
+  const collapseBlock = () => {
+    transform.collapsed = true;
+    activateData.activated = false;
+    scrollToActivateNode();
+  };
+  const openBlock = () => {
+    transform.collapsed = false;
+    scrollToActivateNode();
+  };
+  const handleMouseEnter = () => {
+    setHoverActivated(true);
+    activateData.activated = true;
+  };
+  const handleMouseLeave = () => {
+    setHoverActivated(false);
+    activateData.activated = false;
+  };
+  const renderCollapse = () => {
+    if (transform.collapsed) {
+      const childCount = node.allCollapsedChildren.filter(
+        (child) => !child.hidden && child !== node
+      ).length;
+      return /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          onClick: openBlock,
+          style: {
+            width: 16,
+            height: 16,
+            fontSize: 10,
+            borderRadius: 9,
+            display: "flex",
+            color: "#fff",
+            cursor: "pointer",
+            justifyContent: "center",
+            alignItems: "center",
+            background: hoverActivated ? "#82A7FC" : "#BBBFC4"
+          },
+          "aria-hidden": "true"
+        },
+        childCount
+      );
+    }
+    if (hoverActivated) {
+      return /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          onClick: collapseBlock,
+          style: {
+            width: 16,
+            height: 16,
+            fontSize: 10,
+            borderRadius: 9,
+            display: "flex",
+            color: "#fff",
+            cursor: "pointer",
+            justifyContent: "center",
+            alignItems: "center",
+            background: "#82A7FC"
+          },
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React3.createElement(IconChevronLeft, null)
+      );
+    }
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null);
+  };
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        width,
+        height,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6
+      }
+    },
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        style: {
+          fontSize: 12,
+          color: "#8F959E",
+          textAlign: "center",
+          whiteSpace: "nowrap",
+          backgroundColor: "var(--g-editor-background)",
+          lineHeight: "20px"
+        }
+      },
+      "Something error"
+    ),
+    renderCollapse()
+  );
+}
+var try_catch_collapse_default = TryCatchCollapse;
+
+// src/components/dragging-adder/index.tsx
+import React4 from "react";
+
+// src/components/dragging-adder/styles.tsx
+import styled from "styled-components";
+var UIDragNodeContainer = styled.div`
+  width: 16px;
+  height: 16px;
+  border-radius: 100px;
+  background-color: white;
+  border: 1px dashed #b8bcc1;
+`;
+
+// src/components/dragging-adder/index.tsx
+function DraggingAdder() {
+  return /* @__PURE__ */ React4.createElement(UIDragNodeContainer, null);
+}
+
+// src/components/drag-node/index.tsx
+import React5 from "react";
+
+// src/components/drag-node/styles.tsx
+import styled2 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`
+  position: relative;
+  height: 32px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 19px;
+  border: 1px solid ${primary};
+  padding: 0 15px;
+  &:hover: {
+    background-color: ${primaryOpacity09};
+    color: ${primary};
+  }
+`;
+var UIDragCounts = styled2.div`
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  text-align: center;
+  line-height: 16px;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  font-size: 12px;
+  color: #fff;
+  background-color: ${primary};
+`;
+
+// src/components/drag-node/index.tsx
+function DragNode(props) {
+  const { dragStart, dragNodes } = 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(
+    UIDragNodeContainer2,
+    {
+      style: {
+        position: "absolute",
+        top: 5,
+        right: -5,
+        left: 5,
+        bottom: -5,
+        opacity: 0.5
+      }
+    }
+  )));
+}
+
+// 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";
+
+// src/components/drag-highlight-adder/styles.tsx
+import styled3 from "styled-components";
+var UILineContainer = styled3.div`
+  display: flex;
+  align-items: center;
+`;
+var UILine = (width, height) => styled3.div`
+    width: ${width}px;
+    height: ${height}px;
+    background: #3370ff;
+  `;
+
+// src/components/drag-highlight-adder/index.tsx
+var getMinSize = (preWidth, nextWidth) => {
+  if (!preWidth || preWidth < 0) {
+    return 0;
+  }
+  if (!nextWidth || nextWidth < 0) {
+    return preWidth;
+  }
+  return min([preWidth, nextWidth]) || 0;
+};
+function DragHighlightAdder({ node }) {
+  const transformBounds = node.getData(FlowNodeTransformData2)?.bounds;
+  const { isVertical } = node;
+  if (isVertical) {
+    const preWidth = (transformBounds?.width || 0) - 16;
+    const nextNodeBounds2 = node?.next?.getData(FlowNodeTransformData2)?.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));
+  }
+  const preHeight = (transformBounds?.height || 0) - 16;
+  const nextNodeBounds = node?.next?.getData(FlowNodeTransformData2)?.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));
+}
+
+// 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 {
+  FlowNodeRenderData as FlowNodeRenderData3,
+  FlowNodeTransformData as FlowNodeTransformData4,
+  usePlayground,
+  useService,
+  FlowOperationService
+} from "@flowgram.ai/fixed-layout-editor";
+import { IconPlus } from "@douyinfe/semi-icons";
+
+// src/components/branch-adder/styles.tsx
+import styled5 from "styled-components";
+var Container2 = styled5.div`
+  width: 28px;
+  height: 18px;
+  background: ${(props) => props.activated ? "#82A7FC" : "rgb(187, 191, 196)"};
+  display: flex;
+  border-radius: 9px;
+  justify-content: space-evenly;
+  align-items: center;
+  color: #fff;
+  font-size: 10px;
+  font-weight: bold;
+  transform: ${(props) => props.isVertical ? "" : "rotate(90deg)"};
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+`;
+
+// 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 { isVertical } = node;
+  function addBranch() {
+    const block = flowOperationService.addBlock(node, { id: nanoid(5) });
+    setTimeout(() => {
+      playground.scrollToView({
+        bounds: block.getData(FlowNodeTransformData4).bounds,
+        scrollToCenter: true
+      });
+    }, 10);
+  }
+  if (playground.config.readonlyOrDisabled) return null;
+  return /* @__PURE__ */ React8.createElement(
+    Container2,
+    {
+      isVertical,
+      activated,
+      onMouseEnter: () => nodeData?.toggleMouseEnter(),
+      onMouseLeave: () => nodeData?.toggleMouseLeave()
+    },
+    /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        onClick: () => {
+          addBranch();
+        },
+        "aria-hidden": "true",
+        style: { flexGrow: 1, textAlign: "center" }
+      },
+      /* @__PURE__ */ React8.createElement(IconPlus, null)
+    )
+  );
+}
+
+// src/components/adder/index.tsx
+import React11, { useState as useState2 } from "react";
+import { nanoid as nanoid3 } from "nanoid";
+import {
+  FlowNodeTransformData as FlowNodeTransformData5,
+  usePlayground as usePlayground2,
+  useService as useService2,
+  FlowOperationService as FlowOperationService2
+} from "@flowgram.ai/fixed-layout-editor";
+import { Popover } from "@douyinfe/semi-ui";
+
+// src/components/nodes/index.tsx
+import React10 from "react";
+
+// src/components/metadata.tsx
+import React9 from "react";
+import { nanoid as nanoid2 } from "nanoid";
+var metadata = {
+  nodes: [
+    {
+      type: "start",
+      label: "Start",
+      icon: /* @__PURE__ */ React9.createElement(IconStyleBorder, null)
+    },
+    {
+      type: "dynamicSplit",
+      label: "Split Branch",
+      icon: /* @__PURE__ */ React9.createElement(IconParkRightBranch, null),
+      blocks() {
+        return [
+          {
+            id: nanoid2(5)
+          },
+          {
+            id: nanoid2(5)
+          }
+        ];
+      }
+    },
+    {
+      type: "end",
+      label: "Branch End",
+      icon: /* @__PURE__ */ React9.createElement(FeAlignCenter, null),
+      branchEnd: true
+    },
+    {
+      type: "loop",
+      schemaType: "loop",
+      label: "Loop",
+      icon: /* @__PURE__ */ React9.createElement(BiBootstrapReboot, null)
+    },
+    {
+      type: "tryCatch",
+      schemaType: "tryCatch",
+      label: "TryCatch",
+      icon: /* @__PURE__ */ React9.createElement(IconParkRightBranch, null),
+      blocks() {
+        return [
+          {
+            id: `try_${nanoid2(5)}`
+            // try branch
+          },
+          {
+            id: `catch_${nanoid2(5)}`
+            // catch branch 1
+          },
+          {
+            id: `catch_${nanoid2(5)}`
+            // catch branch 2
+          }
+        ];
+      }
+    },
+    {
+      type: "noop",
+      label: "Noop Node",
+      icon: /* @__PURE__ */ React9.createElement(BiCloud, null)
+    },
+    {
+      type: "end",
+      label: "End",
+      icon: /* @__PURE__ */ React9.createElement(PhCircleBold, null)
+    }
+  ],
+  find: function find(type) {
+    return metadata.nodes.find((m) => m.type === type);
+  }
+};
+var metadata_default = metadata;
+
+// src/components/nodes/styles.tsx
+import styled6 from "styled-components";
+var NodeWrap = styled6.div`
+  width: 100%;
+  height: 32px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 19px;
+  padding: 0 15px;
+  &:hover: {
+    background-color: ${primaryOpacity09};
+    color: ${primary};
+  },
+`;
+var NodeLabel = styled6.div`
+  font-size: 12px;
+  margin-left: 10px;
+`;
+var NodesWrap = styled6.div`
+  max-height: 500px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+// 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));
+}
+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) => (
+    // 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) })
+  )));
+}
+
+// src/components/adder/styles.tsx
+import styled7 from "styled-components";
+import { IconPlusCircle } from "@douyinfe/semi-icons";
+var AdderWrap = styled7.div`
+  width: ${(props) => props.hovered ? 15 : 6}px;
+  height: ${(props) => props.hovered ? 15 : 6}px;
+  background-color: rgb(143, 149, 158);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+var IconPlus2 = styled7(IconPlusCircle)`
+  color: #3370ff;
+  background-color: #fff;
+  border-radius: 15px;
+`;
+
+// src/components/adder/index.tsx
+function Adder(props) {
+  const { from } = props;
+  const [visible, setVisible] = useState2(false);
+  const playground = usePlayground2();
+  const flowOperationService = useService2(FlowOperationService2);
+  const add = (addProps) => {
+    const block = flowOperationService.addFromNode(from, {
+      id: addProps.type + nanoid3(5),
+      type: addProps.type,
+      blocks: addProps.blocks ? addProps.blocks() : void 0
+    });
+    setTimeout(() => {
+      playground.scrollToView({
+        bounds: block.getData(FlowNodeTransformData5).bounds,
+        scrollToCenter: true
+      });
+    }, 10);
+  };
+  if (playground.config.readonlyOrDisabled) return null;
+  return /* @__PURE__ */ React11.createElement(
+    Popover,
+    {
+      visible,
+      onVisibleChange: setVisible,
+      content: /* @__PURE__ */ React11.createElement(Nodes, { onSelect: add }),
+      placement: "right",
+      trigger: "click",
+      overlayStyle: {
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ React11.createElement(
+      AdderWrap,
+      {
+        hovered: props.hoverActivated,
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: () => {
+          setVisible(true);
+        }
+      },
+      props.hoverActivated ? /* @__PURE__ */ React11.createElement(IconPlus2, null) : null
+    )
+  );
+}
+
+// src/components/index.tsx
+var defaultFixedSemiMaterials = {
+  [FlowRendererKey.ADDER]: Adder,
+  [FlowRendererKey.COLLAPSE]: collapse_default,
+  [FlowRendererKey.TRY_CATCH_COLLAPSE]: try_catch_collapse_default,
+  [FlowRendererKey.BRANCH_ADDER]: BranchAdder,
+  [FlowRendererKey.DRAG_NODE]: DragNode,
+  [FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,
+  [FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,
+  [FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse
+};
+
+// src/components/tools.tsx
+import React12 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), "%"));
+};
+export {
+  PlaygroundTools,
+  defaultFixedSemiMaterials
+};
+//# sourceMappingURL=index.js.map