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

15
src/components/Canvas.jsx
View File

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

64
src/components/ControlPanel.jsx
View File

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

135
src/components/Note.jsx
View File

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

43
src/components/SidePanel.jsx
View File

@ -1,18 +1,17 @@
import { useContext } from "react";
import { Tabs } from "@douyinfe/semi-ui"; import { Tabs } from "@douyinfe/semi-ui";
import { Tab } from "../data/data";
import TableOverview from "./TableOverview"; import TableOverview from "./TableOverview";
import ReferenceOverview from "./ReferenceOverview"; import ReferenceOverview from "./ReferenceOverview";
import AreaOverview from "./AreaOverview"; import AreaOverview from "./AreaOverview";
import { Tab } from "../data/data";
import { TabContext } from "../pages/Editor";
import NotesOverview from "./NotesOverview"; import NotesOverview from "./NotesOverview";
import Issues from "./Issues";
import TypesOverview from "./TypesOverview"; import TypesOverview from "./TypesOverview";
import Issues from "./Issues";
import useLayout from "../hooks/useLayout"; import useLayout from "../hooks/useLayout";
import useSelect from "../hooks/useSelect";
const SidePanel = (props) => { export default function SidePanel({ width, resize, setResize }) {
const { tab, setTab } = useContext(TabContext);
const { layout } = useLayout(); const { layout } = useLayout();
const { selectedElement, setSelectedElement } = useSelect();
const tabList = [ const tabList = [
{ tab: "Tables", itemKey: Tab.tables }, { tab: "Tables", itemKey: Tab.tables },
@ -22,30 +21,32 @@ const SidePanel = (props) => {
{ tab: "Types", itemKey: Tab.types }, { tab: "Types", itemKey: Tab.types },
]; ];
const contentList = [ const contentList = [
<TableOverview key={1}/>, <TableOverview key={1} />,
<ReferenceOverview key={2}/>, <ReferenceOverview key={2} />,
<AreaOverview key={3}/>, <AreaOverview key={3} />,
<NotesOverview key={4}/>, <NotesOverview key={4} />,
<TypesOverview key={5}/>, <TypesOverview key={5} />,
]; ];
return ( return (
<div className="flex h-full"> <div className="flex h-full">
<div <div
className="flex flex-col h-full relative border-r border-color" 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"> <div className="h-full flex-1 overflow-y-auto">
<Tabs <Tabs
type="card" type="card"
activeKey={tab} activeKey={selectedElement.currentTab}
tabList={tabList} tabList={tabList}
onChange={(key) => { onChange={(key) =>
setTab(key); setSelectedElement((prev) => ({ ...prev, currentTab: key }))
}} }
collapsible collapsible
> >
<div className="p-2">{contentList[parseInt(tab) - 1]}</div> <div className="p-2">
{contentList[parseInt(selectedElement.currentTab) - 1]}
</div>
</Tabs> </Tabs>
</div> </div>
{layout.issues && ( {layout.issues && (
@ -56,14 +57,12 @@ const SidePanel = (props) => {
</div> </div>
<div <div
className={`flex justify-center items-center p-1 h-auto hover-2 cursor-col-resize ${ 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 className="w-1 border-x border-color h-1/6" />
</div> </div>
</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 { import {
sqlDataTypes, sqlDataTypes,
tableThemes, tableThemes,
@ -31,7 +31,6 @@ import {
SideSheet, SideSheet,
Toast, Toast,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import { TabContext } from "../pages/Editor";
import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL"; import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL";
import useLayout from "../hooks/useLayout"; import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings"; import useSettings from "../hooks/useSettings";
@ -47,7 +46,6 @@ export default function Table(props) {
const { layout } = useLayout(); const { layout } = useLayout();
const { deleteTable, updateTable, updateField, setRelationships } = const { deleteTable, updateTable, updateField, setRelationships } =
useTables(); useTables();
const { tab, setTab } = useContext(TabContext);
const { settings } = useSettings(); const { settings } = useSettings();
const { types } = useTypes(); const { types } = useTypes();
const { setUndoStack, setRedoStack } = useUndoRedo(); const { setUndoStack, setRedoStack } = useUndoRedo();
@ -113,21 +111,21 @@ export default function Table(props) {
}} }}
onClick={() => { onClick={() => {
if (!layout.sidebar) { if (!layout.sidebar) {
setSelectedElement({ setSelectedElement((prev) => ({
...prev,
element: ObjectType.TABLE, element: ObjectType.TABLE,
id: props.tableData.id, id: props.tableData.id,
openDialogue: true, open: true,
openCollapse: false, }));
});
} else { } else {
setTab(Tab.tables); setSelectedElement((prev) => ({
setSelectedElement({ ...prev,
currentTab: Tab.tables,
element: ObjectType.TABLE, element: ObjectType.TABLE,
id: props.tableData.id, id: props.tableData.id,
openDialogue: false, open: true,
openCollapse: true, }));
}); if (selectedElement.currentTab !== Tab.tables) return;
if (tab !== Tab.tables) return;
document document
.getElementById(`scroll_table_${props.tableData.id}`) .getElementById(`scroll_table_${props.tableData.id}`)
.scrollIntoView({ behavior: "smooth" }); .scrollIntoView({ behavior: "smooth" });
@ -266,12 +264,13 @@ export default function Table(props) {
visible={ visible={
selectedElement.element === ObjectType.TABLE && selectedElement.element === ObjectType.TABLE &&
selectedElement.id === props.tableData.id && selectedElement.id === props.tableData.id &&
selectedElement.openDialogue selectedElement.open &&
!layout.sidebar
} }
onCancel={() => onCancel={() =>
setSelectedElement((prev) => ({ setSelectedElement((prev) => ({
...prev, ...prev,
openDialogue: !prev.openDialogue, open: !prev.open,
})) }))
} }
style={{ paddingBottom: "16px" }} style={{ paddingBottom: "16px" }}

20
src/components/TableOverview.jsx
View File

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

5
src/context/SelectContext.jsx
View File

@ -1,5 +1,5 @@
import { createContext, useState } from "react"; import { createContext, useState } from "react";
import { ObjectType } from "../data/data"; import { ObjectType, Tab } from "../data/data";
export const SelectContext = createContext(null); export const SelectContext = createContext(null);
@ -9,6 +9,9 @@ export default function SelectContextProvider({ children }) {
id: -1, id: -1,
openDialogue: false, openDialogue: false,
openCollapse: 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 ( return (

60
src/pages/Editor.jsx
View File

@ -2,7 +2,7 @@ import { useState, createContext, useEffect, useCallback } from "react";
import ControlPanel from "../components/ControlPanel"; import ControlPanel from "../components/ControlPanel";
import Canvas from "../components/Canvas"; import Canvas from "../components/Canvas";
import SidePanel from "../components/SidePanel"; import SidePanel from "../components/SidePanel";
import { Tab, State } from "../data/data"; import { State } from "../data/data";
import { db } from "../data/db"; import { db } from "../data/db";
import useLayout from "../hooks/useLayout"; import useLayout from "../hooks/useLayout";
import LayoutContextProvider from "../context/LayoutContext"; import LayoutContextProvider from "../context/LayoutContext";
@ -23,7 +23,6 @@ import useTypes from "../hooks/useTypes";
import TypesContextProvider from "../context/TypesContext"; import TypesContextProvider from "../context/TypesContext";
export const StateContext = createContext(); export const StateContext = createContext();
export const TabContext = createContext();
export const TaskContext = createContext(); export const TaskContext = createContext();
export default function Editor() { export default function Editor() {
@ -56,7 +55,6 @@ function WorkSpace() {
const { types, setTypes } = useTypes(); const { types, setTypes } = useTypes();
const [resize, setResize] = useState(false); const [resize, setResize] = useState(false);
const [width, setWidth] = useState(340); const [width, setWidth] = useState(340);
const [tab, setTab] = useState(Tab.tables);
const [tasks, setTasks] = useState([]); const [tasks, setTasks] = useState([]);
const { layout } = useLayout(); const { layout } = useLayout();
const { areas, setAreas } = useAreas(); const { areas, setAreas } = useAreas();
@ -316,38 +314,36 @@ function WorkSpace() {
return ( return (
<StateContext.Provider value={{ state, setState }}> <StateContext.Provider value={{ state, setState }}>
<TabContext.Provider value={{ tab, setTab }}> <div className="h-[100vh] flex flex-col overflow-hidden theme">
<div className="h-[100vh] flex flex-col overflow-hidden theme"> <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
<TaskContext.Provider value={{ tasks, setTasks, updateTask }}> <ControlPanel
<ControlPanel diagramId={id}
diagramId={id} setDiagramId={setId}
setDiagramId={setId} title={title}
title={title} setTitle={setTitle}
setTitle={setTitle} lastSaved={lastSaved}
lastSaved={lastSaved} setLastSaved={setLastSaved}
setLastSaved={setLastSaved} />
/> </TaskContext.Provider>
</TaskContext.Provider> <div
<div className="flex h-full overflow-y-auto"
className="flex h-full overflow-y-auto" onMouseUp={() => setResize(false)}
onMouseUp={() => setResize(false)} onMouseLeave={() => setResize(false)}
onMouseLeave={() => setResize(false)} onMouseMove={handleResize}
onMouseMove={handleResize} >
> {layout.sidebar && (
{layout.sidebar && ( <SidePanel resize={resize} setResize={setResize} width={width} />
<SidePanel resize={resize} setResize={setResize} width={width} /> )}
<div className="relative w-full h-full overflow-hidden">
<Canvas state={state} setState={setState} />
{!(layout.sidebar || layout.toolbar || layout.header) && (
<div className="fixed right-5 bottom-4">
<Controls />
</div>
)} )}
<div className="relative w-full h-full overflow-hidden">
<Canvas state={state} setState={setState} />
{!(layout.sidebar || layout.toolbar || layout.header) && (
<div className="fixed right-5 bottom-4">
<Controls />
</div>
)}
</div>
</div> </div>
</div> </div>
</TabContext.Provider> </div>
</StateContext.Provider> </StateContext.Provider>
); );
} }