diff --git a/src/components/ControlPanel.jsx b/src/components/ControlPanel.jsx index 04a141a..96e16bd 100644 --- a/src/components/ControlPanel.jsx +++ b/src/components/ControlPanel.jsx @@ -43,11 +43,7 @@ import { jsonToMariaDB, jsonToSQLServer, } from "../utils/toSQL"; -import { - StateContext, - TabContext, - TypeContext, -} from "../pages/Editor"; +import { StateContext, TabContext } from "../pages/Editor"; import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons"; import { ObjectType, Action, Tab, State, Cardinality } from "../data/data"; import jsPDF from "jspdf"; @@ -71,6 +67,7 @@ import { ddbDiagramIsValid, jsonDiagramIsValid } from "../utils/validateSchema"; import { dataURItoBlob } from "../utils/utils"; import useAreas from "../hooks/useAreas"; import useNotes from "../hooks/useNotes"; +import useTypes from "../hooks/useTypes"; export default function ControlPanel({ diagramId, @@ -135,10 +132,8 @@ export default function ControlPanel({ addRelationship, deleteRelationship, } = useTables(); - const { types, addType, deleteType, updateType, setTypes } = - useContext(TypeContext); - const { notes, setNotes, updateNote, addNote, deleteNote } = - useNotes(); + const { types, addType, deleteType, updateType, setTypes } = useTypes(); + const { notes, setNotes, updateNote, addNote, deleteNote } = useNotes(); const { areas, setAreas, updateArea, addArea, deleteArea } = useAreas(); const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo(); const { selectedElement, setSelectedElement } = useSelect(); diff --git a/src/components/Issues.jsx b/src/components/Issues.jsx index cd3d51d..eb767f6 100644 --- a/src/components/Issues.jsx +++ b/src/components/Issues.jsx @@ -1,14 +1,14 @@ -import { useContext, useState, useEffect } from "react"; +import { useState, useEffect } from "react"; import { Collapse, Badge } from "@douyinfe/semi-ui"; -import { TypeContext } from "../pages/Editor"; import { arrayIsEqual } from "../utils/utils"; import { getIssues } from "../utils/issues"; import useSettings from "../hooks/useSettings"; import useTables from "../hooks/useTables"; +import useTypes from "../hooks/useTypes"; export default function Issues() { const { settings } = useSettings(); - const { types } = useContext(TypeContext); + const { types } = useTypes(); const { tables, relationships } = useTables(); const [issues, setIssues] = useState([]); diff --git a/src/components/Table.jsx b/src/components/Table.jsx index 960088b..f7e1727 100644 --- a/src/components/Table.jsx +++ b/src/components/Table.jsx @@ -31,13 +31,14 @@ import { SideSheet, Toast, } from "@douyinfe/semi-ui"; -import { TabContext, TypeContext } from "../pages/Editor"; +import { TabContext } from "../pages/Editor"; import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL"; import useLayout from "../hooks/useLayout"; import useSettings from "../hooks/useSettings"; import useUndoRedo from "../hooks/useUndoRedo"; import useTables from "../hooks/useTables"; import useSelect from "../hooks/useSelect"; +import useTypes from "../hooks/useTypes"; export default function Table(props) { const [isHovered, setIsHovered] = useState(false); @@ -48,7 +49,7 @@ export default function Table(props) { useTables(); const { tab, setTab } = useContext(TabContext); const { settings } = useSettings(); - const { types } = useContext(TypeContext); + const { types } = useTypes(); const { setUndoStack, setRedoStack } = useUndoRedo(); const { selectedElement, setSelectedElement } = useSelect(); diff --git a/src/components/TableOverview.jsx b/src/components/TableOverview.jsx index eeb282b..90476fa 100644 --- a/src/components/TableOverview.jsx +++ b/src/components/TableOverview.jsx @@ -1,4 +1,4 @@ -import { useContext, useState } from "react"; +import { useState } from "react"; import { Action, ObjectType, @@ -35,11 +35,11 @@ import { IllustrationNoContent, IllustrationNoContentDark, } from "@douyinfe/semi-illustrations"; -import { TypeContext } from "../pages/Editor"; import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL"; import useTables from "../hooks/useTables"; import useUndoRedo from "../hooks/useUndoRedo"; import useSelect from "../hooks/useSelect"; +import useTypes from "../hooks/useTypes"; export default function TableOverview() { const [indexActiveKey, setIndexActiveKey] = useState(""); @@ -52,7 +52,7 @@ export default function TableOverview() { updateTable, setRelationships, } = useTables(); - const { types } = useContext(TypeContext); + const { types } = useTypes(); const { setUndoStack, setRedoStack } = useUndoRedo(); const { selectedElement, setSelectedElement } = useSelect(); const [editField, setEditField] = useState({}); diff --git a/src/components/TypesOverview.jsx b/src/components/TypesOverview.jsx index 2e35af1..9203388 100644 --- a/src/components/TypesOverview.jsx +++ b/src/components/TypesOverview.jsx @@ -1,4 +1,4 @@ -import { useContext, useState } from "react"; +import { useState } from "react"; import { Action, ObjectType, sqlDataTypes } from "../data/data"; import { Collapse, @@ -27,13 +27,13 @@ import { IllustrationNoContent, IllustrationNoContentDark, } from "@douyinfe/semi-illustrations"; -import { TypeContext } from "../pages/Editor"; import { isSized, hasPrecision, getSize } from "../utils/toSQL"; import useUndoRedo from "../hooks/useUndoRedo"; +import useTypes from "../hooks/useTypes"; export default function TableOverview() { const [value, setValue] = useState(""); - const { types, addType, deleteType, updateType } = useContext(TypeContext); + const { types, addType, deleteType, updateType } = useTypes(); const { setUndoStack, setRedoStack } = useUndoRedo(); const [editField, setEditField] = useState({}); const [filteredResult, setFilteredResult] = useState( diff --git a/src/context/TypesContext.jsx b/src/context/TypesContext.jsx new file mode 100644 index 0000000..f6559e7 --- /dev/null +++ b/src/context/TypesContext.jsx @@ -0,0 +1,77 @@ +import { createContext, useState } from "react"; +import { Action, ObjectType } from "../data/data"; +import useUndoRedo from "../hooks/useUndoRedo"; + +export const TypesContext = createContext(null); + +export default function TypesContextProvider({ children }) { + const [types, setTypes] = useState([]); + const { setUndoStack, setRedoStack } = useUndoRedo(); + + const addType = (addToHistory = true, data) => { + if (data) { + setTypes((prev) => { + const temp = prev.slice(); + temp.splice(data.id, 0, data); + return temp; + }); + } else { + setTypes((prev) => [ + ...prev, + { + name: `type_${prev.length}`, + fields: [], + comment: "", + }, + ]); + } + if (addToHistory) { + setUndoStack((prev) => [ + ...prev, + { + action: Action.ADD, + element: ObjectType.TYPE, + message: `Add new type`, + }, + ]); + setRedoStack([]); + } + }; + + const deleteType = (id, addToHistory = true) => { + if (addToHistory) { + setUndoStack((prev) => [ + ...prev, + { + action: Action.DELETE, + element: ObjectType.TYPE, + id: id, + data: types[id], + message: `Delete type`, + }, + ]); + setRedoStack([]); + } + setTypes((prev) => prev.filter((e, i) => i !== id)); + }; + + const updateType = (id, values) => { + setTypes((prev) => + prev.map((e, i) => (i === id ? { ...e, ...values } : e)) + ); + }; + + return ( + + {children} + + ); +} diff --git a/src/hooks/useTypes.js b/src/hooks/useTypes.js new file mode 100644 index 0000000..2d6272b --- /dev/null +++ b/src/hooks/useTypes.js @@ -0,0 +1,6 @@ +import { useContext } from "react"; +import { TypesContext } from "../context/TypesContext"; + +export default function useTypes() { + return useContext(TypesContext); +} diff --git a/src/pages/Editor.jsx b/src/pages/Editor.jsx index 74f0f6e..12c48a6 100644 --- a/src/pages/Editor.jsx +++ b/src/pages/Editor.jsx @@ -2,7 +2,7 @@ import { useState, createContext, useEffect, useCallback } from "react"; import ControlPanel from "../components/ControlPanel"; import Canvas from "../components/Canvas"; import SidePanel from "../components/SidePanel"; -import { Tab, Action, ObjectType, State } from "../data/data"; +import { Tab, State } from "../data/data"; import { db } from "../data/db"; import useLayout from "../hooks/useLayout"; import LayoutContextProvider from "../context/LayoutContext"; @@ -19,11 +19,12 @@ import Controls from "../components/Controls"; import useAreas from "../hooks/useAreas"; import useNotes from "../hooks/useNotes"; import NotesContextProvider from "../context/NotesContext"; +import useTypes from "../hooks/useTypes"; +import TypesContextProvider from "../context/TypesContext"; export const StateContext = createContext(); export const TabContext = createContext(); export const TaskContext = createContext(); -export const TypeContext = createContext(); export default function Editor() { return ( @@ -33,9 +34,11 @@ export default function Editor() { - - - + + + + + @@ -50,7 +53,7 @@ function WorkSpace() { const [title, setTitle] = useState("Untitled Diagram"); const [state, setState] = useState(State.NONE); const [lastSaved, setLastSaved] = useState(""); - const [types, setTypes] = useState([]); + const { types, setTypes } = useTypes(); const [resize, setResize] = useState(false); const [width, setWidth] = useState(340); const [tab, setTab] = useState(Tab.tables); @@ -69,59 +72,6 @@ function WorkSpace() { if (w > 340) setWidth(w); }; - const addType = (addToHistory = true, data) => { - if (data) { - setTypes((prev) => { - const temp = prev.slice(); - temp.splice(data.id, 0, data); - return temp; - }); - } else { - setTypes((prev) => [ - ...prev, - { - name: `type_${prev.length}`, - fields: [], - comment: "", - }, - ]); - } - if (addToHistory) { - setUndoStack((prev) => [ - ...prev, - { - action: Action.ADD, - element: ObjectType.TYPE, - message: `Add new type`, - }, - ]); - setRedoStack([]); - } - }; - - const deleteType = (id, addToHistory = true) => { - if (addToHistory) { - setUndoStack((prev) => [ - ...prev, - { - action: Action.DELETE, - element: ObjectType.TYPE, - id: id, - data: types[id], - message: `Delete type`, - }, - ]); - setRedoStack([]); - } - setTypes((prev) => prev.filter((e, i) => i !== id)); - }; - - const updateType = (id, values) => { - setTypes((prev) => - prev.map((e, i) => (i === id ? { ...e, ...values } : e)) - ); - }; - const updateTask = (id, values) => setTasks((prev) => prev.map((task, i) => (id === i ? { ...task, ...values } : task)) @@ -361,55 +311,42 @@ function WorkSpace() { setTables, setAreas, setNotes, + setTypes, ]); return ( - -
- - - -
setResize(false)} - onMouseLeave={() => setResize(false)} - onMouseMove={handleResize} - > - {layout.sidebar && ( - +
+ + + +
setResize(false)} + onMouseLeave={() => setResize(false)} + onMouseMove={handleResize} + > + {layout.sidebar && ( + + )} +
+ + {!(layout.sidebar || layout.toolbar || layout.header) && ( +
+ +
)} -
- - {!(layout.sidebar || layout.toolbar || layout.header) && ( -
- -
- )} -
- +
);