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

yum

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:09 +03:00
parent f04ed5df9a
commit bccee804cf
4 changed files with 90 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/control_panel.jsx
View File

@ -169,6 +169,15 @@ export default function ControlPanel(props) {
return n;
})
);
} else if (a.element === ObjectType.NOTE) {
setNotes((prev) =>
prev.map((n) => {
if (n.id === a.nid) {
return { ...n, ...a.undo };
}
return n;
})
);
} else if (a.element === ObjectType.TABLE) {
if (a.component === "field") {
updateField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values);
@ -318,6 +327,15 @@ export default function ControlPanel(props) {
return n;
})
);
} else if (a.element === ObjectType.NOTE) {
setNotes((prev) =>
prev.map((n) => {
if (n.id === a.nid) {
return { ...n, ...a.redo };
}
return n;
})
);
} else if (a.element === ObjectType.TABLE) {
if (a.component === "field") {
updateField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values);

33
src/components/note.jsx
View File

@ -1,12 +1,14 @@
import React, { useContext } from "react";
import { NoteContext } from "../pages/editor";
import React, { useContext, useState } from "react";
import { NoteContext, UndoRedoContext } from "../pages/editor";
import { Action, ObjectType } from "../data/data";
export default function Note(props) {
const { setNotes } = useContext(NoteContext);
const w = 180;
const r = 3;
const fold = 24;
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [editField, setEditField] = useState({});
const handleChange = (e) => {
const textarea = document.getElementById(`note_${props.data.id}`);
textarea.style.height = "0";
@ -69,6 +71,31 @@ export default function Note(props) {
id={`note_${props.data.id}`}
value={props.data.content}
onChange={handleChange}
onFocus={(e) =>
setEditField({
content: e.target.value,
height: props.data.height,
})
}
onBlur={(e) => {
if (e.target.value === editField.name) return;
const textarea = document.getElementById(`note_${props.data.id}`);
textarea.style.height = "0";
textarea.style.height = textarea.scrollHeight + "px";
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: props.data.id,
undo: editField,
redo: { content: e.target.value, height: newHeight },
},
]);
setRedoStack([]);
setEditField({});
}}
className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
style={{ backgroundColor: props.data.color }}
></textarea>

56
src/components/notes_overview.jsx
View File

@ -20,12 +20,14 @@ import {
IconSearch,
IconCheckboxTick,
} from "@douyinfe/semi-icons";
import { NoteContext } from "../pages/editor";
import { defaultNoteTheme, noteThemes } from "../data/data";
import { NoteContext, UndoRedoContext } from "../pages/editor";
import { noteThemes, Action, ObjectType } from "../data/data";
export default function NotesOverview(props) {
const { notes, setNotes, addNote, deleteNote } = useContext(NoteContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [value, setValue] = useState("");
const [editField, setEditField] = useState({});
const [activeKey, setActiveKey] = useState("");
const [filteredResult, setFilteredResult] = useState(
notes.map((t) => {
@ -123,24 +125,35 @@ export default function NotesOverview(props) {
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
updateNote(n.id, { height: newHeight, content: value });
}}
onFocus={(e) =>
setEditField({ content: e.target.value, height: n.height })
}
onBlur={(e) => {
if (e.target.value === editField.name) return;
const textarea = document.getElementById(`note_${n.id}`);
textarea.style.height = "0";
textarea.style.height = textarea.scrollHeight + "px";
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: i,
undo: editField,
redo: { content: e.target.value, height: newHeight },
},
]);
setRedoStack([]);
setEditField({});
}}
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>
<div className="font-medium">Theme</div>
<hr />
<div className="py-3">
{noteThemes.map((c) => (
@ -148,7 +161,20 @@ export default function NotesOverview(props) {
key={c}
style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1"
onClick={() => updateNote(i, { color: c })}
onClick={() => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: i,
undo: { color: n.color },
redo: { color: c },
},
]);
setRedoStack([]);
updateNote(i, { color: c });
}}
>
{n.color === c ? (
<IconCheckboxTick style={{ color: "white" }} />

2
src/data/data.js
View File

@ -39,7 +39,7 @@ const tableThemes = [
"#ff9159",
];
const noteThemes = ["#ffdfd9", "#ffffc7", "#cffcb1", "#c7d2ff", "#e7c7ff"];
const noteThemes = ["#ffdfd9", "#fcf7ac", "#cffcb1", "#c7d2ff", "#e7c7ff"];
const defaultTableTheme = "#175e7a";
const defaultNoteTheme = "#fcf7ac";