diff --git a/examples/draw-shapes.js b/examples/draw-shapes.js index e8eb59c1b4..8125b1428f 100644 --- a/examples/draw-shapes.js +++ b/examples/draw-shapes.js @@ -1,7 +1,7 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import Polygon from '../src/ol/geom/Polygon.js'; -import Draw from '../src/ol/interaction/Draw.js'; +import Draw, {createRegularPolygon, createBox} from '../src/ol/interaction/Draw.js'; import TileLayer from '../src/ol/layer/Tile.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import OSM from '../src/ol/source/OSM.js'; @@ -35,10 +35,10 @@ function addInteraction() { let geometryFunction; if (value === 'Square') { value = 'Circle'; - geometryFunction = Draw.createRegularPolygon(4); + geometryFunction = createRegularPolygon(4); } else if (value === 'Box') { value = 'Circle'; - geometryFunction = Draw.createBox(); + geometryFunction = createBox(); } else if (value === 'Star') { value = 'Circle'; geometryFunction = function(coordinates, geometry) { diff --git a/src/ol/interaction/DragBox.js b/src/ol/interaction/DragBox.js index e22acc9348..ff50216601 100644 --- a/src/ol/interaction/DragBox.js +++ b/src/ol/interaction/DragBox.js @@ -15,27 +15,62 @@ import RenderBox from '../render/Box.js'; const DragBoxEventType = { /** * Triggered upon drag box start. - * @event ol.interaction.DragBox.Event#boxstart + * @event ol.interaction.DragBoxEvent#boxstart * @api */ BOXSTART: 'boxstart', /** * Triggered on drag when box is active. - * @event ol.interaction.DragBox.Event#boxdrag + * @event ol.interaction.DragBoxEvent#boxdrag * @api */ BOXDRAG: 'boxdrag', /** * Triggered upon drag box end. - * @event ol.interaction.DragBox.Event#boxend + * @event ol.interaction.DragBoxEvent#boxend * @api */ BOXEND: 'boxend' }; +/** + * @classdesc + * Events emitted by {@link ol.interaction.DragBox} instances are instances of + * this type. + * + * @param {string} type The event type. + * @param {ol.Coordinate} coordinate The event coordinate. + * @param {ol.MapBrowserEvent} mapBrowserEvent Originating event. + * @extends {ol.events.Event} + * @constructor + * @implements {oli.DragBoxEvent} + */ +const DragBoxEvent = function(type, coordinate, mapBrowserEvent) { + Event.call(this, type); + + /** + * The coordinate of the drag event. + * @const + * @type {ol.Coordinate} + * @api + */ + this.coordinate = coordinate; + + /** + * @const + * @type {ol.MapBrowserEvent} + * @api + */ + this.mapBrowserEvent = mapBrowserEvent; + +}; + +inherits(DragBoxEvent, Event); + + /** * @classdesc * Allows the user to draw a vector box by clicking and dragging on the map, @@ -49,7 +84,7 @@ const DragBoxEventType = { * * @constructor * @extends {ol.interaction.Pointer} - * @fires ol.interaction.DragBox.Event + * @fires ol.interaction.DragBoxEvent * @param {olx.interaction.DragBoxOptions=} opt_options Options. * @api */ @@ -92,7 +127,7 @@ const DragBox = function(opt_options) { * @type {ol.DragBoxEndConditionType} */ this.boxEndCondition_ = options.boxEndCondition ? - options.boxEndCondition : DragBox.defaultBoxEndCondition; + options.boxEndCondition : defaultBoxEndCondition; }; inherits(DragBox, PointerInteraction); @@ -108,11 +143,11 @@ inherits(DragBox, PointerInteraction); * @return {boolean} Whether or not the boxend condition should be fired. * @this {ol.interaction.DragBox} */ -DragBox.defaultBoxEndCondition = function(mapBrowserEvent, startPixel, endPixel) { +function defaultBoxEndCondition(mapBrowserEvent, startPixel, endPixel) { const width = endPixel[0] - startPixel[0]; const height = endPixel[1] - startPixel[1]; return width * width + height * height >= this.minArea_; -}; +} /** @@ -126,7 +161,7 @@ function handleDragEvent(mapBrowserEvent) { this.box_.setPixels(this.startPixel_, mapBrowserEvent.pixel); - this.dispatchEvent(new DragBox.Event(DragBoxEventType.BOXDRAG, + this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXDRAG, mapBrowserEvent.coordinate, mapBrowserEvent)); } @@ -165,7 +200,7 @@ function handleUpEvent(mapBrowserEvent) { if (this.boxEndCondition_(mapBrowserEvent, this.startPixel_, mapBrowserEvent.pixel)) { this.onBoxEnd(mapBrowserEvent); - this.dispatchEvent(new DragBox.Event(DragBoxEventType.BOXEND, + this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXEND, mapBrowserEvent.coordinate, mapBrowserEvent)); } return false; @@ -187,7 +222,7 @@ function handleDownEvent(mapBrowserEvent) { this.startPixel_ = mapBrowserEvent.pixel; this.box_.setMap(mapBrowserEvent.map); this.box_.setPixels(this.startPixel_, this.startPixel_); - this.dispatchEvent(new DragBox.Event(DragBoxEventType.BOXSTART, + this.dispatchEvent(new DragBoxEvent(DragBoxEventType.BOXSTART, mapBrowserEvent.coordinate, mapBrowserEvent)); return true; } else { @@ -196,37 +231,4 @@ function handleDownEvent(mapBrowserEvent) { } -/** - * @classdesc - * Events emitted by {@link ol.interaction.DragBox} instances are instances of - * this type. - * - * @param {string} type The event type. - * @param {ol.Coordinate} coordinate The event coordinate. - * @param {ol.MapBrowserEvent} mapBrowserEvent Originating event. - * @extends {ol.events.Event} - * @constructor - * @implements {oli.DragBoxEvent} - */ -DragBox.Event = function(type, coordinate, mapBrowserEvent) { - Event.call(this, type); - - /** - * The coordinate of the drag event. - * @const - * @type {ol.Coordinate} - * @api - */ - this.coordinate = coordinate; - - /** - * @const - * @type {ol.MapBrowserEvent} - * @api - */ - this.mapBrowserEvent = mapBrowserEvent; - -}; -inherits(DragBox.Event, Event); - export default DragBox; diff --git a/src/ol/interaction/Draw.js b/src/ol/interaction/Draw.js index 86e91e829f..30d7f12c3a 100644 --- a/src/ol/interaction/Draw.js +++ b/src/ol/interaction/Draw.js @@ -22,7 +22,6 @@ import MultiPolygon from '../geom/MultiPolygon.js'; import MouseSource from '../pointer/MouseSource.js'; import Point from '../geom/Point.js'; import Polygon, {fromCircle, makeRegular} from '../geom/Polygon.js'; -import DrawEventType from '../interaction/DrawEventType.js'; import PointerInteraction, {handleEvent as handlePointerEvent} from '../interaction/Pointer.js'; import InteractionProperty from '../interaction/Property.js'; import VectorLayer from '../layer/Vector.js'; @@ -43,13 +42,59 @@ const Mode = { }; +/** + * @enum {string} + */ +const DrawEventType = { + /** + * Triggered upon feature draw start + * @event ol.interaction.Draw.Event#drawstart + * @api + */ + DRAWSTART: 'drawstart', + /** + * Triggered upon feature draw end + * @event ol.interaction.Draw.Event#drawend + * @api + */ + DRAWEND: 'drawend' +}; + + +/** + * @classdesc + * Events emitted by {@link ol.interaction.Draw} instances are instances of + * this type. + * + * @constructor + * @extends {ol.events.Event} + * @implements {oli.DrawEvent} + * @param {ol.interaction.DrawEventType} type Type. + * @param {ol.Feature} feature The feature drawn. + */ +const DrawEvent = function(type, feature) { + + Event.call(this, type); + + /** + * The feature being drawn. + * @type {ol.Feature} + * @api + */ + this.feature = feature; + +}; + +inherits(DrawEvent, Event); + + /** * @classdesc * Interaction for drawing feature geometries. * * @constructor * @extends {ol.interaction.Pointer} - * @fires ol.interaction.Draw.Event + * @fires ol.interaction.DrawEvent * @param {olx.interaction.DrawOptions} options Options. * @api */ @@ -290,7 +335,7 @@ const Draw = function(options) { wrapX: options.wrapX ? options.wrapX : false }), style: options.style ? options.style : - Draw.getDefaultStyleFunction(), + getDefaultStyleFunction(), updateWhileInteracting: true }); @@ -331,12 +376,12 @@ inherits(Draw, PointerInteraction); /** * @return {ol.StyleFunction} Styles. */ -Draw.getDefaultStyleFunction = function() { +function getDefaultStyleFunction() { const styles = Style.createDefaultEditing(); return function(feature, resolution) { return styles[feature.getGeometry().getType()]; }; -}; +} /** @@ -589,7 +634,7 @@ Draw.prototype.startDrawing_ = function(event) { } this.sketchFeature_.setGeometry(geometry); this.updateSketchFeatures_(); - this.dispatchEvent(new Draw.Event(DrawEventType.DRAWSTART, this.sketchFeature_)); + this.dispatchEvent(new DrawEvent(DrawEventType.DRAWSTART, this.sketchFeature_)); }; @@ -751,7 +796,7 @@ Draw.prototype.finishDrawing = function() { } // First dispatch event to allow full set up of feature - this.dispatchEvent(new Draw.Event(DrawEventType.DRAWEND, sketchFeature)); + this.dispatchEvent(new DrawEvent(DrawEventType.DRAWEND, sketchFeature)); // Then insert feature if (this.features_) { @@ -797,7 +842,7 @@ Draw.prototype.extend = function(feature) { this.finishCoordinate_ = last.slice(); this.sketchCoords_.push(last.slice()); this.updateSketchFeatures_(); - this.dispatchEvent(new Draw.Event(DrawEventType.DRAWSTART, this.sketchFeature_)); + this.dispatchEvent(new DrawEvent(DrawEventType.DRAWSTART, this.sketchFeature_)); }; @@ -854,13 +899,8 @@ Draw.prototype.updateState_ = function() { * polygon. * @api */ -Draw.createRegularPolygon = function(opt_sides, opt_angle) { +export function createRegularPolygon(opt_sides, opt_angle) { return ( - /** - * @param {ol.Coordinate|Array.