From a21479e1d1075bd2f6d4937e180777a29777ebe7 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 16 Nov 2016 16:57:37 -0200
Subject: [PATCH] LT-352: Fixing Non-Target dialog positioning

---
 .../components/bootstrap/dialog/form.js       | 17 ++++++++---
 .../ohif-core/client/ui/dialog/spatial.js     | 30 +++++++++++++++++++
 Packages/ohif-core/client/ui/index.js         |  1 +
 .../client/compatibility/nonTargetTool.js     | 10 +++++++
 .../components/dialog/nonTargetMeasurement.js |  2 +-
 5 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 Packages/ohif-core/client/ui/dialog/spatial.js

diff --git a/Packages/ohif-core/client/components/bootstrap/dialog/form.js b/Packages/ohif-core/client/components/bootstrap/dialog/form.js
index 8237a81c7..7409c5ddb 100644
--- a/Packages/ohif-core/client/components/bootstrap/dialog/form.js
+++ b/Packages/ohif-core/client/components/bootstrap/dialog/form.js
@@ -43,10 +43,19 @@ Template.dialogForm.onCreated(() => {
 Template.dialogForm.onRendered(() => {
     const instance = Template.instance();
 
-    // Create the bootstrap modal
-    const $modal = instance.$('.modal');
-    $modal.modal({
+    // Allow options ovewrite
+    const modalOptions = _.extend({
         backdrop: 'static',
         keyboard: false
-    });
+    }, instance.data.modalOptions);
+
+    const $modal = instance.$('.modal');
+
+    // Create the bootstrap modal
+    $modal.modal(modalOptions);
+
+    const position = instance.data.position;
+    if (position) {
+        OHIF.ui.repositionDialog($modal, position.x, position.y);
+    }
 });
diff --git a/Packages/ohif-core/client/ui/dialog/spatial.js b/Packages/ohif-core/client/ui/dialog/spatial.js
new file mode 100644
index 000000000..2482c206d
--- /dev/null
+++ b/Packages/ohif-core/client/ui/dialog/spatial.js
@@ -0,0 +1,30 @@
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.ui.repositionDialog = ($modal, x, y) => {
+    const $dialog = $modal.find('.modal-dialog');
+
+    // Remove the margins and set its position as fixed
+    $dialog.css({
+        margin: 0,
+        position: 'fixed'
+    }).bounded();
+
+    // Temporarily show the modal
+    const isVisible = $modal.is(':visible');
+    $modal.show();
+
+    // Calculate the center position on screen
+    const height = $dialog.outerHeight();
+    const width = $dialog.outerWidth();
+    const left = parseInt(x - (width / 2));
+    const top = parseInt(y - (height / 2));
+
+    // Reposition the modal and readjust it to the window boundaries if needed
+    $dialog.css({
+        left,
+        top
+    }).trigger('spatialChanged');
+
+    // Switch the modal to its previous visibility state
+    $modal.toggle(isVisible);
+};
diff --git a/Packages/ohif-core/client/ui/index.js b/Packages/ohif-core/client/ui/index.js
index 0c762242c..3b7eb1719 100644
--- a/Packages/ohif-core/client/ui/index.js
+++ b/Packages/ohif-core/client/ui/index.js
@@ -1,5 +1,6 @@
 import './bounded/bounded.js';
 import './dialog/form.js';
+import './dialog/spatial.js';
 import './draggable/draggable.js';
 import './dropdown/form.js';
 import './resizable/resizable.js';
diff --git a/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js b/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js
index c2bc8660a..edd519fc6 100644
--- a/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js
+++ b/Packages/ohif-lesiontracker/client/compatibility/nonTargetTool.js
@@ -19,10 +19,19 @@ import { OHIF } from 'meteor/ohif:core';
         ESC: 27
     };
 
+    const getPosition = eventData => {
+        const event = eventData.event;
+        return {
+            x: event.clientX,
+            y: event.clientY
+        };
+    };
+
     // Define a callback to get your text annotation
     // This could be used, e.g. to open a modal
     function getMeasurementLocationCallback(measurementData, eventData) {
         OHIF.ui.showFormDialog('dialogNonTargetMeasurement', {
+            position: getPosition(eventData),
             title: 'Select Lesion Location',
             element: eventData.element,
             measurementData
@@ -31,6 +40,7 @@ import { OHIF } from 'meteor/ohif:core';
 
     function changeMeasurementLocationCallback(measurementData, eventData) {
         OHIF.ui.showFormDialog('dialogNonTargetMeasurement', {
+            position: getPosition(eventData),
             title: 'Change Lesion Location',
             element: eventData.element,
             measurementData,
diff --git a/Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.js b/Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.js
index 840de2cd8..c4a69b604 100644
--- a/Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.js
+++ b/Packages/ohif-lesiontracker/client/components/dialog/nonTargetMeasurement.js
@@ -39,6 +39,7 @@ Template.dialogNonTargetMeasurement.onCreated(() => {
         // Confirm the deletion of the current non-target measurement
         remove() {
             const dialogSettings = {
+                position: instance.data.position,
                 title: 'Remove Measurement',
                 message: 'Are you sure you want to remove this Non-Target measurement?'
             };
@@ -125,5 +126,4 @@ Template.dialogNonTargetMeasurement.onRendered(() => {
             $set: { location: formData.location }
         });
     });
-
 });