Rename TablesContext to DiagramContext

src/components/EditorCanvas/Canvas.jsx

@@ -13,7 +13,7 @@ import Note from "./Note";
 import {
   useSettings,
   useTransform,
-  useTables,
+  useDiagram,
   useUndoRedo,
   useSelect,
   useAreas,
@@ -25,7 +25,7 @@ import { diagram } from "../../data/heroDiagram";
 
 export default function Canvas() {
   const { t } = useTranslation();
-  const { tables, updateTable, relationships, addRelationship } = useTables();
+  const { tables, updateTable, relationships, addRelationship } = useDiagram();
   const { areas, updateArea } = useAreas();
   const { notes, updateNote } = useNotes();
   const { layout } = useLayout();

src/components/EditorCanvas/Relationship.jsx

@@ -1,11 +1,11 @@
 import { useRef } from "react";
 import { Cardinality, ObjectType, Tab } from "../../data/constants";
 import { calcPath } from "../../utils/calcPath";
-import { useTables, useSettings, useLayout, useSelect } from "../../hooks";
+import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
 
 export default function Relationship({ data }) {
   const { settings } = useSettings();
-  const { tables } = useTables();
+  const { tables } = useDiagram();
   const { layout } = useLayout();
   const { selectedElement, setSelectedElement } = useSelect();
   const pathRef = useRef();

src/components/EditorCanvas/Table.jsx

@@ -14,7 +14,7 @@ import {
   IconKeyStroked,
 } from "@douyinfe/semi-icons";
 import { Popover, Tag, Button, SideSheet } from "@douyinfe/semi-ui";
-import { useLayout, useSettings, useTables, useSelect } from "../../hooks";
+import { useLayout, useSettings, useDiagram, useSelect } from "../../hooks";
 import TableInfo from "../EditorSidePanel/TablesTab/TableInfo";
 import { useTranslation } from "react-i18next";
 
@@ -28,7 +28,7 @@ export default function Table(props) {
     setLinkingLine,
   } = props;
   const { layout } = useLayout();
-  const { deleteTable, deleteField } = useTables();
+  const { deleteTable, deleteField } = useDiagram();
   const { settings } = useSettings();
   const { t } = useTranslation();
   const { selectedElement, setSelectedElement } = useSelect();

src/components/EditorHeader/ControlPanel.jsx

@@ -48,7 +48,7 @@ import {
   useLayout,
   useSettings,
   useTransform,
-  useTables,
+  useDiagram,
   useUndoRedo,
   useSelect,
   useSaveState,
@@ -100,7 +100,7 @@ export default function ControlPanel({
     addRelationship,
     deleteRelationship,
     database,
-  } = useTables();
+  } = useDiagram();
   const { enums, setEnums, deleteEnum, addEnum, updateEnum } = useEnums();
   const { types, addType, deleteType, updateType, setTypes } = useTypes();
   const { notes, setNotes, updateNote, addNote, deleteNote } = useNotes();

src/components/EditorHeader/Modal/ImportDiagram.jsx

@@ -8,7 +8,7 @@ import {
   useAreas,
   useEnums,
   useNotes,
-  useTables,
+  useDiagram,
   useTypes,
 } from "../../../hooks";
 import { useTranslation } from "react-i18next";
@@ -16,7 +16,7 @@ import { useTranslation } from "react-i18next";
 export default function ImportDiagram({ setImportData, error, setError }) {
   const { areas } = useAreas();
   const { notes } = useNotes();
-  const { tables, relationships } = useTables();
+  const { tables, relationships } = useDiagram();
   const { types } = useTypes();
   const { enums } = useEnums();
   const { t } = useTranslation();

src/components/EditorHeader/Modal/Modal.jsx

@@ -13,7 +13,7 @@ import {
   useEnums,
   useNotes,
   useSettings,
-  useTables,
+  useDiagram,
   useTransform,
   useTypes,
   useUndoRedo,
@@ -55,7 +55,7 @@ export default function Modal({
   importDb,
 }) {
   const { t } = useTranslation();
-  const { setTables, setRelationships, database, setDatabase } = useTables();
+  const { setTables, setRelationships, database, setDatabase } = useDiagram();
   const { setNotes } = useNotes();
   const { setAreas } = useAreas();
   const { setTypes } = useTypes();

src/components/EditorSidePanel/Issues.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { Collapse, Badge } from "@douyinfe/semi-ui";
 import { arrayIsEqual } from "../../utils/utils";
 import { getIssues } from "../../utils/issues";
-import { useEnums, useSettings, useTables, useTypes } from "../../hooks";
+import { useEnums, useSettings, useDiagram, useTypes } from "../../hooks";
 import { useTranslation } from "react-i18next";
 
 export default function Issues() {
@@ -10,7 +10,7 @@ export default function Issues() {
   const { t } = useTranslation();
   const { settings } = useSettings();
   const { enums } = useEnums();
-  const { tables, relationships, database } = useTables();
+  const { tables, relationships, database } = useDiagram();
   const [issues, setIssues] = useState([]);
 
   useEffect(() => {

src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx

@@ -18,7 +18,7 @@ import {
   Action,
   ObjectType,
 } from "../../../data/constants";
-import { useTables, useUndoRedo } from "../../../hooks";
+import { useDiagram, useUndoRedo } from "../../../hooks";
 import i18n from "../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
 
@@ -35,7 +35,7 @@ const columns = [
 
 export default function RelationshipInfo({ data }) {
   const { setUndoStack, setRedoStack } = useUndoRedo();
-  const { tables, setRelationships, deleteRelationship } = useTables();
+  const { tables, setRelationships, deleteRelationship } = useDiagram();
   const { t } = useTranslation();
 
   const swapKeys = () => {

src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx

@@ -1,5 +1,5 @@
 import { Collapse } from "@douyinfe/semi-ui";
-import { useSelect, useTables } from "../../../hooks";
+import { useSelect, useDiagram } from "../../../hooks";
 import Empty from "../Empty";
 import SearchBar from "./SearchBar";
 import RelationshipInfo from "./RelationshipInfo";
@@ -7,7 +7,7 @@ import { ObjectType } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
 
 export default function RelationshipsTab() {
-  const { relationships } = useTables();
+  const { relationships } = useDiagram();
   const { selectedElement, setSelectedElement } = useSelect();
   const { t } = useTranslation();
 

src/components/EditorSidePanel/RelationshipsTab/SearchBar.jsx

@@ -1,12 +1,12 @@
 import { useState } from "react";
-import { useSelect, useTables } from "../../../hooks";
+import { useSelect, useDiagram } from "../../../hooks";
 import { AutoComplete } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
 import { ObjectType } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
 
 export default function SearchBar() {
-  const { relationships } = useTables();
+  const { relationships } = useDiagram();
   const [searchText, setSearchText] = useState("");
   const { setSelectedElement } = useSelect();
   const { t } = useTranslation();

src/components/EditorSidePanel/SidePanel.jsx

@@ -1,6 +1,6 @@
 import { Tabs, TabPane } from "@douyinfe/semi-ui";
 import { Tab } from "../../data/constants";
-import { useLayout, useSelect, useTables } from "../../hooks";
+import { useLayout, useSelect, useDiagram } from "../../hooks";
 import RelationshipsTab from "./RelationshipsTab/RelationshipsTab";
 import TypesTab from "./TypesTab/TypesTab";
 import Issues from "./Issues";
@@ -15,7 +15,7 @@ import EnumsTab from "./EnumsTab/EnumsTab";
 export default function SidePanel({ width, resize, setResize }) {
   const { layout } = useLayout();
   const { selectedElement, setSelectedElement } = useSelect();
-  const { database } = useTables();
+  const { database } = useDiagram();
   const { t } = useTranslation();
 
   const tabList = useMemo(() => {

src/components/EditorSidePanel/TablesTab/FieldDetails.jsx

@@ -9,15 +9,15 @@ import {
 } from "@douyinfe/semi-ui";
 import { Action, ObjectType } from "../../../data/constants";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
-import { useTables, useUndoRedo } from "../../../hooks";
+import { useDiagram, useUndoRedo } from "../../../hooks";
 import { useTranslation } from "react-i18next";
 import { dbToTypes } from "../../../data/datatypes";
 
 export default function FieldDetails({ data, tid, index }) {
   const { t } = useTranslation();
-  const { tables, database } = useTables();
+  const { tables, database } = useDiagram();
   const { setUndoStack, setRedoStack } = useUndoRedo();
-  const { updateField, deleteField } = useTables();
+  const { updateField, deleteField } = useDiagram();
   const [editField, setEditField] = useState({});
 
   return (

src/components/EditorSidePanel/TablesTab/IndexDetails.jsx

@@ -1,12 +1,12 @@
 import { Action, ObjectType } from "../../../data/constants";
 import { Input, Button, Popover, Checkbox, Select } from "@douyinfe/semi-ui";
 import { IconMore, IconDeleteStroked } from "@douyinfe/semi-icons";
-import { useTables, useUndoRedo } from "../../../hooks";
+import { useDiagram, useUndoRedo } from "../../../hooks";
 import { useTranslation } from "react-i18next";
 
 export default function IndexDetails({ data, fields, iid, tid }) {
   const { t } = useTranslation();
-  const { tables, updateTable } = useTables();
+  const { tables, updateTable } = useDiagram();
   const { setUndoStack, setRedoStack } = useUndoRedo();
 
   return (

src/components/EditorSidePanel/TablesTab/TableField.jsx

@@ -1,17 +1,17 @@
 import { Action, ObjectType } from "../../../data/constants";
 import { Row, Col, Input, Button, Popover, Select } from "@douyinfe/semi-ui";
 import { IconMore, IconKeyStroked } from "@douyinfe/semi-icons";
-import { useEnums, useTables, useTypes, useUndoRedo } from "../../../hooks";
+import { useEnums, useDiagram, useTypes, useUndoRedo } from "../../../hooks";
 import { useState } from "react";
 import FieldDetails from "./FieldDetails";
 import { useTranslation } from "react-i18next";
 import { dbToTypes } from "../../../data/datatypes";
 
 export default function TableField({ data, tid, index }) {
-  const { updateField } = useTables();
+  const { updateField } = useDiagram();
   const { types } = useTypes();
   const { enums } = useEnums();
-  const { tables, database } = useTables();
+  const { tables, database } = useDiagram();
   const { t } = useTranslation();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -8,7 +8,7 @@ import {
   Popover,
 } from "@douyinfe/semi-ui";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
-import { useTables, useUndoRedo } from "../../../hooks";
+import { useDiagram, useUndoRedo } from "../../../hooks";
 import { Action, ObjectType, defaultBlue } from "../../../data/constants";
 import ColorPalette from "../../ColorPicker";
 import TableField from "./TableField";
@@ -19,7 +19,7 @@ export default function TableInfo({ data }) {
   const { t } = useTranslation();
   const [indexActiveKey, setIndexActiveKey] = useState("");
   const { deleteTable, updateTable, updateField, setRelationships } =
-    useTables();
+    useDiagram();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});
   const [drag, setDrag] = useState({

src/components/EditorSidePanel/TablesTab/TablesTab.jsx

@@ -1,6 +1,6 @@
 import { Collapse, Button } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
-import { useSelect, useTables } from "../../../hooks";
+import { useSelect, useDiagram } from "../../../hooks";
 import { ObjectType } from "../../../data/constants";
 import SearchBar from "./SearchBar";
 import Empty from "../Empty";
@@ -8,7 +8,7 @@ import TableInfo from "./TableInfo";
 import { useTranslation } from "react-i18next";
 
 export default function TablesTab() {
-  const { tables, addTable } = useTables();
+  const { tables, addTable } = useDiagram();
   const { selectedElement, setSelectedElement } = useSelect();
   const { t } = useTranslation();
 

src/components/EditorSidePanel/TypesTab/TypeField.jsx

@@ -11,14 +11,14 @@ import {
   Popover,
 } from "@douyinfe/semi-ui";
 import { IconDeleteStroked, IconMore } from "@douyinfe/semi-icons";
-import { useUndoRedo, useTypes, useTables, useEnums } from "../../../hooks";
+import { useUndoRedo, useTypes, useDiagram, useEnums } from "../../../hooks";
 import { useTranslation } from "react-i18next";
 import { dbToTypes } from "../../../data/datatypes";
 
 export default function TypeField({ data, tid, fid }) {
   const { types, updateType } = useTypes();
   const { enums } = useEnums();
-  const { database } = useTables();
+  const { database } = useDiagram();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});
   const { t } = useTranslation();

src/components/EditorSidePanel/TypesTab/TypesTab.jsx

@@ -1,6 +1,6 @@
 import { Collapse, Button, Popover } from "@douyinfe/semi-ui";
 import { IconPlus, IconInfoCircle } from "@douyinfe/semi-icons";
-import { useSelect, useTables, useTypes } from "../../../hooks";
+import { useSelect, useDiagram, useTypes } from "../../../hooks";
 import { DB, ObjectType } from "../../../data/constants";
 import Searchbar from "./SearchBar";
 import Empty from "../Empty";
@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 export default function TypesTab() {
   const { types, addType } = useTypes();
   const { selectedElement, setSelectedElement } = useSelect();
-  const { database } = useTables();
+  const { database } = useDiagram();
   const { t } = useTranslation();
 
   return (

src/components/Workspace.jsx

@@ -8,7 +8,7 @@ import {
   useLayout,
   useSettings,
   useTransform,
-  useTables,
+  useDiagram,
   useUndoRedo,
   useAreas,
   useNotes,
@@ -46,7 +46,7 @@ export default function WorkSpace() {
     setRelationships,
     database,
     setDatabase,
-  } = useTables();
+  } = useDiagram();
   const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
   const { t } = useTranslation();
 

src/context/DiagramContext.jsx

@@ -6,9 +6,9 @@ import useSelect from "../hooks/useSelect";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 
-export const TablesContext = createContext(null);
+export const DiagramContext = createContext(null);
 
-export default function TablesContextProvider({ children }) {
+export default function DiagramContextProvider({ children }) {
   const { t } = useTranslation();
   const [database, setDatabase] = useState(DB.GENERIC);
   const [tables, setTables] = useState([]);
@@ -249,7 +249,7 @@ export default function TablesContextProvider({ children }) {
   };
 
   return (
-    <TablesContext.Provider
+    <DiagramContext.Provider
       value={{
         tables,
         setTables,
@@ -267,6 +267,6 @@ export default function TablesContextProvider({ children }) {
       }}
     >
       {children}
-    </TablesContext.Provider>
+    </DiagramContext.Provider>
   );
 }

src/hooks/index.js

@@ -4,7 +4,7 @@ export { default as useNotes } from "./useNotes";
 export { default as useSaveState } from "./useSaveState";
 export { default as useSelect } from "./useSelect";
 export { default as useSettings } from "./useSettings";
-export { default as useTables } from "./useTables";
+export { default as useDiagram } from "./useDiagram";
 export { default as useTasks } from "./useTasks";
 export { default as useTransform } from "./useTransform";
 export { default as useTypes } from "./useTypes";

src/hooks/useDiagram.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { DiagramContext } from "../context/DiagramContext";
+
+export default function useDiagram() {
+  return useContext(DiagramContext);
+}

src/hooks/useTables.js

@@ -1,6 +0,0 @@
-import { useContext } from "react";
-import { TablesContext } from "../context/TablesContext";
-
-export default function useTables() {
-  return useContext(TablesContext);
-}

src/pages/Editor.jsx

@@ -1,6 +1,6 @@
 import LayoutContextProvider from "../context/LayoutContext";
 import TransformContextProvider from "../context/TransformContext";
-import TablesContextProvider from "../context/TablesContext";
+import TablesContextProvider from "../context/DiagramContext";
 import UndoRedoContextProvider from "../context/UndoRedoContext";
 import SelectContextProvider from "../context/SelectContext";
 import AreasContextProvider from "../context/AreasContext";