drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2026-02-12 02:00:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Abstract tables, undo/redo, selected element

Browse Source
This commit is contained in:
1ilit
2024-03-10 23:55:23 +02:00
parent 91549d3089
commit dc8bbc0f9c
19 changed files with 446 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Area.jsx
View File

@@ -13,15 +13,11 @@ import {
defaultTableTheme,
State,
} from "../data/data";
import {
AreaContext,
SelectContext,
StateContext,
TabContext,
UndoRedoContext,
} from "../pages/Editor";
import { AreaContext, StateContext, TabContext } from "../pages/Editor";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
import useUndoRedo from "../hooks/useUndoRedo";
import useSelect from "../hooks/useSelect";
export default function Area(props) {
const [hovered, setHovered] = useState(false);
@@ -31,8 +27,8 @@ export default function Area(props) {
const { settings } = useSettings();
const { tab, setTab } = useContext(TabContext);
const { updateArea, deleteArea } = useContext(AreaContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext);
const { setUndoStack, setRedoStack } = useUndoRedo();
const { selectedElement, setSelectedElement } = useSelect();
const handleMouseDown = (e, dir) => {
props.setResize({ id: props.areaData.id, dir: dir });

5
src/components/AreaOverview.jsx
View File

@@ -26,12 +26,13 @@ import {
ObjectType,
State,
} from "../data/data";
import { AreaContext, StateContext, UndoRedoContext } from "../pages/Editor";
import { AreaContext, StateContext } from "../pages/Editor";
import useUndoRedo from "../hooks/useUndoRedo";
export default function AreaOverview() {
const { setState } = useContext(StateContext);
const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { setUndoStack, setRedoStack } = useUndoRedo();
const [editField, setEditField] = useState({});
const [value, setValue] = useState("");
const [filteredResult, setFilteredResult] = useState(

18
src/components/Canvas.jsx
View File

@@ -3,27 +3,23 @@ import Table from "./Table";
import { Action, Cardinality, Constraint, ObjectType } from "../data/data";
import Area from "./Area";
import Relationship from "./Relationship";
import {
AreaContext,
NoteContext,
TableContext,
UndoRedoContext,
SelectContext,
} from "../pages/Editor";
import { AreaContext, NoteContext } from "../pages/Editor";
import Note from "./Note";
import { Toast } from "@douyinfe/semi-ui";
import useSettings from "../hooks/useSettings";
import useTransform from "../hooks/useTransform";
import useTables from "../hooks/useTables";
import useUndoRedo from "../hooks/useUndoRedo";
import useSelect from "../hooks/useSelect";
export default function Canvas() {
const { tables, updateTable, relationships, addRelationship } =
useContext(TableContext);
const { tables, updateTable, relationships, addRelationship } = useTables();
const { areas, updateArea } = useContext(AreaContext);
const { notes, updateNote } = useContext(NoteContext);
const { settings } = useSettings();
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { setUndoStack, setRedoStack } = useUndoRedo();
const { transform, setTransform } = useTransform();
const { selectedElement, setSelectedElement } = useContext(SelectContext);
const { selectedElement, setSelectedElement } = useSelect();
const [dragging, setDragging] = useState({
element: ObjectType.NONE,
id: -1,

13
src/components/ControlPanel.jsx
View File

@@ -51,12 +51,9 @@ import {
import {
AreaContext,
NoteContext,
SelectContext,
StateContext,
TabContext,
TableContext,
TypeContext,
UndoRedoContext,
} from "../pages/Editor";
import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons";
import { ObjectType, Action, Tab, State, Cardinality } from "../data/data";
@@ -73,6 +70,9 @@ import { Thumbnail } from "./Thumbnail";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
import useTransform from "../hooks/useTransform";
import useTables from "../hooks/useTables";
import useUndoRedo from "../hooks/useUndoRedo";
import useSelect from "../hooks/useSelect";
export default function ControlPanel({
diagramId,
@@ -136,16 +136,15 @@ export default function ControlPanel({
setRelationships,
addRelationship,
deleteRelationship,
} = useContext(TableContext);
} = useTables();
const { types, addType, deleteType, updateType, setTypes } =
useContext(TypeContext);
const { notes, setNotes, updateNote, addNote, deleteNote } =
useContext(NoteContext);
const { areas, setAreas, updateArea, addArea, deleteArea } =
useContext(AreaContext);
const { undoStack, redoStack, setUndoStack, setRedoStack } =
useContext(UndoRedoContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext);
const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
const { selectedElement, setSelectedElement } = useSelect();
const { tab, setTab } = useContext(TabContext);
const { transform, setTransform } = useTransform();

5
src/components/Issues.jsx
View File

@@ -1,13 +1,14 @@
import { useContext, useState, useEffect } from "react";
import { Collapse, Badge } from "@douyinfe/semi-ui";
import { TableContext, TypeContext } from "../pages/Editor";
import { TypeContext } from "../pages/Editor";
import { validateDiagram, arrayIsEqual } from "../utils";
import useSettings from "../hooks/useSettings";
import useTables from "../hooks/useTables";
export default function Issues() {
const { settings } = useSettings();
const { types } = useContext(TypeContext);
const { tables, relationships } = useContext(TableContext);
const { tables, relationships } = useTables();
const [issues, setIssues] = useState([]);
useEffect(() => {

14
src/components/Note.jsx
View File

@@ -1,11 +1,5 @@
import { useContext, useState } from "react";
import {
NoteContext,
UndoRedoContext,
TabContext,
SelectContext,
StateContext,
} from "../pages/Editor";
import { NoteContext, TabContext, StateContext } from "../pages/Editor";
import { Action, ObjectType, noteThemes, Tab, State } from "../data/data";
import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
import {
@@ -14,6 +8,8 @@ import {
IconCheckboxTick,
} from "@douyinfe/semi-icons";
import useLayout from "../hooks/useLayout";
import useUndoRedo from "../hooks/useUndoRedo";
import useSelect from "../hooks/useSelect";
export default function Note(props) {
const [editField, setEditField] = useState({});
@@ -22,11 +18,11 @@ export default function Note(props) {
const r = 3;
const fold = 24;
const { updateNote, deleteNote } = useContext(NoteContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { setUndoStack, setRedoStack } = useUndoRedo();
const { setState } = useContext(StateContext);
const { layout } = useLayout();
const { tab, setTab } = useContext(TabContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext);
const { selectedElement, setSelectedElement } = useSelect();
const handleChange = (e) => {
const textarea = document.getElementById(`note_${props.data.id}`);

5
src/components/NotesOverview.jsx
View File

@@ -21,12 +21,13 @@ import {
IconSearch,
IconCheckboxTick,
} from "@douyinfe/semi-icons";
import { NoteContext, UndoRedoContext } from "../pages/Editor";
import { NoteContext } from "../pages/Editor";
import { noteThemes, Action, ObjectType } from "../data/data";
import useUndoRedo from "../hooks/useUndoRedo";
export default function NotesOverview() {
const { notes, updateNote, addNote, deleteNote } = useContext(NoteContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { setUndoStack, setRedoStack } = useUndoRedo();
const [value, setValue] = useState("");
const [editField, setEditField] = useState({});
const [activeKey, setActiveKey] = useState("");

33
src/components/ReferenceOverview.jsx
View File

@@ -1,4 +1,4 @@
import { useContext, useState } from "react";
import { useState } from "react";
import {
AutoComplete,
Collapse,
@@ -21,7 +21,8 @@ import {
IllustrationNoContentDark,
} from "@douyinfe/semi-illustrations";
import { Cardinality, Constraint, Action, ObjectType } from "../data/data";
import { TableContext, UndoRedoContext } from "../pages/Editor";
import useTables from "../hooks/useTables";
import useUndoRedo from "../hooks/useUndoRedo";
export default function ReferenceOverview() {
const columns = [
@@ -35,8 +36,8 @@ export default function ReferenceOverview() {
},
];
const { tables, relationships, setRelationships, deleteRelationship } =
useContext(TableContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
useTables();
const { setUndoStack, setRedoStack } = useUndoRedo();
const [refActiveIndex, setRefActiveIndex] = useState("");
const [value, setValue] = useState("");
const [filteredResult, setFilteredResult] = useState(
@@ -118,11 +119,13 @@ export default function ReferenceOverview() {
dataSource={[
{
key: "1",
foreign: `${tables[r.startTableId].name}(${tables[r.startTableId].fields[r.startFieldId]
.name
})`,
primary: `${tables[r.endTableId].name}(${tables[r.endTableId].fields[r.endFieldId].name
})`,
foreign: `${tables[r.startTableId].name}(${
tables[r.startTableId].fields[r.startFieldId]
.name
})`,
primary: `${tables[r.endTableId].name}(${
tables[r.endTableId].fields[r.endFieldId].name
})`,
},
]}
pagination={false}
@@ -160,12 +163,12 @@ export default function ReferenceOverview() {
prev.map((e, idx) =>
idx === i
? {
...e,
startTableId: e.endTableId,
startFieldId: e.endFieldId,
endTableId: e.startTableId,
endFieldId: e.startFieldId,
}
...e,
startTableId: e.endTableId,
startFieldId: e.endFieldId,
endTableId: e.startTableId,
endFieldId: e.startFieldId,
}
: e
)
);

219
src/components/Sidebar.jsx
View File

@@ -1,219 +0,0 @@
import { useContext, useEffect, useState } from "react";
import chatIcon from "../assets/chat.png";
import botIcon from "../assets/bot.png";
import teamIcon from "../assets/group.png";
import timeLine from "../assets/process.png";
import timeLineDark from "../assets/process_dark.png";
import todo from "../assets/calendar.png";
import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui";
import {
BotMessageContext,
MessageContext,
UndoRedoContext,
} from "../pages/Editor";
import Todo from "./Todo";
import Chat from "./Chat";
import DrawBot from "./DrawBot";
import useSettings from "../hooks/useSettings";
export default function Sidebar() {
const SidesheetType = {
NONE: 0,
CHAT: 1,
TEAM: 2,
TODO: 3,
TIMELINE: 4,
BOT: 5,
};
const { undoStack } = useContext(UndoRedoContext);
const { messages } = useContext(MessageContext);
const { settings } = useSettings();
const { botMessages } = useContext(BotMessageContext);
const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
const [seen, setSeen] = useState(0);
const [seenBot, setSeenBot] = useState(0);
const [count, setCount] = useState(messages.length - seen);
const [botCount, setBotCount] = useState(botMessages.length - seenBot);
const getTitle = (type) => {
switch (type) {
case SidesheetType.TIMELINE:
return (
<div className="flex items-center">
<img
src={settings.mode === "light" ? timeLine : timeLineDark}
className="w-7"
alt="chat icon"
/>
<div className="ms-3 text-lg">Timeline</div>
</div>
);
case SidesheetType.CHAT:
return (
<div className="flex items-center">
<img src={chatIcon} className="w-7" alt="chat icon" />
<div className="ms-3 text-lg">Chat</div>
</div>
);
case SidesheetType.TODO:
return (
<div className="flex items-center">
<img src={todo} className="w-7" alt="todo icon" />
<div className="ms-3 text-lg">To-do list</div>
</div>
);
case SidesheetType.BOT:
return (
<div className="flex items-center">
<img src={botIcon} className="w-7" alt="todo icon" />
<div className="ms-3 text-lg">drawBOT</div>
</div>
);
default:
break;
}
};
const getContent = (type) => {
switch (type) {
case SidesheetType.TIMELINE:
return renderTimeline();
case SidesheetType.TODO:
return <Todo />;
case SidesheetType.CHAT:
return <Chat />;
case SidesheetType.BOT:
return <DrawBot />;
default:
break;
}
};
useEffect(() => {
if (sidesheet !== SidesheetType.CHAT) {
setCount(messages.length - seen);
}
if (sidesheet !== SidesheetType.BOT) {
setBotCount(botMessages.length - seenBot);
}
}, [
sidesheet,
seen,
messages.length,
SidesheetType.CHAT,
seenBot,
botMessages.length,
SidesheetType.BOT,
]);
return (
<>
<div className="ps-3 pe-4 py-4 shadow-lg h-full select-none border-l border-color">
<Tooltip content="Chat">
<Badge
count={count === 0 ? null : count}
overflowCount={99}
type="danger"
>
<button
className="block"
onClick={() => {
setSidesheet(SidesheetType.CHAT);
setSeen(messages.length);
}}
>
<img src={chatIcon} className="w-8 mb-5" alt="chat icon" />
</button>
</Badge>
</Tooltip>
<Tooltip content="Team">
<button className="block">
<img src={teamIcon} className="w-8 mb-5" alt="chat icon" />
</button>
</Tooltip>
<Tooltip content="To-do">
<button
className="block"
onClick={() => setSidesheet(SidesheetType.TODO)}
>
<img src={todo} className="w-8 mb-5" alt="todo icon" />
</button>
</Tooltip>
<Tooltip content="Timeline">
<button
className="block"
onClick={() => setSidesheet(SidesheetType.TIMELINE)}
>
<img
src={settings.mode === "light" ? timeLine : timeLineDark}
className="w-8 mb-5"
alt="chat icon"
/>
</button>
</Tooltip>
<Tooltip content="drawBOT">
<Badge
count={botCount === 0 ? null : botCount}
overflowCount={99}
type="danger"
>
<button
className="block"
onClick={() => {
setSidesheet(SidesheetType.BOT);
setSeenBot(botMessages.length);
}}
>
<img src={botIcon} className="w-8 mb-5" alt="chat icon" />
</button>
</Badge>
</Tooltip>
</div>
<SideSheet
visible={sidesheet !== SidesheetType.NONE}
onCancel={() => {
if (sidesheet === SidesheetType.CHAT) {
setSeen(messages.length);
} else if (sidesheet === SidesheetType.BOT) {
setSeenBot(botMessages.length);
}
setSidesheet(SidesheetType.NONE);
}}
width={340}
title={getTitle(sidesheet)}
style={{ paddingBottom: "16px" }}
bodyStyle={{ padding: "0px" }}
>
{getContent(sidesheet)}
</SideSheet>
</>
);
function renderTimeline() {
if (undoStack.length > 0) {
return (
<List className="sidesheet-theme">
{[...undoStack].reverse().map((e, i) => (
<List.Item
key={i}
style={{ padding: "4px 18px 4px 18px" }}
className="hover-1"
>
<div className="flex items-center py-1 w-full">
<i className="block fa-regular fa-circle fa-xs"></i>
<div className="ms-2">{e.message}</div>
</div>
</List.Item>
))}
</List>
);
} else {
return (
<div className="m-5 sidesheet-theme">
No activity was recorded. You have not added anything to your diagram
yet.
</div>
);
}
}
}

17
src/components/Table.jsx
View File

@@ -31,16 +31,13 @@ import {
SideSheet,
Toast,
} from "@douyinfe/semi-ui";
import {
SelectContext,
TabContext,
TableContext,
TypeContext,
UndoRedoContext,
} from "../pages/Editor";
import { TabContext, TypeContext } from "../pages/Editor";
import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
import useUndoRedo from "../hooks/useUndoRedo";
import useTables from "../hooks/useTables";
import useSelect from "../hooks/useSelect";
export default function Table(props) {
const [isHovered, setIsHovered] = useState(false);
@@ -48,12 +45,12 @@ export default function Table(props) {
const [editField, setEditField] = useState({});
const { layout } = useLayout();
const { deleteTable, updateTable, updateField, setRelationships } =
useContext(TableContext);
useTables();
const { tab, setTab } = useContext(TabContext);
const { settings } = useSettings();
const { types } = useContext(TypeContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext);
const { setUndoStack, setRedoStack } = useUndoRedo();
const { selectedElement, setSelectedElement } = useSelect();
const height = props.tableData.fields.length * 36 + 50 + 7;

16
src/components/TableOverview.jsx
View File

@@ -35,13 +35,11 @@ import {
IllustrationNoContent,
IllustrationNoContentDark,
} from "@douyinfe/semi-illustrations";
import {
SelectContext,
TableContext,
TypeContext,
UndoRedoContext,
} from "../pages/Editor";
import { TypeContext } from "../pages/Editor";
import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
import useTables from "../hooks/useTables";
import useUndoRedo from "../hooks/useUndoRedo";
import useSelect from "../hooks/useSelect";
export default function TableOverview() {
const [indexActiveKey, setIndexActiveKey] = useState("");
@@ -53,10 +51,10 @@ export default function TableOverview() {
updateField,
updateTable,
setRelationships,
} = useContext(TableContext);
} = useTables();
const { types } = useContext(TypeContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext);
const { setUndoStack, setRedoStack } = useUndoRedo();
const { selectedElement, setSelectedElement } = useSelect();
const [editField, setEditField] = useState({});
const [filteredResult, setFilteredResult] = useState(
tables.map((t) => {

5
src/components/TypesOverview.jsx
View File

@@ -27,13 +27,14 @@ import {
IllustrationNoContent,
IllustrationNoContentDark,
} from "@douyinfe/semi-illustrations";
import { TypeContext, UndoRedoContext } from "../pages/Editor";
import { TypeContext } from "../pages/Editor";
import { isSized, hasPrecision, getSize } from "../utils";
import useUndoRedo from "../hooks/useUndoRedo";
export default function TableOverview() {
const [value, setValue] = useState("");
const { types, addType, deleteType, updateType } = useContext(TypeContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { setUndoStack, setRedoStack } = useUndoRedo();
const [editField, setEditField] = useState({});
const [filteredResult, setFilteredResult] = useState(
types.map((t) => {