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

table and relationship context

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:49 +03:00
parent 1eea618faa
commit 25926cb9b8
4 changed files with 67 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/canvas.jsx
View File

@ -4,10 +4,12 @@ import Table from "./table";
import { defaultTableTheme, Cardinality, Constraint } from "../data/data"; import { defaultTableTheme, Cardinality, Constraint } from "../data/data";
import Area from "./area"; import Area from "./area";
import Relationship from "./relationship"; import Relationship from "./relationship";
import { TableContext } from "../pages/editor"; import { AreaContext, TableContext } from "../pages/editor";
export default function Canvas(props) { export default function Canvas(props) {
const { tables, setTables } = useContext(TableContext); const { tables, setTables, relationships, setRelationships } =
useContext(TableContext);
const { areas, setAreas } = useContext(AreaContext);
const ObjectType = { const ObjectType = {
NONE: 0, NONE: 0,
TABLE: 1, TABLE: 1,
@ -60,7 +62,7 @@ export default function Canvas(props) {
}); });
setDragging([ObjectType.TABLE, id]); setDragging([ObjectType.TABLE, id]);
} else if (type === ObjectType.AREA) { } else if (type === ObjectType.AREA) {
const area = props.areas.find((t) => t.id === id); const area = areas.find((t) => t.id === id);
setOffset({ setOffset({
x: clientX - area.x, x: clientX - area.x,
y: clientY - area.y, y: clientY - area.y,
@ -97,8 +99,8 @@ export default function Canvas(props) {
})) }))
); );
props.setRelationships( setRelationships(
props.relationships.map((r) => ({ relationships.map((r) => ({
...r, ...r,
startX: r.startX + dx, startX: r.startX + dx,
startY: r.startY + dy, startY: r.startY + dy,
@ -107,8 +109,8 @@ export default function Canvas(props) {
})) }))
); );
props.setAreas( setAreas(
props.areas.map((t) => ({ areas.map((t) => ({
...t, ...t,
x: t.x + dx, x: t.x + dx,
y: t.y + dy, y: t.y + dy,
@ -127,7 +129,7 @@ export default function Canvas(props) {
return t; return t;
}); });
setTables(updatedTables); setTables(updatedTables);
const updatedRelationShips = props.relationships.map((r) => { const updatedRelationShips = relationships.map((r) => {
if (r.startTableId === dragging[1]) { if (r.startTableId === dragging[1]) {
return { return {
...r, ...r,
@ -143,13 +145,13 @@ export default function Canvas(props) {
} }
return r; return r;
}); });
props.setRelationships(updatedRelationShips); setRelationships(updatedRelationShips);
} else if ( } else if (
dragging[0] === ObjectType.AREA && dragging[0] === ObjectType.AREA &&
dragging[1] >= 0 && dragging[1] >= 0 &&
areaResize.id === -1 areaResize.id === -1
) { ) {
const updatedAreas = props.areas.map((t) => { const updatedAreas = areas.map((t) => {
if (t.id === dragging[1]) { if (t.id === dragging[1]) {
const updatedArea = { const updatedArea = {
...t, ...t,
@ -160,7 +162,7 @@ export default function Canvas(props) {
} }
return t; return t;
}); });
props.setAreas(updatedAreas); setAreas(updatedAreas);
} else if (areaResize.id !== -1) { } else if (areaResize.id !== -1) {
if (areaResize.dir === "none") return; if (areaResize.dir === "none") return;
@ -187,7 +189,7 @@ export default function Canvas(props) {
newHeight = initCoords.height + (e.clientY - initCoords.mouseY); newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
} }
props.setAreas((prev) => setAreas((prev) =>
prev.map((a) => { prev.map((a) => {
if (a.id === areaResize.id) { if (a.id === areaResize.id) {
return { return {
@ -241,7 +243,7 @@ export default function Canvas(props) {
line.startFieldId === onRect.field line.startFieldId === onRect.field
) )
return; return;
props.setRelationships((prev) => [ setRelationships((prev) => [
...prev, ...prev,
{ {
...line, ...line,
@ -341,7 +343,7 @@ export default function Canvas(props) {
height="100%" height="100%"
fill="url(#pattern-circles)" fill="url(#pattern-circles)"
></rect> ></rect>
{props.areas.map((a) => ( {areas.map((a) => (
<Area <Area
key={a.id} key={a.id}
areaData={a} areaData={a}
@ -350,7 +352,7 @@ export default function Canvas(props) {
setResize={setAreaResize} setResize={setAreaResize}
initCoords={initCoords} initCoords={initCoords}
setInitCoords={setInitCoords} setInitCoords={setInitCoords}
setAreas={props.setAreas} setAreas={setAreas}
></Area> ></Area>
))} ))}
{tables.map((table, i) => ( {tables.map((table, i) => (
@ -372,7 +374,7 @@ export default function Canvas(props) {
strokeDasharray="8,8" strokeDasharray="8,8"
/> />
)} )}
{props.relationships.map((e, i) => ( {relationships.map((e, i) => (
<Relationship key={i} data={e} /> <Relationship key={i} data={e} />
))} ))}
</svg> </svg>

15
src/components/editor_panel.jsx
View File

@ -1,4 +1,4 @@
import { React, useState } from "react"; import { React, useContext, useState } from "react";
import CodeMirror from "@uiw/react-codemirror"; import CodeMirror from "@uiw/react-codemirror";
import { createTheme } from "@uiw/codemirror-themes"; import { createTheme } from "@uiw/codemirror-themes";
import { sql } from "@codemirror/lang-sql"; import { sql } from "@codemirror/lang-sql";
@ -9,6 +9,7 @@ import { Tabs } from "@douyinfe/semi-ui";
import TableOverview from "./table_overview"; import TableOverview from "./table_overview";
import ReferenceOverview from "./reference_overview"; import ReferenceOverview from "./reference_overview";
import { defaultTableTheme } from "../data/data"; import { defaultTableTheme } from "../data/data";
import { AreaContext } from "../pages/editor";
// import { TableContext } from "../pages/editor"; // import { TableContext } from "../pages/editor";
const myTheme = createTheme({ const myTheme = createTheme({
@ -29,6 +30,7 @@ const EditorPanel = (props) => {
const [tab, setTab] = useState("1"); const [tab, setTab] = useState("1");
// const map = useRef(new Map()); // const map = useRef(new Map());
// const {tables, setTables} = useContext(TableContext); // const {tables, setTables} = useContext(TableContext);
const {areas, setAreas} = useContext(AreaContext);
const tabList = [ const tabList = [
{ tab: "Tables", itemKey: "1" }, { tab: "Tables", itemKey: "1" },
@ -38,10 +40,7 @@ const EditorPanel = (props) => {
]; ];
const contentList = [ const contentList = [
<TableOverview />, <TableOverview />,
<ReferenceOverview <ReferenceOverview/>,
relationships={props.relationships}
setRelationships={props.setRelationships}
/>,
<Shape />, <Shape />,
<CodeMirror <CodeMirror
value={props.code} value={props.code}
@ -70,15 +69,15 @@ const EditorPanel = (props) => {
<button <button
onClick={() => { onClick={() => {
const newArea = { const newArea = {
id: props.areas.length, id: areas.length,
name: `area_${props.areas.length}`, name: `area_${areas.length}`,
x: 0, x: 0,
y: 0, y: 0,
width: 200, width: 200,
height: 200, height: 200,
color: defaultTableTheme, color: defaultTableTheme,
}; };
props.setAreas((prev) => { setAreas((prev) => {
const updatedTables = [...prev, newArea]; const updatedTables = [...prev, newArea];
return updatedTables; return updatedTables;
}); });

18
src/components/reference_overview.jsx
View File

@ -36,18 +36,18 @@ export default function ReferenceOverview(props) {
dataIndex: "foreign", dataIndex: "foreign",
}, },
]; ];
const { tables } = useContext(TableContext); const { tables, relationships, setRelationships } = useContext(TableContext);
const [refActiveIndex, setRefActiveIndex] = useState(""); const [refActiveIndex, setRefActiveIndex] = useState("");
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const [filteredResult, setFilteredResult] = useState( const [filteredResult, setFilteredResult] = useState(
props.relationships.map((t) => { relationships.map((t) => {
return t.name; return t.name;
}) })
); );
const handleStringSearch = (value) => { const handleStringSearch = (value) => {
setFilteredResult( setFilteredResult(
props.relationships relationships
.map((t) => { .map((t) => {
return t.name; return t.name;
}) })
@ -66,7 +66,7 @@ export default function ReferenceOverview(props) {
onSearch={(v) => handleStringSearch(v)} onSearch={(v) => handleStringSearch(v)}
onChange={(v) => setValue(v)} onChange={(v) => setValue(v)}
onSelect={(v) => { onSelect={(v) => {
const { id } = props.relationships.find((t) => t.name === v); const { id } = relationships.find((t) => t.name === v);
setRefActiveIndex(`${id}`); setRefActiveIndex(`${id}`);
document document
.getElementById(`scroll_ref_${id}`) .getElementById(`scroll_ref_${id}`)
@ -79,7 +79,7 @@ export default function ReferenceOverview(props) {
onChange={(k) => setRefActiveIndex(k)} onChange={(k) => setRefActiveIndex(k)}
accordion accordion
> >
{props.relationships.length <= 0 ? ( {relationships.length <= 0 ? (
<div className="select-none"> <div className="select-none">
<Empty <Empty
image={ image={
@ -95,12 +95,12 @@ export default function ReferenceOverview(props) {
/> />
</div> </div>
) : ( ) : (
props.relationships.map((r, i) => ( relationships.map((r, i) => (
<div id={`scroll_ref_${r.id}`} key={i}> <div id={`scroll_ref_${r.id}`} key={i}>
<Collapse.Panel header={<div>{r.name}</div>} itemKey={`${i}`}> <Collapse.Panel header={<div>{r.name}</div>} itemKey={`${i}`}>
<Form <Form
onChange={(value) => onChange={(value) =>
props.setRelationships((prev) => setRelationships((prev) =>
prev.map((e, idx) => prev.map((e, idx) =>
idx === i ? { ...e, ...value.values } : e idx === i ? { ...e, ...value.values } : e
) )
@ -202,7 +202,7 @@ export default function ReferenceOverview(props) {
value="mandetory" value="mandetory"
defaultChecked={r.mandetory} defaultChecked={r.mandetory}
onChange={(checkedValues) => onChange={(checkedValues) =>
props.setRelationships((prev) => setRelationships((prev) =>
prev.map((e, idx) => prev.map((e, idx) =>
idx === i idx === i
? { ? {
@ -233,7 +233,7 @@ export default function ReferenceOverview(props) {
block block
type="danger" type="danger"
onClick={() => onClick={() =>
props.setRelationships((prev) => setRelationships((prev) =>
prev prev
.filter((e) => e.id !== i) .filter((e) => e.id !== i)
.map((e, idx) => ({ ...e, id: idx })) .map((e, idx) => ({ ...e, id: idx }))

72
src/pages/editor.jsx
View File

@ -8,6 +8,7 @@ import EditorPanel from "../components/editor_panel";
export const LayoutContext = createContext(); export const LayoutContext = createContext();
export const TableContext = createContext(); export const TableContext = createContext();
export const AreaContext = createContext();
export default function Editor(props) { export default function Editor(props) {
const [code, setCode] = useState(""); const [code, setCode] = useState("");
@ -34,49 +35,42 @@ export default function Editor(props) {
if (w > 340) setWidth(w); if (w > 340) setWidth(w);
}; };
const layoutValue = { layout, setLayout };
const tableValue = { tables, setTables };
return ( return (
<LayoutContext.Provider value={layoutValue}> <LayoutContext.Provider value={{ layout, setLayout }}>
<TableContext.Provider value={tableValue}> <TableContext.Provider
<div className="h-[100vh] overflow-hidden"> value={{ tables, setTables, relationships, setRelationships }}
<ControlPanel /> >
<div <AreaContext.Provider value={{ areas, setAreas }}>
className={ <div className="h-[100vh] overflow-hidden">
layout.header <ControlPanel />
? `flex h-[calc(100vh-123.93px)]` <div
: `flex h-[calc(100vh-51.97px)]` className={
} layout.header
onMouseUp={() => setResize(false)} ? `flex h-[calc(100vh-123.93px)]`
onMouseMove={dragHandler} : `flex h-[calc(100vh-51.97px)]`
> }
<DndProvider backend={HTML5Backend}> onMouseUp={() => setResize(false)}
{layout.sidebar && ( onMouseMove={dragHandler}
<EditorPanel >
<DndProvider backend={HTML5Backend}>
{layout.sidebar && (
<EditorPanel
code={code}
setCode={setCode}
resize={resize}
setResize={setResize}
width={width}
/>
)}
<Canvas
code={code} code={code}
setCode={setCode} setCode={setCode}
relationships={relationships}
setRelationships={setRelationships}
areas={areas}
setAreas={setAreas}
resize={resize}
setResize={setResize}
width={width}
/> />
)} </DndProvider>
<Canvas {layout.services && <Sidebar />}
code={code} </div>
setCode={setCode} </div>{" "}
relationships={relationships} </AreaContext.Provider>
setRelationships={setRelationships}
areas={areas}
setAreas={setAreas}
/>
</DndProvider>
{layout.services && <Sidebar />}
</div>
</div>
</TableContext.Provider> </TableContext.Provider>
</LayoutContext.Provider> </LayoutContext.Provider>
); );