2023-09-19 20:47:16 +08:00
|
|
|
import { React, useState } from "react";
|
|
|
|
import {
|
2023-09-19 20:48:20 +08:00
|
|
|
IconCaretdown,
|
|
|
|
IconChevronRight,
|
|
|
|
IconShareStroked,
|
|
|
|
IconChevronUp,
|
|
|
|
IconChevronDown,
|
2023-09-19 20:48:22 +08:00
|
|
|
IconCheckboxTick,
|
2023-09-19 20:48:20 +08:00
|
|
|
} from "@douyinfe/semi-icons";
|
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
import icon from "../assets/icon_dark_64.png";
|
|
|
|
import {
|
|
|
|
Avatar,
|
|
|
|
AvatarGroup,
|
|
|
|
Button,
|
|
|
|
Divider,
|
|
|
|
Dropdown,
|
2023-09-19 20:48:22 +08:00
|
|
|
Form,
|
2023-09-19 20:48:26 +08:00
|
|
|
Image,
|
|
|
|
Modal,
|
2023-09-19 20:48:20 +08:00
|
|
|
} from "@douyinfe/semi-ui";
|
2023-09-19 20:48:26 +08:00
|
|
|
import { toPng } from "html-to-image";
|
|
|
|
import { saveAs } from "file-saver";
|
2023-09-19 20:46:48 +08:00
|
|
|
|
|
|
|
export default function ControlPanel() {
|
2023-09-19 20:47:16 +08:00
|
|
|
const [showToolBar, setShowToolBar] = useState(true);
|
|
|
|
|
2023-09-19 20:48:26 +08:00
|
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
const [dataUrl, setDataUrl] = useState("");
|
|
|
|
const [filename, setFilename] = useState(
|
|
|
|
`diagram_${new Date().toISOString()}`
|
|
|
|
);
|
|
|
|
|
|
|
|
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);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{ ".jpg": () => {} },
|
|
|
|
{ ".xml": () => {} },
|
|
|
|
{ ".svg": () => {} },
|
|
|
|
{ ".xml": () => {} },
|
|
|
|
],
|
|
|
|
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: () => {},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
Insert: {
|
|
|
|
"New table": {
|
|
|
|
children: [],
|
|
|
|
function: () => {},
|
|
|
|
},
|
|
|
|
"New relationship": {
|
|
|
|
children: [],
|
|
|
|
function: () => {},
|
|
|
|
},
|
|
|
|
Note: {
|
|
|
|
children: [],
|
|
|
|
function: () => {},
|
|
|
|
},
|
|
|
|
Image: {
|
|
|
|
children: [],
|
|
|
|
function: () => {},
|
|
|
|
},
|
|
|
|
Textbox: {
|
|
|
|
children: [],
|
|
|
|
function: () => {},
|
|
|
|
},
|
|
|
|
Shape: {
|
|
|
|
children: [],
|
|
|
|
function: () => {},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
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: () => {},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2023-09-19 20:46:48 +08:00
|
|
|
return (
|
2023-09-19 20:48:20 +08:00
|
|
|
<>
|
|
|
|
{showToolBar && (
|
2023-09-19 20:48:26 +08:00
|
|
|
<nav className="flex justify-between pt-1 items-center whitespace-nowrap">
|
2023-09-19 20:48:20 +08:00
|
|
|
<div className="flex justify-start items-center text-slate-800">
|
|
|
|
<Link to="/">
|
2023-09-19 20:48:26 +08:00
|
|
|
<img
|
|
|
|
width={54}
|
|
|
|
src={icon}
|
|
|
|
alt="logo"
|
|
|
|
className="ms-8 min-w-[54px]"
|
|
|
|
/>
|
2023-09-19 20:48:20 +08:00
|
|
|
</Link>
|
|
|
|
<div className="ms-1 mt-1">
|
|
|
|
<div className="text-xl ms-3">Project1 / Untitled</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
|
|
<div className="flex justify-start text-md select-none me-2">
|
|
|
|
{Object.keys(menu).map((category) => (
|
|
|
|
<Dropdown
|
|
|
|
key={category}
|
2023-09-19 20:48:22 +08:00
|
|
|
position="bottomLeft"
|
2023-09-19 20:48:20 +08:00
|
|
|
style={{ width: "200px" }}
|
|
|
|
render={
|
|
|
|
<Dropdown.Menu>
|
|
|
|
{Object.keys(menu[category]).map((item, index) => {
|
2023-09-19 20:48:25 +08:00
|
|
|
if (menu[category][item].children.length > 0) {
|
2023-09-19 20:48:20 +08:00
|
|
|
return (
|
|
|
|
<Dropdown
|
|
|
|
style={{ width: "120px" }}
|
|
|
|
key={item}
|
|
|
|
position={"rightTop"}
|
|
|
|
render={
|
|
|
|
<Dropdown.Menu>
|
2023-09-19 20:48:25 +08:00
|
|
|
{menu[category][item].children.map(
|
|
|
|
(e, i) => (
|
2023-09-19 20:48:26 +08:00
|
|
|
<Dropdown.Item
|
|
|
|
key={i}
|
|
|
|
onClick={Object.values(e)[0]}
|
|
|
|
>
|
|
|
|
{Object.keys(e)[0]}
|
2023-09-19 20:48:25 +08:00
|
|
|
</Dropdown.Item>
|
|
|
|
)
|
|
|
|
)}
|
2023-09-19 20:48:20 +08:00
|
|
|
</Dropdown.Menu>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Dropdown.Item
|
|
|
|
style={{
|
|
|
|
display: "flex",
|
|
|
|
justifyContent: "space-between",
|
2023-09-19 20:48:22 +08:00
|
|
|
alignItems: "center",
|
2023-09-19 20:48:20 +08:00
|
|
|
}}
|
2023-09-19 20:48:26 +08:00
|
|
|
onClick={menu[category][item].function}
|
2023-09-19 20:48:20 +08:00
|
|
|
>
|
2023-09-19 20:48:26 +08:00
|
|
|
{item}
|
2023-09-19 20:48:20 +08:00
|
|
|
<IconChevronRight />
|
|
|
|
</Dropdown.Item>
|
|
|
|
</Dropdown>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return (
|
2023-09-19 20:48:26 +08:00
|
|
|
<Dropdown.Item
|
|
|
|
key={index}
|
|
|
|
onClick={menu[category][item].function}
|
|
|
|
>
|
|
|
|
{item}
|
2023-09-19 20:48:25 +08:00
|
|
|
</Dropdown.Item>
|
2023-09-19 20:48:20 +08:00
|
|
|
);
|
|
|
|
})}
|
|
|
|
</Dropdown.Menu>
|
|
|
|
}
|
2023-09-19 20:47:15 +08:00
|
|
|
>
|
2023-09-19 20:48:20 +08:00
|
|
|
<div className="px-3 py-1 hover:bg-gray-100">
|
|
|
|
{category}
|
|
|
|
</div>
|
|
|
|
</Dropdown>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
<Button size="small" type="tertiary">
|
|
|
|
Last saved {new Date().toISOString()}
|
|
|
|
</Button>
|
|
|
|
</div>
|
2023-09-19 20:47:15 +08:00
|
|
|
</div>
|
2023-09-19 20:48:20 +08:00
|
|
|
</div>
|
|
|
|
<div className="flex justify-around items-center text-md me-8">
|
|
|
|
<AvatarGroup maxCount={3} size="default">
|
|
|
|
<Avatar color="red" alt="Lisa LeBlanc">
|
|
|
|
LL
|
|
|
|
</Avatar>
|
|
|
|
<Avatar color="green" alt="Caroline Xiao">
|
|
|
|
CX
|
|
|
|
</Avatar>
|
|
|
|
<Avatar color="amber" alt="Rafal Matin">
|
|
|
|
RM
|
|
|
|
</Avatar>
|
|
|
|
<Avatar alt="Zank Lance">ZL</Avatar>
|
|
|
|
<Avatar alt="Youself Zhang">YZ</Avatar>
|
|
|
|
</AvatarGroup>
|
|
|
|
<Button
|
|
|
|
type="primary"
|
|
|
|
style={{
|
|
|
|
fontSize: "16px",
|
|
|
|
marginLeft: "12px",
|
|
|
|
marginRight: "12px",
|
|
|
|
}}
|
|
|
|
size="large"
|
|
|
|
icon={<IconShareStroked />}
|
|
|
|
>
|
|
|
|
Share
|
|
|
|
</Button>
|
|
|
|
<Avatar size="default" alt="Buni Zhang">
|
|
|
|
BZ
|
|
|
|
</Avatar>
|
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
)}
|
2023-09-19 20:48:22 +08:00
|
|
|
<div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700">
|
2023-09-19 20:48:20 +08:00
|
|
|
<div className="flex justify-start items-center">
|
2023-09-19 20:48:22 +08:00
|
|
|
<Dropdown
|
|
|
|
position="bottomLeft"
|
|
|
|
style={{ width: "180px" }}
|
|
|
|
render={
|
|
|
|
<Dropdown.Menu>
|
|
|
|
<Dropdown.Item icon={<IconCheckboxTick />}>
|
|
|
|
Header
|
|
|
|
</Dropdown.Item>
|
|
|
|
<Dropdown.Item icon={<IconCheckboxTick />}>
|
|
|
|
Overview
|
|
|
|
</Dropdown.Item>
|
|
|
|
<Dropdown.Item icon={<IconCheckboxTick />}>
|
|
|
|
Services
|
|
|
|
</Dropdown.Item>
|
|
|
|
<Dropdown.Divider />
|
|
|
|
<Dropdown.Item icon={<IconCheckboxTick />}>
|
|
|
|
Fullscreen
|
|
|
|
</Dropdown.Item>
|
|
|
|
</Dropdown.Menu>
|
|
|
|
}
|
|
|
|
trigger="click"
|
|
|
|
>
|
|
|
|
<div className="py-1 px-2 hover:bg-gray-300">
|
|
|
|
<i className="fa-solid fa-table-list"></i> <IconCaretdown />
|
|
|
|
</div>
|
|
|
|
</Dropdown>
|
|
|
|
<Divider layout="vertical" margin="8px" />
|
|
|
|
<Dropdown
|
|
|
|
style={{ width: "180px" }}
|
|
|
|
position="bottomLeft"
|
|
|
|
render={
|
|
|
|
<Dropdown.Menu>
|
|
|
|
<Dropdown.Item>Fit window</Dropdown.Item>
|
|
|
|
<Dropdown.Divider />
|
|
|
|
{[
|
|
|
|
"25%",
|
|
|
|
"50%",
|
|
|
|
"75%",
|
|
|
|
"100%",
|
|
|
|
"125%",
|
|
|
|
"150%",
|
|
|
|
"200%",
|
|
|
|
"300%",
|
|
|
|
].map((e, i) => (
|
|
|
|
<Dropdown.Item key={i}>{e}</Dropdown.Item>
|
|
|
|
))}
|
|
|
|
<Dropdown.Divider />
|
|
|
|
<Dropdown.Item>
|
|
|
|
<Form>
|
|
|
|
<Form.InputNumber
|
|
|
|
field="zoom"
|
|
|
|
label="Custom zoom"
|
|
|
|
placeholder="Zoom"
|
|
|
|
suffix={<div className="p-1">%</div>}
|
|
|
|
/>
|
|
|
|
</Form>
|
|
|
|
</Dropdown.Item>
|
|
|
|
</Dropdown.Menu>
|
|
|
|
}
|
|
|
|
trigger="click"
|
|
|
|
>
|
|
|
|
<div className="py-1 px-2 hover:bg-gray-300">
|
2023-09-19 20:48:20 +08:00
|
|
|
zoom <IconCaretdown />
|
2023-09-19 20:48:22 +08:00
|
|
|
</div>
|
|
|
|
</Dropdown>
|
2023-09-19 20:47:16 +08:00
|
|
|
<button className="py-1 px-2 hover:bg-gray-300" title="Zoom in">
|
|
|
|
<i className="fa-solid fa-magnifying-glass-plus"></i>
|
|
|
|
</button>
|
|
|
|
<button className="py-1 px-2 hover:bg-gray-300" title="Zoom out">
|
|
|
|
<i className="fa-solid fa-magnifying-glass-minus"></i>
|
|
|
|
</button>
|
2023-09-19 20:48:22 +08:00
|
|
|
<Divider layout="vertical" margin="8px" />
|
2023-09-19 20:47:17 +08:00
|
|
|
<button className="py-1 px-2 hover:bg-gray-300" title="Undo">
|
2023-09-19 20:47:16 +08:00
|
|
|
<i className="fa-solid fa-rotate-left "></i>
|
|
|
|
</button>
|
|
|
|
<button className="py-1 px-2 hover:bg-gray-300" title="Redo">
|
|
|
|
<i className="fa-solid fa-rotate-right"></i>
|
|
|
|
</button>
|
2023-09-19 20:48:22 +08:00
|
|
|
<Divider layout="vertical" margin="8px" />
|
|
|
|
<Dropdown
|
|
|
|
position="bottomLeft"
|
|
|
|
style={{ width: "180px" }}
|
|
|
|
render={
|
|
|
|
<Dropdown.Menu>
|
|
|
|
<Dropdown.Item>Table</Dropdown.Item>
|
|
|
|
<Dropdown.Item>Note</Dropdown.Item>
|
|
|
|
<Dropdown.Item>Subject area</Dropdown.Item>
|
|
|
|
<Dropdown.Item>Text</Dropdown.Item>
|
|
|
|
</Dropdown.Menu>
|
|
|
|
}
|
|
|
|
trigger="click"
|
|
|
|
>
|
|
|
|
<div className="py-1 px-2 hover:bg-gray-300">
|
|
|
|
<i className="fa-solid fa-plus"></i> <IconCaretdown />
|
|
|
|
</div>
|
|
|
|
</Dropdown>
|
2023-09-19 20:47:16 +08:00
|
|
|
<button className="py-1 px-2 hover:bg-gray-300" title="Edit">
|
|
|
|
<i className="fa-solid fa-pen-to-square"></i>
|
|
|
|
</button>
|
|
|
|
<button className="py-1 px-2 hover:bg-gray-300" title="Delete">
|
|
|
|
<i className="fa-solid fa-trash"></i>
|
|
|
|
</button>
|
2023-09-19 20:48:22 +08:00
|
|
|
<Divider layout="vertical" margin="8px" />
|
|
|
|
<button className="py-1 px-2 hover:bg-gray-300" title="Save">
|
|
|
|
<i className="fa-regular fa-floppy-disk"></i>
|
2023-09-19 20:47:16 +08:00
|
|
|
</button>
|
|
|
|
<button className="py-1 px-2 hover:bg-gray-300" title="Commit">
|
2023-09-19 20:48:22 +08:00
|
|
|
<i className="fa-solid fa-code-branch"></i>
|
2023-09-19 20:47:16 +08:00
|
|
|
</button>
|
|
|
|
</div>
|
2023-09-19 20:48:22 +08:00
|
|
|
<button onClick={(e) => setShowToolBar((prev) => !prev)}>
|
2023-09-19 20:48:20 +08:00
|
|
|
{showToolBar ? <IconChevronUp /> : <IconChevronDown />}
|
|
|
|
</button>
|
|
|
|
</div>
|
2023-09-19 20:48:26 +08:00
|
|
|
<Modal
|
|
|
|
title="Export diagram"
|
|
|
|
visible={visible}
|
|
|
|
onOk={() => saveAs(dataUrl, `${filename}.png`)}
|
|
|
|
afterClose={() => setFilename(`diagram_${new Date().toISOString()}`)}
|
|
|
|
onCancel={() => setVisible(false)}
|
|
|
|
centered
|
|
|
|
closeOnEsc={true}
|
|
|
|
okText="Export"
|
|
|
|
cancelText="Cancel"
|
|
|
|
width={470}
|
|
|
|
>
|
|
|
|
<Image src={dataUrl} alt="Diagram" width={420}></Image>
|
|
|
|
<Form
|
|
|
|
labelPosition="left"
|
|
|
|
labelAlign="right"
|
|
|
|
onChange={(value) => {
|
|
|
|
console.log(value.values);
|
|
|
|
setFilename(value.values["filename"]);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Form.Input
|
|
|
|
field="filename"
|
|
|
|
label="Filename"
|
|
|
|
suffix={<div className="p-2">.png</div>}
|
|
|
|
initValue={filename}
|
|
|
|
/>
|
|
|
|
</Form>
|
|
|
|
</Modal>
|
2023-09-19 20:48:20 +08:00
|
|
|
</>
|
2023-09-19 20:46:48 +08:00
|
|
|
);
|
|
|
|
}
|