Mirroring support

README.rst

@@ -86,6 +86,11 @@ You must define a palette and each row can display 4 colors::
 
     $ omero config set omero.web.iviewer.show_palette_only true
 
+When working with other images (coregistering MRIs for example), it is necessary to be able to mirror an image.
+There is now experimental support for runtime image mirroring. To enable mirroring set enable_mirror to true.
+
+    $ omero config set omero.web.iviewer.enable__mirror true
+
 Known issues
 ============
 

css/app.css

@@ -1527,3 +1527,20 @@ thumbnail-slider img {
     max-width: 125px;
     padding: 10px;
 }
+
+/* Mirror Buttons */
+.ol-flip {
+    top: 3em;
+    left: .5em;
+}
+
+.glyphicon.ol-flip-button {
+    font-size: 15px;
+    background-color: #fff;
+    font-size: 13px;
+    top: 0px;
+    height: 30px;
+    min-width: 30px;
+    padding: 0px;
+    font-weight: bold;
+}

plugin/omero_iviewer/iviewer_settings.py

@@ -53,8 +53,14 @@
         ["SHOW_PALETTE_ONLY",
          False,
          bool,
-         ("Disables spectrum color picker. Forces users to use preset options"
+         ("Disables spectrum color picker. Forces users to use preset options."
           "Must define a color palette for this setting to work.")],
+
+    "omero.web.iviewer.enable_mirror":
+        ["ENABLE_MIRROR",
+         False,
+         bool,
+         ("Enables buttons to mirror X or Y axis.")]
 }
 
 process_custom_settings(sys.modules[__name__], 'IVIEWER_SETTINGS_MAPPING')

plugin/omero_iviewer/views.py

@@ -51,6 +51,7 @@
 MAX_PROJECTION_BYTES = getattr(iviewer_settings, 'MAX_PROJECTION_BYTES')
 ROI_COLOR_PALETTE = getattr(iviewer_settings, 'ROI_COLOR_PALETTE')
 SHOW_PALETTE_ONLY = getattr(iviewer_settings, 'SHOW_PALETTE_ONLY')
+ENABLE_MIRROR = getattr(iviewer_settings, 'ENABLE_MIRROR')
 
 PROJECTIONS = {
     'normal': -1,
@@ -108,6 +109,7 @@ def index(request, iid=None, conn=None, **kwargs):
     params['MAX_PROJECTION_BYTES'] = max_bytes
     params['ROI_COLOR_PALETTE'] = ROI_COLOR_PALETTE
     params['SHOW_PALETTE_ONLY'] = SHOW_PALETTE_ONLY
+    params['ENABLE_MIRROR'] = ENABLE_MIRROR
 
     return render(
         request, 'omero_iviewer/index.html',

src/app/context.js

@@ -463,6 +463,7 @@ export default class Context {
             }
         }
         this.show_palette_only = (this.initParams[REQUEST_PARAMS.SHOW_PALETTE_ONLY] != 'False') || false
+        this.enable_mirror = (this.initParams[REQUEST_PARAMS.ENABLE_MIRROR] != 'False') || false 
     }
 
     /**

src/index-dev.html

@@ -35,10 +35,11 @@
                 'WEB_API_BASE': 'api/v0/',
                 'ROI_PAGE_SIZE': '500',
                 'MAX_PROJECTION_BYTES': "268435456", // 1024 * 1024 * 256
-                'IMAGES': "1",   // "4420" // "73537",
+                // 'IMAGES': "1"   // "4420" // "73537",
                 //'ROI_COLOR_PALETTE': '["rgb(0,255,0)","blue","blue","pink","blue"],["rgb(255,255,255)"]',
+                'ENABLE_MIRROR': 'True',
                 //'SHOW_PALETTE_ONLY': true,
-                // 'DATASET': "1",
+                'DATASET': "1",
                 //'WELL': "1"
         };
         // check if we need to log in

src/utils/constants.js

@@ -135,6 +135,7 @@ export const REQUEST_PARAMS = {
     MAX_PROJECTION_BYTES: 'MAX_PROJECTION_BYTES',
     ROI_COLOR_PALETTE: 'ROI_COLOR_PALETTE',
     SHOW_PALETTE_ONLY: 'SHOW_PALETTE_ONLY',
+    ENABLE_MIRROR: 'ENABLE_MIRROR',
 }
 
 /**

src/viewers/ol3-viewer.js

@@ -45,6 +45,7 @@ import {
     ENABLE_SHAPE_POPUP,
     EventSubscriber
 } from '../events/events';
+import Mirror from './viewer/controls/Mirror';
 
 
 /**
@@ -480,14 +481,16 @@ export default class Ol3Viewer extends EventSubscriber {
                      container: this.container
                  });
         delete this.image_config.image_info.tmp_data;
-
+        
         // hide controls for mdi when more than 1 image configs
         if (this.context.useMDI && this.context.image_configs.size > 1)
             this.toggleControlsVisibility({
                 config_id: this.image_config.id, flag: false
             });
-        // only the first request should be affected
+        // only the first request should be affected, besides mirror controls
+        let mirrorEnabled = this.context.getInitialRequestParam(REQUEST_PARAMS.ENABLE_MIRROR)
         this.context.resetInitParams();
+        this.context.initParams[REQUEST_PARAMS.ENABLE_MIRROR] = mirrorEnabled
         // use existing interpolation setting
         this.viewer.enableSmoothing(this.context.interpolate);
         // zoom to fit

src/viewers/viewer/Viewer.js

@@ -45,7 +45,6 @@ import {AVAILABLE_VIEWER_INTERACTIONS,
     AVAILABLE_VIEWER_CONTROLS,
     WEBGATEWAY,
     PLUGIN_PREFIX,
-    REQUEST_PARAMS,
     DEFAULT_TILE_DIMS,
     REGIONS_MODE,
     REGIONS_STATE,
@@ -67,6 +66,8 @@ import {integrateStyleIntoJsonObject,
 import OmeroImage from './source/Image';
 import Regions from './source/Regions';
 import Mask from './geom/Mask';
+import Mirror from './controls/Mirror';
+import { REQUEST_PARAMS } from '../../utils/constants';
 
 /**
  * @classdesc
@@ -580,6 +581,7 @@ class Viewer extends OlObject {
         controls.push(defaultConts[contr]['ref']);
         this.viewerState_[contr] = defaultConts[contr];
         }
+
 
         // finally construct the open layers map object
         this.viewer_ = new OlMap({
@@ -599,6 +601,12 @@ class Viewer extends OlObject {
             'collapsed': !source.use_tiled_retrieval_
         };
         this.addControl('birdseye', birdsEyeOptions);
+
+        // add mirror if requested
+        if(this.getInitialRequestParam(REQUEST_PARAMS.ENABLE_MIRROR) == 'True'){
+            this.addControl('mirror')
+        }
+
         // tweak source element for fullscreen to include dim sliders (iviewer only)
         var targetId = this.getTargetId();
         var viewerFrame = targetId ? document.getElementById(targetId) : null;
@@ -670,6 +678,11 @@ class Viewer extends OlObject {
                     notifyAboutViewerInteraction(this);
                 }, this);
         }
+
+        // add mirror if requested
+        if(this.getInitialRequestParam(REQUEST_PARAMS.ENABLE_MIRROR) == 'True'){
+            this.viewer_.addControl(new Mirror(this.viewer_))
+        }
     }
 
     /**

src/viewers/viewer/controls/Mirror.js

@@ -0,0 +1,134 @@
+import {listen} from 'ol/events';
+import EventType from 'ol/events/EventType';
+import Control from 'ol/control/Control';
+import {CLASS_UNSELECTABLE, CLASS_CONTROL } from 'ol/css';
+
+export class Mirror extends Control {
+    /**
+     * @constructor
+     * @param {ol.Map=} map openlayers map.
+     * @param {ol.control.FlipOptions=} opt_options options. (className, target)
+     */
+     constructor(opt_options) {
+        var options = opt_options ? opt_options : {};
+
+        var element = document.createElement('div');
+        super({
+            element: element,
+            target: options.target
+        });
+
+        /**
+        * @type {string}
+        * @private
+        */
+        this.class_name_ =
+            options.className === 'string' ? options.className : 'ol-flip';
+
+        /**
+         * @type {MapBrowserPointerEvent}
+         * @private
+         */
+        this.ref_ = null
+
+        /**
+         * @type {View}
+         */
+        this.view = null
+
+        var cssClasses =
+            this.class_name_ + ' ' + CLASS_UNSELECTABLE + ' ' +
+                CLASS_CONTROL;
+
+        element.className = cssClasses;
+        var buttonGroup = document.createElement('div');
+        buttonGroup.className = "btn-group btn-group-sm ol-flip-buttons";
+        buttonGroup.appendChild(this.addFlipButton(false));
+        buttonGroup.appendChild(this.addFlipButton(true));
+        element.appendChild(buttonGroup);
+    }
+
+    /**
+     * Adds both, flip vertical and horizontal buttons
+     * @param {boolean} flip_vertical the vertical flip button is added if true, otherwise horizontal
+     * @private
+     */
+     addFlipButton(flip_vertical) {
+        if (typeof flip_vertical !== 'boolean') flip_vertical = false;
+
+        var title = 'Flip ' + (flip_vertical ? 'vertical' : 'horizontal');
+        var element = document.createElement('button');
+        element.className =
+            this.class_name_ + (flip_vertical ? '-vertical glyphicon-resize-vertical' : '-horizontal glyphicon-resize-horizontal') +
+            " btn btn-default glyphicon ol-flip-button";
+        element.setAttribute('type', 'button');
+        element.title = title;
+
+        listen(element, EventType.CLICK, this.handleClick_, this);
+
+        return element;
+    }
+
+    init(){
+        this.view = this.getMap().getView()
+
+        this.view.flipX = false
+        this.view.flipY = false
+
+        this.view.constrainCenter_ = this.view.constrainCenter
+        this.view.constrainCenter = (center) => {
+            let curCenter = this.view.getCenter()
+            if (this.view.flipX) {
+                center[0] = curCenter[0]-(center[0]-curCenter[0])
+            }
+            if (this.view.flipY) center[1] = curCenter[1]-(center[1]-curCenter[1])
+            return this.view.constrainCenter_(center)
+        }
+
+        // override getEventPixel to account for mirroring
+        this.map_.getEventPixel = function (evt) {
+            const viewportPosition = this.viewport_.getBoundingClientRect();
+            const eventPosition =
+                //FIXME Are we really calling this with a TouchEvent anywhere?
+                'changedTouches' in evt
+                ? /** @type {TouchEvent} */ (evt).changedTouches[0]
+                : /** @type {MouseEvent} */ (evt);
+
+            let x=eventPosition.clientX - viewportPosition.left
+            let y=eventPosition.clientY - viewportPosition.top
+
+            if (this.getView().flipX) x=viewportPosition.width-x
+            if (this.getView().flipY) y=viewportPosition.height-y
+
+            return [x,y]
+        }
+    }
+
+    handleClick_(event) {
+        if(this.view == null) this.init()
+        // 0 axis if vertical ( flip y over x axis )
+        // 1 axis if hortizontal ( flip x over y axis )
+        event.preventDefault();
+        var viewport = this.getMap().getViewport().children[0] // (mirror just tiles)
+        var axis = event.target.className.indexOf("ol-flip-vertical") !== -1 ? 0 : 1;
+
+        // set desired transform and record in view
+        let transform;
+        if (axis == 0) { 
+            transform="scaleY(-1)"
+            this.view.flipY=!(this.view.flipY)
+
+        } else {
+            transform="scaleX(-1)"
+            this.view.flipX=!(this.view.flipX)
+        }
+
+        // if it is already mirrored remove mirror, otherwise add mirror
+        viewport.style.transform = viewport.style.transform.includes(transform) ?
+            viewport.style.transform.replace(transform, "") : 
+            viewport.style.transform + transform
+        return true
+    }
+
+}
+export default Mirror

src/viewers/viewer/controls/ShapeEditPopup.js

@@ -19,7 +19,7 @@
 import Overlay from 'ol/Overlay.js';
 import Text from 'ol/style/Text';
 import Style from 'ol/style/Style';
-import {getTopLeft, getTopRight} from 'ol/extent';
+import {getBottomLeft, getBottomRight, getTopLeft, getTopRight} from 'ol/extent';
 import Line from '../geom/Line';
 import {isArray,
         sendEventNotification} from '../utils/Misc';
@@ -163,8 +163,11 @@ class ShapeEditPopup extends Overlay {
      */
     updatePopupCoordinates(geom) {
         let extent = geom.getExtent();
-        let x = (getTopLeft(extent)[0] + getTopRight(extent)[0]) / 2;
-        let y = getTopLeft(extent)[1];
+        let view = this.map.getView()
+
+        // gotta get opposite coord depending on mirror
+        let x = view.flipX ? (getBottomLeft(extent)[0] + getBottomRight(extent)[0]) / 2 : (getTopLeft(extent)[0] + getTopRight(extent)[0]) / 2;
+        let y = view.flipY ? getBottomLeft(extent)[1] : getTopLeft(extent)[1];
 
         // If it's a Line, popup is on upper end of the line
         if (geom instanceof Line) {
@@ -195,9 +198,17 @@ class ShapeEditPopup extends Overlay {
         }
         this.coordsInput.value = coordsText;
         this.areaInput.value = areaText;
-
+        
         if (this.regions.viewer_.enable_shape_popup) {
-            this.setPosition([x, y]);
+            let viewportPosition = this.map.getViewport().getBoundingClientRect()
+
+            // unfortunately need to convert to pixel and back
+            let pixels = this.map.getPixelFromCoordinate([x,y])
+            if (view.flipX) pixels[0]=viewportPosition.width-pixels[0]
+            if (view.flipY) pixels[1]=viewportPosition.height-pixels[1]
+            let coord = this.map.getCoordinateFromPixel(pixels)
+
+            this.setPosition(coord);
         }
     }
 

src/viewers/viewer/globals.js

@@ -35,6 +35,7 @@ import ScaleBar from './controls/ScaleBar';
 import IntensityDisplay from './controls/IntensityDisplay';
 import RotateInteraction from './interaction/Rotate';
 import BoxSelect from './interaction/BoxSelect';
+import Mirror from './controls/Mirror';
 
 /**
  * Default lineCap setting for default stroke
@@ -315,6 +316,12 @@ export const AVAILABLE_VIEWER_CONTROLS = {
         "options": {},
         "defaults": true,
         "enabled": false,
+        "links" : []},
+    "mirror" :
+        {"clazz" : Mirror,
+        "options": {},
+        "defaults": true,
+        "enabled" : false,
         "links" : []}
 };