retrieve opacity for features on map

src/components/FeatureType/SymbologySelector.vue

@@ -107,7 +107,7 @@ export default {
           html_name: 'couleur',
           value: '#000000',
         },
-        opacity: 0,
+        opacity: 1,
       }
     };
   },

src/services/map-service.js

@@ -340,6 +340,19 @@ const mapService = {
     }
   },
 
+  retrieveFeatureOpacity: function (featureType, properties) {
+    const colorsStyle = featureType.colors_style;
+    if (featureType && colorsStyle && colorsStyle.custom_field_name) {
+      const currentValue = properties[colorsStyle.custom_field_name];
+      if (currentValue) {
+        const colorStyle = colorsStyle.opacities[currentValue];
+        return parseFloat(colorStyle ? colorStyle : featureType.opacity);
+      }
+    }
+    //* parseFloat is not necessary but used for precaution
+    return parseFloat(featureType.opacity);
+  },
+
   addVectorTileLayer: function (url, projectId, featureTypes, formFilters) {
     const format_cfg = {/*featureClass: Feature*/ };
     const mvt = new MVT(format_cfg);
@@ -380,7 +393,9 @@ const mapService = {
           color : '#000000';
 
     const rgbaColor = asArray(colorValue);
-    rgbaColor[3] = 0.5;//opacity
+    console.log({ featureType, properties });
+    //* set opacity from feature-type colors_style
+    rgbaColor[3] = this.retrieveFeatureOpacity(featureType, properties) || 0.5;//opacity
     const hiddenStyle = new Style();
 
     const defaultStyle = new Style(
@@ -493,7 +508,7 @@ const mapService = {
         feature_type = feature.getProperties().feature_type ||
         featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
       }
-    } else { //? TPS: I couldn't find when this code is used, is this still in use ?
+    } else { //? TPD: I couldn't find when this code is used, is this still in use ?
       status = feature.status;
       if (status) status = status.name;
       date_maj = feature.updated_on;

src/views/FeatureType/FeatureTypeSymbology.vue

@@ -99,7 +99,10 @@
                 feature_type.colors_style.value.icons[option] :
                 null
               "
-              :init-opacity="feature_type.colors_style.opacity"
+              :init-opacity="feature_type.colors_style.value ?
+                feature_type.colors_style.value.opacities[option] :
+                null
+              "
               :geom-type="feature_type.customfield_set.geomType"
               @set="setColorsStyle"
             />
@@ -150,10 +153,12 @@ export default {
           fields: [],
           colors: {},
           icons: {},
+          opacities: {},
           custom_field_name: '',
           value: {
             colors: {},
-            icons: {}
+            icons: {},
+            opacities: {},
           }
         },
       },
@@ -240,12 +245,15 @@ export default {
     ]),
 
     initForm() {
-      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color));
-      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon));
+      this.form.color = JSON.parse(JSON.stringify(this.feature_type.color)); //? wouldn't be better to use lodash: https://medium.com/@pmzubar/why-json-parse-json-stringify-is-a-bad-practice-to-clone-an-object-in-javascript-b28ac5e36521
+      this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon)); //? since the library is already imported ?
       this.form.colors_style = {
         ...this.form.colors_style,
         ...JSON.parse(JSON.stringify(this.feature_type.colors_style))
       };
+      if (!this.form.colors_style.value['opacities']) { //* if the opacity values were never setted (would be better to find out why)
+        this.form.colors_style.value['opacities'] = {};
+      }
       if (this.feature_type.colors_style && Object.keys(this.feature_type.colors_style.colors).length > 0) {
         this.selectedCustomfield =
           this.feature_type.customfield_set.find(
@@ -256,8 +264,6 @@ export default {
 
     setDefaultStyle(e) {
       const { color, icon, opacity } = e.value;
-      console.log({ color, icon, opacity });
-      console.log('this.form', this.form);
       this.form.color = color.value;
       this.form.icon = icon;
       this.form.opacity = opacity;
@@ -266,14 +272,12 @@ export default {
     setColorsStyle(e) {
       const { name, value } = e;
       const { color, icon, opacity } = value;
-      console.log({ color, icon, opacity });
-      console.log(this.form.colors_style.colors);
-      console.log(this.form.colors_style.colors[name]);
       this.form.colors_style.colors[name] = color;
       this.form.colors_style.icons[name] = icon;
-      //this.form.colors_style.icons[name] = icon;
+      this.form.colors_style.opacities[name] = opacity;
       this.form.colors_style.value.colors[name] = color;
       this.form.colors_style.value.icons[name] = icon;
+      this.form.colors_style.value.opacities[name] = opacity; //? why do we need to duplicate values ? for MVT ?
     },
 
     sendFeatureSymbology() {