Fix the style jitter issue

src/components/EditorCanvas/Canvas.jsx

@@ -10,6 +10,7 @@ import Table from "./Table";
 import Area from "./Area";
 import Relationship from "./Relationship";
 import Note from "./Note";
+import Line from './Line';
 import {
   useSettings,
   useTransform,
@@ -19,6 +20,7 @@ import {
   useAreas,
   useNotes,
   useLayout,
+  useLine
 } from "../../hooks";
 
 export default function Canvas() {
@@ -30,23 +32,13 @@ export default function Canvas() {
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { transform, setTransform } = useTransform();
   const { selectedElement, setSelectedElement } = useSelect();
+  const { linking, setLinking, linkingLine, setLinkingLine } = useLine()
   const [dragging, setDragging] = useState({
     element: ObjectType.NONE,
     id: -1,
     prevX: 0,
     prevY: 0,
   });
-  const [linking, setLinking] = useState(false);
-  const [linkingLine, setLinkingLine] = useState({
-    startTableId: -1,
-    startFieldId: -1,
-    endTableId: -1,
-    endFieldId: -1,
-    startX: 0,
-    startY: 0,
-    endX: 0,
-    endY: 0,
-  });
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const [hoveredTable, setHoveredTable] = useState({
     tableId: -1,
@@ -474,13 +466,7 @@ export default function Canvas() {
                 }
               />
             ))}
-            {linking && (
-              <path
-                d={`M ${linkingLine.startX} ${linkingLine.startY} L ${linkingLine.endX} ${linkingLine.endY}`}
-                stroke="red"
-                strokeDasharray="8,8"
-              />
-            )}
+            <Line />
             {notes.map((n) => (
               <Note
                 key={n.id}

src/components/EditorCanvas/Line.jsx

@@ -0,0 +1,18 @@
+import { useLine } from "../../hooks";
+
+export default function Line() {
+  const { linkingLine, linking } = useLine();
+
+  return (
+    <>
+      {linking && (
+        <path
+          d={`M ${linkingLine.startX} ${linkingLine.startY} L ${linkingLine.endX} ${linkingLine.endY}`}
+          stroke="red"
+          strokeDasharray="8,8"
+          className="pointer-events-none"
+        />
+      )}
+    </>
+  );
+}

src/components/EditorCanvas/Table.jsx

@@ -14,19 +14,20 @@ import {
   IconKeyStroked,
 } from "@douyinfe/semi-icons";
 import { Popover, Tag, Button, Toast, SideSheet } from "@douyinfe/semi-ui";
-import { useLayout, useSettings, useTables, useSelect } from "../../hooks";
+import {
+  useLayout,
+  useSettings,
+  useTables,
+  useSelect,
+  useLine,
+} from "../../hooks";
 import TableInfo from "../EditorSidePanel/TablesTab/TableInfo";
 
 export default function Table(props) {
   const [hoveredField, setHoveredField] = useState(-1);
-  const {
-    tableData,
-    onMouseDown,
-    setHoveredTable,
-    handleGripField,
-    setLinkingLine,
-  } = props;
+  const { tableData, onMouseDown, setHoveredTable, handleGripField } = props;
   const { layout } = useLayout();
+  const { linking, setLinkingLine, linkingLine } = useLine();
   const { deleteTable, deleteField } = useTables();
   const { settings } = useSettings();
   const { selectedElement, setSelectedElement } = useSelect();
@@ -56,6 +57,17 @@ export default function Table(props) {
     }
   };
 
+  const isSourceField = (fieldIndex, tableId) => {
+    return (
+      linkingLine.startFieldId === fieldIndex &&
+      linkingLine.startTableId === tableId
+    );
+  };
+
+  const isFieldSelectable = (fieldIndex, tableId) => {
+    return !isSourceField(fieldIndex, tableId);
+  };
+
   return (
     <>
       <foreignObject
@@ -69,17 +81,19 @@ export default function Table(props) {
       >
         <div
           onDoubleClick={openEditor}
-          className={`border-2 hover:border-dashed hover:border-blue-500
-               select-none rounded-lg w-full ${
-                 settings.mode === "light"
-                   ? "bg-zinc-100 text-zinc-800"
-                   : "bg-zinc-800 text-zinc-200"
-               } ${
-                 selectedElement.id === tableData.id &&
-                 selectedElement.element === ObjectType.TABLE
-                   ? "border-solid border-blue-500"
-                   : "border-zinc-500"
-               }`}
+          className={`border-2 hover:border-blue-500 select-none rounded-lg w-full overflow-hidden
+            ${!linking && "hover:border-dashed"}
+            ${
+              settings.mode === "light"
+                ? "bg-zinc-100 text-zinc-800"
+                : "bg-zinc-800 text-zinc-200"
+            }
+            ${
+              selectedElement.id === tableData.id &&
+              selectedElement.element === ObjectType.TABLE
+                ? "border-solid border-blue-500"
+                : "border-zinc-500"
+            }`}
         >
           <div
             className="h-[10px] w-full rounded-t-md"
@@ -268,11 +282,13 @@ export default function Table(props) {
   function field(fieldData, index) {
     return (
       <div
-        className={`${
-          index === tableData.fields.length - 1
-            ? ""
-            : "border-b border-gray-400"
-        } group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
+        className={`group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden
+          ${
+            index === tableData.fields.length - 1
+              ? ""
+              : "border-b border-gray-400"
+          }
+          ${linking && isFieldSelectable(index, tableData.id) ? "hover:bg-semi-blue-1" : ""}`}
         onMouseEnter={() => {
           setHoveredField(index);
           setHoveredTable({
@@ -286,7 +302,7 @@ export default function Table(props) {
       >
         <div
           className={`${
-            hoveredField === index ? "text-zinc-400" : ""
+            !linking && hoveredField === index ? "text-zinc-400" : ""
           } flex items-center gap-2 overflow-hidden`}
         >
           <button

src/context/LineContext.jsx

@@ -0,0 +1,30 @@
+import { createContext, useState } from "react";
+
+export const LineContext = createContext(null);
+
+export default function LineContextProvider({ children }) {
+  const [linking, setLinking] = useState(false);
+  const [linkingLine, setLinkingLine] = useState({
+    startTableId: -1,
+    startFieldId: -1,
+    endTableId: -1,
+    endFieldId: -1,
+    startX: 0,
+    startY: 0,
+    endX: 0,
+    endY: 0,
+  });
+
+  return (
+    <LineContext.Provider
+      value={{
+        linking,
+        setLinking,
+        linkingLine,
+        setLinkingLine
+       }}
+    >
+      {children}
+    </LineContext.Provider>
+  );
+}

src/hooks/index.js

@@ -9,3 +9,4 @@ export { default as useTasks } from "./useTasks";
 export { default as useTransform } from "./useTransform";
 export { default as useTypes } from "./useTypes";
 export { default as useUndoRedo } from "./useUndoRedo";
+export { default as useLine } from "./useLine";

src/hooks/useLine.js

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

src/index.css

@@ -82,6 +82,10 @@
   background-color: rgba(var(--semi-grey-2), 1);
 }
 
+.hover\:bg-semi-blue-1:hover {
+  background-color: rgba(var(--semi-blue-1), 1);
+}
+
 .hover-2:hover {
   background-color: rgba(var(--semi-grey-2), 1);
 }

src/pages/Editor.jsx

@@ -8,6 +8,7 @@ import NotesContextProvider from "../context/NotesContext";
 import TypesContextProvider from "../context/TypesContext";
 import TasksContextProvider from "../context/TasksContext";
 import SaveStateContextProvider from "../context/SaveStateContext";
+import LineContextProvider from "../context/LineContext";
 import WorkSpace from "../components/Workspace";
 
 export default function Editor() {
@@ -20,11 +21,13 @@ export default function Editor() {
               <AreasContextProvider>
                 <NotesContextProvider>
                   <TypesContextProvider>
-                    <TablesContextProvider>
-                      <SaveStateContextProvider>
-                        <WorkSpace />
-                      </SaveStateContextProvider>
-                    </TablesContextProvider>
+                    <LineContextProvider>
+                      <TablesContextProvider>
+                        <SaveStateContextProvider>
+                          <WorkSpace />
+                        </SaveStateContextProvider>
+                      </TablesContextProvider>
+                    </LineContextProvider>
                   </TypesContextProvider>
                 </NotesContextProvider>
               </AreasContextProvider>