mirror of
https://github.com/whyour/qinglong.git
synced 2025-12-14 07:58:12 +08:00
54e2468c7a
Following Flowgram demo structure: - Created tools component directory with index, styles, zoom-select, add-node-dropdown - Implemented FloatingTools positioned at bottom-left (like Flowgram demo) - Added undo/redo buttons with history integration - Added zoom selector dropdown (50%, 100%, 150%, 200%) - Added fit-view button for canvas fitting - Added Add Node dropdown with all node types - Updated FlowgramEditor to use new tools component - Removed old toolbar from editor - Added 6 new translation keys (zh-CN + en-US) - Following exact Flowgram UI patterns with styled-components Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>
68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
/**
|
|
* Flowgram Tools Component
|
|
* Based on: https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout/src/components/tools
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Button, Tooltip, Divider } from 'antd';
|
|
import {
|
|
UndoOutlined,
|
|
RedoOutlined,
|
|
PlusOutlined,
|
|
ZoomInOutlined,
|
|
ZoomOutOutlined,
|
|
FullscreenOutlined,
|
|
} from '@ant-design/icons';
|
|
import { useClientContext } from '@flowgram.ai/free-layout-editor';
|
|
import { ZoomSelect } from './zoom-select';
|
|
import { AddNodeDropdown } from './add-node-dropdown';
|
|
import { ToolContainer, ToolSection } from './styles';
|
|
|
|
export const FlowgramTools: React.FC = () => {
|
|
const { history, playground } = useClientContext();
|
|
const [canUndo, setCanUndo] = useState(false);
|
|
const [canRedo, setCanRedo] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const disposable = history.undoRedoService.onChange(() => {
|
|
setCanUndo(history.canUndo());
|
|
setCanRedo(history.canRedo());
|
|
});
|
|
return () => disposable.dispose();
|
|
}, [history]);
|
|
|
|
return (
|
|
<ToolContainer className="flowgram-tools">
|
|
<ToolSection>
|
|
<ZoomSelect />
|
|
<Tooltip title="Fit View">
|
|
<Button
|
|
type="text"
|
|
icon={<FullscreenOutlined />}
|
|
onClick={() => playground.viewport.fitView()}
|
|
/>
|
|
</Tooltip>
|
|
<Divider type="vertical" style={{ height: '20px', margin: '0 4px' }} />
|
|
<Tooltip title="Undo">
|
|
<Button
|
|
type="text"
|
|
icon={<UndoOutlined />}
|
|
disabled={!canUndo}
|
|
onClick={() => history.undo()}
|
|
/>
|
|
</Tooltip>
|
|
<Tooltip title="Redo">
|
|
<Button
|
|
type="text"
|
|
icon={<RedoOutlined />}
|
|
disabled={!canRedo}
|
|
onClick={() => history.redo()}
|
|
/>
|
|
</Tooltip>
|
|
<Divider type="vertical" style={{ height: '20px', margin: '0 4px' }} />
|
|
<AddNodeDropdown />
|
|
</ToolSection>
|
|
</ToolContainer>
|
|
);
|
|
};
|