104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
|
/**
|
||
|
|
* 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>
|
||
|
|
</>
|
||
|
|
);
|