Great, thanks. This is indeed a bit complicated, but i guess that is the tradeof for using webgl rendering.

I have managed to set the mouse state using a Context and then display it in any other component. I did not quite understand the <Html> element as a child of the <HeatmapVis> component, since I could not see it in the page (in the element explorer of the developer tools it is somewhere deeply nested).

The full example is:

import "@h5web/lib/dist/styles.css";

import ndarray from "ndarray";
import { HeatmapVis, getDomain, useVisCanvasContext } from "@h5web/lib";
import { useState, createContext, useContext } from "react";

// Initialise source 2D array
const values = [
  [0, 1, 2],
  [3, 4, 5],
];

// Flatten source array
const flatValues: number[] = values.flat(Infinity);

// Convert to ndarray and get domain
const dataArray = ndarray(flatValues, [2, 3]);
const domain = getDomain(dataArray);


// Mouse position context
type Position = {
  x: number;
  y: number;
};

type MouseContextType = {
  position: Position;
  setPosition: React.Dispatch<React.SetStateAction<Position>>;
};

const MousePositionContext = createContext<MouseContextType | undefined>(
  undefined
);

function MousePositionProvider({ children }: { children: React.ReactNode }) {
  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
  return (
    <MousePositionContext.Provider value={{ position, setPosition }}>
      {children}
    </MousePositionContext.Provider>
  );
}

function MouseTracker() {
  const context = useContext(MousePositionContext);
  if (!context)
    throw new Error("MouseTracker must be used within a MousePositionProvider");
  const { setPosition } = context;

  const { visSize, worldToData } = useVisCanvasContext();
  const { width, height } = visSize;

  const handlePointerMove = (evt: any) => {
    const { unprojectedPoint } = evt;
    const dataCoords = worldToData(unprojectedPoint);

    setPosition({ x: dataCoords.x, y: dataCoords.y });
  };

  return (
    <>
      <mesh onPointerMove={handlePointerMove}>
        <planeGeometry args={[width, height]} />
        <meshBasicMaterial opacity={0} transparent />
      </mesh>
    </>
  );
}

function MouseDisplay() {
  const context = useContext(MousePositionContext);
  if (!context)
    throw new Error("MouseDisplay must be used within a MousePositionProvider");
  const { position } = context;


  return (
    <div>
      Mouse position: ({position.x}, {position.y})
    </div>
  );
}

function MyApp() {
  return (
    <MousePositionProvider>
      <div style={{ display: "flex", height: "30rem" }}>
        <HeatmapVis dataArray={dataArray} domain={domain}>
          <MouseTracker />
        </HeatmapVis>
      </div>
      <MouseDisplay />
    </MousePositionProvider>
  );
}

export default MyApp;

Mouse position outside of the h5web/lib element #1777

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions