/** Interaction rotate * @constructor * @extends {ol.interaction.Pointer} * @fires select | rotatestart | rotating | rotateend | translatestart | translating | translateend | scalestart | scaling | scaleend * @param {olx.interaction.TransformOptions} * - layers {Array} array of layers to transform, * - features {ol.Collection} collection of feature to transform, * - translateFeature {bool} Translate when click on feature * - translate {bool} Can translate the feature * - stretch {bool} can stretch the feature * - scale {bool} can scale the feature * - rotate {bool} can rotate the feature * - style {} list of ol.style for handles * */ ol.interaction.Transform = function(options) { if (!options) options={}; var self = this; ol.interaction.Pointer.call(this, { handleDownEvent: this.handleDownEvent_, handleDragEvent: this.handleDragEvent_, handleMoveEvent: this.handleMoveEvent_, handleUpEvent: this.handleUpEvent_ }); /** Collection of feature to transform */ this.features_ = options.features; /** List of layers to transform */ this.layers_ = options.layers ? (options.layers instanceof Array) ? options.layers:[options.layers] : null; /** Translate when click on feature */ this.set('translateFeature', (options.translateFeature!==false)); /** Can translate the feature */ this.set('translate', (options.translate!==false)); /** Can stretch the feature */ this.set('stretch', (options.stretch!==false)); /** Can scale the feature */ this.set('scale', (options.scale!==false)); /** Can rotate the feature */ this.set('rotate', (options.rotate!==false)); // Force redraw when changed this.on ('propertychange', function() { this.drawSketch_(); }); // Create a new overlay layer for the sketch this.handles_ = new ol.Collection(); this.overlayLayer_ = new ol.layer.Vector( { source: new ol.source.Vector({ features: this.handles_, useSpatialIndex: false }), name:'Transform overlay', displayInLayerSwitcher: false, // Return the style according to the handle type style: function (feature) { return (self.style[(feature.get('handle')||'default')+(feature.get('constraint')||'')+(feature.get('option')||'')]); } }); // setstyle this.setDefaultStyle(); }; ol.inherits(ol.interaction.Transform, ol.interaction.Pointer); /** Cursors for transform */ ol.interaction.Transform.prototype.Cursors = { 'default': 'auto', 'select': 'pointer', 'translate':'move', 'rotate': 'move', 'scale': 'ne-resize', 'scale1': 'nw-resize', 'scale2': 'ne-resize', 'scale3': 'nw-resize', 'scalev': 'e-resize', 'scaleh1': 'n-resize', 'scalev2': 'e-resize', 'scaleh3': 'n-resize' }; /** * Remove the interaction from its current map, if any, and attach it to a new * map, if any. Pass `null` to just remove the interaction from the current map. * @param {ol.Map} map Map. * @api stable */ ol.interaction.Transform.prototype.setMap = function(map) { if (this.getMap()) this.getMap().removeLayer(this.overlayLayer_); ol.interaction.Pointer.prototype.setMap.call (this, map); this.overlayLayer_.setMap(map); this.isTouch = /touch/.test(map.getViewport().className); this.setDefaultStyle(); }; /** * Activate/deactivate interaction * @param {bool} * @api stable */ ol.interaction.Transform.prototype.setActive = function(b) { ol.interaction.Pointer.prototype.setActive.call (this, b); if (b) this.select(null); }; /** Set efault sketch style */ ol.interaction.Transform.prototype.setDefaultStyle = function() { // Style var stroke = new ol.style.Stroke({ color: [255,0,0,1], width: 1 }); var strokedash = new ol.style.Stroke({ color: [255,0,0,1], width: 1, lineDash:[4,4] }); var fill0 = new ol.style.Fill({ color:[255,0,0,0.01] }); var fill = new ol.style.Fill({ color:[255,255,255,0.8] }); var circle = new ol.style.RegularShape({ fill: fill, stroke: stroke, radius: this.isTouch ? 12 : 6, points: 15 }); circle.getAnchor()[0] = this.isTouch ? -10 : -5; var bigpt = new ol.style.RegularShape({ fill: fill, stroke: stroke, radius: this.isTouch ? 16 : 8, points: 4, angle: Math.PI/4 }); var smallpt = new ol.style.RegularShape({ fill: fill, stroke: stroke, radius: this.isTouch ? 12 : 6, points: 4, angle: Math.PI/4 }); function createStyle (img, stroke, fill) { return [ new ol.style.Style({image:img, stroke:stroke, fill:fill}) ]; } /** Style for handles */ this.style = { 'default': createStyle (bigpt, strokedash, fill0), 'translate': createStyle (bigpt, stroke, fill), 'rotate': createStyle (circle, stroke, fill), 'rotate0': createStyle (bigpt, stroke, fill), 'scale': createStyle (bigpt, stroke, fill), 'scale1': createStyle (bigpt, stroke, fill), 'scale2': createStyle (bigpt, stroke, fill), 'scale3': createStyle (bigpt, stroke, fill), 'scalev': createStyle (smallpt, stroke, fill), 'scaleh1': createStyle (smallpt, stroke, fill), 'scalev2': createStyle (smallpt, stroke, fill), 'scaleh3': createStyle (smallpt, stroke, fill), }; this.drawSketch_(); } /** * Set sketch style. * @param {ol.Map} map Map. * @api stable */ ol.interaction.Transform.prototype.setStyle = function(style, olstyle) { if (!olstyle) return; if (olstyle instanceof Array) this.style[style] = olstyle; else this.style[style] = [ olstyle ]; for (var i=0; i