From 6f7dbd9f41da98d4c066e721f231ca6647a0c2b1 Mon Sep 17 00:00:00 2001 From: 1ilit Date: Tue, 19 Sep 2023 15:49:09 +0300 Subject: [PATCH] Add notes --- src/components/canvas.jsx | 52 +++++++++++++++------ src/components/control_panel.jsx | 6 +-- src/components/editor_panel.jsx | 4 +- src/components/note.jsx | 78 +++++++++++++++++++++++++++++++ src/components/notes_overview.jsx | 65 ++++++++++++++++++++++++++ src/data/data.js | 2 +- src/pages/editor.jsx | 64 +++++++++++++------------ 7 files changed, 223 insertions(+), 48 deletions(-) create mode 100644 src/components/note.jsx create mode 100644 src/components/notes_overview.jsx diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx index f1f9e13..d4335f0 100644 --- a/src/components/canvas.jsx +++ b/src/components/canvas.jsx @@ -9,12 +9,14 @@ import { } from "../data/data"; import Area from "./area"; import Relationship from "./relationship"; -import { AreaContext, TableContext } from "../pages/editor"; +import { AreaContext, NoteContext, TableContext } from "../pages/editor"; +import Note from "./note"; export default function Canvas(props) { const { tables, setTables, relationships, setRelationships } = useContext(TableContext); const { areas, setAreas } = useContext(AreaContext); + const { notes, setNotes } = useContext(NoteContext); const [dragging, setDragging] = useState([ObjectType.NONE, -1]); const [linking, setLinking] = useState(false); const [line, setLine] = useState({ @@ -68,6 +70,13 @@ export default function Canvas(props) { y: clientY - area.y, }); setDragging([ObjectType.AREA, id]); + } else if (type === ObjectType.NOTE) { + const note = notes.find((t) => t.id === id); + setOffset({ + x: clientX - note.x, + y: clientY - note.y, + }); + setDragging([ObjectType.NOTE, id]); } }; @@ -91,8 +100,8 @@ export default function Canvas(props) { const dy = e.clientY - panOffset.y; setPanOffset({ x: e.clientX, y: e.clientY }); - setTables( - tables.map((t) => ({ + setTables((prev) => + prev.map((t) => ({ ...t, x: t.x + dx, y: t.y + dy, @@ -109,13 +118,9 @@ export default function Canvas(props) { })) ); - setAreas( - areas.map((t) => ({ - ...t, - x: t.x + dx, - y: t.y + dy, - })) - ); + setAreas((prev) => prev.map((t) => ({ ...t, x: t.x + dx, y: t.y + dy }))); + + setNotes((prev) => prev.map((n) => ({ ...n, x: n.x + dx, y: n.y + dy }))); } else if (dragging[0] === ObjectType.TABLE && dragging[1] >= 0) { const updatedTables = tables.map((t) => { if (t.id === dragging[1]) { @@ -163,6 +168,22 @@ export default function Canvas(props) { return t; }); setAreas(updatedAreas); + } else if ( + dragging[0] === ObjectType.NOTE && + dragging[1] >= 0 + ) { + setNotes((prev) => + prev.map((t) => { + if (t.id === dragging[1]) { + return { + ...t, + x: e.clientX - offset.x, + y: e.clientY - offset.y, + }; + } + return t; + }) + ); } else if (areaResize.id !== -1) { if (areaResize.dir === "none") return; @@ -374,14 +395,12 @@ export default function Canvas(props) { key={a.id} areaData={a} onMouseDown={(e) => handleMouseDownRect(e, a.id, ObjectType.AREA)} - resize={areaResize} setResize={setAreaResize} initCoords={initCoords} setInitCoords={setInitCoords} - setAreas={setAreas} > ))} - {tables.map((table, i) => ( + {tables.map((table) => ( ( ))} + {notes.map((n) => ( + handleMouseDownRect(e, n.id, ObjectType.NOTE)} + > + ))} diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx index 2efeb06..26313a0 100644 --- a/src/components/control_panel.jsx +++ b/src/components/control_panel.jsx @@ -626,7 +626,7 @@ export default function ControlPanel(props) { ) : (
@@ -635,11 +635,11 @@ export default function ControlPanel(props) { onClick={() => setLayout((prev) => ({ ...prev, - shapes: !prev.shapes, + notes: !prev.notes, })) } > - Shapes + Notes } diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx index 42386fe..359eb83 100644 --- a/src/components/editor_panel.jsx +++ b/src/components/editor_panel.jsx @@ -9,6 +9,7 @@ import ReferenceOverview from "./reference_overview"; import AreaOverview from "./area_overview"; import { Tab } from "../data/data"; import { TabContext } from "../pages/editor"; +import NotesOverview from "./notes_overview"; const myTheme = createTheme({ dark: "light", @@ -32,8 +33,8 @@ const EditorPanel = (props) => { { tab: "Tables", itemKey: Tab.tables }, { tab: "Relationships", itemKey: Tab.relationships }, { tab: "Subject Areas", itemKey: Tab.subject_areas }, - // { tab: "Shapes", itemKey: Tab.shapes }, { tab: "Editor", itemKey: Tab.editor }, + { tab: "Notes", itemKey: Tab.notes }, ]; const contentList = [ { props.setCode(e); }} />, + ]; return ( diff --git a/src/components/note.jsx b/src/components/note.jsx new file mode 100644 index 0000000..ea7c966 --- /dev/null +++ b/src/components/note.jsx @@ -0,0 +1,78 @@ +import React, { useContext, useState } from "react"; +import { NoteContext } from "../pages/editor"; + +export default function Note(props) { + const { setNotes } = useContext(NoteContext); + const [size, setSize] = useState({ w: 180, h: 88 }); + const r = 3; + const fold = 24; + + const handleChange = (e) => { + const textarea = document.getElementById(`note_${props.data.id}`); + const newHeight = textarea.scrollHeight + 16 + 20 + 4; + setSize((prevSize) => ({ ...prevSize, h: newHeight })); + textarea.style.height = "0"; + textarea.style.height = textarea.scrollHeight + "px"; + + setNotes((prev) => + prev.map((n) => { + if (n.id === props.data.id) { + return { ...n, content: e.target.value }; + } + return n; + }) + ); + }; + + return ( + + + + +
+ + +
+ + + ); +} diff --git a/src/components/notes_overview.jsx b/src/components/notes_overview.jsx new file mode 100644 index 0000000..d3a816c --- /dev/null +++ b/src/components/notes_overview.jsx @@ -0,0 +1,65 @@ +import React, { useContext } from "react"; +import { + Empty, + Row, + Col, + Button, +// Input, +// Popover, +// Toast, +} from "@douyinfe/semi-ui"; +import { + IllustrationNoContent, + IllustrationNoContentDark, +} from "@douyinfe/semi-illustrations"; +import { IconPlus } from "@douyinfe/semi-icons"; +import { NoteContext } from "../pages/editor"; + +export default function NotesOverview(props) { + const { notes, setNotes } = useContext(NoteContext); + + return ( +
+ +
+ + + + {notes.length <= 0 ? ( +
+ + } + darkModeImage={ + + } + title="No text notes" + description="Add notes cuz why not!" + /> +
+ ) : ( +
+ {notes.map((n, i) => ( +
{n.title}
+ ))} +
+ )} + + ); +} diff --git a/src/data/data.js b/src/data/data.js index 730e72a..4215b8a 100644 --- a/src/data/data.js +++ b/src/data/data.js @@ -61,8 +61,8 @@ const Tab = { tables: "1", relationships: "2", subject_areas: "3", - // shapes: "4", editor: "4", + notes: "5", }; const ObjectType = { diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx index 89a183c..f0088fc 100644 --- a/src/pages/editor.jsx +++ b/src/pages/editor.jsx @@ -11,12 +11,14 @@ export const LayoutContext = createContext(); export const TableContext = createContext(); export const AreaContext = createContext(); export const TabContext = createContext(); +export const NoteContext = createContext(); export default function Editor(props) { const [code, setCode] = useState(""); const [tables, setTables] = useState([]); const [relationships, setRelationships] = useState([]); const [areas, setAreas] = useState([]); + const [notes, setNotes] = useState([]); const [resize, setResize] = useState(false); const [width, setWidth] = useState(340); const [selectedTable, setSelectedTable] = useState(""); @@ -30,7 +32,7 @@ export default function Editor(props) { relationships: true, issues: true, editor: true, - shapes: true, + notes: true, fullscreen: false, }); @@ -50,41 +52,43 @@ export default function Editor(props) { value={{ tables, setTables, relationships, setRelationships }} > - -
- -
setResize(false)} - onMouseMove={dragHandler} - > - - {layout.sidebar && ( - + +
+ +
setResize(false)} + onMouseMove={dragHandler} + > + + {layout.sidebar && ( + + )} + - )} - - - {layout.services && } + + {layout.services && } +
-
- + +