Merge pull request #240 from will-moore/link_to_viewport

Context menu to Link to Viewport

src/events/events.js

@@ -38,6 +38,8 @@ export const IMAGE_DIMENSION_CHANGE = "IMAGE_DIMENSION_CHANGE";
 export const IMAGE_DIMENSION_PLAY = "IMAGE_DIMENSION_PLAY";
 /** whenever the viewport canvas data should be captured */
 export const IMAGE_VIEWPORT_CAPTURE = "IMAGE_VIEWPORT_CAPTURE";
+/** whenever we want a link to current viewport */
+export const IMAGE_VIEWPORT_LINK = "IMAGE_VIEWPORT_LINK";
 /** to set rois/shape properties such as visibility and selection */
 export const REGIONS_SET_PROPERTY = "REGIONS_SET_PROPERTY";
 /** whenever a region property change is received, e.g. selection, modification */

src/viewers/ol3-viewer.js

@@ -29,13 +29,14 @@ import {draggable} from 'jquery-ui/ui/widgets/draggable';
 import {resizable} from 'jquery-ui/ui/widgets/resizable';
 import {
     IMAGE_CONFIG_RELOAD, IVIEWER, PLUGIN_PREFIX, PROJECTION,
-    REGIONS_DRAWING_MODE, RENDER_STATUS, VIEWER_ELEMENT_PREFIX, WEBCLIENT
+    REGIONS_DRAWING_MODE, RENDER_STATUS, VIEWER_ELEMENT_PREFIX,
+    REQUEST_PARAMS
 } from '../utils/constants';
 import {
     IMAGE_CANVAS_DATA, IMAGE_DIMENSION_CHANGE, IMAGE_DIMENSION_PLAY,
     IMAGE_INTENSITY_QUERYING, IMAGE_SETTINGS_CHANGE, IMAGE_SETTINGS_REFRESH,
     IMAGE_VIEWER_CONTROLS_VISIBILITY, IMAGE_VIEWER_INTERACTION,
-    IMAGE_VIEWER_RESIZE, IMAGE_VIEWPORT_CAPTURE,
+    IMAGE_VIEWER_RESIZE, IMAGE_VIEWPORT_CAPTURE, IMAGE_VIEWPORT_LINK,
     REGIONS_CHANGE_MODES, REGIONS_COPY_SHAPES, REGIONS_DRAW_SHAPE,
     REGIONS_GENERATE_SHAPES, REGIONS_HISTORY_ACTION, REGIONS_HISTORY_ENTRY,
     REGIONS_MODIFY_SHAPES, REGIONS_PROPERTY_CHANGED, REGIONS_SET_PROPERTY,
@@ -142,6 +143,8 @@ export default class Ol3Viewer extends EventSubscriber {
             (params={}) => this.showComments(params)],
         [IMAGE_VIEWPORT_CAPTURE,
             (params={}) => this.captureViewport(params)],
+        [IMAGE_VIEWPORT_LINK,
+            (params={}) => this.linkViewport(params)],
         [IMAGE_CANVAS_DATA,
             (params={}) => this.saveCanvasData(params)],
         [VIEWER_SET_SYNC_GROUP,
@@ -1399,6 +1402,68 @@ export default class Ol3Viewer extends EventSubscriber {
         this.viewer.sendCanvasContent(params);
     }
 
+    /**
+     * Shows a dialog with a URL to link to current viewport and rendering settings
+     *
+     * @param {Object} params the event notification parameters. Need config_id
+     */
+    linkViewport(params={}) {
+        if (params.config_id !== this.image_config.id  ||
+            this.viewer === null) return;
+
+        // Get current search params and add/override with others
+        let search = new Map();
+        if (window.location.search.length > 0) {
+            let values = window.location.search.substr(1)
+                .split('&')
+                .map(kv => kv.split('='))
+                .map(kv => [kv[0].toLowerCase(), kv[1]]);
+            search = new Map(values);
+        }
+
+        let view = this.viewer.viewer_.getView();
+        let image_info = this.image_config.image_info;
+        let args = [];
+        let center = view.getCenter();
+        args.push([REQUEST_PARAMS.CENTER_X, parseInt(center[0])]);
+        args.push([REQUEST_PARAMS.CENTER_Y, (-parseInt(center[1]))]);
+        args.push([REQUEST_PARAMS.ZOOM, parseInt(100 / view.getResolution())]);
+
+        let channels = image_info.channels;
+        let chs = channels.map(
+            (ch, i) => {
+                let w = ch.window;
+                return `${ ch.active ? '' : '-'}${i+1}|${w.start}:${w.end}$${ ch.color }`
+            }
+        )
+        args.push([REQUEST_PARAMS.CHANNELS, chs.join(",")]);
+        args.push([REQUEST_PARAMS.MODEL, image_info.model.toLowerCase()[0]]);
+
+        let maps = channels.map(ch => ({
+            inverted: {enabled:ch.inverted},
+            quantization: {family: ch.family, coefficient: ch.coefficient}
+        }));
+        args.push([REQUEST_PARAMS.MAPS, JSON.stringify(maps)]);
+
+        // Build the URL
+        let url = window.location.origin + window.location.pathname;
+        args.forEach(kv => {
+            search.set(kv[0].toLowerCase(), kv[1]);
+        });
+        let values = [];
+        for (var [key, value] of search) {
+            values.push(`${ key }=${ value }`);
+        }
+        url += '?' + values.join('&');
+
+        let html = `<p>Copy Viewport URL</p>
+            <input id='viewport_url' style='font-size: 12px; width: 100%;' value='${ url }' />`;
+        Ui.showModalMessage(html, 'Close');
+        let viewport_url = document.getElementById('viewport_url');
+        viewport_url.focus();
+        viewport_url.select();
+    }
+
     /**
      * Saves Viewport Canvas Data
      *

src/viewers/viewer-context-menu.html

@@ -29,5 +29,9 @@
             <a click.delegate="captureViewport()"
                tabindex="-1" href="#">Save Viewport as PNG</a>
         </li>
+        <li class="${image_config.image_info.ready ? '' : 'disabled-color'}">
+            <a click.delegate="linkToViewport()"
+               tabindex="-1" href="#">Get Link to Viewport</a>
+        </li>
     </ul>
 </template>

src/viewers/viewer-context-menu.js

@@ -19,7 +19,8 @@
 // dependencies
 import Context from '../app/context';
 import {inject, customElement, BindingEngine, bindable} from 'aurelia-framework';
-import {IMAGE_VIEWPORT_CAPTURE} from '../events/events';
+import {IMAGE_VIEWPORT_CAPTURE,
+    IMAGE_VIEWPORT_LINK} from '../events/events';
 import { VIEWER_ELEMENT_PREFIX } from '../utils/constants';
 
 /**
@@ -194,4 +195,13 @@ export default class ViewerContextMenu {
             IMAGE_VIEWPORT_CAPTURE, {"config_id": this.image_config.id});
     }
 
+    /**
+     * Sends event to show link to current viewport
+     */
+    linkToViewport() {
+        this.hideContextMenu();
+        this.context.eventbus.publish(
+            IMAGE_VIEWPORT_LINK, {"config_id": this.image_config.id});
+    }
+
 }