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

Add note overview

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:49:11 +03:00
parent 6f7dbd9f41
commit 9b8e6c2593
4 changed files with 182 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/note.jsx
View File

@ -1,23 +1,21 @@
import React, { useContext, useState } from "react";
import React, { useContext } 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 w = 180;
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";
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
setNotes((prev) =>
prev.map((n) => {
if (n.id === props.data.id) {
return { ...n, content: e.target.value };
return { ...n, content: e.target.value, height: newHeight };
}
return n;
})
@ -28,17 +26,17 @@ export default function Note(props) {
<g>
<path
d={`M${props.data.x + fold} ${props.data.y} L${
props.data.x + size.w - r
} ${props.data.y} A${r} ${r} 0 0 1 ${props.data.x + size.w} ${
props.data.x + w - r
} ${props.data.y} A${r} ${r} 0 0 1 ${props.data.x + w} ${
props.data.y + r
} L${props.data.x + size.w} ${
props.data.y + size.h - r
} A${r} ${r} 0 0 1 ${props.data.x + size.w - r} ${
props.data.y + size.h
} L${props.data.x + r} ${props.data.y + size.h} A${r} ${r} 0 0 1 ${
} L${props.data.x + w} ${
props.data.y + props.data.height - r
} A${r} ${r} 0 0 1 ${props.data.x + w - r} ${
props.data.y + props.data.height
} L${props.data.x + r} ${props.data.y + props.data.height} A${r} ${r} 0 0 1 ${
props.data.x
} ${props.data.y + size.h - r} L${props.data.x} ${props.data.y + fold}`}
fill="#fcf7ac"
} ${props.data.y + props.data.height - r} L${props.data.x} ${props.data.y + fold}`}
fill={props.data.color}
stroke="#665b25"
strokeLinejoin="round"
strokeWidth="0.6"
@ -51,7 +49,7 @@ export default function Note(props) {
} L${props.data.x + fold} ${props.data.y} L${props.data.x} ${
props.data.y + fold
} Z`}
fill="#fcf7ac"
fill={props.data.color}
stroke="#665b25"
strokeLinejoin="round"
strokeWidth="0.6"
@ -59,8 +57,8 @@ export default function Note(props) {
<foreignObject
x={props.data.x}
y={props.data.y}
width={size.w}
height={size.h}
width={w}
height={props.data.height}
onMouseDown={props.onMouseDown}
>
<div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
@ -69,7 +67,8 @@ export default function Note(props) {
id={`note_${props.data.id}`}
value={props.data.content}
onInput={handleChange}
className="mt-1 w-full resize-none outline-none overflow-y-hidden border-none select-none bg-[#fcf7ac]"
className="mt-1 w-full resize-none outline-none overflow-y-hidden border-none select-none"
style={{backgroundColor: props.data.color}}
></textarea>
</div>
</foreignObject>

164
src/components/notes_overview.jsx
View File

@ -1,27 +1,83 @@
import React, { useContext } from "react";
import React, { useContext, useState } from "react";
import {
Empty,
Row,
Col,
Button,
// Input,
// Popover,
// Toast,
Collapse,
AutoComplete,
TextArea,
Popover,
Toast,
} from "@douyinfe/semi-ui";
import {
IllustrationNoContent,
IllustrationNoContentDark,
} from "@douyinfe/semi-illustrations";
import { IconPlus } from "@douyinfe/semi-icons";
import {
IconDeleteStroked,
IconPlus,
IconSearch,
IconCheckboxTick,
} from "@douyinfe/semi-icons";
import { NoteContext } from "../pages/editor";
import { defaultNoteTheme, noteThemes } from "../data/data";
export default function NotesOverview(props) {
const { notes, setNotes } = useContext(NoteContext);
const [value, setValue] = useState("");
const [activeKey, setActiveKey] = useState("");
const [filteredResult, setFilteredResult] = useState(
notes.map((t) => {
return t.title;
})
);
const handleStringSearch = (value) => {
setFilteredResult(
notes
.map((t) => {
return t.title;
})
.filter((i) => i.includes(value))
);
};
const updateNote = (id, values) => {
setNotes((prev) =>
prev.map((note) => {
if (note.id === id) {
return { ...note, ...values };
}
return note;
})
);
};
return (
<div>
<Row gutter={6}>
<Col span={24}>
<Col span={16}>
<AutoComplete
data={filteredResult}
value={value}
showClear
prefix={<IconSearch />}
placeholder="Search..."
emptyContent={<div className="p-3">No notes found</div>}
onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)}
onSelect={(v) => {
const { id } = notes.find((t) => t.title === v);
setActiveKey(`${id}`);
document
.getElementById(`scroll_note_${id}`)
.scrollIntoView({ behavior: "smooth" });
}}
className="w-full"
/>
</Col>
<Col span={8}>
<Button
icon={<IconPlus />}
block
@ -31,7 +87,9 @@ export default function NotesOverview(props) {
x: 0,
y: 0,
title: `note_${notes.length}`,
content: ""
content: "",
color: defaultNoteTheme,
height: 88,
};
setNotes((prev) => [...prev, newNote]);
}}
@ -41,7 +99,7 @@ export default function NotesOverview(props) {
</Col>
</Row>
{notes.length <= 0 ? (
<div className="select-none mt-2">
<div className="select-none">
<Empty
image={
<IllustrationNoContent style={{ width: 160, height: 160 }} />
@ -54,11 +112,95 @@ export default function NotesOverview(props) {
/>
</div>
) : (
<div className="p-2">
<Collapse
activeKey={activeKey}
onChange={(k) => setActiveKey(k)}
accordion
>
{notes.map((n, i) => (
<div key={n.id}>{n.title}</div>
<Collapse.Panel
header={<div>{n.title}</div>}
itemKey={`${n.id}`}
id={`scroll_note_${n.id}`}
key={n.id}
>
<div className="flex justify-between align-top">
<TextArea
field="content"
label="Content"
placeholder="Add content"
value={n.content}
autosize
onChange={(value) => {
const textarea = document.getElementById(`note_${n.id}`);
textarea.style.height = "0";
textarea.style.height = textarea.scrollHeight + "px";
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
updateNote(n.id, { height: newHeight, content: value });
}}
rows={3}
/>
<div className="ms-2">
<Popover
content={
<div>
<div className="flex justify-between items-center p-2">
<div className="font-medium">Theme</div>
<Button
type="tertiary"
size="small"
onClick={() =>
updateNote(i, { color: defaultNoteTheme })
}
>
Clear
</Button>
</div>
<hr />
<div className="py-3">
{noteThemes.map((c) => (
<button
key={c}
style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1"
onClick={() => updateNote(i, { color: c })}
>
{n.color === c ? (
<IconCheckboxTick style={{ color: "white" }} />
) : (
<IconCheckboxTick style={{ color: c }} />
)}
</button>
))}
</div>
</div>
}
trigger="click"
position="rightTop"
showArrow
>
<div
className="h-[32px] w-[32px] rounded mb-2"
style={{ backgroundColor: n.color }}
/>
</Popover>
<Button
icon={<IconDeleteStroked />}
type="danger"
onClick={() => {
Toast.success(`Note deleted!`);
setNotes((prev) =>
prev
.filter((e) => e.id !== i)
.map((e, idx) => ({ ...e, id: idx }))
);
}}
></Button>
</div>
</div>
</Collapse.Panel>
))}
</div>
</Collapse>
)}
</div>
);

9
src/components/table_overview.jsx
View File

@ -17,7 +17,6 @@ import {
import {
IconMore,
IconKeyStroked,
IconColorPalette,
IconDeleteStroked,
IconCheckboxTick,
IconPlus,
@ -495,10 +494,10 @@ export default function TableOverview(props) {
position="bottomLeft"
showArrow
>
<Button
type="tertiary"
icon={<IconColorPalette />}
></Button>
<div
className="h-[32px] w-[32px] rounded mb-2"
style={{ backgroundColor: t.color }}
/>
</Popover>
</Col>
<Col span={7}>

9
src/data/data.js
View File

@ -39,7 +39,10 @@ const tableThemes = [
"#ff9159",
];
const noteThemes = ["#ffdfd9", "#ffffc7", "#cffcb1", "#c7d2ff", "#e7c7ff"];
const defaultTableTheme = "#175e7a";
const defaultNoteTheme = "#fcf7ac";
const bgBlue = "#124559";
const Cardinality = {
@ -76,9 +79,11 @@ export {
bgBlue,
sqlDataTypes,
tableThemes,
noteThemes,
defaultTableTheme,
defaultNoteTheme,
Cardinality,
Constraint,
Tab,
ObjectType
Tab,
ObjectType,
};