Abstract SettingsContext out

src/components/Area.jsx

@@ -16,19 +16,19 @@ import {
 import {
   AreaContext,
   SelectContext,
-  SettingsContext,
   StateContext,
   TabContext,
   UndoRedoContext,
 } from "../pages/Editor";
 import useLayout from "../hooks/useLayout";
+import useSettings from "../hooks/useSettings";
 
 export default function Area(props) {
   const [hovered, setHovered] = useState(false);
   const [editField, setEditField] = useState({});
   const { setState } = useContext(StateContext);
-  const {layout} = useLayout();
-  const { settings } = useContext(SettingsContext);
+  const { layout } = useLayout();
+  const { settings } = useSettings();
   const { tab, setTab } = useContext(TabContext);
   const { updateArea, deleteArea } = useContext(AreaContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);

src/components/Canvas.jsx

@@ -6,7 +6,6 @@ import Relationship from "./Relationship";
 import {
   AreaContext,
   NoteContext,
-  SettingsContext,
   TableContext,
   UndoRedoContext,
   SelectContext,
@@ -14,13 +13,14 @@ import {
 } from "../pages/Editor";
 import Note from "./Note";
 import { Toast } from "@douyinfe/semi-ui";
+import useSettings from "../hooks/useSettings";
 
 export default function Canvas() {
   const { tables, updateTable, relationships, addRelationship } =
     useContext(TableContext);
   const { areas, updateArea } = useContext(AreaContext);
   const { notes, updateNote } = useContext(NoteContext);
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const { transform, setTransform } = useContext(TransformContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);

src/components/ControlPanel.jsx

@@ -53,7 +53,6 @@ import {
   NoteContext,
   TransformContext,
   SelectContext,
-  SettingsContext,
   StateContext,
   TabContext,
   TableContext,
@@ -73,6 +72,7 @@ import { Parser } from "node-sql-parser";
 import Todo from "./Todo";
 import { Thumbnail } from "./Thumbnail";
 import useLayout from "../hooks/useLayout";
+import useSettings from "../hooks/useSettings";
 
 export default function ControlPanel({
   diagramId,
@@ -124,7 +124,7 @@ export default function ControlPanel({
   const [data, setData] = useState(null);
   const { state, setState } = useContext(StateContext);
   const { layout, setLayout } = useLayout();
-  const { settings, setSettings } = useContext(SettingsContext);
+  const { settings, setSettings } = useSettings();
   const {
     relationships,
     tables,

src/components/Issues.jsx

@@ -1,10 +1,11 @@
 import { useContext, useState, useEffect } from "react";
 import { Collapse, Badge } from "@douyinfe/semi-ui";
-import { SettingsContext, TableContext, TypeContext } from "../pages/Editor";
+import { TableContext, TypeContext } from "../pages/Editor";
 import { validateDiagram, arrayIsEqual } from "../utils";
+import useSettings from "../hooks/useSettings";
 
 export default function Issues() {
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { types } = useContext(TypeContext);
   const { tables, relationships } = useContext(TableContext);
   const [issues, setIssues] = useState([]);

src/components/Relationship.jsx

@@ -1,11 +1,11 @@
-import { useContext, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { calcPath } from "../utils";
 import { Cardinality } from "../data/data";
-import { SettingsContext } from "../pages/Editor";
+import useSettings from "../hooks/useSettings";
 
 export default function Relationship(props) {
   const [hovered, setHovered] = useState(false);
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const pathRef = useRef();
 
   let cardinalityStart = "1";

src/components/Sidebar.jsx

@@ -9,12 +9,12 @@ import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui";
 import {
   BotMessageContext,
   MessageContext,
-  SettingsContext,
   UndoRedoContext,
 } from "../pages/Editor";
 import Todo from "./Todo";
 import Chat from "./Chat";
 import DrawBot from "./DrawBot";
+import useSettings from "../hooks/useSettings";
 
 export default function Sidebar() {
   const SidesheetType = {
@@ -27,7 +27,7 @@ export default function Sidebar() {
   };
   const { undoStack } = useContext(UndoRedoContext);
   const { messages } = useContext(MessageContext);
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { botMessages } = useContext(BotMessageContext);
   const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
   const [seen, setSeen] = useState(0);

src/components/Table.jsx

@@ -33,7 +33,6 @@ import {
 } from "@douyinfe/semi-ui";
 import {
   SelectContext,
-  SettingsContext,
   TabContext,
   TableContext,
   TypeContext,
@@ -41,6 +40,7 @@ import {
 } from "../pages/Editor";
 import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
 import useLayout from "../hooks/useLayout";
+import useSettings from "../hooks/useSettings";
 
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
@@ -50,7 +50,7 @@ export default function Table(props) {
   const { deleteTable, updateTable, updateField, setRelationships } =
     useContext(TableContext);
   const { tab, setTab } = useContext(TabContext);
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { types } = useContext(TypeContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);