@kalisio/kdk 1.6.0 → 1.7.0

package/lib/map/client/components/widget/KInformationBox.vue

@@ -1,13 +1,16 @@
 <template>
-  <div :style="widgetStyle">
+  <div id="information-box" class="column" :style="widgetStyle">
     <div v-if="schema && properties" class="fit row">
-      <k-panel id="information-box-actions" class="q-pa-sm" :content="actions" direction="vertical" />
       <k-scroll-area class="col" :maxHeight="widgetHeight">
         <k-view class="q-pa-md" :schema="schema" :values="properties" :separators="true" />
       </k-scroll-area>
     </div>
     <div v-else class="absolute-center">
-      <k-stamp icon="las la-exclamation-circle" icon-size="3rem" :text="$t('KInformationBox.NO_FEATURE_PROPERTIES')" />
+      <k-stamp
+        icon="las la-exclamation-circle"
+        icon-size="3rem"
+        :text="$t('KInformationBox.NO_FEATURE_PROPERTIES')"
+        text-size="1rem" />
     </div>
   </div>
 </template>
@@ -35,19 +38,49 @@ export default {
   data () {
     return {
       schema: null,
-      properties: null,
-      actions: []
+      properties: null
     }
   },
   watch: {
-    feature: function () {
-      this.refresh()
+    feature: {
+      handler () {
+        this.refresh()
+      },
+      immediate: true
     }
   },
   methods: {
+    refreshActions () {
+      this.$store.patch('window', {
+        widgetActions: [
+          {
+            id: 'center-view',
+            icon: 'las la-eye',
+            tooltip: this.$t('KInformationBox.CENTER_ON'),
+            visible: this.feature,
+            handler: this.onCenterOn
+          },
+          {
+            id: 'copy-properties',
+            icon: 'las la-clipboard',
+            tooltip: this.$t('KInformationBox.COPY_PROPERTIES'),
+            visible: this.properties,
+            handler: this.onCopyProperties
+          },
+          {
+            id: 'export-feature',
+            icon: 'img:statics/json-icon.svg',
+            tooltip: this.$t('KInformationBox.EXPORT_FEATURE'),
+            visible: this.feature,
+            handler: this.onExportFeature
+          }
+        ]
+      })
+    },
     refresh () {
       this.properties = null
       this.schema = null
+      this.refreshActions()
       if (this.feature && this.layer) {
         this.kActivity.centerOnSelection()
         this.kActivity.addSelectionHighlight('information-box')
@@ -75,6 +108,8 @@ export default {
         })
         this.schema = schema
         this.properties = properties
+        // Refresh the actions
+        this.refreshActions()
       }
     },
     onCenterOn () {
@@ -92,10 +127,12 @@ export default {
     },
     onExportFeature () {
       if (this.feature) {
-        const name = _.get(this.feature, 'name', 'feature') ||
-                     _.get(this.feature, 'label', 'feature') ||
-                     _.get(this.feature, 'properties.name', 'feature') ||
-                     _.get(this.feature, 'properties.label', 'feature')
+        const name = _.get(this.feature, 'name') ||
+                      _.get(this.feature, 'label') ||
+                      _.get(this.feature, 'properties.name') ||
+                      _.get(this.feature, 'properties.label') ||
+                      _.get(this.layer, 'name') ||
+                      _.get(this.layer, 'properties.name')
         const file = name + '.geojson'
         const status = exportFile(file, JSON.stringify(this.feature))
         if (status) this.$toast({ type: 'error', message: this.$t('KInformationBox.FEATURE_EXPORTED', { file }) })
@@ -110,18 +147,6 @@ export default {
     this.$options.components['k-view'] = this.$load('form/KView')
     this.$options.components['k-stamp'] = this.$load('frame/KStamp')
   },
-  created () {
-    // Registers the actions
-    this.actions = {
-      default: [
-        { id: 'center-view', icon: 'las la-eye', tooltip: this.$t('KInformationBox.CENTER_ON'), handler: this.onCenterOn },
-        { id: 'copy-properties', icon: 'las la-clipboard', tooltip: this.$t('KInformationBox.COPY_PROPERTIES'), handler: this.onCopyProperties },
-        { id: 'export-feature', icon: 'img:statics/json-icon.svg', tooltip: this.$t('KInformationBox.EXPORT_FEATURE'), handler: this.onExportFeature }
-      ]
-    }
-    // Refresh the component
-    this.refresh()
-  },
   beforeDestroy () {
     this.kActivity.removeSelectionHighlight('information-box')
   }

package/lib/map/client/components/widget/KMapillaryViewer.vue

@@ -1,10 +1,6 @@
 <template>
-  <div :style="widgetStyle">
-    <div class="fit row">
-      <q-resize-observer @resize="onResized" />
-      <k-panel id="mapillary-actions" class="q-pa-sm" :content="actions" direction="vertical" />
-      <div class="col" id="mapillary-container"></div>
-    </div>
+  <div id="mapillary-widget" class="column" :style="widgetStyle">
+    <div class="col" id="mapillary-container" />
   </div>
 </template>
 
@@ -24,13 +20,17 @@ export default {
   mixins: [baseWidget],
   data () {
     return {
-      selection: this.$store.get('selection'),
-      actions: []
+      selection: this.$store.get('selection')
     }
   },
   watch: {
     'selection.location': function () {
       this.refresh()
+    },
+    widgetHeight: {
+      handler () {
+        if (this.mapillaryViewer) this.mapillaryViewer.resize()
+      }
     }
   },
   methods: {
@@ -62,7 +62,22 @@ export default {
         }
       }
     },
+    refreshActions () {
+      this.$store.patch('window', {
+        widgetActions: [
+          {
+            id: 'center',
+            icon: 'las la-eye',
+            tooltip: 'KMapillaryViewer.CENTER_ON',
+            visible: !_.isNil(this.imageId),
+            handler: this.centerMap
+          }
+        ]
+      })
+    },
     async refresh () {
+      // Refresh the actions
+      this.refreshActions()
       if (_.has(this.selection, 'states.mapillary')) {
         this.restoreStates()
         if (this.imageId) await this.refreshView()
@@ -71,6 +86,8 @@ export default {
         const location = this.selection.location
         if (location) await this.moveCloseTo(location.lat, location.lng)
       }
+      // Refresh the actions
+      this.refreshActions()
     },
     async moveCloseTo (lat, lon) {
       // Query the images according a bbox that contains the given position
@@ -100,7 +117,7 @@ export default {
         })
         this.refreshView()
       } else {
-        this.$toast({ type: 'negative', message: this.$t('KMapillaryWidget.NO_IMAGE_FOUND_CLOSE_TO') })
+        this.$toast({ type: 'negative', message: this.$t('KMapillaryViewer.NO_IMAGE_FOUND_CLOSE_TO') })
       }
     },
     centerMap () {
@@ -124,23 +141,12 @@ export default {
       this.bearing = await this.mapillaryViewer.getBearing()
       this.centerMap()
       this.kActivity.updateSelectionHighlight('mapillary', this.getMarkerFeature())
-    },
-    onResized () {
-      if (this.mapillaryViewer) this.mapillaryViewer.resize()
     }
   },
   beforeCreate () {
     // laod the required components
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
   },
-  created () {
-    // Registers the actions
-    this.actions = {
-      default: [
-        { id: 'center', icon: 'las la-eye', tooltip: this.$t('KMapillaryWidget.CENTER_ON'), handler: this.centerMap }
-      ]
-    }
-  },
   mounted () {
     // Create the viewer
     this.mapillaryViewer = new Viewer({