From e618e32341690b3ba0be8b0c63f31e27a983ca99 Mon Sep 17 00:00:00 2001
From: Leonardo Campos <leonardoscampos@gmail.com>
Date: Thu, 16 Mar 2017 20:07:40 -0300
Subject: [PATCH] fix: dragProbe tool (PR #194)

Pull request
https://github.com/chafey/cornerstoneTools/pull/194
---
 .../client/cornerstoneTools.js                | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/Packages/ohif-cornerstone/client/cornerstoneTools.js b/Packages/ohif-cornerstone/client/cornerstoneTools.js
index 2c8d4b1f6..0daa23d7a 100644
--- a/Packages/ohif-cornerstone/client/cornerstoneTools.js
+++ b/Packages/ohif-cornerstone/client/cornerstoneTools.js
@@ -2827,11 +2827,11 @@ if (typeof cornerstoneTools === 'undefined') {
 
     'use strict';
 
+    var dragEventData;
+
     function defaultStrategy(eventData) {
         var enabledElement = cornerstone.getEnabledElement(eventData.element);
 
-        cornerstone.updateImage(eventData.element);
-
         var context = enabledElement.canvas.getContext('2d');
         context.setTransform(1, 0, 0, 1, 0, 0);
 
@@ -2898,8 +2898,6 @@ if (typeof cornerstoneTools === 'undefined') {
         var enabledElement = cornerstone.getEnabledElement(element);
         var image = enabledElement.image;
 
-        cornerstone.updateImage(element);
-
         var context = enabledElement.canvas.getContext('2d');
         context.setTransform(1, 0, 0, 1, 0, 0);
 
@@ -2986,6 +2984,7 @@ if (typeof cornerstoneTools === 'undefined') {
     }
 
     function mouseUpCallback(e, eventData) {
+        $(eventData.element).off('CornerstoneImageRendered', imageRenderedCallback);
         $(eventData.element).off('CornerstoneToolsMouseDrag', dragCallback);
         $(eventData.element).off('CornerstoneToolsMouseUp', mouseUpCallback);
         $(eventData.element).off('CornerstoneToolsMouseClick', mouseUpCallback);
@@ -2994,6 +2993,7 @@ if (typeof cornerstoneTools === 'undefined') {
 
     function mouseDownCallback(e, eventData) {
         if (cornerstoneTools.isMouseButtonEnabled(eventData.which, e.data.mouseButtonMask)) {
+            $(eventData.element).on('CornerstoneImageRendered', imageRenderedCallback);
             $(eventData.element).on('CornerstoneToolsMouseDrag', dragCallback);
             $(eventData.element).on('CornerstoneToolsMouseUp', mouseUpCallback);
             $(eventData.element).on('CornerstoneToolsMouseClick', mouseUpCallback);
@@ -3002,8 +3002,22 @@ if (typeof cornerstoneTools === 'undefined') {
         }
     }
 
+    function imageRenderedCallback() {
+        if(dragEventData) {
+            cornerstoneTools.dragProbe.strategy(dragEventData);
+            dragEventData = null;
+        }
+    }
+
+    // The strategy can't be execute at this momento because the image is rendered asynchronously
+    // (requestAnimationFrame). Then the eventData that contains all information needed is being
+    // cached and the strategy will be executed once CornerstoneImageRendered is triggered.
     function dragCallback(e, eventData) {
-        cornerstoneTools.dragProbe.strategy(eventData);
+        var element = eventData.element;
+
+        dragEventData = eventData;
+        cornerstone.updateImage(element);
+
         return false; // false = causes jquery to preventDefault() and stopPropagation() this event
     }