othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Making bounded plugin use CSS transform

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-11-03 16:02:39 -02:00
parent 3d250fe9b6
commit 5ef91e0c71
4 changed files with 49 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
Packages/ohif-core/client/ui/bounded/bounded.js
View File

@ -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

5
Packages/ohif-core/client/ui/resizable/resizable.js
View File

@ -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);
}
}

2
Packages/ohif-measurements/client/components/measurementTable/measurementTableHUD/measurementTableHUD.js
View File

@ -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({

2
Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js
View File

@ -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));