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

Remove tab context

Browse Source
This commit is contained in:
1ilit 2024-03-13 20:39:16 +02:00
parent 24eecdc39b
commit 40ef1b057e
9 changed files with 212 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Area.jsx
View File

@ -13,7 +13,7 @@ import {
defaultTableTheme,
State,
} from "../data/data";
import { StateContext, TabContext } from "../pages/Editor";
import { StateContext } from "../pages/Editor";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
import useUndoRedo from "../hooks/useUndoRedo";
@ -26,7 +26,6 @@ export default function Area(props) {
const { setState } = useContext(StateContext);
const { layout } = useLayout();
const { settings } = useSettings();
const { tab, setTab } = useContext(TabContext);
const { updateArea, deleteArea } = useAreas();
const { setUndoStack, setRedoStack } = useUndoRedo();
const { selectedElement, setSelectedElement } = useSelect();
@ -79,20 +78,27 @@ export default function Area(props) {
{(hovered ||
(selectedElement.element === ObjectType.AREA &&
selectedElement.id === props.areaData.id &&
selectedElement.openDialogue &&
selectedElement.open &&
!layout.sidebar)) && (
<div className="absolute top-2 right-3">
<Popover
visible={
selectedElement.element === ObjectType.AREA &&
selectedElement.id === props.areaData.id &&
selectedElement.openDialogue &&
selectedElement.open &&
!layout.sidebar
}
onClickOutSide={() => {
if (selectedElement.editFromToolbar) {
setSelectedElement((prev) => ({
...prev,
openDialogue: false,
editFromToolbar: false,
}));
return;
}
setSelectedElement((prev) => ({
...prev,
open: false,
}));
setState(State.SAVING);
}}
@ -261,18 +267,25 @@ export default function Area(props) {
}}
onClick={() => {
if (layout.sidebar) {
setTab(Tab.subject_areas);
if (tab !== Tab.subject_areas) return;
setSelectedElement((prev) => ({
...prev,
element: ObjectType.AREA,
id: props.areaData.id,
currentTab: Tab.subject_areas,
open: true,
}));
if (selectedElement.currentTab !== Tab.subject_areas)
return;
document
.getElementById(`scroll_area_${props.areaData.id}`)
.scrollIntoView({ behavior: "smooth" });
} else {
setSelectedElement({
setSelectedElement((prev) => ({
...prev,
element: ObjectType.AREA,
id: props.areaData.id,
openDialogue: true,
openCollapse: false,
});
open: true,
}));
}
}}
></Button>

15
src/components/Canvas.jsx
View File

@ -102,12 +102,12 @@ export default function Canvas() {
prevY: note.y,
});
}
setSelectedElement({
setSelectedElement((prev) => ({
...prev,
element: type,
id: id,
openDialogue: false,
openCollapse: false,
});
open: false,
}));
};
const handleMouseMove = (e) => {
@ -284,7 +284,12 @@ export default function Canvas() {
},
]);
setRedoStack([]);
setSelectedElement({ element: ObjectType.NONE, id: -1 });
setSelectedElement((prev) => ({
...prev,
element: ObjectType.NONE,
id: -1,
open: false,
}));
}
setPanning({ state: false, x: 0, y: 0 });
setCursor("default");

64
src/components/ControlPanel.jsx
View File

@ -43,7 +43,7 @@ import {
jsonToMariaDB,
jsonToSQLServer,
} from "../utils/toSQL";
import { StateContext, TabContext } from "../pages/Editor";
import { StateContext } from "../pages/Editor";
import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons";
import { ObjectType, Action, Tab, State, Cardinality } from "../data/data";
import jsPDF from "jspdf";
@ -137,7 +137,6 @@ export default function ControlPanel({
const { areas, setAreas, updateArea, addArea, deleteArea } = useAreas();
const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
const { selectedElement, setSelectedElement } = useSelect();
const { tab, setTab } = useContext(TabContext);
const { transform, setTransform } = useTransform();
const invertLayout = (component) =>
@ -574,54 +573,55 @@ export default function ControlPanel({
const edit = () => {
if (selectedElement.element === ObjectType.TABLE) {
if (!layout.sidebar) {
setSelectedElement({
element: ObjectType.TABLE,
id: selectedElement.id,
openDialogue: true,
openCollapse: false,
});
setSelectedElement((prev) => ({
...prev,
open: true,
}));
} else {
setTab(Tab.tables);
setSelectedElement({
element: ObjectType.TABLE,
id: selectedElement.id,
openDialogue: false,
openCollapse: true,
});
if (tab !== Tab.tables) return;
setSelectedElement((prev) => ({
...prev,
open: true,
currentTab: Tab.tables,
}));
if (selectedElement.currentTab !== Tab.tables) return;
document
.getElementById(`scroll_table_${selectedElement.id}`)
.scrollIntoView({ behavior: "smooth" });
}
} else if (selectedElement.element === ObjectType.AREA) {
if (layout.sidebar) {
setTab(Tab.subject_areas);
if (tab !== Tab.subject_areas) return;
setSelectedElement((prev) => ({
...prev,
currentTab: Tab.subject_areas,
}));
if (selectedElement.currentTab !== Tab.subject_areas) return;
document
.getElementById(`scroll_area_${selectedElement.id}`)
.scrollIntoView({ behavior: "smooth" });
} else {
setSelectedElement({
element: ObjectType.AREA,
id: selectedElement.id,
openDialogue: true,
openCollapse: false,
});
setSelectedElement((prev) => ({
...prev,
open: true,
editFromToolbar: true,
}));
}
} else if (selectedElement.element === ObjectType.NOTE) {
if (layout.sidebar) {
setTab(Tab.notes);
if (tab !== Tab.notes) return;
setSelectedElement((prev) => ({
...prev,
currentTab: Tab.notes,
open: false,
}));
if (selectedElement.currentTab !== Tab.notes) return;
document
.getElementById(`scroll_note_${selectedElement.id}`)
.scrollIntoView({ behavior: "smooth" });
} else {
setSelectedElement({
element: ObjectType.NOTE,
id: selectedElement.id,
openDialogue: true,
openCollapse: false,
});
setSelectedElement((prev) => ({
...prev,
open: true,
editFromToolbar: true,
}));
}
}
};

135
src/components/Note.jsx
View File

@ -1,5 +1,5 @@
import { useContext, useState } from "react";
import { TabContext, StateContext } from "../pages/Editor";
import { StateContext } from "../pages/Editor";
import { Action, ObjectType, noteThemes, Tab, State } from "../data/data";
import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
import {
@ -12,25 +12,24 @@ import useUndoRedo from "../hooks/useUndoRedo";
import useSelect from "../hooks/useSelect";
import useNotes from "../hooks/useNotes";
export default function Note(props) {
const [editField, setEditField] = useState({});
const [hovered, setHovered] = useState(false);
export default function Note({ data, onMouseDown }) {
const w = 180;
const r = 3;
const fold = 24;
const [editField, setEditField] = useState({});
const [hovered, setHovered] = useState(false);
const { layout } = useLayout();
const { setState } = useContext(StateContext);
const { updateNote, deleteNote } = useNotes();
const { setUndoStack, setRedoStack } = useUndoRedo();
const { setState } = useContext(StateContext);
const { layout } = useLayout();
const { tab, setTab } = useContext(TabContext);
const { selectedElement, setSelectedElement } = useSelect();
const handleChange = (e) => {
const textarea = document.getElementById(`note_${props.data.id}`);
const textarea = document.getElementById(`note_${data.id}`);
textarea.style.height = "0";
textarea.style.height = textarea.scrollHeight + "px";
const newHeight = textarea.scrollHeight + 41;
updateNote(props.data.id, { content: e.target.value, height: newHeight });
updateNote(data.id, { content: e.target.value, height: newHeight });
};
return (
@ -39,23 +38,21 @@ export default function Note(props) {
onMouseLeave={() => setHovered(false)}
>
<path
d={`M${props.data.x + fold} ${props.data.y} L${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 + 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 + props.data.height - r
} L${props.data.x} ${props.data.y + fold}`}
fill={props.data.color}
d={`M${data.x + fold} ${data.y} L${data.x + w - r} ${
data.y
} A${r} ${r} 0 0 1 ${data.x + w} ${data.y + r} L${data.x + w} ${
data.y + data.height - r
} A${r} ${r} 0 0 1 ${data.x + w - r} ${data.y + data.height} L${
data.x + r
} ${data.y + data.height} A${r} ${r} 0 0 1 ${data.x} ${
data.y + data.height - r
} L${data.x} ${data.y + fold}`}
fill={data.color}
stroke={
hovered
? "rgb(59 130 246)"
: selectedElement.element === ObjectType.NOTE &&
selectedElement.id === props.data.id
selectedElement.id === data.id
? "rgb(59 130 246)"
: "rgb(168 162 158)"
}
@ -64,19 +61,17 @@ export default function Note(props) {
strokeWidth="1.2"
/>
<path
d={`M${props.data.x} ${props.data.y + fold} L${
props.data.x + fold - r
} ${props.data.y + fold} A${r} ${r} 0 0 0 ${props.data.x + fold} ${
props.data.y + fold - r
} L${props.data.x + fold} ${props.data.y} L${props.data.x} ${
props.data.y + fold
} Z`}
fill={props.data.color}
d={`M${data.x} ${data.y + fold} L${data.x + fold - r} ${
data.y + fold
} A${r} ${r} 0 0 0 ${data.x + fold} ${data.y + fold - r} L${
data.x + fold
} ${data.y} L${data.x} ${data.y + fold} Z`}
fill={data.color}
stroke={
hovered
? "rgb(59 130 246)"
: selectedElement.element === ObjectType.NOTE &&
selectedElement.id === props.data.id
selectedElement.id === data.id
? "rgb(59 130 246)"
: "rgb(168 162 158)"
}
@ -85,29 +80,29 @@ export default function Note(props) {
strokeWidth="1.2"
/>
<foreignObject
x={props.data.x}
y={props.data.y}
x={data.x}
y={data.y}
width={w}
height={props.data.height}
onMouseDown={props.onMouseDown}
height={data.height}
onMouseDown={onMouseDown}
>
<div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
<label htmlFor={`note_${props.data.id}`} className="ms-5">
{props.data.title}
<label htmlFor={`note_${data.id}`} className="ms-5">
{data.title}
</label>
<textarea
id={`note_${props.data.id}`}
value={props.data.content}
id={`note_${data.id}`}
value={data.content}
onChange={handleChange}
onFocus={(e) =>
setEditField({
content: e.target.value,
height: props.data.height,
height: data.height,
})
}
onBlur={(e) => {
if (e.target.value === editField.content) return;
const textarea = document.getElementById(`note_${props.data.id}`);
const textarea = document.getElementById(`note_${data.id}`);
textarea.style.height = "0";
textarea.style.height = textarea.scrollHeight + "px";
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
@ -116,7 +111,7 @@ export default function Note(props) {
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: props.data.id,
nid: data.id,
undo: editField,
redo: { content: e.target.value, height: newHeight },
message: `Edit note content to "${e.target.value}"`,
@ -125,25 +120,32 @@ export default function Note(props) {
setRedoStack([]);
}}
className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
style={{ backgroundColor: props.data.color }}
style={{ backgroundColor: data.color }}
></textarea>
{(hovered ||
(selectedElement.element === ObjectType.NOTE &&
selectedElement.id === props.data.id &&
selectedElement.openDialogue &&
selectedElement.id === data.id &&
selectedElement.open &&
!layout.sidebar)) && (
<div className="absolute top-2 right-3">
<Popover
visible={
selectedElement.element === ObjectType.NOTE &&
selectedElement.id === props.data.id &&
selectedElement.openDialogue &&
selectedElement.id === data.id &&
selectedElement.open &&
!layout.sidebar
}
onClickOutSide={() => {
if (selectedElement.editFromToolbar) {
setSelectedElement((prev) => ({
...prev,
openDialogue: false,
editFromToolbar: false,
}));
return;
}
setSelectedElement((prev) => ({
...prev,
open: false,
}));
setState(State.SAVING);
}}
@ -153,11 +155,11 @@ export default function Note(props) {
<div className="font-semibold mb-2 ms-1">Edit note</div>
<div className="w-[280px] flex items-center mb-2">
<Input
value={props.data.title}
value={data.title}
placeholder="Title"
className="me-2"
onChange={(value) =>
updateNote(props.data.id, { title: value })
updateNote(data.id, { title: value })
}
onFocus={(e) => setEditField({ title: e.target.value })}
onBlur={(e) => {
@ -167,7 +169,7 @@ export default function Note(props) {
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: props.data.id,
nid: data.id,
undo: editField,
redo: { title: e.target.value },
message: `Edit note title to "${e.target.value}"`,
@ -193,17 +195,17 @@ export default function Note(props) {
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: props.data.id,
undo: { color: props.data.color },
nid: data.id,
undo: { color: data.color },
redo: { color: c },
message: `Edit note color to ${c}`,
},
]);
setRedoStack([]);
updateNote(props.data.id, { color: c });
updateNote(data.id, { color: c });
}}
>
{props.data.color === c ? (
{data.color === c ? (
<IconCheckboxTick
style={{ color: "white" }}
/>
@ -220,7 +222,7 @@ export default function Note(props) {
>
<div
className="h-[32px] w-[32px] rounded"
style={{ backgroundColor: props.data.color }}
style={{ backgroundColor: data.color }}
/>
</Popover>
</div>
@ -231,7 +233,7 @@ export default function Note(props) {
block
onClick={() => {
Toast.success(`Note deleted!`);
deleteNote(props.data.id, true);
deleteNote(data.id, true);
}}
>
Delete
@ -253,18 +255,21 @@ export default function Note(props) {
}}
onClick={() => {
if (layout.sidebar) {
setTab(Tab.notes);
if (tab !== Tab.notes) return;
setSelectedElement((prev) => ({
...prev,
currentTab: Tab.notes,
}));
if (selectedElement.currentTab !== Tab.notes) return;
document
.getElementById(`scroll_note_${props.data.id}`)
.getElementById(`scroll_note_${data.id}`)
.scrollIntoView({ behavior: "smooth" });
} else {
setSelectedElement({
setSelectedElement((prev) => ({
...prev,
element: ObjectType.NOTE,
id: props.data.id,
openDialogue: true,
openCollapse: false,
});
id: data.id,
open: true,
}));
}
}}
></Button>

43
src/components/SidePanel.jsx
View File

@ -1,18 +1,17 @@
import { useContext } from "react";
import { Tabs } from "@douyinfe/semi-ui";
import { Tab } from "../data/data";
import TableOverview from "./TableOverview";
import ReferenceOverview from "./ReferenceOverview";
import AreaOverview from "./AreaOverview";
import { Tab } from "../data/data";
import { TabContext } from "../pages/Editor";
import NotesOverview from "./NotesOverview";
import Issues from "./Issues";
import TypesOverview from "./TypesOverview";
import Issues from "./Issues";
import useLayout from "../hooks/useLayout";
import useSelect from "../hooks/useSelect";
const SidePanel = (props) => {
const { tab, setTab } = useContext(TabContext);
export default function SidePanel({ width, resize, setResize }) {
const { layout } = useLayout();
const { selectedElement, setSelectedElement } = useSelect();
const tabList = [
{ tab: "Tables", itemKey: Tab.tables },
@ -22,30 +21,32 @@ const SidePanel = (props) => {
{ tab: "Types", itemKey: Tab.types },
];
const contentList = [
<TableOverview key={1}/>,
<ReferenceOverview key={2}/>,
<AreaOverview key={3}/>,
<NotesOverview key={4}/>,
<TypesOverview key={5}/>,
<TableOverview key={1} />,
<ReferenceOverview key={2} />,
<AreaOverview key={3} />,
<NotesOverview key={4} />,
<TypesOverview key={5} />,
];
return (
<div className="flex h-full">
<div
className="flex flex-col h-full relative border-r border-color"
style={{ width: `${props.width}px` }}
style={{ width: `${width}px` }}
>
<div className="h-full flex-1 overflow-y-auto">
<Tabs
type="card"
activeKey={tab}
activeKey={selectedElement.currentTab}
tabList={tabList}
onChange={(key) => {
setTab(key);
}}
onChange={(key) =>
setSelectedElement((prev) => ({ ...prev, currentTab: key }))
}
collapsible
>
<div className="p-2">{contentList[parseInt(tab) - 1]}</div>
<div className="p-2">
{contentList[parseInt(selectedElement.currentTab) - 1]}
</div>
</Tabs>
</div>
{layout.issues && (
@ -56,14 +57,12 @@ const SidePanel = (props) => {
</div>
<div
className={`flex justify-center items-center p-1 h-auto hover-2 cursor-col-resize ${
props.resize ? "bg-semi-grey-2" : ""
resize ? "bg-semi-grey-2" : ""
}`}
onMouseDown={() => props.setResize(true)}
onMouseDown={() => setResize(true)}
>
<div className="w-1 border-x border-color h-1/6" />
</div>
</div>
);
};
export default SidePanel;
}

29
src/components/Table.jsx
View File

@ -1,4 +1,4 @@
import { useState, useContext } from "react";
import { useState } from "react";
import {
sqlDataTypes,
tableThemes,
@ -31,7 +31,6 @@ import {
SideSheet,
Toast,
} from "@douyinfe/semi-ui";
import { TabContext } from "../pages/Editor";
import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
@ -47,7 +46,6 @@ export default function Table(props) {
const { layout } = useLayout();
const { deleteTable, updateTable, updateField, setRelationships } =
useTables();
const { tab, setTab } = useContext(TabContext);
const { settings } = useSettings();
const { types } = useTypes();
const { setUndoStack, setRedoStack } = useUndoRedo();
@ -113,21 +111,21 @@ export default function Table(props) {
}}
onClick={() => {
if (!layout.sidebar) {
setSelectedElement({
setSelectedElement((prev) => ({
...prev,
element: ObjectType.TABLE,
id: props.tableData.id,
openDialogue: true,
openCollapse: false,
});
open: true,
}));
} else {
setTab(Tab.tables);
setSelectedElement({
setSelectedElement((prev) => ({
...prev,
currentTab: Tab.tables,
element: ObjectType.TABLE,
id: props.tableData.id,
openDialogue: false,
openCollapse: true,
});
if (tab !== Tab.tables) return;
open: true,
}));
if (selectedElement.currentTab !== Tab.tables) return;
document
.getElementById(`scroll_table_${props.tableData.id}`)
.scrollIntoView({ behavior: "smooth" });
@ -266,12 +264,13 @@ export default function Table(props) {
visible={
selectedElement.element === ObjectType.TABLE &&
selectedElement.id === props.tableData.id &&
selectedElement.openDialogue
selectedElement.open &&
!layout.sidebar
}
onCancel={() =>
setSelectedElement((prev) => ({
...prev,
openDialogue: !prev.openDialogue,
open: !prev.open,
}))
}
style={{ paddingBottom: "16px" }}

20
src/components/TableOverview.jsx
View File

@ -89,12 +89,11 @@ export default function TableOverview() {
onChange={(v) => setValue(v)}
onSelect={(v) => {
const { id } = tables.find((t) => t.name === v);
setSelectedElement({
element: ObjectType.TABLE,
setSelectedElement((prev) => ({
...prev,
id: id,
openDialogue: false,
openCollapse: true,
});
open: true,
}));
document
.getElementById(`scroll_table_${id}`)
.scrollIntoView({ behavior: "smooth" });
@ -109,14 +108,13 @@ export default function TableOverview() {
</Col>
</Row>
<Collapse
activeKey={selectedElement.openCollapse ? `${selectedElement.id}` : ""}
activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
onChange={(k) =>
setSelectedElement({
element: ObjectType.TABLE,
setSelectedElement((prev) => ({
...prev,
id: parseInt(k),
openDialogue: false,
openCollapse: true,
})
open: true,
}))
}
accordion
>

5
src/context/SelectContext.jsx
View File

@ -1,5 +1,5 @@
import { createContext, useState } from "react";
import { ObjectType } from "../data/data";
import { ObjectType, Tab } from "../data/data";
export const SelectContext = createContext(null);
@ -9,6 +9,9 @@ export default function SelectContextProvider({ children }) {
id: -1,
openDialogue: false,
openCollapse: false,
currentTab: Tab.tables,
open: false, // open popover or sidesheet when sidebar is disabled
openFromToolbar: false, // this is to handle triggering onClickOutside when sidebar is disabled
});
return (

6
src/pages/Editor.jsx
View File

@ -2,7 +2,7 @@ import { useState, createContext, useEffect, useCallback } from "react";
import ControlPanel from "../components/ControlPanel";
import Canvas from "../components/Canvas";
import SidePanel from "../components/SidePanel";
import { Tab, State } from "../data/data";
import { State } from "../data/data";
import { db } from "../data/db";
import useLayout from "../hooks/useLayout";
import LayoutContextProvider from "../context/LayoutContext";
@ -23,7 +23,6 @@ import useTypes from "../hooks/useTypes";
import TypesContextProvider from "../context/TypesContext";
export const StateContext = createContext();
export const TabContext = createContext();
export const TaskContext = createContext();
export default function Editor() {
@ -56,7 +55,6 @@ function WorkSpace() {
const { types, setTypes } = useTypes();
const [resize, setResize] = useState(false);
const [width, setWidth] = useState(340);
const [tab, setTab] = useState(Tab.tables);
const [tasks, setTasks] = useState([]);
const { layout } = useLayout();
const { areas, setAreas } = useAreas();
@ -316,7 +314,6 @@ function WorkSpace() {
return (
<StateContext.Provider value={{ state, setState }}>
<TabContext.Provider value={{ tab, setTab }}>
<div className="h-[100vh] flex flex-col overflow-hidden theme">
<TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
<ControlPanel
@ -347,7 +344,6 @@ function WorkSpace() {
</div>
</div>
</div>
</TabContext.Provider>
</StateContext.Provider>
);
}