import { React, useContext, useState } from "react"; import { IconCaretdown, IconChevronRight, IconShareStroked, IconChevronUp, IconChevronDown, IconCheckboxTick, } from "@douyinfe/semi-icons"; import { Link } from "react-router-dom"; import icon from "../assets/icon_dark_64.png"; import { Avatar, AvatarGroup, Button, Divider, Dropdown, Form, Image, Modal, Spin, } from "@douyinfe/semi-ui"; import { toPng, toJpeg, toSvg } from "html-to-image"; import { saveAs } from "file-saver"; import { enterFullscreen, exitFullscreen } from "../utils"; import { LayoutContext } from "../pages/editor"; export default function ControlPanel(props) { const [visible, setVisible] = useState(false); const [dataUrl, setDataUrl] = useState(""); const [filename, setFilename] = useState( `diagram_${new Date().toISOString()}` ); const [extension, setExtension] = useState(""); const { layout, setLayout } = useContext(LayoutContext); const menu = { File: { New: { children: [], function: () => console.log("New"), }, "New window": { children: [], function: () => {}, }, Save: { children: [], function: () => {}, }, "Save as": { children: [], function: () => {}, }, Share: { children: [], function: () => {}, }, Rename: { children: [], function: () => {}, }, Import: { children: [], function: () => {}, }, "Export as": { children: [ { PNG: () => { toPng(document.getElementById("canvas")).then(function (dataUrl) { setDataUrl(dataUrl); }); setVisible(true); setExtension("png"); }, }, { JPEG: () => { toJpeg(document.getElementById("canvas"), { quality: 0.95 }).then( function (dataUrl) { setDataUrl(dataUrl); } ); setVisible(true); setExtension("jpeg"); }, }, { XML: () => {} }, { SVG: () => { const filter = (node) => node.tagName !== "i"; toSvg(document.getElementById("canvas"), { filter: filter }).then( function (dataUrl) { setDataUrl(dataUrl); } ); setVisible(true); setExtension("svg"); }, }, { PDF: () => {} }, ], function: () => {}, }, "Export source": { children: [ { MySQL: () => {} }, { PostgreSQL: () => {} }, { DBML: () => {} }, ], function: () => {}, }, Properties: { children: [], function: () => {}, }, Close: { children: [], function: () => {}, }, }, Edit: { Undo: { children: [], function: () => {}, }, Redo: { children: [], function: () => {}, }, Cut: { children: [], function: () => {}, }, Copy: { children: [], function: () => {}, }, "Copy as image": { children: [], function: () => {}, }, Paste: { children: [], function: () => {}, }, Delete: { children: [], function: () => {}, }, "Edit table": { children: [], function: () => {}, }, }, View: { Toolbar: { children: [], function: () => {}, }, Grid: { children: [], function: () => {}, }, Sidebar: { children: [], function: () => {}, }, Editor: { children: [], function: () => {}, }, "Strict mode": { children: [], function: () => {}, }, "Reset view": { children: [], function: () => {}, }, "View schema": { children: [], function: () => {}, }, Theme: { children: [{ Light: () => {} }, { Dark: () => {} }], function: () => {}, }, "Zoom in": { children: [], function: () => {}, }, "Zoom out": { children: [], function: () => {}, }, Fullscreen: { children: [], function: enterFullscreen, }, }, Logs: { "Open logs": { children: [], function: () => {}, }, "Commit changes": { children: [], function: () => {}, }, "Revert changes": { children: [], function: () => {}, }, "View commits": { children: [], function: () => {}, }, }, Help: { Shortcuts: { children: [], function: () => {}, }, "Ask us on discord": { children: [], function: () => {}, }, "Tweet us": { children: [], function: () => {}, }, "Found a bug": { children: [], function: () => {}, }, }, }; return (
{layout.header && header()}
{layoutDropdown()} Fit window {[ "25%", "50%", "75%", "100%", "125%", "150%", "200%", "300%", ].map((e, i) => ( {e} ))}
%
} /> } trigger="click" >
zoom
Table Note Subject area Text } trigger="click" >
saveAs(dataUrl, `${filename}.${extension}`)} afterClose={() => { setFilename(`diagram_${new Date().toISOString()}`); setDataUrl(""); }} onCancel={() => setVisible(false)} centered closeOnEsc={true} okText="Export" cancelText="Cancel" width={470} > {dataUrl !== "" || dataUrl ? ( Diagram ) : (
)}
{ setFilename((prev) => value.values["filename"] !== undefined ? value.values["filename"] : prev ); }} > {`.${extension}`}} initValue={filename} />
); function header() { return ( ); } function layoutDropdown() { return ( ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, header: !prev.header, })) } > Header ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, tables: !prev.tables, })) } > Tables ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, relationships: !prev.relationships, })) } > Relationships ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, issues: !prev.issues, })) } > Issues ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, areas: !prev.areas, })) } > Subject areas ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, editor: !prev.editor, })) } > Editor ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, shapes: !prev.shapes, })) } > Shapes } > ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, sidebar: !prev.sidebar, })) } > Sidebar ) : (
) } onClick={() => setLayout((prev) => ({ ...prev, services: !prev.services, })) } > Services ) : (
) } onClick={() => { if (layout.fullscreen) { exitFullscreen(); } else { enterFullscreen(); } setLayout((prev) => ({ ...prev, fullscreen: !prev.fullscreen, })); }} > Fullscreen } trigger="click" >
); } }