openlayers-ext - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

DEVELOPING.md

@@ -21,7 +21,2 @@ # Developing
 
-To recreate the distribution on `js` file change, use the watch task
-````
-gulp watch
-````
-
 ### Create individual files
@@ -35,2 +30,18 @@
 
+## Watch files and live reload
+
+To help creating and testing the examples when developping you can use the `watch` or `serve` task. 
+
+To recreate the distribution on the fly when `js` files change, use the `watch` task:
+````
+gulp watch
+````
+
+You can use the `serve` task to start a live server:
+````
+gulp serve
+````
+See the result in your browser at `http://localhost:8181`.
+The `dist` will be recreated on each changes and the page will reload on the browser. 
+
 ## Adding new extensions
@@ -37,0 +48,0 @@

gulpfile.js

@@ -118,6 +118,6 @@ /* Gulp file to create dist
 		"./src/layer/*.js",
-		"./src/overlay/*.js",
+		"./src/overlay/Popup.js", "./src/overlay/*.js",
     "./src/geom/*.js",
     "./src/render/*.js",
-    "./src/style/*.js", "!./src/style/FontMakiDef.js", "!./src/style/FontAwesomeDef.js",
+    "./src/style/*.js", "!./src/style/FontMakiDef.js", "!./src/style/FontMaki2Def.js", "!./src/style/FontAwesomeDef.js",
     // Utils in extrajs
@@ -147,2 +147,22 @@ //"./src/utils/*.js", "!./src/render/Pulse.js", "!./src/render/Markup.js",
 
+/* Start a server and watch for modification for live reload */
+gulp.task('serve', function() {
+  var liveServer = require("live-server");
+
+  var params = {
+    port: 8181,             // Set the server port. Defaults to 8080.
+    host: "0.0.0.0",        // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
+    open: false,            // When false, it won't load your browser by default.
+    watch: ['dist','examples'], // comma-separated string for paths to watch
+//    ignore: '',             // comma-separated string for paths to ignore
+    file: "index.html",     // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
+    wait: 1000,             // Waits for all changes, before reloading. Defaults to 0 sec.
+    logLevel: 2             // 0 = errors only, 1 = some, 2 = lots
+  };
+  liveServer.start(params);
+
+  gulp.watch(['./src/*/*.js','./src/*/*.css'], ['default']);
+});
+
+
 // Build extra js files to be used individually
@@ -152,3 +172,3 @@ gulp.task("extrajs", function() {
     "./src/control/Cloud.js",
-    "./src/style/FontMakiDef.js", "./src/style/FontAwesomeDef.js",
+    "./src/style/FontMakiDef.js", "./src/style/FontMaki2Def.js", "./src/style/FontAwesomeDef.js",
     "./src/utils/*.js",
@@ -155,0 +175,0 @@ "./src/filter/TextureImage.js"

lib/control/Bar.js

@@ -18,9 +18,9 @@ /*	Copyright (c) 2016 Jean-Marc VIGLINO,
  */
-ol.control.Bar = function(options)
-{	if (!options) options={};
+ol.control.Bar = function(options) {
+  if (!options) options={};
 	var element = $("<div>").addClass('ol-unselectable ol-control ol-bar');
 	if (options.className) element.addClass(options.className);
 	if (options.group) element.addClass('ol-group');
-	ol.control.Control.call(this,
-	{	element: element.get(0),
+	ol.control.Control.call(this, {
+    element: element.get(0),
 		target: options.target
@@ -31,5 +31,5 @@ });
 	this.controls_ = [];
-	if (options.controls instanceof Array)
-	{	for (var i=0; i<options.controls.length; i++)
-		{	this.addControl(options.controls[i]);
+	if (options.controls instanceof Array) {
+    for (var i=0; i<options.controls.length; i++) {
+      this.addControl(options.controls[i]);
 		}
@@ -49,4 +49,4 @@ }
 */
-ol.control.Bar.prototype.getVisible = function ()
-{	return ($(this.element).css('display') != 'none');
+ol.control.Bar.prototype.getVisible = function () {
+  return ($(this.element).css('display') != 'none');
 }
@@ -58,6 +58,6 @@ /**
  */
-ol.control.Bar.prototype.setMap = function (map)
-{	ol.control.Control.prototype.setMap.call(this, map);
-	for (var i=0; i<this.controls_.length; i++)
-	{	var c = this.controls_[i];
+ol.control.Bar.prototype.setMap = function (map) {
+  ol.control.Control.prototype.setMap.call(this, map);
+	for (var i=0; i<this.controls_.length; i++) {
+    var c = this.controls_[i];
 		// map.addControl(c);
@@ -70,4 +70,4 @@ c.setMap(map);
 */
-ol.control.Bar.prototype.getControls = function ()
-{	return this.controls_;
+ol.control.Bar.prototype.getControls = function () {
+  return this.controls_;
 };
@@ -77,8 +77,8 @@ /** Set tool bar position
 */
-ol.control.Bar.prototype.setPosition = function (pos)
-{	$(this.element).removeClass('ol-left ol-top ol-bottom ol-right');
+ol.control.Bar.prototype.setPosition = function (pos) {
+  $(this.element).removeClass('ol-left ol-top ol-bottom ol-right');
 	pos=pos.split ('-');
-	for (var i=0; i<pos.length; i++)
-	{	switch (pos[i])
-		{	case 'top':
+	for (var i=0; i<pos.length; i++) {
+    switch (pos[i]) {
+      case 'top':
 			case 'left':
@@ -96,12 +96,12 @@ case 'bottom':
 */
-ol.control.Bar.prototype.addControl = function (c)
-{	this.controls_.push(c);
+ol.control.Bar.prototype.addControl = function (c) {
+  this.controls_.push(c);
 	c.setTarget(this.element);
-	if (this.getMap())
-	{	this.getMap().addControl(c);
+	if (this.getMap()) {
+    this.getMap().addControl(c);
 	}
 	// Activate and toogleOne
 	c.on ('change:active', this.onActivateControl_.bind(this));
-	if (c.getActive && c.getActive())
-	{	c.dispatchEvent({ type:'change:active', key:'active', oldValue:false, active:true });
+	if (c.getActive && c.getActive()) {
+    c.dispatchEvent({ type:'change:active', key:'active', oldValue:false, active:true });
 	}
@@ -112,13 +112,13 @@ };
 */
-ol.control.Bar.prototype.deactivateControls = function (except)
-{	for (var i=0; i<this.controls_.length; i++)
-	{	if (this.controls_[i] !== except && this.controls_[i].setActive)
-		{	this.controls_[i].setActive(false);
+ol.control.Bar.prototype.deactivateControls = function (except) {
+  for (var i=0; i<this.controls_.length; i++) {
+  if (this.controls_[i] !== except && this.controls_[i].setActive) {
+    this.controls_[i].setActive(false);
 		}
 	}
 };
-ol.control.Bar.prototype.getActiveControls = function ()
-{	var active = [];
-	for (var i=0, c; c=this.controls_[i]; i++)
-	{	if (c.getActive && c.getActive()) active.push(c);
+ol.control.Bar.prototype.getActiveControls = function () {
+  var active = [];
+	for (var i=0, c; c=this.controls_[i]; i++) {
+    if (c.getActive && c.getActive()) active.push(c);
 	}
@@ -130,10 +130,10 @@ return active;
 */
-ol.control.Bar.prototype.setActive = function (b)
-{	if (!b && this.get("autoDeactivate"))
-	{	this.deactivateControls();
+ol.control.Bar.prototype.setActive = function (b) {
+  if (!b && this.get("autoDeactivate")) {
+    this.deactivateControls();
 	}
-	if (b)
-	{	var ctrls = this.getControls();
-		for (var i=0, sb; (sb = ctrls[i]); i++)
-		{	if (sb.get("autoActivate")) sb.setActive(true);
+	if (b) {
+    var ctrls = this.getControls();
+		for (var i=0, sb; (sb = ctrls[i]); i++) {
+      if (sb.get("autoActivate")) sb.setActive(true);
 		}
@@ -146,8 +146,8 @@ }
 ol.control.Bar.prototype.onActivateControl_ = function (e) {
-	if (this.get('toggleOne'))
-	{	if (e.active)
-		{	var n;
+	if (this.get('toggleOne')) {
+    if (e.active) {
+      var n;
 			var ctrl = e.target;
-			for (n=0; n<this.controls_.length; n++)
-			{	if (this.controls_[n]===ctrl) break;
+			for (n=0; n<this.controls_.length; n++) {
+        if (this.controls_[n]===ctrl) break;
 			}
@@ -157,9 +157,8 @@ // Not here!
 			this.deactivateControls (this.controls_[n]);
-		}
-		else
-		{	// No one active > test auto activate
-			if (!this.getActiveControls().length)
-			{	for (var i=0, c; c=this.controls_[i]; i++)
-				{	if (c.get("autoActivate"))
-					{	c.setActive();
+		} else {
+      // No one active > test auto activate
+			if (!this.getActiveControls().length) {
+        for (var i=0, c; c=this.controls_[i]; i++) {
+          if (c.get("autoActivate")) {
+            c.setActive(true);
 						break;
@@ -166,0 +165,0 @@ }

lib/control/Permalink.js

@@ -1,2 +0,2 @@
-/*	Copyright (c) 2015 Jean-Marc VIGLINO, 
+/*	Copyright (c) 2015-2018 Jean-Marc VIGLINO, 
 	released under the CeCILL-B license (French BSD license)
@@ -20,4 +20,4 @@ (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
  */
-ol.control.Permalink = function(opt_options)
-{	var options = opt_options || {};
+ol.control.Permalink = function(opt_options) {
+  var options = opt_options || {};
 	var self = this;
@@ -28,13 +28,13 @@ var button = document.createElement('button');
 	this.hash_ = options.anchor ? "#" : "?";
-	function linkto()
-	{	if (typeof(options.onclick) == 'function') options.onclick(self.getLink());
+	function linkto() {
+    if (typeof(options.onclick) == 'function') options.onclick(self.getLink());
 		else self.setUrlReplace(!self.replaceState_);
 	}
-    button.addEventListener('click', linkto, false);
-    button.addEventListener('touchstart', linkto, false);
+  button.addEventListener('click', linkto, false);
+  button.addEventListener('touchstart', linkto, false);
 	var element = document.createElement('div');
-    element.className = (options.className || "ol-permalink") + " ol-unselectable ol-control";
-    element.appendChild(button);
-	ol.control.Control.call(this,
-	{	element: element,
+  element.className = (options.className || "ol-permalink") + " ol-unselectable ol-control";
+  element.appendChild(button);
+	ol.control.Control.call(this, {
+    element: element,
 		target: options.target
@@ -46,8 +46,8 @@ });
 	var hash = document.location.hash || document.location.search;
-	if (hash)
-	{	hash = hash.replace(/(^#|^\?)/,"").split("&");
-		for (var i=0; i<hash.length;  i++)
-		{	var t = hash[i].split("=");
-			switch(t[0])
-			{	case 'lon':
+	if (hash) {
+    hash = hash.replace(/(^#|^\?)/,"").split("&");
+		for (var i=0; i<hash.length;  i++) {
+      var t = hash[i].split("=");
+			switch(t[0]) {
+        case 'lon':
 				case 'lat':
@@ -90,9 +90,9 @@ case 'z':
 */
-ol.control.Permalink.prototype.getLayerByLink =  function (id, layers)
-{	if (!layers && this.getMap()) layers = this.getMap().getLayers().getArray();
-	for (var i=0; i<layers.length; i++)
-	{	if (layers[i].get('permalink') == id) return layers[i];
+ol.control.Permalink.prototype.getLayerByLink =  function (id, layers) {
+  if (!layers && this.getMap()) layers = this.getMap().getLayers().getArray();
+	for (var i=0; i<layers.length; i++) {
+    if (layers[i].get('permalink') == id) return layers[i];
 		// Layer Group
-		if (layers[i].getLayers)
-		{	var li = this.getLayerByLink ( id, layers[i].getLayers().getArray() );
+		if (layers[i].getLayers) {
+      var li = this.getLayerByLink ( id, layers[i].getLayers().getArray() );
 			if (li) return li;
@@ -102,7 +102,7 @@ }
 	return false;
-}
+};
 /** Set map position according to the current link 
 */
-ol.control.Permalink.prototype.setPosition = function()
-{	var map = this.getMap();
+ol.control.Permalink.prototype.setPosition = function() {
+  var map = this.getMap();
 	if (!map) return;
@@ -113,4 +113,4 @@ var hash = document.location.hash || document.location.search;
 	hash = hash.replace(/(^#|^\?)/,"").split("&");
-	for (var i=0; i<hash.length;  i++)
-	{	var t = hash[i].split("=");
+	for (var i=0; i<hash.length;  i++) {
+    var t = hash[i].split("=");
 		param[t[0]] = t[1];
@@ -122,24 +122,24 @@ }
 	if (param.r) map.getView().setRotation(Number(param.r));
-	if (param.l)
-	{	var l = param.l.split("|");
-		// Reset layers 
-		function resetLayers(layers)
-		{	if (!layers) layers = map.getLayers().getArray();
-			for (var i=0; i<layers.length; i++)
-			{	if (layers[i].get('permalink')) 
-				{	layers[i].setVisible(false);
-					// console.log("hide "+layers[i].get('permalink'));
-				}
-				if (layers[i].getLayers)
-				{	resetLayers (layers[i].getLayers().getArray());
-				}
+	// Reset layers visibility
+	function resetLayers(layers) {
+    if (!layers) layers = map.getLayers().getArray();
+		for (var i=0; i<layers.length; i++){
+      if (layers[i].get('permalink')) {
+        layers[i].setVisible(false);
+				// console.log("hide "+layers[i].get('permalink'));
 			}
+			if (layers[i].getLayers) {
+        resetLayers (layers[i].getLayers().getArray());
+			}
 		}
+	}
+	if (param.l) {
 		resetLayers();
-		for (var i=0; i<l.length; i++)
-		{	var t = l[i].split(":");
+		var l = param.l.split("|");
+    for (var i=0; i<l.length; i++) {
+      var t = l[i].split(":");
 			var li = this.getLayerByLink(t[0]);
 			var op = Number(t[1]);
-			if (li) 
-			{	li.setOpacity(op);
+			if (li) {
+        li.setOpacity(op);
 				li.setVisible(true);
@@ -149,3 +149,3 @@ }
 	}
-}
+};
 /**
@@ -156,11 +156,42 @@ * Get the parameters added to the url. The object can be changed to add new values.
  */
-ol.control.Permalink.prototype.getUrlParams = function()
-{	return this.search_;
-}
+ol.control.Permalink.prototype.getUrlParams = function() {
+  return this.search_;
+};
 /**
+ * Set a parameter to the url.
+ * @param {string} key the key parameter
+ * @param {string|undefined} value the parameter's value, if undefined or empty string remove the parameter
+ * @api stable
+ */
+ol.control.Permalink.prototype.setUrlParam = function(key, value) {
+  if (key) {
+    if (value===undefined || value==='') delete (this.search_[encodeURIComponent(key)])
+    else this.search_[encodeURIComponent(key)] = encodeURIComponent(value);
+  }
+  this.viewChange_();
+};
+/**
+ * Get a parameter url.
+ * @param {string} key the key parameter
+ * @return {string} the parameter's value or empty string if not set
+ * @api stable
+ */
+ol.control.Permalink.prototype.getUrlParam = function(key) {
+  return decodeURIComponent (this.search_[encodeURIComponent(key)] || '');
+};
+/**
+ * Has a parameter url.
+ * @param {string} key the key parameter
+ * @return {boolean} 
+ * @api stable
+ */
+ol.control.Permalink.prototype.hasUrlParam = function(key) {
+  return this.search_.hasOwnProperty(encodeURIComponent(key));
+};
+/**
  * Get the permalink
  * @return {permalink}
  */
-ol.control.Permalink.prototype.getLink = function()
-{	var map = this.getMap();
+ol.control.Permalink.prototype.getLink = function() {
+  var map = this.getMap();
 	var c = ol.proj.transform(map.getView().getCenter(), map.getView().getProjection(), 'EPSG:4326');
@@ -175,3 +206,3 @@ var z = map.getView().getZoom();
 	return document.location.protocol+"//"+document.location.host+document.location.pathname+this.hash_+anchor;
-}
+};
 /**
@@ -181,4 +212,4 @@ * Enable / disable url replacement (replaceSate)
  */
-ol.control.Permalink.prototype.setUrlReplace = function(replace)
-{	try{
+ol.control.Permalink.prototype.setUrlReplace = function(replace) {
+  try {
 		this.replaceState_ = replace;
@@ -193,3 +224,3 @@ if (!replace)
 		else window.history.replaceState (null,null, this.getLink());
-	}catch(e){}
+	} catch(e) {}
 }
@@ -201,6 +232,6 @@ /**
  */
-ol.control.Permalink.prototype.viewChange_ = function()
-{	try{
+ol.control.Permalink.prototype.viewChange_ = function() {
+  try {
 		if (this.replaceState_) window.history.replaceState (null,null, this.getLink());
-	}catch(e){}
+	} catch(e) {}
 }
@@ -212,9 +243,9 @@ /**
  */
-ol.control.Permalink.prototype.layerChange_ = function(e)
-{	// Get layers
+ol.control.Permalink.prototype.layerChange_ = function(e) {
+  // Get layers
 	var l = "";
-	function getLayers(layers)
-	{	for (var i=0; i<layers.length; i++)
-		{	if (layers[i].getVisible() && layers[i].get("permalink"))
-			{	if (l) l += "|";
+  function getLayers(layers) {
+  	for (var i=0; i<layers.length; i++) {
+      if (layers[i].getVisible() && layers[i].get("permalink")) {
+        if (l) l += "|";
 				l += layers[i].get("permalink")+":"+layers[i].get("opacity");
@@ -229,2 +260,2 @@ }
 	this.viewChange_();
-}
+};

lib/control/SearchGeoportail.js

@@ -29,3 +29,3 @@ /*	Copyright (c) 2017 Jean-Marc VIGLINO,
   options.typing = options.typing || 500;
-  options.url = "http://wxs.ign.fr/"+options.apiKey+"/ols/apis/completion";
+  options.url = "https://wxs.ign.fr/"+options.apiKey+"/ols/apis/completion";
   ol.control.SearchJSON.call(this, options);
@@ -32,0 +32,0 @@ this.set("copy","<a href='https://www.geoportail.gouv.fr/' target='new'>&copy; IGN-Géoportail</a>");

lib/control/SearchJSON.js

@@ -57,3 +57,3 @@ /*	Copyright (c) 2017 Jean-Marc VIGLINO,
 		parameters += (parameters) ? '&' : '?';
-		if (data.hasOwnProperty(index)) parameters += index + '=' + data[index];
+		if (data.hasOwnProperty(index)) parameters += index + '=' + encodeURIComponent(data[index]);
 	}
@@ -60,0 +60,0 @@ this.ajax(url + parameters,

lib/geom/ConvexHull.js

@@ -7,9 +7,10 @@ /*
 */
+(function(){
 /** Tests if a point is left or right of line (a,b).
 * @param {ol.coordinate} a point on the line
 * @param {ol.coordinate} b point on the line
-* @param {ol.coordinate} 0
+* @param {ol.coordinate} o
 * @return {bool} true if (a,b,o) turns clockwise
 */
-let clockwise = function (a, b, o) {
+var clockwise = function (a, b, o) {
   return ((a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]) <= 0);
@@ -80,1 +81,2 @@ };
 };
+})();

lib/interaction/DrawHole.js

@@ -149,3 +149,3 @@ /*	Copyright (c) 2017 Jean-Marc VIGLINO,
 			var geom = e.feature.getGeometry();
-			var newGeom = new ol.geom.MultiPolygon();
+			var newGeom = new ol.geom.MultiPolygon([]);
 			for (var i=0, pi; pi=geom.getPolygon(i); i++) {
@@ -152,0 +152,0 @@ if (i===this._polygonIndex) {

lib/interaction/SnapGuides.js

@@ -10,2 +10,3 @@ /*	Copyright (c) 2016 Jean-Marc VIGLINO,
  *	- pixelTolerance {number | undefined} distance (in px) to snap to a guideline, default 10 px
+ *  - enableInitialGuides {bool | undefined} whether to draw initial guidelines based on the maps orientation, default false.
  *	- style {ol.style.Style | Array<ol.style.Style> | undefined} Style for the sektch features.
@@ -35,2 +36,3 @@ */
 	this.snapDistance_ = options.pixelTolerance || 10;
+	this.enableInitialGuides_ = options.enableInitialGuides || false;
 	// Default style
@@ -53,16 +55,5 @@ var sketchStyle =
 		});
-/* Speed up with a ImageVector layer (deprecated)
-	this.overlayLayer_ = new ol.layer.Image(
-		{	source: new ol.source.ImageVector(
-			{	source: this.overlaySource_,
-				style: function(f)
-				{	return sketchStyle;
-				}
-			}),
-			name:'Snap overlay',
-			displayInLayerSwitcher: false
-		});
-*/
-console.log('CREATE OVERLAY')
 	this.overlayLayer_ = new ol.layer.Vector({
+		// render the snap guides as an image to improve performance on rerenders
+		renderMode: 'image',
 		source: this.overlaySource_,
@@ -152,3 +143,7 @@ style: function(f) {
 		var extent = map.getView().calculateExtent(map.getSize());
-		extent = ol.extent.buffer(extent, Math.max (1e5+1, (extent[2]-extent[0])*100));
+		var guideLength = Math.max(
+			this.projExtent_[2] - this.projExtent_[0],
+			this.projExtent_[3] - this.projExtent_[1]
+		);
+		extent = ol.extent.buffer(extent, guideLength * 1.5);
 		//extent = ol.extent.boundingExtent(extent, this.projExtent_);
@@ -159,23 +154,18 @@ if (extent[0]<this.projExtent_[0]) extent[0]=this.projExtent_[0];
 		if (extent[3]>this.projExtent_[3]) extent[3]=this.projExtent_[3];
-		// 
 		var dx = v[0][0] - v[1][0];
 		var dy = v[0][1] - v[1][1];
 		var d = 1 / Math.sqrt(dx*dx+dy*dy);
-		var p, g = [];
-		var p0, p1;
-		for (var i= 0; i<1e8; i+=1e5)
-		{	if (ortho) p = [ v[0][0] + dy*d*i, v[0][1] - dx*d*i];
-			else p = [ v[0][0] + dx*d*i, v[0][1] + dy*d*i];
-			if (ol.extent.containsCoordinate(extent, p)) g.push(p);
-			else break;
+		function generateLine(loopDir) {
+			var p, g = [];
+			var loopCond = guideLength*loopDir*2;
+			for (var i=0; loopDir > 0 ? i < loopCond : i > loopCond; i+=(guideLength * loopDir) / 100) {
+				if (ortho) p = [ v[0][0] + dy*d*i, v[0][1] - dx*d*i];
+				else p = [ v[0][0] + dx*d*i, v[0][1] + dy*d*i];
+				if (ol.extent.containsCoordinate(extent, p)) g.push(p);
+				else break;
+			}
+			return new ol.Feature(new ol.geom.LineString([g[0], g[g.length-1]]));
 		}
-		var f0 = new ol.Feature(new ol.geom.LineString(g));
-		var g=[];
-		for (var i= 0; i>-1e8; i-=1e5)
-		{	if (ortho) p = [ v[0][0] + dy*d*i, v[0][1] - dx*d*i];
-			else p = [ v[0][0] + dx*d*i, v[0][1] + dy*d*i];
-			if (ol.extent.containsCoordinate(extent, p)) g.push(p);
-			else break;
-		}
-		var f1 = new ol.Feature(new ol.geom.LineString(g));
+		var f0 = generateLine(1);
+		var f1 = generateLine(-1);
 		this.overlaySource_.addFeature(f0);
@@ -204,12 +194,7 @@ this.overlaySource_.addFeature(f1);
 	function setGuides(e) {
-		var coord = [];
+		var coord = e.target.getCoordinates();
 		var s = 2;
 		switch (e.target.getType()) {
-			case 'LineString':
-				coord = e.target.getCoordinates();
-				s = 2;
-				break;
 			case 'Polygon':
-				coord = e.target.getCoordinates()[0];
-				s = 3;
+				coord = coord[0].slice(0, -1);
 				break;
@@ -219,10 +204,16 @@ default: break;
 		var l = coord.length;
-		if (l != nb && l > s) {
+		if (l === s && self.enableInitialGuides_) {
+			let [x, y] = coord[0];
+			coord = [[x, y], [x, y - 1]];
+		}
+		if (l != nb && (self.enableInitialGuides_ ? l >= s : l > s)) {
 			self.clearGuides(features);
-			features = self.addOrthoGuide([coord[l-s],coord[l-s-1]]);
-			features = features.concat(self.addGuide([coord[0],coord[1]]));
-			features = features.concat(self.addOrthoGuide([coord[0],coord[1]]));
+			if (l > s) {
+				features = self.addOrthoGuide([coord[l - s], coord[l - s - 1]]);
+			}
+			features = features.concat(self.addGuide([coord[0], coord[1]]));
+			features = features.concat(self.addOrthoGuide([coord[0], coord[1]]));
 			nb = l;
 		}
-	};
+	}
 	// New drawing
@@ -241,1 +232,47 @@ drawi.on ("drawstart", function(e) {
 };
+/** Listen to modify event to add orthogonal guidelines relative to the currently dragged point
+* @param {_ol_interaction_Modify_} modifyi a modify interaction to listen to
+* @api
+*/
+ol.interaction.SnapGuides.prototype.setModifyInteraction = function (modifyi) {
+	function mod(d, n) {
+		return ((d % n) + n) % n;
+	}
+	var self = this;
+	// Current guidelines
+	var features = [];
+	function computeGuides(e) {
+		const selectedVertex = e.target.vertexFeature_
+		if (!selectedVertex) return;
+		var f = e.features.getArray()[0];
+		var geom = f.getGeometry();
+		var coord = geom.getCoordinates();
+		switch (geom.getType()) {
+			case 'Polygon':
+				coord = coord[0].slice(0, -1);
+				break;
+			default: break;
+		}
+		var modifyVertex = selectedVertex.getGeometry().getCoordinates();
+		var idx = coord.findIndex((c) => c[0] === modifyVertex[0] && c[1] === modifyVertex[1]);
+		var l = coord.length;
+		self.clearGuides(features);
+		features = self.addOrthoGuide([coord[mod(idx - 1, l)], coord[mod(idx - 2, l)]]);
+		features = features.concat(self.addGuide([coord[mod(idx - 1, l)], coord[mod(idx - 2, l)]]));
+		features = features.concat(self.addGuide([coord[mod(idx + 1, l)], coord[mod(idx + 2, l)]]));
+		features = features.concat(self.addOrthoGuide([coord[mod(idx + 1, l)], coord[mod(idx + 2, l)]]));
+	}
+	function setGuides(e) {
+		// This callback is called before ol adds the vertex to the feature, so
+		// defer a moment for openlayers to add the new vertex
+		setTimeout(computeGuides, 0, e);
+	}
+	function drawEnd(e) {
+		self.clearGuides(features);
+		features = [];
+	}
+	// New drawing
+	modifyi.on("modifystart", setGuides);
+	// end drawing, clear directions
+	modifyi.on("modifyend", drawEnd);
+};

lib/interaction/Transform.js

@@ -16,2 +16,4 @@ /** Interaction rotate
  *	@param {bool} options.rotate can rotate the feature
+ *	@param {bool} options.noFlip prevent the feature geometry to flip, default false
+ *	@param {bool} options.selection the intraction handle selection/deselection, if not use the select prototype to add features to transform, default true
  *	@param {ol.events.ConditionType | undefined} options.keepAspectRatio A function that takes an ol.MapBrowserEvent and returns a boolean to keep aspect ratio, default ol.events.condition.shiftKeyOnly.
@@ -67,2 +69,6 @@ *	@param {ol.events.ConditionType | undefined} options.modifyCenter A function that takes an ol.MapBrowserEvent and returns a boolean to apply scale & strech from the center, default ol.events.condition.metaKey or ol.events.condition.ctrlKey.
   this.set('modifyCenter', (options.modifyCenter || function(e){ return e.originalEvent.metaKey || e.originalEvent.ctrlKey }));
+  /* Prevent flip */
+  this.set('noFlip', (options.noFlip || false));
+  /* Handle selection */
+  this.set('selection', (options.selection !== false));
   /*  */
@@ -209,2 +215,4 @@ this.set('hitTolerance', (options.hitTolerance || 0));
       }
+      // No seletion
+      if (!self.get('selection')) return null;
       // filter condition
@@ -300,2 +308,3 @@ if (self._filter) {
     this.selection_ = [];
+    this.drawSketch_();
     return;
@@ -357,3 +366,3 @@ }
   }
-  else {
+  else if (this.get('selection')) {
     if (feature){
@@ -450,2 +459,6 @@ if (!this.addFn_(evt)) this.selection_ = [];
       var scy = (evt.coordinate[1] - center[1]) / (this.coordinate_[1] - center[1]);
+      if (this.get('noFlip')) {
+        if (scx<0) scx=-scx;
+        if (scy<0) scy=-scy;
+      }
       if (this.constraint_) {
@@ -452,0 +465,0 @@ if (this.constraint_=="h") scx=1;

lib/style/Chart.js

@@ -32,3 +32,3 @@ /*	Copyright (c) 2015 Jean-Marc VIGLINO,
 ol.style.Chart = function(opt_options)
-{	options = opt_options || {};
+{	var options = opt_options || {};
 	var strokeWidth = 0;
@@ -35,0 +35,0 @@ if (opt_options.stroke) strokeWidth = opt_options.stroke.getWidth();

lib/style/FontSymbol.js

@@ -25,2 +25,3 @@ /*	Copyright (c) 2015 Jean-Marc VIGLINO,
  *  @param {number} options.fontSize, default 1
+ *  @param {string} options.fontStyle the font style (bold, italic, bold italic, etc), default none
  *  @param {boolean} options.gradient true to display a gradient on the symbol
@@ -42,2 +43,3 @@ *  @param {_ol_style_Fill_} options.fill
 	this.fontSize_ = options.fontSize || 1;
+	this.fontStyle_ = options.fontStyle || '';
 	this.stroke_ = options.stroke;
@@ -104,2 +106,3 @@ this.fill_ = options.fill;
 		fontSize: this.fontSize_,
+		fontStyle: this.fontStyle_,
 		stroke: this.stroke_,
@@ -329,3 +332,5 @@ fill: this.fill_,
 	if (this.glyph_.char)
-	{	context.font = (2*tr.fac*(this.radius_)*this.fontSize_)+"px "+this.glyph_.font;
+	{	context.font = this.fontStyle_ +' '
+				+ (2*tr.fac*(this.radius_)*this.fontSize_)+"px "
+				+ this.glyph_.font;
 		context.strokeStyle = context.fillStyle;
@@ -332,0 +337,0 @@ context.lineWidth = renderOptions.strokeWidth * (this.form_ == "none" ? 2:1);

package-openlayers-ext.json

 {
   "name": "openlayers-ext",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A set of cool extensions for OpenLayers (ol).",
@@ -5,0 +5,0 @@ "main": "index.js",

package.json

 {
   "name": "openlayers-ext",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A set of cool extensions for OpenLayers (ol).",
@@ -9,3 +9,3 @@ "main": "index.js",
     "jquery": "^3.2.1",
-    "openlayers": "^5.0.3"
+    "openlayers": "^5.1.3"
   },
@@ -16,7 +16,8 @@ "devDependencies": {
     "gulp-clean": "^0.4.0",
-    "gulp-concat": "^2.6.0",
+    "gulp-concat": "^2.6.1",
     "gulp-cssmin": "^0.2.0",
-    "gulp-header": "^1.8.8",
-    "gulp-minify": "^2.1.0",
-    "gulp-watch": "^5.0.0",
+    "gulp-header": "^2.0.5",
+    "gulp-minify": "^3.1.0",
+    "gulp-watch": "^5.0.1",
+    "live-server": "^1.2.0",
     "minimist": "^1.2.0",
@@ -23,0 +24,0 @@ "plugin-error": "^1.0.1",

No alert changes

Improved metrics

Total package byte prevSize

4492283

increased by3.92%

Number of package files

250

increased by3.31%

Lines of code

41718

increased by7.13%

Worsened metrics

Dev dependency count

12

increased by9.09%

Dependency changes

• Updatedopenlayers@^5.1.3