From 33c5118c83442ee6feb986a0b4ecb08b12d96e9d Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:48:20 +0300
Subject: [PATCH] brr

---
 .gitignore                       |   2 +
 src/assets/icon_136.png          | Bin 0 -> 8420 bytes
 src/assets/icon_64.png           | Bin 0 -> 4071 bytes
 src/assets/icon_dark_64.png      | Bin 0 -> 3327 bytes
 src/components/control_panel.jsx | 213 ++++++++++++++++++++-----------
 src/components/header.jsx        |   6 +-
 src/components/relationship.jsx  |  14 +-
 src/data/data.js                 |   3 +-
 src/pages/editor.jsx             |   2 -
 9 files changed, 154 insertions(+), 86 deletions(-)
 create mode 100644 src/assets/icon_136.png
 create mode 100644 src/assets/icon_64.png
 create mode 100644 src/assets/icon_dark_64.png

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 0000000000000000000000000000000000000000..7f8805bc0514c8d1ed265883968afa8a5240c351
GIT binary patch
literal 8420
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
Vsb%#_!hsut<fT=lDkO}*{0~BdNN)fD

literal 0
HcmV?d00001

diff --git a/src/assets/icon_64.png b/src/assets/icon_64.png
new file mode 100644
index 0000000000000000000000000000000000000000..d52bfab0ab092af4c8c2d1bd4dc6cd894e0f72ad
GIT binary patch
literal 4071
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
Z{{TwlrsdFZJj4J1002ovPDHLkV1mTI)F1!=

literal 0
HcmV?d00001

diff --git a/src/assets/icon_dark_64.png b/src/assets/icon_dark_64.png
new file mode 100644
index 0000000000000000000000000000000000000000..92677a442f0d00e486e0e186f438ae9df8f2de91
GIT binary patch
literal 3327
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
JPDHLkV1jxhFp2;G

literal 0
HcmV?d00001

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 (
-    <nav className="bg-gray-200 relative">
-      <div className="flex justify-between items-center">
-        <ul className="flex justify-start text-md ms-3 select-none relative">
-          {Object.keys(menu).map((category) => (
-            <div key={category}>
-              <div className="peer px-3 py-1 bg-gray-200 hover:bg-gray-300 relative z-50">
-                {category}
-              </div>
-              <ul className="hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg absolute z-50">
-                {Object.keys(menu[category]).map((item, index) => {
-                  if (menu[category][item].length > 0) {
-                    return (
-                      <div
-                        key={index}
-                        className="group relative px-5 py-3 hover:bg-gray-200 z-50"
-                      >
-                        <div className="flex justify-between items-center">
-                          <li>{item}</li>
-                          <IconRight />
-                        </div>
-                        <ul className="hidden group-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg absolute z-50 top-0 left-full">
-                          {menu[category][item].map((e) => (
-                            <li
-                              key={e}
-                              className="px-5 py-3 hover:bg-gray-200 z-50"
-                            >
-                              {e}
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    );
-                  }
-                  return (
-                    <li
-                      className="px-5 py-3 hover:bg-gray-200 relative z-50"
-                      key={index}
-                    >
-                      {item}
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-          ))}
-        </ul>
-        <button onClick={(e) => invert(e, Tool.TOOLBAR)} className="me-3">
-          {showToolBar ? <IconCaretUp /> : <IconCaretDown />}
-        </button>
-      </div>
+    <>
       {showToolBar && (
-        <div className="p-1 flex justify-start items-center">
+        <nav className="flex justify-between pt-1 items-center">
+          <div className="flex justify-start items-center text-slate-800">
+            <Link to="/">
+              <img width={54} src={icon} alt="logo" className="ms-8" />
+            </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}
+                      style={{ width: "200px" }}
+                      render={
+                        <Dropdown.Menu>
+                          {Object.keys(menu[category]).map((item, index) => {
+                            if (menu[category][item].length > 0) {
+                              return (
+                                <Dropdown
+                                  style={{ width: "120px" }}
+                                  key={item}
+                                  position={"rightTop"}
+                                  render={
+                                    <Dropdown.Menu>
+                                      {menu[category][item].map((e) => (
+                                        <Dropdown.Item key={e}>
+                                          <div>{e}</div>
+                                        </Dropdown.Item>
+                                      ))}
+                                    </Dropdown.Menu>
+                                  }
+                                >
+                                  <Dropdown.Item
+                                    style={{
+                                      display: "flex",
+                                      justifyContent: "space-between",
+                                      alignItems: "center"
+                                    }}
+                                  >
+                                    <div>{item}</div>
+                                    <IconChevronRight />
+                                  </Dropdown.Item>
+                                </Dropdown>
+                              );
+                            }
+                            return (
+                              <Dropdown.Item key={index}>
+                                {item}
+                              </Dropdown.Item>
+                            );
+                          })}
+                        </Dropdown.Menu>
+                      }
+                    >
+                      <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>
+            </div>
+          </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",
+                border: "1px solid white",
+              }}
+              size="large"
+              icon={<IconShareStroked />}
+            >
+              Share
+            </Button>
+            <Avatar size="default" alt="Buni Zhang">
+              BZ
+            </Avatar>
+          </div>
+        </nav>
+      )}
+      <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="relative">
+            <button className="ms-2 py-2 px-3 hover:bg-gray-300 relative">
+              <i className="fa-solid fa-table-list"></i>
+            </button>
+            <Divider layout="vertical" margin="8px" />
             <button
-              className="ms-2 py-2 px-3 hover:bg-gray-300 relative"
+              className="py-2 px-3 hover:bg-gray-300 relative"
               onClick={(e) => invert(e, Tool.ZOOM)}
             >
-              zoom <IconCaretDown />
+              zoom <IconCaretdown />
             </button>
             <ul
               className={`${
@@ -160,7 +219,8 @@ export default function ControlPanel() {
               title="Add"
               onClick={(e) => invert(e, Tool.ADD)}
             >
-              <i className="fa-solid fa-plus"></i> <IconCaretDown />
+              <IconPlus />
+              <IconCaretdown />
             </button>
             <ul
               className={`${
@@ -188,7 +248,10 @@ export default function ControlPanel() {
             <i className="fa-solid fa-code-commit"></i>
           </button>
         </div>
-      )}
-    </nav>
+        <button onClick={(e) => invert(e, Tool.TOOLBAR)} className="me-3">
+          {showToolBar ? <IconChevronUp /> : <IconChevronDown />}
+        </button>
+      </div>
+    </>
   );
 }
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 (
     <nav className="flex justify-between py-2 bg-blue text-white items-center">
-      <img width={136} src={logo} alt="logo" className="ms-8" />
+      <Link to="/">
+        <img width={136} src={logo} alt="logo" className="ms-8" />
+      </Link>
       <div className="text-xl">{props.name}</div>
       <div className="flex justify-around items-center text-md me-8">
         <button className="me-6 border px-4 py-1 rounded-xl">
@@ -13,6 +16,7 @@ export default function Header(props) {
         </button>
         <img src={blank_pfp} alt="profile" className="rounded-full h-8 w-8" />
       </div>
+      
     </nav>
   );
 }
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 (
     <>
-      <Header name={props.name} />
       <ControlPanel />
       <div className="flex h-full">
         <DndProvider backend={HTML5Backend}>