LT-242: Creating UI resizable, improving heads up display layout and fixing tool selection behavior

Packages/viewerbase/lib/helpers/blaze.js

@@ -3,6 +3,11 @@ Template.registerHelper('instance', () => {
     return Template.instance();
 });
 
+// Return the session value for the given key
+Template.registerHelper('session', key => {
+    return Session.get(key);
+});
+
 // Create a new object and extends it with the argument objects
 Template.registerHelper('extend', (...argsArray) => {
     // Create the resulting object

Packages/viewerbase/lib/ui/draggable/draggable.js

@@ -1,6 +1,7 @@
 // Allow attaching to jQuery selectors
 $.fn.draggable = function() {
     makeDraggable(this);
+    return this;
 };
 
 /**
@@ -106,4 +107,4 @@ makeDraggable = function(element) {
 
     element.on('mousedown', startMoving);
     element.on('touchstart', startMoving);
-};
+};

Packages/viewerbase/lib/ui/resizable/resizable.js

@@ -0,0 +1,147 @@
+// Allow attaching to jQuery selectors
+$.fn.resizable = function(options) {
+    _.each(this, element => {
+        const resizableInstance = $(element).data('resizableInstance');
+        if (options === 'destroy' && resizableInstance) {
+            $(element).removeData('resizableInstance');
+            resizableInstance.destroy();
+        } else {
+            if (resizableInstance) {
+                resizableInstance.options(options);
+            } else {
+                $(element).data('resizableInstance', new Resizable(element, options));
+            }
+        }
+    });
+
+    return this;
+};
+
+/**
+ * This class makes an element resizable.
+ */
+class Resizable {
+
+    constructor(element, options={}) {
+        this.element = element;
+        this.$element = $(element);
+        this.options(options);
+    }
+
+    options(options={}) {
+        const { boundSize, minWidth, minHeight } = options;
+        this.minWidth = minWidth || this.$element.width() || 16;
+        this.minHeight = minHeight || this.$element.height() || 16;
+        this.boundSize = boundSize || 8;
+
+        this.destroy();
+        this.init();
+    }
+
+    init() {
+        for (var x = -1; x <= 1; x++) {
+            for (var y = -1; y <= 1; y++) {
+                this.createBound(x, y);
+            }
+        }
+
+        this.$element.addClass('resizable');
+    }
+
+    destroy() {
+        this.$element.removeClass('resizable').find('resize-bound').remove();
+    }
+
+    attachEventHandlers($bound, xDirection, yDirection) {
+        const $window = $(window);
+
+        const initResizeHandler = event => {
+            event.stopPropagation();
+
+            this.width = this.initialWidth = this.$element.width();
+            this.height = this.initialHeight = this.$element.height();
+            this.startWidth = this.width;
+            this.startHeight = this.height;
+
+            this.posX = parseInt(this.$element.css('left'));
+            this.posY = parseInt(this.$element.css('top'));
+            this.startPosX = this.posX;
+            this.startPosY = this.posY;
+
+            this.startX = event.clientX;
+            this.startY = event.clientY;
+
+            this.$element.addClass('resizing');
+
+            $window.on('mousemove', resizeHandler);
+            $window.on('mouseup', endResizeHandler);
+        };
+
+        const resizeHandler = event => {
+            let x, y;
+            x = event.clientX < 0 ? 0 : event.clientX;
+            x = x > window.innerWidth ? window.innerWidth : x;
+            y = event.clientY < 0 ? 0 : event.clientY;
+            y = y > window.innerHeight ? window.innerHeight : y;
+
+            const xDistance = (x - this.startX) * xDirection;
+            const yDistance = (y - this.startY) * yDirection;
+
+            const width = xDistance + this.startWidth;
+            const height = yDistance + this.startHeight;
+            this.width = width < this.minWidth ? this.minWidth : width;
+            this.height = height < this.minHeight ? this.minHeight : height;
+            this.$element.width(this.width);
+            this.$element.height(this.height);
+
+            if (xDirection < 0) {
+                this.posX = this.startPosX - xDistance;
+                if (width < this.minWidth) {
+                    this.posX = this.startPosX + (this.startWidth - this.minWidth);
+                }
+
+                this.$element.css('left', `${this.posX}px`);
+            }
+
+            if (yDirection < 0) {
+                this.posY = this.startPosY - yDistance;
+                if (height < this.minHeight) {
+                    this.posY = this.startPosY + (this.startHeight - this.minHeight);
+                }
+
+                this.$element.css('top', `${this.posY}px`);
+            }
+        };
+
+        const endResizeHandler = event => {
+            $window.off('mousemove', resizeHandler);
+            $window.off('mouseup', endResizeHandler);
+
+            this.$element.removeClass('resizing');
+        };
+
+        $bound.on('mousedown', initResizeHandler);
+    }
+
+    createBound(xDirection, yDirection) {
+        if (xDirection === 0 && xDirection === yDirection) {
+            return;
+        }
+
+        const $bound = $('<div class="resize-bound"></div>');
+
+        $bound[0].onselectstart = () => false;
+
+        $bound.css('font-size', `${this.boundSize}px`);
+
+        const mapX = ['left', 'center', 'right'];
+        const mapY = ['top', 'middle', 'bottom'];
+        $bound.addClass('bound-' + mapX[xDirection + 1]);
+        $bound.addClass('bound-' + mapY[yDirection + 1]);
+
+        $bound.appendTo(this.$element);
+
+        this.attachEventHandlers($bound, xDirection, yDirection);
+    }
+
+}

Packages/viewerbase/lib/ui/resizable/resizable.styl

@@ -0,0 +1,55 @@
+@import "{design}/app"
+
+.resizable
+  transform(scale(1))
+
+  &.resizing, .resize-bound
+    user-select: none
+    -webkit-touch-callout: none
+    -webkit-user-select: none
+    -khtml-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+
+  .resize-bound
+    content: ''
+    line-height: 1em
+    position: fixed
+
+  .bound-left
+    left: 0
+    width: 1em
+
+  .bound-center
+    left: 1em
+    height: 1em
+    right: 1em
+
+  .bound-right
+    right: 0
+    width: 1em
+
+  .bound-top
+    top: 0
+    height: 1em
+
+  .bound-middle
+    top: 1em
+    width: 1em
+    bottom: 1em
+
+  .bound-bottom
+    bottom: 0
+    height: 1em
+
+  .bound-left.bound-top, .bound-right.bound-bottom
+    cursor: nwse-resize
+
+  .bound-left.bound-bottom, .bound-right.bound-top
+    cursor: nesw-resize
+
+  .bound-left.bound-middle, .bound-right.bound-middle
+    cursor: ew-resize
+
+  .bound-center.bound-top, .bound-center.bound-bottom
+    cursor: ns-resize

Packages/viewerbase/package.js

@@ -117,7 +117,9 @@ Package.onUse(function(api) {
     api.addFiles('lib/toolManager.js', 'client');
     api.addFiles('lib/enablePrefetchOnElement.js', 'client');
     api.addFiles('lib/displayReferenceLines.js', 'client');
-    api.addFiles('lib/draggable.js', 'client');
+    api.addFiles('lib/ui/draggable/draggable.js', 'client');
+    api.addFiles('lib/ui/resizable/resizable.js', 'client');
+    api.addFiles('lib/ui/resizable/resizable.styl', 'client');
     api.addFiles('lib/toggleDialog.js', 'client');
     api.addFiles('lib/setActiveViewport.js', 'client');
     api.addFiles('lib/switchToImageByIndex.js', 'client');