Merge pull request #883 from gisaia/feature/fixDrawStrip

Fix: draw strip
gisaia · Nov 12, 2024 · e709384 · e709384
2 parents bbb0379 + f7de46d
commit e709384
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "@turf/rhumb-bearing": "^6.5.0",
     "@turf/rhumb-destination": "^6.5.0",
     "@turf/transform-rotate": "^6.5.0",
+    "@turf/transform-translate": "^6.5.0",
     "@types/mapbox-gl": "^1.6.3",
     "@types/tinycolor2": "^1.4.0",
     "arlas-d3": "~11.2.6",

diff --git a/projects/arlas-components/package.json b/projects/arlas-components/package.json
@@ -36,6 +36,7 @@
     "@turf/rhumb-bearing": "^6.5.0",
     "@turf/rhumb-destination": "^6.5.0",
     "@turf/transform-rotate": "^6.5.0",
+    "@turf/transform-translate": "^6.5.0",
     "@types/mapbox-gl": "^1.6.3",
     "arlas-d3": "~11.2.6",
     "geojson-polygon-self-intersections": "1.2.1",

diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/modes/strip/strip.mode.ts b/projects/arlas-components/src/lib/components/mapgl/draw/modes/strip/strip.mode.ts
@@ -23,6 +23,7 @@ import rhumbDestination from '@turf/rhumb-destination';
 import rhumbBearing from '@turf/rhumb-bearing';
 import length from '@turf/length';
 import transformRotate from '@turf/transform-rotate';
+import transformTranslate from '@turf/transform-translate';
 
 const stripMode = { ...MapboxDraw.modes.draw_line_string };
 
@@ -158,32 +159,44 @@ stripMode.clickAnywhere = function (state, e) {
     } else {
         state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
     }
-
     return null;
 };
 
 stripMode.onMouseMove = function (state, e) {
-    MapboxDraw.modes.draw_line_string.onMouseMove.call(this, state, e);
-    const geojson = state.line.toGeoJSON();
-    const stripLenght = length(geojson, { units: 'kilometers' });
-    const start = geojson.geometry.coordinates[0];
-    const end = [e.lngLat.lng, e.lngLat.lat];
-    if (stripLenght <= state.maxLength) {
-        const stripFeature = buildStrip(start, end, state.halfSwath);
-        stripFeature.properties.parent = state.line.id;
-        (stripFeature.properties as any).meta = 'strip';
-        state.strip.setCoordinates(stripFeature.geometry.coordinates);
+    if (state.currentVertexPosition === 1) {
+        MapboxDraw.modes.draw_line_string.onMouseMove.call(this, state, e);
+        const geojson = state.line.toGeoJSON();
+        const stripLenght = length(geojson, { units: 'kilometers' });
+        const start = geojson.geometry.coordinates[0];
+        const end = [e.lngLat.lng, e.lngLat.lat];
         const startPoint = point(start);
         const endPoint = point(end);
         const bearing = rhumbBearing(startPoint, endPoint);
-        state.currentMaxBearing = bearing;
-        state.strip.properties['bearingAngle'] = bearingToAzimuth(bearing);
-    } else {
-        const stripFeature = rotateStrip(start, end, state, state.currentMaxBearing);
-        stripFeature.properties.parent = state.line.id;
-        (stripFeature.properties as any).meta = 'strip';
-        state.strip.setCoordinates(stripFeature.geometry.coordinates);
-        state.strip.properties['bearingAngle'] = bearingToAzimuth(state.currentMaxBearing);
+        if (stripLenght > state.maxLength && state.isStripDrew === undefined) {
+            const translateDistance = -(stripLenght - state.maxLength);
+            const translatedPoint = transformTranslate(endPoint, translateDistance, bearing);
+            const stripFeature = buildStrip(start, translatedPoint.geometry.coordinates, state.halfSwath);
+            stripFeature.properties.parent = state.line.id;
+            (stripFeature.properties as any).meta = 'strip';
+            state.strip.setCoordinates(stripFeature.geometry.coordinates);
+            state.currentMaxBearing = bearing;
+            state.isStripDrew = true;
+            state.strip.properties['bearingAngle'] = bearingToAzimuth(bearing);
+        } else if (stripLenght <= state.maxLength || state.isStripDrew === undefined) {
+            const stripFeature = buildStrip(start, end, state.halfSwath);
+            stripFeature.properties.parent = state.line.id;
+            (stripFeature.properties as any).meta = 'strip';
+            state.strip.setCoordinates(stripFeature.geometry.coordinates);
+            state.currentMaxBearing = bearing;
+            state.isStripDrew = true;
+            state.strip.properties['bearingAngle'] = bearingToAzimuth(bearing);
+        } else if (state.isStripDrew && stripLenght > state.maxLength) {
+            const stripFeature = rotateStrip(start, end, state, state.currentMaxBearing);
+            stripFeature.properties.parent = state.line.id;
+            (stripFeature.properties as any).meta = 'strip';
+            state.strip.setCoordinates(stripFeature.geometry.coordinates);
+            state.strip.properties['bearingAngle'] = bearingToAzimuth(state.currentMaxBearing);
+        }
     }
 };
 

diff --git a/src/app/mapgl-demo/mapgl-demo.component.html b/src/app/mapgl-demo/mapgl-demo.component.html
@@ -1,5 +1,5 @@
 <div class="polygon-tools" *ngIf="this.drawEnabled">
-  <button mat-raised-button (click)="switchToDrawMode('draw_strip',{halfSwath:7,maxLenght:100})">STRIP</button>
+  <button mat-raised-button (click)="switchToDrawMode('draw_strip',{halfSwath:7,maxLength:100})">STRIP</button>
 
   <button mat-raised-button (click)="switchToDrawMode('draw_radius_circle',{isFixedRadius:true,initialRadiusInKm:1000})">CIRCLE</button>
   <button mat-raised-button (click)="switchToDrawMode()">DRAW</button>