@agentscope-ai/flow 0.0.1

package/dist/components/flow-panel/config-panel.js

@@ -0,0 +1,303 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useStore } from "../../flow/context";
+import { useNodeDataUpdate, useNodesInteraction, useNodesReadOnly } from "../../hooks";
+import $i18n from "../../i18n";
+import { copy, Dropdown, Empty, IconButton, Input, Tag } from '@agentscope-ai/design';
+import { SparkCirclePlayLine, SparkCopyLine, SparkDeleteLine, SparkEditLine, SparkFalseLine, SparkIdLine, SparkMoreLine, SparkTrueLine } from '@agentscope-ai/icons';
+import { useNodes } from '@xyflow/react';
+import { useSetState } from 'ahooks';
+import { Divider, Flex, message, Tooltip, Typography } from 'antd';
+import { compact } from 'lodash-es';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import DragPanel from "../drag-panel";
+import FlowIcon from "../flow-icon";
+import PanelContainer from "./panel-container";
+export var ConfigPanel = /*#__PURE__*/memo(function (_ref) {
+  var _slots$configPanelRen;
+  var selectedNode = _ref.selectedNode,
+    singleTestPanel = _ref.singleTestPanel;
+  var nodes = useNodes();
+  var setSelectedNode = useStore(function (state) {
+    return state.setSelectedNode;
+  });
+  var slots = useStore(function (state) {
+    return state.slots;
+  });
+  var showSingleTest = useStore(function (state) {
+    return state.showSingleTest;
+  });
+  var setShowSingleTest = useStore(function (state) {
+    return state.setShowSingleTest;
+  });
+  var _useNodeDataUpdate = useNodeDataUpdate(),
+    handleNodeDataUpdate = _useNodeDataUpdate.handleNodeDataUpdate;
+  var _useNodesInteraction = useNodesInteraction(),
+    onNodeCopy = _useNodesInteraction.onNodeCopy,
+    onNodeDelete = _useNodesInteraction.onNodeDelete;
+  var nodeSchemaMap = useStore(function (state) {
+    return state.nodeSchemaMap;
+  });
+  var _useNodesReadOnly = useNodesReadOnly(),
+    nodesReadOnly = _useNodesReadOnly.nodesReadOnly;
+  var _useSetState = useSetState({
+      tempName: '',
+      isEditing: false
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var textAreaRef = useRef(null);
+  var selectedNodeData = useMemo(function () {
+    return nodes.find(function (node) {
+      return node.id === selectedNode.id;
+    });
+  }, [nodes, selectedNode.id]);
+  var handleClickOperation = useCallback(function (_ref2) {
+    var key = _ref2.key;
+    if (!selectedNodeData) return;
+    switch (key) {
+      case 'rename':
+        setState({
+          isEditing: true,
+          tempName: selectedNodeData.data.label
+        });
+        break;
+      case 'copy':
+        onNodeCopy(selectedNodeData.id);
+        break;
+      case 'delete':
+        onNodeDelete(selectedNodeData.id);
+        break;
+      case 'id':
+        copy(selectedNode.id);
+        message.success($i18n.get({
+          id: 'spark-flow.components.FlowPanel.ConfigPanel.copySuccess',
+          dm: '复制成功'
+        }));
+        break;
+    }
+  }, [selectedNodeData === null || selectedNodeData === void 0 ? void 0 : selectedNodeData.id, selectedNodeData === null || selectedNodeData === void 0 ? void 0 : selectedNodeData.data.label]);
+  useEffect(function () {
+    setState({
+      isEditing: false
+    });
+  }, [selectedNodeData === null || selectedNodeData === void 0 ? void 0 : selectedNodeData.id]);
+  var handleSure = useCallback(function () {
+    if (!state.tempName) {
+      message.error($i18n.get({
+        id: 'spark-flow.components.FlowPanel.ConfigPanel.enterNodeName',
+        dm: '请输入节点名称'
+      }));
+      return;
+    }
+    if (nodes.some(function (node) {
+      return node.data.label === state.tempName && node.id !== (selectedNodeData === null || selectedNodeData === void 0 ? void 0 : selectedNodeData.id);
+    })) {
+      message.error($i18n.get({
+        id: 'spark-flow.components.FlowPanel.ConfigPanel.nodeNameExists',
+        dm: '节点名称已存在'
+      }));
+      return;
+    }
+    setState({
+      isEditing: false
+    });
+    handleNodeDataUpdate({
+      id: selectedNodeData === null || selectedNodeData === void 0 ? void 0 : selectedNodeData.id,
+      data: {
+        label: state.tempName
+      }
+    });
+  }, [selectedNodeData, handleNodeDataUpdate, nodes, state.tempName]);
+  var nodeInfo = useMemo(function () {
+    if (!selectedNodeData) return null;
+    return nodeSchemaMap[selectedNodeData.type];
+  }, [nodeSchemaMap, selectedNodeData === null || selectedNodeData === void 0 ? void 0 : selectedNodeData.type]);
+  var handleBlur = useCallback(function () {
+    if (textAreaRef.current && textAreaRef.current.resizableTextArea) {
+      var textArea = textAreaRef.current.resizableTextArea.textArea;
+      textArea.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    }
+  }, []);
+  if (!selectedNodeData) return null;
+  var panelContent = ((_slots$configPanelRen = slots.configPanelRenderer) === null || _slots$configPanelRen === void 0 ? void 0 : _slots$configPanelRen.call(slots, selectedNodeData)) || /*#__PURE__*/React.createElement("div", {
+    className: "full-center"
+  }, /*#__PURE__*/React.createElement(Empty, {
+    description: $i18n.get({
+      id: 'spark-flow.components.FlowPanel.ConfigPanel.pleaseConfigureFirst',
+      dm: '请先配置'
+    })
+  }));
+  return /*#__PURE__*/React.createElement(DragPanel, {
+    defaultWidth: 480,
+    minWidth: 420,
+    maxWidth: 720
+  }, /*#__PURE__*/React.createElement(PanelContainer, {
+    noPadding: true,
+    hiddenRight: state.isEditing,
+    headerBottom: /*#__PURE__*/React.createElement(Input.TextArea, {
+      ref: textAreaRef,
+      value: selectedNodeData.data.desc,
+      onChange: function onChange(e) {
+        return handleNodeDataUpdate({
+          id: selectedNodeData.id,
+          data: {
+            desc: e.target.value
+          }
+        });
+      },
+      onBlur: handleBlur,
+      style: {
+        padding: 0,
+        marginTop: 6
+      },
+      placeholder: $i18n.get({
+        id: 'spark-flow.components.FlowPanel.ConfigPanel.enterDescription',
+        dm: '添加描述...'
+      }),
+      autoSize: {
+        minRows: 1,
+        maxRows: 2
+      },
+      variant: "borderless"
+    }),
+    title: /*#__PURE__*/React.createElement("div", {
+      className: "flex gap-[8px] items-center flex-1"
+    }, /*#__PURE__*/React.createElement(FlowIcon, {
+      nodeType: selectedNodeData.type
+    }), state.isEditing ? /*#__PURE__*/React.createElement(Flex, {
+      gap: 8,
+      align: "center",
+      flex: 1
+    }, /*#__PURE__*/React.createElement(Input, {
+      value: state.tempName,
+      onChange: function onChange(e) {
+        return setState({
+          tempName: e.target.value
+        });
+      }
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      className: "size-[32px] flex-shrink-0",
+      type: "text",
+      onClick: handleSure,
+      icon: /*#__PURE__*/React.createElement(SparkTrueLine, null)
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      onClick: function onClick() {
+        return setState({
+          isEditing: false
+        });
+      },
+      className: "size-[32px] flex-shrink-0",
+      type: "text",
+      icon: /*#__PURE__*/React.createElement(SparkFalseLine, null)
+    })) : /*#__PURE__*/React.createElement(Typography.Text, {
+      ellipsis: {
+        tooltip: true
+      },
+      className: "spark-flow-panel-title flex-1 w-1"
+    }, selectedNodeData.data.label || $i18n.get({
+      id: 'spark-flow.components.FlowPanel.ConfigPanel.nodeNameConfig',
+      dm: '【节点名称】配置'
+    }))),
+    onClose: function onClose() {
+      return setSelectedNode(null);
+    },
+    right: /*#__PURE__*/React.createElement(React.Fragment, null, singleTestPanel && (nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.allowSingleTest) && !nodesReadOnly && /*#__PURE__*/React.createElement(Tooltip, {
+      title: $i18n.get({
+        id: 'spark-flow.components.FlowPanel.ConfigPanel.debug',
+        dm: '调试'
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return setShowSingleTest(true);
+      },
+      className: "spark-flow-operator-icon-with-bg rounded-[6px] size-[32px] cursor-pointer flex-center"
+    }, /*#__PURE__*/React.createElement(SparkCirclePlayLine, {
+      className: "spark-flow-node-action-btn text-[24px]"
+    }))), /*#__PURE__*/React.createElement(Dropdown, {
+      placement: "bottomRight",
+      trigger: ['click'],
+      getPopupContainer: function getPopupContainer(ele) {
+        return ele;
+      },
+      overlayClassName: "spark-flow-node-dropdown",
+      menu: {
+        onClick: handleClickOperation,
+        items: compact([!nodesReadOnly && {
+          label: /*#__PURE__*/React.createElement("div", {
+            className: "flex items-center gap-[8px]"
+          }, /*#__PURE__*/React.createElement(SparkEditLine, null), /*#__PURE__*/React.createElement("span", null, $i18n.get({
+            id: 'spark-flow.components.FlowPanel.ConfigPanel.rename',
+            dm: '重命名'
+          }))),
+          key: 'rename'
+        }, !(nodeInfo !== null && nodeInfo !== void 0 && nodeInfo.isSystem) && !nodesReadOnly && {
+          label: /*#__PURE__*/React.createElement("div", {
+            className: "flex items-center gap-[8px]"
+          }, /*#__PURE__*/React.createElement(SparkCopyLine, null), /*#__PURE__*/React.createElement("span", null, $i18n.get({
+            id: 'spark-flow.components.FlowPanel.ConfigPanel.copy',
+            dm: '复制'
+          }))),
+          key: 'copy'
+        }, !(nodeInfo !== null && nodeInfo !== void 0 && nodeInfo.isSystem) && !nodesReadOnly && {
+          label: /*#__PURE__*/React.createElement("div", {
+            className: "flex items-center gap-[8px]"
+          }, /*#__PURE__*/React.createElement(SparkDeleteLine, null), /*#__PURE__*/React.createElement("span", null, $i18n.get({
+            id: 'spark-flow.components.FlowPanel.ConfigPanel.delete',
+            dm: '删除'
+          }))),
+          key: 'delete',
+          danger: true
+        }, !nodesReadOnly && {
+          type: 'divider'
+        }, {
+          label: /*#__PURE__*/React.createElement("div", {
+            className: "flex items-center spark-flow-node-copy-btn gap-[4px]"
+          }, /*#__PURE__*/React.createElement(Tag, {
+            className: "spark-flow-node-copy-btn-tag",
+            icon: /*#__PURE__*/React.createElement(SparkIdLine, null)
+          }, selectedNodeData.id), /*#__PURE__*/React.createElement(SparkCopyLine, {
+            className: "spark-flow-node-copy-btn-icon"
+          })),
+          key: 'id'
+        }])
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "spark-flow-operator-icon-with-bg rounded-[6px] size-[32px] flex-center cursor-pointer"
+    }, /*#__PURE__*/React.createElement(SparkMoreLine, {
+      className: "spark-flow-node-action-btn text-[24px]"
+    }))), /*#__PURE__*/React.createElement(Divider, {
+      style: {
+        margin: 0,
+        height: '20px'
+      },
+      type: "vertical"
+    }))
+  }, panelContent, showSingleTest && singleTestPanel && /*#__PURE__*/React.createElement(singleTestPanel, {
+    selectedNodeData: selectedNodeData,
+    onClose: function onClose() {
+      return setShowSingleTest(false);
+    },
+    disabled: nodesReadOnly
+  })));
+});
+var ConfigPanelWrap = /*#__PURE__*/memo(function (props) {
+  var selectedNode = useStore(function (state) {
+    return state.selectedNode;
+  });
+  if (!selectedNode) return null;
+  return /*#__PURE__*/React.createElement(ConfigPanel, {
+    key: selectedNode.id,
+    selectedNode: selectedNode,
+    singleTestPanel: props.singleTestPanel
+  });
+});
+export default ConfigPanelWrap;

package/dist/components/flow-panel/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.less';
+interface IFlowPanel {
+    children?: React.ReactNode[] | React.ReactNode;
+}
+declare const _default: React.NamedExoticComponent<IFlowPanel>;
+export default _default;

package/dist/components/flow-panel/index.js

@@ -0,0 +1,7 @@
+import React, { memo } from 'react';
+import "./index.less";
+export default /*#__PURE__*/memo(function FlowPanel(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-panel-group absolute flex gap-[16px] flex-nowrap"
+  }, props.children);
+});

package/dist/components/flow-panel/index.less

@@ -0,0 +1,85 @@
+@import '../../index.less';
+
+* {
+  box-sizing: border-box;
+}
+
+.spark-flow-panel-group {
+  height: calc(100% - 32px);
+  top: 16px;
+  right: 16px;
+
+  > * {
+    flex-shrink: 0;
+  }
+}
+
+.spark-flow-panel {
+  background: e('var(--@{ant-prefix}-color-bg-base)');
+  display: flex;
+  flex-direction: column;
+  border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+  border-radius: 8px;
+  box-shadow: e('var(--@{ant-prefix}-box-shadow-secondary)');
+
+  &-header {
+    padding: 16px 20px;
+    flex-shrink: 0;
+
+    .spark-flow-panel-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+
+  &-content {
+    border-top: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+    height: calc(100% - 64px);
+    flex: 1;
+    overflow-y: auto;
+
+    .@{ant-prefix}-drawer-inline {
+      overflow-y: hidden;
+    }
+  }
+}
+
+.spark-flow-panel-form-second-title {
+  font-size: 13px;
+  line-height: 20px;
+
+  .anticon {
+    font-size: 20px;
+  }
+}
+
+.spark-flow-panel-form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  &:not(:last-of-type){
+    border-bottom: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+  }
+}
+
+.spark-flow-panel-form-title {
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &-desc {
+    color: e('var(--@{ant-prefix}-color-text-tertiary)');
+    font-size: 12px;
+    font-weight: normal;
+  }
+
+  .anticon {
+    font-weight: normal;
+    font-size: 16px;
+    color: e('var(--@{ant-prefix}-color-text-tertiary)');
+  }
+}

package/dist/components/flow-panel/panel-container.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IPanelContainerProps {
+    title?: React.ReactNode;
+    right?: React.ReactNode;
+    children: React.ReactNode;
+    onClose?: () => void;
+    noPadding?: boolean;
+    hiddenRight?: boolean;
+    headerBottom?: React.ReactNode;
+}
+declare const _default: React.NamedExoticComponent<IPanelContainerProps>;
+export default _default;

package/dist/components/flow-panel/panel-container.js

@@ -0,0 +1,25 @@
+import { SparkFalseLine } from '@agentscope-ai/icons';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+export default /*#__PURE__*/memo(function PanelContainer(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-panel h-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-panel-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-justify-between"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-panel-title flex-1"
+  }, props.title), !props.hiddenRight && /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-[8px]"
+  }, props.right, /*#__PURE__*/React.createElement("div", {
+    onClick: props.onClose,
+    className: "spark-flow-operator-icon-with-bg size-[32px] rounded-[6px] flex-center"
+  }, /*#__PURE__*/React.createElement(SparkFalseLine, {
+    className: "text-[24px] spark-flow-node-action-btn"
+  })))), props.headerBottom), /*#__PURE__*/React.createElement("div", {
+    className: classNames('spark-flow-panel-content', {
+      'p-[20px]': !props.noPadding
+    })
+  }, props.children));
+});

package/dist/components/flow-tools/add-node-btn.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => React.JSX.Element>;
+export default _default;

package/dist/components/flow-tools/add-node-btn.js

@@ -0,0 +1,26 @@
+import { useNodesReadOnly } from "../../hooks";
+import $i18n from "../../i18n";
+import { SparkAddCircleFill } from '@agentscope-ai/icons';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+import { PopoverNodeMenu } from "../node-menu";
+var AddNodeBtn = function AddNodeBtn() {
+  var _useNodesReadOnly = useNodesReadOnly(),
+    nodesReadOnly = _useNodesReadOnly.nodesReadOnly;
+  return /*#__PURE__*/React.createElement(PopoverNodeMenu, {
+    placement: "top"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: $i18n.get({
+      id: 'spark-flow.components.FlowTools.AddNodeBtn.addNode',
+      dm: '添加节点'
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('spark-flow-tool-icon-btn size-[32px] flex-center', {
+      'spark-flow-tool-icon-btn-disabled': nodesReadOnly
+    })
+  }, /*#__PURE__*/React.createElement(SparkAddCircleFill, {
+    className: "text-[20px]"
+  }))));
+};
+export default /*#__PURE__*/memo(AddNodeBtn);

package/dist/components/flow-tools/history-btn.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<object>;
+export default _default;

package/dist/components/flow-tools/history-btn.js

@@ -0,0 +1,59 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useNodesReadOnly } from "../../hooks";
+import { useHistory } from "../../hooks/use-history";
+import $i18n from "../../i18n";
+import { isEventInInput, transformToMacKey } from "../../utils";
+import { SparkRedoLine, SparkUndoLine } from '@agentscope-ai/icons';
+import { useKeyPress } from 'ahooks';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+export default /*#__PURE__*/memo(function HistoryBtn() {
+  var _useHistory = useHistory(),
+    canUndo = _useHistory.canUndo,
+    canRedo = _useHistory.canRedo,
+    undo = _useHistory.undo,
+    redo = _useHistory.redo;
+  var _useNodesReadOnly = useNodesReadOnly(),
+    nodesReadOnly = _useNodesReadOnly.nodesReadOnly;
+  useKeyPress(["".concat(transformToMacKey('ctrl'), ".z")], function (event) {
+    if (isEventInInput(event) || nodesReadOnly) return;
+    undo();
+  }, {
+    exactMatch: true
+  });
+  useKeyPress(["".concat(transformToMacKey('ctrl'), ".shift.z")], function (event) {
+    if (isEventInInput(event) || nodesReadOnly) return;
+    redo();
+  }, {
+    exactMatch: true
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-tools gap-[8px] items-center flex"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    destroyTooltipOnHide: true,
+    title: $i18n.get({
+      id: 'spark-flow.components.FlowTools.HistoryBtn.undo',
+      dm: '撤销'
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('spark-flow-tool-icon-btn size-[32px] flex-center', _defineProperty({}, 'spark-flow-tool-icon-btn-disabled', !canUndo || nodesReadOnly)),
+    onClick: nodesReadOnly ? undefined : undo
+  }, /*#__PURE__*/React.createElement(SparkUndoLine, {
+    className: "text-[20px]"
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    destroyTooltipOnHide: true,
+    title: $i18n.get({
+      id: 'spark-flow.components.FlowTools.HistoryBtn.redo',
+      dm: '重做'
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('spark-flow-tool-icon-btn size-[32px] flex-center', _defineProperty({}, 'spark-flow-tool-icon-btn-disabled', !canRedo || nodesReadOnly)),
+    onClick: nodesReadOnly ? undefined : redo
+  }, /*#__PURE__*/React.createElement(SparkRedoLine, {
+    className: "text-[20px]"
+  }))));
+});

package/dist/components/flow-tools/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const _default: React.NamedExoticComponent<object>;
+export default _default;

package/dist/components/flow-tools/index.js

@@ -0,0 +1,29 @@
+import { Divider } from 'antd';
+import React, { memo } from 'react';
+import AddNodeBtn from "./add-node-btn";
+import HistoryBtn from "./history-btn";
+import "./index.less";
+import LayoutBtn from "./layout-btn";
+import MiniMapBtn from "./mini-map-btn";
+import ScaleBtn from "./scale-btn";
+import ShortKeyBtn from "./short-key-btn";
+import TouchModeBtn from "./touch-mode-btn";
+export default /*#__PURE__*/memo(function FlowTools() {
+  return /*#__PURE__*/React.createElement("div", {
+    id: "spark-flow-bottom-tools-container",
+    className: "nopan absolute items-center flex left-[16px] bottom-[16px] gap-[12px]"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-tools gap-[8px] items-center flex"
+  }, /*#__PURE__*/React.createElement(MiniMapBtn, null), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical",
+    className: "m-0"
+  }), /*#__PURE__*/React.createElement(ScaleBtn, null)), /*#__PURE__*/React.createElement("div", {
+    className: "spark-flow-tools gap-[8px] items-center flex"
+  }, /*#__PURE__*/React.createElement(AddNodeBtn, null), /*#__PURE__*/React.createElement(LayoutBtn, null), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical",
+    className: "m-0"
+  }), /*#__PURE__*/React.createElement(TouchModeBtn, null), /*#__PURE__*/React.createElement(Divider, {
+    type: "vertical",
+    className: "m-0"
+  }), /*#__PURE__*/React.createElement(ShortKeyBtn, null)), /*#__PURE__*/React.createElement(HistoryBtn, null));
+});

package/dist/components/flow-tools/index.less

@@ -0,0 +1,82 @@
+@import '../../index.less';
+.spark-flow-tools {
+  box-shadow:
+    0 12px 24px -16px rgb(54 54 73 / 4%),
+    0 12px 40px 0 rgb(51 51 71 / 8%),
+    0 0 1px 0 rgb(44 44 54 / 2%);
+  border: 1px solid e('var(--@{ant-prefix}-color-border-secondary)');
+  background: e('var(--@{ant-prefix}-color-bg-base)');
+  padding: 6px;
+  border-radius: 8px;
+}
+
+.spark-flow-tool-icon-btn {
+  cursor: pointer;
+  transition: 0.4s ease-in-out;
+  color: e('var(--@{ant-prefix}-color-text)');
+  border-radius: 6px;
+
+  &:hover:not(.spark-flow-tool-icon-btn-disabled),
+  &.spark-flow-tool-icon-btn-active {
+    color: e('var(--@{ant-prefix}-color-primary)');
+    background: e('var(--@{ant-prefix}-color-primary-bg)');
+  }
+
+  &.spark-flow-tool-icon-btn-disabled {
+    cursor: not-allowed;
+    color: e('var(--@{ant-prefix}-color-text-disabled)');
+  }
+
+  .@{ant-prefix}-popover .@{ant-prefix}-popover-content,
+  .@{ant-prefix}-dropdown .@{ant-prefix}-dropdown-menu {
+    margin-bottom: 6px;
+  }
+}
+
+.spark-flow-tools-scale-rate {
+  width: 38px;
+  text-align: center;
+}
+
+.spark-flow-touch-mode-select-item {
+  cursor: pointer;
+  border-radius: 4px;
+  transition: 0.4s ease-in-out;
+  width: 300px;
+  padding: 8px 12px;
+
+  &-icon {
+    background: e('var(--@{ant-prefix}-color-fill-secondary)');
+    color: e('var(--@{ant-prefix}-color-text-secondary)');
+    border-radius: 4px;
+  }
+
+  &-label {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    color: e('var(--@{ant-prefix}-color-text)');
+  }
+
+  &-desc {
+    font-size: 12px;
+    line-height: 18px;
+    color: e('var(--@{ant-prefix}-color-text-secondary)');
+  }
+
+  &:hover,
+  &.spark-flow-touch-mode-select-item-active {
+    background: e('var(--@{ant-prefix}-color-primary-bg)');
+
+    .spark-flow-touch-mode-select-item-icon {
+      background: e('var(--@{ant-prefix}-color-primary-border)');
+      color: e('var(--@{ant-prefix}-color-primary)');
+    }
+  }
+}
+
+.spark-flow-touch-mode-btn-container {
+  .@{ant-prefix}-popover .@{ant-prefix}-popover-inner {
+    padding: 4px;
+  }
+}

package/dist/components/flow-tools/layout-btn.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<object>;
+export default _default;