update way to apply mask

vladyslav-tk · vladyslav-tk · commit 0538bcb95bc1 · 2024-12-11T15:55:53.000+02:00
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/TrackManager.ts b/src/interaction/TrackManager.ts
@@ -24,10 +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 {fromExtent} from "ol/geom/Polygon";
 import {Extent} from "ol/extent";
-import {EXTENT as epsg3857Extent} from "ol/proj/epsg3857";
-import {EXTENT as epsg4326Extent} from "ol/proj/epsg4326";
+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' | '';
@@ -78,14 +78,16 @@ export interface Options {
    * Pixel tolerance for considering the pointer close enough to a segment for snapping.
    */
   hitTolerance: number;
+
   /**
-   * Optional layer to display a drawing area mask. drawExtent should be specified to use mask.
+   * Drawing area extent.
    */
-  drawMaskLayer?: VectorLayer<VectorSource>;
+  drawExtent?: Extent;
+
   /**
-   * Drawing area extent. drawMaskLayer should be specified.
+   * Drawing mask color. CSS string
    */
-  drawExtent?: Extent;
+  drawMaskColor?: string;
 }
 
 
@@ -127,7 +129,9 @@ export default class TrackManager<POIMeta> {
   private interaction_: TrackInteraction;
   private historyManager_ = new HistoryManager<Feature<Point|LineString>[]>();
 
-  private drawMaskLayer: VectorLayer<VectorSource>;
+  private drawExtent_: Extent | undefined;
+  private drawMaskColor_: string = 'rgba(241, 245, 249, 1)';
+  private addDrawingMaskKey_: EventsKey | undefined;
 
   constructor(options: Options) {
     this.map_ = options.map;
@@ -148,10 +152,9 @@ export default class TrackManager<POIMeta> {
       trackData: this.trackData_
     });
 
-    this.drawMaskLayer = options.drawMaskLayer;
-    if (options.drawExtent && this.drawMaskLayer) {
-      this.drawMaskLayer.getSource().addFeature(this.calculateMaskFeature(options.drawExtent))
-      this.drawMaskLayer.setVisible(false)
+    this.drawExtent_ = options.drawExtent;
+    if (options.drawMaskColor) {
+      this.drawMaskColor_ = options.drawMaskColor;
     }
 
     this.interaction_ = new TrackInteraction({
@@ -352,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_) {
@@ -360,8 +367,11 @@ 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.drawMaskLayer?.setVisible(edit);
     this.interaction_.setActive(edit);
     this.mode_ = mode || '';
     this.render();
@@ -637,18 +647,35 @@ export default class TrackManager<POIMeta> {
     this.shadowTrackLayer_.getSource().changed();
   }
 
-  private calculateMaskFeature(extent: Extent) {
-    const projection = this.map_.getView().getProjection();
-    // for some projections (like EPSG:2056) extent smaller than visible map
-    let wExtent = projection.getExtent();
-    if (projection.getUnits() === 'm') {
-      wExtent = epsg3857Extent;
-    } else if (projection.getUnits() === 'degrees') {
-      wExtent = epsg4326Extent;
-    }
-    const mask = fromExtent(wExtent);
-    const drawingArea = fromExtent(extent);
-    mask.appendLinearRing(drawingArea.getLinearRing(0));
-    return new Feature(mask);
+ 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');
   }
 }
