diff --git a/.gitignore b/.gitignore index 4d29575..14130b5 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +test.html \ No newline at end of file diff --git a/src/assets/icon_136.png b/src/assets/icon_136.png new file mode 100644 index 0000000..7f8805b Binary files /dev/null and b/src/assets/icon_136.png differ diff --git a/src/assets/icon_64.png b/src/assets/icon_64.png new file mode 100644 index 0000000..d52bfab Binary files /dev/null and b/src/assets/icon_64.png differ diff --git a/src/assets/icon_dark_64.png b/src/assets/icon_dark_64.png new file mode 100644 index 0000000..92677a4 Binary files /dev/null and b/src/assets/icon_dark_64.png differ diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx index ea73bbf..a442d6e 100644 --- a/src/components/control_panel.jsx +++ b/src/components/control_panel.jsx @@ -1,27 +1,31 @@ import { React, useState } from "react"; -import {menu} from "../data/data"; +import { menu } from "../data/data"; import { - IconCaretUp, - IconCaretDown, - IconRight, -} from "@arco-design/web-react/icon"; -import "@arco-design/web-react/dist/css/arco.css"; + IconCaretdown, + IconChevronRight, + IconShareStroked, + IconChevronUp, + IconChevronDown, + IconPlus, +} from "@douyinfe/semi-icons"; +import { Link } from "react-router-dom"; +import icon from "../assets/icon_dark_64.png"; +import { + Avatar, + AvatarGroup, + Button, + Divider, + Dropdown, +} from "@douyinfe/semi-ui"; export default function ControlPanel() { - let cursor = 0; - const iota = (restart = false) => { - const temp = cursor; - cursor++; - return temp; - }; - const Tool = { - TOOLBAR: iota(), - ZOOM: iota(), - UNDO: iota(), - REDO: iota(), - ADD: iota(), - COUNT: iota(), + TOOLBAR: 0, + ZOOM: 1, + UNDO: 2, + REDO: 3, + ADD: 4, + COUNT: 5, }; const [showToolBar, setShowToolBar] = useState(true); @@ -47,64 +51,119 @@ export default function ControlPanel() { }; return ( - + + + ); } diff --git a/src/components/header.jsx b/src/components/header.jsx index 5e4a1a3..1f1ab74 100644 --- a/src/components/header.jsx +++ b/src/components/header.jsx @@ -1,11 +1,14 @@ import React from "react"; +import { Link } from "react-router-dom"; import blank_pfp from "../assets/blank_pfp.webp"; import logo from "../assets/logo_80.png"; export default function Header(props) { return ( ); } diff --git a/src/components/relationship.jsx b/src/components/relationship.jsx index 5396669..d9d38cb 100644 --- a/src/components/relationship.jsx +++ b/src/components/relationship.jsx @@ -8,7 +8,7 @@ export default function Relationship(props) { const tableWidth = 240; const midX = (x2 + x1 + tableWidth) / 2; const endX = x2 + tableWidth < x1 ? x2 + tableWidth - offsetX * 2 : x2; - + if (Math.abs(y1 - y2) <= 36) { r = Math.abs(y2 - y1) / 3; if (r <= 2) { @@ -20,13 +20,13 @@ export default function Relationship(props) { } if (y1 <= y2) { - if (x1 + tableWidth < x2) { + if (x1 + tableWidth <= x2) { return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${ midX - r } ${y1} A ${r} ${r} 0 0 1 ${midX} ${y1 + r} L ${midX} ${ y2 - r } A ${r} ${r} 0 0 0 ${midX + r} ${y2} L ${endX} ${y2}`; - } else if (x2 < x1 + tableWidth && x1 < x2) { + } else if (x2 <= x1 + tableWidth && x1 <= x2) { return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${ x2 + tableWidth } ${y1} A ${r} ${r} 0 0 1 ${x2 + tableWidth + r} ${y1 + r} L ${ @@ -34,7 +34,7 @@ export default function Relationship(props) { } ${y2 - r} A ${r} ${r} 0 0 1 ${x2 + tableWidth} ${y2} L ${ x2 + tableWidth - 2 * offsetX } ${y2}`; - } else if (x2 + tableWidth > x1 && x2 + tableWidth < x1 + tableWidth) { + } else if (x2 + tableWidth >= x1 && x2 + tableWidth <= x1 + tableWidth) { return `M ${x1} ${y1} L ${x2 - r} ${y1} A ${r} ${r} 0 0 ${0} ${ x2 - r - r } ${y1 + r} L ${x2 - r - r} ${y2 - r} A ${r} ${r} 0 0 0 ${ @@ -48,19 +48,19 @@ export default function Relationship(props) { } ${y2} L ${endX} ${y2}`; } } else { - if (x1 + tableWidth < x2) { + if (x1 + tableWidth <= x2) { return `M ${x1 + tableWidth - offsetX * 2} ${y1} L ${ midX - r } ${y1} A ${r} ${r} 0 0 0 ${midX} ${y1 - r} L ${midX} ${ y2 + r } A ${r} ${r} 0 0 1 ${midX + r} ${y2} L ${endX} ${y2}`; - } else if (x1 + tableWidth > x2 && x1 + tableWidth < x2 + tableWidth) { + } else if (x1 + tableWidth >= x2 && x1 + tableWidth <= x2 + tableWidth) { return `M ${x1} ${y1} L ${x1 - r} ${y1} A ${r} ${r} 0 0 1 ${ x1 - r - r } ${y1 - r} L ${x1 - r - r} ${y2 + r} A ${r} ${r} 0 0 1 ${ x1 - r } ${y2} L ${endX} ${y2}`; - } else if (x1 > x2 && x1 < x2 + tableWidth) { + } else if (x1 >= x2 && x1 <= x2 + tableWidth) { return `M ${x1 + tableWidth - 2 * offsetX} ${y1} L ${ x1 + tableWidth - 2 * offsetX + r } ${y1} A ${r} ${r} 0 0 0 ${x1 + tableWidth - 2 * offsetX + r + r} ${ diff --git a/src/data/data.js b/src/data/data.js index 8e14572..89657a6 100644 --- a/src/data/data.js +++ b/src/data/data.js @@ -99,6 +99,7 @@ const tableThemes = [ ]; const defaultTableTheme = "#9e9e9e"; +const bgBlue = "#124559"; const Cardinality = { ONE_TO_ONE: "One to one", @@ -115,4 +116,4 @@ const Constraint = { setDefault: "Set default", }; -export { menu, sqlDataTypes, tableThemes, defaultTableTheme, Cardinality, Constraint }; +export { menu, bgBlue, sqlDataTypes, tableThemes, defaultTableTheme, Cardinality, Constraint }; diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx index 03bd540..54c98d5 100644 --- a/src/pages/editor.jsx +++ b/src/pages/editor.jsx @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import Header from "../components/header"; import Sidebar from "../components/sidebar"; import ControlPanel from "../components/control_panel"; import { DndProvider } from "react-dnd"; @@ -15,7 +14,6 @@ export default function Editor(props) { return ( <> -