onPointerMove()

in src/nodes/shared/image-segmentation-viewer.ts [162:202]

• 32 lines of code
• 6 McCabe index (conditional complexity)

  onPointerMove(event: PointerEvent) {
    const canvasEl = this.canvas as HTMLCanvasElement;
    if (this.masks.length === 0) return;
    // Get bounding box
    const bb = canvasEl.getBoundingClientRect();
    // Get the mouse coordinates relative to the container
    let px = (event.clientX - bb.left - canvasEl.clientLeft) / bb.width;
    let py = (event.clientY - bb.top - canvasEl.clientTop) / bb.height;
    // Clamp the coordinates to the image
    px = clamp(px);
    py = clamp(py);

    const ctx = canvasEl.getContext("2d") as CanvasRenderingContext2D;
    ctx.save();
    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);

    if (this.inputImage) {
      ctx.drawImage(this.inputImage, 0, 0);
    }
    // Loop over all canvases
    for (const mask of this.masks) {
      const canvasX = mask.width * px;
      const canvasY = mask.height * py;
      // Get the pixel data of the mouse coordinates
      const maskctx = mask.getContext("2d") as CanvasRenderingContext2D;
      const pixelData = maskctx.getImageData(canvasX, canvasY, 1, 1).data;

      // Apply hover effect if not fully opaque
      if (pixelData[3] < 255) {
        ctx.globalAlpha = 0.1;
        ctx.drawImage(mask, 0, 0);
      } else {
        ctx.globalAlpha = 0.6;
        ctx.drawImage(mask, 0, 0);
        const label = mask.getAttribute("data-label");
        const score = mask.getAttribute("data-score");
        this.currentLabel = `${label} ${score ? ` - ${score}` : ""}`;
      }
    }
    ctx.restore();
  }