Declutter utils

src/components/ControlPanel.jsx

@@ -37,17 +37,12 @@ import todo from "../assets/calendar.png";
 import { toPng, toJpeg, toSvg } from "html-to-image";
 import { saveAs } from "file-saver";
 import {
-  jsonDiagramIsValid,
-  enterFullscreen,
-  exitFullscreen,
-  ddbDiagramIsValid,
-  dataURItoBlob,
   jsonToMySQL,
   jsonToPostgreSQL,
   jsonToSQLite,
   jsonToMariaDB,
   jsonToSQLServer,
-} from "../utils";
+} from "../utils/toSQL";
 import {
   AreaContext,
   NoteContext,
@@ -73,6 +68,9 @@ import useTransform from "../hooks/useTransform";
 import useTables from "../hooks/useTables";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
+import { enterFullscreen, exitFullscreen } from "../utils/fullscreen";
+import { ddbDiagramIsValid, jsonDiagramIsValid } from "../utils/validateSchema";
+import { dataURItoBlob } from "../utils/utils";
 
 export default function ControlPanel({
   diagramId,

src/components/Controls.jsx

@@ -1,7 +1,7 @@
 import { Divider, Tooltip } from "@douyinfe/semi-ui";
-import { exitFullscreen } from "../utils";
 import useTransform from "../hooks/useTransform";
 import useLayout from "../hooks/useLayout";
+import { exitFullscreen } from "../utils/fullscreen";
 
 export default function Controls() {
   const { transform, setTransform } = useTransform();

src/components/Issues.jsx

@@ -1,9 +1,10 @@
 import { useContext, useState, useEffect } from "react";
 import { Collapse, Badge } from "@douyinfe/semi-ui";
 import { TypeContext } from "../pages/Editor";
-import { validateDiagram, arrayIsEqual } from "../utils";
+import { validateDiagram } from "../utils/toSQL";
 import useSettings from "../hooks/useSettings";
 import useTables from "../hooks/useTables";
+import { arrayIsEqual } from "../utils/utils";
 
 export default function Issues() {
   const { settings } = useSettings();

src/components/Relationship.jsx

@@ -1,7 +1,7 @@
 import { useRef } from "react";
-import { calcPath } from "../utils";
 import { Cardinality } from "../data/data";
 import useSettings from "../hooks/useSettings";
+import { calcPath } from "../utils/calcPath";
 
 export default function Relationship({ data }) {
   const { settings } = useSettings();
@@ -50,14 +50,7 @@ export default function Relationship({ data }) {
     <g className="select-none group">
       <path
         ref={pathRef}
-        d={calcPath(
-          data.startX,
-          data.endX,
-          data.startY,
-          data.endY,
-          data.startFieldId,
-          data.endFieldId
-        )}
+        d={calcPath(data.startX, data.endX, data.startY, data.endY)}
         stroke="gray"
         className="group-hover:stroke-sky-700"
         fill="none"

src/components/SimpleCanvas.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from "react";
 import { Cardinality } from "../data/data";
-import { calcPath } from "../utils";
+import { calcPath } from "../utils/calcPath";
 
 function Table({ table, grab }) {
   const [isHovered, setIsHovered] = useState(false);
@@ -19,8 +19,9 @@ function Table({ table, grab }) {
       onMouseLeave={() => setIsHovered(false)}
     >
       <div
-        className={`border-2 ${isHovered ? "border-dashed border-blue-500" : "border-zinc-300"
-          } select-none rounded-lg w-full bg-zinc-100 text-zinc-800`}
+        className={`border-2 ${
+          isHovered ? "border-dashed border-blue-500" : "border-zinc-300"
+        } select-none rounded-lg w-full bg-zinc-100 text-zinc-800`}
       >
         <div
           className={`h-[10px] w-full rounded-t-md`}
@@ -32,8 +33,9 @@ function Table({ table, grab }) {
         {table.fields.map((e, i) => (
           <div
             key={i}
-            className={`${i === table.fields.length - 1 ? "" : "border-b border-gray-400"
-              } h-[36px] px-2 py-1 flex justify-between`}
+            className={`${
+              i === table.fields.length - 1 ? "" : "border-b border-gray-400"
+            } h-[36px] px-2 py-1 flex justify-between`}
             onMouseEnter={() => setHoveredField(i)}
             onMouseLeave={() => setHoveredField(-1)}
           >
@@ -99,9 +101,7 @@ function Relationship({ relationship }) {
           relationship.startX,
           relationship.endX,
           relationship.startY,
-          relationship.endY,
-          relationship.startFieldId,
-          relationship.endFieldId
+          relationship.endY
         )}
         stroke="gray"
         fill="none"
@@ -231,10 +231,12 @@ export default function SimpleCanvas({ diagram, zoom }) {
         height="100%"
         fill="url(#pattern-circles)"
       ></rect>
-      <g style={{
-        transform: `scale(${zoom})`,
-        transformOrigin: "top left",
-      }}>
+      <g
+        style={{
+          transform: `scale(${zoom})`,
+          transformOrigin: "top left",
+        }}
+      >
         {relationships.map((r, i) => (
           <Relationship key={i} relationship={r} />
         ))}

src/components/Table.jsx

@@ -32,7 +32,7 @@ import {
   Toast,
 } from "@douyinfe/semi-ui";
 import { TabContext, TypeContext } from "../pages/Editor";
-import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
+import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL";
 import useLayout from "../hooks/useLayout";
 import useSettings from "../hooks/useSettings";
 import useUndoRedo from "../hooks/useUndoRedo";

src/components/TableOverview.jsx

@@ -36,7 +36,7 @@ import {
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
 import { TypeContext } from "../pages/Editor";
-import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
+import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL";
 import useTables from "../hooks/useTables";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";

src/components/Thumbnail.jsx

@@ -1,4 +1,4 @@
-import { calcPath } from "../utils";
+import { calcPath } from "../utils/calcPath";
 
 export function Thumbnail({ diagram, i, zoom }) {
   const translateX = 32 * zoom;
@@ -119,9 +119,7 @@ export function Thumbnail({ diagram, i, zoom }) {
               e.startX,
               e.endX,
               e.startY - translateY / zoom,
-              e.endY - (translateY / zoom) * 0.5,
-              e.startFieldId,
-              e.endFieldId
+              e.endY - (translateY / zoom) * 0.5
             )}
             fill="none"
             strokeWidth={1}

src/components/TypesOverview.jsx

@@ -28,7 +28,7 @@ import {
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
 import { TypeContext } from "../pages/Editor";
-import { isSized, hasPrecision, getSize } from "../utils";
+import { isSized, hasPrecision, getSize } from "../utils/toSQL";
 import useUndoRedo from "../hooks/useUndoRedo";
 
 export default function TableOverview() {