Implement context fusion

src/GeoServiceProvider.php

@@ -47,7 +47,9 @@ public function boot(Modules $modules, Router $router)
                 'volumesStyles',
                 'volumesEditRight',
                 'volumesEditScripts',
-                'volumesEditStyles'
+                'volumesEditStyles',
+                'annotationsScripts',
+                'annotationsSettingsTab',
             ],
             'apidoc' => [__DIR__.'/Http/Controllers/Api/'],
         ]);

src/public/assets/scripts/annotations.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/*!
+ * Vue.js v2.6.14
+ * (c) 2014-2021 Evan You
+ * Released under the MIT License.
+ */

src/public/mix-manifest.json

@@ -1,5 +1,6 @@
 {
     "/assets/scripts/main.js": "/assets/scripts/main.js?id=96753d36cf46d8eacaa6796d9ee4f4a9",
     "/assets/scripts/volumes.js": "/assets/scripts/volumes.js?id=2ce8d2ace338e55176513eecf001316e",
+    "/assets/scripts/annotations.js": "/assets/scripts/annotations.js?id=372f959e1409d8f56cd4ae6a9e16d591",
     "/assets/styles/main.css": "/assets/styles/main.css?id=bf09d95dc04208c3ee738dafbf8e123c"
 }

src/resources/assets/js/annotations/annotations.js

@@ -0,0 +1 @@
+import './settingsTabPlugins';

src/resources/assets/js/annotations/components/settingsTabPlugin.vue

@@ -0,0 +1,269 @@
+<script>
+import { Collapse } from 'uiv';
+import {Events} from '../import';
+import TileLayer from '@biigle/ol/layer/Tile';
+import TileWMS from '@biigle/ol/source/TileWMS.js';
+import ZoomifySource from '@biigle/ol/source/Zoomify';
+import {Projection} from '@biigle/ol/proj';
+
+/**
+ * The plugin component to edit the context-layer appearance.
+ *
+ * @type {Object}
+ */
+export default {
+    components: {
+        collapse: Collapse
+    },
+    props: {
+        settings: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            opacityValue: '1',
+            volumeId: null,
+            overlays: null,
+            showLayers: false,
+            activeId: null,
+            currentImage: null,
+            overlayUrlTemplate: '',
+            loaded: false,
+        }
+    },
+    computed: {
+        opacity() {
+            return parseFloat(this.opacityValue);
+        },
+        shown() {
+            return this.opacity > 0;
+        },
+        // return the geo-overlay matching the currently active ID
+        activeOverlay() {
+            if(this.overlays !== null) {
+                return this.overlays.find(x => x.id === this.activeId);
+            }
+            return null;
+        },
+        // Implement OL-layer that shows mosaic
+        layer() {
+            let tileLayer = null;
+
+            if(this.activeOverlay !== null) {
+                if(this.activeOverlay.type === 'webmap') {
+                    tileLayer =  new TileLayer({
+                            source: new TileWMS({
+                                url: this.activeOverlay.attrs.url,
+                                params: {'LAYERS': this.activeOverlay.attrs.layers, 'TILED': true},
+                                serverType: 'geoserver',
+                                transition: 0,
+                            }),
+                        });
+                } else {
+                    // geoTIFF layer
+                    tileLayer = this.createOverlayTile(this.activeOverlay);
+                }
+                tileLayer.set('id', this.activeOverlay.id);
+                tileLayer.set('name', 'contextLayer');
+                tileLayer.setOpacity(this.opacity);
+            }
+
+            return tileLayer;
+        }
+    },
+    methods: {
+        toggleActive(id) {
+            if(this.activeId === id) {
+                // do nothing
+            } else {
+                this.activeId = id;
+            }
+        },
+        // takes an overlay as input and returns ol-tileLayer in pixel-projection
+        createOverlayTile(overlay) {
+            // define a projection for each overlay (thus included id)
+            let projection = new Projection({
+                //needs to be same code as in annotationCanvas.vue in biigle/core
+                code: 'biigle-image',
+                units: 'pixels',
+            });
+
+            let sourceLayer = new ZoomifySource({
+                    url: this.overlayUrlTemplate.replaceAll(':id', overlay.id),
+                    size: [overlay.attrs.width, overlay.attrs.height],
+                    crossOrigin: 'anonymous',
+                    zDirection: -1, // Ensure we get a tile with the screen resolution or higher
+                    projection: projection
+            });
+
+            // let extentPixel = [
+            // $top_left = [0, 0];
+            // $bottom_left = [0, $height];
+            // $top_right = [$width, 0];
+            // $bottom_right = [$width, $height];
+            // ];
+
+            // let extentEPSG4326 = [
+            //     overlay.attrs.top_left_lng, 
+            //     overlay.attrs.top_left_lat, 
+            //     overlay.attrs.bottom_right_lng, 
+            //     overlay.attrs.bottom_right_lat
+            // ];
+            // define the source extent (units = pixels) and targetExtent (EPSG:3857, units = meters)
+            // let extent = sourceLayer.getTileGrid().getExtent();
+            // let targetExtent = sourceLayer.getTileGrid().getExtent();
+
+            // // specify the point resolution in meters through custom function 
+            // // (default transforms the point from pixel to EPSG:4326, units = degrees)
+            // projection.setGetPointResolution(
+            //     (r) => r * Math.max(
+            //                 getWidth(targetExtent) / getWidth(extent),
+            //                 getHeight(targetExtent) / getHeight(extent)
+            //             )
+            // );
+
+            // // add coordinate transforms between the source-projection and target projection (same as view-projection)
+            // addCoordinateTransforms(
+            //     projection,
+            //     'EPSG:3857',
+            //     ([x, y]) => [
+            //         targetExtent[0] +
+            //         ((x - extent[0]) * getWidth(targetExtent)) / getWidth(extent),
+            //         targetExtent[1] +
+            //         ((y - extent[1]) * getHeight(targetExtent)) / getHeight(extent),
+            //     ],
+            //     ([x, y]) => [
+            //         extent[0] +
+            //         ((x - targetExtent[0]) * getWidth(extent)) / getWidth(targetExtent),
+            //         extent[1] +
+            //         ((y - targetExtent[1]) * getHeight(extent)) / getHeight(targetExtent),
+            //     ]
+            // );
+
+            let tileLayer = new TileLayer({
+                source: sourceLayer,
+            });
+
+            return tileLayer;
+        },
+        updateCurrentImage(id, image) {
+            this.currentImage = image;
+        },
+    },
+    watch: {
+        // save the ID of the currently selected overlay in settings
+        activeId(activeId) {
+            this.settings.set(`${this.volumeId}-contextLayerId`, activeId);
+        },
+        opacity(opacity) {
+            if (opacity < 1) {
+                this.settings.set(`${this.volumeId}-contextLayerOpacity`, opacity);
+            } else {
+                this.settings.delete(`${this.volumeId}-contextLayerOpacity`);
+            }
+        },
+        // change layer on map instance upon changes
+        layer(layer) {
+            if(layer !== null) {
+                let layerExists = false;
+
+                this.map.getLayers().forEach((layer) => {
+                    if(layer.get('name') === 'contextLayer') {
+                        // set visibility of contextLayers false (except currently active layer)
+                        if(layer.get('id') !== this.activeOverlay.id) {
+                            layer.setVisible(false);
+                        } else {
+                            layerExists = true;
+                            layer.setOpacity(this.opacity);
+                            layer.setVisible(true);
+                        }
+                    }
+                });
+                // if layer does not exist yet, add it to map
+                if(!layerExists) {
+                    this.map.addLayer(this.layer);
+                }
+            }
+        }
+    },
+    created() {
+        this.volumeId = biigle.$require('annotations.volumeId');
+        this.overlays = biigle.$require('annotations.overlays');
+        this.overlayUrlTemplate = biigle.$require('annotations.overlayUrlTemplate');
+        this.map = null;
+
+        // define the names on volume-basis
+        const contextLayerId = `${this.volumeId}-contextLayerId`;
+        const contextLayerOpacity = `${this.volumeId}-contextLayerOpacity`;
+        // check if there are context-overlays
+        if(this.overlays.length !== 0) {
+            if(this.settings.has(contextLayerId)) {
+                this.activeId = this.settings.get(contextLayerId);
+            } else {
+                // initially set activeId to first overlay
+                this.activeId = this.overlays[0].id;
+            }
+            // check if an opacity preference is available in settings and change it in case
+            if (this.settings.has(contextLayerOpacity)) {
+                this.opacityValue = this.settings.get(contextLayerOpacity);
+            }
+        }
+
+        Events.$on('images.change', this.updateCurrentImage);
+        Events.$on('annotations.map.init', (map) => {
+            this.map = map;
+        });
+    },
+};
+</script>
+<style scoped>
+    p {
+        margin: 0;
+    }
+
+    /* layer-items settings */
+    .list-group-item.active {
+        background-color: #353535;
+        color: #ffffff;
+    }
+
+    .custom {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 10px;
+    }
+
+    .custom > .ellipsis {
+        order: 1;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .layer-button {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+        background-color: var(--body-bg);
+        width: 100%;
+        text-decoration: none;
+        border: none;
+        color: inherit;
+        padding-bottom: 15px;
+    }
+
+    /* animate the chevron icon when list expands */
+    .icon {
+        transition: ease-in-out .2s;
+    }
+
+    .icon.active {
+        transform: rotateZ(180deg);
+    }
+</style>

src/resources/assets/js/annotations/import.js

@@ -0,0 +1,2 @@
+export let Events = biigle.$require('events');
+export let SettingsTabPlugins = biigle.$require('annotations.components.settingsTabPlugins');

src/resources/assets/js/annotations/settingsTabPlugins.js

@@ -0,0 +1,11 @@
+import Plugin from './components/settingsTabPlugin';
+import {SettingsTabPlugins} from './import';
+
+/**
+ * The plugin component to modify the context layer in the annotation tool.
+ *
+ * @type {Object}
+ */
+if (SettingsTabPlugins) {
+    SettingsTabPlugins.contextLayer = Plugin;
+}

src/resources/views/annotationsScripts.blade.php

@@ -0,0 +1,6 @@
+<script type="text/javascript">
+    biigle.$declare('annotations.overlays', {!! \Biigle\Modules\Geo\GeoOverlay::where('volume_id', $volume->id)->where('context_layer', true)->orderBy('layer_index')->get() !!});
+    biigle.$declare('annotations.overlayUrlTemplate', '{!! Storage::disk(config('geo.tiles.overlay_storage_disk'))->url(':id/:id_tiles/') !!}');
+
+</script>
+<script src="{{ cachebust_asset('vendor/geo/scripts/annotations.js') }}"></script>

src/resources/views/annotationsSettingsTab.blade.php

@@ -0,0 +1,20 @@
+<component :is="plugins.contextLayer" :settings="settings" inline-template>
+    <div v-if="overlays.length !== 0" class="sidebar-tab__section">
+        <h5 title="Opacity of the context layer">Geo Overlay Opacity (<span v-if="shown" v-text="opacity"></span><span v-else>hidden</span>)</h5>
+        <div class="form-group">
+            <input type="range" min="0" max="1" step="0.1" v-model="opacityValue">
+        </div>
+        <button class="layer-button" @click="showLayers = !showLayers" title="Show available geo-overlays">
+            <p>Geo Overlays</p> <i class="icon fa fa-chevron-down" :class="{active: showLayers}" style="font-size: 1.5em;"></i>
+        </button>
+        <collapse v-model="showLayers">
+            <div v-if="overlays.length !== 0">
+                <div v-for="overlay in overlays" :key="overlay.id">
+                    <button :id="overlay.id" :class="{active: overlay.id === activeId}" class="list-group-item custom" v-on:click="toggleActive(overlay.id)">
+                        <span class="ellipsis" :title="overlay.name" v-text="overlay.name"></span>
+                    </button>
+                </div> 
+            </div>
+        </collapse>
+    </div>
+</component>

webpack.mix.js

@@ -19,6 +19,7 @@ mix.setPublicPath('src/public');
 
 mix.js('src/resources/assets/js/geo/main.js', 'assets/scripts').vue()
     .js('src/resources/assets/js/volumes/volumes.js', 'assets/scripts').vue()
+    .js('src/resources/assets/js/annotations/annotations.js', 'assets/scripts').vue()
     .sass('src/resources/assets/sass/main.scss', 'assets/styles')
     .publish({
         provider: 'Biigle\\Modules\\Geo\\GeoServiceProvider',