onPointerDown()

in src/nodes/shared/image-segmentation-viewer.ts [89:132]

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

  onPointerDown(event: PointerEvent) {
    if (!this.inputImage) return;
    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);

    // 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;

      if (pixelData[3] >= 255) {
        const layer = mask.getAttribute("data-label") as string;
        if (this.selectedLayers.has(layer)) {
          this.selectedLayers.delete(layer);
        } else {
          this.selectedLayers.add(layer);
        }
      }
    }

    const canvas = this.cutImage(this.selectedLayers);

    const outputImage = {
      canvasId: this.services.resourceService.put(canvas),
    };
    this.cachedOutputImage = canvas;
    this.dispatchEvent(
      new CustomEvent("outputs", {
        detail: { image: outputImage },
      })
    );
  }