larvitar 1.5.14 → 2.0.2

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

@@ -20,20 +20,32 @@
  *      cleanable : if true, this tool will be removed when calling "no tools",
  *      defaultActive : if true, this tool will be activated when calling "addDefaultTools",
  *      shortcut : keyboard shortcut [not implemented],
- *      type : tool category inside Larvitar (one of: "utils", "annotation", "segmentation")
+ *      type : tool category inside Larvitar (one of: "utils", "annotation", "segmentation", "overlay")
  * }
  *
  */
 
 import { filter, isArray } from "lodash";
 import ThresholdsBrushTool from "./custom/thresholdsBrushTool";
-import Slice4DScrollMouseWheelTool from "./custom/4dSliceScrollTool";
+// import Slice4DScrollMouseWheelTool from "./custom/4dSliceScrollTool";
 import PolylineScissorsTool from "./custom/polylineScissorsTool";
+import RectangleRoiOverlayTool from "./custom/rectangleRoiOverlayTool";
+import EllipticalRoiOverlayTool from "./custom/ellipticalRoiOverlayTool";
+import BorderMagnifyTool from "./custom/BorderMagnifyTool";
+
+import type {
+  ToolConfig,
+  ToolMouseKeys,
+  ToolSettings,
+  ToolStyle
+} from "./types";
 
 /**
  * These tools are added with `addDefaultTools()`
  */
-const DEFAULT_TOOLS = {
+const DEFAULT_TOOLS: {
+  [key: string]: ToolConfig;
+} = {
   ScaleOverlay: {
     name: "ScaleOverlay",
     viewports: "all",
@@ -47,7 +59,6 @@ const DEFAULT_TOOLS = {
     cleanable: false,
     defaultActive: false,
     class: "ScaleOverlayTool",
-    sync: null,
     description: "Add scale overlay",
     shortcut: "ctrl-m",
     type: "overlay"
@@ -62,7 +73,6 @@ const DEFAULT_TOOLS = {
     cleanable: false,
     defaultActive: false,
     class: "OrientationMarkersTool",
-    sync: null,
     description: "Add orientation markers",
     shortcut: "ctrl-m",
     type: "overlay"
@@ -78,7 +88,7 @@ const DEFAULT_TOOLS = {
     cleanable: false,
     defaultActive: true,
     class: "WwwcTool",
-    sync: "wwwcSynchronizer",
+    // sync: "wwwcSynchronizer",
     description: "Change image contrast",
     shortcut: "ctrl-m",
     type: "utils"
@@ -94,38 +104,53 @@ const DEFAULT_TOOLS = {
     cleanable: false,
     defaultActive: false,
     class: "WwwcRegionTool",
-    sync: "wwwcSynchronizer",
+    // sync: "wwwcSynchronizer",
     description: "Change image contrast based on selected region",
     shortcut: "ctrl-m",
     type: "utils"
   },
-  StackScrollMouseWheel: {
-    name: "StackScrollMouseWheel",
+  StackScroll: {
+    name: "StackScroll",
     viewports: "all",
-    configuration: {},
-    options: {
+    configuration: {
       loop: false, // default false
-      allowSkipping: false, // default true
-      invert: false
+      allowSkipping: true // default true
+    },
+    options: {
+      mouseButtonMask: 1,
+      deltaY: 0 // default 0
     },
     cleanable: false,
     defaultActive: false,
-    class: "StackScrollMouseWheelTool"
+    class: "StackScrollTool"
   },
-  Slice4DScrollMouseWheel: {
-    name: "Slice4DScrollMouseWheel",
+  StackScrollMouseWheel: {
+    name: "StackScrollMouseWheel",
     viewports: "all",
     configuration: {
       loop: false, // default false
-      allowSkipping: false, // default true
-      invert: false,
-      framesNumber: 1
+      allowSkipping: true, // default true
+      invert: false
     },
     options: {},
     cleanable: false,
     defaultActive: true,
-    class: "Slice4DScrollMouseWheelTool"
+    class: "StackScrollMouseWheelTool"
   },
+  // Slice4DScrollMouseWheel: {
+  //   name: "Slice4DScrollMouseWheel",
+  //   viewports: "all",
+  //   configuration: {
+  //     loop: false, // default false
+  //     allowSkipping: false, // default true
+  //     invert: false,
+  //     framesNumber: 1
+  //   },
+  //   options: {},
+  //   cleanable: false,
+  //   defaultActive: true,
+  //   class: "Slice4DScrollMouseWheelTool"
+  // },
   Pan: {
     name: "Pan",
     viewports: "all",
@@ -161,8 +186,8 @@ const DEFAULT_TOOLS = {
     shortcut: "ctrl-z",
     type: "utils"
   },
-  Magnify: {
-    name: "Magnify",
+  BorderMagnify: {
+    name: "BorderMagnify",
     viewports: "all",
     configuration: {},
     options: {
@@ -170,7 +195,7 @@ const DEFAULT_TOOLS = {
       supportedInteractionTypes: ["Mouse", "Touch"]
     },
     cleanable: false,
-    class: "MagnifyTool",
+    class: "BorderMagnifyTool",
     defaultActive: false,
     description: "Magnify image at mouse position",
     shortcut: "ctrl-m",
@@ -246,6 +271,7 @@ const DEFAULT_TOOLS = {
   RectangleRoi: {
     name: "RectangleRoi",
     viewports: "all",
+    configuration: {},
     options: { mouseButtonMask: 1 },
     cleanable: true,
     defaultActive: false,
@@ -254,6 +280,29 @@ const DEFAULT_TOOLS = {
     shortcut: "ctrl-a",
     type: "annotation"
   },
+  EllipticalRoiOverlay: {
+    name: "EllipticalRoiOverlay",
+    viewports: "all",
+    configuration: {},
+    options: { mouseButtonMask: 1 },
+    cleanable: true,
+    class: "EllipticalRoiOverlayTool",
+    description: "Draw an ellipse",
+    shortcut: "ctrl-f",
+    type: "annotation"
+  },
+  RectangleRoiOverlay: {
+    name: "RectangleRoiOverlay",
+    viewports: "all",
+    configuration: {},
+    options: { mouseButtonMask: 1 },
+    cleanable: true,
+    defaultActive: false,
+    class: "RectangleRoiOverlayTool",
+    description: "Draw a rectangle",
+    shortcut: "ctrl-a",
+    type: "annotation"
+  },
   FreehandRoi: {
     name: "FreehandRoi",
     viewports: "all",
@@ -268,6 +317,7 @@ const DEFAULT_TOOLS = {
   Probe: {
     name: "Probe",
     viewports: "all",
+    configuration: {},
     options: { mouseButtonMask: 1 },
     cleanable: true,
     class: "ProbeTool"
@@ -411,10 +461,15 @@ const DEFAULT_TOOLS = {
 /**
  * D/Vision Lab custom tools
  */
-const dvTools = {
+const dvTools: {
+  [key: string]: any; // TODO-ts tools class type @mronzoni
+} = {
   ThresholdsBrushTool: ThresholdsBrushTool,
   PolylineScissorsTool: PolylineScissorsTool,
-  Slice4DScrollMouseWheelTool: Slice4DScrollMouseWheelTool
+  // Slice4DScrollMouseWheelTool: Slice4DScrollMouseWheelTool,
+  RectangleRoiOverlayTool: RectangleRoiOverlayTool,
+  EllipticalRoiOverlayTool: EllipticalRoiOverlayTool,
+  BorderMagnifyTool: BorderMagnifyTool
 };
 
 /**
@@ -424,7 +479,7 @@ const dvTools = {
  * Helvetica Neue Light, Helvetica Neue, Helvetica,
  * Arial, Lucida Grande, sans-serif;
  */
-const DEFAULT_STYLE = {
+const DEFAULT_STYLE: ToolStyle = {
   width: 1,
   color: "#02FAE5",
   activeColor: "#00FF00",
@@ -437,7 +492,7 @@ const DEFAULT_STYLE = {
 /**
  * Tools default settings
  */
-const DEFAULT_SETTINGS = {
+const DEFAULT_SETTINGS: ToolSettings = {
   mouseEnabled: true,
   touchEnabled: true,
   showSVGCursors: true,
@@ -449,7 +504,7 @@ const DEFAULT_SETTINGS = {
 /**
  * Shortcut and mouse bindings defaults
  */
-const DEFAULT_MOUSE_KEYS = {
+const DEFAULT_MOUSE_KEYS: ToolMouseKeys = {
   debug: true, // log changes
   mouse_button_left: {
     shift: "Zoom",
@@ -473,7 +528,7 @@ const DEFAULT_MOUSE_KEYS = {
  * Get available tools by type (useful to populate menus)
  * @param {String} type
  */
-const getDefaultToolsByType = function (type) {
+const getDefaultToolsByType = function (type: NonNullable<ToolConfig["type"]>) {
   return filter(DEFAULT_TOOLS, ["type", type]);
 };
 
@@ -482,14 +537,19 @@ const getDefaultToolsByType = function (type) {
  * @param {Array} newProps - An array of objects as in the DEFAULT_TOOLS list, but with a subset of props
  * NOTE: prop "name" is mandatory
  */
-const setDefaultToolsProps = function (newProps) {
+const setDefaultToolsProps = function (newProps: Partial<ToolConfig>[]) {
   if (isArray(newProps)) {
     newProps.forEach(props => {
+      if (!props.name) {
+        console.error("newProps must have a name property");
+        return;
+      }
+
       let targetTool = DEFAULT_TOOLS[props.name];
       if (targetTool) {
         DEFAULT_TOOLS[props.name] = Object.assign(targetTool, props);
       } else {
-        console.error(`${newProps.name} does not exist`);
+        console.error(`${props.name} does not exist`);
       }
     });
   } else {
@@ -497,6 +557,31 @@ const setDefaultToolsProps = function (newProps) {
   }
 };
 
+/**
+ * Register a custom tool
+ * @param {String} toolName - The name of the tool
+ * @param {Object} toolClass - The tool class
+ * NOTE: toolName must be unique
+ * NOTE: toolClass must be a valid cornerstone tool
+ */
+
+const registerExternalTool = function (toolName: string, toolClass: any) {
+  if (dvTools[toolName] || DEFAULT_TOOLS[toolName]) {
+    console.error(`${toolName} already exists`);
+    return;
+  }
+
+  dvTools[toolClass.name] = toolClass;
+  DEFAULT_TOOLS[toolName] = {
+    name: toolName,
+    class: toolClass.name,
+    viewports: "all",
+    configuration: {},
+    options: { mouseButtonMask: 1 },
+    defaultActive: false
+  };
+};
+
 export {
   DEFAULT_TOOLS,
   DEFAULT_STYLE,
@@ -504,5 +589,6 @@ export {
   DEFAULT_MOUSE_KEYS,
   dvTools,
   getDefaultToolsByType,
-  setDefaultToolsProps
-};
+  setDefaultToolsProps,
+  registerExternalTool
+};

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

@@ -7,14 +7,15 @@
 import { throttle } from "lodash";
 import * as keyCodes from "keycode-js";
 import cornerstone from "cornerstone-core";
-import cornerstoneTools from "cornerstone-tools/dist/cornerstoneTools.js";
+import cornerstoneTools from "cornerstone-tools";
 
 // internal libraries
 import { DEFAULT_MOUSE_KEYS } from "./default";
 import { setToolActive } from "./main";
 import { isElement } from "../imageUtils";
-import { larvitar_store } from "../imageStore";
+import store, { set as setStore } from "../imageStore";
 import { updateViewportData } from "../imageRendering";
+import type { ToolMouseKeys } from "./types";
 
 /**
  * TOOLS INTERACTIONS TODOS:
@@ -26,8 +27,8 @@ import { updateViewportData } from "../imageRendering";
 /**
  * Global event callbacks
  */
-let onKeyDownFn = null;
-let onKeyUpFn = null;
+let onKeyDownFn: ((evt: KeyboardEvent) => void) | null = null;
+let onKeyUpFn: ((evt: KeyboardEvent) => void) | null = null;
 
 /**
  * Setup mouse handler modifiers and keyboard shortcuts:
@@ -42,7 +43,7 @@ let onKeyUpFn = null;
  * @param {Object} config - see tools/default
  */
 
-export function addMouseKeyHandlers(config) {
+export function addMouseKeyHandlers(config: ToolMouseKeys) {
   if (!config) {
     config = DEFAULT_MOUSE_KEYS;
   }
@@ -64,30 +65,42 @@ export function addMouseKeyHandlers(config) {
   let allViewports = cornerstone.getEnabledElements().map(enel => enel.element);
 
   // Define behaviour on key down: activate registered tool
-  function onKeyDown(evt) {
+  function onKeyDown(evt: KeyboardEvent) {
     // keyboard shortcuts (activate on left mouse button)
     let codes = config.keyboard_shortcuts
-      ? Object.keys(config.keyboard_shortcuts).map(key => keyCodes[key])
+      ? Object.keys(config.keyboard_shortcuts).map(
+          // @ts-ignore
+          key => keyCodes[key]
+        )
       : [];
 
     if (codes.includes(evt.keyCode) && evt.altKey) {
       evt.preventDefault(); // avoid browser menu selections
 
       let key = Object.keys(config.keyboard_shortcuts)
-        .filter(key => keyCodes[key] == evt.keyCode)
+        // @ts-ignore
+        .filter(key => keyCodes[key] == evt.keyCode) // TODO keyCode is deprecated
         .pop();
-      if (config.debug) console.log("active", config.keyboard_shortcuts[key]);
+
+      if (!key) {
+        console.warn("Key not found in config.keyboard_shortcuts");
+        return;
+      }
+
+      let toolName = config.keyboard_shortcuts[key];
+
+      if (config.debug) console.log("active", toolName);
+
       const viewports = allViewports.filter(viewport =>
-        cornerstoneTools.getToolForElement(
-          viewport,
-          config.keyboard_shortcuts[key]
-        )
+        cornerstoneTools.getToolForElement(viewport, toolName)
       );
+
       setToolActive(
-        config.keyboard_shortcuts[key],
+        toolName,
         { mouseButtonMask: 1 },
         viewports.map(v => v.id)
       );
+
       document.addEventListener("keydown", onKeyDown, { once: true });
     }
     // right drag + shift
@@ -140,7 +153,7 @@ export function addMouseKeyHandlers(config) {
   }
 
   // Define behaviour on key up: restore original tool
-  function onKeyUp(e) {
+  function onKeyUp(e: KeyboardEvent) {
     if (config.debug)
       console.log("active default", config.mouse_button_right.default);
     const viewports = allViewports.filter(viewport =>
@@ -197,6 +210,7 @@ export function addMouseKeyHandlers(config) {
  *
  */
 export function removeMouseKeyHandlers() {
+  if (!onKeyDownFn) return;
   document.removeEventListener("keydown", onKeyDownFn);
   onKeyDownFn = null;
   onKeyUpFn = null;
@@ -206,13 +220,16 @@ export function removeMouseKeyHandlers() {
  * Add event handlers to mouse move
  * @instance
  * @function toggleMouseHandlers
- * @param {String} elementId - The html div id used for rendering or its DOM HTMLElement
+ * @param {String | HTMLElement} elementId - The html div id used for rendering or its DOM HTMLElement
  * @param {Boolean} disable - If true disable handlers, default is false
  */
-export const toggleMouseToolsListeners = function (elementId, disable) {
+export const toggleMouseToolsListeners = function (
+  elementId: string | HTMLElement,
+  disable: boolean
+) {
   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;
@@ -222,14 +239,16 @@ export const toggleMouseToolsListeners = function (elementId, disable) {
   let mouseMoveHandler = throttle(function (evt) {
     let activeTool =
       evt.detail.buttons == 1
-        ? larvitar_store.get("leftActiveTool")
-        : larvitar_store.get("rightActiveTool");
+        ? store.get("leftActiveTool")
+        : store.get("rightActiveTool");
     updateViewportData(evt.srcElement.id, evt.detail.viewport, activeTool);
   }, 250);
 
   // mouse wheel handler
-  function mouseWheelHandler(evt) {
-    larvitar_store.set("sliceId", [evt.target.id, evt.detail.newImageIdIndex]);
+  function mouseWheelHandler(evt: any) {
+    // TODO-ts fix type (should be a cornerstoneTools event type)
+    // @mronzoni does cornerstoneTools have a type for this event?
+    setStore(["sliceId", evt.target.id, evt.detail.newImageIdIndex]);
     updateViewportData(evt.srcElement.id, evt.detail, "mouseWheel");
   }
 

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

@@ -10,29 +10,31 @@ import { each, map, assign, invert } from "lodash";
 import { unparse } from "papaparse";
 
 // internal libraries
-import { setToolEnabled } from "../imageTools";
+import { setToolEnabled } from "./main";
+import type { ToolState } from "./types";
+import { fileManager } from "../loaders/fileLoader";
 
-// DEV
-// import { saved_state_2 } from "./cstools_state_example.js";
-// import { devState } from "./devState.js";
+declare global {
+  interface Document {
+    documentMode?: any;
+  }
+  interface Navigator {
+    msSaveBlob?: (blob: any, defaultName?: string) => boolean;
+  }
+}
 
 /**
  * Load annotation from json object
  * @param {Object} jsonData - The previously saved tools state
  */
-export const loadAnnotations = function (jsonData) {
-  // DEV
-  // if (!jsonData) {
-  //   jsonData = saved_state_2;
-  // }
-
+export const loadAnnotations = function (jsonData: ToolState) {
   // restore saved tool state
   cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
     jsonData
   );
 
   // set all found tools to passive
-  let toolsInState = new Set();
+  let toolsInState: Set<string> = new Set();
   for (let imageId in jsonData) {
     for (let toolName in jsonData[imageId]) {
       toolsInState.add(toolName);
@@ -40,6 +42,7 @@ export const loadAnnotations = function (jsonData) {
   }
 
   toolsInState.forEach(toolName => {
+    // TODO-ts fix 'null' this after setToolEnabled is typed @mronzoni
     setToolEnabled(toolName);
   });
 
@@ -50,7 +53,12 @@ export const loadAnnotations = function (jsonData) {
 
   // FIXME error if called when image is not loaded
   for (let elementId of enabledElementIds) {
-    cornerstone.updateImage(document.getElementById(elementId));
+    let element = document.getElementById(elementId);
+    if (!element) {
+      console.warn(`Element ${elementId} not found`);
+      continue;
+    }
+    cornerstone.updateImage(element);
   }
 };
 
@@ -59,13 +67,16 @@ export const loadAnnotations = function (jsonData) {
  * @param {bool} download - True to download json
  * @param {string} filename - The json file name, @default state.json
  */
-export const saveAnnotations = function (toDownload, filename = "state.json") {
+export const saveAnnotations = function (
+  download: boolean,
+  filename = "state.json"
+) {
   let currentToolState =
     cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
-  if (toDownload) {
+  if (download) {
     // Convert JSON Array to string.
     var json_string = JSON.stringify(currentToolState);
-    download(json_string, filename);
+    downloadFile(json_string, filename);
   }
 
   return currentToolState;
@@ -76,14 +87,14 @@ export const saveAnnotations = function (toDownload, filename = "state.json") {
  * containing only useful informations for user
  */
 export const exportAnnotations = function (
-  fileManager,
+  manager: typeof fileManager,
   filename = "annotations.csv"
 ) {
   let currentToolState =
     cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
-  let csvdata = generateCSV(fileManager, currentToolState);
-  let csvstring = unparse(csvdata);
-  download(csvstring, filename);
+  let { fieldsArr: fields, data } = generateCSV(manager, currentToolState);
+  let csvstring = unparse({ fields, data });
+  downloadFile(csvstring, filename);
 };
 
 /**
@@ -91,13 +102,12 @@ export const exportAnnotations = function (
  * @param {*} stringContent
  * @param {*} filename
  */
-function download(stringContent, filename) {
+function downloadFile(stringContent: string, filename: string) {
   // Convert string to BLOB.
-  stringContent = [stringContent];
-  var blob = new Blob(stringContent, { type: "text/plain;charset=utf-8" });
+  var blob = new Blob([stringContent], { type: "text/plain;charset=utf-8" });
   //Check the Browser.
   var isIE = false || !!document.documentMode;
-  if (isIE) {
+  if (isIE && window.navigator.msSaveBlob) {
     window.navigator.msSaveBlob(blob, filename);
   } else {
     var url = window.URL || window.webkitURL;
@@ -115,14 +125,17 @@ function download(stringContent, filename) {
  *
  * @param {*} allToolState
  */
-export function generateCSV(fileManager, allToolState) {
-  let fields = new Set();
+export function generateCSV(
+  manager: typeof fileManager,
+  allToolState: ToolState
+) {
+  let fields: Set<string> = new Set();
   fields.add("imagePath");
   fields.add("toolName");
-  let data = [];
+  let data: Object[] = [];
   each(allToolState, (imageToolState, imageId) => {
     // convert imageId to imagePath
-    let imagePath = invert(fileManager)[imageId];
+    let imagePath = invert(manager)[imageId];
     each(imageToolState, (toolState, toolName) => {
       // extract useful information from tool state
       let extractedData = extractToolInfo(toolName, toolState.data);
@@ -134,10 +147,10 @@ export function generateCSV(fileManager, allToolState) {
     });
   });
 
-  fields = Array.from(fields);
+  let fieldsArr: string[] = Array.from(fields);
 
   return {
-    fields,
+    fieldsArr,
     data
   };
 }
@@ -146,8 +159,11 @@ export function generateCSV(fileManager, allToolState) {
  *
  * @param {*} toolData
  */
-function extractToolInfo(toolName, toolData) {
-  let dataArray = [];
+function extractToolInfo(
+  toolName: string,
+  toolData: ToolState["imageId"][keyof ToolState["imageId"]]
+) {
+  let dataArray: Object[] = [];
   switch (toolName) {
     case "RectangleRoi":
     case "EllipticalRoi":