feat: improve coordinate handling

TODO: improve on this message

Author: FelixZY

package-lock.json

@@ -19,6 +19,7 @@
     "@uiw/react-codemirror": "^4.21.25",
     "@vercel/analytics": "^1.2.2",
     "axios": "^1.6.2",
+    "classnames": "^2.5.1",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.7",
     "file-saver": "^2.0.5",
@@ -35,7 +36,8 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-i18next": "^14.1.1",
     "react-router-dom": "^6.21.0",
-    "url": "^0.11.1"
+    "url": "^0.11.1",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

package.json

@@ -0,0 +1,76 @@
+// @ts-check
+
+import { Dispatch, SetStateAction } from "react";
+import { Action, ObjectType } from "../data/constants";
+
+type CursorStyle = "default" | "grabbing";
+
+declare global {
+  namespace DrawDB {
+    export interface Vector2d {
+      x: number;
+      y: number;
+    }
+
+    export interface UndoRedoItem {
+      action: (typeof Action)[keyof typeof Action];
+      element: (typeof ObjectType)[keyof typeof ObjectType];
+      undo: any;
+      redo: any;
+      message: string;
+    }
+
+    export interface UndoRedoContext {
+      undoStack: UndoRedoItem[];
+      setUndoStack: React.Dispatch<React.SetStateAction<UndoRedoItem[]>>;
+      redoStack: UndoRedoItem[];
+      setRedoStack: React.Dispatch<React.SetStateAction<UndoRedoItem[]>>;
+    }
+
+    export interface TransformContext {
+      transform: {
+        pan: Vector2d;
+        zoom: number;
+      };
+      setTransform: Dispatch<SetStateAction<TransformContext["transform"]>>;
+    }
+
+    export interface SettingsContext {
+      settings: {
+        strictMode: boolean;
+        showFieldSummary: boolean;
+        showGrid: boolean;
+        mode: "light" | "dark";
+        autosave: boolean;
+        panning: boolean;
+        showCardinality: boolean;
+        tableWidth: number;
+        showDebugCoordinates: boolean;
+      };
+      setSettings: Dispatch<SetStateAction<SettingsContext["settings"]>>;
+    }
+
+    export interface CanvasContext {
+      canvas: {
+        screenSize: Vector2d;
+        viewBox: DOMRect;
+      };
+      coords: {
+        toDiagramSpace(coords: Vector2d): Vector2d;
+        toDiagramSpace(coords: Pick<Vector2d, "x">): Pick<Vector2d, "x">;
+        toDiagramSpace(coords: Pick<Vector2d, "y">): Pick<Vector2d, "y">;
+        toScreenSpace(coords: Vector2d): Vector2d;
+        toScreenSpace(coords: Pick<Vector2d, "x">): Pick<Vector2d, "x">;
+        toScreenSpace(coords: Pick<Vector2d, "y">): Pick<Vector2d, "y">;
+      };
+      pointer: {
+        spaces: {
+          screen: DrawDB.Vector2d;
+          diagram: DrawDB.Vector2d;
+        };
+        style: CursorStyle;
+        setStyle: Dispatch<SetStateAction<CursorStyle>>;
+      };
+    }
+  }
+}

src/@types/index.d.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useRef, useState } from "react";
 import { Button, Popover, Input } from "@douyinfe/semi-ui";
 import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
 import {
@@ -15,16 +15,27 @@ import {
   useSelect,
   useAreas,
   useSaveState,
-  useTransform,
 } from "../../hooks";
 import ColorPalette from "../ColorPicker";
 import { useTranslation } from "react-i18next";
+import { useHover } from "usehooks-ts";
+import { CanvasContext } from "../../context/CanvasContext";
 
-export default function Area({ data, onPointerDown, setResize, setInitCoords }) {
-  const [hovered, setHovered] = useState(false);
+export default function Area({
+  data,
+  onPointerDown,
+  setResize,
+  setInitCoords,
+}) {
+  const ref = useRef(null);
+  const isHovered = useHover(ref);
+  const {
+    pointer: {
+      spaces: { diagram: pointer },
+    },
+  } = useContext(CanvasContext);
   const { layout } = useLayout();
   const { settings } = useSettings();
-  const { transform } = useTransform();
   const { setSaveState } = useSaveState();
   const { selectedElement, setSelectedElement } = useSelect();
 
@@ -35,8 +46,8 @@ export default function Area({ data, onPointerDown, setResize, setInitCoords })
       y: data.y,
       width: data.width,
       height: data.height,
-      pointerX: e.clientX / transform.zoom,
-      pointerY: e.clientY / transform.zoom,
+      pointerX: pointer.x,
+      pointerY: pointer.y,
     });
   };
 
@@ -84,10 +95,7 @@ export default function Area({ data, onPointerDown, setResize, setInitCoords })
     selectedElement.open;
 
   return (
-    <g
-      onPointerEnter={(e) => e.isPrimary && setHovered(true)}
-      onPointerLeave={(e) => e.isPrimary &&setHovered(false)}
-    >
+    <g ref={ref}>
       <foreignObject
         key={data.id}
         x={data.x}
@@ -98,7 +106,7 @@ export default function Area({ data, onPointerDown, setResize, setInitCoords })
       >
         <div
           className={`border-2 ${
-            hovered
+            isHovered
               ? "border-dashed border-blue-500"
               : selectedElement.element === ObjectType.AREA &&
                   selectedElement.id === data.id
@@ -114,7 +122,7 @@ export default function Area({ data, onPointerDown, setResize, setInitCoords })
               <div className="text-color select-none overflow-hidden text-ellipsis">
                 {data.name}
               </div>
-              {(hovered || (areaIsSelected() && !layout.sidebar)) && (
+              {(isHovered || (areaIsSelected() && !layout.sidebar)) && (
                 <Popover
                   visible={areaIsSelected() && !layout.sidebar}
                   onClickOutSide={onClickOutSide}
@@ -139,7 +147,7 @@ export default function Area({ data, onPointerDown, setResize, setInitCoords })
           </div>
         </div>
       </foreignObject>
-      {hovered && (
+      {isHovered && (
         <>
           <circle
             cx={data.x}