OHIF-59: Use hardware acceleration for thumbnail drag and drop

Packages/ohif-viewerbase/client/lib/styleProperty.js

@@ -0,0 +1,60 @@
+/*
+https://github.com/swederik/dragula/blob/ccc15d75186f5168e7abadbe3077cf12dab09f8b/styleProperty.js
+ */
+'use strict';
+var browserProps = {};
+
+function eachVendor(prop, fn) {
+    var prefixes = ['Webkit', 'Moz', 'ms', 'O'];
+    var i = 0;
+    var l = prefixes.length;
+    fn(prop);
+    for (; i < l; i++) {
+        fn(prefixes[i] + prop.charAt(0).toUpperCase() + prop.slice(1));
+    }
+}
+
+function check(property, testValue) {
+    var sandbox = document.createElement('iframe');
+    var el = document.createElement('p');
+    var support;
+
+    document.body.appendChild(sandbox);
+    sandbox.contentDocument.body.appendChild(el);
+    support = set(el, property, testValue);
+
+    // We have to do this because remove() is not supported by IE11 and below
+    sandbox.parentElement.removeChild(sandbox);
+    return support;
+}
+
+function checkComputed(el, prop) {
+    var computed = window.getComputedStyle(el).getPropertyValue(prop);
+    return ((computed !== void 0) && computed.length > 0 && computed !== 'none');
+}
+
+function set(el, prop, value) {
+    var match = false;
+    if (browserProps[prop] === void 0) {
+        eachVendor(prop, function(vendorProp) {
+            if (el.style[vendorProp] !== void 0 && match === false) {
+                el.style[vendorProp] = value;
+                if (checkComputed(el, vendorProp)) {
+                    match = true;
+                    browserProps[prop] = vendorProp;
+                }
+            }
+        });
+    } else {
+        el.style[browserProps[prop]] = value;
+        return true;
+    }
+    return match;
+}
+
+const styleProperty = {
+    check,
+    set,
+};
+
+export { styleProperty };

Packages/ohif-viewerbase/client/lib/thumbnailDragHandlers.js

@@ -1,5 +1,6 @@
 import { $ } from 'meteor/jquery';
 import { OHIF } from 'meteor/ohif:core';
+import { styleProperty }  from './styleProperty'
 
 const cloneElement = (element, targetId) => {
     // Clone the DOM element
@@ -29,6 +30,10 @@ const thumbnailDragStartHandler = (event, data) => {
     const targetThumbnail = event.currentTarget;
     const $imageThumbnail = $(targetThumbnail);
 
+    // Force to hardware acceleration to move element
+    // if browser supports translate property
+    const useTransform = styleProperty.check('transform', 'translate(1px, 1px)');
+
     // Clone the image thumbnail
     const targetId = 'DragClone';
     const clone = cloneElement(targetThumbnail, targetId);
@@ -78,15 +83,33 @@ const thumbnailDragStartHandler = (event, data) => {
     };
     $clone.data('diff', diff);
 
-    // This sets the default style properties of the cloned element so it is
-    // ready to be dragged around the page
     $clone.css({
-        left: cursorX - diff.x,
-        position: 'fixed',
-        top: cursorY - diff.y,
         visibility: 'hidden',
         'z-index': 100000
     });
+
+    if (useTransform === true) {
+        // This sets the default style properties of the cloned element so it is
+        // ready to be dragged around the page
+        $clone.css({
+            left: cursorX - diff.x,
+            position: 'fixed',
+            top: cursorY - diff.y,
+        });
+    } else {
+        const viewerHeight= $('#viewer').height();
+        const headerHeight = $('.header').outerHeight();
+        const heightDiff = viewerHeight + headerHeight;
+
+        // Save height difference for later to set top position of the element during movement
+        $clone.data('heightDiff', heightDiff);
+
+        const positionX = cursorX - diff.x;
+        const positionY = cursorY - diff.y - heightDiff;
+
+        const translation = `translate(${positionX}px, ${positionY}px)`;
+        styleProperty.set($clone.get(0), 'transform', translation);
+    }
 };
 
 const thumbnailDragHandler = event => {
@@ -105,14 +128,33 @@ const thumbnailDragHandler = event => {
     // Find the clone element and update it's position on the page
     const $clone = $('#DragClone');
     const diff = $clone.data('diff');
+
+    // Force to hardware acceleration to move element
+    // if browser supports translate property
+    const useTransform = styleProperty.check('transform', 'translate(1px, 1px)');
+
     $clone.css({
-        left: cursorX - diff.x,
-        position: 'fixed',
-        top: cursorY - diff.y,
         visibility: 'visible',
         'z-index': 100000
     });
 
+    if (useTransform === true) {
+        // This sets the default style properties of the cloned element so it is
+        // ready to be dragged around the page
+        $clone.css({
+            left: cursorX - diff.x,
+            position: 'fixed',
+            top: cursorY - diff.y,
+        });
+    } else {
+        const heightDiff = $clone.data('heightDiff');
+        const positionX = cursorX - diff.x;
+        const positionY = cursorY - diff.y - heightDiff;
+
+        const translation = `translate(${positionX}px, ${positionY}px)`;
+        styleProperty.set($clone.get(0), 'transform', translation);
+    }
+
     // Identify the element below the current cursor position
     const elemBelow = document.elementFromPoint(cursorX, cursorY);