Histograma¶

export interface Roi { x0: number; x1: number; y0: number; y1: number }

interface PixelImage { values: Float32Array; width: number; height: number }

export function imageRange(values: Float32Array): readonly [number, number] {
  let min = Infinity;
  let max = -Infinity;
  for (const value of values) {
    if (Number.isFinite(value)) {
      min = Math.min(min, value);
      max = Math.max(max, value);
    }
  }
  if (min === Infinity) return [0, 1];
  if (min === max) return [min, min + Math.max(1, Math.abs(min) * 1e-6)];
  return [min, max];
}

export function histogramEdges(values: Float32Array, bins = 32): number[] {
  if (!Number.isInteger(bins) || bins < 1 || bins > 256) throw new Error("Número de intervalos inválido");
  const [min, max] = imageRange(values);
  return Array.from({ length: bins + 1 }, (_, i) => min + (max - min) * i / bins);
}

export function isScalarImage({ width, height, values }: PixelImage): boolean {
  return Number.isInteger(width) && Number.isInteger(height) &&
    width > 0 && height > 0 && values.length === width * height;
}

function validateEdges(edges: readonly number[]) {
  if (edges.length < 2 || edges.some((v, i) =>
    !Number.isFinite(v) || (i > 0 && v <= edges[i - 1]!))) {
    throw new Error("As bordas devem ser finitas e crescentes");
  }
}

function validateRoi(roi: Roi, image: PixelImage) {
  if (!Object.values(roi).every(Number.isInteger) ||
      roi.x0 < 0 || roi.y0 < 0 || roi.x1 > image.width || roi.y1 > image.height ||
      roi.x0 > roi.x1 || roi.y0 > roi.y1) {
    throw new Error("ROI inválida");
  }
}

export function computeHistogram(image: PixelImage, roi: Roi, edges: readonly number[]) {
  if (!isScalarImage(image)) throw new Error("Dimensões inválidas");
  validateEdges(edges);
  validateRoi(roi, image);
  const counts = Array<number>(edges.length - 1).fill(0);
  let nonFinite = 0;
  let outside = 0;
  for (let y = roi.y0; y < roi.y1; y++) {
    for (let x = roi.x0; x < roi.x1; x++) {
      const value = image.values[y * image.width + x]!;
      if (!Number.isFinite(value)) { nonFinite++; continue; }
      if (value < edges[0]! || value > edges[edges.length - 1]!) {
        outside++; continue;
      }
      const upper = edges.findIndex((edge, i) => i > 0 && value < edge);
      const bin = upper === -1 ? counts.length - 1 : upper - 1;
      counts[bin] = counts[bin]! + 1;
    }
  }
  return {
    counts, nonFinite, outside,
    selected: (roi.x1 - roi.x0) * (roi.y1 - roi.y0),
    included: counts.reduce((sum, count) => sum + count, 0),
  };
}

import type { ClinicalViewportRoi, ClinicalViewportRoiOptions, ClinicalViewportRoiSession } from "../ports/viewportRenderer";

type Point = readonly [number, number];
interface Binding extends ClinicalViewportRoiOptions {
  element: HTMLElement;
  isCurrent(): boolean;
  canvasToImage(point: Point): Point;
  imageToCanvas(point: Point): Point;
}
export interface RectangularRoiBinding extends ClinicalViewportRoiSession {
  redraw(): void;
  invalidate(): void;
}

export function roiFromPoints(start: Point, end: Point, { width, height }: { width: number; height: number }): ClinicalViewportRoi {
  const x = (value: number) => Math.max(0, Math.min(width, Math.round(value)));
  const y = (value: number) => Math.max(0, Math.min(height, Math.round(value)));
  return { x0: x(Math.min(start[0], end[0])), x1: x(Math.max(start[0], end[0])),
    y0: y(Math.min(start[1], end[1])), y1: y(Math.max(start[1], end[1])) };
}

/** DOM interaction shared by renderers. All geometry stays with the renderer. */
export function bindRectangularRoi(options: Binding): RectangularRoiBinding {
  const { element, image, onChange } = options;
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  const outline = document.createElementNS(svg.namespaceURI, "polygon");
  svg.classList.add("edgepy-viewport-roi");
  svg.setAttribute("aria-hidden", "true");
  Object.assign(svg.style, { position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none", zIndex: "5" });
  outline.setAttribute("fill", "#2be3d21a");
  outline.setAttribute("stroke", "#2be3d2");
  outline.setAttribute("stroke-width", "2");
  svg.append(outline);
  element.append(svg);
  const previous = { cursor: element.style.cursor, touchAction: element.style.touchAction };
  element.style.cursor = "crosshair";
  element.style.touchAction = "none";
  const abort = new AbortController();
  let disposed = false;
  let roi: ClinicalViewportRoi = { x0: 0, x1: 0, y0: 0, y1: 0 };
  let drag: { pointerId: number; start: Point; previous: ClinicalViewportRoi } | undefined;

  function release() {
    const pointerId = drag?.pointerId;
    drag = undefined;
    if (pointerId !== undefined && element.hasPointerCapture(pointerId)) element.releasePointerCapture(pointerId);
  }
  function dispose() {
    if (disposed) return;
    disposed = true;
    abort.abort();
    release();
    observer.disconnect();
    svg.remove();
    Object.assign(element.style, previous);
  }
  function invalidate() {
    if (disposed) return;
    dispose();
    onChange(undefined);
  }
  function current() {
    if (disposed) return false;
    if (!options.isCurrent()) { invalidate(); return false; }
    return true;
  }
  function redraw() {
    if (!current()) return;
    const corners: Point[] = [[roi.x0, roi.y0], [roi.x1, roi.y0], [roi.x1, roi.y1], [roi.x0, roi.y1]];
    outline.setAttribute("points", corners.map((point) => options.imageToCanvas(point).join(",")).join(" "));
    outline.setAttribute("visibility", roi.x0 === roi.x1 || roi.y0 === roi.y1 ? "hidden" : "visible");
  }
  function setRoi(next: ClinicalViewportRoi) {
    if (!current() || !Object.values(next).every(Number.isInteger) || next.x0 < 0 || next.y0 < 0 ||
      next.x1 > image.width || next.y1 > image.height || next.x0 > next.x1 || next.y0 > next.y1) return false;
    roi = { ...next };
    redraw();
    onChange({ image, roi: { ...roi } });
    return true;
  }
  function point(event: PointerEvent): Point {
    const rect = element.getBoundingClientRect();
    return options.canvasToImage([event.clientX - rect.left, event.clientY - rect.top]);
  }
  function move(event: PointerEvent) {
    if (!drag || event.pointerId !== drag.pointerId || !current()) return;
    event.preventDefault();
    event.stopPropagation();
    setRoi(roiFromPoints(drag.start, point(event), image));
  }
  const listenerOptions = { capture: true, signal: abort.signal };
  element.addEventListener("pointerdown", (event) => {
    if (event.button !== 0 || !event.isPrimary || drag || !current()) return;
    const start = point(event);
    if (!start.every(Number.isFinite) || start[0] < 0 || start[1] < 0 || start[0] > image.width || start[1] > image.height) return;
    event.preventDefault();
    event.stopPropagation();
    drag = { pointerId: event.pointerId, start, previous: roi };
    element.setPointerCapture(event.pointerId);
    move(event);
  }, listenerOptions);
  element.addEventListener("pointermove", move, listenerOptions);
  element.addEventListener("pointerup", (event) => {
    if (drag?.pointerId !== event.pointerId) return;
    move(event);
    release();
  }, listenerOptions);
  const cancel = (event: PointerEvent) => {
    if (drag?.pointerId !== event.pointerId) return;
    const last = drag.previous;
    release();
    setRoi(last);
  };
  element.addEventListener("pointercancel", cancel, listenerOptions);
  element.addEventListener("lostpointercapture", cancel, listenerOptions);
  const observer = new ResizeObserver(redraw);
  observer.observe(element);
  redraw();
  return { setRoi, dispose, redraw, invalidate };
}

import { bindRectangularRoi, type ClinicalViewportRoiOptions, type RectangularRoiBinding } from "@pycom-next/react-viewer";
import type { StackViewportLike } from "./cornerstoneViewportLifecycle";

export function beginCornerstoneRoi(element: HTMLElement, viewport: StackViewportLike, options: ClinicalViewportRoiOptions): RectangularRoiBinding | undefined {
  const { image } = options;
  const isCurrent = () => {
    const data = viewport.getImageData?.();
    return !!image.imageId && viewport.getCurrentImageId?.() === image.imageId &&
      viewport.getCurrentImageIdIndex() === image.sliceIndex &&
      data?.dimensions[0] === image.width && data.dimensions[1] === image.height;
  };
  if (!isCurrent() || !viewport.canvasToWorld || !viewport.worldToCanvas) return undefined;
  const events = new AbortController();
  const binding = bindRectangularRoi({
    ...options, element, isCurrent,
    onChange(selection) {
      if (!selection) events.abort();
      options.onChange(selection);
    },
    canvasToImage(point) {
      const index = viewport.getImageData!()!.imageData.worldToIndex(viewport.canvasToWorld!([...point]));
      return [index[0]!, index[1]!];
    },
    imageToCanvas(point) {
      const world = viewport.getImageData!()!.imageData.indexToWorld([point[0], point[1], 0]);
      return viewport.worldToCanvas!(world);
    },
  });
  const dispose = () => { events.abort(); binding.dispose(); };
  const invalidate = () => { events.abort(); binding.invalidate(); };
  for (const name of ["CORNERSTONE_CAMERA_MODIFIED", "CORNERSTONE_IMAGE_RENDERED", "CORNERSTONE_STACK_NEW_IMAGE"]) {
    element.addEventListener(name, () => { if (isCurrent()) binding.redraw(); else invalidate(); }, { signal: events.signal });
  }
  element.addEventListener("CORNERSTONE_PRE_STACK_NEW_IMAGE", invalidate, { signal: events.signal });
  return { ...binding, dispose, invalidate };
}

import type { ClinicalViewportImageData } from "@pycom-next/react-viewer";

// Phantom didático gerado localmente. Não representa um exame de paciente.
export function createExampleImage(): ClinicalViewportImageData {
  const width = 256;
  const height = 256;
  const values = Float32Array.from({ length: width * height }, (_, i) => {
    const x = ((i % width) - 128) / 128;
    const y = (Math.floor(i / width) - 128) / 128;
    const radius = Math.hypot(x / 0.72, y / 0.88);
    if (radius > 1) return 8;
    const texture = 7 * Math.sin(x * 113 + y * 37) * Math.cos(y * 97 - x * 31);
    if (radius > 0.91) return Math.round(218 + texture);
    if (Math.hypot(x / 0.17, (y + 0.03) / 0.27) < 1) return Math.round(38 + texture);
    if (Math.hypot((x - 0.33) / 0.12, (y + 0.18) / 0.16) < 1) return Math.round(168 + texture);
    return Math.round(100 + 28 * Math.cos(x * 7) * Math.cos(y * 5) + texture);
  });
  return { width, height, values, sliceIndex: 0, imageId: "phantom-sintetico-256" };
}