LANIS Update:

- point / line auto buffer key input change buffer
- pass default buffer values from config
- update area label while vertex editing
- auto buffer remove source geoms when done
- toggle cut tool off when done
- toggle delete tool off when done
- allow panning while vertex editing (middle mouse button)

demo/lanis.html

@@ -163,7 +163,7 @@
 				{
 					"buffer":
 					{
-						"defaultRadius": 100,
+						"defaultRadius": 300,
 						"defaultSegments": 3
 					}
 				},

src/netgis/MapOpenLayers.js

@@ -237,7 +237,7 @@ netgis.MapOpenLayers.prototype.initInteractions = function()
 	this.interactions[ netgis.Modes.MODIFY_FEATURES ] =
 	[
 		new ol.interaction.Modify( { source: this.editLayer.getSource(), deleteCondition: ol.events.condition.doubleClick, style: this.styleModify.bind( this ) } ),
-		//new ol.interaction.DragPan(),
+		new ol.interaction.DragPan( { condition: function( e ) { return ( e.originalEvent.which === 2 ); } } ),
 		new ol.interaction.MouseWheelZoom()
 	];
 	
@@ -596,6 +596,27 @@ netgis.MapOpenLayers.prototype.styleModify = function( feature )
 		}
 	);
 	
+	var geom = feature.getGeometry();
+	
+	if ( geom instanceof ol.geom.Polygon )
+	{
+		var area = geom.getArea();
+		
+		style.setText
+		(
+			new ol.style.Text
+			(
+				{
+					text: [ netgis.util.formatArea( area, true ), "4mm sans-serif" ],
+					font: this.labelFont,
+					fill: new ol.style.Fill( { color: this.client.config.styles.modify.stroke } ),
+					backgroundFill: new ol.style.Fill( { color: "rgba( 255, 255, 255, 0.5 )" } ),
+					padding: [ 2, 4, 2, 4 ]
+				}
+			)
+		);
+	}
+	
 	return [ style, vertex ];
 };
 
@@ -1169,6 +1190,8 @@ netgis.MapOpenLayers.prototype.onSingleClick = function( e )
 			{
 				this.editLayer.getSource().removeFeature( this.hover );
 				this.hover = null;
+				
+				this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
 			}
 			
 			break;
@@ -1246,6 +1269,8 @@ netgis.MapOpenLayers.prototype.onCutFeatureDrawEnd = function( e )
 	this.splitMultiPolygons( this.editLayer );
 	this.editEventsSilent = false;
 	this.updateEditOutput();
+	
+	this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
 };
 
 netgis.MapOpenLayers.prototype.onModifyFeaturesEnd = function( e )
@@ -1328,30 +1353,43 @@ netgis.MapOpenLayers.prototype.onDrawPointsEnd = function( e )
 	if ( preview )
 	{
 		var src = this.editLayer.getSource();
-		src.addFeature( preview.clone() );
 		
-		//TODO: remove sketch point ?
+		// Add Buffer Feature
-		//this.editLayer.getSource().removeFeature( e.feature );
-		
-		/*window.setTimeout( function() {
-		var features = src.getFeatures();
-		src.removeFeature( features[ features.length - 1 ] );
 		src.addFeature( preview.clone() );
-		}, 10 );*/
 		
-		/*e.preventDefault();
+		// Remove Sketch Feature
-		e.stopPropagation();
+		window.setTimeout
-		return false;*/
+		(
+			function()
+			{
+				src.removeFeature( e.feature );
+			},
+			10
+		);
 	}
 };
 
 netgis.MapOpenLayers.prototype.onDrawLinesEnd = function( e )
 {
 	var preview = this.previewLayer.getSource().getFeatures()[ 0 ];
-	if ( ! preview ) return;
 	
-	var src = this.editLayer.getSource();
+	if ( preview )
-	src.addFeature( preview.clone() );
+	{
+		var src = this.editLayer.getSource();
+		
+		// Add Buffer Feature
+		src.addFeature( preview.clone() );
+	
+		// Remove Sketch Feature
+		window.setTimeout
+		(
+			function()
+			{
+				src.removeFeature( e.feature );
+			},
+			10
+		);
+	}
 };
 
 netgis.MapOpenLayers.prototype.onDrawBufferOn = function( e )

src/netgis/Toolbar.js

@@ -62,7 +62,7 @@ netgis.Toolbar.prototype.load = function()
 		this.root.appendChild( this.toolbars[ netgis.Modes.CUT_FEATURE_DRAW ] );
 
 		this.toolbars[ netgis.Modes.MODIFY_FEATURES ] = this.createToolbar();
-		this.append( this.toolbars[ netgis.Modes.MODIFY_FEATURES ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Features verschieben:</span>', this.onToolbarClose.bind( this ) ) );
+		this.append( this.toolbars[ netgis.Modes.MODIFY_FEATURES ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Feature-Eckpunkte verschieben:</span>', this.onToolbarClose.bind( this ) ) );
 		this.root.appendChild( this.toolbars[ netgis.Modes.MODIFY_FEATURES ] );
 
 		this.toolbars[ netgis.Modes.DELETE_FEATURES ] = this.createToolbar();
@@ -198,6 +198,7 @@ netgis.Toolbar.prototype.createToolbarInput = function( title, value, callback )
 	input.setAttribute( "min", 0 );
 	input.value = value;
 	input.addEventListener( "change", callback );
+	input.addEventListener( "keyup", callback );
 	label.appendChild( input );
 	
 	return label;
@@ -496,6 +497,20 @@ netgis.Toolbar.prototype.onDrawBufferChange = function( e )
 	this.client.invoke( on ? netgis.Events.DRAW_BUFFER_ON : netgis.Events.DRAW_BUFFER_OFF, null );
 	
 	this.showDrawBufferOptions( on );
+	
+	// Update Buffer Values
+	if ( on )
+	{
+		var points = true;
+		if ( ! this.toolbars[ netgis.Modes.DRAW_LINES ].classList.contains( "netgis-hide" ) ) points = false;
+		
+		var inputs = this.toolbars[ points ? netgis.Modes.DRAW_POINTS : netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" );
+		var radius = Number.parseInt( inputs[ 2 ].value );
+		var segments = Number.parseInt( inputs[ 3 ].value );
+		
+		this.client.invoke( netgis.Events.DRAW_BUFFER_RADIUS_CHANGE, radius );
+		this.client.invoke( netgis.Events.DRAW_BUFFER_SEGMENTS_CHANGE, segments );
+	}
 };
 
 netgis.Toolbar.prototype.onDrawBufferRadiusChange = function( e )