From a8eea3256699b6062307a900a4ac1939fdf98ef8 Mon Sep 17 00:00:00 2001 From: aematei Date: Thu, 4 Jan 2024 21:59:47 -0800 Subject: [PATCH 1/3] Log mouse cursor coordinates in iagram view to webview console Signed-off-by: aematei --- view/src/components/Diagram/Cursor/Cursor.tsx | 5 +++++ view/src/components/Diagram/Diagram.tsx | 4 ++++ 2 files changed, 9 insertions(+) create mode 100644 view/src/components/Diagram/Cursor/Cursor.tsx diff --git a/view/src/components/Diagram/Cursor/Cursor.tsx b/view/src/components/Diagram/Cursor/Cursor.tsx new file mode 100644 index 0000000..a39554d --- /dev/null +++ b/view/src/components/Diagram/Cursor/Cursor.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export const handleMouseMove = (e: React.MouseEvent) => { + console.log(e.clientX, e.clientY); +} \ No newline at end of file diff --git a/view/src/components/Diagram/Diagram.tsx b/view/src/components/Diagram/Diagram.tsx index 6220645..928ed86 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 { handleMouseMove } from "./Cursor/Cursor" + const nodeTypes = { overlay: OverlayNode, }; @@ -177,6 +180,7 @@ function Diagram({ "hasSelection": ${selectedNodes.length > 0}, "iri": ${JSON.stringify(iriArray)} }`} + onMouseMove={handleMouseMove} > Date: Mon, 8 Jan 2024 18:16:57 -0800 Subject: [PATCH 2/3] Switch MouseEvents to PointerEvents Signed-off-by: aematei --- view/src/components/Diagram/Cursor/Cursor.tsx | 8 ++++++-- view/src/components/Diagram/Diagram.tsx | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/view/src/components/Diagram/Cursor/Cursor.tsx b/view/src/components/Diagram/Cursor/Cursor.tsx index a39554d..18c56e3 100644 --- a/view/src/components/Diagram/Cursor/Cursor.tsx +++ b/view/src/components/Diagram/Cursor/Cursor.tsx @@ -1,5 +1,9 @@ import React from "react"; -export const handleMouseMove = (e: React.MouseEvent) => { +export const handlePointerMove = (e: React.PointerEvent) => { + broadcastPointerPosition(e); +} + +const broadcastPointerPosition = (e: React.PointerEvent) => { console.log(e.clientX, e.clientY); -} \ No newline at end of file +} diff --git a/view/src/components/Diagram/Diagram.tsx b/view/src/components/Diagram/Diagram.tsx index 928ed86..72c07e2 100644 --- a/view/src/components/Diagram/Diagram.tsx +++ b/view/src/components/Diagram/Diagram.tsx @@ -40,7 +40,7 @@ import "reactflow/dist/style.css"; import "./Diagram.css"; //Cursors -import { handleMouseMove } from "./Cursor/Cursor" +import { handlePointerMove } from "./Cursor/Cursor" const nodeTypes = { overlay: OverlayNode, @@ -180,7 +180,7 @@ function Diagram({ "hasSelection": ${selectedNodes.length > 0}, "iri": ${JSON.stringify(iriArray)} }`} - onMouseMove={handleMouseMove} + onPointerMove={handlePointerMove} > Date: Sun, 11 Feb 2024 00:06:20 +0000 Subject: [PATCH 3/3] wip: memorized pointer position X & Y Signed-off-by: pogi7 --- view/src/components/Diagram/Cursor/Cursor.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/view/src/components/Diagram/Cursor/Cursor.tsx b/view/src/components/Diagram/Cursor/Cursor.tsx index 18c56e3..6f931d8 100644 --- a/view/src/components/Diagram/Cursor/Cursor.tsx +++ b/view/src/components/Diagram/Cursor/Cursor.tsx @@ -1,9 +1,29 @@ -import React from "react"; +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]); }