brr
This commit is contained in:
1ilit
parent
f760f844bb
commit
da7aed543b
@ -6,7 +6,7 @@ import {
|
|||||||
IconShareStroked,
|
IconShareStroked,
|
||||||
IconChevronUp,
|
IconChevronUp,
|
||||||
IconChevronDown,
|
IconChevronDown,
|
||||||
IconPlus,
|
IconCheckboxTick,
|
||||||
} from "@douyinfe/semi-icons";
|
} from "@douyinfe/semi-icons";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import icon from "../assets/icon_dark_64.png";
|
import icon from "../assets/icon_dark_64.png";
|
||||||
@ -16,40 +16,12 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Divider,
|
Divider,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
Form,
|
||||||
} from "@douyinfe/semi-ui";
|
} from "@douyinfe/semi-ui";
|
||||||
|
|
||||||
export default function ControlPanel() {
|
export default function ControlPanel() {
|
||||||
const Tool = {
|
|
||||||
TOOLBAR: 0,
|
|
||||||
ZOOM: 1,
|
|
||||||
UNDO: 2,
|
|
||||||
REDO: 3,
|
|
||||||
ADD: 4,
|
|
||||||
COUNT: 5,
|
|
||||||
};
|
|
||||||
|
|
||||||
const [showToolBar, setShowToolBar] = useState(true);
|
const [showToolBar, setShowToolBar] = useState(true);
|
||||||
const [openZoom, setOpenZoom] = useState(false);
|
|
||||||
const [openAdd, setOpenAdd] = useState(false);
|
|
||||||
|
|
||||||
const invert = (e, tool) => {
|
|
||||||
switch (tool) {
|
|
||||||
case Tool.TOOLBAR:
|
|
||||||
setShowToolBar((prev) => !prev);
|
|
||||||
break;
|
|
||||||
case Tool.ZOOM:
|
|
||||||
setOpenZoom((prev) => !prev);
|
|
||||||
setOpenAdd(false);
|
|
||||||
break;
|
|
||||||
case Tool.ADD:
|
|
||||||
setOpenAdd((prev) => !prev);
|
|
||||||
setOpenZoom(false);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{showToolBar && (
|
{showToolBar && (
|
||||||
@ -65,6 +37,7 @@ export default function ControlPanel() {
|
|||||||
{Object.keys(menu).map((category) => (
|
{Object.keys(menu).map((category) => (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
key={category}
|
key={category}
|
||||||
|
position="bottomLeft"
|
||||||
style={{ width: "200px" }}
|
style={{ width: "200px" }}
|
||||||
render={
|
render={
|
||||||
<Dropdown.Menu>
|
<Dropdown.Menu>
|
||||||
@ -89,7 +62,7 @@ export default function ControlPanel() {
|
|||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignItems: "center"
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div>{item}</div>
|
<div>{item}</div>
|
||||||
@ -99,9 +72,7 @@ export default function ControlPanel() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Dropdown.Item key={index}>
|
<Dropdown.Item key={index}>{item}</Dropdown.Item>
|
||||||
{item}
|
|
||||||
</Dropdown.Item>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</Dropdown.Menu>
|
</Dropdown.Menu>
|
||||||
@ -139,7 +110,6 @@ export default function ControlPanel() {
|
|||||||
fontSize: "16px",
|
fontSize: "16px",
|
||||||
marginLeft: "12px",
|
marginLeft: "12px",
|
||||||
marginRight: "12px",
|
marginRight: "12px",
|
||||||
border: "1px solid white",
|
|
||||||
}}
|
}}
|
||||||
size="large"
|
size="large"
|
||||||
icon={<IconShareStroked />}
|
icon={<IconShareStroked />}
|
||||||
@ -152,104 +122,119 @@ export default function ControlPanel() {
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
)}
|
)}
|
||||||
|
<div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700">
|
||||||
<div className="p-1 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700">
|
|
||||||
<div className="flex justify-start items-center">
|
<div className="flex justify-start items-center">
|
||||||
<div className="relative">
|
<Dropdown
|
||||||
<button className="ms-2 py-2 px-3 hover:bg-gray-300 relative">
|
position="bottomLeft"
|
||||||
<i className="fa-solid fa-table-list"></i>
|
style={{ width: "180px" }}
|
||||||
</button>
|
render={
|
||||||
<Divider layout="vertical" margin="8px" />
|
<Dropdown.Menu>
|
||||||
<button
|
<Dropdown.Item icon={<IconCheckboxTick />}>
|
||||||
className="py-2 px-3 hover:bg-gray-300 relative"
|
Header
|
||||||
onClick={(e) => invert(e, Tool.ZOOM)}
|
</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">
|
||||||
zoom <IconCaretdown />
|
zoom <IconCaretdown />
|
||||||
</button>
|
</div>
|
||||||
<ul
|
</Dropdown>
|
||||||
className={`${
|
|
||||||
openZoom ? "" : "hidden"
|
|
||||||
} w-[200px] flex-col drop-shadow-lg bg-white py-1 ms-2 absolute z-20 top-full`}
|
|
||||||
>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
Fit window
|
|
||||||
</li>
|
|
||||||
<hr />
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">25%</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">50%</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">75%</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
100%
|
|
||||||
</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
125%
|
|
||||||
</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
150%
|
|
||||||
</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
175%
|
|
||||||
</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
200%
|
|
||||||
</li>
|
|
||||||
<hr />
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
Custom
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<button className="py-1 px-2 hover:bg-gray-300" title="Zoom in">
|
<button className="py-1 px-2 hover:bg-gray-300" title="Zoom in">
|
||||||
<i className="fa-solid fa-magnifying-glass-plus"></i>
|
<i className="fa-solid fa-magnifying-glass-plus"></i>
|
||||||
</button>
|
</button>
|
||||||
<button className="py-1 px-2 hover:bg-gray-300" title="Zoom out">
|
<button className="py-1 px-2 hover:bg-gray-300" title="Zoom out">
|
||||||
<i className="fa-solid fa-magnifying-glass-minus"></i>
|
<i className="fa-solid fa-magnifying-glass-minus"></i>
|
||||||
</button>
|
</button>
|
||||||
|
<Divider layout="vertical" margin="8px" />
|
||||||
<button className="py-1 px-2 hover:bg-gray-300" title="Undo">
|
<button className="py-1 px-2 hover:bg-gray-300" title="Undo">
|
||||||
<i className="fa-solid fa-rotate-left "></i>
|
<i className="fa-solid fa-rotate-left "></i>
|
||||||
</button>
|
</button>
|
||||||
<button className="py-1 px-2 hover:bg-gray-300" title="Redo">
|
<button className="py-1 px-2 hover:bg-gray-300" title="Redo">
|
||||||
<i className="fa-solid fa-rotate-right"></i>
|
<i className="fa-solid fa-rotate-right"></i>
|
||||||
</button>
|
</button>
|
||||||
|
<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>
|
||||||
<button className="py-1 px-2 hover:bg-gray-300" title="Edit">
|
<button className="py-1 px-2 hover:bg-gray-300" title="Edit">
|
||||||
<i className="fa-solid fa-pen-to-square"></i>
|
<i className="fa-solid fa-pen-to-square"></i>
|
||||||
</button>
|
</button>
|
||||||
<div className="relative">
|
|
||||||
<button
|
|
||||||
className="py-1 px-2 hover:bg-gray-300 relative"
|
|
||||||
title="Add"
|
|
||||||
onClick={(e) => invert(e, Tool.ADD)}
|
|
||||||
>
|
|
||||||
<IconPlus />
|
|
||||||
<IconCaretdown />
|
|
||||||
</button>
|
|
||||||
<ul
|
|
||||||
className={`${
|
|
||||||
openAdd ? "" : "hidden"
|
|
||||||
} w-[200px] flex-col drop-shadow-lg bg-white py-1 absolute z-20 top-full`}
|
|
||||||
>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
Table
|
|
||||||
</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
Relationship
|
|
||||||
</li>
|
|
||||||
<li className="px-5 py-3 hover:bg-gray-200 relative z-20">
|
|
||||||
Note
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<button className="py-1 px-2 hover:bg-gray-300" title="Delete">
|
<button className="py-1 px-2 hover:bg-gray-300" title="Delete">
|
||||||
<i className="fa-solid fa-trash"></i>
|
<i className="fa-solid fa-trash"></i>
|
||||||
</button>
|
</button>
|
||||||
<button className="py-1 px-2 hover:bg-gray-300" title="Move">
|
<Divider layout="vertical" margin="8px" />
|
||||||
<i className="fa-regular fa-hand"></i>
|
<button className="py-1 px-2 hover:bg-gray-300" title="Save">
|
||||||
|
<i className="fa-regular fa-floppy-disk"></i>
|
||||||
</button>
|
</button>
|
||||||
<button className="py-1 px-2 hover:bg-gray-300" title="Commit">
|
<button className="py-1 px-2 hover:bg-gray-300" title="Commit">
|
||||||
<i className="fa-solid fa-code-commit"></i>
|
<i className="fa-solid fa-code-branch"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={(e) => invert(e, Tool.TOOLBAR)} className="me-3">
|
<button onClick={(e) => setShowToolBar((prev) => !prev)}>
|
||||||
{showToolBar ? <IconChevronUp /> : <IconChevronDown />}
|
{showToolBar ? <IconChevronUp /> : <IconChevronDown />}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user