Fix double-click to enlarge viewport bugs. Add annotation dialog box to OHIF Viewer

Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.html

@@ -0,0 +1,33 @@
+<template name="annotationDialogs">
+    <dialog id="annotationDialog"
+         class="annotationDialog noselect">
+        <h5>Enter your annotation</h5>
+        <div class="annotationTextInputOptions">
+            <label for="annotationTextInput">New label</label>
+            <input name="annotationTextInput"
+                   class="annotationTextInput"
+                   type="text"
+                   tabindex="-1"
+                   autocomplete="off"/>
+        </div>
+        <a class="annotationDialogConfirm btn btn-sm btn-primary">OK</a>
+    </dialog>
+
+    <dialog id="relabelAnnotationDialog"
+         class="annotationDialog noselect"
+         oncontextmenu="return false">
+        <h5>Edit your annotation</h5>
+        <div class="annotationTextInputOptions">
+            <label for="annotationTextInput">New label</label>
+            <input name="annotationTextInput"
+                   class="annotationTextInput"
+                   type="text"
+                   tabindex="-1"
+                   autocomplete="off"/>
+        </div>
+        <div>
+            <a class="relabelRemove btn btn-sm btn-secondary">Remove marker</a>
+            <a class="relabelConfirm btn btn-sm btn-primary">OK</a>
+        </div>
+    </dialog>
+</template>

Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.js

@@ -0,0 +1,126 @@
+// ------ Tool configuration functions ----- //
+getAnnotationTextCallback = function(doneChangingTextCallback) {
+    // This handles the text entry for the annotation tool
+    function keyPressHandler(e) {
+        // If Enter or Esc are pressed, close the dialog
+        if (e.which === 13 || e.which === 27) {
+            closeHandler();
+        }
+    }
+
+    function closeHandler() {
+        dialog.get(0).close();
+        doneChangingTextCallback(getTextInput.val());
+        // Reset the text value
+        getTextInput.val('');
+
+        // Reset the focus to the active viewport element
+        // This makes the mobile Safari keyboard close
+        const element = getActiveViewportElement();
+        $(element).focus();
+    }
+
+    const dialog = $('#annotationDialog');
+    if (dialog.get(0).open === true) {
+        return;
+    }
+
+    const getTextInput = $('.annotationTextInput');
+
+    // Focus on the text input to open the Safari keyboard
+    getTextInput.focus();
+
+    dialog.get(0).showModal();
+
+    const confirm = dialog.find('.annotationDialogConfirm');
+    confirm.off('click');
+    confirm.on('click', () => {
+        closeHandler();
+    });
+
+    // Use keydown since keypress doesn't handle ESC in Chrome
+    dialog.off('keydown');
+    dialog.on('keydown', keyPressHandler);
+};
+
+changeAnnotationTextCallback = function(data, eventData, doneChangingTextCallback) {
+    const dialog = $('#relabelAnnotationDialog');
+    if (dialog.get(0).open === true) {
+        return;
+    }
+
+    if (isTouchDevice()) {
+        // Center the dialog on screen on touch devices
+        dialog.css({
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            margin: 'auto'
+        });
+    } else {
+        // Place the dialog above the tool that is being relabelled
+        dialog.css({
+            top: eventData.currentPoints.page.y - dialog.outerHeight() - 20,
+            left: eventData.currentPoints.page.x - dialog.outerWidth() / 2
+        });
+    }
+
+    const getTextInput = dialog.find('.annotationTextInput');
+    const confirm = dialog.find('.relabelConfirm');
+    const remove = dialog.find('.relabelRemove');
+
+    getTextInput.val(data.text);
+
+    // Focus on the text input to open the Safari keyboard
+    getTextInput.focus();
+
+    dialog.get(0).showModal();
+
+    confirm.off('click');
+    confirm.on('click', function() {
+        dialog.get(0).close();
+        doneChangingTextCallback(data, getTextInput.val());
+    });
+
+    // If the remove button is clicked, delete this marker
+    remove.off('click');
+    remove.on('click', function() {
+        dialog.get(0).close();
+        doneChangingTextCallback(data, undefined, true);
+    });
+
+    dialog.off('keydown');
+    dialog.on('keydown', keyPressHandler);
+
+    function keyPressHandler(e) {
+        // If Enter is pressed, close the dialog
+        if (e.which === 13) {
+            closeHandler();
+        }
+    }
+
+    function closeHandler() {
+        dialog.get(0).close();
+        doneChangingTextCallback(data, getTextInput.val());
+        // Reset the text value
+        getTextInput.val('');
+
+        // Reset the focus to the active viewport element
+        // This makes the mobile Safari keyboard close
+        const element = getActiveViewportElement();
+        $(element).focus();
+    }
+};
+
+Template.annotationDialogs.onRendered(() => {
+    const instance = Template.instance();
+    const dialogIds = ['annotationDialog', 'relabelAnnotationDialog'];
+
+    dialogIds.forEach(id => {
+        const dialog = instance.$('#' + id);
+        dialog.draggable();
+        dialogPolyfill.registerDialog(dialog.get(0));
+    });
+});
+

Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl

@@ -0,0 +1,34 @@
+@import "{design}/app.styl"
+
+.annotationDialog
+  display: none
+  z-index: 1000
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  margin: auto
+
+  overflow: hidden
+  padding: 10px
+  width: 300px
+  height: 140px
+
+  opacity: 0.95
+  border-radius: 8px
+  border: 1px solid $uiBorderColor
+  background: $uiGrayDarkest
+  color: $textSecondaryColor
+
+  h5, label
+    font-weight: 100
+
+  .annotationTextInputOptions
+    padding: 10px 0
+
+  .annotationTextInput
+    margin-left: 5px
+
+  .annotationDialogConfirm
+    float: right

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl

@@ -1,7 +1,5 @@
 @import "{design}/app.styl"
 
-$borderColor = rgba(77, 99, 110, 0.81)
-
 #cineDialog
   display: none
   z-index: 1000

Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -564,14 +564,17 @@ Template.imageViewerViewport.onDestroyed(function() {
 
 Template.imageViewerViewport.events({
     'ActivateViewport .imageViewerViewport': function(e) {
+        console.log('activateViewport');
         log.info('imageViewerViewport ActivateViewport');
         setActiveViewport(e.currentTarget);
     },
     'click .imageViewerViewport': function(e) {
+        console.log('click imageViewerViewport handler');
         var viewportIndex = $('.imageViewerViewport').index(e.currentTarget);
         Session.set('activeViewport', viewportIndex);
     },
-    'dblclick .imageViewerViewport': function(e) {
+    'CornerstoneToolsMouseDoubleClick .imageViewerViewport, CornerstoneToolsDoubleTap .imageViewerViewport': function(e) {
+        console.log('CornerstoneToolsMouseDoubleClick handler');
         var viewportIndex = $('.imageViewerViewport').index(e.currentTarget);
         layoutManager.toggleEnlargement(viewportIndex);
     }