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=2841cb161cd2f12e8413f919d09168b3",
     "/assets/scripts/volumes.js": "/assets/scripts/volumes.js?id=68b2595cd29676ad8496e5f5a04a32f5",
+    "/assets/scripts/annotations.js": "/assets/scripts/annotations.js?id=c8439caed612fb0ded80425c64937956",
     "/assets/styles/main.css": "/assets/styles/main.css?id=bf09d95dc04208c3ee738dafbf8e123c"
 }

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

@@ -0,0 +1,5 @@
+import './settingsTabPlugins';
+import ContextLayerMixin from './mixins/ContextLayerMixin';
+import {annotationCanvasMixins} from './import';
+
+annotationCanvasMixins.push(ContextLayerMixin);

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

@@ -0,0 +1,123 @@
+<script>
+import { Collapse } from 'uiv';
+/**
+ * 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,
+        }
+    },
+    computed: {
+        opacity() {
+            return parseFloat(this.opacityValue);
+        },
+        shown() {
+            return this.opacity > 0;
+        },
+    },
+    methods: {
+        toggleActive(id) {
+            if(this.activeId === id) {
+                // do nothing
+            } else {
+                this.activeId = id;
+            }
+        }
+    },
+    watch: {
+        opacity(opacity) {
+            if (opacity < 1) {
+                this.settings.set('contextLayerOpacity', opacity);
+            } else {
+                this.settings.delete('contextLayerOpacity');
+            }
+            // TODO: Implement OL-layer that shows mosaic
+            // this.layer.setOpacity(opacity);
+        },
+        // save the ID of the currently selected overlay in settings
+        activeId(activeId) {
+            this.settings.set('contextLayerId', activeId);
+        }
+    },
+    created() {
+        this.volumeId = biigle.$require('annotations.volumeId');
+        this.overlays = biigle.$require('annotations.overlays');
+
+        // check if there are context-overlays
+        if(this.overlays.length !== 0) {
+            // 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');
+            }
+        }
+    },
+};
+</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 SettingsTabPlugins = biigle.$require('annotations.components.settingsTabPlugins');
+export let annotationCanvasMixins = biigle.$require('annotations.stores.canvasMixins');

src/resources/assets/js/annotations/mixins/ContextLayerMixin.vue

@@ -0,0 +1,42 @@
+<script>
+import TileLayer from 'ol/layer/Tile';
+import TileWMS from 'ol/source/TileWMS';
+
+
+
+/**
+ * Mixin for the annotationCanvas component that contains logic for the Context-Layer (Geo-Overlay) interaction.
+ *
+ * @type {Object}
+ */
+export default {
+    data() {
+        return {
+            overlays: [],
+        };
+    },
+    methods: {
+
+    },
+    mounted() {
+        this.overlays = biigle.$require('annotations.overlays');
+        // console.log('geoOverlays: ', this.overlays);
+        // console.log('activeId: ', this.settings);
+
+        for(let i = this.overlays.length - 1; i >= 0; i--) {
+                if(this.overlays[i].type == 'webmap') {
+                    let wmsTileLayer =  new TileLayer({
+                        source: new TileWMS({
+                            url: this.overlays[i].attrs.url,
+                            params: {'LAYERS': this.overlays[i].attrs.layers, 'TILED': true},
+                            serverType: 'geoserver',
+                            transition: 0,
+                        }),
+                    });
+                    wmsTileLayer.set('id', this.overlays[i].id);
+                    // this.map.push(wmsTileLayer);
+                }
+        }
+    }
+};
+</script>

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,4 @@
+<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() !!});
+</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',