feat: Add new annotate tool using new dialog service (#1211)

* Testing dialog

* Refactor modal and add dialog component to simple dialog

* Use existent dialog

* Expect event from getText callback (annotation)

* Bump cornerstone-tools version

* Use simple dialog

* bump cornersotne version

* CR Update: Update dialgo method names and default values

* CR Update: Bump overlay and show only if theres at least one overlay prop set to true

* CR Update: Use percentage over view height in draggable area

* Fix broken test vtk checks WWWC tool

* Comment test (non-deterministic)

platform/core/package.json

@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.0.9",
+    "cornerstone-tools": "^4.8.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dicom-parser": "^1.8.3"
   },

platform/core/src/services/UIDialogService/index.js

@@ -1,11 +1,5 @@
 /**
- * A UI Element
- *
- * @typedef {ReactElement|HTMLElement} DialogContent
- */
-
-/**
- * A UI Position
+ * A UI Element Position
  *
  * @typedef {Object} ElementPosition
  * @property {number} top -
@@ -18,16 +12,16 @@
  * UI Dialog
  *
  * @typedef {Object} DialogProps
- * @property {string} id -
- * @property {DialogContent} content -
- * @property {boolean} isDraggable -
- * @property {ElementPosition} defaultPosition -
- * @property {ElementPosition} position -
- * @property {Function} onSubmit -
- * @property {Function} onClose -
- * @property {Function} onStart -
- * @property {Function} onStop -
- * @property {Function} onDrag -
+ * @property {string} id The dialog id.
+ * @property {ReactElement|HTMLElement} content The dialog content.
+ * @property {Object} contentProps The dialog content props.
+ * @property {boolean} [isDraggable=true] Controls if dialog content is draggable or not.
+ *  @property {boolean} [showOverlay=false] Controls dialog overlay.
+ * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
+ * @property {ElementPosition} position If this property is present, the item becomes 'controlled' and is not responsive to user input.
+ * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
+ * @property {Function} onStop Called when dragging stops.
+ * @property {Function} onDrag Called while dragging.
  */
 
 const uiDialogServicePublicAPI = {
@@ -51,29 +45,29 @@ function createUIDialogService() {
 /**
  * Show a new UI dialog;
  *
- * @param {DialogProps} props { id, content, onSubmit, onClose, onStart, onDrag, onStop, isDraggable, defaultPosition, position }
+ * @param {DialogProps} props { id, content, contentProps, onStart, onDrag, onStop, isDraggable, showOverlay, defaultPosition, position }
  */
 function create({
   id,
   content,
-  onSubmit,
-  onClose,
+  contentProps,
   onStart,
   onDrag,
   onStop,
-  isDraggable,
+  isDraggable = true,
+  showOverlay = false,
   defaultPosition,
   position,
 }) {
   return uiDialogServiceImplementation._create({
     id,
     content,
-    onSubmit,
-    onClose,
+    contentProps,
     onStart,
     onDrag,
     onStop,
     isDraggable,
+    showOverlay,
     defaultPosition,
     position,
   });

platform/core/src/services/UIModalService/index.js

@@ -1,18 +1,14 @@
-/**
- * A UI Element
- *
- * @typedef {ReactElement|HTMLElement} Modal
- */
-
 /**
  * UI Modal
  *
  * @typedef {Object} ModalProps
- * @property {boolean} [shouldCloseOnEsc=false] -
- * @property {boolean} [isOpen=true] -
- * @property {boolean} [closeButton=true] -
- * @property {string} [title=null] - 'Modal Title'
- * @property {string} [customClassName=null] - '.ModalClass'
+ * @property {ReactElement|HTMLElement} [content=null] Modal content.
+ * @property {Object} [contentProps=null] Modal content props.
+ * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
+ * @property {boolean} [closeButton=true] Should the modal body render the close button.
+ * @property {string} [title=null] Should the modal render the title independently of the body content.
+ * @property {string} [customClassName=null] The custom class to style the modal.
  */
 
 const uiModalServicePublicAPI = {
@@ -34,20 +30,26 @@ function createUIModalService() {
 /**
  * Show a new UI modal;
  *
- * @param {Modal} component React component
- * @param {ModalProps} props { shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
+ * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
  */
-function show(
-  component,
-  props = {
-    shouldCloseOnEsc: false,
-    isOpen: true,
-    closeButton: true,
-    title: null,
-    customClassName: null,
-  }
-) {
-  return uiModalServiceImplementation._show(component, props);
+function show({
+  content = null,
+  contentProps = null,
+  shouldCloseOnEsc = false,
+  isOpen = true,
+  closeButton = true,
+  title = null,
+  customClassName = null,
+}) {
+  return uiModalServiceImplementation._show({
+    content,
+    contentProps,
+    shouldCloseOnEsc,
+    isOpen,
+    closeButton,
+    title,
+    customClassName,
+  });
 }
 
 /**