functional navbar yey
This commit is contained in:
1ilit
parent
c83667be4e
commit
ddaeec79ec
@ -241,8 +241,12 @@ export default function Canvas(props) {
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
style={{ width: "100%", height: "100%", cursor: cursor, backgroundColor:"white" }}
|
||||
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
cursor: cursor,
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
@ -265,7 +269,7 @@ export default function Canvas(props) {
|
||||
</defs>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="url(#pattern-circles)"
|
||||
|
||||
@ -42,7 +42,7 @@ export default function ControlPanel() {
|
||||
render={
|
||||
<Dropdown.Menu>
|
||||
{Object.keys(menu[category]).map((item, index) => {
|
||||
if (menu[category][item].length > 0) {
|
||||
if (menu[category][item].children.length > 0) {
|
||||
return (
|
||||
<Dropdown
|
||||
style={{ width: "120px" }}
|
||||
@ -50,11 +50,17 @@ export default function ControlPanel() {
|
||||
position={"rightTop"}
|
||||
render={
|
||||
<Dropdown.Menu>
|
||||
{menu[category][item].map((e) => (
|
||||
<Dropdown.Item key={e}>
|
||||
<div>{e}</div>
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
{menu[category][item].children.map(
|
||||
(e, i) => (
|
||||
<Dropdown.Item key={i}>
|
||||
<button
|
||||
onClick={Object.values(e)[0]}
|
||||
>
|
||||
{Object.keys(e)[0]}
|
||||
</button>
|
||||
</Dropdown.Item>
|
||||
)
|
||||
)}
|
||||
</Dropdown.Menu>
|
||||
}
|
||||
>
|
||||
@ -65,14 +71,22 @@ export default function ControlPanel() {
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div>{item}</div>
|
||||
<button
|
||||
onClick={menu[category][item].function}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
<IconChevronRight />
|
||||
</Dropdown.Item>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Dropdown.Item key={index}>{item}</Dropdown.Item>
|
||||
<Dropdown.Item key={index}>
|
||||
<button onClick={menu[category][item].function}>
|
||||
{item}
|
||||
</button>
|
||||
</Dropdown.Item>
|
||||
);
|
||||
})}
|
||||
</Dropdown.Menu>
|
||||
|
||||
@ -5,7 +5,7 @@ import { createTheme } from "@uiw/codemirror-themes";
|
||||
import { sql } from "@codemirror/lang-sql";
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
import Shape from "./shape";
|
||||
import { saveAs } from "file-saver";
|
||||
// import { saveAs } from "file-saver";
|
||||
import { toPng } from "html-to-image";
|
||||
import { Parser } from "node-sql-parser";
|
||||
import { Tabs } from "@douyinfe/semi-ui";
|
||||
@ -13,6 +13,7 @@ import "react-resizable/css/styles.css";
|
||||
import TableOverview from "./table_overview";
|
||||
import ReferenceOverview from "./reference_overview";
|
||||
import { defaultTableTheme } from "../data/data";
|
||||
import { ImagePreview, Image } from "@douyinfe/semi-ui";
|
||||
|
||||
const myTheme = createTheme({
|
||||
dark: "light",
|
||||
@ -32,6 +33,13 @@ const EditorPanel = (props) => {
|
||||
const [tab, setTab] = useState("1");
|
||||
const map = useRef(new Map());
|
||||
|
||||
const [visible1, setVisible1] = useState(false);
|
||||
const [dataUrl, setDataUrl] = useState("");
|
||||
|
||||
const visibleChange1 = (v) => {
|
||||
setVisible1(v);
|
||||
};
|
||||
|
||||
const tabList = [
|
||||
{ tab: "Tables", itemKey: "1" },
|
||||
{ tab: "References", itemKey: "2" },
|
||||
@ -112,7 +120,7 @@ const EditorPanel = (props) => {
|
||||
type: "text/plain;charset=utf-8",
|
||||
});
|
||||
|
||||
saveAs(blob, "src.txt");
|
||||
window.saveAs(blob, "src.txt");
|
||||
}}
|
||||
>
|
||||
export src
|
||||
@ -166,12 +174,29 @@ const EditorPanel = (props) => {
|
||||
<button
|
||||
onClick={() => {
|
||||
toPng(document.getElementById("canvas")).then(function (dataUrl) {
|
||||
saveAs(dataUrl, "canvas.png");
|
||||
// window.saveAs(dataUrl, "canvas.png");
|
||||
setDataUrl(dataUrl);
|
||||
});
|
||||
setVisible1(true);
|
||||
}}
|
||||
>
|
||||
export img
|
||||
</button>
|
||||
<ImagePreview
|
||||
src={dataUrl}
|
||||
visible={visible1}
|
||||
onVisibleChange={visibleChange1}
|
||||
>
|
||||
<div>
|
||||
{visible1&&<Image
|
||||
src={"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg"}
|
||||
width={200}
|
||||
alt={`lamp${1}`}
|
||||
|
||||
style={{ marginRight: 5 }}
|
||||
/>}
|
||||
</div>
|
||||
</ImagePreview>
|
||||
</div>
|
||||
</ResizableBox>
|
||||
);
|
||||
|
||||
230
src/data/data.js
230
src/data/data.js
@ -1,59 +1,191 @@
|
||||
const menu = {
|
||||
File: {
|
||||
New: [],
|
||||
"New window": [],
|
||||
Save: [],
|
||||
"Save as": [],
|
||||
Share: [],
|
||||
Rename: [],
|
||||
Import: [],
|
||||
"Export as": [".png", ".jpg", ".pdf", ".xml"],
|
||||
"Export source": ["MySQL", "PostgreSQL", "DBML"],
|
||||
Properties: [],
|
||||
Close: [],
|
||||
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": ()=>console.log("exporting png")}, {".jpg": ()=>{}}, {".xml": ()=>{}},{".svg": ()=>{}}, {".xml": ()=>{}}],
|
||||
function: () => {},
|
||||
},
|
||||
"Export source": {
|
||||
children: [{"MySQL": ()=>{}}, {"PostgreSQL": ()=>{}}, {"DBML": ()=>{}}],
|
||||
function: () => {},
|
||||
},
|
||||
Properties: {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
Close: {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
},
|
||||
Edit: {
|
||||
Undo: [],
|
||||
Redo: [],
|
||||
Cut: [],
|
||||
Copy: [],
|
||||
"Copy as image": [],
|
||||
Paste: [],
|
||||
Delete: [],
|
||||
"Edit table": [],
|
||||
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: [],
|
||||
Grid: [],
|
||||
Sidebar: [],
|
||||
Editor: [],
|
||||
"Strict mode": [],
|
||||
"Reset view": [],
|
||||
"View schema": [],
|
||||
Theme: ["Light", "Dark"],
|
||||
"Zoom in": [],
|
||||
"Zoom out": [],
|
||||
Fullscreen: [],
|
||||
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": [],
|
||||
"New relationship": [],
|
||||
Note: [],
|
||||
Image: [],
|
||||
Textbox: [],
|
||||
Shape: ["Rhombus", "Rectangle"],
|
||||
"New table": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
"New relationship": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
Note: {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
Image: {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
Textbox: {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
Shape: {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
},
|
||||
Logs: {
|
||||
"Open logs": [],
|
||||
"Commit changes": [],
|
||||
"Revert changes": [],
|
||||
"View commits": [],
|
||||
"Open logs": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
"Commit changes": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
"Revert changes": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
"View commits": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
},
|
||||
Help: {
|
||||
Shortcuts: [],
|
||||
"Ask us on discord": [],
|
||||
"Tweet us": [],
|
||||
"Found a bug": [],
|
||||
Shortcuts: {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
"Ask us on discord": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
"Tweet us": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
"Found a bug": {
|
||||
children: [],
|
||||
function: () => {},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -116,4 +248,12 @@ const Constraint = {
|
||||
setDefault: "Set default",
|
||||
};
|
||||
|
||||
export { menu, bgBlue, sqlDataTypes, tableThemes, defaultTableTheme, Cardinality, Constraint };
|
||||
export {
|
||||
menu,
|
||||
bgBlue,
|
||||
sqlDataTypes,
|
||||
tableThemes,
|
||||
defaultTableTheme,
|
||||
Cardinality,
|
||||
Constraint,
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user