larvitar 1.5.14 → 2.0.2

package/imaging/tools/{segmentation.js → segmentation.ts}

@@ -4,8 +4,8 @@
  */
 
 // external libraries
-import cornerstone from "cornerstone-core";
-import cornerstoneTools from "cornerstone-tools/dist/cornerstoneTools.js";
+import cornerstone, { Viewport } from "cornerstone-core";
+import cornerstoneTools from "cornerstone-tools";
 import { cloneDeep, extend, values, sum } from "lodash";
 const segModule = cornerstoneTools.getModule("segmentation");
 const { getters, setters } = segModule;
@@ -13,17 +13,23 @@ const { getters, setters } = segModule;
 // internal libraries
 import { setToolActive, setToolDisabled } from "./main";
 import { isElement } from "../imageUtils";
-import { larvitar_store } from "../imageStore";
+import store from "../imageStore";
 import { updateStackToolState } from "../imageTools";
 
 // custom code
-import { setLabelmap3DForElement } from "./setLabelMap3D";
-import { each } from "hammerjs";
+import { setLabelmap3DForElement } from "./custom/setLabelMap3D";
+import {
+  BrushProperties,
+  MaskProperties,
+  MaskVisualizations,
+  SegmentationConfig
+} from "./types.d";
+import type { TypedArray } from "../types";
 // override function
 setters.labelmap3DForElement = setLabelmap3DForElement;
 
 // General segmentation cs tools module configuration
-const config = {
+const config: SegmentationConfig = {
   arrayType: 0,
   renderOutline: false,
   renderFill: true,
@@ -44,27 +50,31 @@ const config = {
 // utils to convert from hex to rgb and vice-versa ====
 // ====================================================
 
-function componentToHex(c) {
+function componentToHex(c: number) {
   var hex = c.toString(16);
   return hex.length == 1 ? "0" + hex : hex;
 }
 
-export function rgbToHex(c) {
+export function rgbToHex(c: number[]) {
   let r = componentToHex(c[0]);
   let g = componentToHex(c[1]);
   let b = componentToHex(c[2]);
   return "#" + r + g + b;
 }
 
-export function hexToRgb(hex) {
+export function hexToRgb(hex: string) {
   var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? [
-        parseInt(result[1], 16),
-        parseInt(result[2], 16),
-        parseInt(result[3], 16)
-      ]
-    : null;
+
+  if (!result) {
+    console.error("Error parsing hex color");
+    return [0, 0, 0];
+  }
+
+  return [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+  ];
 }
 
 /**
@@ -72,7 +82,7 @@ export function hexToRgb(hex) {
  * @param {Array} color as [h,s,v] 0-1
  * @returns color as [r,g,b] 0-255
  */
-function HSVtoRGB([h, s, v]) {
+function HSVtoRGB([h, s, v]: [number, number, number]) {
   var r, g, b, i, f, p, q, t;
   i = Math.floor(h * 6);
   f = h * 6 - i;
@@ -98,6 +108,9 @@ function HSVtoRGB([h, s, v]) {
     case 5:
       (r = v), (g = p), (b = q);
       break;
+    default:
+      (r = v), (g = t), (b = p);
+      console.error("HSVtoRGB: Input color must be [h,s,v] 0-1");
   }
   return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
 }
@@ -116,7 +129,7 @@ export function forceRender() {
  * Generate the custom LUT - single volume version
  */
 
-function generateLUT(opacity) {
+function generateLUT(opacity: number) {
   let lut = new Array(segModule.configuration.segmentsPerLabelmap).fill(0);
   lut = lut.map((e, i) => {
     return HSVtoRGB([i / lut.length, 1, 1]).concat(Math.round(opacity * 255));
@@ -130,7 +143,7 @@ function generateLUT(opacity) {
  * @param {String} hex_color - color for LUT in the #RRGGBB form
  * @param {NUmber} opacity - number between 0 and 1
  */
-function generateUniformLUT(hex_color, opacity) {
+function generateUniformLUT(hex_color: string, opacity: number) {
   let lut = new Array(segModule.configuration.segmentsPerLabelmap);
   let rgb_color = hexToRgb(hex_color);
   let rgba_color = rgb_color.concat(Math.round(opacity * 255));
@@ -143,7 +156,7 @@ function generateUniformLUT(hex_color, opacity) {
  * @param {Number} labelId
  * @param {String} color in hex format
  */
-export function setLabelColor(labelId, color) {
+export function setLabelColor(labelId: string, color: string) {
   let volumeId = 0; // TODO MULTIVOLUME
   let rgb = hexToRgb(color);
   let rgba = [...rgb, 128];
@@ -156,7 +169,7 @@ export function setLabelColor(labelId, color) {
  * @param {Number} labelId
  * @returns {String} Color in hex format
  */
-export function getLabelColor(labelId) {
+export function getLabelColor(labelId: string) {
   let volumeId = 0; // TODO MULTIVOLUME
   let rgba = getters.colorForSegmentIndexColorLUT(volumeId, labelId);
   return rgbToHex(rgba);
@@ -166,7 +179,7 @@ export function getLabelColor(labelId) {
  * A function to group all settings to load before masks
  * @param {Object} customConfig - Object containing override values for segmentation module config
  */
-export function initSegmentationModule(customConfig) {
+export function initSegmentationModule(customConfig: SegmentationConfig) {
   // set configuration
   segModule.configuration = cloneDeep(config);
   extend(segModule.configuration, customConfig);
@@ -174,16 +187,21 @@ export function initSegmentationModule(customConfig) {
 
 /**
  * Add segmentation mask to segmentation module
- * @param {Object} maskProps - The mask properties (labelId, color and opacity)
+ * @param {Object} props - The mask properties (labelId, color and opacity)
  * @param {TypedArray} - The mask data array
  * @param {String} elementId - The target html element Id or its DOM HTMLElement
  * @returns {Promise} - Return a promise which will resolve when segmentation mask is added
  */
-export function addSegmentationMask(props, data, elementId) {
-  let promise = new Promise(async resolve => {
+
+export function addSegmentationMask(
+  props: MaskProperties,
+  data: TypedArray,
+  elementId: string | HTMLElement
+) {
+  let promise = new Promise<void>(async resolve => {
     let element = isElement(elementId)
-      ? elementId
-      : document.getElementById(elementId);
+      ? (elementId as HTMLElement)
+      : document.getElementById(elementId as string);
     if (!element) {
       console.error("invalid html element: " + elementId);
       return;
@@ -204,13 +222,9 @@ export function addSegmentationMask(props, data, elementId) {
     setters.colorLUTIndexForLabelmap3D(labelmap3d, props.labelId);
 
     // set current imageIdIndex in tool state
-    let currentImageIdIndex = larvitar_store.get(
-      "viewports",
-      elementId,
-      "sliceId"
-    );
+    let currentImageIdIndex = store.get(["viewports", element.id, "sliceId"]);
     if (currentImageIdIndex !== "error" && currentImageIdIndex >= 0) {
-      updateStackToolState(elementId, currentImageIdIndex);
+      updateStackToolState(element.id, currentImageIdIndex);
     } else {
       console.error("Cannot get currentImageIdIndex");
     }
@@ -226,15 +240,19 @@ export function addSegmentationMask(props, data, elementId) {
  * @param {Number} sliceIndex - the index of the new mask slice
  * @param {ArrayBuffer} pixelData - the pixelData array
  */
-export function loadMaskSlice(elementId, sliceIndex, pixelData) {
+export function loadMaskSlice(
+  elementId: string | HTMLElement,
+  sliceIndex: number,
+  pixelData: TypedArray
+) {
   // optimization: if pixelData contains no labels, return
   if (sum(pixelData) === 0) {
     return;
   }
 
   let element = isElement(elementId)
-    ? elementId
-    : document.getElementById(elementId);
+    ? (elementId as HTMLElement)
+    : document.getElementById(elementId as string);
   if (!element) {
     console.error("invalid html element: " + elementId);
     return;
@@ -258,10 +276,13 @@ export function loadMaskSlice(elementId, sliceIndex, pixelData) {
  * @param {Number} labelId - The labelmap id to activate
  * @param {String} elementId - The target html element Id or its DOM HTMLElement
  */
-export function setActiveLabelmap(labelId, elementId) {
+export function setActiveLabelmap(
+  labelId: number,
+  elementId: string | HTMLElement
+) {
   let element = isElement(elementId)
-    ? elementId
-    : document.getElementById(elementId);
+    ? (elementId as HTMLElement)
+    : document.getElementById(elementId as string);
   if (!element) {
     console.error("invalid html element: " + elementId);
     return;
@@ -274,10 +295,10 @@ export function setActiveLabelmap(labelId, elementId) {
  * @param {String} elementId - The target html element Id or its DOM HTMLElement
  * @returns {Object} The active labelmap object that contains the buffer
  */
-export function getActiveLabelmapBuffer(elementId) {
+export function getActiveLabelmapBuffer(elementId: string | HTMLElement) {
   let element = isElement(elementId)
-    ? elementId
-    : document.getElementById(elementId);
+    ? (elementId as HTMLElement)
+    : document.getElementById(elementId as string);
   if (!element) {
     console.error("invalid html element: " + elementId);
     return;
@@ -290,10 +311,13 @@ export function getActiveLabelmapBuffer(elementId) {
  * @param {Number} segmentIndex - The segment index to activate
  * @param {String} elementId - The target html element Id or its DOM HTMLElement
  */
-export function setActiveSegment(segmentIndex, elementId) {
+export function setActiveSegment(
+  segmentIndex: number,
+  elementId: string | HTMLElement
+) {
   let element = isElement(elementId)
-    ? elementId
-    : document.getElementById(elementId);
+    ? (elementId as HTMLElement)
+    : document.getElementById(elementId as string);
   if (!element) {
     console.error("invalid html element: " + elementId);
     return;
@@ -305,7 +329,7 @@ export function setActiveSegment(segmentIndex, elementId) {
  * Change opacity for active label
  * @param {Number} opacity - The desired opacity value
  */
-export function setActiveLabelOpacity(opacity) {
+export function setActiveLabelOpacity(opacity: number) {
   segModule.configuration.fillAlpha = opacity;
   forceRender();
 }
@@ -314,7 +338,7 @@ export function setActiveLabelOpacity(opacity) {
  * Change opacity for inactive labels
  * @param {Number} opacity - The desired opacity value
  */
-export function setInactiveLabelOpacity(opacity) {
+export function setInactiveLabelOpacity(opacity: number) {
   segModule.configuration.fillAlphaInactive = opacity;
   forceRender();
 }
@@ -324,10 +348,13 @@ export function setInactiveLabelOpacity(opacity) {
  * @param {String} elementId - The target html element Id or its DOM HTMLElement
  * @param {Number} labelId - The id of the mask label
  */
-export function toggleVisibility(elementId, labelId) {
+export function toggleVisibility(
+  elementId: string | HTMLElement,
+  labelId: number
+) {
   let element = isElement(elementId)
-    ? elementId
-    : document.getElementById(elementId);
+    ? (elementId as HTMLElement)
+    : document.getElementById(elementId as string);
   if (!element) {
     console.error("invalid html element: " + elementId);
     return;
@@ -341,7 +368,7 @@ export function toggleVisibility(elementId, labelId) {
  * Toggle between 'contours mode' and 'filled mode'
  * @param {Bool} toggle - Contour mode enabled if true
  */
-export function toggleContourMode(toggle) {
+export function toggleContourMode(toggle: boolean) {
   if (toggle) {
     segModule.configuration.fillAlpha = 0.0;
     segModule.configuration.fillAlphaInactive = 0.0;
@@ -362,7 +389,8 @@ export function toggleContourMode(toggle) {
  * Set mask appearance props
  * @param {Object} maskProps - The mask appearance props (labelId, visualization [0=filled, 1=contour, 2=hidden], opacity (if mode=0), between 0 and 1)
  */
-export function setMaskProps(props) {
+
+export function setMaskProps(props: MaskProperties) {
   // Lut index and segment values are hardcoded because they will depend on design choices:
   // eg single/multiple volumes for segmentations
   let lutIndex = props.labelId;
@@ -378,7 +406,7 @@ export function setMaskProps(props) {
   let newColor = currentColor;
   switch (props.visualization) {
     // full
-    case 0:
+    case MaskVisualizations.FILL:
       segModule.configuration.renderOutline = true;
       getters.isSegmentVisible(htmlelement, segmentValue, labelIndex)
         ? null
@@ -391,7 +419,7 @@ export function setMaskProps(props) {
       setters.colorForSegmentIndexOfColorLUT(lutIndex, segmentValue, newColor);
       break;
     // contours
-    case 1:
+    case MaskVisualizations.CONTOUR:
       segModule.configuration.renderOutline = true;
       getters.isSegmentVisible(htmlelement, segmentValue, labelIndex)
         ? null
@@ -404,7 +432,7 @@ export function setMaskProps(props) {
       setters.colorForSegmentIndexOfColorLUT(lutIndex, segmentValue, newColor);
       break;
     // hidden
-    case 2:
+    case MaskVisualizations.HIDDEN:
       setters.toggleSegmentVisibility(htmlelement, segmentValue, labelIndex);
       break;
   }
@@ -424,11 +452,10 @@ export function clearSegmentationState() {
  * Anyway, the activated tool name is returned
  * @param {Object} options - An object containing configuration values (eg radius, thresholds, etc...)
  */
-export function enableBrushTool(viewports, options) {
-  console.log("enable", options);
+export function enableBrushTool(viewports: string[], options: BrushProperties) {
   setBrushProps(options);
   const brushType = "thresholds" in options ? "ThresholdsBrush" : "Brush";
-  setToolActive(brushType, viewports);
+  setToolActive(brushType, undefined, viewports);
   return brushType;
 }
 
@@ -437,8 +464,8 @@ export function enableBrushTool(viewports, options) {
  * This function disables both brush tools, if found active on `viewports`
  * @param {String} toolToActivate - The name of the tool to activate after removing the brush @optional
  */
-export function disableBrushTool(viewports, toolToActivate) {
-  each(viewports, viewport => {
+export function disableBrushTool(viewports: string[], toolToActivate?: string) {
+  viewports.forEach((viewport: string) => {
     const el = document.getElementById(viewport);
     if (cornerstoneTools.isToolActiveForElement(el, "ThresholdsBrush")) {
       setToolDisabled("ThresholdsBrush", [viewport]);
@@ -457,7 +484,7 @@ export function disableBrushTool(viewports, toolToActivate) {
  * Change the brush props
  * @param {Object} props - The new brush props {radius: number[px], thresholds: array[min,max]}
  */
-export function setBrushProps(props) {
+export function setBrushProps(props: BrushProperties) {
   extend(segModule.configuration, props);
   forceRender();
 }
@@ -466,10 +493,10 @@ export function setBrushProps(props) {
  * Undo last brush operation (stroke)
  * @param {String} elementId - The target html element Id or its DOM HTMLElement
  */
-export function undoLastStroke(elementId) {
+export function undoLastStroke(elementId: string | HTMLElement) {
   let element = isElement(elementId)
-    ? elementId
-    : document.getElementById(elementId);
+    ? (elementId as HTMLElement)
+    : document.getElementById(elementId as string);
   if (!element) {
     console.error("invalid html element: " + elementId);
     return;
@@ -482,10 +509,10 @@ export function undoLastStroke(elementId) {
  * Redo last brush operation (stroke)
  * @param {String} elementId - The target html element Id or its DOM HTMLElement
  */
-export function redoLastStroke(elementId) {
+export function redoLastStroke(elementId: string | HTMLElement) {
   let element = isElement(elementId)
-    ? elementId
-    : document.getElementById(elementId);
+    ? (elementId as HTMLElement)
+    : document.getElementById(elementId as string);
   if (!element) {
     console.error("invalid html element: " + elementId);
     return;
@@ -498,7 +525,7 @@ export function redoLastStroke(elementId) {
  * Delete mask from state
  * @param {Number} labelId - The labelmap id to delete
  */
-export function deleteMask(labelId) {
+export function deleteMask(labelId: number) {
   let masks = values(segModule.state.series)[0].labelmaps3D;
   delete masks[labelId];
   forceRender();

package/imaging/tools/{state.js → state.ts}

@@ -4,18 +4,16 @@
  */
 
 // external libraries
-import cornerstone from "cornerstone-core";
 import cornerstoneTools from "cornerstone-tools";
 import { each } from "lodash";
 
-// internal libraries
-import { state_example } from "./cstools_state_example.js";
+import type { ToolState } from "./types";
 
 /**
  *
  * @param {*} elementId
  */
-const saveToolState = function (elementId) {
+const saveToolState = function (elementId: string) {
   const elementToolStateManager = cornerstoneTools.getElementToolStateManager(
     document.getElementById(elementId)
   );
@@ -30,7 +28,7 @@ const saveToolState = function (elementId) {
  * @param {*} elementId
  * @param {*} allToolState
  */
-const restoreToolState = function (elementId, allToolState) {
+const restoreToolState = function (elementId: string, allToolState: ToolState) {
   const elementToolStateManager = cornerstoneTools.getElementToolStateManager(
     document.getElementById(elementId)
   );
@@ -46,7 +44,7 @@ const restoreToolState = function (elementId, allToolState) {
 
 // EXAMPLE OF CORRECT USE OF TOOL STATE MANAGER
 
-export const example = function () {
+/*
   // Declare state manager
   const stateManager = cornerstoneTools.newImageIdSpecificToolStateManager();
 
@@ -62,11 +60,8 @@ export const example = function () {
 
   // Setup with some initial data
   const toolType = "EllipticalRoi";
-  // stateManager.restoreImageIdToolState(imageId, {
-  //   [toolType]: { data: ["initialData"] }
-  // });
   stateManager.restoreImageIdToolState(imageId, {
-    [toolType]: { data: state_example[imageId] }
+    [toolType]: { data: state_to_load[imageId] }
   });
 
   // Add more data
@@ -74,6 +69,6 @@ export const example = function () {
 
   // Check the results
   const allToolState = stateManager.saveToolState();
-};
-
+}
+*/
 export { saveToolState, restoreToolState };

package/imaging/tools/types.d.ts

@@ -0,0 +1,243 @@
+type ToolOptions = {
+  mouseButtonMask?: number | number[];
+  supportedInteractionTypes?: string[];
+  loop?: boolean;
+  allowSkipping?: boolean;
+  invert?: boolean;
+} & { [key: string]: unknown };
+
+export type ToolConfig = {
+  name: string;
+  viewports: string | string[];
+  configuration: Object;
+  options: ToolOptions;
+  class: string;
+  sync?: string;
+  cleanable?: boolean;
+  defaultActive?: boolean;
+  shortcut?: string;
+  type?: "utils" | "annotation" | "segmentation" | "overlay";
+  description?: string;
+};
+
+export type ToolStyle = {
+  width: number;
+  color: string; // "#00FF00"
+  activeColor: string; // "#00FF00"
+  fillColor: string; // "#00FF00"
+  fontFamily: string; // "Arial"
+  fontSize: number;
+  backgroundColor: string; // "rgba(1,1,1,0.7)"
+};
+
+export type ToolSettings = {
+  mouseEnabled: boolean;
+  touchEnabled: boolean;
+  showSVGCursors: boolean;
+  globalToolSyncEnabled: boolean;
+  autoResizeViewports: boolean;
+  lineDash: [number, number];
+};
+
+export type ToolMouseKeys = {
+  debug: boolean;
+  mouse_button_left: {
+    shift: string;
+    ctrl: string;
+    default: string;
+  };
+  mouse_button_right: {
+    shift: string;
+    ctrl: string;
+    default: string;
+  };
+  keyboard_shortcuts: {
+    // alt key + letter
+    // key in the form "KEY_A"
+    [key: string]: string;
+  };
+};
+
+type HanldePosition = {
+  active: boolean;
+  allowedOutsideImage?: boolean;
+  drawnIndependently?: boolean;
+  highlight: boolean;
+  index?: number;
+  locked?: boolean;
+  moving?: boolean;
+  x: number;
+  y: number;
+};
+
+type HandleTextBox = {
+  active: boolean;
+  allowedOutsideImage: boolean;
+  boundingBox: { height: number; left: number; top: number; width: number };
+  drawnIndependently: boolean;
+  hasBoundingBox: boolean;
+  hasMoved: boolean;
+  highlight?: boolean;
+  index?: number;
+  movesIndependently: boolean;
+  x: number;
+  y: number;
+};
+
+type BaseToolStateData = {
+  active: boolean;
+  color: string;
+  invalidated: boolean;
+  uuid: string;
+  visible: boolean;
+};
+
+type AngleStateData = BaseToolStateData & {
+  handles: {
+    end: HanldePosition;
+    middle: HanldePosition;
+    start: HanldePosition;
+    textBox: HandleTextBox;
+  };
+  rAngle: number;
+};
+
+type ArrowAnnotateStateData = BaseToolStateData & {
+  handles: {
+    end: HanldePosition;
+    start: HanldePosition;
+    textBox: HandleTextBox;
+  };
+  text: string;
+};
+
+type BidirectionalStateData = BaseToolStateData & {
+  handles: {
+    end: HanldePosition;
+    perpendicularEnd: HanldePosition;
+    perpendicularStart: HanldePosition;
+    start: HanldePosition;
+    textBox: HandleTextBox;
+  };
+  isCreating: boolean;
+  longestDiameter: number;
+  shortestDiameter: number;
+  toolName: "Bidirectional";
+  toolType: "Bidirectional";
+};
+
+type EllipticalRoiStateData = BaseToolStateData & {
+  cachedStats: {
+    area: number;
+    count: number;
+    max: number;
+    mean: number;
+    meanStdDevSUV?: number;
+    min: number;
+    stdDev: snumber;
+    variance: number;
+  };
+  handles: {
+    end: HanldePosition;
+    initialRotation: number;
+    start: HanldePosition;
+    textBox: HandleTextBox;
+  };
+  unit: string;
+};
+
+type FreehandRoiStateData = ToolStateData & {
+  area: number;
+  canComplete: boolean;
+  handles: {
+    points: FreehandHandleData[];
+    textBox: any;
+    invalidHandlePlacement: boolean;
+  };
+  highlight: boolean;
+  meanStdDev: { count: number; mean: number; variance: number; stdDev: number };
+  meanStdDevSUV: undefined;
+  polyBoundingBox: { left: number; top: number; width: number; height: number };
+  unit: string;
+};
+
+type LengthStateData = BaseToolStateData & {
+  handles: {
+    end: HanldePosition;
+    start: HanldePosition;
+    textBox: HandleTextBox;
+  };
+  length: number;
+  unit: string;
+};
+
+type ProbeStateData = BaseToolStateData;
+
+type RectangleRoiStateData = BaseToolStateData & {
+  cachedStats: {
+    area: number;
+    count: number;
+    max: number;
+    mean: number;
+    meanStdDevSUV?: number;
+    min: number;
+    perimeter: number;
+    stdDev: number;
+    variance: number;
+  };
+  handles: {
+    end: HanldePosition;
+    initialRotation: number;
+    start: HanldePosition;
+    textBox: HandleTextBox;
+  };
+  unit: string;
+};
+
+export type ToolState = {
+  [imageId: string]: {
+    Angle: AngleStateData;
+    ArrowAnnotate: ArrowAnnotateStateData;
+    Bidirectional: BidirectionalStateData;
+    EllipticalRoi: EllipticalRoiStateData;
+    FreehandRoi: FreehandRoiStateData;
+    Length: LengthStateData;
+    Probe: ProbeStateData;
+    RectangleRoi: RectangleRoiStateData;
+  };
+};
+
+export type SegmentationConfig = {
+  arrayType: number;
+  renderOutline: boolean;
+  renderFill: boolean;
+  shouldRenderInactiveLabelmaps: boolean;
+  radius: number;
+  minRadius: number;
+  maxRadius: number;
+  segmentsPerLabelmap: number;
+  fillAlpha: number;
+  fillAlphaInactive: number;
+  outlineAlpha: number;
+  outlineAlphaInactive: number;
+  outlineWidth: number;
+  storeHistory: boolean;
+};
+
+export const enum MaskVisualizations {
+  FILL,
+  CONTOUR,
+  HIDDEN
+}
+
+export type MaskProperties = {
+  color: string;
+  labelId: number;
+  opacity: number;
+  visualization: MaskVisualizations;
+};
+
+export type BrushProperties = {
+  radius: number; // px
+  thresholds: [number, number]; // [min, max] in px
+};