feat: create a style manager - apply to in memory layers (#1072)

Author: claustres

map/client/components/selection/KSelectedLayerFeatures.vue

@@ -36,7 +36,7 @@
       </template>
       <!-- Feature properties rendering -->
       <template v-slot:default-body="prop">
-        <KView v-if="isFeaturePropertiesNode(prop.node)" 
+        <KView v-if="isFeaturePropertiesNode(prop.node)"
           class="q-pa-md full-width"
           :values="prop.node"
           :schema="schema"
@@ -118,7 +118,7 @@ const layerActions = computed(() => {
     }, {
       id: 'reset-style-selected-features',
       label: 'KSelectedLayerFeatures.RESET_FEATURES_STYLE_LABEL',
-      icon: 'las la-paint-brush',
+      icon: 'las la-ban',
       handler: resetSelectedFeaturesStyle,
       visible: isLayerDataEditable(props.item.layer)
     }, {
@@ -164,7 +164,7 @@ const featureActions = computed(() => {
     }, {
       id: 'reset-style-selected-feature',
       label: 'KSelectedLayerFeatures.RESET_FEATURE_STYLE_LABEL',
-      icon: 'las la-paint-brush',
+      icon: 'las la-ban',
       handler: resetSelectedFeatureStyle,
       visible: isLayerDataEditable(props.item.layer)
     }, {
@@ -200,11 +200,11 @@ const root = computed(() => {
       label: getLabel(feature.properties)
     }, feature.properties)] // Properties only for node displaying it
   }, feature)) // Target feature is required as context for actions
-  // For each feature add a node containing 
+  // For each feature add a node containing
   // Replace default layer actions with new ones
   return Object.assign({
     icon: getIcon(props.item.layer),
-    label: getLabel(props.item.layer),
+    label: getLabel(props.item.layer)
   }, _.omit(props.item.layer, ['icon', 'actions']), { actions: layerActions.value, children })
 })
 

map/client/components/styles/KStyleManager.vue

@@ -70,7 +70,7 @@ import { computed, ref } from 'vue'
 import _ from 'lodash'
 import sift from 'sift'
 import { KGrid } from '../../../../core/client/components'
-import { Filter, Sorter, Store, api } from '@kalisio/kdk/core.client'
+import { Filter, Sorter, api } from '@kalisio/kdk/core.client'
 import KStyleEditor from './KStyleEditor.vue'
 import { useCurrentActivity } from '../../composables/activity.js'
 import { isLayerStyleEditable, editLayerStyle } from '../../utils/utils.layers.js'
@@ -121,7 +121,7 @@ const toolbar = computed(() => {
   ]
 })
 const layerMenuContent = computed(() => {
-  const visibleLayers = CurrentActivity.value.getLayers().filter(sift({ isVisible: true, scope: 'user', _id: { $exists: true } }))
+  const visibleLayers = CurrentActivity.value.getLayers().filter(sift({ isVisible: true, scope: 'user' }))
   return _.map(visibleLayers, layer => {
     return {
       id: layer._id,
@@ -132,8 +132,11 @@ const layerMenuContent = computed(() => {
 })
 
 // Functions
-function applyToLayer (layer, styleToApply) {
-  editLayerStyle(layer, styleToApply)
+async function applyToLayer (layer, styleToApply) {
+  await editLayerStyle(layer, styleToApply)
+  if (!layer._id) {
+    await CurrentActivity.value.resetLayer(layer)
+  }
 }
 function applyToSelection (styleToApply) {
   const type = { Point: 'point', LineString: 'line', Polygon: 'polygon' }

map/client/i18n/map_en.json

@@ -52,6 +52,7 @@
       "ADD_LAYER": "Add a layer",
       "EDIT_LABEL": "Edit properties",
       "EDIT_LAYER_STYLE_LABEL": "Edit style",
+      "RESET_LAYER_STYLE_LABEL": "Reset style",
       "FILTER_DATA_LABEL": "Filter data",
       "VIEW_DATA_LABEL": "View data",
       "CHART_DATA_LABEL": "Chart data",

map/client/i18n/map_fr.json

@@ -52,6 +52,7 @@
       "ADD_LAYER": "Ajouter une couche",
       "EDIT_LABEL": "Editer les propriétés",
       "EDIT_LAYER_STYLE_LABEL": "Editer le style",
+      "RESET_LAYER_STYLE_LABEL": "Réinitialiser le style",
       "FILTER_DATA_LABEL": "Filtrer les données",
       "VIEW_DATA_LABEL": "Voir les données",
       "CHART_DATA_LABEL": "Graphique des données",

map/client/mixins/mixin.activity.js

@@ -131,12 +131,16 @@ export const activity = {
     isLayerStyleEditable: layers.isLayerStyleEditable,
     isLayerDataEditable: layers.isLayerDataEditable,
     async resetLayer (layer) {
+      // Keep track of data as we will reset the layer
+      let geoJson
+      if (typeof this.toGeoJson === 'function') geoJson = await this.toGeoJson(layer.name)
       // Reset layer with new setup but keep track of current visibility state
       // as adding the layer back will restore default visibility state
       const isVisible = this.isLayerVisible(layer.name)
       await this.removeLayer(layer.name)
       await this.addLayer(layer)
       if (isVisible) await this.showLayer(layer.name)
+      if (geoJson && (typeof this.toGeoJson === 'function')) this.updateLayer(layer.name, geoJson)
     },
     configureLayerActions (layer) {
       let actions = _.get(this, 'activityOptions.layers.actions', [])
@@ -222,6 +226,12 @@ export const activity = {
       // this one can be triggered from a toolbar to accept or reject changes
       await this.stopEditLayer(status)
     },
+    async onResetLayerStyle (layer) {
+      await layers.editLayerStyle(layer, {})
+      if (!layer._id) {
+        await this.resetLayer(layer)
+      }
+    },
     async onRemoveLayer (layer) {
       // Stop any running edition
       if ((typeof this.isLayerEdited === 'function') && this.isLayerEdited(layer)) await this.stopEditLayer('reject')

map/client/utils/utils.layers.js

@@ -344,7 +344,10 @@ export function isMeasureLayer (layer) {
 export async function editLayerStyle (layer, style) {
   style = _.pick(style, ['point', 'line', 'polygon'])
   if (layer._id) {
-    return await api.getService('catalog').patch(layer._id, { 'cesium.style': style, 'leaflet.style': style })
+    await api.getService('catalog').patch(layer._id, { 'cesium.style': style, 'leaflet.style': style })
+  } else {
+    _.set(layer, 'cesium.style', style)
+    _.set(layer, 'leaflet.style', style)
   }
   return layer
 }