titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move data to data.js

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:50 +03:00
parent 9c61815999
commit d441ff5fcb
6 changed files with 126 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/control_panel.jsx
View File

@ -1,5 +1,5 @@
import { React, useState } from "react";
import menu from "./menu";
import {menu} from "../data/data";
import {
IconCaretUp,
IconCaretDown,

59
src/components/editor_panel.jsx
View File

@ -8,6 +8,7 @@ import Shape from "./shape";
import { saveAs } from "file-saver";
import html2canvas from "html2canvas";
import { Parser } from "node-sql-parser";
import { Tabs } from "@douyinfe/semi-ui";
import "react-resizable/css/styles.css";
const myTheme = createTheme({
@ -25,9 +26,32 @@ const myTheme = createTheme({
});
export default function EditorPanel(props) {
const [editor, setEditor] = useState(true);
const [tab, setTab] = useState(1);
const map = useRef(new Map());
const tabList = [
{ tab: "Overview", itemKey: 1 },
{ tab: "Shapes", itemKey: 2 },
{ tab: "Editor", itemKey: 3 },
];
const contentList = [
<div>Overview</div>,
<div>
<Shape />
</div>,
<div>
<CodeMirror
value={props.code}
height="100%"
theme={myTheme}
extensions={[sql()]}
onChange={(e) => {
props.setCode(e);
}}
/>
</div>,
];
return (
<ResizableBox
width={window.innerWidth * 0.2}
@ -37,15 +61,17 @@ export default function EditorPanel(props) {
maxConstraints={[Infinity, Infinity]}
axis="x"
>
<div className="overflow-auto h-full">
<button
onClick={() => {
setEditor(!editor);
<div className="overflow-auto h-full mt-2">
<Tabs
type="card"
tabList={tabList}
onChange={(key) => {
setTab(key);
}}
>
change view
</button>
<br />
{contentList[tab -1]}
</Tabs>
<button
onClick={() => {
const newTable = {
@ -65,7 +91,7 @@ export default function EditorPanel(props) {
},
],
};
props.setTables(prev => {
props.setTables((prev) => {
const updatedTables = [...prev, newTable];
return updatedTables;
});
@ -120,7 +146,7 @@ export default function EditorPanel(props) {
},
],
};
props.setTables((prev)=>[...prev, newTable]);
props.setTables((prev) => [...prev, newTable]);
});
});
} catch (e) {
@ -142,19 +168,6 @@ export default function EditorPanel(props) {
>
export img
</button>
{editor ? (
<CodeMirror
value={props.code}
height="100%"
theme={myTheme}
extensions={[sql()]}
onChange={(e) => {
props.setCode(e);
}}
/>
) : (
<Shape />
)}
</div>
</ResizableBox>
);

59
src/components/menu.js
View File

@ -1,59 +0,0 @@
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: [],
},
Edit: {
Undo: [],
Redo: [],
Cut: [],
Copy: [],
"Copy as image": [],
Paste: [],
Delete: [],
"Edit table": [],
},
View: {
Toolbar: [],
Grid: [],
Sidebar: [],
Editor: [],
"Reset view": [],
"View schema": [],
Theme: ["Light", "Dark"],
"Zoom in": [],
"Zoom out": [],
Fullscreen: [],
},
Insert: {
"New table": [],
"New relationship": [],
Note: [],
Image: [],
Textbox: [],
Shape: ["Rhombus", "Rectangle"],
},
Logs: {
"Open logs": [],
"Commit changes": [],
"Revert changes": [],
"View commits": [],
},
Help: {
Shortcuts: [],
"Ask us on discord": [],
"Tweet us": [],
"Found a bug": [],
},
};
export default menu;

27
src/components/sql_types.js
View File

@ -1,27 +0,0 @@
const sqlDataTypes = [
"INT",
"SMALLINT",
"BIGINT",
"DECIMAL",
"NUMERIC",
"FLOAT",
"REAL",
"DOUBLE PRECISION",
"CHAR",
"VARCHAR",
"TEXT",
"DATE",
"TIME",
"TIMESTAMP",
"INTERVAL",
"BOOLEAN",
"BINARY",
"VARBINARY",
"BLOB",
"CLOB",
"UUID",
"XML",
"JSON",
];
export default sqlDataTypes;

11
src/components/table.jsx
View File

@ -1,5 +1,5 @@
import { React, useState } from "react";
import sqlDataTypes from "./sql_types";
import {sqlDataTypes} from "../data/data";
import {
IconEdit,
IconDelete,
@ -16,7 +16,6 @@ import {
Tag,
Popconfirm,
Toast,
SideSheet,
} from "@douyinfe/semi-ui";
export default function Table(props) {
@ -24,7 +23,6 @@ export default function Table(props) {
const [hoveredField, setHoveredField] = useState(-1);
const [name, setName] = useState(props.tableData.name);
const [visible, setVisible] = useState(false);
const [sideSheetOn, setSideSheetOn] = useState(false);
const [editFieldVisible, setEditFieldVisible] = useState(-1);
const [field, setField] = useState({
@ -139,7 +137,7 @@ export default function Table(props) {
<div className="flex justify-end items-center">
<button
className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80"
onClick={() => setSideSheetOn(true)}
// onClick={() => setSideSheetOn(true)}
>
<IconEdit />
</button>
@ -475,11 +473,6 @@ export default function Table(props) {
</Row>
</Form>
</Modal>
<SideSheet title="Sidesheet" visible={sideSheetOn} onCancel={() => setSideSheetOn
(false)}>
<p>This is the content of a basic sidesheet.</p>
<p>Here is more content...</p>
</SideSheet>
</g>
);
}

87
src/data/data.js Normal file
View File

@ -0,0 +1,87 @@
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: [],
},
Edit: {
Undo: [],
Redo: [],
Cut: [],
Copy: [],
"Copy as image": [],
Paste: [],
Delete: [],
"Edit table": [],
},
View: {
Toolbar: [],
Grid: [],
Sidebar: [],
Editor: [],
"Reset view": [],
"View schema": [],
Theme: ["Light", "Dark"],
"Zoom in": [],
"Zoom out": [],
Fullscreen: [],
},
Insert: {
"New table": [],
"New relationship": [],
Note: [],
Image: [],
Textbox: [],
Shape: ["Rhombus", "Rectangle"],
},
Logs: {
"Open logs": [],
"Commit changes": [],
"Revert changes": [],
"View commits": [],
},
Help: {
Shortcuts: [],
"Ask us on discord": [],
"Tweet us": [],
"Found a bug": [],
},
};
const sqlDataTypes = [
"INT",
"SMALLINT",
"BIGINT",
"DECIMAL",
"NUMERIC",
"FLOAT",
"REAL",
"DOUBLE PRECISION",
"CHAR",
"VARCHAR",
"TEXT",
"DATE",
"TIME",
"TIMESTAMP",
"INTERVAL",
"BOOLEAN",
"BINARY",
"VARBINARY",
"BLOB",
"CLOB",
"UUID",
"XML",
"JSON",
];
export {menu, sqlDataTypes};