Merge pull request #2114 from tsauerwein/draw-and-modify

Add example combining draw and modify interaction
2014-06-10 10:00:27 +02:00
parent 5926611cd1 d0e818e8ce
commit f0dbcfd541
6 changed files with 185 additions and 6 deletions
--- a/examples/draw-and-modify-features.html
+++ b/examples/draw-and-modify-features.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Draw and modify features example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Draw and modify features example</h4>
+          <p id="shortdesc">Example of using the ol.interaction.Draw interaction together with
+          the ol.interaction.Modify interaction.</p>
+          <form class="form-inline">
+            <label>Geometry type &nbsp;</label>
+              <select id="type">
+                <option value="Point">Point</option>
+                <option value="LineString">LineString</option>
+                <option value="Polygon">Polygon</option>
+              </select>
+          </form>
+
+          <div id="docs">
+            <p>See the <a href="draw-and-modify-features.js" target="_blank">draw-and-modify-features.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">draw, edit, modify, vector, featureoverlay</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=draw-and-modify-features" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/examples/draw-and-modify-features.js
+++ b/examples/draw-and-modify-features.js
@@ -0,0 +1,84 @@
+goog.require('ol.FeatureOverlay');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.events.condition');
+goog.require('ol.interaction');
+goog.require('ol.interaction.Draw');
+goog.require('ol.interaction.Modify');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.MapQuest({layer: 'sat'})
+});
+
+var map = new ol.Map({
+  layers: [raster],
+  target: 'map',
+  view: new ol.View2D({
+    center: [-11000000, 4600000],
+    zoom: 4
+  })
+});
+
+// The features are not added to a regular vector layer/source,
+// but to a feature overlay which holds a collection of features.
+// This collection is passed to the modify and also the draw
+// interaction, so that both can add or modify features.
+var featureOverlay = new ol.FeatureOverlay({
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 255, 0.2)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#ffcc33',
+      width: 2
+    }),
+    image: new ol.style.Circle({
+      radius: 7,
+      fill: new ol.style.Fill({
+        color: '#ffcc33'
+      })
+    })
+  })
+});
+featureOverlay.setMap(map);
+
+var modify = new ol.interaction.Modify({
+  features: featureOverlay.getFeatures(),
+  // the SHIFT key must be pressed to delete vertices, so
+  // that new vertices can be drawn at the same position
+  // of existing vertices
+  deleteCondition: function(event) {
+    return ol.events.condition.shiftKeyOnly(event) &&
+        ol.events.condition.singleClick(event);
+  }
+});
+map.addInteraction(modify);
+
+var draw; // global so we can remove it later
+function addInteraction() {
+  draw = new ol.interaction.Draw({
+    features: featureOverlay.getFeatures(),
+    type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
+  });
+  map.addInteraction(draw);
+}
+
+var typeSelect = document.getElementById('type');
+
+
+/**
+ * Let user change the geometry type.
+ * @param {Event} e Change event.
+ */
+typeSelect.onchange = function(e) {
+  map.removeInteraction(draw);
+  addInteraction();
+};
+
+addInteraction();
--- a/externs/olx.js
+++ b/externs/olx.js
@@ -1647,7 +1647,8 @@ olx.interaction.DragZoomOptions.prototype.style;
 *     type: ol.geom.GeometryType,
 *     minPointsPerRing: (number|undefined),
 *     style: (ol.style.Style|Array.<ol.style.Style>|ol.feature.StyleFunction|undefined),
- *     geometryName: (string|undefined)}}
+ *     geometryName: (string|undefined),
+ *     condition: (ol.events.ConditionType|undefined)}}
 * @todo api
 */
 olx.interaction.DrawOptions;
@@ -1704,6 +1705,15 @@ olx.interaction.DrawOptions.prototype.style;
 olx.interaction.DrawOptions.prototype.geometryName;


+/**
+ * A conditional modifier (e.g. shift key) that determines if the interaction is
+ * active (i.e. a click adds a vertex) or not. By default, a click with no modifier
+ * keys adds a vertex.
+ * @type {ol.events.ConditionType|undefined}
+ */
+olx.interaction.DrawOptions.prototype.condition;
+
+
 /**
 * @typedef {{condition: (ol.events.ConditionType|undefined),
 *     pixelDelta: (number|undefined)}}
--- a/src/ol/events/condition.js
+++ b/src/ol/events/condition.js
@@ -67,6 +67,7 @@ ol.events.condition.never = goog.functions.FALSE;
 /**
 * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
 * @return {boolean} True if the event is a `singleclick` event.
+ * @todo api
 */
 ol.events.condition.singleClick = function(mapBrowserEvent) {
  return mapBrowserEvent.type == ol.MapBrowserEvent.EventType.SINGLECLICK;
@@ -134,6 +135,7 @@ ol.events.condition.targetNotEditable = function(mapBrowserEvent) {
 /**
 * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
 * @return {boolean} True if the event originates from a mouse device.
+ * @todo api
 */
 ol.events.condition.mouseOnly = function(mapBrowserEvent) {
  goog.asserts.assertInstanceof(mapBrowserEvent, ol.MapBrowserPointerEvent);
--- a/src/ol/interaction/drawinteraction.js
+++ b/src/ol/interaction/drawinteraction.js
@@ -10,6 +10,7 @@ goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.MapBrowserEvent');
 goog.require('ol.MapBrowserEvent.EventType');
+goog.require('ol.events.condition');
 goog.require('ol.feature');
 goog.require('ol.geom.GeometryType');
 goog.require('ol.geom.LineString');
@@ -192,6 +193,13 @@ ol.interaction.Draw = function(options) {
   */
  this.geometryName_ = options.geometryName;

+  /**
+   * @private
+   * @type {ol.events.ConditionType}
+   */
+  this.condition_ = goog.isDef(options.condition) ?
+      options.condition : ol.events.condition.noModifierKeys;
+
 };
 goog.inherits(ol.interaction.Draw, ol.interaction.Pointer);

@@ -244,8 +252,12 @@ ol.interaction.Draw.prototype.handleMapBrowserEvent = function(event) {
 * @return {boolean} Pass the event to other interactions.
 */
 ol.interaction.Draw.prototype.handlePointerDown = function(event) {
-  this.downPx_ = event.pixel;
-  return true;
+  if (this.condition_(event)) {
+    this.downPx_ = event.pixel;
+    return true;
+  } else {
+    return false;
+  }
 };


--- a/test/spec/ol/interaction/drawinteraction.test.js
+++ b/test/spec/ol/interaction/drawinteraction.test.js
@@ -42,16 +42,19 @@ describe('ol.interaction.Draw', function() {
   * @param {string} type Event type.
   * @param {number} x Horizontal offset from map center.
   * @param {number} y Vertical offset from map center.
+   * @param {boolean=} opt_shiftKey Shift key is pressed.
   */
-  function simulateEvent(type, x, y) {
+  function simulateEvent(type, x, y, opt_shiftKey) {
    var viewport = map.getViewport();
    // calculated in case body has top < 0 (test runner with small window)
    var position = goog.style.getClientPosition(viewport);
+    var shiftKey = goog.isDef(opt_shiftKey) ? opt_shiftKey : false;
    var event = new ol.MapBrowserPointerEvent(type, map,
        new ol.pointer.PointerEvent(type,
            new goog.events.BrowserEvent({
              clientX: position.x + x + width / 2,
-              clientY: position.y + y + height / 2
+              clientY: position.y + y + height / 2,
+              shiftKey: shiftKey
            })));
    map.handleMapBrowserEvent(event);
  }
@@ -122,6 +125,14 @@ describe('ol.interaction.Draw', function() {
      expect(features).to.have.length(0);
    });

+    it('does not draw a point when modifier key is pressed', function() {
+      simulateEvent('pointermove', 10, 20);
+      simulateEvent('pointerdown', 10, 20, true);
+      simulateEvent('pointerup', 10, 20);
+      var features = source.getFeatures();
+      expect(features).to.have.length(0);
+    });
+
    it('triggers draw events', function() {
      var ds = sinon.spy();
      var de = sinon.spy();
@@ -134,7 +145,6 @@ describe('ol.interaction.Draw', function() {
      expect(ds).to.be.called(2);
      expect(de).to.be.called(1);
    });
-
  });

  describe('drawing multipoints', function() {