Merge pull request #679 from simonseyock/feature-selection-models

feature selection model as a mixin

classic/selection/FeatureCheckboxModel.js

@@ -0,0 +1,34 @@
+/* Copyright (c) 2015-present The Open Source Geospatial Foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+/**
+ * A checkbox selection model which enables automatic selection of features
+ * in the map when rows are selected in the grid and vice-versa.
+ *
+ * **CAUTION: This class is only usable in applications using the classic
+ * toolkit of ExtJS 6.**
+ *
+ * @class GeoExt.selection.FeatureCheckboxModel
+ */
+Ext.define('GeoExt.selection.FeatureCheckboxModel', {
+    extend: 'Ext.selection.CheckboxModel',
+    alias: [
+        'selection.featurecheckboxmodel',
+    ],
+
+    mixins: [
+        'GeoExt.selection.FeatureModelMixin'
+    ]
+});

classic/selection/FeatureModel.js → classic/selection/FeatureModelMixin.js

@@ -14,17 +14,26 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 /**
-  * A row selection model which enables automatic selection of features
-  * in the map when rows are selected in the grid and vice-versa.
-  *
-  * **CAUTION: This class is only usable in applications using the classic
-  * toolkit of ExtJS 6.**
-  *
-  * @class GeoExt.selection.FeatureModel
-  */
-Ext.define('GeoExt.selection.FeatureModel', {
-    extend: 'Ext.selection.RowModel',
-    alias: 'selection.featuremodel',
+ * A mixin for selection model which enables automatic selection of features
+ * in the map when rows are selected in the grid and vice-versa.
+ *
+ * **CAUTION: This class is only usable in applications using the classic
+ * toolkit of ExtJS 6.**
+ *
+ * @class GeoExt.selection.FeatureModelMixin
+ */
+Ext.define('GeoExt.selection.FeatureModelMixin', {
+    extend: 'Ext.Mixin',
+
+    mixinConfig: {
+        after: {
+            destroy: 'unbindOlEvents',
+            bindComponent: 'bindFeatureModel'
+        },
+        before: {
+            onSelectChange: 'beforeSelectChange'
+        }
+    },
 
     config: {
         /**
@@ -107,11 +116,9 @@ Ext.define('GeoExt.selection.FeatureModel', {
      *
      * @private
      */
-    bindComponent: function() {
+    bindFeatureModel: function () {
         var me = this;
 
-        me.callParent(arguments);
-
         me.selectedFeatures = new ol.Collection();
 
         // detect a layer from the store if not passed in
@@ -123,30 +130,31 @@ Ext.define('GeoExt.selection.FeatureModel', {
             }
         }
 
-        if (!me._destroying) {
-            // bind several OL events since this is not called while destroying
-            me.bindOlEvents();
-        }
+        // bind several OL events since this is not called while destroying
+        me.bindOlEvents();
     },
 
     /**
      * Binds several events on the OL objects used in this class.
      *
      * @private
      */
-    bindOlEvents: function() {
-        var me = this;
+    bindOlEvents: function () {
+        if (!this.bound_) {
+            var me = this;
 
-        // change style of selected feature
-        me.selectedFeatures.on('add', me.onSelectFeatAdd, me);
+            // change style of selected feature
+            me.selectedFeatures.on('add', me.onSelectFeatAdd, me);
 
-        // reset style of no more selected feature
-        me.selectedFeatures.on('remove', me.onSelectFeatRemove, me);
+            // reset style of no more selected feature
+            me.selectedFeatures.on('remove', me.onSelectFeatRemove, me);
 
-        // create a map click listener for connected vector layer
-        if (me.mapSelection && me.layer && me.map) {
-            me.map.on('singleclick', me.onFeatureClick, me);
-            me.mapClickRegistered = true;
+            // create a map click listener for connected vector layer
+            if (me.mapSelection && me.layer && me.map) {
+                me.map.on('singleclick', me.onFeatureClick, me);
+                me.mapClickRegistered = true;
+            }
+            this.bound_ = true;
         }
     },
 
@@ -156,7 +164,7 @@ Ext.define('GeoExt.selection.FeatureModel', {
      *
      * @private
      */
-    unbindOlEvents: function() {
+    unbindOlEvents: function () {
         var me = this;
 
         // remove 'add' / 'remove' listener from selected feature collection
@@ -170,6 +178,8 @@ Ext.define('GeoExt.selection.FeatureModel', {
             me.map.un('singleclick', me.onFeatureClick, me);
             me.mapClickRegistered = false;
         }
+
+        this.bound_ = false;
     },
 
     /**
@@ -180,7 +190,7 @@ Ext.define('GeoExt.selection.FeatureModel', {
      * @private
      * @param  {ol.Collection.Event} evt OL event object
      */
-    onSelectFeatAdd: function(evt) {
+    onSelectFeatAdd: function (evt) {
         var me = this;
         var feat = evt.element;
         if (feat) {
@@ -202,7 +212,7 @@ Ext.define('GeoExt.selection.FeatureModel', {
      * @private
      * @param  {ol.Collection.Event} evt OL event object
      */
-    onSelectFeatRemove: function(evt) {
+    onSelectFeatRemove: function (evt) {
         var me = this;
         var feat = evt.element;
         if (feat) {
@@ -226,13 +236,13 @@ Ext.define('GeoExt.selection.FeatureModel', {
      * @private
      * @param  {ol.MapBrowserEvent} evt OL event object
      */
-    onFeatureClick: function(evt) {
+    onFeatureClick: function (evt) {
         var me = this;
         var feat = me.map.forEachFeatureAtPixel(evt.pixel,
-            function(feature) {
+            function (feature) {
                 return feature;
             }, {
-                layerFilter: function(layer) {
+                layerFilter: function (layer) {
                     return layer === me.layer;
                 }
             });
@@ -250,9 +260,10 @@ Ext.define('GeoExt.selection.FeatureModel', {
      * @private
      * @param  {ol.Feature} feature The feature to select
      */
-    selectMapFeature: function(feature) {
+    selectMapFeature: function (feature) {
+        debugger
         var me = this;
-        var row = me.store.findBy(function(record, id) {
+        var row = me.store.findBy(function (record, id) {
             return record.getFeature() == feature;
         });
 
@@ -275,15 +286,15 @@ Ext.define('GeoExt.selection.FeatureModel', {
     },
 
     /**
-     * Overwrites the onSelectChange function of the father class.
+     * Is called before the onSelectChange function of the parent class.
      * Ensures that the selected feature is added / removed to / from
      * #selectedFeatures lookup object.
      *
      * @private
      * @param  {GeoExt.data.model.Feature} record Selected / deselected record
      * @param  {Boolean} isSelected Record is selected or deselected
      */
-    onSelectChange: function(record, isSelected) {
+    beforeSelectChange: function (record, isSelected) {
         var me = this;
         var selFeature = record.getFeature();
 
@@ -295,28 +306,6 @@ Ext.define('GeoExt.selection.FeatureModel', {
         } else {
             me.selectedFeatures.remove(selFeature);
         }
-
-        me.callParent(arguments);
-    },
-
-    /**
-     * Overwrites parent's destroy method in order to unregister the OL events,
-     * that were added on init.
-     * Needed due to the lack of destroy event of the parent class.
-     *
-     * @private
-     */
-    destroy: function() {
-        var me = this;
-
-        // unfortunately callParent triggers the bindComponent method, so we
-        // have to know if we are in the process of destroying or not.
-        me._destroying = true;
-
-        me.unbindOlEvents();
-        me.callParent(arguments);
-
-        me._destroying = false;
     },
 
     /**
@@ -325,8 +314,8 @@ Ext.define('GeoExt.selection.FeatureModel', {
      * @private
      * @return {String} Random feature ID
      */
-    getRandomFid: function() {
+    getRandomFid: function () {
         // current timestamp plus a random int between 0 and 10
-        return new Date().getTime() + '' +  Math.floor(Math.random() * 11);
+        return new Date().getTime() + '' + Math.floor(Math.random() * 11);
     }
 });

classic/selection/FeatureRowModel.js

@@ -0,0 +1,37 @@
+/* Copyright (c) 2015-present The Open Source Geospatial Foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+/**
+ * A row selection model which enables automatic selection of features
+ * in the map when rows are selected in the grid and vice-versa.
+ *
+ * **CAUTION: This class is only usable in applications using the classic
+ * toolkit of ExtJS 6.**
+ *
+ * @class GeoExt.selection.FeatureModel
+ */
+Ext.define('GeoExt.selection.FeatureRowModel', {
+    alternateClassName: 'GeoExt.selection.FeatureModel', // for backwards compatibility
+    extend: 'Ext.selection.RowModel',
+
+    alias: [
+        'selection.featuremodel', // for backwards compatibility
+        'selection.featurerowmodel'
+    ],
+
+    mixins: [
+        'GeoExt.selection.FeatureModelMixin'
+    ]
+});

examples/features/grid-map-selection.html

@@ -11,7 +11,7 @@
 
     <div id='description'>
         <p>
-            This example shows how to use the <code>GeoExt.selection.FeatureModel</code> to select
+            This example shows how to use the <code>GeoExt.selection.FeatureRowModel</code> to select
             features in the map when rows are selected in the grid and vice-versa.
         </p>
         <p>

examples/features/grid-map-selection.js

@@ -8,7 +8,7 @@ Ext.require([
 
 // load components, which are only compatible with the classic toolkit
 Ext.Loader.loadScript({
-    url: '../../classic/selection/FeatureModel.js'
+    url: '../../classic/selection/FeatureRowModel.js'
 });
 
 var olMap;
@@ -192,7 +192,7 @@ Ext.application({
             width: 300,
             store: featStore,
             selModel: {
-                type: 'featuremodel',
+                type: 'featurerowmodel',
                 mode: 'SINGLE',
                 mapSelection: true,
                 map: olMap,

test/index.html

@@ -59,7 +59,7 @@
   <script src='spec/GeoExt/form/field/GeocoderComboBox.test.js'></script>
   <script src='spec/GeoExt/grid/column/Symbolizer.test.js'></script>
   <script src='spec/GeoExt/mixin/SymbolCheck.test.js'></script>
-  <script src='spec/GeoExt/selection/FeatureModel.test.js'></script>
+  <script src='spec/GeoExt/selection/FeatureRowModel.test.js'></script>
   <script src='spec/GeoExt/state/PermalinkProvider.test.js'></script>
   <script src='spec/GeoExt/toolbar/WfsPaging.test.js'></script>
   <script src='spec/GeoExt/util/Layer.test.js'></script>