Skip to content

Latest commit

 

History

History
105 lines (79 loc) · 3.61 KB

TooltipOverlay.md

File metadata and controls

105 lines (79 loc) · 3.61 KB
Raw

Documentation for Tooltip Overlay

Summary

The Tooltip Overlay component is a component that, like Canvas Overlay, allows you to draw elements on top of the DZI. Tooltip Overlay also accesses the cursor's location, making it very easy to draw elements that follow the cursor around.

Tooltip Overlay also uses the HTML Canvas API, so drawing elements and even text are simple.

It is not possible to include multiple tooltip overlay elements. All 'layers' of elements you want to draw need to be drawn in the same redraw function.

Basic Usage

Adding Tooltip Overlay to your OSD-R Viewport

Tooltip Overlay is an intrinsic element, and doesn't need to be imported in order for you to use it.

Rather, the component is added as <tooltipOverlay />.

const ViewerPage = () => {

  const osdViewerRef = useRef<OSDViewerRef>(null)
  const tooltipOverlayRef = useRef(null)

  const onTooltipOverlayRedraw: NonNullable<
    TooltipOverlayProps['onRedraw']
  > = ({ tooltipCoord, overlayCanvasEl, viewer }) => {
    const ctx = overlayCanvasEl.getContext('2d')
    if (ctx && tooltipCoord) {
      const radiusPx = 4000
      const sizeRect = new OpenSeadragon.Rect(0, 0, 2, 2)
      const lineWidth = viewer.viewport.viewportToImageRectangle(
        viewer.viewport.viewerElementToViewportRectangle(sizeRect)
      ).width
      ctx.lineWidth = lineWidth
      ctx.beginPath()
      ctx.arc(tooltipCoord.x, tooltipCoord.y, radiusPx, 0, 2 * Math.PI)
      ctx.closePath()
      ctx.stroke()
    }
  }

  return (
    <>
      <OSDViewer
        ref={osdViewerRef}
      >
        <>
          <viewport
            zoom={1}
            rotation={0}
          />
          <tiledImage
            tileUrlBase="http://localhost:4444/complex/00/"
            url="http://localhost:4444/meta/anything-here" 
          />
          <tooltipOverlay
            ref={tooltipOverlayRef}
            onRedraw={onTooltipOverlayRedraw}
          />
        </>
      </OSDViewer>
    </>
  )
}

Neither the ref nor the onRedraw prop is required in order to use tooltipOverlay.

the Tooltip Overlay redraw function has the following arguments:

  overlayCanvasEl: HTMLCanvasElement
  viewer: OpenSeadragon.Viewer
  tooltipCoord: OpenSeadragon.Point

tooltipCoord is an argument that allows you to access the mouse's co-ordinates in the viewer.

You can learn more about the OpenSeadragon.Point type at the OpenSeadragon Point documentation page.

In the above redraw function, we also use methods present on the viewer. You can learn more about the extensive collection of properties and methods present on the viewer element at the OpenSeadragon Viewer documentation page.

The following code snippet is used to maintain a consistent line width when zooming:

  const lineWidth = viewer.viewport.viewportToImageRectangle(
    viewer.viewport.viewerElementToViewportRectangle(sizeRect)
  ).width
  ctx.lineWidth = lineWidth

The HTML Canvas API is very flexible, allowing you to conditionally render elements while interacting with the viewer. See the Canvas Overlay page to see how state and zoom levels can control element visibility. Try implementing it yourself with Tooltip Overlay!

Further Reading