From 605fa54890ae49158cca45f136709c3746e294e4 Mon Sep 17 00:00:00 2001
From: volterra79 <boccacci.francesco@gmail.com>
Date: Wed, 20 Sep 2023 14:56:36 +0200
Subject: [PATCH] **Backport:** #55  - Snap on layer after stop and start
 editing

---
 .env                           |   1 -
 components/ToolsOfTool.vue     |  28 +++--
 components/ToolsOfToolSnap.vue | 219 +++++++++++++++++++++++----------
 toolboxes/toolsfactory.js      |  14 +--
 workflows/editingworkflow.js   |  93 +++++++-------
 5 files changed, 226 insertions(+), 129 deletions(-)
 delete mode 100644 .env

diff --git a/.env b/.env
deleted file mode 100644
index 1166e113..00000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-G3WCLIENT_LIBRARIES='/home/volterra79/PROGETTI/g3w-client/dist/client/js'
diff --git a/components/ToolsOfTool.vue b/components/ToolsOfTool.vue
index dcc222d9..3f89ff9a 100644
--- a/components/ToolsOfTool.vue
+++ b/components/ToolsOfTool.vue
@@ -3,13 +3,10 @@
 <!-- vue/components/toolsoftool.js@v3.4 -->
 
 <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
index afba7f8c..76a22e7a 100644
--- a/components/ToolsOfToolSnap.vue
+++ b/components/ToolsOfToolSnap.vue
@@ -3,144 +3,229 @@
 <!-- vue/components/toolsoftool/snap.js@v3.4 -->
 
 <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
index bacfd6aa..be1e11ea 100644
--- 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:
diff --git a/workflows/editingworkflow.js b/workflows/editingworkflow.js
index f5818d4c..f8238b55 100644
--- a/workflows/editingworkflow.js
+++ b/workflows/editingworkflow.js
@@ -1,11 +1,11 @@
-const {base, inherit} = g3wsdk.core.utils;
-const {Workflow} = g3wsdk.core.workflow;
-const {Layer} = g3wsdk.core.layer;
-const {isPointGeometryType} = g3wsdk.core.geometry.Geometry;
+const { base, inherit }       = g3wsdk.core.utils;
+const { Workflow }            = g3wsdk.core.workflow;
+const { Layer }               = g3wsdk.core.layer;
+const { isPointGeometryType } = g3wsdk.core.geometry.Geometry;
 
-function EditingWorkflow(options={}) {
+function EditingWorkflow(options = {}) {
   base(this, options);
-  this.helpMessage = options.helpMessage ? {help:options.helpMessage} : null;
+  this.helpMessage  = options.helpMessage ? { help: options.helpMessage } : null;
   this._toolsoftool = [];
 }
 
@@ -13,71 +13,75 @@ inherit(EditingWorkflow, Workflow);
 
 const proto = EditingWorkflow.prototype;
 
-proto.addToolsOfTools = function({step, tools=[]}){
+proto.addToolsOfTools = function({ step, tools = [] }) {
+
   const toolsOfTools = {
+
     snap: {
       type: 'snap',
       options: {
         checkedAll: false,
         checked: false,
         active: true,
-        run({layer}){
-          this.active = true;
-          this.layerId = this.layerId || layer.getId();
-          this.source = this.source || layer.getEditingLayer().getSource();
+        run({ layer }) {
+          this.active  = true;
+          this.layerId = layer.getId();
+          this.source  = layer.getEditingLayer().getSource();
         },
-        stop(){
+        stop() {
           this.active = false;
         }
       }
     },
-    measure:  {
+
+    measure: {
       type: 'measure',
       options: {
         checked: false,
-        run(){
-          setTimeout(()=>{
-            this.onChange(this.checked);
-          })
+        run() {
+          setTimeout(() => { this.onChange(this.checked); })
         },
-        stop(){
+        stop() {
           step.getTask().removeMeasureInteraction();
         },
-        onChange(bool){
+        onChange(bool) {
           this.checked = bool;
           step.getTask()[bool ? 'addMeasureInteraction':  'removeMeasureInteraction']();
         },
-        onBeforeDestroy(){
+        onBeforeDestroy() {
           this.onChange(false);
         }
       }
-    }
+    },
+
   };
-  step.on('run', ({inputs, context}) => {
+
+  step.on('run', ({ inputs, context }) => {
     const layer = inputs.layer;
-    if (this._toolsoftool.length == 0) {
-      tools.forEach(tool =>{
-        if (tool === 'measure') {
-          if (layer.getType() === Layer.LayerTypes.VECTOR && !isPointGeometryType(layer.getGeometryType()))
-            this._toolsoftool.push(toolsOfTools[tool]);
-        } else this._toolsoftool.push(toolsOfTools[tool]);
+    if (0 == this._toolsoftool.length) {
+      tools.forEach(tool => {
+        if (
+          'measure' !== tool ||
+          ('measure' === tool && Layer.LayerTypes.VECTOR === layer.getType() && !isPointGeometryType(layer.getGeometryType()))
+        ) {
+          this._toolsoftool.push(toolsOfTools[tool]);
+        }
       });
     }
-    this._toolsoftool.forEach(tooloftool=> tooloftool.options.run({layer}));
+    this._toolsoftool.forEach(t => t.options.run({ layer }));
     this.emit('settoolsoftool', this._toolsoftool);
   });
+
   step.on('stop', () => {
-    this._toolsoftool.forEach(tooloftool=> tooloftool.options.stop());
+    this._toolsoftool.forEach(t => t.options.stop());
   });
 };
 
 proto.setHelpMessage = function(message) {
-  this.helpMessage = {
-    help: message
-  };
+  this.helpMessage = { help: message };
 };
 
-proto.getHelpMessage = function(){
+proto.getHelpMessage = function() {
   return this.helpMessage;
 };
 
@@ -86,26 +90,26 @@ proto.getFeatures = function() {
 };
 
 proto.startFromLastStep = function(options) {
-  let steps = this.getSteps();
-  this.setSteps([steps.pop()]);
+  this.setSteps([ this.getSteps().pop() ]);
   return this.start(options);
 };
 
 proto.getCurrentFeature = function() {
-  const features = this.getFeatures();
-  const length = this.getFeatures().length;
-  return features[length -1];
+  const feats = this.getFeatures();
+  return feats[feats.length -1];
 };
 
 proto.getLayer = function() {
-  return this.getSession().getEditor().getLayer()
+  return this.getSession().getEditor().getLayer();
 };
 
 proto.getSession = function() {
   return this.getContext().session;
 };
 
-//bind interrupt event
+/**
+ * bind interrupt event
+ */
 proto.escKeyUpHandler = function(evt) {
   if (evt.keyCode === 27) {
     evt.data.workflow.reject();
@@ -118,16 +122,13 @@ proto.unbindEscKeyUp = function() {
 };
 
 proto.bindEscKeyUp = function(callback=()=>{}) {
-  $(document).on('keyup', {
-    workflow: this,
-    callback
-  }, this.escKeyUpHandler);
+  $(document).on('keyup', { workflow: this, callback }, this.escKeyUpHandler);
 };
 
 proto.registerEscKeyEvent = function(callback){
   this.on('start', () => this.bindEscKeyUp(callback));
   this.on('stop', () => this.unbindEscKeyUp());
 };
-/////
+
 
 module.exports = EditingWorkflow;