From b0d068e8a600294608b1433ae7267af072802c96 Mon Sep 17 00:00:00 2001 From: mpeltriaux Date: Mon, 13 Mar 2023 08:06:24 +0100 Subject: [PATCH 1/2] Netgis client update * adds bugfixes and improvements - 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) --- .../map/client/libs/netgis/MapOpenLayers.js | 68 +++++++++++++++---- templates/map/client/libs/netgis/Toolbar.js | 49 ++++++++----- templates/map/client/libs/netgis/Util.js | 1 + 3 files changed, 86 insertions(+), 32 deletions(-) diff --git a/templates/map/client/libs/netgis/MapOpenLayers.js b/templates/map/client/libs/netgis/MapOpenLayers.js index 4731f1a..4e20fea 100644 --- a/templates/map/client/libs/netgis/MapOpenLayers.js +++ b/templates/map/client/libs/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 ? - //this.editLayer.getSource().removeFeature( e.feature ); - - /*window.setTimeout( function() { - var features = src.getFeatures(); - src.removeFeature( features[ features.length - 1 ] ); + // Add Buffer Feature src.addFeature( preview.clone() ); - }, 10 );*/ - /*e.preventDefault(); - e.stopPropagation(); - return false;*/ + // Remove Sketch Feature + window.setTimeout + ( + 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(); - src.addFeature( preview.clone() ); + if ( preview ) + { + 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 ) diff --git a/templates/map/client/libs/netgis/Toolbar.js b/templates/map/client/libs/netgis/Toolbar.js index a582a26..5ab6f44 100644 --- a/templates/map/client/libs/netgis/Toolbar.js +++ b/templates/map/client/libs/netgis/Toolbar.js @@ -31,17 +31,17 @@ netgis.Toolbar.prototype.load = function() this.toolbars[ netgis.Modes.DRAW_POINTS ] = this.createToolbar(); this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarButton( 'Punkte zeichnen:', this.onToolbarClose.bind( this ) ) ); this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarCheckbox( "Einrasten", this.onSnapChange.bind( this ) ) ); - //this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarCheckbox( "Puffern", this.onDrawBufferChange.bind( this ) ) ); - //this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) ); - //this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.bind( this ) ) ); + this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarCheckbox( "Puffern", this.onDrawBufferChange.bind( this ) ) ); + this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) ); + this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.bind( this ) ) ); this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_POINTS ] ); this.toolbars[ netgis.Modes.DRAW_LINES ] = this.createToolbar(); this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarButton( 'Linien zeichnen:', this.onToolbarClose.bind( this ) ) ); this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarCheckbox( "Einrasten", this.onSnapChange.bind( this ) ) ); - //this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarCheckbox( "Puffern", this.onDrawBufferChange.bind( this ) ) ); - //this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) ); - //this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.bind( this ) ) ); + this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarCheckbox( "Puffern", this.onDrawBufferChange.bind( this ) ) ); + this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) ); + this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.bind( this ) ) ); this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_LINES ] ); this.showDrawBufferOptions( false ); @@ -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( 'Features verschieben:', this.onToolbarClose.bind( this ) ) ); + this.append( this.toolbars[ netgis.Modes.MODIFY_FEATURES ], this.createToolbarButton( 'Feature-Eckpunkte verschieben:', 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; @@ -266,12 +267,12 @@ netgis.Toolbar.prototype.onSetMode = function( e ) case netgis.Modes.DRAW_LINES: { var checkbox = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 1 ]; - /* + if ( checkbox.checked ) { this.client.invoke( netgis.Events.DRAW_BUFFER_ON, null ); } - */ + break; } } @@ -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 ) @@ -533,16 +548,16 @@ netgis.Toolbar.prototype.showDrawBufferOptions = function( on ) if ( on ) { - //pointsItems[ 3 ].classList.remove( "netgis-hide" ); - //pointsItems[ 4 ].classList.remove( "netgis-hide" ); - //linesItems[ 3 ].classList.remove( "netgis-hide" ); - //linesItems[ 4 ].classList.remove( "netgis-hide" ); + pointsItems[ 3 ].classList.remove( "netgis-hide" ); + pointsItems[ 4 ].classList.remove( "netgis-hide" ); + linesItems[ 3 ].classList.remove( "netgis-hide" ); + linesItems[ 4 ].classList.remove( "netgis-hide" ); } else { - //pointsItems[ 3 ].classList.add( "netgis-hide" ); - //pointsItems[ 4 ].classList.add( "netgis-hide" ); - //linesItems[ 3 ].classList.add( "netgis-hide" ); - //linesItems[ 4 ].classList.add( "netgis-hide" ); + pointsItems[ 3 ].classList.add( "netgis-hide" ); + pointsItems[ 4 ].classList.add( "netgis-hide" ); + linesItems[ 3 ].classList.add( "netgis-hide" ); + linesItems[ 4 ].classList.add( "netgis-hide" ); } }; \ No newline at end of file diff --git a/templates/map/client/libs/netgis/Util.js b/templates/map/client/libs/netgis/Util.js index e9d548e..72003bc 100644 --- a/templates/map/client/libs/netgis/Util.js +++ b/templates/map/client/libs/netgis/Util.js @@ -190,6 +190,7 @@ netgis.util = output = i + ( large ? " km²" : " m²" ); //NOTE: HTML Superscript / Unicode (² etc.) not supported in OL Labels + return output; }; From c4213997888b637be91fb91e0cc62205d67978b6 Mon Sep 17 00:00:00 2001 From: mpeltriaux Date: Thu, 16 Mar 2023 08:12:51 +0100 Subject: [PATCH 2/2] HOTFIX * fixes bug where float numbers could not be used as input for e.g. buffer radius * supports up to two digits --- templates/map/client/libs/netgis/Toolbar.js | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/map/client/libs/netgis/Toolbar.js b/templates/map/client/libs/netgis/Toolbar.js index 5ab6f44..5cbe8dd 100644 --- a/templates/map/client/libs/netgis/Toolbar.js +++ b/templates/map/client/libs/netgis/Toolbar.js @@ -196,6 +196,7 @@ netgis.Toolbar.prototype.createToolbarInput = function( title, value, callback ) var input = document.createElement( "input" ); input.setAttribute( "type", "number" ); input.setAttribute( "min", 0 ); + input.setAttribute( "step", 0.01 ); input.value = value; input.addEventListener( "change", callback ); input.addEventListener( "keyup", callback );