新版本流程编辑器

2026-07-27 19:04:15 +08:00
parent d33960961a
commit e072141953
281 changed files with 25145 additions and 3405 deletions
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FunctionComponent } from 'react';
+
+import { SelectorBoxPopoverProps } from '@flowgram.ai/free-layout-editor';
+import { WorkflowGroupCommand } from '@flowgram.ai/free-group-plugin';
+import { Button, ButtonGroup, Tooltip } from '@douyinfe/semi-ui';
+import { IconCopy, IconDeleteStroked, IconExpand, IconShrink } from '@douyinfe/semi-icons';
+
+import { IconGroup } from '../group';
+import { FlowCommandId } from '../../shortcuts/constants';
+
+const BUTTON_HEIGHT = 24;
+
+export const SelectorBoxPopover: FunctionComponent<SelectorBoxPopoverProps> = ({
+  bounds,
+  children,
+  flowSelectConfig,
+  commandRegistry,
+}) => (
+  <>
+    <div
+      style={{
+        position: 'absolute',
+        left: bounds.right,
+        top: bounds.top,
+        transform: 'translate(-100%, -100%)',
+      }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <ButtonGroup
+        size="small"
+        style={{ display: 'flex', flexWrap: 'nowrap', height: BUTTON_HEIGHT }}
+      >
+        <Tooltip content={'Collapse'}>
+          <Button
+            icon={<IconShrink />}
+            style={{ height: BUTTON_HEIGHT }}
+            type="primary"
+            theme="solid"
+            onMouseDown={(e) => {
+              commandRegistry.executeCommand(FlowCommandId.COLLAPSE);
+            }}
+          />
+        </Tooltip>
+
+        <Tooltip content={'Expand'}>
+          <Button
+            icon={<IconExpand />}
+            style={{ height: BUTTON_HEIGHT }}
+            type="primary"
+            theme="solid"
+            onMouseDown={(e) => {
+              commandRegistry.executeCommand(FlowCommandId.EXPAND);
+            }}
+          />
+        </Tooltip>
+
+        <Tooltip content={'Create Group'}>
+          <Button
+            icon={<IconGroup size={14} />}
+            style={{ height: BUTTON_HEIGHT }}
+            type="primary"
+            theme="solid"
+            onClick={() => {
+              commandRegistry.executeCommand(WorkflowGroupCommand.Group);
+            }}
+          />
+        </Tooltip>
+
+        <Tooltip content={'Copy'}>
+          <Button
+            icon={<IconCopy />}
+            style={{ height: BUTTON_HEIGHT }}
+            type="primary"
+            theme="solid"
+            onClick={() => {
+              commandRegistry.executeCommand(FlowCommandId.COPY);
+            }}
+          />
+        </Tooltip>
+
+        <Tooltip content={'Delete'}>
+          <Button
+            type="primary"
+            theme="solid"
+            icon={<IconDeleteStroked />}
+            style={{ height: BUTTON_HEIGHT }}
+            onClick={() => {
+              commandRegistry.executeCommand(FlowCommandId.DELETE);
+            }}
+          />
+        </Tooltip>
+      </ButtonGroup>
+    </div>
+    <div>{children}</div>
+  </>
+);