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.|Array.>} coordinates - * @param {ol.geom.SimpleGeometry=} opt_geometry - * @return {ol.geom.SimpleGeometry} - */ function(coordinates, opt_geometry) { const center = coordinates[0]; const end = coordinates[1]; @@ -874,7 +914,7 @@ Draw.createRegularPolygon = function(opt_sides, opt_angle) { return geometry; } ); -}; +} /** @@ -884,13 +924,8 @@ Draw.createRegularPolygon = function(opt_sides, opt_angle) { * @return {ol.DrawGeometryFunctionType} Function that draws a box-shaped polygon. * @api */ -Draw.createBox = function() { +export function createBox() { return ( - /** - * @param {Array.} coordinates - * @param {ol.geom.SimpleGeometry=} opt_geometry - * @return {ol.geom.SimpleGeometry} - */ function(coordinates, opt_geometry) { const extent = boundingExtent(coordinates); const geometry = opt_geometry || new Polygon(null); @@ -904,7 +939,7 @@ Draw.createBox = function() { return geometry; } ); -}; +} /** @@ -931,29 +966,4 @@ function getMode(type) { } -/** - * @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. - */ -Draw.Event = function(type, feature) { - - Event.call(this, type); - - /** - * The feature being drawn. - * @type {ol.Feature} - * @api - */ - this.feature = feature; - -}; -inherits(Draw.Event, Event); - export default Draw; diff --git a/src/ol/interaction/DrawEventType.js b/src/ol/interaction/DrawEventType.js deleted file mode 100644 index e4cc412384..0000000000 --- a/src/ol/interaction/DrawEventType.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @module ol/interaction/DrawEventType - */ - -/** - * @enum {string} - */ -export default { - /** - * 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' -}; diff --git a/src/ol/interaction/Extent.js b/src/ol/interaction/Extent.js index 68a6139e82..9848cc893c 100644 --- a/src/ol/interaction/Extent.js +++ b/src/ol/interaction/Extent.js @@ -17,6 +17,31 @@ import VectorLayer from '../layer/Vector.js'; import VectorSource from '../source/Vector.js'; import Style from '../style/Style.js'; + +/** + * @classdesc + * Events emitted by {@link ol.interaction.Extent} instances are instances of + * this type. + * + * @constructor + * @implements {oli.ExtentEvent} + * @param {ol.Extent} extent the new extent + * @extends {ol.events.Event} + */ +const ExtentInteractionEvent = function(extent) { + Event.call(this, ExtentEventType.EXTENTCHANGED); + + /** + * The current extent. + * @type {ol.Extent} + * @api + */ + this.extent = extent; + +}; +inherits(ExtentInteractionEvent, Event); + + /** * @classdesc * Allows the user to draw a vector box by clicking and dragging on the map. @@ -430,30 +455,8 @@ ExtentInteraction.prototype.setExtent = function(extent) { //Null extent means no bbox this.extent_ = extent ? extent : null; this.createOrUpdateExtentFeature_(extent); - this.dispatchEvent(new ExtentInteraction.Event(this.extent_)); + this.dispatchEvent(new ExtentInteractionEvent(this.extent_)); }; -/** - * @classdesc - * Events emitted by {@link ol.interaction.Extent} instances are instances of - * this type. - * - * @constructor - * @implements {oli.ExtentEvent} - * @param {ol.Extent} extent the new extent - * @extends {ol.events.Event} - */ -ExtentInteraction.Event = function(extent) { - Event.call(this, ExtentEventType.EXTENTCHANGED); - - /** - * The current extent. - * @type {ol.Extent} - * @api - */ - this.extent = extent; - -}; -inherits(ExtentInteraction.Event, Event); export default ExtentInteraction; diff --git a/test/spec/ol/interaction/draw.test.js b/test/spec/ol/interaction/draw.test.js index eebab9845e..da4598a89f 100644 --- a/test/spec/ol/interaction/draw.test.js +++ b/test/spec/ol/interaction/draw.test.js @@ -12,7 +12,7 @@ import MultiPoint from '../../../../src/ol/geom/MultiPoint.js'; import MultiPolygon from '../../../../src/ol/geom/MultiPolygon.js'; import Point from '../../../../src/ol/geom/Point.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 Interaction from '../../../../src/ol/interaction/Interaction.js'; import VectorLayer from '../../../../src/ol/layer/Vector.js'; import PointerEvent from '../../../../src/ol/pointer/PointerEvent.js'; @@ -1054,13 +1054,13 @@ describe('ol.interaction.Draw', function() { }); }); - describe('ol.interaction.Draw.createRegularPolygon', function() { + describe('createRegularPolygon', function() { it('creates a regular polygon in Circle mode', function() { const draw = new Draw({ source: source, type: 'Circle', geometryFunction: - Draw.createRegularPolygon(4, Math.PI / 4) + createRegularPolygon(4, Math.PI / 4) }); map.addInteraction(draw); @@ -1084,12 +1084,12 @@ describe('ol.interaction.Draw', function() { }); }); - describe('ol.interaction.Draw.createBox', function() { + describe('createBox', function() { it('creates a box-shaped polygon in Circle mode', function() { const draw = new Draw({ source: source, type: 'Circle', - geometryFunction: Draw.createBox() + geometryFunction: createBox() }); map.addInteraction(draw);