/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for * full list of contributors). Published under the Clear BSD license. * See http://svn.openlayers.org/trunk/openlayers/license.txt for the * full text of the license. */ /** * @requires OpenLayers/Handler.js * @requires OpenLayers/Geometry/Point.js */ /** * Class: OpenLayers.Handler.Point * Handler to draw a point on the map. Point is displayed on activation, * moves on mouse move, and is finished on mouse up. The handler triggers * callbacks for 'done', 'cancel', and 'modify'. The modify callback is * called with each change in the sketch and will receive the latest point * drawn. Create a new instance with the * constructor. * * Inherits from: * - */ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, { /** * Property: point * {} The currently drawn point */ point: null, /** * Property: layer * {} The temporary drawing layer */ layer: null, /** * APIProperty: multi * {Boolean} Cast features to multi-part geometries before passing to the * layer. Default is false. */ multi: false, /** * Property: mouseDown * {Boolean} The mouse is down */ mouseDown: false, /** * Property: stoppedDown * {Boolean} Indicate whether the last mousedown stopped the event * propagation. */ stoppedDown: null, /** * Property: lastDown * {} Location of the last mouse down */ lastDown: null, /** * Property: lastUp * {} */ lastUp: null, /** * APIProperty: persist * {Boolean} Leave the feature rendered until destroyFeature is called. * Default is false. If set to true, the feature remains rendered until * destroyFeature is called, typically by deactivating the handler or * starting another drawing. */ persist: false, /** * APIProperty: stopDown * {Boolean} Stop event propagation on mousedown. Must be false to * allow "pan while drawing". Defaults to false. */ stopDown: false, /** * APIPropery: stopUp * {Boolean} Stop event propagation on mouse. Must be false to * allow "pan while dragging". Defaults to fase. */ stopUp: false, /** * Property: layerOptions * {Object} Any optional properties to be set on the sketch layer. */ layerOptions: null, /** * APIProperty: pixelTolerance * {Number} Maximum number of pixels between down and up (mousedown * and mouseup, or touchstart and touchend) for the handler to * add a new point. If set to an integer value, if the * displacement between down and up is great to this value * no point will be added. Default value is 5. */ pixelTolerance: 5, /** * APIProperty: dblclickTolerance * {Number} Maximum number of pixels between two touchend for an * event to be considered a dblclick. Default is 20. */ dblclickTolerance: 20, /** * Property: touch * {Boolean} Indcates the support of touch events. */ touch: false, /** * Property: lastTouchPx * {} The last pixel used to know the distance between * two touches (for double touch). */ lastTouchPx: null, /** * Constructor: OpenLayers.Handler.Point * Create a new point handler. * * Parameters: * control - {} The control that owns this handler * callbacks - {Object} An object with a properties whose values are * functions. Various callbacks described below. * options - {Object} An optional object with properties to be set on the * handler * * Named callbacks: * create - Called when a sketch is first created. Callback called with * the creation point geometry and sketch feature. * modify - Called with each move of a vertex with the vertex (point) * geometry and the sketch feature. * done - Called when the point drawing is finished. The callback will * recieve a single argument, the point geometry. * cancel - Called when the handler is deactivated while drawing. The * cancel callback will receive a geometry. */ initialize: function(control, callbacks, options) { if(!(options && options.layerOptions && options.layerOptions.styleMap)) { this.style = OpenLayers.Util.extend(OpenLayers.Feature.Vector.style['default'], {}); } OpenLayers.Handler.prototype.initialize.apply(this, arguments); }, /** * APIMethod: activate * turn on the handler */ activate: function() { if(!OpenLayers.Handler.prototype.activate.apply(this, arguments)) { return false; } // create temporary vector layer for rendering geometry sketch // TBD: this could be moved to initialize/destroy - setting visibility here var options = OpenLayers.Util.extend({ displayInLayerSwitcher: false, // indicate that the temp vector layer will never be out of range // without this, resolution properties must be specified at the // map-level for this temporary layer to init its resolutions // correctly calculateInRange: OpenLayers.Function.True }, this.layerOptions); this.layer = new OpenLayers.Layer.Vector(this.CLASS_NAME, options); this.map.addLayer(this.layer); this.createFeature(); return true; }, /** * Method: createFeature * Add temporary features * * Parameters: * pixel - {} A pixel location on the map. */ createFeature: function(pixel) { var geometry; if(pixel) { var lonlat = this.map.getLonLatFromPixel(pixel); geometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat); } else { geometry = new OpenLayers.Geometry.Point(); } this.point = new OpenLayers.Feature.Vector(geometry); this.callback("create", [this.point.geometry, this.point]); this.point.geometry.clearBounds(); this.layer.addFeatures([this.point], {silent: true}); }, /** * APIMethod: deactivate * turn off the handler */ deactivate: function() { if(!OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) { return false; } this.cancel(true); // If a layer's map property is set to null, it means that that layer // isn't added to the map. Since we ourself added the layer to the map // in activate(), we can assume that if this.layer.map is null it means // that the layer has been destroyed (as a result of map.destroy() for // example. if (this.layer.map != null) { this.destroyFeature(); this.layer.destroy(false); } this.layer = null; this.touch = false; return true; }, /** * Method: destroyFeature * Destroy the temporary geometries */ destroyFeature: function() { if(this.layer) { this.layer.destroyFeatures(); } this.point = null; }, /** * Method: destroyPersistedFeature * Destroy the persisted feature. */ destroyPersistedFeature: function() { var layer = this.layer; if(layer && layer.features.length > 1) { this.layer.features[0].destroy(); } }, /** * Method: finishTouchGeometry * Finish the geometry and send it back to the control. */ finishTouchGeometry: function() { this.finalize(); }, /** * Method: finalize * Finish the geometry and call the "done" callback. * * Parameters: * cancel - {Boolean} Call cancel instead of done callback. Default is * false. * noNew - {Boolean} Do not create a new feature after * finalization. Default is false. */ finalize: function(cancel, noNew) { var key = cancel ? "cancel" : "done"; this.drawing = false; this.mouseDown = false; this.lastDown = null; this.lastUp = null; this.lastTouchPx = null; this.callback(key, [this.geometryClone()]); if(cancel || !this.persist) { this.destroyFeature(); } if(!noNew && this.active) { this.createFeature(); } }, /** * APIMethod: cancel * Finish the geometry and call the "cancel" callback. * * Parameters: * noNew - {Boolean} Do not create a new feature after * cancelation. Default is false. */ cancel: function(noNew) { this.finalize(true, noNew); }, /** * Method: click * Handle clicks. Clicks are stopped from propagating to other listeners * on map.events or other dom elements. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ click: function(evt) { OpenLayers.Event.stop(evt); return false; }, /** * Method: dblclick * Handle double-clicks. Double-clicks are stopped from propagating to other * listeners on map.events or other dom elements. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ dblclick: function(evt) { OpenLayers.Event.stop(evt); return false; }, /** * Method: modifyFeature * Modify the existing geometry given a pixel location. * * Parameters: * pixel - {} A pixel location on the map. */ modifyFeature: function(pixel) { var lonlat = this.map.getLonLatFromPixel(pixel); this.point.geometry.x = lonlat.lon; this.point.geometry.y = lonlat.lat; this.callback("modify", [this.point.geometry, this.point, false]); this.point.geometry.clearBounds(); this.drawFeature(); }, /** * Method: drawFeature * Render features on the temporary layer. */ drawFeature: function() { this.layer.drawFeature(this.point, this.style); }, /** * Method: getGeometry * Return the sketch geometry. If is true, this will return * a multi-part geometry. * * Returns: * {} */ getGeometry: function() { var geometry = this.point && this.point.geometry; if(geometry && this.multi) { geometry = new OpenLayers.Geometry.MultiPoint([geometry]); } return geometry; }, /** * Method: geometryClone * Return a clone of the relevant geometry. * * Returns: * {} */ geometryClone: function() { var geom = this.getGeometry(); return geom && geom.clone(); }, /** * Method: mousedown * Handle mousedown. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ mousedown: function(evt) { return this.down(evt); }, /** * Method: touchstart * Handle touchstart. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ touchstart: function(evt) { if (!this.touch) { this.touch = true; // unregister mouse listeners this.map.events.un({ mousedown: this.mousedown, mouseup: this.mouseup, mousemove: this.mousemove, click: this.click, dblclick: this.dblclick, scope: this }); } this.lastTouchPx = evt.xy; return this.down(evt); }, /** * Method: mousemove * Handle mousemove. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ mousemove: function(evt) { return this.move(evt); }, /** * Method: touchmove * Handle touchmove. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ touchmove: function(evt) { this.lastTouchPx = evt.xy; return this.move(evt); }, /** * Method: mouseup * Handle mouseup. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ mouseup: function(evt) { return this.up(evt); }, /** * Method: touchend * Handle touchend. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ touchend: function(evt) { evt.xy = this.lastTouchPx; return this.up(evt); }, /** * Method: down * Handle mousedown and touchstart. Adjust the geometry and redraw. * Return determines whether to propagate the event on the map. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ down: function(evt) { this.mouseDown = true; this.lastDown = evt.xy; if(!this.touch) { // no point displayed until up on touch devices this.modifyFeature(evt.xy); } this.stoppedDown = this.stopDown; return !this.stopDown; }, /** * Method: move * Handle mousemove and touchmove. Adjust the geometry and redraw. * Return determines whether to propagate the event on the map. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ move: function (evt) { if(!this.touch // no point displayed until up on touch devices && (!this.mouseDown || this.stoppedDown)) { this.modifyFeature(evt.xy); } return true; }, /** * Method: up * Handle mouseup and touchend. Send the latest point in the geometry to the control. * Return determines whether to propagate the event on the map. * * Parameters: * evt - {Event} The browser event * * Returns: * {Boolean} Allow event propagation */ up: function (evt) { this.mouseDown = false; this.stoppedDown = this.stopDown; // check keyboard modifiers if(!this.checkModifiers(evt)) { return true; } // ignore double-clicks if (this.lastUp && this.passesTolerance(this.lastUp, evt.xy, this.dblclickTolerance)) { return true; } if (this.lastDown && this.passesTolerance(this.lastDown, evt.xy, this.pixelTolerance)) { if (this.touch) { this.modifyFeature(evt.xy); } if(this.persist) { this.destroyPersistedFeature(); } this.lastUp = evt.xy; this.finalize(); return !this.stopUp; } else { return true; } }, /** * Method: mouseout * Handle mouse out. For better user experience reset mouseDown * and stoppedDown when the mouse leaves the map viewport. * * Parameters: * evt - {Event} The browser event */ mouseout: function(evt) { if(OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) { this.stoppedDown = this.stopDown; this.mouseDown = false; } }, /** * Method: passesTolerance * Determine whether the event is within the optional pixel tolerance. * Note that the pixel tolerance check only works if mousedown events get * to the listeners registered here. If they are stopped by other * elements, and will have no effect * here (this method will always return true). * * Returns: * {Boolean} The click is within the pixel tolerance (if specified). */ passesTolerance: function(pixel1, pixel2, tolerance) { var passes = true; if (tolerance != null && pixel1 && pixel2) { var dist = pixel1.distanceTo(pixel2); if (dist > tolerance) { passes = false; } } return passes; }, CLASS_NAME: "OpenLayers.Handler.Point" });