mirror of
https://github.com/whyour/qinglong.git
synced 2025-12-13 07:25:05 +08:00
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import { usePlaygroundTools } from '@flowgram.ai/fixed-layout-editor';
|
|
import { Divider, Dropdown, Menu } from 'antd';
|
|
|
|
import { SelectZoom } from './styles';
|
|
|
|
export const ZoomSelect = () => {
|
|
const tools = usePlaygroundTools({ maxZoom: 2, minZoom: 0.25 });
|
|
const [dropDownVisible, openDropDown] = useState(false);
|
|
return (
|
|
<Dropdown
|
|
placement="top"
|
|
visible={dropDownVisible}
|
|
// onClickOutSide={() => openDropDown(false)}
|
|
dropdownRender={() => (
|
|
<Menu>
|
|
<Menu.Item onClick={() => tools.zoomin()}>Zoomin</Menu.Item>
|
|
<Menu.Item onClick={() => tools.zoomout()}>Zoomout</Menu.Item>
|
|
<Divider layout="horizontal" />
|
|
<Menu.Item onClick={() => tools.updateZoom(0.5)}>50%</Menu.Item>
|
|
<Menu.Item onClick={() => tools.updateZoom(1)}>100%</Menu.Item>
|
|
<Menu.Item onClick={() => tools.updateZoom(1.5)}>150%</Menu.Item>
|
|
<Menu.Item onClick={() => tools.updateZoom(2.0)}>200%</Menu.Item>
|
|
</Menu>
|
|
)}
|
|
>
|
|
<SelectZoom onClick={() => openDropDown(true)}>{Math.floor(tools.zoom * 100)}%</SelectZoom>
|
|
</Dropdown>
|
|
);
|
|
};
|