diff --git a/view/src/components/Diagram/Cursor/Cursor.tsx b/view/src/components/Diagram/Cursor/Cursor.tsx new file mode 100644 index 0000000..6f931d8 --- /dev/null +++ b/view/src/components/Diagram/Cursor/Cursor.tsx @@ -0,0 +1,29 @@ +import React, { useMemo, useState, useEffect } from "react"; + +// Constructor for React states of cursor position X & Y +const [xPos, setXPos] = useState(0); +const [yPos, setYPos] = useState(0); + +export const handlePointerMove = (e: React.PointerEvent) => { + broadcastPointerPosition(e); +} + +// TODO: Break function up into Position X & Position Y +const broadcastPointerPosition = (e: React.PointerEvent) => { + // Good for debugging + console.log(e.clientX, e.clientY); + + // Set the X & Y Position of the cursor + setXPos(e.clientX); + setYPos(e.clientY); + + console.log(xPos) + console.log(yPos) + + // TODO: Format xPos & yPos to cursors that animate + + // TODO: useMemo to improve performance + return useMemo(() => { + [xPos, yPos] + }, [e.clientX, e.clientY]); +} diff --git a/view/src/components/Diagram/Diagram.tsx b/view/src/components/Diagram/Diagram.tsx index 81f479d..6350efc 100644 --- a/view/src/components/Diagram/Diagram.tsx +++ b/view/src/components/Diagram/Diagram.tsx @@ -39,6 +39,9 @@ import Legend from "./Legend"; import "reactflow/dist/style.css"; import "./Diagram.css"; +//Cursors +import { handlePointerMove } from "./Cursor/Cursor" + const nodeTypes = { overlay: OverlayNode, }; @@ -247,6 +250,7 @@ function Diagram({ "hasSelection": ${selectedNodes.length > 0}, "iri": ${JSON.stringify(iriArray)} }`} + onPointerMove={handlePointerMove} >