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>
66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
/**
|
|
* Zoom selector component
|
|
*/
|
|
|
|
import React, { useState } from 'react';
|
|
import { Dropdown, Menu } from 'antd';
|
|
import { usePlayground, usePlaygroundTools } from '@flowgram.ai/free-layout-editor';
|
|
import { SelectZoom } from './styles';
|
|
|
|
export const ZoomSelect: React.FC = () => {
|
|
const tools = usePlaygroundTools({ maxZoom: 2, minZoom: 0.25 });
|
|
const playground = usePlayground();
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
const menu = (
|
|
<Menu
|
|
onClick={() => setVisible(false)}
|
|
items={[
|
|
{
|
|
key: 'zoomin',
|
|
label: 'Zoom In',
|
|
onClick: () => tools.zoomin(),
|
|
},
|
|
{
|
|
key: 'zoomout',
|
|
label: 'Zoom Out',
|
|
onClick: () => tools.zoomout(),
|
|
},
|
|
{ type: 'divider' },
|
|
{
|
|
key: '50',
|
|
label: 'Zoom to 50%',
|
|
onClick: () => playground.config.updateZoom(0.5),
|
|
},
|
|
{
|
|
key: '100',
|
|
label: 'Zoom to 100%',
|
|
onClick: () => playground.config.updateZoom(1),
|
|
},
|
|
{
|
|
key: '150',
|
|
label: 'Zoom to 150%',
|
|
onClick: () => playground.config.updateZoom(1.5),
|
|
},
|
|
{
|
|
key: '200',
|
|
label: 'Zoom to 200%',
|
|
onClick: () => playground.config.updateZoom(2.0),
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<Dropdown
|
|
overlay={menu}
|
|
trigger={['click']}
|
|
visible={visible}
|
|
onVisibleChange={setVisible}
|
|
placement="topLeft"
|
|
>
|
|
<SelectZoom>{Math.floor(tools.zoom * 100)}%</SelectZoom>
|
|
</Dropdown>
|
|
);
|
|
};
|