@flowgram.ai/fixed-semi-materials 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/esm/index.js

@@ -270,6 +270,7 @@ function TryCatchCollapse(props) {
     /* @__PURE__ */ React3.createElement(
       "div",
       {
+        "data-label-id": props.labelId,
         style: {
           fontSize: 12,
           color: hoverActivated ? baseActivatedColor : baseColor,
@@ -288,6 +289,7 @@ var try_catch_collapse_default = TryCatchCollapse;
 
 // src/components/dragging-adder/index.tsx
 import React4 from "react";
+import { FlowDragLayer, usePlayground } from "@flowgram.ai/fixed-layout-editor";
 
 // src/components/dragging-adder/styles.tsx
 import styled from "styled-components";
@@ -300,7 +302,17 @@ var UIDragNodeContainer = styled.div`
 `;
 
 // src/components/dragging-adder/index.tsx
-function DraggingAdder() {
+function DraggingAdder(props) {
+  const playground = usePlayground();
+  const layer = playground.getLayer(FlowDragLayer);
+  if (!layer) return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+  if (layer.options.canDrop && !layer.options.canDrop({
+    dragNodes: layer.dragEntities || [],
+    dropNode: props.from,
+    isBranch: false
+  })) {
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+  }
   return /* @__PURE__ */ React4.createElement(UIDragNodeContainer, null);
 }
 
@@ -487,7 +499,7 @@ import {
   FlowNodeRenderData as FlowNodeRenderData3,
   FlowNodeTransformData as FlowNodeTransformData4,
   FlowOperationService,
-  usePlayground,
+  usePlayground as usePlayground2,
   useService
 } from "@flowgram.ai/fixed-layout-editor";
 import { IconPlus } from "@douyinfe/semi-icons";
@@ -521,7 +533,7 @@ var Container2 = styled5.div`
 function BranchAdder(props) {
   const { activated, node } = props;
   const nodeData = node.firstChild?.getData(FlowNodeRenderData3);
-  const playground = usePlayground();
+  const playground = usePlayground2();
   const flowOperationService = useService(FlowOperationService);
   const { isVertical } = node;
   function addBranch() {
@@ -561,7 +573,7 @@ import React11, { useState as useState2 } from "react";
 import { nanoid as nanoid3 } from "nanoid";
 import {
   FlowNodeTransformData as FlowNodeTransformData5,
-  usePlayground as usePlayground2,
+  usePlayground as usePlayground3,
   useService as useService2,
   FlowOperationService as FlowOperationService2
 } from "@flowgram.ai/fixed-layout-editor";
@@ -710,7 +722,7 @@ var IconPlus2 = styled7(IconPlusCircle)`
 function Adder(props) {
   const { from } = props;
   const [visible, setVisible] = useState2(false);
-  const playground = usePlayground2();
+  const playground = usePlayground3();
   const flowOperationService = useService2(FlowOperationService2);
   const add = (addProps) => {
     const block = flowOperationService.addFromNode(from, {

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.tsx","../../src/assets/ellipsis.tsx","../../src/assets/icons.tsx","../../src/components/try-catch-collapse.tsx","../../src/components/dragging-adder/index.tsx","../../src/components/dragging-adder/styles.tsx","../../src/components/drag-node/index.tsx","../../src/components/drag-node/styles.tsx","../../src/components/constants.tsx","../../src/components/drag-highlight-adder/index.tsx","../../src/components/drag-highlight-adder/styles.tsx","../../src/components/collapse/index.tsx","../../src/components/collapse/styles.tsx","../../src/components/branch-adder/index.tsx","../../src/components/branch-adder/styles.tsx","../../src/components/adder/index.tsx","../../src/components/nodes/index.tsx","../../src/components/metadata.tsx","../../src/components/nodes/styles.tsx","../../src/components/adder/styles.tsx","../../src/components/tools.tsx"],"sourcesContent":["import { FlowRendererKey } from '@flowgram.ai/fixed-layout-editor';\n\nimport { Ellipse } from '../assets';\nimport TryCatchCollapse from './try-catch-collapse';\nimport DraggingAdder from './dragging-adder';\nimport DragNode from './drag-node';\nimport DragHighlightAdder from './drag-highlight-adder';\nimport Collapse from './collapse';\nimport BranchAdder from './branch-adder';\nimport Adder from './adder';\n\nexport const defaultFixedSemiMaterials = {\n  [FlowRendererKey.ADDER]: Adder,\n  [FlowRendererKey.COLLAPSE]: Collapse,\n  [FlowRendererKey.TRY_CATCH_COLLAPSE]: TryCatchCollapse,\n  [FlowRendererKey.BRANCH_ADDER]: BranchAdder,\n  [FlowRendererKey.DRAG_NODE]: DragNode,\n  [FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,\n  [FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,\n  [FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse,\n};\n","import React from 'react';\n\nexport function Ellipse() {\n  return (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle id=\"Ellipse 465\" cx=\"4\" cy=\"4\" r=\"3\" fill=\"white\" stroke=\"#3370FF\" strokeWidth=\"2\" />\n    </svg>\n  );\n}\n","import React from 'react';\n\nexport function IconStyleBorder(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeMiterlimit=\"1.5\"\n        strokeWidth=\"1.499\"\n      >\n        <path\n          strokeDasharray=\"2 2\"\n          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\"\n        />\n        <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\" />\n      </g>\n    </svg>\n  );\n}\n\nexport function IconParkRightBranch(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 48 48\" {...props}>\n      <g fill=\"none\">\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M22 8.01176C20.5 8.01193 16.0714 7.93811 15 13.0005C13.917 18.1177 9.85714 22.8477 8 24\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M22 40C20.5 40.0003 16.0714 40.0628 15 35.0005C13.917 29.8833 9.85714 25.1522 8 23.9999\"\n        />\n        <circle cx=\"8\" cy=\"24\" r=\"4\" fill=\"currentColor\" />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M8 24L22 24\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 24.001H42\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 8.00098H42\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 40.001H42\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nexport function PhCircleBold(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 256 256\" {...props}>\n      <path\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function BiCloud(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" {...props}>\n      <path\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function BiBootstrapReboot(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 16 16\"\n      {...props}\n    >\n      <g fill=\"currentColor\">\n        <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\" />\n        <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\" />\n      </g>\n    </svg>\n  );\n}\n\nexport function FeAlignCenter(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"#888888\"\n        fillRule=\"evenodd\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function Arrow({ color, circleColor }: { color: string; circleColor: string }) {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"8\" cy=\"8\" r=\"7\" fill={circleColor} />\n      <path\n        fill={color}\n        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\"\n      />\n      <path\n        fill={color}\n        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\"\n      />\n    </svg>\n  );\n}\n","import React, { useState } from 'react';\n\nimport {\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  type CustomLabelProps,\n  Playground,\n  useBaseColor,\n  FlowTextKey,\n  FlowRendererRegistry,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { IconChevronLeft } from '@douyinfe/semi-icons';\n\nfunction TryCatchCollapse(props: CustomLabelProps): JSX.Element {\n  const { node } = props;\n  const { baseColor, baseActivatedColor } = useBaseColor();\n\n  const activateData = node.getData(FlowNodeRenderData)!;\n  const transform = node.getData(FlowNodeTransformData)!;\n\n  const [hoverActivated, setHoverActivated] = useState(false);\n\n  if (!transform || !transform.parent) {\n    return <></>;\n  }\n\n  // hotzone width & height\n  const width = transform.inputPoint.x - transform.parent.inputPoint.x;\n  const height = 40;\n\n  const scrollToActivateNode = () => {\n    setTimeout(() => {\n      Playground.getLatest()?.scrollToView({\n        position: node?.getData(FlowNodeTransformData)?.inputPoint,\n        scrollToCenter: true,\n      });\n    }, 100);\n  };\n\n  const collapseBlock = () => {\n    transform.collapsed = true;\n    activateData.activated = false;\n    scrollToActivateNode();\n  };\n\n  const openBlock = () => {\n    transform.collapsed = false;\n    scrollToActivateNode();\n  };\n\n  const handleMouseEnter = () => {\n    setHoverActivated(true);\n    activateData.activated = true;\n  };\n\n  const handleMouseLeave = () => {\n    setHoverActivated(false);\n    activateData.activated = false;\n  };\n\n  const renderCollapse = () => {\n    // Expand\n    if (transform.collapsed) {\n      const childCount = node.allCollapsedChildren.filter(\n        (child) => !child.hidden && child !== node\n      ).length;\n\n      return (\n        <div\n          onClick={openBlock}\n          style={{\n            width: 16,\n            height: 16,\n            fontSize: 10,\n            borderRadius: 9,\n            display: 'flex',\n            color: '#fff',\n            cursor: 'pointer',\n            justifyContent: 'center',\n            alignItems: 'center',\n            background: hoverActivated ? baseActivatedColor : baseColor,\n          }}\n          aria-hidden=\"true\"\n        >\n          {childCount}\n        </div>\n      );\n    }\n\n    // Collapse\n    if (hoverActivated) {\n      return (\n        <div\n          onClick={collapseBlock}\n          style={{\n            width: 16,\n            height: 16,\n            fontSize: 10,\n            borderRadius: 9,\n            display: 'flex',\n            color: '#fff',\n            cursor: 'pointer',\n            justifyContent: 'center',\n            alignItems: 'center',\n            background: baseActivatedColor,\n          }}\n          aria-hidden=\"true\"\n        >\n          <IconChevronLeft />\n        </div>\n      );\n    }\n\n    return <></>;\n  };\n\n  // Collapse\n  return (\n    <div\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{\n        width,\n        height,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 6,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 12,\n          color: hoverActivated ? baseActivatedColor : baseColor,\n          textAlign: 'center',\n          whiteSpace: 'nowrap',\n          backgroundColor: 'var(--g-editor-background)',\n          lineHeight: '20px',\n        }}\n      >\n        {node.getService(FlowRendererRegistry).getText(FlowTextKey.CATCH_TEXT)}\n      </div>\n\n      {renderCollapse()}\n    </div>\n  );\n}\n\nexport default TryCatchCollapse;\n","import React from 'react';\n\nimport { UIDragNodeContainer } from './styles';\n\nexport default function DraggingAdder(): JSX.Element {\n  return <UIDragNodeContainer />;\n}\n","import styled from 'styled-components';\n\nexport const UIDragNodeContainer = styled.div`\n  width: 16px;\n  height: 16px;\n  border-radius: 100px;\n  background-color: white;\n  border: 1px dashed #b8bcc1;\n`;\n","import React from 'react';\n\nimport type { FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';\n\nimport { UIDragNodeContainer, UIDragCounts } from './styles';\n\nexport interface PropsType {\n  dragStart: FlowNodeEntity;\n  dragNodes: FlowNodeEntity[];\n}\n\nexport default function DragNode(props: PropsType): JSX.Element {\n  const { dragStart, dragNodes } = props;\n\n  const dragLength = (dragNodes || [])\n    .map((_node) =>\n      _node.allCollapsedChildren.length\n        ? _node.allCollapsedChildren.filter((_n) => !_n.hidden).length\n        : 1\n    )\n    .reduce((acm, curr) => acm + curr, 0);\n\n  return (\n    <UIDragNodeContainer>\n      {dragStart?.id}\n      {dragLength > 1 && (\n        <>\n          <UIDragCounts>{dragLength}</UIDragCounts>\n          <UIDragNodeContainer\n            style={{\n              position: 'absolute',\n              top: 5,\n              right: -5,\n              left: 5,\n              bottom: -5,\n              opacity: 0.5,\n            }}\n          />\n        </>\n      )}\n    </UIDragNodeContainer>\n  );\n}\n","import styled from 'styled-components';\n\nimport { primary, primaryOpacity09 } from '../constants';\n\nexport const UIDragNodeContainer = styled.div`\n  position: relative;\n  height: 32px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 19px;\n  border: 1px solid ${primary};\n  padding: 0 15px;\n  &:hover: {\n    background-color: ${primaryOpacity09};\n    color: ${primary};\n  }\n`;\n\nexport const UIDragCounts = styled.div`\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  text-align: center;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #fff;\n  background-color: ${primary};\n`;\n","export const primary = 'hsl(252 62% 54.9%)';\nexport const primaryOpacity09 = 'hsl(252deg 62% 55% / 9%)';\n","import React from 'react';\n\nimport { min } from 'lodash';\nimport { type FlowNodeEntity, FlowNodeTransformData } from '@flowgram.ai/fixed-layout-editor';\n\nimport { Ellipse } from '../../assets';\nimport { UILineContainer, UILine } from './styles';\n\nconst getMinSize = (preWidth: number, nextWidth: number): number => {\n  if (!preWidth || preWidth < 0) {\n    return 0;\n  }\n  if (!nextWidth || nextWidth < 0) {\n    return preWidth;\n  }\n  return min([preWidth, nextWidth]) || 0;\n};\n\nexport default function DragHighlightAdder({ node }: { node: FlowNodeEntity }): JSX.Element {\n  const transformBounds = node.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds;\n  const { isVertical } = node;\n  if (isVertical) {\n    const preWidth = (transformBounds?.width || 0) - 16;\n    const nextNodeBounds =\n      node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.width;\n    const nextWidth = (nextNodeBounds || 0) - 16;\n    const LineDom = UILine(getMinSize(preWidth, nextWidth), 2);\n    return (\n      <UILineContainer>\n        <Ellipse />\n        <LineDom />\n        <Ellipse />\n      </UILineContainer>\n    );\n  }\n  const preHeight = (transformBounds?.height || 0) - 16;\n  const nextNodeBounds =\n    node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.height;\n  const nextHeight = (nextNodeBounds || 0) - 16;\n  const LineDom = UILine(2, getMinSize(preHeight, nextHeight));\n  return (\n    <UILineContainer style={{ flexDirection: 'column' }}>\n      <Ellipse />\n      <LineDom />\n      <Ellipse />\n    </UILineContainer>\n  );\n}\n","import styled from 'styled-components';\n\nexport const UILineContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const UILine = (width: number, height: number) =>\n  styled.div`\n    width: ${width}px;\n    height: ${height}px;\n    background: #3370ff;\n  `;\n","import React from 'react';\n\nimport {\n  Playground,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  type CollapseProps,\n} from '@flowgram.ai/fixed-layout-editor';\n\nimport { Arrow } from '../../assets';\nimport { Container } from './styles';\n\nfunction Collapse(props: CollapseProps): JSX.Element {\n  const { collapseNode, activateNode, hoverActivated } = props;\n\n  const activateData = activateNode?.getData(FlowNodeRenderData);\n  const transform = collapseNode.getData(FlowNodeTransformData)!;\n\n  if (!transform) {\n    return <></>;\n  }\n\n  const scrollToActivateNode = () => {\n    setTimeout(() => {\n      Playground.getLatest()?.scrollToView({\n        position: activateNode?.getData(FlowNodeTransformData)?.outputPoint,\n        scrollToCenter: true,\n      });\n    }, 100);\n  };\n\n  const collapseBlock = () => {\n    transform.collapsed = true;\n    activateData?.toggleMouseLeave();\n\n    scrollToActivateNode();\n  };\n\n  const openBlock = () => {\n    transform.collapsed = false;\n\n    scrollToActivateNode();\n  };\n\n  // expand\n  if (transform.collapsed) {\n    const childCount = collapseNode.allCollapsedChildren.filter(\n      (child) => !child.hidden && child !== activateNode\n    ).length;\n\n    return (\n      <Container onClick={openBlock} hoverActivated={hoverActivated} aria-hidden=\"true\">\n        {childCount}\n      </Container>\n    );\n  }\n\n  // dark: var(--semi-color-black)\n  // light: var(--semi-color-white)\n  const circleColor = 'var(--semi-color-white)';\n  const color = hoverActivated ? '#82A7FC' : '#BBBFC4';\n\n  // collapse\n  return (\n    <Container\n      onClick={collapseBlock}\n      hoverActivated={hoverActivated}\n      isVertical={activateNode?.isVertical}\n      isCollapse={true}\n      aria-hidden=\"true\"\n    >\n      <Arrow color={color} circleColor={circleColor} />\n    </Container>\n  );\n}\n\nexport default Collapse;\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{\n  hoverActivated?: boolean;\n  isVertical?: boolean;\n  isCollapse?: boolean;\n}>`\n  width: 16px;\n  height: 16px;\n  font-size: 10px;\n  border-radius: 9px;\n  display: flex;\n  color: #fff;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n  background: ${(props) => (props.hoverActivated ? '#82A7FC' : '#BBBFC4')};\n  transform: ${(props) => (!props.isVertical && props.isCollapse ? 'rotate(-90deg)' : '')};\n`;\n","import React from 'react';\n\nimport { nanoid } from 'nanoid';\nimport {\n  type FlowNodeEntity,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  FlowOperationService,\n  usePlayground,\n  useService,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { IconPlus } from '@douyinfe/semi-icons';\n\nimport { Container } from './styles';\n\ninterface PropsType {\n  activated?: boolean;\n  node: FlowNodeEntity;\n}\n\nexport default function BranchAdder(props: PropsType) {\n  const { activated, node } = props;\n  const nodeData = node.firstChild?.getData<FlowNodeRenderData>(FlowNodeRenderData);\n  const playground = usePlayground();\n  const flowOperationService = useService(FlowOperationService) as FlowOperationService;\n  const { isVertical } = node;\n\n  function addBranch() {\n    const block = flowOperationService.addBlock(node, { id: nanoid(5) });\n\n    setTimeout(() => {\n      playground.scrollToView({\n        bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,\n        scrollToCenter: true,\n      });\n    }, 10);\n  }\n  if (playground.config.readonlyOrDisabled) return null;\n\n  return (\n    <Container\n      isVertical={isVertical}\n      activated={activated || nodeData?.hovered}\n      onMouseEnter={() => nodeData?.toggleMouseEnter()}\n      onMouseLeave={() => nodeData?.toggleMouseLeave()}\n    >\n      <div\n        onClick={() => {\n          addBranch();\n        }}\n        aria-hidden=\"true\"\n        style={{ flexGrow: 1, textAlign: 'center', cursor: 'pointer' }}\n      >\n        <IconPlus />\n      </div>\n    </Container>\n  );\n}\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{ activated?: boolean; isVertical: boolean }>`\n  width: 28px;\n  height: 18px;\n  background: ${(props) => (props.activated ? '#82A7FC' : 'rgb(187, 191, 196)')};\n  display: flex;\n  border-radius: 9px;\n  justify-content: space-evenly;\n  align-items: center;\n  color: #fff;\n  font-size: 10px;\n  font-weight: bold;\n  transform: ${(props) => (props.isVertical ? '' : 'rotate(90deg)')};\n  div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  }\n`;\n","import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport {\n  type FlowNodeEntity,\n  FlowNodeTransformData,\n  usePlayground,\n  useService,\n  FlowOperationService,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { Popover } from '@douyinfe/semi-ui';\n\nimport Nodes from '../nodes';\nimport { AdderWrap, IconPlus } from './styles';\n\nexport default function Adder(props: {\n  from: FlowNodeEntity;\n  to?: FlowNodeEntity;\n  hoverActivated: boolean;\n}) {\n  const { from } = props;\n  const [visible, setVisible] = useState(false);\n  const playground = usePlayground();\n  const flowOperationService = useService(FlowOperationService) as FlowOperationService;\n\n  const add = (addProps: any) => {\n    const block = flowOperationService.addFromNode(from, {\n      id: addProps.type + nanoid(5),\n      type: addProps.type,\n      blocks: addProps.blocks ? addProps.blocks() : undefined,\n    });\n    setTimeout(() => {\n      playground.scrollToView({\n        bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,\n        scrollToCenter: true,\n      });\n    }, 10);\n  };\n\n  if (playground.config.readonlyOrDisabled) return null;\n\n  return (\n    <Popover\n      visible={visible}\n      onVisibleChange={setVisible}\n      content={<Nodes onSelect={add} />}\n      placement=\"right\"\n      trigger=\"click\"\n      overlayStyle={{\n        padding: 0,\n      }}\n    >\n      <AdderWrap\n        hovered={props.hoverActivated}\n        onMouseDown={(e) => e.stopPropagation()}\n        onClick={() => {\n          setVisible(true);\n        }}\n      >\n        {props.hoverActivated ? <IconPlus /> : null}\n      </AdderWrap>\n    </Popover>\n  );\n}\n","import React from 'react';\n\nimport metadata from '../metadata';\nimport { NodeWrap, NodeLabel, NodesWrap } from './styles';\n\nfunction Node(props: { label: string; icon: JSX.Element; onClick: () => void }) {\n  return (\n    <NodeWrap onClick={props.onClick}>\n      <div style={{ fontSize: 14 }}>{props.icon}</div>\n      <NodeLabel>{props.label}</NodeLabel>\n    </NodeWrap>\n  );\n}\n\nconst addings = metadata.nodes.filter((node) => node.type !== 'start');\n\nexport default function Nodes(props: { onSelect: (meta: any) => void }) {\n  return (\n    <NodesWrap style={{ width: 80 * 2 + 20 }}>\n      {addings.map((n, i) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <Node key={i} icon={n.icon} label={n.label} onClick={() => props.onSelect?.(n)} />\n      ))}\n    </NodesWrap>\n  );\n}\n","import React from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport {\n  BiBootstrapReboot,\n  BiCloud,\n  FeAlignCenter,\n  IconStyleBorder,\n  IconParkRightBranch,\n  PhCircleBold,\n} from '../assets';\n\nconst metadata = {\n  nodes: [\n    {\n      type: 'start',\n      label: 'Start',\n      icon: <IconStyleBorder />,\n    },\n    {\n      type: 'dynamicSplit',\n      label: 'Split Branch',\n      icon: <IconParkRightBranch />,\n      blocks() {\n        return [\n          {\n            id: nanoid(5),\n          },\n          {\n            id: nanoid(5),\n          },\n        ];\n      },\n    },\n    {\n      type: 'end',\n      label: 'Branch End',\n      icon: <FeAlignCenter />,\n      branchEnd: true,\n    },\n    {\n      type: 'loop',\n      schemaType: 'loop',\n      label: 'Loop',\n      icon: <BiBootstrapReboot />,\n    },\n    {\n      type: 'tryCatch',\n      schemaType: 'tryCatch',\n      label: 'TryCatch',\n      icon: <IconParkRightBranch />,\n      blocks() {\n        return [\n          {\n            id: `try_${nanoid(5)}`, // try branch\n          },\n          {\n            id: `catch_${nanoid(5)}`, // catch branch 1\n          },\n          {\n            id: `catch_${nanoid(5)}`, // catch branch 2\n          },\n        ];\n      },\n    },\n    {\n      type: 'noop',\n      label: 'Noop Node',\n      icon: <BiCloud />,\n    },\n    {\n      type: 'end',\n      label: 'End',\n      icon: <PhCircleBold />,\n    },\n  ],\n  find: function find(type: any) {\n    return metadata.nodes.find((m) => m.type === type);\n  },\n};\n\nexport default metadata;\n","import styled from 'styled-components';\n\nimport { primary, primaryOpacity09 } from '../constants';\n\nexport const NodeWrap = styled.div`\n  width: 100%;\n  height: 32px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 19px;\n  padding: 0 15px;\n  &:hover: {\n    background-color: ${primaryOpacity09};\n    color: ${primary};\n  },\n`;\n\nexport const NodeLabel = styled.div`\n  font-size: 12px;\n  margin-left: 10px;\n`;\n\nexport const NodesWrap = styled.div`\n  max-height: 500px;\n  overflow: auto;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n","import styled from 'styled-components';\nimport { IconPlusCircle } from '@douyinfe/semi-icons';\n\nexport const AdderWrap = styled.div<{ hovered?: boolean }>`\n  width: ${(props) => (props.hovered ? 15 : 6)}px;\n  height: ${(props) => (props.hovered ? 15 : 6)}px;\n  background-color: rgb(143, 149, 158);\n  color: #fff;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n`;\n\nexport const IconPlus = styled(IconPlusCircle)`\n  color: #3370ff;\n  background-color: #fff;\n  border-radius: 15px;\n`;\n","import React from 'react';\n\nimport { usePlaygroundTools } from '@flowgram.ai/fixed-layout-editor';\nimport { Checkbox, IconButton, Space, Tooltip } from '@douyinfe/semi-ui';\nimport { IconUndo, IconRedo, IconShrink, IconExpand, IconGridView } from '@douyinfe/semi-icons';\n\nexport const PlaygroundTools = ({ layoutText }: { layoutText?: string }) => {\n  const tools = usePlaygroundTools();\n  const { zoom } = tools;\n\n  return (\n    <Space>\n      <Checkbox onChange={() => tools.changeLayout()} checked={!tools.isVertical}>\n        {layoutText || 'isHorizontal'}\n      </Checkbox>\n      <Tooltip content=\"fit view\">\n        <IconButton icon={<IconGridView />} onClick={() => tools.fitView()} />\n      </Tooltip>\n      <Tooltip content=\"zoom out\">\n        <IconButton icon={<IconShrink />} onClick={() => tools.zoomout()} />\n      </Tooltip>\n      <Tooltip content=\"zoom in\">\n        <IconButton icon={<IconExpand />} onClick={() => tools.zoomin()} />\n      </Tooltip>\n      <Tooltip content=\"undo\">\n        <IconButton icon={<IconUndo />} disabled={tools.canUndo} onClick={() => tools.undo()} />\n      </Tooltip>\n      <Tooltip content=\"redo\">\n        <IconButton icon={<IconRedo />} disabled={tools.canRedo} onClick={() => tools.redo()} />\n      </Tooltip>\n      <span>{Math.floor(zoom * 100)}%</span>\n    </Space>\n  );\n};\n"],"mappings":"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","names":["React","React","React","React","React","styled","UIDragNodeContainer","styled","React","UIDragNodeContainer","React","FlowNodeTransformData","styled","FlowNodeTransformData","nextNodeBounds","LineDom","React","React","Playground","FlowNodeRenderData","FlowNodeTransformData","styled","FlowNodeRenderData","FlowNodeTransformData","React","Playground","React","FlowNodeRenderData","FlowNodeTransformData","styled","Container","FlowNodeRenderData","FlowNodeTransformData","React","Container","React","useState","nanoid","FlowNodeTransformData","usePlayground","useService","FlowOperationService","React","React","nanoid","React","nanoid","styled","styled","React","styled","IconPlus","useState","usePlayground","useService","FlowOperationService","nanoid","FlowNodeTransformData","React","IconPlus","React"]}
+{"version":3,"sources":["../../src/components/index.tsx","../../src/assets/ellipsis.tsx","../../src/assets/icons.tsx","../../src/components/try-catch-collapse.tsx","../../src/components/dragging-adder/index.tsx","../../src/components/dragging-adder/styles.tsx","../../src/components/drag-node/index.tsx","../../src/components/drag-node/styles.tsx","../../src/components/constants.tsx","../../src/components/drag-highlight-adder/index.tsx","../../src/components/drag-highlight-adder/styles.tsx","../../src/components/collapse/index.tsx","../../src/components/collapse/styles.tsx","../../src/components/branch-adder/index.tsx","../../src/components/branch-adder/styles.tsx","../../src/components/adder/index.tsx","../../src/components/nodes/index.tsx","../../src/components/metadata.tsx","../../src/components/nodes/styles.tsx","../../src/components/adder/styles.tsx","../../src/components/tools.tsx"],"sourcesContent":["import { FlowRendererKey } from '@flowgram.ai/fixed-layout-editor';\n\nimport { Ellipse } from '../assets';\nimport TryCatchCollapse from './try-catch-collapse';\nimport DraggingAdder from './dragging-adder';\nimport DragNode from './drag-node';\nimport DragHighlightAdder from './drag-highlight-adder';\nimport Collapse from './collapse';\nimport BranchAdder from './branch-adder';\nimport Adder from './adder';\n\nexport const defaultFixedSemiMaterials = {\n  [FlowRendererKey.ADDER]: Adder,\n  [FlowRendererKey.COLLAPSE]: Collapse,\n  [FlowRendererKey.TRY_CATCH_COLLAPSE]: TryCatchCollapse,\n  [FlowRendererKey.BRANCH_ADDER]: BranchAdder,\n  [FlowRendererKey.DRAG_NODE]: DragNode,\n  [FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,\n  [FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,\n  [FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse,\n};\n","import React from 'react';\n\nexport function Ellipse() {\n  return (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle id=\"Ellipse 465\" cx=\"4\" cy=\"4\" r=\"3\" fill=\"white\" stroke=\"#3370FF\" strokeWidth=\"2\" />\n    </svg>\n  );\n}\n","import React from 'react';\n\nexport function IconStyleBorder(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeMiterlimit=\"1.5\"\n        strokeWidth=\"1.499\"\n      >\n        <path\n          strokeDasharray=\"2 2\"\n          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\"\n        />\n        <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\" />\n      </g>\n    </svg>\n  );\n}\n\nexport function IconParkRightBranch(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 48 48\" {...props}>\n      <g fill=\"none\">\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M22 8.01176C20.5 8.01193 16.0714 7.93811 15 13.0005C13.917 18.1177 9.85714 22.8477 8 24\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M22 40C20.5 40.0003 16.0714 40.0628 15 35.0005C13.917 29.8833 9.85714 25.1522 8 23.9999\"\n        />\n        <circle cx=\"8\" cy=\"24\" r=\"4\" fill=\"currentColor\" />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M8 24L22 24\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 24.001H42\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 8.00098H42\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 40.001H42\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nexport function PhCircleBold(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 256 256\" {...props}>\n      <path\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function BiCloud(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" {...props}>\n      <path\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function BiBootstrapReboot(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 16 16\"\n      {...props}\n    >\n      <g fill=\"currentColor\">\n        <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\" />\n        <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\" />\n      </g>\n    </svg>\n  );\n}\n\nexport function FeAlignCenter(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"#888888\"\n        fillRule=\"evenodd\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function Arrow({ color, circleColor }: { color: string; circleColor: string }) {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"8\" cy=\"8\" r=\"7\" fill={circleColor} />\n      <path\n        fill={color}\n        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\"\n      />\n      <path\n        fill={color}\n        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\"\n      />\n    </svg>\n  );\n}\n","import React, { useState } from 'react';\n\nimport {\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  type CustomLabelProps,\n  Playground,\n  useBaseColor,\n  FlowTextKey,\n  FlowRendererRegistry,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { IconChevronLeft } from '@douyinfe/semi-icons';\n\nfunction TryCatchCollapse(props: CustomLabelProps): JSX.Element {\n  const { node } = props;\n  const { baseColor, baseActivatedColor } = useBaseColor();\n\n  const activateData = node.getData(FlowNodeRenderData)!;\n  const transform = node.getData(FlowNodeTransformData)!;\n\n  const [hoverActivated, setHoverActivated] = useState(false);\n\n  if (!transform || !transform.parent) {\n    return <></>;\n  }\n\n  // hotzone width & height\n  const width = transform.inputPoint.x - transform.parent.inputPoint.x;\n  const height = 40;\n\n  const scrollToActivateNode = () => {\n    setTimeout(() => {\n      Playground.getLatest()?.scrollToView({\n        position: node?.getData(FlowNodeTransformData)?.inputPoint,\n        scrollToCenter: true,\n      });\n    }, 100);\n  };\n\n  const collapseBlock = () => {\n    transform.collapsed = true;\n    activateData.activated = false;\n    scrollToActivateNode();\n  };\n\n  const openBlock = () => {\n    transform.collapsed = false;\n    scrollToActivateNode();\n  };\n\n  const handleMouseEnter = () => {\n    setHoverActivated(true);\n    activateData.activated = true;\n  };\n\n  const handleMouseLeave = () => {\n    setHoverActivated(false);\n    activateData.activated = false;\n  };\n\n  const renderCollapse = () => {\n    // Expand\n    if (transform.collapsed) {\n      const childCount = node.allCollapsedChildren.filter(\n        (child) => !child.hidden && child !== node\n      ).length;\n\n      return (\n        <div\n          onClick={openBlock}\n          style={{\n            width: 16,\n            height: 16,\n            fontSize: 10,\n            borderRadius: 9,\n            display: 'flex',\n            color: '#fff',\n            cursor: 'pointer',\n            justifyContent: 'center',\n            alignItems: 'center',\n            background: hoverActivated ? baseActivatedColor : baseColor,\n          }}\n          aria-hidden=\"true\"\n        >\n          {childCount}\n        </div>\n      );\n    }\n\n    // Collapse\n    if (hoverActivated) {\n      return (\n        <div\n          onClick={collapseBlock}\n          style={{\n            width: 16,\n            height: 16,\n            fontSize: 10,\n            borderRadius: 9,\n            display: 'flex',\n            color: '#fff',\n            cursor: 'pointer',\n            justifyContent: 'center',\n            alignItems: 'center',\n            background: baseActivatedColor,\n          }}\n          aria-hidden=\"true\"\n        >\n          <IconChevronLeft />\n        </div>\n      );\n    }\n\n    return <></>;\n  };\n\n  // Collapse\n  return (\n    <div\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{\n        width,\n        height,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 6,\n      }}\n    >\n      <div\n        data-label-id={props.labelId}\n        style={{\n          fontSize: 12,\n          color: hoverActivated ? baseActivatedColor : baseColor,\n          textAlign: 'center',\n          whiteSpace: 'nowrap',\n          backgroundColor: 'var(--g-editor-background)',\n          lineHeight: '20px',\n        }}\n      >\n        {node.getService(FlowRendererRegistry).getText(FlowTextKey.CATCH_TEXT)}\n      </div>\n\n      {renderCollapse()}\n    </div>\n  );\n}\n\nexport default TryCatchCollapse;\n","import React from 'react';\n\nimport { FlowDragLayer, usePlayground } from '@flowgram.ai/fixed-layout-editor';\n\nimport { UIDragNodeContainer } from './styles';\n\nexport default function DraggingAdder(props: any): JSX.Element {\n  const playground = usePlayground();\n  const layer = playground.getLayer(FlowDragLayer);\n  if (!layer) return <></>;\n  if (\n    layer.options.canDrop &&\n    !layer.options.canDrop({\n      dragNodes: layer.dragEntities || [],\n      dropNode: props.from,\n      isBranch: false,\n    })\n  ) {\n    return <></>;\n  }\n  return <UIDragNodeContainer />;\n}\n","import styled from 'styled-components';\n\nexport const UIDragNodeContainer = styled.div`\n  width: 16px;\n  height: 16px;\n  border-radius: 100px;\n  background-color: white;\n  border: 1px dashed #b8bcc1;\n`;\n","import React from 'react';\n\nimport type { FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';\n\nimport { UIDragNodeContainer, UIDragCounts } from './styles';\n\nexport interface PropsType {\n  dragStart: FlowNodeEntity;\n  dragNodes: FlowNodeEntity[];\n}\n\nexport default function DragNode(props: PropsType): JSX.Element {\n  const { dragStart, dragNodes } = props;\n\n  const dragLength = (dragNodes || [])\n    .map((_node) =>\n      _node.allCollapsedChildren.length\n        ? _node.allCollapsedChildren.filter((_n) => !_n.hidden).length\n        : 1\n    )\n    .reduce((acm, curr) => acm + curr, 0);\n\n  return (\n    <UIDragNodeContainer>\n      {dragStart?.id}\n      {dragLength > 1 && (\n        <>\n          <UIDragCounts>{dragLength}</UIDragCounts>\n          <UIDragNodeContainer\n            style={{\n              position: 'absolute',\n              top: 5,\n              right: -5,\n              left: 5,\n              bottom: -5,\n              opacity: 0.5,\n            }}\n          />\n        </>\n      )}\n    </UIDragNodeContainer>\n  );\n}\n","import styled from 'styled-components';\n\nimport { primary, primaryOpacity09 } from '../constants';\n\nexport const UIDragNodeContainer = styled.div`\n  position: relative;\n  height: 32px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 19px;\n  border: 1px solid ${primary};\n  padding: 0 15px;\n  &:hover: {\n    background-color: ${primaryOpacity09};\n    color: ${primary};\n  }\n`;\n\nexport const UIDragCounts = styled.div`\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  text-align: center;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #fff;\n  background-color: ${primary};\n`;\n","export const primary = 'hsl(252 62% 54.9%)';\nexport const primaryOpacity09 = 'hsl(252deg 62% 55% / 9%)';\n","import React from 'react';\n\nimport { min } from 'lodash';\nimport { type FlowNodeEntity, FlowNodeTransformData } from '@flowgram.ai/fixed-layout-editor';\n\nimport { Ellipse } from '../../assets';\nimport { UILineContainer, UILine } from './styles';\n\nconst getMinSize = (preWidth: number, nextWidth: number): number => {\n  if (!preWidth || preWidth < 0) {\n    return 0;\n  }\n  if (!nextWidth || nextWidth < 0) {\n    return preWidth;\n  }\n  return min([preWidth, nextWidth]) || 0;\n};\n\nexport default function DragHighlightAdder({ node }: { node: FlowNodeEntity }): JSX.Element {\n  const transformBounds = node.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds;\n  const { isVertical } = node;\n  if (isVertical) {\n    const preWidth = (transformBounds?.width || 0) - 16;\n    const nextNodeBounds =\n      node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.width;\n    const nextWidth = (nextNodeBounds || 0) - 16;\n    const LineDom = UILine(getMinSize(preWidth, nextWidth), 2);\n    return (\n      <UILineContainer>\n        <Ellipse />\n        <LineDom />\n        <Ellipse />\n      </UILineContainer>\n    );\n  }\n  const preHeight = (transformBounds?.height || 0) - 16;\n  const nextNodeBounds =\n    node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.height;\n  const nextHeight = (nextNodeBounds || 0) - 16;\n  const LineDom = UILine(2, getMinSize(preHeight, nextHeight));\n  return (\n    <UILineContainer style={{ flexDirection: 'column' }}>\n      <Ellipse />\n      <LineDom />\n      <Ellipse />\n    </UILineContainer>\n  );\n}\n","import styled from 'styled-components';\n\nexport const UILineContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const UILine = (width: number, height: number) =>\n  styled.div`\n    width: ${width}px;\n    height: ${height}px;\n    background: #3370ff;\n  `;\n","import React from 'react';\n\nimport {\n  Playground,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  type CollapseProps,\n} from '@flowgram.ai/fixed-layout-editor';\n\nimport { Arrow } from '../../assets';\nimport { Container } from './styles';\n\nfunction Collapse(props: CollapseProps): JSX.Element {\n  const { collapseNode, activateNode, hoverActivated } = props;\n\n  const activateData = activateNode?.getData(FlowNodeRenderData);\n  const transform = collapseNode.getData(FlowNodeTransformData)!;\n\n  if (!transform) {\n    return <></>;\n  }\n\n  const scrollToActivateNode = () => {\n    setTimeout(() => {\n      Playground.getLatest()?.scrollToView({\n        position: activateNode?.getData(FlowNodeTransformData)?.outputPoint,\n        scrollToCenter: true,\n      });\n    }, 100);\n  };\n\n  const collapseBlock = () => {\n    transform.collapsed = true;\n    activateData?.toggleMouseLeave();\n\n    scrollToActivateNode();\n  };\n\n  const openBlock = () => {\n    transform.collapsed = false;\n\n    scrollToActivateNode();\n  };\n\n  // expand\n  if (transform.collapsed) {\n    const childCount = collapseNode.allCollapsedChildren.filter(\n      (child) => !child.hidden && child !== activateNode\n    ).length;\n\n    return (\n      <Container onClick={openBlock} hoverActivated={hoverActivated} aria-hidden=\"true\">\n        {childCount}\n      </Container>\n    );\n  }\n\n  // dark: var(--semi-color-black)\n  // light: var(--semi-color-white)\n  const circleColor = 'var(--semi-color-white)';\n  const color = hoverActivated ? '#82A7FC' : '#BBBFC4';\n\n  // collapse\n  return (\n    <Container\n      onClick={collapseBlock}\n      hoverActivated={hoverActivated}\n      isVertical={activateNode?.isVertical}\n      isCollapse={true}\n      aria-hidden=\"true\"\n    >\n      <Arrow color={color} circleColor={circleColor} />\n    </Container>\n  );\n}\n\nexport default Collapse;\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{\n  hoverActivated?: boolean;\n  isVertical?: boolean;\n  isCollapse?: boolean;\n}>`\n  width: 16px;\n  height: 16px;\n  font-size: 10px;\n  border-radius: 9px;\n  display: flex;\n  color: #fff;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n  background: ${(props) => (props.hoverActivated ? '#82A7FC' : '#BBBFC4')};\n  transform: ${(props) => (!props.isVertical && props.isCollapse ? 'rotate(-90deg)' : '')};\n`;\n","import React from 'react';\n\nimport { nanoid } from 'nanoid';\nimport {\n  type FlowNodeEntity,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  FlowOperationService,\n  usePlayground,\n  useService,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { IconPlus } from '@douyinfe/semi-icons';\n\nimport { Container } from './styles';\n\ninterface PropsType {\n  activated?: boolean;\n  node: FlowNodeEntity;\n}\n\nexport default function BranchAdder(props: PropsType) {\n  const { activated, node } = props;\n  const nodeData = node.firstChild?.getData<FlowNodeRenderData>(FlowNodeRenderData);\n  const playground = usePlayground();\n  const flowOperationService = useService(FlowOperationService) as FlowOperationService;\n  const { isVertical } = node;\n\n  function addBranch() {\n    const block = flowOperationService.addBlock(node, { id: nanoid(5) });\n\n    setTimeout(() => {\n      playground.scrollToView({\n        bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,\n        scrollToCenter: true,\n      });\n    }, 10);\n  }\n  if (playground.config.readonlyOrDisabled) return null;\n\n  return (\n    <Container\n      isVertical={isVertical}\n      activated={activated || nodeData?.hovered}\n      onMouseEnter={() => nodeData?.toggleMouseEnter()}\n      onMouseLeave={() => nodeData?.toggleMouseLeave()}\n    >\n      <div\n        onClick={() => {\n          addBranch();\n        }}\n        aria-hidden=\"true\"\n        style={{ flexGrow: 1, textAlign: 'center', cursor: 'pointer' }}\n      >\n        <IconPlus />\n      </div>\n    </Container>\n  );\n}\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{ activated?: boolean; isVertical: boolean }>`\n  width: 28px;\n  height: 18px;\n  background: ${(props) => (props.activated ? '#82A7FC' : 'rgb(187, 191, 196)')};\n  display: flex;\n  border-radius: 9px;\n  justify-content: space-evenly;\n  align-items: center;\n  color: #fff;\n  font-size: 10px;\n  font-weight: bold;\n  transform: ${(props) => (props.isVertical ? '' : 'rotate(90deg)')};\n  div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  }\n`;\n","import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport {\n  type FlowNodeEntity,\n  FlowNodeTransformData,\n  usePlayground,\n  useService,\n  FlowOperationService,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { Popover } from '@douyinfe/semi-ui';\n\nimport Nodes from '../nodes';\nimport { AdderWrap, IconPlus } from './styles';\n\nexport default function Adder(props: {\n  from: FlowNodeEntity;\n  to?: FlowNodeEntity;\n  hoverActivated: boolean;\n}) {\n  const { from } = props;\n  const [visible, setVisible] = useState(false);\n  const playground = usePlayground();\n  const flowOperationService = useService(FlowOperationService) as FlowOperationService;\n\n  const add = (addProps: any) => {\n    const block = flowOperationService.addFromNode(from, {\n      id: addProps.type + nanoid(5),\n      type: addProps.type,\n      blocks: addProps.blocks ? addProps.blocks() : undefined,\n    });\n    setTimeout(() => {\n      playground.scrollToView({\n        bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,\n        scrollToCenter: true,\n      });\n    }, 10);\n  };\n\n  if (playground.config.readonlyOrDisabled) return null;\n\n  return (\n    <Popover\n      visible={visible}\n      onVisibleChange={setVisible}\n      content={<Nodes onSelect={add} />}\n      placement=\"right\"\n      trigger=\"click\"\n      overlayStyle={{\n        padding: 0,\n      }}\n    >\n      <AdderWrap\n        hovered={props.hoverActivated}\n        onMouseDown={(e) => e.stopPropagation()}\n        onClick={() => {\n          setVisible(true);\n        }}\n      >\n        {props.hoverActivated ? <IconPlus /> : null}\n      </AdderWrap>\n    </Popover>\n  );\n}\n","import React from 'react';\n\nimport metadata from '../metadata';\nimport { NodeWrap, NodeLabel, NodesWrap } from './styles';\n\nfunction Node(props: { label: string; icon: JSX.Element; onClick: () => void }) {\n  return (\n    <NodeWrap onClick={props.onClick}>\n      <div style={{ fontSize: 14 }}>{props.icon}</div>\n      <NodeLabel>{props.label}</NodeLabel>\n    </NodeWrap>\n  );\n}\n\nconst addings = metadata.nodes.filter((node) => node.type !== 'start');\n\nexport default function Nodes(props: { onSelect: (meta: any) => void }) {\n  return (\n    <NodesWrap style={{ width: 80 * 2 + 20 }}>\n      {addings.map((n, i) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <Node key={i} icon={n.icon} label={n.label} onClick={() => props.onSelect?.(n)} />\n      ))}\n    </NodesWrap>\n  );\n}\n","import React from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport {\n  BiBootstrapReboot,\n  BiCloud,\n  FeAlignCenter,\n  IconStyleBorder,\n  IconParkRightBranch,\n  PhCircleBold,\n} from '../assets';\n\nconst metadata = {\n  nodes: [\n    {\n      type: 'start',\n      label: 'Start',\n      icon: <IconStyleBorder />,\n    },\n    {\n      type: 'dynamicSplit',\n      label: 'Split Branch',\n      icon: <IconParkRightBranch />,\n      blocks() {\n        return [\n          {\n            id: nanoid(5),\n          },\n          {\n            id: nanoid(5),\n          },\n        ];\n      },\n    },\n    {\n      type: 'end',\n      label: 'Branch End',\n      icon: <FeAlignCenter />,\n      branchEnd: true,\n    },\n    {\n      type: 'loop',\n      schemaType: 'loop',\n      label: 'Loop',\n      icon: <BiBootstrapReboot />,\n    },\n    {\n      type: 'tryCatch',\n      schemaType: 'tryCatch',\n      label: 'TryCatch',\n      icon: <IconParkRightBranch />,\n      blocks() {\n        return [\n          {\n            id: `try_${nanoid(5)}`, // try branch\n          },\n          {\n            id: `catch_${nanoid(5)}`, // catch branch 1\n          },\n          {\n            id: `catch_${nanoid(5)}`, // catch branch 2\n          },\n        ];\n      },\n    },\n    {\n      type: 'noop',\n      label: 'Noop Node',\n      icon: <BiCloud />,\n    },\n    {\n      type: 'end',\n      label: 'End',\n      icon: <PhCircleBold />,\n    },\n  ],\n  find: function find(type: any) {\n    return metadata.nodes.find((m) => m.type === type);\n  },\n};\n\nexport default metadata;\n","import styled from 'styled-components';\n\nimport { primary, primaryOpacity09 } from '../constants';\n\nexport const NodeWrap = styled.div`\n  width: 100%;\n  height: 32px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 19px;\n  padding: 0 15px;\n  &:hover: {\n    background-color: ${primaryOpacity09};\n    color: ${primary};\n  },\n`;\n\nexport const NodeLabel = styled.div`\n  font-size: 12px;\n  margin-left: 10px;\n`;\n\nexport const NodesWrap = styled.div`\n  max-height: 500px;\n  overflow: auto;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n","import styled from 'styled-components';\nimport { IconPlusCircle } from '@douyinfe/semi-icons';\n\nexport const AdderWrap = styled.div<{ hovered?: boolean }>`\n  width: ${(props) => (props.hovered ? 15 : 6)}px;\n  height: ${(props) => (props.hovered ? 15 : 6)}px;\n  background-color: rgb(143, 149, 158);\n  color: #fff;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n`;\n\nexport const IconPlus = styled(IconPlusCircle)`\n  color: #3370ff;\n  background-color: #fff;\n  border-radius: 15px;\n`;\n","import React from 'react';\n\nimport { usePlaygroundTools } from '@flowgram.ai/fixed-layout-editor';\nimport { Checkbox, IconButton, Space, Tooltip } from '@douyinfe/semi-ui';\nimport { IconUndo, IconRedo, IconShrink, IconExpand, IconGridView } from '@douyinfe/semi-icons';\n\nexport const PlaygroundTools = ({ layoutText }: { layoutText?: string }) => {\n  const tools = usePlaygroundTools();\n  const { zoom } = tools;\n\n  return (\n    <Space>\n      <Checkbox onChange={() => tools.changeLayout()} checked={!tools.isVertical}>\n        {layoutText || 'isHorizontal'}\n      </Checkbox>\n      <Tooltip content=\"fit view\">\n        <IconButton icon={<IconGridView />} onClick={() => tools.fitView()} />\n      </Tooltip>\n      <Tooltip content=\"zoom out\">\n        <IconButton icon={<IconShrink />} onClick={() => tools.zoomout()} />\n      </Tooltip>\n      <Tooltip content=\"zoom in\">\n        <IconButton icon={<IconExpand />} onClick={() => tools.zoomin()} />\n      </Tooltip>\n      <Tooltip content=\"undo\">\n        <IconButton icon={<IconUndo />} disabled={tools.canUndo} onClick={() => tools.undo()} />\n      </Tooltip>\n      <Tooltip content=\"redo\">\n        <IconButton icon={<IconRedo />} disabled={tools.canRedo} onClick={() => tools.redo()} />\n      </Tooltip>\n      <span>{Math.floor(zoom * 100)}%</span>\n    </Space>\n  );\n};\n"],"mappings":"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","names":["React","React","React","React","React","styled","UIDragNodeContainer","styled","React","UIDragNodeContainer","React","FlowNodeTransformData","styled","FlowNodeTransformData","nextNodeBounds","LineDom","React","React","Playground","FlowNodeRenderData","FlowNodeTransformData","styled","FlowNodeRenderData","FlowNodeTransformData","React","Playground","React","FlowNodeRenderData","FlowNodeTransformData","usePlayground","styled","Container","FlowNodeRenderData","usePlayground","FlowNodeTransformData","React","Container","React","useState","nanoid","FlowNodeTransformData","usePlayground","useService","FlowOperationService","React","React","nanoid","React","nanoid","styled","styled","React","styled","IconPlus","useState","usePlayground","useService","FlowOperationService","nanoid","FlowNodeTransformData","React","IconPlus","React"]}

package/dist/index.d.mts

@@ -5,7 +5,7 @@ declare function Ellipse(): React.JSX.Element;
 
 declare function TryCatchCollapse(props: CustomLabelProps): JSX.Element;
 
-declare function DraggingAdder(): JSX.Element;
+declare function DraggingAdder(props: any): JSX.Element;
 
 interface PropsType$1 {
     dragStart: FlowNodeEntity;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ declare function Ellipse(): React.JSX.Element;
 
 declare function TryCatchCollapse(props: CustomLabelProps): JSX.Element;
 
-declare function DraggingAdder(): JSX.Element;
+declare function DraggingAdder(props: any): JSX.Element;
 
 interface PropsType$1 {
     dragStart: FlowNodeEntity;

package/dist/index.js

@@ -36,7 +36,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/index.tsx
-var import_fixed_layout_editor6 = require("@flowgram.ai/fixed-layout-editor");
+var import_fixed_layout_editor7 = require("@flowgram.ai/fixed-layout-editor");
 
 // src/assets/ellipsis.tsx
 var import_react = __toESM(require("react"));
@@ -300,6 +300,7 @@ function TryCatchCollapse(props) {
     /* @__PURE__ */ import_react3.default.createElement(
       "div",
       {
+        "data-label-id": props.labelId,
         style: {
           fontSize: 12,
           color: hoverActivated ? baseActivatedColor : baseColor,
@@ -318,6 +319,7 @@ 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"));
@@ -330,7 +332,17 @@ var UIDragNodeContainer = import_styled_components.default.div`
 `;
 
 // src/components/dragging-adder/index.tsx
-function DraggingAdder() {
+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);
 }
 
@@ -398,7 +410,7 @@ 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_fixed_layout_editor3 = require("@flowgram.ai/fixed-layout-editor");
 
 // src/components/drag-highlight-adder/styles.tsx
 var import_styled_components3 = __toESM(require("styled-components"));
@@ -423,17 +435,17 @@ var getMinSize = (preWidth, nextWidth) => {
   return (0, import_lodash.min)([preWidth, nextWidth]) || 0;
 };
 function DragHighlightAdder({ node }) {
-  const transformBounds = node.getData(import_fixed_layout_editor2.FlowNodeTransformData)?.bounds;
+  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_editor2.FlowNodeTransformData)?.bounds?.width;
+    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_editor2.FlowNodeTransformData)?.bounds?.height;
+  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));
@@ -441,7 +453,7 @@ function DragHighlightAdder({ node }) {
 
 // src/components/collapse/index.tsx
 var import_react7 = __toESM(require("react"));
-var import_fixed_layout_editor3 = require("@flowgram.ai/fixed-layout-editor");
+var import_fixed_layout_editor4 = require("@flowgram.ai/fixed-layout-editor");
 
 // src/components/collapse/styles.tsx
 var import_styled_components4 = __toESM(require("styled-components"));
@@ -462,15 +474,15 @@ var Container = import_styled_components4.default.div`
 // 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);
+  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_editor3.Playground.getLatest()?.scrollToView({
-        position: activateNode?.getData(import_fixed_layout_editor3.FlowNodeTransformData)?.outputPoint,
+      import_fixed_layout_editor4.Playground.getLatest()?.scrollToView({
+        position: activateNode?.getData(import_fixed_layout_editor4.FlowNodeTransformData)?.outputPoint,
         scrollToCenter: true
       });
     }, 100);
@@ -509,7 +521,7 @@ 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_fixed_layout_editor5 = require("@flowgram.ai/fixed-layout-editor");
 var import_semi_icons2 = require("@douyinfe/semi-icons");
 
 // src/components/branch-adder/styles.tsx
@@ -540,15 +552,15 @@ 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_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_editor4.FlowNodeTransformData).bounds,
+        bounds: block.getData(import_fixed_layout_editor5.FlowNodeTransformData).bounds,
         scrollToCenter: true
       });
     }, 10);
@@ -579,7 +591,7 @@ function BranchAdder(props) {
 // 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_fixed_layout_editor6 = require("@flowgram.ai/fixed-layout-editor");
 var import_semi_ui = require("@douyinfe/semi-ui");
 
 // src/components/nodes/index.tsx
@@ -725,8 +737,8 @@ var IconPlus2 = (0, import_styled_components7.default)(import_semi_icons3.IconPl
 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 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),
@@ -735,7 +747,7 @@ function Adder(props) {
     });
     setTimeout(() => {
       playground.scrollToView({
-        bounds: block.getData(import_fixed_layout_editor5.FlowNodeTransformData).bounds,
+        bounds: block.getData(import_fixed_layout_editor6.FlowNodeTransformData).bounds,
         scrollToCenter: true
       });
     }, 10);
@@ -769,23 +781,23 @@ function Adder(props) {
 
 // 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_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_editor7 = require("@flowgram.ai/fixed-layout-editor");
+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_editor7.usePlaygroundTools)();
+  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), "%"));
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/index.tsx","../src/assets/ellipsis.tsx","../src/assets/icons.tsx","../src/components/try-catch-collapse.tsx","../src/components/dragging-adder/index.tsx","../src/components/dragging-adder/styles.tsx","../src/components/drag-node/index.tsx","../src/components/drag-node/styles.tsx","../src/components/constants.tsx","../src/components/drag-highlight-adder/index.tsx","../src/components/drag-highlight-adder/styles.tsx","../src/components/collapse/index.tsx","../src/components/collapse/styles.tsx","../src/components/branch-adder/index.tsx","../src/components/branch-adder/styles.tsx","../src/components/adder/index.tsx","../src/components/nodes/index.tsx","../src/components/metadata.tsx","../src/components/nodes/styles.tsx","../src/components/adder/styles.tsx","../src/components/tools.tsx"],"sourcesContent":["export { defaultFixedSemiMaterials } from './components';\nexport { PlaygroundTools } from './components/tools';\n","import { FlowRendererKey } from '@flowgram.ai/fixed-layout-editor';\n\nimport { Ellipse } from '../assets';\nimport TryCatchCollapse from './try-catch-collapse';\nimport DraggingAdder from './dragging-adder';\nimport DragNode from './drag-node';\nimport DragHighlightAdder from './drag-highlight-adder';\nimport Collapse from './collapse';\nimport BranchAdder from './branch-adder';\nimport Adder from './adder';\n\nexport const defaultFixedSemiMaterials = {\n  [FlowRendererKey.ADDER]: Adder,\n  [FlowRendererKey.COLLAPSE]: Collapse,\n  [FlowRendererKey.TRY_CATCH_COLLAPSE]: TryCatchCollapse,\n  [FlowRendererKey.BRANCH_ADDER]: BranchAdder,\n  [FlowRendererKey.DRAG_NODE]: DragNode,\n  [FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,\n  [FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,\n  [FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse,\n};\n","import React from 'react';\n\nexport function Ellipse() {\n  return (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle id=\"Ellipse 465\" cx=\"4\" cy=\"4\" r=\"3\" fill=\"white\" stroke=\"#3370FF\" strokeWidth=\"2\" />\n    </svg>\n  );\n}\n","import React from 'react';\n\nexport function IconStyleBorder(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeMiterlimit=\"1.5\"\n        strokeWidth=\"1.499\"\n      >\n        <path\n          strokeDasharray=\"2 2\"\n          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\"\n        />\n        <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\" />\n      </g>\n    </svg>\n  );\n}\n\nexport function IconParkRightBranch(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 48 48\" {...props}>\n      <g fill=\"none\">\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M22 8.01176C20.5 8.01193 16.0714 7.93811 15 13.0005C13.917 18.1177 9.85714 22.8477 8 24\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M22 40C20.5 40.0003 16.0714 40.0628 15 35.0005C13.917 29.8833 9.85714 25.1522 8 23.9999\"\n        />\n        <circle cx=\"8\" cy=\"24\" r=\"4\" fill=\"currentColor\" />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M8 24L22 24\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 24.001H42\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 8.00098H42\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 40.001H42\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nexport function PhCircleBold(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 256 256\" {...props}>\n      <path\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function BiCloud(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" {...props}>\n      <path\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function BiBootstrapReboot(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 16 16\"\n      {...props}\n    >\n      <g fill=\"currentColor\">\n        <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\" />\n        <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\" />\n      </g>\n    </svg>\n  );\n}\n\nexport function FeAlignCenter(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"#888888\"\n        fillRule=\"evenodd\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function Arrow({ color, circleColor }: { color: string; circleColor: string }) {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"8\" cy=\"8\" r=\"7\" fill={circleColor} />\n      <path\n        fill={color}\n        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\"\n      />\n      <path\n        fill={color}\n        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\"\n      />\n    </svg>\n  );\n}\n","import React, { useState } from 'react';\n\nimport {\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  type CustomLabelProps,\n  Playground,\n  useBaseColor,\n  FlowTextKey,\n  FlowRendererRegistry,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { IconChevronLeft } from '@douyinfe/semi-icons';\n\nfunction TryCatchCollapse(props: CustomLabelProps): JSX.Element {\n  const { node } = props;\n  const { baseColor, baseActivatedColor } = useBaseColor();\n\n  const activateData = node.getData(FlowNodeRenderData)!;\n  const transform = node.getData(FlowNodeTransformData)!;\n\n  const [hoverActivated, setHoverActivated] = useState(false);\n\n  if (!transform || !transform.parent) {\n    return <></>;\n  }\n\n  // hotzone width & height\n  const width = transform.inputPoint.x - transform.parent.inputPoint.x;\n  const height = 40;\n\n  const scrollToActivateNode = () => {\n    setTimeout(() => {\n      Playground.getLatest()?.scrollToView({\n        position: node?.getData(FlowNodeTransformData)?.inputPoint,\n        scrollToCenter: true,\n      });\n    }, 100);\n  };\n\n  const collapseBlock = () => {\n    transform.collapsed = true;\n    activateData.activated = false;\n    scrollToActivateNode();\n  };\n\n  const openBlock = () => {\n    transform.collapsed = false;\n    scrollToActivateNode();\n  };\n\n  const handleMouseEnter = () => {\n    setHoverActivated(true);\n    activateData.activated = true;\n  };\n\n  const handleMouseLeave = () => {\n    setHoverActivated(false);\n    activateData.activated = false;\n  };\n\n  const renderCollapse = () => {\n    // Expand\n    if (transform.collapsed) {\n      const childCount = node.allCollapsedChildren.filter(\n        (child) => !child.hidden && child !== node\n      ).length;\n\n      return (\n        <div\n          onClick={openBlock}\n          style={{\n            width: 16,\n            height: 16,\n            fontSize: 10,\n            borderRadius: 9,\n            display: 'flex',\n            color: '#fff',\n            cursor: 'pointer',\n            justifyContent: 'center',\n            alignItems: 'center',\n            background: hoverActivated ? baseActivatedColor : baseColor,\n          }}\n          aria-hidden=\"true\"\n        >\n          {childCount}\n        </div>\n      );\n    }\n\n    // Collapse\n    if (hoverActivated) {\n      return (\n        <div\n          onClick={collapseBlock}\n          style={{\n            width: 16,\n            height: 16,\n            fontSize: 10,\n            borderRadius: 9,\n            display: 'flex',\n            color: '#fff',\n            cursor: 'pointer',\n            justifyContent: 'center',\n            alignItems: 'center',\n            background: baseActivatedColor,\n          }}\n          aria-hidden=\"true\"\n        >\n          <IconChevronLeft />\n        </div>\n      );\n    }\n\n    return <></>;\n  };\n\n  // Collapse\n  return (\n    <div\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{\n        width,\n        height,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 6,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 12,\n          color: hoverActivated ? baseActivatedColor : baseColor,\n          textAlign: 'center',\n          whiteSpace: 'nowrap',\n          backgroundColor: 'var(--g-editor-background)',\n          lineHeight: '20px',\n        }}\n      >\n        {node.getService(FlowRendererRegistry).getText(FlowTextKey.CATCH_TEXT)}\n      </div>\n\n      {renderCollapse()}\n    </div>\n  );\n}\n\nexport default TryCatchCollapse;\n","import React from 'react';\n\nimport { UIDragNodeContainer } from './styles';\n\nexport default function DraggingAdder(): JSX.Element {\n  return <UIDragNodeContainer />;\n}\n","import styled from 'styled-components';\n\nexport const UIDragNodeContainer = styled.div`\n  width: 16px;\n  height: 16px;\n  border-radius: 100px;\n  background-color: white;\n  border: 1px dashed #b8bcc1;\n`;\n","import React from 'react';\n\nimport type { FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';\n\nimport { UIDragNodeContainer, UIDragCounts } from './styles';\n\nexport interface PropsType {\n  dragStart: FlowNodeEntity;\n  dragNodes: FlowNodeEntity[];\n}\n\nexport default function DragNode(props: PropsType): JSX.Element {\n  const { dragStart, dragNodes } = props;\n\n  const dragLength = (dragNodes || [])\n    .map((_node) =>\n      _node.allCollapsedChildren.length\n        ? _node.allCollapsedChildren.filter((_n) => !_n.hidden).length\n        : 1\n    )\n    .reduce((acm, curr) => acm + curr, 0);\n\n  return (\n    <UIDragNodeContainer>\n      {dragStart?.id}\n      {dragLength > 1 && (\n        <>\n          <UIDragCounts>{dragLength}</UIDragCounts>\n          <UIDragNodeContainer\n            style={{\n              position: 'absolute',\n              top: 5,\n              right: -5,\n              left: 5,\n              bottom: -5,\n              opacity: 0.5,\n            }}\n          />\n        </>\n      )}\n    </UIDragNodeContainer>\n  );\n}\n","import styled from 'styled-components';\n\nimport { primary, primaryOpacity09 } from '../constants';\n\nexport const UIDragNodeContainer = styled.div`\n  position: relative;\n  height: 32px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 19px;\n  border: 1px solid ${primary};\n  padding: 0 15px;\n  &:hover: {\n    background-color: ${primaryOpacity09};\n    color: ${primary};\n  }\n`;\n\nexport const UIDragCounts = styled.div`\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  text-align: center;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #fff;\n  background-color: ${primary};\n`;\n","export const primary = 'hsl(252 62% 54.9%)';\nexport const primaryOpacity09 = 'hsl(252deg 62% 55% / 9%)';\n","import React from 'react';\n\nimport { min } from 'lodash';\nimport { type FlowNodeEntity, FlowNodeTransformData } from '@flowgram.ai/fixed-layout-editor';\n\nimport { Ellipse } from '../../assets';\nimport { UILineContainer, UILine } from './styles';\n\nconst getMinSize = (preWidth: number, nextWidth: number): number => {\n  if (!preWidth || preWidth < 0) {\n    return 0;\n  }\n  if (!nextWidth || nextWidth < 0) {\n    return preWidth;\n  }\n  return min([preWidth, nextWidth]) || 0;\n};\n\nexport default function DragHighlightAdder({ node }: { node: FlowNodeEntity }): JSX.Element {\n  const transformBounds = node.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds;\n  const { isVertical } = node;\n  if (isVertical) {\n    const preWidth = (transformBounds?.width || 0) - 16;\n    const nextNodeBounds =\n      node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.width;\n    const nextWidth = (nextNodeBounds || 0) - 16;\n    const LineDom = UILine(getMinSize(preWidth, nextWidth), 2);\n    return (\n      <UILineContainer>\n        <Ellipse />\n        <LineDom />\n        <Ellipse />\n      </UILineContainer>\n    );\n  }\n  const preHeight = (transformBounds?.height || 0) - 16;\n  const nextNodeBounds =\n    node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.height;\n  const nextHeight = (nextNodeBounds || 0) - 16;\n  const LineDom = UILine(2, getMinSize(preHeight, nextHeight));\n  return (\n    <UILineContainer style={{ flexDirection: 'column' }}>\n      <Ellipse />\n      <LineDom />\n      <Ellipse />\n    </UILineContainer>\n  );\n}\n","import styled from 'styled-components';\n\nexport const UILineContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const UILine = (width: number, height: number) =>\n  styled.div`\n    width: ${width}px;\n    height: ${height}px;\n    background: #3370ff;\n  `;\n","import React from 'react';\n\nimport {\n  Playground,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  type CollapseProps,\n} from '@flowgram.ai/fixed-layout-editor';\n\nimport { Arrow } from '../../assets';\nimport { Container } from './styles';\n\nfunction Collapse(props: CollapseProps): JSX.Element {\n  const { collapseNode, activateNode, hoverActivated } = props;\n\n  const activateData = activateNode?.getData(FlowNodeRenderData);\n  const transform = collapseNode.getData(FlowNodeTransformData)!;\n\n  if (!transform) {\n    return <></>;\n  }\n\n  const scrollToActivateNode = () => {\n    setTimeout(() => {\n      Playground.getLatest()?.scrollToView({\n        position: activateNode?.getData(FlowNodeTransformData)?.outputPoint,\n        scrollToCenter: true,\n      });\n    }, 100);\n  };\n\n  const collapseBlock = () => {\n    transform.collapsed = true;\n    activateData?.toggleMouseLeave();\n\n    scrollToActivateNode();\n  };\n\n  const openBlock = () => {\n    transform.collapsed = false;\n\n    scrollToActivateNode();\n  };\n\n  // expand\n  if (transform.collapsed) {\n    const childCount = collapseNode.allCollapsedChildren.filter(\n      (child) => !child.hidden && child !== activateNode\n    ).length;\n\n    return (\n      <Container onClick={openBlock} hoverActivated={hoverActivated} aria-hidden=\"true\">\n        {childCount}\n      </Container>\n    );\n  }\n\n  // dark: var(--semi-color-black)\n  // light: var(--semi-color-white)\n  const circleColor = 'var(--semi-color-white)';\n  const color = hoverActivated ? '#82A7FC' : '#BBBFC4';\n\n  // collapse\n  return (\n    <Container\n      onClick={collapseBlock}\n      hoverActivated={hoverActivated}\n      isVertical={activateNode?.isVertical}\n      isCollapse={true}\n      aria-hidden=\"true\"\n    >\n      <Arrow color={color} circleColor={circleColor} />\n    </Container>\n  );\n}\n\nexport default Collapse;\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{\n  hoverActivated?: boolean;\n  isVertical?: boolean;\n  isCollapse?: boolean;\n}>`\n  width: 16px;\n  height: 16px;\n  font-size: 10px;\n  border-radius: 9px;\n  display: flex;\n  color: #fff;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n  background: ${(props) => (props.hoverActivated ? '#82A7FC' : '#BBBFC4')};\n  transform: ${(props) => (!props.isVertical && props.isCollapse ? 'rotate(-90deg)' : '')};\n`;\n","import React from 'react';\n\nimport { nanoid } from 'nanoid';\nimport {\n  type FlowNodeEntity,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  FlowOperationService,\n  usePlayground,\n  useService,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { IconPlus } from '@douyinfe/semi-icons';\n\nimport { Container } from './styles';\n\ninterface PropsType {\n  activated?: boolean;\n  node: FlowNodeEntity;\n}\n\nexport default function BranchAdder(props: PropsType) {\n  const { activated, node } = props;\n  const nodeData = node.firstChild?.getData<FlowNodeRenderData>(FlowNodeRenderData);\n  const playground = usePlayground();\n  const flowOperationService = useService(FlowOperationService) as FlowOperationService;\n  const { isVertical } = node;\n\n  function addBranch() {\n    const block = flowOperationService.addBlock(node, { id: nanoid(5) });\n\n    setTimeout(() => {\n      playground.scrollToView({\n        bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,\n        scrollToCenter: true,\n      });\n    }, 10);\n  }\n  if (playground.config.readonlyOrDisabled) return null;\n\n  return (\n    <Container\n      isVertical={isVertical}\n      activated={activated || nodeData?.hovered}\n      onMouseEnter={() => nodeData?.toggleMouseEnter()}\n      onMouseLeave={() => nodeData?.toggleMouseLeave()}\n    >\n      <div\n        onClick={() => {\n          addBranch();\n        }}\n        aria-hidden=\"true\"\n        style={{ flexGrow: 1, textAlign: 'center', cursor: 'pointer' }}\n      >\n        <IconPlus />\n      </div>\n    </Container>\n  );\n}\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{ activated?: boolean; isVertical: boolean }>`\n  width: 28px;\n  height: 18px;\n  background: ${(props) => (props.activated ? '#82A7FC' : 'rgb(187, 191, 196)')};\n  display: flex;\n  border-radius: 9px;\n  justify-content: space-evenly;\n  align-items: center;\n  color: #fff;\n  font-size: 10px;\n  font-weight: bold;\n  transform: ${(props) => (props.isVertical ? '' : 'rotate(90deg)')};\n  div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  }\n`;\n","import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport {\n  type FlowNodeEntity,\n  FlowNodeTransformData,\n  usePlayground,\n  useService,\n  FlowOperationService,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { Popover } from '@douyinfe/semi-ui';\n\nimport Nodes from '../nodes';\nimport { AdderWrap, IconPlus } from './styles';\n\nexport default function Adder(props: {\n  from: FlowNodeEntity;\n  to?: FlowNodeEntity;\n  hoverActivated: boolean;\n}) {\n  const { from } = props;\n  const [visible, setVisible] = useState(false);\n  const playground = usePlayground();\n  const flowOperationService = useService(FlowOperationService) as FlowOperationService;\n\n  const add = (addProps: any) => {\n    const block = flowOperationService.addFromNode(from, {\n      id: addProps.type + nanoid(5),\n      type: addProps.type,\n      blocks: addProps.blocks ? addProps.blocks() : undefined,\n    });\n    setTimeout(() => {\n      playground.scrollToView({\n        bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,\n        scrollToCenter: true,\n      });\n    }, 10);\n  };\n\n  if (playground.config.readonlyOrDisabled) return null;\n\n  return (\n    <Popover\n      visible={visible}\n      onVisibleChange={setVisible}\n      content={<Nodes onSelect={add} />}\n      placement=\"right\"\n      trigger=\"click\"\n      overlayStyle={{\n        padding: 0,\n      }}\n    >\n      <AdderWrap\n        hovered={props.hoverActivated}\n        onMouseDown={(e) => e.stopPropagation()}\n        onClick={() => {\n          setVisible(true);\n        }}\n      >\n        {props.hoverActivated ? <IconPlus /> : null}\n      </AdderWrap>\n    </Popover>\n  );\n}\n","import React from 'react';\n\nimport metadata from '../metadata';\nimport { NodeWrap, NodeLabel, NodesWrap } from './styles';\n\nfunction Node(props: { label: string; icon: JSX.Element; onClick: () => void }) {\n  return (\n    <NodeWrap onClick={props.onClick}>\n      <div style={{ fontSize: 14 }}>{props.icon}</div>\n      <NodeLabel>{props.label}</NodeLabel>\n    </NodeWrap>\n  );\n}\n\nconst addings = metadata.nodes.filter((node) => node.type !== 'start');\n\nexport default function Nodes(props: { onSelect: (meta: any) => void }) {\n  return (\n    <NodesWrap style={{ width: 80 * 2 + 20 }}>\n      {addings.map((n, i) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <Node key={i} icon={n.icon} label={n.label} onClick={() => props.onSelect?.(n)} />\n      ))}\n    </NodesWrap>\n  );\n}\n","import React from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport {\n  BiBootstrapReboot,\n  BiCloud,\n  FeAlignCenter,\n  IconStyleBorder,\n  IconParkRightBranch,\n  PhCircleBold,\n} from '../assets';\n\nconst metadata = {\n  nodes: [\n    {\n      type: 'start',\n      label: 'Start',\n      icon: <IconStyleBorder />,\n    },\n    {\n      type: 'dynamicSplit',\n      label: 'Split Branch',\n      icon: <IconParkRightBranch />,\n      blocks() {\n        return [\n          {\n            id: nanoid(5),\n          },\n          {\n            id: nanoid(5),\n          },\n        ];\n      },\n    },\n    {\n      type: 'end',\n      label: 'Branch End',\n      icon: <FeAlignCenter />,\n      branchEnd: true,\n    },\n    {\n      type: 'loop',\n      schemaType: 'loop',\n      label: 'Loop',\n      icon: <BiBootstrapReboot />,\n    },\n    {\n      type: 'tryCatch',\n      schemaType: 'tryCatch',\n      label: 'TryCatch',\n      icon: <IconParkRightBranch />,\n      blocks() {\n        return [\n          {\n            id: `try_${nanoid(5)}`, // try branch\n          },\n          {\n            id: `catch_${nanoid(5)}`, // catch branch 1\n          },\n          {\n            id: `catch_${nanoid(5)}`, // catch branch 2\n          },\n        ];\n      },\n    },\n    {\n      type: 'noop',\n      label: 'Noop Node',\n      icon: <BiCloud />,\n    },\n    {\n      type: 'end',\n      label: 'End',\n      icon: <PhCircleBold />,\n    },\n  ],\n  find: function find(type: any) {\n    return metadata.nodes.find((m) => m.type === type);\n  },\n};\n\nexport default metadata;\n","import styled from 'styled-components';\n\nimport { primary, primaryOpacity09 } from '../constants';\n\nexport const NodeWrap = styled.div`\n  width: 100%;\n  height: 32px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 19px;\n  padding: 0 15px;\n  &:hover: {\n    background-color: ${primaryOpacity09};\n    color: ${primary};\n  },\n`;\n\nexport const NodeLabel = styled.div`\n  font-size: 12px;\n  margin-left: 10px;\n`;\n\nexport const NodesWrap = styled.div`\n  max-height: 500px;\n  overflow: auto;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n","import styled from 'styled-components';\nimport { IconPlusCircle } from '@douyinfe/semi-icons';\n\nexport const AdderWrap = styled.div<{ hovered?: boolean }>`\n  width: ${(props) => (props.hovered ? 15 : 6)}px;\n  height: ${(props) => (props.hovered ? 15 : 6)}px;\n  background-color: rgb(143, 149, 158);\n  color: #fff;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n`;\n\nexport const IconPlus = styled(IconPlusCircle)`\n  color: #3370ff;\n  background-color: #fff;\n  border-radius: 15px;\n`;\n","import React from 'react';\n\nimport { usePlaygroundTools } from '@flowgram.ai/fixed-layout-editor';\nimport { Checkbox, IconButton, Space, Tooltip } from '@douyinfe/semi-ui';\nimport { IconUndo, IconRedo, IconShrink, IconExpand, IconGridView } from '@douyinfe/semi-icons';\n\nexport const PlaygroundTools = ({ layoutText }: { layoutText?: string }) => {\n  const tools = usePlaygroundTools();\n  const { zoom } = tools;\n\n  return (\n    <Space>\n      <Checkbox onChange={() => tools.changeLayout()} checked={!tools.isVertical}>\n        {layoutText || 'isHorizontal'}\n      </Checkbox>\n      <Tooltip content=\"fit view\">\n        <IconButton icon={<IconGridView />} onClick={() => tools.fitView()} />\n      </Tooltip>\n      <Tooltip content=\"zoom out\">\n        <IconButton icon={<IconShrink />} onClick={() => tools.zoomout()} />\n      </Tooltip>\n      <Tooltip content=\"zoom in\">\n        <IconButton icon={<IconExpand />} onClick={() => tools.zoomin()} />\n      </Tooltip>\n      <Tooltip content=\"undo\">\n        <IconButton icon={<IconUndo />} disabled={tools.canUndo} onClick={() => tools.undo()} />\n      </Tooltip>\n      <Tooltip content=\"redo\">\n        <IconButton icon={<IconRedo />} disabled={tools.canRedo} onClick={() => tools.redo()} />\n      </Tooltip>\n      <span>{Math.floor(zoom * 100)}%</span>\n    </Space>\n  );\n};\n"],"mappings":"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","names":["import_fixed_layout_editor","React","import_react","React","import_react","React","import_react","styled","React","import_react","import_styled_components","UIDragNodeContainer","styled","React","UIDragNodeContainer","import_react","import_fixed_layout_editor","import_styled_components","styled","nextNodeBounds","LineDom","React","import_react","import_fixed_layout_editor","import_styled_components","styled","React","import_react","import_fixed_layout_editor","import_semi_icons","import_styled_components","Container","styled","React","Container","import_react","import_nanoid","import_fixed_layout_editor","import_react","import_react","import_nanoid","React","import_styled_components","styled","React","import_styled_components","import_semi_icons","styled","IconPlus","React","IconPlus","import_react","import_fixed_layout_editor","import_semi_ui","import_semi_icons","React"]}
+{"version":3,"sources":["../src/index.ts","../src/components/index.tsx","../src/assets/ellipsis.tsx","../src/assets/icons.tsx","../src/components/try-catch-collapse.tsx","../src/components/dragging-adder/index.tsx","../src/components/dragging-adder/styles.tsx","../src/components/drag-node/index.tsx","../src/components/drag-node/styles.tsx","../src/components/constants.tsx","../src/components/drag-highlight-adder/index.tsx","../src/components/drag-highlight-adder/styles.tsx","../src/components/collapse/index.tsx","../src/components/collapse/styles.tsx","../src/components/branch-adder/index.tsx","../src/components/branch-adder/styles.tsx","../src/components/adder/index.tsx","../src/components/nodes/index.tsx","../src/components/metadata.tsx","../src/components/nodes/styles.tsx","../src/components/adder/styles.tsx","../src/components/tools.tsx"],"sourcesContent":["export { defaultFixedSemiMaterials } from './components';\nexport { PlaygroundTools } from './components/tools';\n","import { FlowRendererKey } from '@flowgram.ai/fixed-layout-editor';\n\nimport { Ellipse } from '../assets';\nimport TryCatchCollapse from './try-catch-collapse';\nimport DraggingAdder from './dragging-adder';\nimport DragNode from './drag-node';\nimport DragHighlightAdder from './drag-highlight-adder';\nimport Collapse from './collapse';\nimport BranchAdder from './branch-adder';\nimport Adder from './adder';\n\nexport const defaultFixedSemiMaterials = {\n  [FlowRendererKey.ADDER]: Adder,\n  [FlowRendererKey.COLLAPSE]: Collapse,\n  [FlowRendererKey.TRY_CATCH_COLLAPSE]: TryCatchCollapse,\n  [FlowRendererKey.BRANCH_ADDER]: BranchAdder,\n  [FlowRendererKey.DRAG_NODE]: DragNode,\n  [FlowRendererKey.DRAGGABLE_ADDER]: DraggingAdder,\n  [FlowRendererKey.DRAG_HIGHLIGHT_ADDER]: DragHighlightAdder,\n  [FlowRendererKey.DRAG_BRANCH_HIGHLIGHT_ADDER]: Ellipse,\n};\n","import React from 'react';\n\nexport function Ellipse() {\n  return (\n    <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle id=\"Ellipse 465\" cx=\"4\" cy=\"4\" r=\"3\" fill=\"white\" stroke=\"#3370FF\" strokeWidth=\"2\" />\n    </svg>\n  );\n}\n","import React from 'react';\n\nexport function IconStyleBorder(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeMiterlimit=\"1.5\"\n        strokeWidth=\"1.499\"\n      >\n        <path\n          strokeDasharray=\"2 2\"\n          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\"\n        />\n        <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\" />\n      </g>\n    </svg>\n  );\n}\n\nexport function IconParkRightBranch(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 48 48\" {...props}>\n      <g fill=\"none\">\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M22 8.01176C20.5 8.01193 16.0714 7.93811 15 13.0005C13.917 18.1177 9.85714 22.8477 8 24\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M22 40C20.5 40.0003 16.0714 40.0628 15 35.0005C13.917 29.8833 9.85714 25.1522 8 23.9999\"\n        />\n        <circle cx=\"8\" cy=\"24\" r=\"4\" fill=\"currentColor\" />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M8 24L22 24\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 24.001H42\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 8.00098H42\"\n        />\n        <path\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"4\"\n          d=\"M30 40.001H42\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nexport function PhCircleBold(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 256 256\" {...props}>\n      <path\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function BiCloud(props: any) {\n  return (\n    <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\" {...props}>\n      <path\n        fill=\"currentColor\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function BiBootstrapReboot(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 16 16\"\n      {...props}\n    >\n      <g fill=\"currentColor\">\n        <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\" />\n        <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\" />\n      </g>\n    </svg>\n  );\n}\n\nexport function FeAlignCenter(props: any) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      width=\"1em\"\n      height=\"1em\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"#888888\"\n        fillRule=\"evenodd\"\n        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\"\n      />\n    </svg>\n  );\n}\n\nexport function Arrow({ color, circleColor }: { color: string; circleColor: string }) {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"8\" cy=\"8\" r=\"7\" fill={circleColor} />\n      <path\n        fill={color}\n        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\"\n      />\n      <path\n        fill={color}\n        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\"\n      />\n    </svg>\n  );\n}\n","import React, { useState } from 'react';\n\nimport {\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  type CustomLabelProps,\n  Playground,\n  useBaseColor,\n  FlowTextKey,\n  FlowRendererRegistry,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { IconChevronLeft } from '@douyinfe/semi-icons';\n\nfunction TryCatchCollapse(props: CustomLabelProps): JSX.Element {\n  const { node } = props;\n  const { baseColor, baseActivatedColor } = useBaseColor();\n\n  const activateData = node.getData(FlowNodeRenderData)!;\n  const transform = node.getData(FlowNodeTransformData)!;\n\n  const [hoverActivated, setHoverActivated] = useState(false);\n\n  if (!transform || !transform.parent) {\n    return <></>;\n  }\n\n  // hotzone width & height\n  const width = transform.inputPoint.x - transform.parent.inputPoint.x;\n  const height = 40;\n\n  const scrollToActivateNode = () => {\n    setTimeout(() => {\n      Playground.getLatest()?.scrollToView({\n        position: node?.getData(FlowNodeTransformData)?.inputPoint,\n        scrollToCenter: true,\n      });\n    }, 100);\n  };\n\n  const collapseBlock = () => {\n    transform.collapsed = true;\n    activateData.activated = false;\n    scrollToActivateNode();\n  };\n\n  const openBlock = () => {\n    transform.collapsed = false;\n    scrollToActivateNode();\n  };\n\n  const handleMouseEnter = () => {\n    setHoverActivated(true);\n    activateData.activated = true;\n  };\n\n  const handleMouseLeave = () => {\n    setHoverActivated(false);\n    activateData.activated = false;\n  };\n\n  const renderCollapse = () => {\n    // Expand\n    if (transform.collapsed) {\n      const childCount = node.allCollapsedChildren.filter(\n        (child) => !child.hidden && child !== node\n      ).length;\n\n      return (\n        <div\n          onClick={openBlock}\n          style={{\n            width: 16,\n            height: 16,\n            fontSize: 10,\n            borderRadius: 9,\n            display: 'flex',\n            color: '#fff',\n            cursor: 'pointer',\n            justifyContent: 'center',\n            alignItems: 'center',\n            background: hoverActivated ? baseActivatedColor : baseColor,\n          }}\n          aria-hidden=\"true\"\n        >\n          {childCount}\n        </div>\n      );\n    }\n\n    // Collapse\n    if (hoverActivated) {\n      return (\n        <div\n          onClick={collapseBlock}\n          style={{\n            width: 16,\n            height: 16,\n            fontSize: 10,\n            borderRadius: 9,\n            display: 'flex',\n            color: '#fff',\n            cursor: 'pointer',\n            justifyContent: 'center',\n            alignItems: 'center',\n            background: baseActivatedColor,\n          }}\n          aria-hidden=\"true\"\n        >\n          <IconChevronLeft />\n        </div>\n      );\n    }\n\n    return <></>;\n  };\n\n  // Collapse\n  return (\n    <div\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{\n        width,\n        height,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 6,\n      }}\n    >\n      <div\n        data-label-id={props.labelId}\n        style={{\n          fontSize: 12,\n          color: hoverActivated ? baseActivatedColor : baseColor,\n          textAlign: 'center',\n          whiteSpace: 'nowrap',\n          backgroundColor: 'var(--g-editor-background)',\n          lineHeight: '20px',\n        }}\n      >\n        {node.getService(FlowRendererRegistry).getText(FlowTextKey.CATCH_TEXT)}\n      </div>\n\n      {renderCollapse()}\n    </div>\n  );\n}\n\nexport default TryCatchCollapse;\n","import React from 'react';\n\nimport { FlowDragLayer, usePlayground } from '@flowgram.ai/fixed-layout-editor';\n\nimport { UIDragNodeContainer } from './styles';\n\nexport default function DraggingAdder(props: any): JSX.Element {\n  const playground = usePlayground();\n  const layer = playground.getLayer(FlowDragLayer);\n  if (!layer) return <></>;\n  if (\n    layer.options.canDrop &&\n    !layer.options.canDrop({\n      dragNodes: layer.dragEntities || [],\n      dropNode: props.from,\n      isBranch: false,\n    })\n  ) {\n    return <></>;\n  }\n  return <UIDragNodeContainer />;\n}\n","import styled from 'styled-components';\n\nexport const UIDragNodeContainer = styled.div`\n  width: 16px;\n  height: 16px;\n  border-radius: 100px;\n  background-color: white;\n  border: 1px dashed #b8bcc1;\n`;\n","import React from 'react';\n\nimport type { FlowNodeEntity } from '@flowgram.ai/fixed-layout-editor';\n\nimport { UIDragNodeContainer, UIDragCounts } from './styles';\n\nexport interface PropsType {\n  dragStart: FlowNodeEntity;\n  dragNodes: FlowNodeEntity[];\n}\n\nexport default function DragNode(props: PropsType): JSX.Element {\n  const { dragStart, dragNodes } = props;\n\n  const dragLength = (dragNodes || [])\n    .map((_node) =>\n      _node.allCollapsedChildren.length\n        ? _node.allCollapsedChildren.filter((_n) => !_n.hidden).length\n        : 1\n    )\n    .reduce((acm, curr) => acm + curr, 0);\n\n  return (\n    <UIDragNodeContainer>\n      {dragStart?.id}\n      {dragLength > 1 && (\n        <>\n          <UIDragCounts>{dragLength}</UIDragCounts>\n          <UIDragNodeContainer\n            style={{\n              position: 'absolute',\n              top: 5,\n              right: -5,\n              left: 5,\n              bottom: -5,\n              opacity: 0.5,\n            }}\n          />\n        </>\n      )}\n    </UIDragNodeContainer>\n  );\n}\n","import styled from 'styled-components';\n\nimport { primary, primaryOpacity09 } from '../constants';\n\nexport const UIDragNodeContainer = styled.div`\n  position: relative;\n  height: 32px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 19px;\n  border: 1px solid ${primary};\n  padding: 0 15px;\n  &:hover: {\n    background-color: ${primaryOpacity09};\n    color: ${primary};\n  }\n`;\n\nexport const UIDragCounts = styled.div`\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  text-align: center;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  font-size: 12px;\n  color: #fff;\n  background-color: ${primary};\n`;\n","export const primary = 'hsl(252 62% 54.9%)';\nexport const primaryOpacity09 = 'hsl(252deg 62% 55% / 9%)';\n","import React from 'react';\n\nimport { min } from 'lodash';\nimport { type FlowNodeEntity, FlowNodeTransformData } from '@flowgram.ai/fixed-layout-editor';\n\nimport { Ellipse } from '../../assets';\nimport { UILineContainer, UILine } from './styles';\n\nconst getMinSize = (preWidth: number, nextWidth: number): number => {\n  if (!preWidth || preWidth < 0) {\n    return 0;\n  }\n  if (!nextWidth || nextWidth < 0) {\n    return preWidth;\n  }\n  return min([preWidth, nextWidth]) || 0;\n};\n\nexport default function DragHighlightAdder({ node }: { node: FlowNodeEntity }): JSX.Element {\n  const transformBounds = node.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds;\n  const { isVertical } = node;\n  if (isVertical) {\n    const preWidth = (transformBounds?.width || 0) - 16;\n    const nextNodeBounds =\n      node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.width;\n    const nextWidth = (nextNodeBounds || 0) - 16;\n    const LineDom = UILine(getMinSize(preWidth, nextWidth), 2);\n    return (\n      <UILineContainer>\n        <Ellipse />\n        <LineDom />\n        <Ellipse />\n      </UILineContainer>\n    );\n  }\n  const preHeight = (transformBounds?.height || 0) - 16;\n  const nextNodeBounds =\n    node?.next?.getData<FlowNodeTransformData>(FlowNodeTransformData)?.bounds?.height;\n  const nextHeight = (nextNodeBounds || 0) - 16;\n  const LineDom = UILine(2, getMinSize(preHeight, nextHeight));\n  return (\n    <UILineContainer style={{ flexDirection: 'column' }}>\n      <Ellipse />\n      <LineDom />\n      <Ellipse />\n    </UILineContainer>\n  );\n}\n","import styled from 'styled-components';\n\nexport const UILineContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const UILine = (width: number, height: number) =>\n  styled.div`\n    width: ${width}px;\n    height: ${height}px;\n    background: #3370ff;\n  `;\n","import React from 'react';\n\nimport {\n  Playground,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  type CollapseProps,\n} from '@flowgram.ai/fixed-layout-editor';\n\nimport { Arrow } from '../../assets';\nimport { Container } from './styles';\n\nfunction Collapse(props: CollapseProps): JSX.Element {\n  const { collapseNode, activateNode, hoverActivated } = props;\n\n  const activateData = activateNode?.getData(FlowNodeRenderData);\n  const transform = collapseNode.getData(FlowNodeTransformData)!;\n\n  if (!transform) {\n    return <></>;\n  }\n\n  const scrollToActivateNode = () => {\n    setTimeout(() => {\n      Playground.getLatest()?.scrollToView({\n        position: activateNode?.getData(FlowNodeTransformData)?.outputPoint,\n        scrollToCenter: true,\n      });\n    }, 100);\n  };\n\n  const collapseBlock = () => {\n    transform.collapsed = true;\n    activateData?.toggleMouseLeave();\n\n    scrollToActivateNode();\n  };\n\n  const openBlock = () => {\n    transform.collapsed = false;\n\n    scrollToActivateNode();\n  };\n\n  // expand\n  if (transform.collapsed) {\n    const childCount = collapseNode.allCollapsedChildren.filter(\n      (child) => !child.hidden && child !== activateNode\n    ).length;\n\n    return (\n      <Container onClick={openBlock} hoverActivated={hoverActivated} aria-hidden=\"true\">\n        {childCount}\n      </Container>\n    );\n  }\n\n  // dark: var(--semi-color-black)\n  // light: var(--semi-color-white)\n  const circleColor = 'var(--semi-color-white)';\n  const color = hoverActivated ? '#82A7FC' : '#BBBFC4';\n\n  // collapse\n  return (\n    <Container\n      onClick={collapseBlock}\n      hoverActivated={hoverActivated}\n      isVertical={activateNode?.isVertical}\n      isCollapse={true}\n      aria-hidden=\"true\"\n    >\n      <Arrow color={color} circleColor={circleColor} />\n    </Container>\n  );\n}\n\nexport default Collapse;\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{\n  hoverActivated?: boolean;\n  isVertical?: boolean;\n  isCollapse?: boolean;\n}>`\n  width: 16px;\n  height: 16px;\n  font-size: 10px;\n  border-radius: 9px;\n  display: flex;\n  color: #fff;\n  cursor: pointer;\n  justify-content: center;\n  align-items: center;\n  background: ${(props) => (props.hoverActivated ? '#82A7FC' : '#BBBFC4')};\n  transform: ${(props) => (!props.isVertical && props.isCollapse ? 'rotate(-90deg)' : '')};\n`;\n","import React from 'react';\n\nimport { nanoid } from 'nanoid';\nimport {\n  type FlowNodeEntity,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n  FlowOperationService,\n  usePlayground,\n  useService,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { IconPlus } from '@douyinfe/semi-icons';\n\nimport { Container } from './styles';\n\ninterface PropsType {\n  activated?: boolean;\n  node: FlowNodeEntity;\n}\n\nexport default function BranchAdder(props: PropsType) {\n  const { activated, node } = props;\n  const nodeData = node.firstChild?.getData<FlowNodeRenderData>(FlowNodeRenderData);\n  const playground = usePlayground();\n  const flowOperationService = useService(FlowOperationService) as FlowOperationService;\n  const { isVertical } = node;\n\n  function addBranch() {\n    const block = flowOperationService.addBlock(node, { id: nanoid(5) });\n\n    setTimeout(() => {\n      playground.scrollToView({\n        bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,\n        scrollToCenter: true,\n      });\n    }, 10);\n  }\n  if (playground.config.readonlyOrDisabled) return null;\n\n  return (\n    <Container\n      isVertical={isVertical}\n      activated={activated || nodeData?.hovered}\n      onMouseEnter={() => nodeData?.toggleMouseEnter()}\n      onMouseLeave={() => nodeData?.toggleMouseLeave()}\n    >\n      <div\n        onClick={() => {\n          addBranch();\n        }}\n        aria-hidden=\"true\"\n        style={{ flexGrow: 1, textAlign: 'center', cursor: 'pointer' }}\n      >\n        <IconPlus />\n      </div>\n    </Container>\n  );\n}\n","import styled from 'styled-components';\n\nexport const Container = styled.div<{ activated?: boolean; isVertical: boolean }>`\n  width: 28px;\n  height: 18px;\n  background: ${(props) => (props.activated ? '#82A7FC' : 'rgb(187, 191, 196)')};\n  display: flex;\n  border-radius: 9px;\n  justify-content: space-evenly;\n  align-items: center;\n  color: #fff;\n  font-size: 10px;\n  font-weight: bold;\n  transform: ${(props) => (props.isVertical ? '' : 'rotate(90deg)')};\n  div {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  }\n`;\n","import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport {\n  type FlowNodeEntity,\n  FlowNodeTransformData,\n  usePlayground,\n  useService,\n  FlowOperationService,\n} from '@flowgram.ai/fixed-layout-editor';\nimport { Popover } from '@douyinfe/semi-ui';\n\nimport Nodes from '../nodes';\nimport { AdderWrap, IconPlus } from './styles';\n\nexport default function Adder(props: {\n  from: FlowNodeEntity;\n  to?: FlowNodeEntity;\n  hoverActivated: boolean;\n}) {\n  const { from } = props;\n  const [visible, setVisible] = useState(false);\n  const playground = usePlayground();\n  const flowOperationService = useService(FlowOperationService) as FlowOperationService;\n\n  const add = (addProps: any) => {\n    const block = flowOperationService.addFromNode(from, {\n      id: addProps.type + nanoid(5),\n      type: addProps.type,\n      blocks: addProps.blocks ? addProps.blocks() : undefined,\n    });\n    setTimeout(() => {\n      playground.scrollToView({\n        bounds: block.getData<FlowNodeTransformData>(FlowNodeTransformData)!.bounds,\n        scrollToCenter: true,\n      });\n    }, 10);\n  };\n\n  if (playground.config.readonlyOrDisabled) return null;\n\n  return (\n    <Popover\n      visible={visible}\n      onVisibleChange={setVisible}\n      content={<Nodes onSelect={add} />}\n      placement=\"right\"\n      trigger=\"click\"\n      overlayStyle={{\n        padding: 0,\n      }}\n    >\n      <AdderWrap\n        hovered={props.hoverActivated}\n        onMouseDown={(e) => e.stopPropagation()}\n        onClick={() => {\n          setVisible(true);\n        }}\n      >\n        {props.hoverActivated ? <IconPlus /> : null}\n      </AdderWrap>\n    </Popover>\n  );\n}\n","import React from 'react';\n\nimport metadata from '../metadata';\nimport { NodeWrap, NodeLabel, NodesWrap } from './styles';\n\nfunction Node(props: { label: string; icon: JSX.Element; onClick: () => void }) {\n  return (\n    <NodeWrap onClick={props.onClick}>\n      <div style={{ fontSize: 14 }}>{props.icon}</div>\n      <NodeLabel>{props.label}</NodeLabel>\n    </NodeWrap>\n  );\n}\n\nconst addings = metadata.nodes.filter((node) => node.type !== 'start');\n\nexport default function Nodes(props: { onSelect: (meta: any) => void }) {\n  return (\n    <NodesWrap style={{ width: 80 * 2 + 20 }}>\n      {addings.map((n, i) => (\n        // eslint-disable-next-line react/no-array-index-key\n        <Node key={i} icon={n.icon} label={n.label} onClick={() => props.onSelect?.(n)} />\n      ))}\n    </NodesWrap>\n  );\n}\n","import React from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport {\n  BiBootstrapReboot,\n  BiCloud,\n  FeAlignCenter,\n  IconStyleBorder,\n  IconParkRightBranch,\n  PhCircleBold,\n} from '../assets';\n\nconst metadata = {\n  nodes: [\n    {\n      type: 'start',\n      label: 'Start',\n      icon: <IconStyleBorder />,\n    },\n    {\n      type: 'dynamicSplit',\n      label: 'Split Branch',\n      icon: <IconParkRightBranch />,\n      blocks() {\n        return [\n          {\n            id: nanoid(5),\n          },\n          {\n            id: nanoid(5),\n          },\n        ];\n      },\n    },\n    {\n      type: 'end',\n      label: 'Branch End',\n      icon: <FeAlignCenter />,\n      branchEnd: true,\n    },\n    {\n      type: 'loop',\n      schemaType: 'loop',\n      label: 'Loop',\n      icon: <BiBootstrapReboot />,\n    },\n    {\n      type: 'tryCatch',\n      schemaType: 'tryCatch',\n      label: 'TryCatch',\n      icon: <IconParkRightBranch />,\n      blocks() {\n        return [\n          {\n            id: `try_${nanoid(5)}`, // try branch\n          },\n          {\n            id: `catch_${nanoid(5)}`, // catch branch 1\n          },\n          {\n            id: `catch_${nanoid(5)}`, // catch branch 2\n          },\n        ];\n      },\n    },\n    {\n      type: 'noop',\n      label: 'Noop Node',\n      icon: <BiCloud />,\n    },\n    {\n      type: 'end',\n      label: 'End',\n      icon: <PhCircleBold />,\n    },\n  ],\n  find: function find(type: any) {\n    return metadata.nodes.find((m) => m.type === type);\n  },\n};\n\nexport default metadata;\n","import styled from 'styled-components';\n\nimport { primary, primaryOpacity09 } from '../constants';\n\nexport const NodeWrap = styled.div`\n  width: 100%;\n  height: 32px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: 19px;\n  padding: 0 15px;\n  &:hover: {\n    background-color: ${primaryOpacity09};\n    color: ${primary};\n  },\n`;\n\nexport const NodeLabel = styled.div`\n  font-size: 12px;\n  margin-left: 10px;\n`;\n\nexport const NodesWrap = styled.div`\n  max-height: 500px;\n  overflow: auto;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n","import styled from 'styled-components';\nimport { IconPlusCircle } from '@douyinfe/semi-icons';\n\nexport const AdderWrap = styled.div<{ hovered?: boolean }>`\n  width: ${(props) => (props.hovered ? 15 : 6)}px;\n  height: ${(props) => (props.hovered ? 15 : 6)}px;\n  background-color: rgb(143, 149, 158);\n  color: #fff;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n`;\n\nexport const IconPlus = styled(IconPlusCircle)`\n  color: #3370ff;\n  background-color: #fff;\n  border-radius: 15px;\n`;\n","import React from 'react';\n\nimport { usePlaygroundTools } from '@flowgram.ai/fixed-layout-editor';\nimport { Checkbox, IconButton, Space, Tooltip } from '@douyinfe/semi-ui';\nimport { IconUndo, IconRedo, IconShrink, IconExpand, IconGridView } from '@douyinfe/semi-icons';\n\nexport const PlaygroundTools = ({ layoutText }: { layoutText?: string }) => {\n  const tools = usePlaygroundTools();\n  const { zoom } = tools;\n\n  return (\n    <Space>\n      <Checkbox onChange={() => tools.changeLayout()} checked={!tools.isVertical}>\n        {layoutText || 'isHorizontal'}\n      </Checkbox>\n      <Tooltip content=\"fit view\">\n        <IconButton icon={<IconGridView />} onClick={() => tools.fitView()} />\n      </Tooltip>\n      <Tooltip content=\"zoom out\">\n        <IconButton icon={<IconShrink />} onClick={() => tools.zoomout()} />\n      </Tooltip>\n      <Tooltip content=\"zoom in\">\n        <IconButton icon={<IconExpand />} onClick={() => tools.zoomin()} />\n      </Tooltip>\n      <Tooltip content=\"undo\">\n        <IconButton icon={<IconUndo />} disabled={tools.canUndo} onClick={() => tools.undo()} />\n      </Tooltip>\n      <Tooltip content=\"redo\">\n        <IconButton icon={<IconRedo />} disabled={tools.canRedo} onClick={() => tools.redo()} />\n      </Tooltip>\n      <span>{Math.floor(zoom * 100)}%</span>\n    </Space>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,8BAAgC;;;ACAhC,mBAAkB;AAEX,SAAS,UAAU;AACxB,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAM,KAAI,QAAO,KAAI,SAAQ,WAAU,MAAK,QAAO,OAAM,gCAC5D,6BAAAA,QAAA,cAAC,YAAO,IAAG,eAAc,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAK,SAAQ,QAAO,WAAU,aAAY,KAAI,CAC7F;AAEJ;;;ACRA,IAAAC,gBAAkB;AAEX,SAAS,gBAAgB,OAAY;AAC1C,SACE,8BAAAC,QAAA,cAAC,SAAI,OAAM,OAAM,QAAO,OAAM,SAAQ,aAAa,GAAG,SACpD,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,kBAAiB;AAAA,MACjB,aAAY;AAAA;AAAA,IAEZ,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,iBAAgB;AAAA,QAChB,GAAE;AAAA;AAAA,IACJ;AAAA,IACA,8BAAAA,QAAA,cAAC,UAAK,GAAE,0EAAyE;AAAA,EACnF,CACF;AAEJ;AAEO,SAAS,oBAAoB,OAAY;AAC9C,SACE,8BAAAA,QAAA,cAAC,SAAI,OAAM,OAAM,QAAO,OAAM,SAAQ,aAAa,GAAG,SACpD,8BAAAA,QAAA,cAAC,OAAE,MAAK,UACN,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,GAAE;AAAA;AAAA,EACJ,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,GAAE;AAAA;AAAA,EACJ,GACA,8BAAAA,QAAA,cAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,KAAI,MAAK,gBAAe,GACjD,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,GAAE;AAAA;AAAA,EACJ,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,GAAE;AAAA;AAAA,EACJ,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,GAAE;AAAA;AAAA,EACJ,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,GAAE;AAAA;AAAA,EACJ,CACF,CACF;AAEJ;AAEO,SAAS,aAAa,OAAY;AACvC,SACE,8BAAAA,QAAA,cAAC,SAAI,OAAM,OAAM,QAAO,OAAM,SAAQ,eAAe,GAAG,SACtD,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,CACF;AAEJ;AAEO,SAAS,QAAQ,OAAY;AAClC,SACE,8BAAAA,QAAA,cAAC,SAAI,OAAM,OAAM,QAAO,OAAM,SAAQ,aAAa,GAAG,SACpD,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAE;AAAA;AAAA,EACJ,CACF;AAEJ;AAEO,SAAS,kBAAkB,OAAY;AAC5C,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACP,GAAG;AAAA;AAAA,IAEJ,8BAAAA,QAAA,cAAC,OAAE,MAAK,kBACN,8BAAAA,QAAA,cAAC,UAAK,GAAE,wNAAuN,GAC/N,8BAAAA,QAAA,cAAC,UAAK,GAAE,wNAAuN,CACjO;AAAA,EACF;AAEJ;AAEO,SAAS,cAAc,OAAY;AACxC,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,YAAW;AAAA,MACX,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACP,GAAG;AAAA;AAAA,IAEJ,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,GAAE;AAAA;AAAA,IACJ;AAAA,EACF;AAEJ;AAEO,SAAS,MAAM,EAAE,OAAO,YAAY,GAA2C;AACpF,SACE,8BAAAA,QAAA,cAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAM,gCAChE,8BAAAA,QAAA,cAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,MAAM,aAAa,GAC/C,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,GAAE;AAAA;AAAA,EACJ,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,GAAE;AAAA;AAAA,EACJ,CACF;AAEJ;;;ACpJA,IAAAC,gBAAgC;AAEhC,iCAQO;AACP,wBAAgC;AAEhC,SAAS,iBAAiB,OAAsC;AAC9D,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,WAAW,mBAAmB,QAAI,yCAAa;AAEvD,QAAM,eAAe,KAAK,QAAQ,6CAAkB;AACpD,QAAM,YAAY,KAAK,QAAQ,gDAAqB;AAEpD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,wBAAS,KAAK;AAE1D,MAAI,CAAC,aAAa,CAAC,UAAU,QAAQ;AACnC,WAAO,8BAAAC,QAAA,4BAAAA,QAAA,cAAE;AAAA,EACX;AAGA,QAAM,QAAQ,UAAU,WAAW,IAAI,UAAU,OAAO,WAAW;AACnE,QAAM,SAAS;AAEf,QAAM,uBAAuB,MAAM;AACjC,eAAW,MAAM;AACf,4CAAW,UAAU,GAAG,aAAa;AAAA,QACnC,UAAU,MAAM,QAAQ,gDAAqB,GAAG;AAAA,QAChD,gBAAgB;AAAA,MAClB,CAAC;AAAA,IACH,GAAG,GAAG;AAAA,EACR;AAEA,QAAM,gBAAgB,MAAM;AAC1B,cAAU,YAAY;AACtB,iBAAa,YAAY;AACzB,yBAAqB;AAAA,EACvB;AAEA,QAAM,YAAY,MAAM;AACtB,cAAU,YAAY;AACtB,yBAAqB;AAAA,EACvB;AAEA,QAAM,mBAAmB,MAAM;AAC7B,sBAAkB,IAAI;AACtB,iBAAa,YAAY;AAAA,EAC3B;AAEA,QAAM,mBAAmB,MAAM;AAC7B,sBAAkB,KAAK;AACvB,iBAAa,YAAY;AAAA,EAC3B;AAEA,QAAM,iBAAiB,MAAM;AAE3B,QAAI,UAAU,WAAW;AACvB,YAAM,aAAa,KAAK,qBAAqB;AAAA,QAC3C,CAAC,UAAU,CAAC,MAAM,UAAU,UAAU;AAAA,MACxC,EAAE;AAEF,aACE,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,cAAc;AAAA,YACd,SAAS;AAAA,YACT,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,YAAY;AAAA,YACZ,YAAY,iBAAiB,qBAAqB;AAAA,UACpD;AAAA,UACA,eAAY;AAAA;AAAA,QAEX;AAAA,MACH;AAAA,IAEJ;AAGA,QAAI,gBAAgB;AAClB,aACE,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,cAAc;AAAA,YACd,SAAS;AAAA,YACT,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,YAAY;AAAA,YACZ,YAAY;AAAA,UACd;AAAA,UACA,eAAY;AAAA;AAAA,QAEZ,8BAAAA,QAAA,cAAC,uCAAgB;AAAA,MACnB;AAAA,IAEJ;AAEA,WAAO,8BAAAA,QAAA,4BAAAA,QAAA,cAAE;AAAA,EACX;AAGA,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,cAAc;AAAA,MACd,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,MACP;AAAA;AAAA,IAEA,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe,MAAM;AAAA,QACrB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO,iBAAiB,qBAAqB;AAAA,UAC7C,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,iBAAiB;AAAA,UACjB,YAAY;AAAA,QACd;AAAA;AAAA,MAEC,KAAK,WAAW,+CAAoB,EAAE,QAAQ,uCAAY,UAAU;AAAA,IACvE;AAAA,IAEC,eAAe;AAAA,EAClB;AAEJ;AAEA,IAAO,6BAAQ;;;ACrJf,IAAAC,gBAAkB;AAElB,IAAAC,8BAA6C;;;ACF7C,+BAAmB;AAEZ,IAAM,sBAAsB,yBAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADI3B,SAAR,cAA+B,OAAyB;AAC7D,QAAM,iBAAa,2CAAc;AACjC,QAAM,QAAQ,WAAW,SAAS,yCAAa;AAC/C,MAAI,CAAC,MAAO,QAAO,8BAAAC,QAAA,4BAAAA,QAAA,cAAE;AACrB,MACE,MAAM,QAAQ,WACd,CAAC,MAAM,QAAQ,QAAQ;AAAA,IACrB,WAAW,MAAM,gBAAgB,CAAC;AAAA,IAClC,UAAU,MAAM;AAAA,IAChB,UAAU;AAAA,EACZ,CAAC,GACD;AACA,WAAO,8BAAAA,QAAA,4BAAAA,QAAA,cAAE;AAAA,EACX;AACA,SAAO,8BAAAA,QAAA,cAAC,yBAAoB;AAC9B;;;AErBA,IAAAC,gBAAkB;;;ACAlB,IAAAC,4BAAmB;;;ACAZ,IAAM,UAAU;AAChB,IAAM,mBAAmB;;;ADGzB,IAAMC,uBAAsB,0BAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQpB,OAAO;AAAA;AAAA;AAAA,wBAGL,gBAAgB;AAAA,aAC3B,OAAO;AAAA;AAAA;AAIb,IAAM,eAAe,0BAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWb,OAAO;AAAA;;;ADpBd,SAAR,SAA0B,OAA+B;AAC9D,QAAM,EAAE,WAAW,UAAU,IAAI;AAEjC,QAAM,cAAc,aAAa,CAAC,GAC/B;AAAA,IAAI,CAAC,UACJ,MAAM,qBAAqB,SACvB,MAAM,qBAAqB,OAAO,CAAC,OAAO,CAAC,GAAG,MAAM,EAAE,SACtD;AAAA,EACN,EACC,OAAO,CAAC,KAAK,SAAS,MAAM,MAAM,CAAC;AAEtC,SACE,8BAAAC,QAAA,cAACC,sBAAA,MACE,WAAW,IACX,aAAa,KACZ,8BAAAD,QAAA,4BAAAA,QAAA,gBACE,8BAAAA,QAAA,cAAC,oBAAc,UAAW,GAC1B,8BAAAA,QAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF,CAEJ;AAEJ;;;AG1CA,IAAAC,gBAAkB;AAElB,oBAAoB;AACpB,IAAAC,8BAA2D;;;ACH3D,IAAAC,4BAAmB;AAEZ,IAAM,kBAAkB,0BAAAC,QAAO;AAAA;AAAA;AAAA;AAK/B,IAAM,SAAS,CAAC,OAAe,WACpC,0BAAAA,QAAO;AAAA,aACI,KAAK;AAAA,cACJ,MAAM;AAAA;AAAA;;;ADFpB,IAAM,aAAa,CAAC,UAAkB,cAA8B;AAClE,MAAI,CAAC,YAAY,WAAW,GAAG;AAC7B,WAAO;AAAA,EACT;AACA,MAAI,CAAC,aAAa,YAAY,GAAG;AAC/B,WAAO;AAAA,EACT;AACA,aAAO,mBAAI,CAAC,UAAU,SAAS,CAAC,KAAK;AACvC;AAEe,SAAR,mBAAoC,EAAE,KAAK,GAA0C;AAC1F,QAAM,kBAAkB,KAAK,QAA+B,iDAAqB,GAAG;AACpF,QAAM,EAAE,WAAW,IAAI;AACvB,MAAI,YAAY;AACd,UAAM,YAAY,iBAAiB,SAAS,KAAK;AACjD,UAAMC,kBACJ,MAAM,MAAM,QAA+B,iDAAqB,GAAG,QAAQ;AAC7E,UAAM,aAAaA,mBAAkB,KAAK;AAC1C,UAAMC,WAAU,OAAO,WAAW,UAAU,SAAS,GAAG,CAAC;AACzD,WACE,8BAAAC,QAAA,cAAC,uBACC,8BAAAA,QAAA,cAAC,aAAQ,GACT,8BAAAA,QAAA,cAACD,UAAA,IAAQ,GACT,8BAAAC,QAAA,cAAC,aAAQ,CACX;AAAA,EAEJ;AACA,QAAM,aAAa,iBAAiB,UAAU,KAAK;AACnD,QAAM,iBACJ,MAAM,MAAM,QAA+B,iDAAqB,GAAG,QAAQ;AAC7E,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,UAAU,OAAO,GAAG,WAAW,WAAW,UAAU,CAAC;AAC3D,SACE,8BAAAA,QAAA,cAAC,mBAAgB,OAAO,EAAE,eAAe,SAAS,KAChD,8BAAAA,QAAA,cAAC,aAAQ,GACT,8BAAAA,QAAA,cAAC,aAAQ,GACT,8BAAAA,QAAA,cAAC,aAAQ,CACX;AAEJ;;;AE/CA,IAAAC,gBAAkB;AAElB,IAAAC,8BAKO;;;ACPP,IAAAC,4BAAmB;AAEZ,IAAM,YAAY,0BAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAchB,CAAC,UAAW,MAAM,iBAAiB,YAAY,SAAU;AAAA,eAC1D,CAAC,UAAW,CAAC,MAAM,cAAc,MAAM,aAAa,mBAAmB,EAAG;AAAA;;;ADLzF,SAAS,SAAS,OAAmC;AACnD,QAAM,EAAE,cAAc,cAAc,eAAe,IAAI;AAEvD,QAAM,eAAe,cAAc,QAAQ,8CAAkB;AAC7D,QAAM,YAAY,aAAa,QAAQ,iDAAqB;AAE5D,MAAI,CAAC,WAAW;AACd,WAAO,8BAAAC,QAAA,4BAAAA,QAAA,cAAE;AAAA,EACX;AAEA,QAAM,uBAAuB,MAAM;AACjC,eAAW,MAAM;AACf,6CAAW,UAAU,GAAG,aAAa;AAAA,QACnC,UAAU,cAAc,QAAQ,iDAAqB,GAAG;AAAA,QACxD,gBAAgB;AAAA,MAClB,CAAC;AAAA,IACH,GAAG,GAAG;AAAA,EACR;AAEA,QAAM,gBAAgB,MAAM;AAC1B,cAAU,YAAY;AACtB,kBAAc,iBAAiB;AAE/B,yBAAqB;AAAA,EACvB;AAEA,QAAM,YAAY,MAAM;AACtB,cAAU,YAAY;AAEtB,yBAAqB;AAAA,EACvB;AAGA,MAAI,UAAU,WAAW;AACvB,UAAM,aAAa,aAAa,qBAAqB;AAAA,MACnD,CAAC,UAAU,CAAC,MAAM,UAAU,UAAU;AAAA,IACxC,EAAE;AAEF,WACE,8BAAAA,QAAA,cAAC,aAAU,SAAS,WAAW,gBAAgC,eAAY,UACxE,UACH;AAAA,EAEJ;AAIA,QAAM,cAAc;AACpB,QAAM,QAAQ,iBAAiB,YAAY;AAG3C,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,YAAY;AAAA,MACZ,eAAY;AAAA;AAAA,IAEZ,8BAAAA,QAAA,cAAC,SAAM,OAAc,aAA0B;AAAA,EACjD;AAEJ;AAEA,IAAO,mBAAQ;;;AE5Ef,IAAAC,gBAAkB;AAElB,oBAAuB;AACvB,IAAAC,8BAOO;AACP,IAAAC,qBAAyB;;;ACXzB,IAAAC,4BAAmB;AAEZ,IAAMC,aAAY,0BAAAC,QAAO;AAAA;AAAA;AAAA,gBAGhB,CAAC,UAAW,MAAM,YAAY,YAAY,oBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQhE,CAAC,UAAW,MAAM,aAAa,KAAK,eAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADOpD,SAAR,YAA6B,OAAkB;AACpD,QAAM,EAAE,WAAW,KAAK,IAAI;AAC5B,QAAM,WAAW,KAAK,YAAY,QAA4B,8CAAkB;AAChF,QAAM,iBAAa,2CAAc;AACjC,QAAM,2BAAuB,wCAAW,gDAAoB;AAC5D,QAAM,EAAE,WAAW,IAAI;AAEvB,WAAS,YAAY;AACnB,UAAM,QAAQ,qBAAqB,SAAS,MAAM,EAAE,QAAI,sBAAO,CAAC,EAAE,CAAC;AAEnE,eAAW,MAAM;AACf,iBAAW,aAAa;AAAA,QACtB,QAAQ,MAAM,QAA+B,iDAAqB,EAAG;AAAA,QACrE,gBAAgB;AAAA,MAClB,CAAC;AAAA,IACH,GAAG,EAAE;AAAA,EACP;AACA,MAAI,WAAW,OAAO,mBAAoB,QAAO;AAEjD,SACE,8BAAAC,QAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,aAAa,UAAU;AAAA,MAClC,cAAc,MAAM,UAAU,iBAAiB;AAAA,MAC/C,cAAc,MAAM,UAAU,iBAAiB;AAAA;AAAA,IAE/C,8BAAAD,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AACb,oBAAU;AAAA,QACZ;AAAA,QACA,eAAY;AAAA,QACZ,OAAO,EAAE,UAAU,GAAG,WAAW,UAAU,QAAQ,UAAU;AAAA;AAAA,MAE7D,8BAAAA,QAAA,cAAC,iCAAS;AAAA,IACZ;AAAA,EACF;AAEJ;;;AEzDA,IAAAE,iBAAgC;AAEhC,IAAAC,iBAAuB;AACvB,IAAAC,8BAMO;AACP,qBAAwB;;;ACVxB,IAAAC,iBAAkB;;;ACAlB,IAAAC,gBAAkB;AAElB,IAAAC,iBAAuB;AAWvB,IAAM,WAAW;AAAA,EACf,OAAO;AAAA,IACL;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM,8BAAAC,QAAA,cAAC,qBAAgB;AAAA,IACzB;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM,8BAAAA,QAAA,cAAC,yBAAoB;AAAA,MAC3B,SAAS;AACP,eAAO;AAAA,UACL;AAAA,YACE,QAAI,uBAAO,CAAC;AAAA,UACd;AAAA,UACA;AAAA,YACE,QAAI,uBAAO,CAAC;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM,8BAAAA,QAAA,cAAC,mBAAc;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,MAAM,8BAAAA,QAAA,cAAC,uBAAkB;AAAA,IAC3B;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,MAAM,8BAAAA,QAAA,cAAC,yBAAoB;AAAA,MAC3B,SAAS;AACP,eAAO;AAAA,UACL;AAAA,YACE,IAAI,WAAO,uBAAO,CAAC,CAAC;AAAA;AAAA,UACtB;AAAA,UACA;AAAA,YACE,IAAI,aAAS,uBAAO,CAAC,CAAC;AAAA;AAAA,UACxB;AAAA,UACA;AAAA,YACE,IAAI,aAAS,uBAAO,CAAC,CAAC;AAAA;AAAA,UACxB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM,8BAAAA,QAAA,cAAC,aAAQ;AAAA,IACjB;AAAA,IACA;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM,8BAAAA,QAAA,cAAC,kBAAa;AAAA,IACtB;AAAA,EACF;AAAA,EACA,MAAM,SAAS,KAAK,MAAW;AAC7B,WAAO,SAAS,MAAM,KAAK,CAAC,MAAM,EAAE,SAAS,IAAI;AAAA,EACnD;AACF;AAEA,IAAO,mBAAQ;;;AClFf,IAAAC,4BAAmB;AAIZ,IAAM,WAAW,0BAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUP,gBAAgB;AAAA,aAC3B,OAAO;AAAA;AAAA;AAIb,IAAM,YAAY,0BAAAA,QAAO;AAAA;AAAA;AAAA;AAKzB,IAAM,YAAY,0BAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AFnBhC,SAAS,KAAK,OAAkE;AAC9E,SACE,+BAAAC,QAAA,cAAC,YAAS,SAAS,MAAM,WACvB,+BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,UAAU,GAAG,KAAI,MAAM,IAAK,GAC1C,+BAAAA,QAAA,cAAC,iBAAW,MAAM,KAAM,CAC1B;AAEJ;AAEA,IAAM,UAAU,iBAAS,MAAM,OAAO,CAAC,SAAS,KAAK,SAAS,OAAO;AAEtD,SAAR,MAAuB,OAA0C;AACtE,SACE,+BAAAA,QAAA,cAAC,aAAU,OAAO,EAAE,OAAO,KAAK,IAAI,GAAG,KACpC,QAAQ,IAAI,CAAC,GAAG;AAAA;AAAA,IAEf,+BAAAA,QAAA,cAAC,QAAK,KAAK,GAAG,MAAM,EAAE,MAAM,OAAO,EAAE,OAAO,SAAS,MAAM,MAAM,WAAW,CAAC,GAAG;AAAA,GACjF,CACH;AAEJ;;;AGzBA,IAAAC,4BAAmB;AACnB,IAAAC,qBAA+B;AAExB,IAAM,YAAY,0BAAAC,QAAO;AAAA,WACrB,CAAC,UAAW,MAAM,UAAU,KAAK,CAAE;AAAA,YAClC,CAAC,UAAW,MAAM,UAAU,KAAK,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUxC,IAAMC,gBAAW,0BAAAD,SAAO,iCAAc;AAAA;AAAA;AAAA;AAAA;;;AJA9B,SAAR,MAAuB,OAI3B;AACD,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,CAAC,SAAS,UAAU,QAAI,yBAAS,KAAK;AAC5C,QAAM,iBAAa,2CAAc;AACjC,QAAM,2BAAuB,wCAAW,gDAAoB;AAE5D,QAAM,MAAM,CAAC,aAAkB;AAC7B,UAAM,QAAQ,qBAAqB,YAAY,MAAM;AAAA,MACnD,IAAI,SAAS,WAAO,uBAAO,CAAC;AAAA,MAC5B,MAAM,SAAS;AAAA,MACf,QAAQ,SAAS,SAAS,SAAS,OAAO,IAAI;AAAA,IAChD,CAAC;AACD,eAAW,MAAM;AACf,iBAAW,aAAa;AAAA,QACtB,QAAQ,MAAM,QAA+B,iDAAqB,EAAG;AAAA,QACrE,gBAAgB;AAAA,MAClB,CAAC;AAAA,IACH,GAAG,EAAE;AAAA,EACP;AAEA,MAAI,WAAW,OAAO,mBAAoB,QAAO;AAEjD,SACE,+BAAAE,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS,+BAAAA,QAAA,cAAC,SAAM,UAAU,KAAK;AAAA,MAC/B,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,cAAc;AAAA,QACZ,SAAS;AAAA,MACX;AAAA;AAAA,IAEA,+BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AAAA,QACf,aAAa,CAAC,MAAM,EAAE,gBAAgB;AAAA,QACtC,SAAS,MAAM;AACb,qBAAW,IAAI;AAAA,QACjB;AAAA;AAAA,MAEC,MAAM,iBAAiB,+BAAAA,QAAA,cAACC,WAAA,IAAS,IAAK;AAAA,IACzC;AAAA,EACF;AAEJ;;;AfpDO,IAAM,4BAA4B;AAAA,EACvC,CAAC,4CAAgB,KAAK,GAAG;AAAA,EACzB,CAAC,4CAAgB,QAAQ,GAAG;AAAA,EAC5B,CAAC,4CAAgB,kBAAkB,GAAG;AAAA,EACtC,CAAC,4CAAgB,YAAY,GAAG;AAAA,EAChC,CAAC,4CAAgB,SAAS,GAAG;AAAA,EAC7B,CAAC,4CAAgB,eAAe,GAAG;AAAA,EACnC,CAAC,4CAAgB,oBAAoB,GAAG;AAAA,EACxC,CAAC,4CAAgB,2BAA2B,GAAG;AACjD;;;AoBpBA,IAAAC,iBAAkB;AAElB,IAAAC,8BAAmC;AACnC,IAAAC,kBAAqD;AACrD,IAAAC,qBAAyE;AAElE,IAAM,kBAAkB,CAAC,EAAE,WAAW,MAA+B;AAC1E,QAAM,YAAQ,gDAAmB;AACjC,QAAM,EAAE,KAAK,IAAI;AAEjB,SACE,+BAAAC,QAAA,cAAC,6BACC,+BAAAA,QAAA,cAAC,4BAAS,UAAU,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,MAAM,cAC7D,cAAc,cACjB,GACA,+BAAAA,QAAA,cAAC,2BAAQ,SAAQ,cACf,+BAAAA,QAAA,cAAC,8BAAW,MAAM,+BAAAA,QAAA,cAAC,qCAAa,GAAI,SAAS,MAAM,MAAM,QAAQ,GAAG,CACtE,GACA,+BAAAA,QAAA,cAAC,2BAAQ,SAAQ,cACf,+BAAAA,QAAA,cAAC,8BAAW,MAAM,+BAAAA,QAAA,cAAC,mCAAW,GAAI,SAAS,MAAM,MAAM,QAAQ,GAAG,CACpE,GACA,+BAAAA,QAAA,cAAC,2BAAQ,SAAQ,aACf,+BAAAA,QAAA,cAAC,8BAAW,MAAM,+BAAAA,QAAA,cAAC,mCAAW,GAAI,SAAS,MAAM,MAAM,OAAO,GAAG,CACnE,GACA,+BAAAA,QAAA,cAAC,2BAAQ,SAAQ,UACf,+BAAAA,QAAA,cAAC,8BAAW,MAAM,+BAAAA,QAAA,cAAC,iCAAS,GAAI,UAAU,MAAM,SAAS,SAAS,MAAM,MAAM,KAAK,GAAG,CACxF,GACA,+BAAAA,QAAA,cAAC,2BAAQ,SAAQ,UACf,+BAAAA,QAAA,cAAC,8BAAW,MAAM,+BAAAA,QAAA,cAAC,iCAAS,GAAI,UAAU,MAAM,SAAS,SAAS,MAAM,MAAM,KAAK,GAAG,CACxF,GACA,+BAAAA,QAAA,cAAC,cAAM,KAAK,MAAM,OAAO,GAAG,GAAE,GAAC,CACjC;AAEJ;","names":["import_fixed_layout_editor","React","import_react","React","import_react","React","import_react","import_fixed_layout_editor","styled","React","import_react","import_styled_components","UIDragNodeContainer","styled","React","UIDragNodeContainer","import_react","import_fixed_layout_editor","import_styled_components","styled","nextNodeBounds","LineDom","React","import_react","import_fixed_layout_editor","import_styled_components","styled","React","import_react","import_fixed_layout_editor","import_semi_icons","import_styled_components","Container","styled","React","Container","import_react","import_nanoid","import_fixed_layout_editor","import_react","import_react","import_nanoid","React","import_styled_components","styled","React","import_styled_components","import_semi_icons","styled","IconPlus","React","IconPlus","import_react","import_fixed_layout_editor","import_semi_ui","import_semi_icons","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/fixed-semi-materials",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.9",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -16,12 +16,12 @@
     "dist"
   ],
   "dependencies": {
-    "@douyinfe/semi-icons": "^2.72.3",
-    "@douyinfe/semi-illustrations": "^2.36.0",
-    "@douyinfe/semi-ui": "^2.72.3",
+    "@douyinfe/semi-icons": "^2.80.0",
+    "@douyinfe/semi-illustrations": "^2.80.0",
+    "@douyinfe/semi-ui": "^2.80.0",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.2",
-    "@flowgram.ai/fixed-layout-editor": "0.1.0-alpha.7"
+    "@flowgram.ai/fixed-layout-editor": "0.1.0-alpha.9"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -35,12 +35,12 @@
     "tsup": "^8.0.1",
     "typescript": "^5.0.4",
     "vitest": "^0.34.6",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.7",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.7"
+    "@flowgram.ai/ts-config": "0.1.0-alpha.9",
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.9"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17",
+    "react": ">=16.8",
+    "react-dom": ">=16.8",
     "styled-components": ">=4"
   },
   "publishConfig": {