Merge pull request #354 from geoblocks/drawing_mask

vladyslav-tk · web-flow · commit 228193675377 · 2024-12-12T17:34:54.000+02:00
Added drawing extent mask
diff --git a/demos/schm/demo.js b/demos/schm/demo.js
@@ -55,6 +55,10 @@ const densifier = new UnsnappedDensifier({ });
     return doubleClick(mapBrowserEvent) && pointType !== 'POI';
   };
 
+  const search = new URLSearchParams(document.location.search);
+
+  const showMask = search.get('drawMask') === 'true';
+
   const trackManager = new TrackManager({
     map: map,
     router: router,
@@ -68,9 +72,10 @@ const densifier = new UnsnappedDensifier({ });
     addLastPointCondition: singleClick,  // we have to use single click otherwise the double click is not fired
     addControlPointCondition: doubleClick,
     hitTolerance: 15,
+    drawExtent: showMask ? [2443048, 1030343, 2894802, 1339995] : undefined,
+    drawMaskColor: showMask ? 'rgba(255, 0, 0, 0.3)' : undefined,
   });
 
-  const search = new URLSearchParams(document.location.search);
   const trackId = search.get('trackId');
   if (trackId) {
     trackManager.restoreFeatures([
@@ -83,6 +88,9 @@ const densifier = new UnsnappedDensifier({ });
   }
 
   trackManager.mode = 'edit';
+  document.getElementById('edit-mode-switch').addEventListener('click', () => {
+    trackManager.mode = trackManager.mode === 'edit' ? '' : 'edit';
+  })
 }
 
 main();
diff --git a/demos/schm/schm.html b/demos/schm/schm.html
@@ -30,10 +30,16 @@
         -webkit-user-select: none;
         -moz-user-select: none;
       }
+      #edit-mode-switch {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
     </style>
   </head>
 
   <body>
     <div id="map"></div>
+    <button id="edit-mode-switch">Switch edit mode</button>
   </body>
 </html>
diff --git a/demos/schm/swisstopo.js b/demos/schm/swisstopo.js
@@ -37,6 +37,7 @@ export function createMap(target) {
     extent: extent,
     center: [2532661.0, 1151654.0],
     zoom: 10,
+    constrainOnlyCenter: true,
   });
 
   const bgLayer = createSwisstopoLayer('ch.swisstopo.pixelkarte-farbe');
diff --git a/src/interaction/TrackInteraction.ts b/src/interaction/TrackInteraction.ts
@@ -14,6 +14,9 @@ import type {FlatStyleLike} from 'ol/style/flat';
 import type {Pixel} from 'ol/pixel';
 import type {FeatureType} from './TrackData';
 import {Point} from 'ol/geom';
+import {containsCoordinate} from 'ol/extent.js';
+import {Extent} from "ol/extent";
+import {Coordinate} from "ol/coordinate.js";
 
 export interface Options {
   map: Map;
@@ -38,12 +41,18 @@ export interface Options {
    * Pixel tolerance for considering the pointer close enough to a segment for snapping.
    */
   hitTolerance: number;
+
+  /**
+   * Drawing outside extent will not be possible
+   */
+  drawExtent?: Extent;
 }
 
 
 export default class TrackInteraction extends Interaction {
 
   private trackLayer_: VectorLayer<VectorSource>;
+  private drawExtent_?: Extent;
   pointerOutListener?: () => void;
   pointerOverListener?: () => void;
 
@@ -78,10 +87,15 @@ export default class TrackInteraction extends Interaction {
     });
   }
 
+  pixelAtDrawingExtent(coordinate: Coordinate): boolean {
+    if (!this.drawExtent_?.length) return true;
+    return containsCoordinate(this.drawExtent_, coordinate);
+  }
+
   createDrawInteraction(source: VectorSource): DrawPoint {
     const draw = new DrawPoint({
       source: source,
-      condition: (event) => this.userAddLastPointCondition_(event) && !this.controlPointOrPOIAtPixel(event.pixel)
+      condition: (event) => this.pixelAtDrawingExtent(event.coordinate) && this.userAddLastPointCondition_(event) && !this.controlPointOrPOIAtPixel(event.pixel)
     });
     // @ts-ignore too complicate to declare proper events
     draw.on('drawend', (evt) => this.dispatchEvent(evt));
@@ -93,8 +107,9 @@ export default class TrackInteraction extends Interaction {
       trackData: trackData,
       source: source,
       style: style,
-      condition: (event) => !this.deleteCondition_(event),
-      addControlPointCondition: (event) => this.userAddControlPointCondition_(event),
+      condition: (event) => this.pixelAtDrawingExtent(event.coordinate) && !this.deleteCondition_(event),
+      addControlPointCondition: (event) => this.pixelAtDrawingExtent(event.coordinate) && this.userAddControlPointCondition_(event),
+      sketchPointCondition: (event) => this.pixelAtDrawingExtent(event.coordinate),
       hitTolerance: hitTolerance,
     });
     // @ts-ignore too complicate to declare proper events
@@ -137,6 +152,7 @@ export default class TrackInteraction extends Interaction {
     super();
 
     this.trackLayer_ = options.trackLayer;
+    this.drawExtent_ = options.drawExtent;
 
     this.pointerOutListener = () => {
       this.modifyTrack_.pointAtCursorFeature.set("type", undefined);
diff --git a/src/interaction/TrackInteractionModify.ts b/src/interaction/TrackInteractionModify.ts
@@ -36,6 +36,7 @@ export interface Options {
   style: StyleLike | FlatStyleLike;
   condition: (mbe: MapBrowserEvent<UIEvent>) => boolean;
   addControlPointCondition: (mbe: MapBrowserEvent<UIEvent>) => boolean;
+  sketchPointCondition?: (mbe: MapBrowserEvent<UIEvent>) => boolean;
   /**
    * Pixel tolerance for considering the pointer close enough to a segment for snapping.
    */
@@ -54,6 +55,7 @@ export default class Modify extends PointerInteraction {
   private dragStarted = false;
   private condition_: Options['condition'];
   private addControlPointCondition_: Options['addControlPointCondition'];
+  private sketchPointCondition: Options['sketchPointCondition'];
   private source_: Options['source'];
   private hitTolerance_: Options['hitTolerance'];
   private feature_: Feature<Point|LineString> = null;
@@ -83,7 +85,9 @@ export default class Modify extends PointerInteraction {
 
     this.condition_ = options.condition;
 
-    this.addControlPointCondition_ = options.addControlPointCondition;
+    this.addControlPointCondition_ = options.addControlPointCondition ? options.addControlPointCondition : () => true;
+
+    this.sketchPointCondition = options.sketchPointCondition;
 
     this.source_ = options.source;
 
@@ -171,9 +175,17 @@ export default class Modify extends PointerInteraction {
 
 
   handleMoveEvent(event: MapBrowserEvent<UIEvent>) {
-    if (event.dragging) {
+    const pointCondition = this.sketchPointCondition(event);
+    if (event.dragging || !pointCondition) {
+      if (!pointCondition && this.pointAtCursorFeature.get('type') === 'sketch') {
+        this.pointAtCursorFeature.set("type", undefined);
+      }
       return;
     }
+
+    if (pointCondition && this.pointAtCursorFeature.get('type') !== 'sketch') {
+      this.pointAtCursorFeature.set("type", 'sketch');
+    }
     this.pointAtCursorFeature_.getGeometry().setCoordinates(event.coordinate);
     this.lastPixel_ = event.pixel;
     this.updateSketchFeature();
@@ -206,6 +218,9 @@ export default class Modify extends PointerInteraction {
   }
 
   handleDragEvent(event: MapBrowserEvent<UIEvent>) {
+    if (!this.sketchPointCondition(event)) {
+      return;
+    }
     this.pointAtCursorFeature_.getGeometry().setCoordinates(event.coordinate);
 
     const type = this.feature_.get('type') as FeatureType;
@@ -288,7 +303,11 @@ export default class Modify extends PointerInteraction {
       this.feature_ = null;
       return false;
     }
-    this.dispatchEvent(new ModifyEvent('modifyend', this.feature_, event.coordinate));
+    let coordinate = event.coordinate;
+    if (!this.sketchPointCondition(event) && this.pointAtCursorFeature_) {
+      coordinate = this.pointAtCursorFeature_.getGeometry().getCoordinates();
+    }
+    this.dispatchEvent(new ModifyEvent('modifyend', this.feature_, coordinate));
     this.dragStarted = false;
 
     this.overlayFeature.setGeometry(null);
diff --git a/src/interaction/TrackManager.ts b/src/interaction/TrackManager.ts
@@ -24,6 +24,10 @@ import type {Coordinate} from 'ol/coordinate';
 import type {FeatureType} from './TrackData';
 import type {Snapper} from 'src/snapper';
 import { Densifier } from 'src/densifier';
+import {Extent} from "ol/extent";
+import {EventsKey} from 'ol/events';
+import RenderEvent from "ol/render/Event";
+import {unByKey} from "ol/Observable";
 
 export type TrackMode = 'edit' | '';
 export type TrackSubMode = 'addpoi' | 'editpoi' | '';
@@ -74,6 +78,16 @@ export interface Options {
    * Pixel tolerance for considering the pointer close enough to a segment for snapping.
    */
   hitTolerance: number;
+
+  /**
+   * Drawing area extent.
+   */
+  drawExtent?: Extent;
+
+  /**
+   * Drawing mask color. CSS string
+   */
+  drawMaskColor?: string;
 }
 
 
@@ -115,6 +129,10 @@ export default class TrackManager<POIMeta> {
   private interaction_: TrackInteraction;
   private historyManager_ = new HistoryManager<Feature<Point|LineString>[]>();
 
+  private drawExtent_: Extent | undefined;
+  private drawMaskColor_: string = 'rgba(241, 245, 249, 1)';
+  private addDrawingMaskKey_: EventsKey | undefined;
+
   constructor(options: Options) {
     this.map_ = options.map;
     this.source_ = options.trackLayer.getSource();
@@ -134,6 +152,11 @@ export default class TrackManager<POIMeta> {
       trackData: this.trackData_
     });
 
+    this.drawExtent_ = options.drawExtent;
+    if (options.drawMaskColor) {
+      this.drawMaskColor_ = options.drawMaskColor;
+    }
+
     this.interaction_ = new TrackInteraction({
       style: options.style,
       trackData: this.trackData_,
@@ -143,6 +166,7 @@ export default class TrackManager<POIMeta> {
       addLastPointCondition: options.addLastPointCondition,
       addControlPointCondition: options.addControlPointCondition,
       hitTolerance: this.hitTolerance_,
+      drawExtent: options.drawExtent,
     });
 
     // Hack to test profile synchro
@@ -331,6 +355,10 @@ export default class TrackManager<POIMeta> {
       this.map_.once("postrender", () => {
         this.interaction_.addMapInOutEventListeners(this.map_.getViewport());
       });
+
+      if (this.drawExtent_) {
+        this.addDrawingMaskKey_ = this.map_.on('postcompose', (evt) => this.addDrawingMask(evt, this.drawExtent_));
+      }
     } else {
       this.historyManager_.clear();
       if (this.shadowTrackLayer_) {
@@ -339,6 +367,10 @@ export default class TrackManager<POIMeta> {
       if (this.map_?.getViewport()) {
         this.interaction_.removeMapInOutEventListeners(this.map_.getViewport());
       }
+      if (this.addDrawingMaskKey_) {
+        unByKey(this.addDrawingMaskKey_);
+        this.addDrawingMaskKey_ = undefined;
+      }
     }
     this.interaction_.setActive(edit);
     this.mode_ = mode || '';
@@ -614,4 +646,36 @@ export default class TrackManager<POIMeta> {
     this.source_.changed();
     this.shadowTrackLayer_.getSource().changed();
   }
+
+ addDrawingMask(event: RenderEvent, extent: Extent) {
+    if (!extent?.length) return;
+    const viewport = event.target.getViewport();
+    const canvases = viewport.getElementsByTagName('canvas');
+    const canvas = canvases.item(canvases.length - 1);
+    const context = canvas.getContext('2d');
+
+    const coordinates = [
+      [extent[0], extent[1]], // Bottom-left
+      [extent[0], extent[3]], // Top-left
+      [extent[2], extent[3]], // Top-right
+      [extent[2], extent[1]], // Bottom-right
+    ];
+
+    const pixelCoordinates = coordinates.map((coord) => this.map_.getPixelFromCoordinate(coord));
+
+    context.beginPath();
+
+    // outer rectangle
+    context.rect(0, 0, canvas.width, canvas.height);
+
+    const width = pixelCoordinates[3][0] - pixelCoordinates[0][0];
+    const height = pixelCoordinates[1][1] - pixelCoordinates[0][1];
+
+    // inner rectangle
+    context.rect(pixelCoordinates[0][0], pixelCoordinates[0][1], width, height);
+
+    context.closePath();
+    context.fillStyle = this.drawMaskColor_;
+    context.fill('evenodd');
+  }
 }
