table and relationship context
This commit is contained in:
1ilit
parent
1eea618faa
commit
25926cb9b8
@ -4,10 +4,12 @@ import Table from "./table";
|
||||
import { defaultTableTheme, Cardinality, Constraint } from "../data/data";
|
||||
import Area from "./area";
|
||||
import Relationship from "./relationship";
|
||||
import { TableContext } from "../pages/editor";
|
||||
import { AreaContext, TableContext } from "../pages/editor";
|
||||
|
||||
export default function Canvas(props) {
|
||||
const { tables, setTables } = useContext(TableContext);
|
||||
const { tables, setTables, relationships, setRelationships } =
|
||||
useContext(TableContext);
|
||||
const { areas, setAreas } = useContext(AreaContext);
|
||||
const ObjectType = {
|
||||
NONE: 0,
|
||||
TABLE: 1,
|
||||
@ -60,7 +62,7 @@ export default function Canvas(props) {
|
||||
});
|
||||
setDragging([ObjectType.TABLE, id]);
|
||||
} else if (type === ObjectType.AREA) {
|
||||
const area = props.areas.find((t) => t.id === id);
|
||||
const area = areas.find((t) => t.id === id);
|
||||
setOffset({
|
||||
x: clientX - area.x,
|
||||
y: clientY - area.y,
|
||||
@ -97,8 +99,8 @@ export default function Canvas(props) {
|
||||
}))
|
||||
);
|
||||
|
||||
props.setRelationships(
|
||||
props.relationships.map((r) => ({
|
||||
setRelationships(
|
||||
relationships.map((r) => ({
|
||||
...r,
|
||||
startX: r.startX + dx,
|
||||
startY: r.startY + dy,
|
||||
@ -107,8 +109,8 @@ export default function Canvas(props) {
|
||||
}))
|
||||
);
|
||||
|
||||
props.setAreas(
|
||||
props.areas.map((t) => ({
|
||||
setAreas(
|
||||
areas.map((t) => ({
|
||||
...t,
|
||||
x: t.x + dx,
|
||||
y: t.y + dy,
|
||||
@ -127,7 +129,7 @@ export default function Canvas(props) {
|
||||
return t;
|
||||
});
|
||||
setTables(updatedTables);
|
||||
const updatedRelationShips = props.relationships.map((r) => {
|
||||
const updatedRelationShips = relationships.map((r) => {
|
||||
if (r.startTableId === dragging[1]) {
|
||||
return {
|
||||
...r,
|
||||
@ -143,13 +145,13 @@ export default function Canvas(props) {
|
||||
}
|
||||
return r;
|
||||
});
|
||||
props.setRelationships(updatedRelationShips);
|
||||
setRelationships(updatedRelationShips);
|
||||
} else if (
|
||||
dragging[0] === ObjectType.AREA &&
|
||||
dragging[1] >= 0 &&
|
||||
areaResize.id === -1
|
||||
) {
|
||||
const updatedAreas = props.areas.map((t) => {
|
||||
const updatedAreas = areas.map((t) => {
|
||||
if (t.id === dragging[1]) {
|
||||
const updatedArea = {
|
||||
...t,
|
||||
@ -160,7 +162,7 @@ export default function Canvas(props) {
|
||||
}
|
||||
return t;
|
||||
});
|
||||
props.setAreas(updatedAreas);
|
||||
setAreas(updatedAreas);
|
||||
} else if (areaResize.id !== -1) {
|
||||
if (areaResize.dir === "none") return;
|
||||
|
||||
@ -187,7 +189,7 @@ export default function Canvas(props) {
|
||||
newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
|
||||
}
|
||||
|
||||
props.setAreas((prev) =>
|
||||
setAreas((prev) =>
|
||||
prev.map((a) => {
|
||||
if (a.id === areaResize.id) {
|
||||
return {
|
||||
@ -241,7 +243,7 @@ export default function Canvas(props) {
|
||||
line.startFieldId === onRect.field
|
||||
)
|
||||
return;
|
||||
props.setRelationships((prev) => [
|
||||
setRelationships((prev) => [
|
||||
...prev,
|
||||
{
|
||||
...line,
|
||||
@ -341,7 +343,7 @@ export default function Canvas(props) {
|
||||
height="100%"
|
||||
fill="url(#pattern-circles)"
|
||||
></rect>
|
||||
{props.areas.map((a) => (
|
||||
{areas.map((a) => (
|
||||
<Area
|
||||
key={a.id}
|
||||
areaData={a}
|
||||
@ -350,7 +352,7 @@ export default function Canvas(props) {
|
||||
setResize={setAreaResize}
|
||||
initCoords={initCoords}
|
||||
setInitCoords={setInitCoords}
|
||||
setAreas={props.setAreas}
|
||||
setAreas={setAreas}
|
||||
></Area>
|
||||
))}
|
||||
{tables.map((table, i) => (
|
||||
@ -372,7 +374,7 @@ export default function Canvas(props) {
|
||||
strokeDasharray="8,8"
|
||||
/>
|
||||
)}
|
||||
{props.relationships.map((e, i) => (
|
||||
{relationships.map((e, i) => (
|
||||
<Relationship key={i} data={e} />
|
||||
))}
|
||||
</svg>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { React, useState } from "react";
|
||||
import { React, useContext, useState } from "react";
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import { createTheme } from "@uiw/codemirror-themes";
|
||||
import { sql } from "@codemirror/lang-sql";
|
||||
@ -9,6 +9,7 @@ import { Tabs } from "@douyinfe/semi-ui";
|
||||
import TableOverview from "./table_overview";
|
||||
import ReferenceOverview from "./reference_overview";
|
||||
import { defaultTableTheme } from "../data/data";
|
||||
import { AreaContext } from "../pages/editor";
|
||||
// import { TableContext } from "../pages/editor";
|
||||
|
||||
const myTheme = createTheme({
|
||||
@ -29,6 +30,7 @@ const EditorPanel = (props) => {
|
||||
const [tab, setTab] = useState("1");
|
||||
// const map = useRef(new Map());
|
||||
// const {tables, setTables} = useContext(TableContext);
|
||||
const {areas, setAreas} = useContext(AreaContext);
|
||||
|
||||
const tabList = [
|
||||
{ tab: "Tables", itemKey: "1" },
|
||||
@ -38,10 +40,7 @@ const EditorPanel = (props) => {
|
||||
];
|
||||
const contentList = [
|
||||
<TableOverview />,
|
||||
<ReferenceOverview
|
||||
relationships={props.relationships}
|
||||
setRelationships={props.setRelationships}
|
||||
/>,
|
||||
<ReferenceOverview/>,
|
||||
<Shape />,
|
||||
<CodeMirror
|
||||
value={props.code}
|
||||
@ -70,15 +69,15 @@ const EditorPanel = (props) => {
|
||||
<button
|
||||
onClick={() => {
|
||||
const newArea = {
|
||||
id: props.areas.length,
|
||||
name: `area_${props.areas.length}`,
|
||||
id: areas.length,
|
||||
name: `area_${areas.length}`,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 200,
|
||||
height: 200,
|
||||
color: defaultTableTheme,
|
||||
};
|
||||
props.setAreas((prev) => {
|
||||
setAreas((prev) => {
|
||||
const updatedTables = [...prev, newArea];
|
||||
return updatedTables;
|
||||
});
|
||||
|
||||
@ -36,18 +36,18 @@ export default function ReferenceOverview(props) {
|
||||
dataIndex: "foreign",
|
||||
},
|
||||
];
|
||||
const { tables } = useContext(TableContext);
|
||||
const { tables, relationships, setRelationships } = useContext(TableContext);
|
||||
const [refActiveIndex, setRefActiveIndex] = useState("");
|
||||
const [value, setValue] = useState("");
|
||||
const [filteredResult, setFilteredResult] = useState(
|
||||
props.relationships.map((t) => {
|
||||
relationships.map((t) => {
|
||||
return t.name;
|
||||
})
|
||||
);
|
||||
|
||||
const handleStringSearch = (value) => {
|
||||
setFilteredResult(
|
||||
props.relationships
|
||||
relationships
|
||||
.map((t) => {
|
||||
return t.name;
|
||||
})
|
||||
@ -66,7 +66,7 @@ export default function ReferenceOverview(props) {
|
||||
onSearch={(v) => handleStringSearch(v)}
|
||||
onChange={(v) => setValue(v)}
|
||||
onSelect={(v) => {
|
||||
const { id } = props.relationships.find((t) => t.name === v);
|
||||
const { id } = relationships.find((t) => t.name === v);
|
||||
setRefActiveIndex(`${id}`);
|
||||
document
|
||||
.getElementById(`scroll_ref_${id}`)
|
||||
@ -79,7 +79,7 @@ export default function ReferenceOverview(props) {
|
||||
onChange={(k) => setRefActiveIndex(k)}
|
||||
accordion
|
||||
>
|
||||
{props.relationships.length <= 0 ? (
|
||||
{relationships.length <= 0 ? (
|
||||
<div className="select-none">
|
||||
<Empty
|
||||
image={
|
||||
@ -95,12 +95,12 @@ export default function ReferenceOverview(props) {
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
props.relationships.map((r, i) => (
|
||||
relationships.map((r, i) => (
|
||||
<div id={`scroll_ref_${r.id}`} key={i}>
|
||||
<Collapse.Panel header={<div>{r.name}</div>} itemKey={`${i}`}>
|
||||
<Form
|
||||
onChange={(value) =>
|
||||
props.setRelationships((prev) =>
|
||||
setRelationships((prev) =>
|
||||
prev.map((e, idx) =>
|
||||
idx === i ? { ...e, ...value.values } : e
|
||||
)
|
||||
@ -202,7 +202,7 @@ export default function ReferenceOverview(props) {
|
||||
value="mandetory"
|
||||
defaultChecked={r.mandetory}
|
||||
onChange={(checkedValues) =>
|
||||
props.setRelationships((prev) =>
|
||||
setRelationships((prev) =>
|
||||
prev.map((e, idx) =>
|
||||
idx === i
|
||||
? {
|
||||
@ -233,7 +233,7 @@ export default function ReferenceOverview(props) {
|
||||
block
|
||||
type="danger"
|
||||
onClick={() =>
|
||||
props.setRelationships((prev) =>
|
||||
setRelationships((prev) =>
|
||||
prev
|
||||
.filter((e) => e.id !== i)
|
||||
.map((e, idx) => ({ ...e, id: idx }))
|
||||
|
||||
@ -8,6 +8,7 @@ import EditorPanel from "../components/editor_panel";
|
||||
|
||||
export const LayoutContext = createContext();
|
||||
export const TableContext = createContext();
|
||||
export const AreaContext = createContext();
|
||||
|
||||
export default function Editor(props) {
|
||||
const [code, setCode] = useState("");
|
||||
@ -34,12 +35,12 @@ export default function Editor(props) {
|
||||
if (w > 340) setWidth(w);
|
||||
};
|
||||
|
||||
const layoutValue = { layout, setLayout };
|
||||
const tableValue = { tables, setTables };
|
||||
|
||||
return (
|
||||
<LayoutContext.Provider value={layoutValue}>
|
||||
<TableContext.Provider value={tableValue}>
|
||||
<LayoutContext.Provider value={{ layout, setLayout }}>
|
||||
<TableContext.Provider
|
||||
value={{ tables, setTables, relationships, setRelationships }}
|
||||
>
|
||||
<AreaContext.Provider value={{ areas, setAreas }}>
|
||||
<div className="h-[100vh] overflow-hidden">
|
||||
<ControlPanel />
|
||||
<div
|
||||
@ -56,10 +57,6 @@ export default function Editor(props) {
|
||||
<EditorPanel
|
||||
code={code}
|
||||
setCode={setCode}
|
||||
relationships={relationships}
|
||||
setRelationships={setRelationships}
|
||||
areas={areas}
|
||||
setAreas={setAreas}
|
||||
resize={resize}
|
||||
setResize={setResize}
|
||||
width={width}
|
||||
@ -68,15 +65,12 @@ export default function Editor(props) {
|
||||
<Canvas
|
||||
code={code}
|
||||
setCode={setCode}
|
||||
relationships={relationships}
|
||||
setRelationships={setRelationships}
|
||||
areas={areas}
|
||||
setAreas={setAreas}
|
||||
/>
|
||||
</DndProvider>
|
||||
{layout.services && <Sidebar />}
|
||||
</div>
|
||||
</div>
|
||||
</div>{" "}
|
||||
</AreaContext.Provider>
|
||||
</TableContext.Provider>
|
||||
</LayoutContext.Provider>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user