table and relationship context

2023-09-19 15:48:49 +03:00 · 2023-09-19 15:48:49 +03:00 · 25926cb9b8
commit 25926cb9b8
parent 1eea618faa
4 changed files with 67 additions and 72 deletions
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@ -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>
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@ -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;
            });
--- a/src/components/reference_overview.jsx
+++ b/src/components/reference_overview.jsx
@ -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 }))
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@ -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,49 +35,42 @@ 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}>
-        <div className="h-[100vh] overflow-hidden">
-          <ControlPanel />
-          <div
-            className={
-              layout.header
-                ? `flex h-[calc(100vh-123.93px)]`
-                : `flex h-[calc(100vh-51.97px)]`
-            }
-            onMouseUp={() => setResize(false)}
-            onMouseMove={dragHandler}
-          >
-            <DndProvider backend={HTML5Backend}>
-              {layout.sidebar && (
-                <EditorPanel
+    <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
+              className={
+                layout.header
+                  ? `flex h-[calc(100vh-123.93px)]`
+                  : `flex h-[calc(100vh-51.97px)]`
+              }
+              onMouseUp={() => setResize(false)}
+              onMouseMove={dragHandler}
+            >
+              <DndProvider backend={HTML5Backend}>
+                {layout.sidebar && (
+                  <EditorPanel
+                    code={code}
+                    setCode={setCode}
+                    resize={resize}
+                    setResize={setResize}
+                    width={width}
+                  />
+                )}
+                <Canvas
                  code={code}
                  setCode={setCode}
-                  relationships={relationships}
-                  setRelationships={setRelationships}
-                  areas={areas}
-                  setAreas={setAreas}
-                  resize={resize}
-                  setResize={setResize}
-                  width={width}
                />
-              )}
-              <Canvas
-                code={code}
-                setCode={setCode}
-                relationships={relationships}
-                setRelationships={setRelationships}
-                areas={areas}
-                setAreas={setAreas}
-              />
-            </DndProvider>
-            {layout.services && <Sidebar />}
-          </div>
-        </div>
+              </DndProvider>
+              {layout.services && <Sidebar />}
+            </div>
+          </div>{" "}
+        </AreaContext.Provider>
      </TableContext.Provider>
    </LayoutContext.Provider>
  );