@coding-flow/flow-design 0.0.1

package/dist/components/design-editor/tools/download.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useService } from "@flowgram.ai/fixed-layout-editor";
+import { FlowDownloadFormat, FlowDownloadService } from "@flowgram.ai/export-plugin";
+import { Button, Dropdown, Tooltip, message } from "antd";
+import { DownloadOutlined } from "@ant-design/icons";
+const DownloadTool = ()=>{
+    const [downloading, setDownloading] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const downloadService = useService(FlowDownloadService);
+    const items = [
+        {
+            label: 'PNG',
+            key: 'png',
+            onClick: async ()=>{
+                await handleDownload(FlowDownloadFormat.PNG);
+            }
+        },
+        {
+            label: 'JPEG',
+            key: 'jpeg',
+            onClick: async ()=>{
+                await handleDownload(FlowDownloadFormat.JPEG);
+            }
+        }
+    ];
+    const handleDownload = async (format)=>{
+        await downloadService.download({
+            format
+        });
+        message.success(`Download ${format} successfully`);
+    };
+    useEffect(()=>{
+        const subscription = downloadService.onDownloadingChange((v)=>{
+            setDownloading(v);
+        });
+        return ()=>{
+            subscription.dispose();
+        };
+    }, [
+        downloadService
+    ]);
+    return /*#__PURE__*/ jsx(Dropdown, {
+        menu: {
+            items
+        },
+        trigger: [
+            'click'
+        ],
+        onOpenChange: (open)=>{
+            setVisible(open);
+        },
+        children: /*#__PURE__*/ jsx(Tooltip, {
+            title: visible ? null : "Download",
+            trigger: "hover",
+            open: visible ? false : void 0,
+            children: /*#__PURE__*/ jsx(Button, {
+                type: "text",
+                icon: /*#__PURE__*/ jsx(DownloadOutlined, {}),
+                loading: downloading
+            })
+        })
+    });
+};
+export { DownloadTool };

package/dist/components/design-editor/tools/fit-view.d.ts

@@ -0,0 +1,3 @@
+export declare const FitView: (props: {
+    fitView: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/fit-view.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { ArrowsAltOutlined } from "@ant-design/icons";
+import { Button, Tooltip } from "antd";
+const FitView = (props)=>/*#__PURE__*/ jsx(Tooltip, {
+        title: "FitView",
+        children: /*#__PURE__*/ jsx(Button, {
+            type: "text",
+            icon: /*#__PURE__*/ jsx(ArrowsAltOutlined, {}),
+            onClick: ()=>props.fitView()
+        })
+    });
+export { FitView };

package/dist/components/design-editor/tools/index.d.ts

@@ -0,0 +1 @@
+export declare const EditorTools: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/index.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { ToolContainer, ToolSection } from "../styles.js";
+import { SwitchVertical } from "./switch-vertical.js";
+import { ZoomSelect } from "./zoom-select.js";
+import { usePlaygroundTools } from "@flowgram.ai/fixed-layout-editor";
+import { FitView } from "./fit-view.js";
+import { MinimapSwitch } from "./minimap-switch.js";
+import { Minimap } from "./minimap.js";
+import { Readonly } from "./readonly.js";
+import { Undo } from "./undo.js";
+import { Redo } from "./redo.js";
+import { DownloadTool } from "./download.js";
+import { Interactive } from "./interactive.js";
+const EditorTools = ()=>{
+    const tools = usePlaygroundTools();
+    const [minimapVisible, setMinimapVisible] = react.useState(false);
+    return /*#__PURE__*/ jsx(ToolContainer, {
+        children: /*#__PURE__*/ jsxs(ToolSection, {
+            children: [
+                /*#__PURE__*/ jsx(Interactive, {}),
+                /*#__PURE__*/ jsx(SwitchVertical, {}),
+                /*#__PURE__*/ jsx(ZoomSelect, {}),
+                /*#__PURE__*/ jsx(FitView, {
+                    fitView: tools.fitView
+                }),
+                /*#__PURE__*/ jsx(MinimapSwitch, {
+                    minimapVisible: minimapVisible,
+                    setMinimapVisible: setMinimapVisible
+                }),
+                /*#__PURE__*/ jsx(Minimap, {
+                    visible: minimapVisible
+                }),
+                /*#__PURE__*/ jsx(Readonly, {}),
+                /*#__PURE__*/ jsx(Undo, {}),
+                /*#__PURE__*/ jsx(Redo, {}),
+                /*#__PURE__*/ jsx(DownloadTool, {})
+            ]
+        })
+    });
+};
+export { EditorTools };

package/dist/components/design-editor/tools/interactive.d.ts

@@ -0,0 +1,9 @@
+export declare const CACHE_KEY = "workflow_prefer_interactive_type";
+export declare const IS_MAC_OS: boolean;
+export declare const getPreferInteractiveType: () => string;
+export declare const setPreferInteractiveType: (type: InteractiveType) => void;
+export declare enum InteractiveType {
+    Mouse = "MOUSE",
+    Pad = "PAD"
+}
+export declare const Interactive: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/interactive.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { usePlaygroundTools } from "@flowgram.ai/fixed-layout-editor";
+import { MousePadSelector } from "./mouse-pad-selector.js";
+import { Tooltip } from "antd";
+const CACHE_KEY = 'workflow_prefer_interactive_type';
+const IS_MAC_OS = /(Macintosh|MacIntel|MacPPC|Mac68K|iPad)/.test(navigator.userAgent);
+const getPreferInteractiveType = ()=>{
+    const data = localStorage.getItem(CACHE_KEY);
+    if (data && [
+        "MOUSE",
+        "PAD"
+    ].includes(data)) return data;
+    return IS_MAC_OS ? "PAD" : "MOUSE";
+};
+const setPreferInteractiveType = (type)=>{
+    localStorage.setItem(CACHE_KEY, type);
+};
+var interactive_InteractiveType = /*#__PURE__*/ function(InteractiveType) {
+    InteractiveType["Mouse"] = "MOUSE";
+    InteractiveType["Pad"] = "PAD";
+    return InteractiveType;
+}({});
+const Interactive = ()=>{
+    const tools = usePlaygroundTools();
+    const [interactiveType, setInteractiveType] = useState(()=>getPreferInteractiveType());
+    const [showInteractivePanel, setShowInteractivePanel] = useState(false);
+    const mousePadTooltip = "MOUSE" === interactiveType ? 'Mouse-Friendly' : 'Touchpad-Friendly';
+    useEffect(()=>{
+        const preferInteractiveType = getPreferInteractiveType();
+        tools.setInteractiveType(preferInteractiveType);
+    }, []);
+    return /*#__PURE__*/ jsx(Tooltip, {
+        title: mousePadTooltip,
+        trigger: "hover",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "workflow-toolbar-interactive",
+            children: /*#__PURE__*/ jsx(MousePadSelector, {
+                value: interactiveType,
+                onChange: (value)=>{
+                    setInteractiveType(value);
+                    setPreferInteractiveType(value);
+                    tools.setInteractiveType(value);
+                },
+                onPopupVisibleChange: setShowInteractivePanel,
+                containerStyle: {
+                    border: 'none',
+                    height: '32px',
+                    width: '32px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '2px',
+                    padding: '4px',
+                    borderRadius: 'var(--small, 6px)'
+                },
+                iconStyle: {
+                    margin: '0',
+                    width: '16px',
+                    height: '16px'
+                },
+                arrowStyle: {
+                    width: '12px',
+                    height: '12px'
+                }
+            })
+        })
+    });
+};
+export { CACHE_KEY, IS_MAC_OS, Interactive, interactive_InteractiveType as InteractiveType, getPreferInteractiveType, setPreferInteractiveType };

package/dist/components/design-editor/tools/minimap-switch.d.ts

@@ -0,0 +1,4 @@
+export declare const MinimapSwitch: (props: {
+    minimapVisible: boolean;
+    setMinimapVisible: (visible: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/minimap-switch.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { InsertRowBelowOutlined } from "@ant-design/icons";
+import { Button, Tooltip } from "antd";
+const MinimapSwitch = (props)=>{
+    const { minimapVisible, setMinimapVisible } = props;
+    return /*#__PURE__*/ jsx(Tooltip, {
+        title: "Minimap",
+        children: /*#__PURE__*/ jsx(Button, {
+            type: "text",
+            icon: /*#__PURE__*/ jsx(InsertRowBelowOutlined, {
+                style: {
+                    color: minimapVisible ? void 0 : '#060709cc'
+                }
+            }),
+            onClick: ()=>{
+                setMinimapVisible(Boolean(!minimapVisible));
+            }
+        })
+    });
+};
+export { MinimapSwitch };

package/dist/components/design-editor/tools/minimap.d.ts

@@ -0,0 +1,3 @@
+export declare const Minimap: ({ visible }: {
+    visible?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/minimap.js

@@ -0,0 +1,26 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { MinimapRender } from "@flowgram.ai/minimap-plugin";
+import { MinimapContainer } from "../styles.js";
+const Minimap = ({ visible })=>{
+    if (!visible) return /*#__PURE__*/ jsx(Fragment, {});
+    return /*#__PURE__*/ jsx(MinimapContainer, {
+        children: /*#__PURE__*/ jsx(MinimapRender, {
+            panelStyles: {},
+            containerStyles: {
+                pointerEvents: 'auto',
+                position: 'relative',
+                top: 'unset',
+                right: 'unset',
+                bottom: 'unset',
+                left: 'unset'
+            },
+            inactiveStyle: {
+                opacity: 1,
+                scale: 1,
+                translateX: 0,
+                translateY: 0
+            }
+        })
+    });
+};
+export { Minimap };

package/dist/components/design-editor/tools/mouse-pad-selector.css

@@ -0,0 +1,100 @@
+.ui-mouse-pad-selector {
+  box-sizing: border-box;
+  border: 1px solid #1d1c2314;
+  border-radius: 8px;
+  align-items: center;
+  width: 68px;
+  height: 32px;
+  padding: 8px 12px;
+  display: flex;
+  position: relative;
+}
+
+.ui-mouse-pad-selector-icon {
+  height: 20px;
+  margin-right: 12px;
+}
+
+.ui-mouse-pad-selector-arrow {
+  height: 16px;
+  font-size: 12px;
+}
+
+.ui-mouse-pad-selector-popover {
+  padding: 16px;
+}
+
+.ui-mouse-pad-selector-popover-options {
+  gap: 12px;
+  margin-top: 12px;
+  display: flex;
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option {
+  box-sizing: border-box;
+  text-align: center;
+  background: var(--coz-mg-card, #fff);
+  border: 1px solid var(--coz-stroke-plus, #06070926);
+  border-radius: var(--default, 8px);
+  width: 220px;
+  padding-bottom: 20px;
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option-icon {
+  padding-top: 26px;
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option-title {
+  padding-top: 8px;
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option-subTitle {
+  padding: 4px 12px 0;
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option-icon-selected {
+  color: #1300dd;
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option-title-selected, .ui-mouse-pad-selector-popover .mouse-pad-option-subTitle-selected {
+  color: var(--coz-fg-hglt, #4e40e5);
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option-selected {
+  cursor: pointer;
+  background-color: var(--coz-mg-hglt, #bac0ff33);
+  border: 1px solid var(--coz-stroke-hglt, #4e40e5);
+  border-radius: var(--default, 8px);
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option:hover:not(.ui-mouse-pad-selector-popover .mouse-pad-option-selected) {
+  cursor: pointer;
+  background-color: var(--coz-mg-card-hovered, #fff);
+  border: 1px solid var(--coz-stroke-plus, #06070926);
+  border-radius: var(--default, 8px);
+  box-shadow: 0 8px 24px #00000029, 0 16px 48px #00000014;
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option:active:not(.ui-mouse-pad-selector-popover .mouse-pad-option-selected) {
+  background-color: #2e2e381f;
+}
+
+.ui-mouse-pad-selector-popover .mouse-pad-option:last-of-type {
+  padding-top: 13px;
+}
+
+.ui-mouse-pad-selector:hover {
+  cursor: pointer;
+  background-color: #2e2e3814;
+  border-color: #4d53e8;
+}
+
+.ui-mouse-pad-selector:active, .ui-mouse-pad-selector:focus {
+  background-color: #2e2e381f;
+  border-color: #4d53e8;
+}
+
+.ui-mouse-pad-selector-active {
+  border-color: #4d53e8;
+}
+

package/dist/components/design-editor/tools/mouse-pad-selector.d.ts

@@ -0,0 +1,15 @@
+import React, { type CSSProperties } from 'react';
+import './mouse-pad-selector.scss';
+export declare enum InteractiveType {
+    Mouse = "MOUSE",
+    Pad = "PAD"
+}
+export interface MousePadSelectorProps {
+    value: InteractiveType;
+    onChange: (value: InteractiveType) => void;
+    onPopupVisibleChange?: (visible: boolean) => void;
+    containerStyle?: CSSProperties;
+    iconStyle?: CSSProperties;
+    arrowStyle?: CSSProperties;
+}
+export declare const MousePadSelector: React.FC<MousePadSelectorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/design-editor/tools/mouse-pad-selector.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Popover, Typography } from "antd";
+import { IconPad, IconPadTool } from "../../../assets/icon-pad.js";
+import { IconMouse, IconMouseTool } from "../../../assets/icon-mouse.js";
+import "./mouse-pad-selector.css";
+const { Text, Title } = Typography;
+var mouse_pad_selector_InteractiveType = /*#__PURE__*/ function(InteractiveType) {
+    InteractiveType["Mouse"] = "MOUSE";
+    InteractiveType["Pad"] = "PAD";
+    return InteractiveType;
+}({});
+const InteractiveItem = ({ title, subTitle, icon, onChange, value, selected })=>/*#__PURE__*/ jsxs("div", {
+        className: `mouse-pad-option ${selected ? 'mouse-pad-option-selected' : ''}`,
+        onClick: ()=>onChange(value),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `mouse-pad-option-icon ${selected ? 'mouse-pad-option-icon-selected' : ''}`,
+                children: icon
+            }),
+            /*#__PURE__*/ jsx(Title, {
+                style: {
+                    margin: 0
+                },
+                level: 5,
+                className: `mouse-pad-option-title ${selected ? 'mouse-pad-option-title-selected' : ''}`,
+                children: title
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                className: `mouse-pad-option-subTitle ${selected ? 'mouse-pad-option-subTitle-selected' : ''}`,
+                children: subTitle
+            })
+        ]
+    });
+const MousePadSelector = ({ value, onChange, onPopupVisibleChange, containerStyle, iconStyle, arrowStyle })=>{
+    const isMouse = "MOUSE" === value;
+    const [visible, setVisible] = useState(false);
+    return /*#__PURE__*/ jsx(Popover, {
+        open: visible,
+        onOpenChange: (v)=>{
+            setVisible(false);
+            onPopupVisibleChange?.(v);
+        },
+        content: /*#__PURE__*/ jsxs("div", {
+            className: 'ui-mouse-pad-selector-popover',
+            children: [
+                /*#__PURE__*/ jsx(Title, {
+                    level: 4,
+                    style: {
+                        marginTop: 0
+                    },
+                    children: 'Interaction mode'
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: 'ui-mouse-pad-selector-popover-options',
+                    children: [
+                        /*#__PURE__*/ jsx(InteractiveItem, {
+                            title: 'Mouse-Friendly',
+                            subTitle: 'Drag the canvas with the left mouse button, zoom with the scroll wheel.',
+                            value: "MOUSE",
+                            selected: "MOUSE" === value,
+                            icon: /*#__PURE__*/ jsx(IconMouse, {}),
+                            onChange: onChange
+                        }),
+                        /*#__PURE__*/ jsx(InteractiveItem, {
+                            title: 'Touchpad-Friendly',
+                            subTitle: 'Drag with two fingers moving in the same direction, zoom by pinching or spreading two fingers.',
+                            value: "PAD",
+                            selected: "PAD" === value,
+                            icon: /*#__PURE__*/ jsx(IconPad, {}),
+                            onChange: onChange
+                        })
+                    ]
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ jsx("div", {
+            className: `ui-mouse-pad-selector ${visible ? 'ui-mouse-pad-selector-active' : ''}`,
+            onClick: ()=>{
+                setVisible(!visible);
+            },
+            style: containerStyle,
+            children: /*#__PURE__*/ jsx("div", {
+                className: 'ui-mouse-pad-selector-icon',
+                style: iconStyle,
+                children: isMouse ? /*#__PURE__*/ jsx(IconMouseTool, {}) : /*#__PURE__*/ jsx(IconPadTool, {})
+            })
+        })
+    });
+};
+export { mouse_pad_selector_InteractiveType as InteractiveType, MousePadSelector };

package/dist/components/design-editor/tools/readonly.d.ts

@@ -0,0 +1 @@
+export declare const Readonly: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/readonly.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { usePlayground, useRefresh } from "@flowgram.ai/fixed-layout-editor";
+import { Button, Tooltip } from "antd";
+import { LockOutlined, UnlockOutlined } from "@ant-design/icons";
+const Readonly = ()=>{
+    const playground = usePlayground();
+    const refresh = useRefresh();
+    react.useEffect(()=>{
+        const disposable = playground.config.onReadonlyOrDisabledChange(()=>refresh());
+        return ()=>disposable.dispose();
+    }, [
+        playground
+    ]);
+    const toggleReadonly = react.useCallback(()=>{
+        playground.config.readonly = !playground.config.readonly;
+    }, [
+        playground
+    ]);
+    return /*#__PURE__*/ jsxs(Tooltip, {
+        title: playground.config.readonly ? "Unlock" : "Lock",
+        children: [
+            playground.config.readonly && /*#__PURE__*/ jsx(Button, {
+                type: "text",
+                icon: /*#__PURE__*/ jsx(LockOutlined, {}),
+                onClick: toggleReadonly
+            }),
+            !playground.config.readonly && /*#__PURE__*/ jsx(Button, {
+                type: "text",
+                icon: /*#__PURE__*/ jsx(UnlockOutlined, {}),
+                onClick: toggleReadonly
+            })
+        ]
+    });
+};
+export { Readonly };

package/dist/components/design-editor/tools/redo.d.ts

@@ -0,0 +1 @@
+export declare const Redo: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/redo.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { RedoOutlined } from "@ant-design/icons";
+import { usePlayground, usePlaygroundTools } from "@flowgram.ai/fixed-layout-editor";
+import { Button, Tooltip } from "antd";
+import "react";
+const Redo = ()=>{
+    const tools = usePlaygroundTools();
+    const playground = usePlayground();
+    return /*#__PURE__*/ jsx(Tooltip, {
+        title: "Redo",
+        children: /*#__PURE__*/ jsx(Button, {
+            type: "text",
+            icon: /*#__PURE__*/ jsx(RedoOutlined, {}),
+            disabled: !tools.canRedo || playground.config.readonly,
+            onClick: ()=>tools.redo()
+        })
+    });
+};
+export { Redo };

package/dist/components/design-editor/tools/switch-vertical.d.ts

@@ -0,0 +1 @@
+export declare const SwitchVertical: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/switch-vertical.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { usePlaygroundTools } from "@flowgram.ai/fixed-layout-editor";
+import { RetweetOutlined } from "@ant-design/icons";
+import { Button, Tooltip } from "antd";
+const SwitchVertical = ()=>{
+    const tools = usePlaygroundTools();
+    return /*#__PURE__*/ jsx(Tooltip, {
+        title: tools.isVertical ? 'Horizontal Layout' : 'Vertical Layout',
+        children: /*#__PURE__*/ jsx(Button, {
+            type: "text",
+            onClick: ()=>tools.changeLayout(),
+            icon: /*#__PURE__*/ jsx(RetweetOutlined, {
+                size: 10,
+                style: {
+                    transform: tools.isVertical ? 'rotate(90deg)' : '',
+                    transition: 'transform .3s ease'
+                }
+            })
+        })
+    });
+};
+export { SwitchVertical };

package/dist/components/design-editor/tools/undo.d.ts

@@ -0,0 +1 @@
+export declare const Undo: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/undo.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { UndoOutlined } from "@ant-design/icons";
+import { usePlayground, usePlaygroundTools } from "@flowgram.ai/fixed-layout-editor";
+import { Button, Tooltip } from "antd";
+const Undo = ()=>{
+    const tools = usePlaygroundTools();
+    const playground = usePlayground();
+    return /*#__PURE__*/ jsx(Tooltip, {
+        title: "Undo",
+        children: /*#__PURE__*/ jsx(Button, {
+            type: "text",
+            icon: /*#__PURE__*/ jsx(UndoOutlined, {}),
+            disabled: !tools.canUndo || playground.config.readonly,
+            onClick: ()=>tools.undo()
+        })
+    });
+};
+export { Undo };

package/dist/components/design-editor/tools/zoom-select.d.ts

@@ -0,0 +1 @@
+export declare const ZoomSelect: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/design-editor/tools/zoom-select.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dropdown } from "antd";
+import { usePlaygroundTools } from "@flowgram.ai/fixed-layout-editor";
+import { SelectZoom } from "../styles.js";
+const ZoomSelect = ()=>{
+    const tools = usePlaygroundTools({
+        maxZoom: 2,
+        minZoom: 0.25
+    });
+    const items = [
+        {
+            label: 'Zoomin',
+            key: 'in',
+            onClick: ()=>{
+                tools.zoomin();
+            }
+        },
+        {
+            label: 'Zoomout',
+            key: 'out',
+            onClick: ()=>{
+                tools.zoomout();
+            }
+        },
+        {
+            type: 'divider'
+        },
+        {
+            label: '50%',
+            key: '50',
+            onClick: ()=>{
+                tools.updateZoom(0.5);
+            }
+        },
+        {
+            label: '100%',
+            key: '100',
+            onClick: ()=>{
+                tools.updateZoom(1);
+            }
+        },
+        {
+            label: '150%',
+            key: '150',
+            onClick: ()=>{
+                tools.updateZoom(1.5);
+            }
+        },
+        {
+            label: '200%',
+            key: '200',
+            onClick: ()=>{
+                tools.updateZoom(2);
+            }
+        }
+    ];
+    return /*#__PURE__*/ jsx(Dropdown, {
+        menu: {
+            items
+        },
+        trigger: [
+            'click'
+        ],
+        children: /*#__PURE__*/ jsx("a", {
+            onClick: (e)=>e.preventDefault(),
+            children: /*#__PURE__*/ jsxs(SelectZoom, {
+                children: [
+                    Math.floor(100 * tools.zoom),
+                    "%"
+                ]
+            })
+        })
+    });
+};
+export { ZoomSelect };