**Backport:** #55 - Snap on layer after stop and start editing

g3w-suite · Sep 20, 2023 · 605fa54 · 605fa54
1 parent e050e5d
commit 605fa54
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 129 deletions.
diff --git a/.env b/.env
diff --git a/components/ToolsOfTool.vue b/components/ToolsOfTool.vue
@@ -3,13 +3,10 @@
 <!-- vue/components/[email protected] -->
 
 <template>
-  <div id="toolsoftoolcontainer" style="display: flex; flex-direction: column;
-    margin: 5px;
-    padding: 5px;
-    border-radius: 5px;">
+  <div id="toolsoftoolcontainer">
     <template v-for="tool in tools">
-      <component :is="tool.type" :options="tool.options"></component>
-      <divider></divider>
+      <component :is="tool.type" :options="tool.options"/>
+      <divider/>
     </template>
   </div>
 </template>
@@ -19,14 +16,29 @@
   import MeasureComponent from './ToolsOfToolMeasure.vue';
 
   export default {
+
     name: 'Toolsoftool',
+
     props: ['tools'],
+
     components: {
-      snap: SnapComponent,
+      snap:    SnapComponent,
       measure: MeasureComponent
     },
+
     data: function() {
       return {}
-    }
+    },
+
   };
 </script>
+
+<style scoped>
+  #toolsoftoolcontainer {
+    display: flex;
+    flex-direction: column;
+    margin: 5px;
+    padding: 5px;
+    border-radius: 5px;
+  }
+</style>
diff --git a/components/ToolsOfToolSnap.vue b/components/ToolsOfToolSnap.vue
@@ -3,144 +3,229 @@
 <!-- vue/components/toolsoftool/[email protected] -->
 
 <template>
-  <div style="display: flex;width: 100%; justify-content: space-between">
-    <input type="checkbox" class="magic-checkbox snap_tools_of_tools" :id="id" v-model="checked">
-    <label :for="id" v-t-tooltip:right.create="'plugins.editing.toolsoftool.snap'">
-      <span :class="g3wtemplate.font['magnete']" ></span>
+  <div
+    style="
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+  ">
+
+    <!-- SNAP TO LAYER -->
+    <input
+      type    = "checkbox"
+      class   = "magic-checkbox snap_tools_of_tools"
+      :id     = "id"
+      v-model ="checked"
+    >
+    <label
+      :for                     = "id"
+      v-t-tooltip:right.create = "'plugins.editing.toolsoftool.snap'"
+    >
+      <span
+        :class = "g3wtemplate.font['magnete']"
+      ></span>
     </label>
+
+    <!-- SNAP TO ALL LAYERS -->
     <template v-if="showSnapAll" >
-      <input type="checkbox" class="magic-checkbox snap_tools_of_tools" :id="idAll" v-model="checkedAll">
-      <label :for="idAll" v-t-tooltip:left.create="'plugins.editing.toolsoftool.snapall'">
-        <span :class="g3wtemplate.font['magnete']" ></span>
-        <span style="font-weight: bold" :class="g3wtemplate.font['layers']" ></span>
+      <input
+        type    = "checkbox"
+        class   = "magic-checkbox snap_tools_of_tools"
+        :id     = "idAll"
+        v-model = "checkedAll"
+      >
+      <label
+        :for                    = "idAll"
+        v-t-tooltip:left.create = "'plugins.editing.toolsoftool.snapall'"
+      >
+        <span
+          :class = "g3wtemplate.font['magnete']"
+        ></span>
+        <span
+          style  = "font-weight: bold;"
+          :class = "g3wtemplate.font['layers']"
+        ></span>
       </label>
     </template>
+
   </div>
 </template>
 
 <script>
-  const { GUI } = g3wsdk.gui;
-  const { Layer } = g3wsdk.core.layer;
-  let snapInteraction;
-  const mapService = GUI.getService('map');
+
+  const { GUI }        = g3wsdk.gui;
+  const { Layer }      = g3wsdk.core.layer;
+  const mapService     = GUI.getService('map');
   const editingService = require('../services/editingservice');
+
+  let snapInteraction;
+
   export default {
+
     name: "snap",
+
     props: ['options'],
+
     data() {
       return {
-        id: `snap_${Date.now()}`,
-        idAll: `snap_${Date.now()}_all`,
-        checked: false,
-        checkedAll: false,
+        id:          `snap_${Date.now()}`,
+        idAll:       `snap_${Date.now()}_all`,
+        checked:     false,
+        checkedAll:  false,
         showSnapAll: false
-      }
+      };
     },
+
     computed: {
+
       add() {
         return (this.checked || this.checkedAll) && this.options.active;
-      }
+      },
+
     },
+
     methods: {
-      addFeatures(features){
+
+      addFeatures(features) {
         this.features.extend(features)
       },
-      addFeature(feature){
+
+      addFeature(feature) {
         this.addFeatures([feature]);
       },
-      removeFeatures(features){
+
+      removeFeatures(features) {
         features.forEach(feature => this.features.remove(feature));
       },
-      setShowSnapAll(){
-        this.showSnapAll = this.vectorToolboxesEditingState.find(editing => editing.on) && true || false;
-        this.checkedAll = this.showSnapAll ? this.checkedAll : false;
+
+      setShowSnapAll() {
+        this.showSnapAll = !!this.vectorToolboxesEditingState.find(editing => editing.on);
+        this.checkedAll  = this.showSnapAll ? this.checkedAll : false;
       },
+
       activeSnapInteraction() {
-        const snap = this.add;
-        snapInteraction &&  mapService.removeInteraction(snapInteraction);
+        if (snapInteraction) {
+          mapService.removeInteraction(snapInteraction);
+        }
+
         snapInteraction = null;
-        if (snap) {
+
+        // snap = true
+        if (this.add) {
           snapInteraction = new ol.interaction.Snap({
-            source: this.checked && !this.checkedAll && this.options.source,
-            features: this.checkedAll && this.features
+            source:   !this.checkedAll && this.checked && this.options.source, // SNAP TO LAYER: get options source as props pass from toolbox
+            features: this.checkedAll  && this.features                        // SNAP TO ALL:   get features
           });
           mapService.addInteraction(snapInteraction);
         }
       },
-      enableSnapInteraction(bool){
-        if (bool)this.activeSnapInteraction();
-        else snapInteraction && mapService.removeInteraction(snapInteraction);
+
+      enableSnapInteraction(bool) {
+        if (bool) {
+          this.activeSnapInteraction();
+        } else if (snapInteraction) {
+          mapService.removeInteraction(snapInteraction);
+        }
       },
+
     },
+
     watch: {
+
       checked(bool) {
         this.options.checked = bool;
         this.activeSnapInteraction()
       },
+
       checkedAll(bool) {
         this.options.checkedAll = bool;
         this.activeSnapInteraction()
       },
-      'options.active'(bool){
+
+      'options.active'(bool) {
         this.enableSnapInteraction(bool);
-      }
+      },
+
     },
+
     created() {
+
+      /**
+       * @FIXME add description
+       */
       this.features = new ol.Collection();
+
+      /**
+       * @FIXME add description
+       */
       this.sourcesAndEventsKeys = [];
-      // editing toolboxes dependencies
+
+      /**
+       * editing toolboxes dependencies
+       */
       this.vectorToolboxesEditingState = [];
-      // unwatched function
+
+      /**
+       * unwatched function
+       */
       this.unwatches = [];
-      editingService.getLayers().forEach(layer => {
-        const layerId = layer.getId();
-        if (layer.getType() === Layer.LayerTypes.VECTOR) {
+
+      editingService
+        .getLayers()
+        .forEach(layer => {
+          const layerId = layer.getId();
+
+          // skip not vertor layers (raster, alphanumerical..)
+          if (Layer.LayerTypes.VECTOR !== layer.getType()) {
+            return;
+          }
+
           const toolbox = editingService.getToolBoxById(layerId);
-          const source = toolbox.getLayer().getEditingSource();
+          const source  = toolbox.getLayer().getEditingSource();
+
           this.features.extend(source.readFeatures());
-          const addFeaturesKey = source.onbefore('addFeatures', this.addFeatures);
-          const addFeatureKey = source.onbefore('addFeature', this.addFeatures);
-          const clearKey = source.onbefore('clear', () =>{
-            const features = source.readFeatures();
-            this.removeFeatures(features);
-          });
-          const olKey = source.getFeaturesCollection().on('add', evt => this.addFeature(evt.element));
+
           this.sourcesAndEventsKeys.push({
             source,
+            olKey:           source.getFeaturesCollection().on('add', evt => this.addFeature(evt.element)),
             settersAndKeys: {
-              'addFeatures': addFeaturesKey,
-              'addFeature': addFeatureKey,
-              'clear': clearKey
+              'addFeatures': source.onbefore('addFeatures', this.addFeatures),
+              'addFeature':  source.onbefore('addFeature', this.addFeatures),
+              'clear':       source.onbefore('clear', () => { this.removeFeatures(source.readFeatures()); })
             },
-            olKey
           });
-          // handle snap all
+
+          // SNAP TO ALL: check if current editing layer is not equal to `layerId`
           if (this.options.layerId !== layerId) {
             const editing = toolbox.getState().editing;
-            const unwatch = this.$watch(()=> editing.on, this.setShowSnapAll);
-            this.unwatches.push(unwatch);
+            this.unwatches.push(this.$watch(() => editing.on, this.setShowSnapAll));
             this.vectorToolboxesEditingState.push(editing);
           }
-        }
       });
+
       this.setShowSnapAll();
     },
+
     beforeDestroy() {
-      this.sourcesAndEventsKeys.forEach(sourceAndKey =>{
-        const {source, settersAndKeys, olKey} = sourceAndKey;
-        Object.keys(settersAndKeys).forEach(eventName =>{
-          const key = settersAndKeys[eventName];
-          source.un(eventName, key)
+
+      // stops event listeners
+      this
+        .sourcesAndEventsKeys
+        .forEach(d => {
+          Object
+            .keys(d.settersAndKeys)
+            .forEach(event => { d.source.un(event, d.settersAndKeys[event]) });
+          ol.Observable.unByKey(d.olKey)
         });
-        ol.Observable.unByKey(olKey)
-      });
       this.unwatches.forEach(unwatch => unwatch());
-      snapInteraction = null;
-      this.unwatches = null;
+
+      snapInteraction                  = null;
+      this.unwatches                   = null;
       this.vectorToolboxesEditingState = null;
-      this.sourcesAndEventsKeys = null;
-    }
-  }
+      this.sourcesAndEventsKeys        = null;
+    },
+
+  };
 </script>
 
 <style scoped>

diff --git a/toolboxes/toolsfactory.js b/toolboxes/toolsfactory.js
@@ -454,13 +454,13 @@ function EditorToolsFactory() {
           })
         }
         // in case of Polygon Geometry
-        else if (Geometry.isPolygonGeometryType(geometryType)){
-            tools = tools = this.createTools({
-              layer,
-              type: 'Polygon',
-              capabilities,
-              isMultiGeometry
-            })
+        else if (Geometry.isPolygonGeometryType(geometryType)) {
+          tools = tools = this.createTools({
+            layer,
+            type: 'Polygon',
+            capabilities,
+            isMultiGeometry
+          })
         }
         break;
       case Layer.LayerTypes.TABLE: