@flowgram.ai/fixed-semi-materials 0.1.0-alpha.10

package/dist/index.js

@@ -0,0 +1,809 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PlaygroundTools: () => PlaygroundTools,
+  defaultFixedSemiMaterials: () => defaultFixedSemiMaterials
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/index.tsx
+var import_fixed_layout_editor7 = require("@flowgram.ai/fixed-layout-editor");
+
+// src/assets/ellipsis.tsx
+var import_react = __toESM(require("react"));
+function Ellipse() {
+  return /* @__PURE__ */ import_react.default.createElement("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react.default.createElement("circle", { id: "Ellipse 465", cx: "4", cy: "4", r: "3", fill: "white", stroke: "#3370FF", strokeWidth: "2" }));
+}
+
+// src/assets/icons.tsx
+var import_react2 = __toESM(require("react"));
+function IconStyleBorder(props) {
+  return /* @__PURE__ */ import_react2.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ import_react2.default.createElement(
+    "g",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeMiterlimit: "1.5",
+      strokeWidth: "1.499"
+    },
+    /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.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__ */ import_react2.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 48 48", ...props }, /* @__PURE__ */ import_react2.default.createElement("g", { fill: "none" }, /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.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__ */ import_react2.default.createElement("circle", { cx: "8", cy: "24", r: "4", fill: "currentColor" }), /* @__PURE__ */ import_react2.default.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M8 24L22 24"
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M30 24.001H42"
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M30 8.00098H42"
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "4",
+      d: "M30 40.001H42"
+    }
+  )));
+}
+function PhCircleBold(props) {
+  return /* @__PURE__ */ import_react2.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 256 256", ...props }, /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", ...props }, /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.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__ */ import_react2.default.createElement("g", { fill: "currentColor" }, /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.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__ */ import_react2.default.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__ */ import_react2.default.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__ */ import_react2.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "8", cy: "8", r: "7", fill: circleColor }), /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.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
+var import_react3 = __toESM(require("react"));
+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 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);
+  if (!transform || !transform.parent) {
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
+  }
+  const width = transform.inputPoint.x - transform.parent.inputPoint.x;
+  const height = 40;
+  const scrollToActivateNode = () => {
+    setTimeout(() => {
+      import_fixed_layout_editor.Playground.getLatest()?.scrollToView({
+        position: node?.getData(import_fixed_layout_editor.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__ */ import_react3.default.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 ? baseActivatedColor : baseColor
+          },
+          "aria-hidden": "true"
+        },
+        childCount
+      );
+    }
+    if (hoverActivated) {
+      return /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          onClick: collapseBlock,
+          style: {
+            width: 16,
+            height: 16,
+            fontSize: 10,
+            borderRadius: 9,
+            display: "flex",
+            color: "#fff",
+            cursor: "pointer",
+            justifyContent: "center",
+            alignItems: "center",
+            background: baseActivatedColor
+          },
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_semi_icons.IconChevronLeft, null)
+      );
+    }
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        width,
+        height,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        "data-label-id": props.labelId,
+        style: {
+          fontSize: 12,
+          color: hoverActivated ? baseActivatedColor : baseColor,
+          textAlign: "center",
+          whiteSpace: "nowrap",
+          backgroundColor: "var(--g-editor-background)",
+          lineHeight: "20px"
+        }
+      },
+      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
+var import_react4 = __toESM(require("react"));
+var import_fixed_layout_editor2 = require("@flowgram.ai/fixed-layout-editor");
+
+// src/components/dragging-adder/styles.tsx
+var import_styled_components = __toESM(require("styled-components"));
+var UIDragNodeContainer = import_styled_components.default.div`
+  width: 16px;
+  height: 16px;
+  border-radius: 100px;
+  background-color: white;
+  border: 1px dashed #b8bcc1;
+`;
+
+// src/components/dragging-adder/index.tsx
+function DraggingAdder(props) {
+  const playground = (0, import_fixed_layout_editor2.usePlayground)();
+  const layer = playground.getLayer(import_fixed_layout_editor2.FlowDragLayer);
+  if (!layer) return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null);
+  if (layer.options.canDrop && !layer.options.canDrop({
+    dragNodes: layer.dragEntities || [],
+    dropNode: props.from,
+    isBranch: false
+  })) {
+    return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null);
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(UIDragNodeContainer, null);
+}
+
+// src/components/drag-node/index.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/components/drag-node/styles.tsx
+var import_styled_components2 = __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`
+  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 = import_styled_components2.default.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__ */ 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(
+    UIDragNodeContainer2,
+    {
+      style: {
+        position: "absolute",
+        top: 5,
+        right: -5,
+        left: 5,
+        bottom: -5,
+        opacity: 0.5
+      }
+    }
+  )));
+}
+
+// src/components/drag-highlight-adder/index.tsx
+var import_react6 = __toESM(require("react"));
+var import_lodash = require("lodash");
+var import_fixed_layout_editor3 = 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`
+  display: flex;
+  align-items: center;
+`;
+var UILine = (width, height) => import_styled_components3.default.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 (0, import_lodash.min)([preWidth, nextWidth]) || 0;
+};
+function DragHighlightAdder({ node }) {
+  const transformBounds = node.getData(import_fixed_layout_editor3.FlowNodeTransformData)?.bounds;
+  const { isVertical } = node;
+  if (isVertical) {
+    const preWidth = (transformBounds?.width || 0) - 16;
+    const nextNodeBounds2 = node?.next?.getData(import_fixed_layout_editor3.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));
+  }
+  const preHeight = (transformBounds?.height || 0) - 16;
+  const nextNodeBounds = node?.next?.getData(import_fixed_layout_editor3.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_editor4 = 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_editor4.FlowNodeRenderData);
+  const transform = collapseNode.getData(import_fixed_layout_editor4.FlowNodeTransformData);
+  if (!transform) {
+    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null);
+  }
+  const scrollToActivateNode = () => {
+    setTimeout(() => {
+      import_fixed_layout_editor4.Playground.getLatest()?.scrollToView({
+        position: activateNode?.getData(import_fixed_layout_editor4.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 })
+  );
+}
+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_editor5 = require("@flowgram.ai/fixed-layout-editor");
+var import_semi_icons2 = require("@douyinfe/semi-icons");
+
+// src/components/branch-adder/styles.tsx
+var import_styled_components5 = __toESM(require("styled-components"));
+var Container2 = import_styled_components5.default.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(import_fixed_layout_editor5.FlowNodeRenderData);
+  const playground = (0, import_fixed_layout_editor5.usePlayground)();
+  const flowOperationService = (0, import_fixed_layout_editor5.useService)(import_fixed_layout_editor5.FlowOperationService);
+  const { isVertical } = node;
+  function addBranch() {
+    const block = flowOperationService.addBlock(node, { id: (0, import_nanoid.nanoid)(5) });
+    setTimeout(() => {
+      playground.scrollToView({
+        bounds: block.getData(import_fixed_layout_editor5.FlowNodeTransformData).bounds,
+        scrollToCenter: true
+      });
+    }, 10);
+  }
+  if (playground.config.readonlyOrDisabled) return null;
+  return /* @__PURE__ */ import_react8.default.createElement(
+    Container2,
+    {
+      isVertical,
+      activated: activated || nodeData?.hovered,
+      onMouseEnter: () => nodeData?.toggleMouseEnter(),
+      onMouseLeave: () => nodeData?.toggleMouseLeave()
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      "div",
+      {
+        onClick: () => {
+          addBranch();
+        },
+        "aria-hidden": "true",
+        style: { flexGrow: 1, textAlign: "center", cursor: "pointer" }
+      },
+      /* @__PURE__ */ import_react8.default.createElement(import_semi_icons2.IconPlus, null)
+    )
+  );
+}
+
+// src/components/adder/index.tsx
+var import_react11 = __toESM(require("react"));
+var import_nanoid3 = require("nanoid");
+var import_fixed_layout_editor6 = require("@flowgram.ai/fixed-layout-editor");
+var import_semi_ui = require("@douyinfe/semi-ui");
+
+// src/components/nodes/index.tsx
+var import_react10 = __toESM(require("react"));
+
+// src/components/metadata.tsx
+var import_react9 = __toESM(require("react"));
+var import_nanoid2 = require("nanoid");
+var metadata = {
+  nodes: [
+    {
+      type: "start",
+      label: "Start",
+      icon: /* @__PURE__ */ import_react9.default.createElement(IconStyleBorder, null)
+    },
+    {
+      type: "dynamicSplit",
+      label: "Split Branch",
+      icon: /* @__PURE__ */ import_react9.default.createElement(IconParkRightBranch, null),
+      blocks() {
+        return [
+          {
+            id: (0, import_nanoid2.nanoid)(5)
+          },
+          {
+            id: (0, import_nanoid2.nanoid)(5)
+          }
+        ];
+      }
+    },
+    {
+      type: "end",
+      label: "Branch End",
+      icon: /* @__PURE__ */ import_react9.default.createElement(FeAlignCenter, null),
+      branchEnd: true
+    },
+    {
+      type: "loop",
+      schemaType: "loop",
+      label: "Loop",
+      icon: /* @__PURE__ */ import_react9.default.createElement(BiBootstrapReboot, null)
+    },
+    {
+      type: "tryCatch",
+      schemaType: "tryCatch",
+      label: "TryCatch",
+      icon: /* @__PURE__ */ import_react9.default.createElement(IconParkRightBranch, null),
+      blocks() {
+        return [
+          {
+            id: `try_${(0, import_nanoid2.nanoid)(5)}`
+            // try branch
+          },
+          {
+            id: `catch_${(0, import_nanoid2.nanoid)(5)}`
+            // catch branch 1
+          },
+          {
+            id: `catch_${(0, import_nanoid2.nanoid)(5)}`
+            // catch branch 2
+          }
+        ];
+      }
+    },
+    {
+      type: "noop",
+      label: "Noop Node",
+      icon: /* @__PURE__ */ import_react9.default.createElement(BiCloud, null)
+    },
+    {
+      type: "end",
+      label: "End",
+      icon: /* @__PURE__ */ import_react9.default.createElement(PhCircleBold, null)
+    }
+  ],
+  find: function find(type) {
+    return metadata.nodes.find((m) => m.type === type);
+  }
+};
+var metadata_default = metadata;
+
+// src/components/nodes/styles.tsx
+var import_styled_components6 = __toESM(require("styled-components"));
+var NodeWrap = import_styled_components6.default.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 = import_styled_components6.default.div`
+  font-size: 12px;
+  margin-left: 10px;
+`;
+var NodesWrap = import_styled_components6.default.div`
+  max-height: 500px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+// 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));
+}
+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) => (
+    // 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) })
+  )));
+}
+
+// src/components/adder/styles.tsx
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_semi_icons3 = 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;
+  background-color: rgb(143, 149, 158);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+var IconPlus2 = (0, import_styled_components7.default)(import_semi_icons3.IconPlusCircle)`
+  color: #3370ff;
+  background-color: #fff;
+  border-radius: 15px;
+`;
+
+// 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_editor6.usePlayground)();
+  const flowOperationService = (0, import_fixed_layout_editor6.useService)(import_fixed_layout_editor6.FlowOperationService);
+  const add = (addProps) => {
+    const block = flowOperationService.addFromNode(from, {
+      id: addProps.type + (0, import_nanoid3.nanoid)(5),
+      type: addProps.type,
+      blocks: addProps.blocks ? addProps.blocks() : void 0
+    });
+    setTimeout(() => {
+      playground.scrollToView({
+        bounds: block.getData(import_fixed_layout_editor6.FlowNodeTransformData).bounds,
+        scrollToCenter: true
+      });
+    }, 10);
+  };
+  if (playground.config.readonlyOrDisabled) return null;
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_semi_ui.Popover,
+    {
+      visible,
+      onVisibleChange: setVisible,
+      content: /* @__PURE__ */ import_react11.default.createElement(Nodes, { onSelect: add }),
+      placement: "right",
+      trigger: "click",
+      overlayStyle: {
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ import_react11.default.createElement(
+      AdderWrap,
+      {
+        hovered: props.hoverActivated,
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: () => {
+          setVisible(true);
+        }
+      },
+      props.hoverActivated ? /* @__PURE__ */ import_react11.default.createElement(IconPlus2, null) : null
+    )
+  );
+}
+
+// src/components/index.tsx
+var defaultFixedSemiMaterials = {
+  [import_fixed_layout_editor7.FlowRendererKey.ADDER]: Adder,
+  [import_fixed_layout_editor7.FlowRendererKey.COLLAPSE]: collapse_default,
+  [import_fixed_layout_editor7.FlowRendererKey.TRY_CATCH_COLLAPSE]: try_catch_collapse_default,
+  [import_fixed_layout_editor7.FlowRendererKey.BRANCH_ADDER]: BranchAdder,
+  [import_fixed_layout_editor7.FlowRendererKey.DRAG_NODE]: DragNode,
+  [import_fixed_layout_editor7.FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,
+  [import_fixed_layout_editor7.FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,
+  [import_fixed_layout_editor7.FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse
+};
+
+// src/components/tools.tsx
+var import_react12 = __toESM(require("react"));
+var import_fixed_layout_editor8 = require("@flowgram.ai/fixed-layout-editor");
+var import_semi_ui2 = require("@douyinfe/semi-ui");
+var import_semi_icons4 = require("@douyinfe/semi-icons");
+var PlaygroundTools = ({ layoutText }) => {
+  const tools = (0, import_fixed_layout_editor8.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), "%"));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PlaygroundTools,
+  defaultFixedSemiMaterials
+});
+//# sourceMappingURL=index.js.map