From 5ef91e0c71b709cdd00e35b79ddd24da4898212e Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Fri, 3 Nov 2017 16:02:39 -0200 Subject: [PATCH] Making bounded plugin use CSS transform --- .../ohif-core/client/ui/bounded/bounded.js | 49 +++++++++++++++++-- .../client/ui/resizable/resizable.js | 5 +- .../measurementTableHUD.js | 2 +- .../viewer/cineDialog/cineDialog.js | 2 +- 4 files changed, 49 insertions(+), 9 deletions(-) diff --git a/Packages/ohif-core/client/ui/bounded/bounded.js b/Packages/ohif-core/client/ui/bounded/bounded.js index 181f87b0f..d316d119c 100644 --- a/Packages/ohif-core/client/ui/bounded/bounded.js +++ b/Packages/ohif-core/client/ui/bounded/bounded.js @@ -32,6 +32,9 @@ class Bounded { this.$element = $(element); this.options(options); this.setBoundedFlag(false); + + // Force to hardware acceleration to move element if browser supports translate property + this.useTransform = OHIF.ui.styleProperty.check('transform', 'translate(1px, 1px)'); } // Set or change the instance options @@ -141,11 +144,7 @@ class Bounded { // Define the event handlers for this class defineEventHandlers() { - this.spatialChangedHandler = event => { - // Get the spatial information for element and its bounding element - const elementInfo = Bounded.spatialInfo(this.positionElement, this.dimensionElement); - const boundingInfo = Bounded.spatialInfo(this.boundingElement, this.boundingElement); - + this.cssPositionHandler = (elementInfo, boundingInfo) => { // Fix element's x positioning and width if (this.allowResizing && elementInfo.width > boundingInfo.width) { this.$dimensionElement.width(boundingInfo.width); @@ -172,6 +171,46 @@ class Bounded { this.setBoundedFlag(true); } }; + + this.cssTransformHandler = (elementInfo, boundingInfo) => { + const matrixToArray = str => str.match(/(-?[0-9\.]+)/g); + const transformMatrix = matrixToArray(this.$positionElement.css('transform')) || []; + let translateX = parseFloat(transformMatrix[4]) || 0; + let translateY = parseFloat(transformMatrix[5]) || 0; + + if (elementInfo.x1 > boundingInfo.x1) { + translateX -= elementInfo.x1 - boundingInfo.x1; + } + + if (elementInfo.y1 > boundingInfo.y1) { + translateY -= elementInfo.y1 - boundingInfo.y1; + } + + if (elementInfo.x0 < boundingInfo.x0) { + translateX += boundingInfo.x0 - elementInfo.x0; + } + + if (elementInfo.y0 < boundingInfo.y0) { + translateY += boundingInfo.y0 - elementInfo.y0; + } + + const translation = `translate(${translateX}px, ${translateY}px)`; + OHIF.ui.styleProperty.set(this.positionElement, 'transform', translation); + }; + + this.spatialChangedHandler = event => { + // Get the spatial information for element and its bounding element + const { positionElement, dimensionElement, boundingElement, useTransform } = this; + const elementInfo = Bounded.spatialInfo(positionElement, dimensionElement); + const boundingInfo = Bounded.spatialInfo(boundingElement, boundingElement); + + // Check if CSS positioning or transform will be used + if (useTransform) { + this.cssTransformHandler(elementInfo, boundingInfo); + } else { + this.cssPositionHandler(elementInfo, boundingInfo); + } + }; } // Attach the event handlers to the element in order to bound it diff --git a/Packages/ohif-core/client/ui/resizable/resizable.js b/Packages/ohif-core/client/ui/resizable/resizable.js index 28dbfc36c..d06cc2f7a 100644 --- a/Packages/ohif-core/client/ui/resizable/resizable.js +++ b/Packages/ohif-core/client/ui/resizable/resizable.js @@ -1,3 +1,4 @@ +import { _ } from 'meteor/underscore'; import { OHIF } from 'meteor/ohif:core'; // Allow attaching to jQuery selectors @@ -43,8 +44,8 @@ class Resizable { init() { this.defineEventHandlers(); - for (var x = -1; x <= 1; x++) { - for (var y = -1; y <= 1; y++) { + for (let x = -1; x <= 1; x++) { + for (let y = -1; y <= 1; y++) { this.createBound(x, y); } } diff --git a/Packages/ohif-measurements/client/components/measurementTable/measurementTableHUD/measurementTableHUD.js b/Packages/ohif-measurements/client/components/measurementTable/measurementTableHUD/measurementTableHUD.js index 62634f201..e2a517e0a 100644 --- a/Packages/ohif-measurements/client/components/measurementTable/measurementTableHUD/measurementTableHUD.js +++ b/Packages/ohif-measurements/client/components/measurementTable/measurementTableHUD/measurementTableHUD.js @@ -21,7 +21,7 @@ Template.measurementTableHUD.onDestroyed(() => { Template.measurementTableHUD.onRendered(() => { const instance = Template.instance(); - instance.$('#measurementTableHUD').resizable().draggable(); + instance.$('#measurementTableHUD').resizable().draggable().bounded(); }); Template.measurementTableHUD.events({ diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js index f634a6104..5af829b0e 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js @@ -237,7 +237,7 @@ Template.cineDialog.onRendered(() => { instance.setResizeHandler(instance.setOptimalPosition); // Make the CINE dialog bounded and draggable - $dialog.draggable({ defaultElementCursor: 'move' }); + $dialog.draggable({ defaultElementCursor: 'move' }).bounded(); // Polyfill for older browsers dialogPolyfill.registerDialog($dialog.get(0));