Introductie polygoon teken actie (#34)

src/index.js

@@ -6,6 +6,7 @@ module.exports = {
   VlDeleteAction: require('../dist/vl-mapactions.js').DeleteAction,
   VlDrawAction: require('../dist/vl-mapactions.js').DrawAction,
   VlDrawLineAction: require('../dist/vl-mapactions.js').DrawLineAction,
+  VlDrawPolygonAction: require('../dist/vl-mapactions.js').DrawPolygonAction,
   VlDrawRectangleAction: require('../dist/vl-mapactions.js').DrawRectangleAction,
   VlHighlightAction: require('../dist/vl-mapactions.js').HighlightAction,
   VlMapAction: require('../dist/vl-mapactions.js').MapAction,

src/vl-mapactions-all.js

@@ -4,6 +4,7 @@ import {VlBoxSelectAction} from './vl-mapactions-box-select-action';
 import {VlDeleteAction} from './vl-mapactions-delete-action';
 import {VlDrawAction} from './vl-mapactions-draw-action';
 import {VlDrawLineAction} from './vl-mapactions-draw-line-action';
+import {VlDrawPolygonAction} from './vl-mapactions-draw-polygon-action';
 import {VlDrawRectangleAction} from './vl-mapactions-draw-rectangle-action';
 import {VlHighlightAction} from './vl-mapactions-highlight-action';
 import {VlMapAction} from './vl-mapactions-mapaction';
@@ -47,6 +48,7 @@ export {
   VlDeleteAction,
   VlDrawAction,
   VlDrawLineAction,
+  VlDrawPolygonAction,
   VlDrawRectangleAction,
   VlHighlightAction,
   VlMapAction,

src/vl-mapactions-draw-action.js

@@ -6,29 +6,28 @@ import {VlMapAction} from './vl-mapactions-mapaction';
 import {VlSnapInteraction} from './vl-mapactions-snap-interaction';
 
 export class VlDrawAction extends VlMapAction {
-  constructor(layer, type, onDraw, options) {
+  constructor(layer, type, onDraw, options = {}) {
     const interactions = [];
-    const drawOptions = options || {};
-    drawOptions.source = layer.getSource();
-    drawOptions.type = type;
-    const drawInteraction = new Draw(drawOptions);
+    options.source = layer.getSource();
+    options.type = type;
+    const drawInteraction = new Draw(options);
     interactions.push(drawInteraction);
-    if (drawOptions.snapping) {
-      interactions.push(new VlSnapInteraction(drawOptions.snapping.layer || layer));
+    if (options.snapping) {
+      interactions.push(new VlSnapInteraction(options.snapping.layer || layer));
     }
 
     drawInteraction.on('drawstart', (event) => {
-      if (drawOptions.measure) {
+      if (options.measure) {
         const feature = event.feature;
 
-        drawOptions.measure = typeof drawOptions.measure === 'object' ? drawOptions.measure : {};
-        drawOptions.measure.tooltip = drawOptions.measure.tooltip || {};
+        options.measure = typeof options.measure === 'object' ? options.measure : {};
+        options.measure.tooltip = options.measure.tooltip || {};
 
         const tooltipElement = document.createElement('div');
         tooltipElement.setAttribute('class', 'measure-tooltip');
 
         this.tooltip = new Overlay({
-          offset: drawOptions.measure.tooltip.offset || [-15, 10],
+          offset: options.measure.tooltip.offset || [-15, 10],
           positioning: 'bottom-center',
         });
 
@@ -57,7 +56,7 @@ export class VlDrawAction extends VlMapAction {
 
     super(interactions);
 
-    this.drawOptions = drawOptions;
+    this.options = options;
     this.drawInteraction = drawInteraction;
   }
 
@@ -67,7 +66,7 @@ export class VlDrawAction extends VlMapAction {
   }
 
   _cleanUp() {
-    if (this.drawOptions.measure) {
+    if (this.options.measure) {
       unByKey(this.measurePointermoveHandler);
       this._removeTooltip();
     }

src/vl-mapactions-draw-line-action.js

@@ -2,9 +2,7 @@ import {VlDrawAction} from './vl-mapactions-draw-action';
 import GeometryType from 'ol/geom/GeometryType';
 
 export class VlDrawLineAction extends VlDrawAction {
-  constructor(layer, onDraw, options) {
-    options = options || {};
+  constructor(layer, onDraw, options = {}) {
     super(layer, GeometryType.LINE_STRING, onDraw, options);
-    this.drawLineOptions = options;
   }
 }

src/vl-mapactions-draw-polygon-action.js

@@ -0,0 +1,8 @@
+import {VlDrawAction} from './vl-mapactions-draw-action';
+import GeometryType from 'ol/geom/GeometryType';
+
+export class VlDrawPolygonAction extends VlDrawAction {
+  constructor(layer, onDraw, options = {}) {
+    super(layer, GeometryType.POLYGON, onDraw, options);
+  }
+}

src/vl-mapactions-draw-rectangle-action.js

@@ -3,10 +3,9 @@ import {VlDrawAction} from './vl-mapactions-draw-action';
 import GeometryType from 'ol/geom/GeometryType';
 
 export class VlDrawRectangleAction extends VlDrawAction {
-  constructor(layer, onDraw, options) {
-    const drawRectangleOptions = options || {};
-    drawRectangleOptions.maxPoints = 2;
-    drawRectangleOptions.geometryFunction = (coordinates, geometry) => {
+  constructor(layer, onDraw, options = {}) {
+    options.maxPoints = 2;
+    options.geometryFunction = (coordinates, geometry) => {
       if (!geometry) {
         geometry = new Polygon([]);
       }
@@ -17,9 +16,6 @@ export class VlDrawRectangleAction extends VlDrawAction {
       ]);
       return geometry;
     };
-
-    super(layer, GeometryType.LINE_STRING, onDraw, drawRectangleOptions);
-
-    this.drawRectangleOptions = drawRectangleOptions;
+    super(layer, GeometryType.LINE_STRING, onDraw, options);
   }
 }

test/unit/vl-mapactions-draw-action.test.js

@@ -26,7 +26,7 @@ describe('draw action', () => {
 
   it('kan opties meegeven aan draw action', () => {
     const drawAction = new VlDrawAction(layer, 'LineString', callback, {maxPoints: 2});
-    const options = drawAction.drawOptions;
+    const options = drawAction.options;
     expect(options.maxPoints).to.equal(2);
     expect(options.source).to.equal(source);
     expect(options.type).to.equal('LineString');

test/unit/vl-mapactions-draw-line-action.test.js

@@ -26,13 +26,13 @@ describe('draw line action', () => {
     };
 
     const action = new VlDrawLineAction(layer, callback, options);
-    expect(action.drawLineOptions.maxPoints).to.be.undefined;
-    expect(action.drawLineOptions.snapping).to.deep.equal(snappingOptions);
-    expect(action.drawLineOptions.measure).to.be.true;
+    expect(action.options.maxPoints).to.be.undefined;
+    expect(action.options.snapping).to.deep.equal(snappingOptions);
+    expect(action.options.measure).to.be.true;
   });
 
   it('geeft de juiste configuratie mee aan de draw interaction', () => {
     const action = new VlDrawLineAction(layer, callback);
-    expect(action.drawOptions).to.deep.equal(action.drawLineOptions);
+    expect(action.options).to.deep.equal(action.options);
   });
 });

test/unit/vl-mapactions-draw-polygon-action.test.js

@@ -0,0 +1,30 @@
+import sinon from 'sinon/pkg/sinon-esm';
+import {expect} from 'chai';
+import {Vector as SourceVector} from 'ol/source';
+import {VlDrawPolygonAction} from '../../src/vl-mapactions-draw-polygon-action';
+
+describe('draw polygon action', () => {
+  const source = new SourceVector({});
+
+  const layer = {
+    getSource: () => {
+      return source;
+    },
+  };
+
+  const callback = sinon.spy();
+
+  it('geeft de snapping configuratie door aan de draw action', () => {
+    const snappingLayer = sinon.spy();
+    const snapping = {
+      layer: snappingLayer,
+    };
+    const action = new VlDrawPolygonAction(layer, callback, snapping);
+    expect(action.options.layer).to.deep.equal(snappingLayer);
+  });
+
+  it('geeft de juiste configuratie mee aan de draw interaction', () => {
+    const action = new VlDrawPolygonAction(layer, callback);
+    expect(action.options).to.deep.equal(action.options);
+  });
+});

test/unit/vl-mapactions-draw-rectangle-action.test.js

@@ -20,13 +20,13 @@ describe('draw rectangle action', () => {
       layer: snappingLayer,
     };
     const action = new VlDrawRectangleAction(layer, callback, snapping);
-    expect(action.drawRectangleOptions.layer).to.deep.equal(snappingLayer);
+    expect(action.options.layer).to.deep.equal(snappingLayer);
   });
 
   it('geeft de juiste configuratie mee aan de draw interaction', () => {
     const action = new VlDrawRectangleAction(layer, callback);
-    expect(action.drawRectangleOptions.maxPoints).to.equal(2);
-    const geometryFunction = action.drawRectangleOptions.geometryFunction;
+    expect(action.options.maxPoints).to.equal(2);
+    const geometryFunction = action.options.geometryFunction;
     const geometry = geometryFunction([[0, 0], [1, 2]], null);
     expect(geometry.getCoordinates()[0][0]).to.deep.equal([0, 0]);
     expect(geometry.getCoordinates()[0][1]).to.deep.equal([0, 2]);