Fix thumbnail scaling on zoomed browser

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="feature;let feature" class="row m-0">  
-  <div class="col-3 p-1">
+  <div #container class="col-3 p-1">
-      <canvas  #canvas class="thumbnail"height="100" width="100"></canvas>
+      <canvas  #canvas class="thumbnail"></canvas>
   </div>
   <div class="col p-2">
     <h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts

@@ -21,6 +21,7 @@ import * as style from 'ol/style';
 export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFeatureComponent implements AfterViewInit {
 
   @ViewChild('canvas', { static: false }) canvas;
+  @ViewChild('container', { static: false }) container;
 
   constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService,config:AppConfig) {
     super(store, itemTypeService,config);
@@ -34,13 +35,50 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
   }
 
-  render(canvas, feature:Feature) {
+  scaleCanvas(canvas, context, width, height) {
-    let vectorContext = render.toContext(canvas.getContext( '2d' ));
+    // assume the device pixel ratio is 1 if the browser doesn't specify it
+    const devicePixelRatio = window.devicePixelRatio || 1;
+  
+    // determine the 'backing store ratio' of the canvas context
+    const backingStoreRatio = (
+      context.webkitBackingStorePixelRatio ||
+      context.mozBackingStorePixelRatio ||
+      context.msBackingStorePixelRatio ||
+      context.oBackingStorePixelRatio ||
+      context.backingStorePixelRatio || 1
+    );
+  
+    // determine the actual ratio we want to draw at
+    const ratio = devicePixelRatio / backingStoreRatio;
+  
+    if (devicePixelRatio !== backingStoreRatio) {
+      // set the 'real' canvas size to the higher width/height
+      canvas.width = width * ratio;
+      canvas.height = height * ratio;
+  
+      // ...then scale it back down with CSS
+      canvas.style.width = width + 'px';
+      canvas.style.height = height + 'px';
+    }
+    else {
+      // this is a normal 1:1 device; just scale it simply
+      canvas.width = width;
+      canvas.height = height;
+      canvas.style.width = '';
+      canvas.style.height = '';
+    }
+  
+    // scale the drawing context so everything will work at the higher ratio
+    context.scale(ratio, ratio);
+  }
+
+  render(canvas,width,height,feature:Feature) {  
+    let canvasContext = canvas.getContext( '2d',{width:width,height:height});      
+    this.scaleCanvas(canvas,canvasContext,width,height);
+    let renderContext = render.toContext(canvasContext);  
    
-    let width=canvas.width;
-    let height = canvas.height;
     let strokeStyle  = new style.Style({
-      stroke: new style.Stroke({ color: 'black',width:2 })
+      stroke: new style.Stroke({ color: 'black',width:1.5 })
     });
 
     let geom   = feature.getGeometry().clone(),
@@ -49,8 +87,8 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
 
     let dxy = extent.getCenter(e),
         sxy = [ 
-            width / extent.getWidth(e),
+            (width - 2 ) / extent.getWidth(e),
-            height / extent.getHeight(e)
+            (height -2 ) / extent.getHeight(e)
         ];
 
     let dx = dxy[0], 
@@ -59,14 +97,17 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
         sy = sxy[1];
 
     geom.translate( -dx, -dy );
-    geom.scale( Math.min(sx, sy), -Math.min(sx, sy) );
+    geom.scale( Math.min(sx, sy), -Math.min(sx, sy));
     geom.translate( width / 2, height / 2 );
 
-    vectorContext.setStyle( strokeStyle );
+    renderContext.setStyle( strokeStyle );  
-    vectorContext.drawGeometry( geom );
+    renderContext.drawGeometry( geom );
   }
 
   ngAfterViewInit() {
-    this.render(this.canvas.nativeElement,this.feature);
+    this.render(this.canvas.nativeElement,
+                this.container.nativeElement.offsetWidth, 
+                this.container.nativeElement.offsetHeight,
+                this.feature);
   }  
 }