Merge pull request #1071 from jlap/modify-rectangle-style-bug

Fix styling issue with the modify rectangle.
camptocamp · Apr 27, 2016 · 240e98c · 240e98c
2 parents 065171a + 8f5bc6b
commit 240e98c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 24 deletions.
diff --git a/examples/modifyrectangle.js b/examples/modifyrectangle.js
@@ -102,6 +102,17 @@ app.MainController = function() {
     };
   })();
 
+  var vectorSource = new ol.source.Vector({
+    features: this.features
+  });
+  var vectorLayer = new ol.layer.Vector({
+    source: vectorSource
+  });
+
+  // Use vectorLayer.setMap(map) rather than map.addLayer(vectorLayer). This
+  // makes the vector layer "unmanaged", meaning that it is always on top.
+  vectorLayer.setMap(map);
+
   /**
    * @type {ngeo.interaction.ModifyRectangle}
    * @export

diff --git a/src/ol-ext/interaction/modifyrectangle.js b/src/ol-ext/interaction/modifyrectangle.js
@@ -60,19 +60,6 @@ ngeo.interaction.ModifyRectangle = function(options) {
   // Get the style for the box and the points
   var style = options.style ? options.style : ol.interaction.Modify.getDefaultStyleFunction();
 
-  /**
-   * @type {ol.layer.Vector}
-   * @private
-   */
-  this.vectorBoxes_ = new ol.layer.Vector({
-    source: new ol.source.Vector({
-      wrapX: !!options.wrapX
-    }),
-    style: style,
-    updateWhileAnimating: true,
-    updateWhileInteracting: true
-  });
-
   /**
    * @type {ol.layer.Vector}
    * @private
@@ -129,16 +116,12 @@ goog.inherits(ngeo.interaction.ModifyRectangle, ol.interaction.Pointer);
 ngeo.interaction.ModifyRectangle.prototype.addFeature_ = function(feature) {
   var featureGeom = feature.getGeometry();
   if (featureGeom instanceof ol.geom.Polygon) {
-    var boxSource = this.vectorBoxes_.getSource();
-    var pointSource = this.vectorPoints_.getSource();
 
-    try {
-      boxSource.addFeature(feature);
-    } catch (e) {
-      // If the feature is in the source already, its corners were already
-      // created, no need to create them again.
+    // If the feature's corners are already set, no need to set them again
+    if (feature.get('corners')) {
       return;
     }
+    var pointSource = this.vectorPoints_.getSource();
 
     // from each corners, create a point feature and add it to the point layer.
     // each point is then associated with 2 siblings in order to update the
@@ -258,8 +241,7 @@ ngeo.interaction.ModifyRectangle.prototype.handleCornerGeometryChange_ = functio
   }, this);
   var boxCoordinates = goog.array.concat(corners, [corners[0]]);
 
-  var boxFeatures = this.vectorBoxes_.getSource().getFeatures();
-  goog.array.forEach(boxFeatures, function(boxFeature) {
+  this.features_.forEach(function(boxFeature) {
     var geom = boxFeature.getGeometry();
     goog.asserts.assertInstanceof(geom, ol.geom.Polygon);
     geom.setCoordinates([boxCoordinates]);
@@ -297,7 +279,7 @@ ngeo.interaction.ModifyRectangle.prototype.removeFeature_ = function(feature) {
 
     this.vectorPoints_.getSource().removeFeature(corners[i]);
   }
-  this.vectorBoxes_.getSource().removeFeature(feature);
+  feature.set('corners', undefined);
   this.feature_ = null;
   corners.length = 0;
   delete this.cache_[uid];
@@ -308,7 +290,6 @@ ngeo.interaction.ModifyRectangle.prototype.removeFeature_ = function(feature) {
  * @inheritDoc
  */
 ngeo.interaction.ModifyRectangle.prototype.setMap = function(map) {
-  this.vectorBoxes_.setMap(map);
   this.vectorPoints_.setMap(map);
   this.vectorPoints_.setVisible(false);
   goog.base(this, 'setMap', map);