Revert "Fix thumbnail scaling on zoomed browser"

This reverts commit 1c70e3495f.

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 #container class="col-3 p-1">
+  <div class="col-3 p-1">
-      <canvas  #canvas class="thumbnail"></canvas>
+      <canvas  #canvas class="thumbnail"height="100" width="100"></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,7 +21,6 @@ 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);
@@ -35,50 +34,13 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
   }
 
-  scaleCanvas(canvas, context, width, height) {
+  render(canvas, feature:Feature) {
-    // assume the device pixel ratio is 1 if the browser doesn't specify it
+    let vectorContext = render.toContext(canvas.getContext( '2d' ));
-    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:1.5 })
+      stroke: new style.Stroke({ color: 'black',width:2 })
     });
 
     let geom   = feature.getGeometry().clone(),
@@ -87,8 +49,8 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
 
     let dxy = extent.getCenter(e),
         sxy = [ 
-            (width - 2 ) / extent.getWidth(e),
+            width / extent.getWidth(e),
-            (height -2 ) / extent.getHeight(e)
+            height / extent.getHeight(e)
         ];
 
     let dx = dxy[0], 
@@ -100,14 +62,11 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     geom.scale( Math.min(sx, sy), -Math.min(sx, sy) );
     geom.translate( width / 2, height / 2 );
 
-    renderContext.setStyle( strokeStyle );  
+    vectorContext.setStyle( strokeStyle );
-    renderContext.drawGeometry( geom );
+    vectorContext.drawGeometry( geom );
   }
 
   ngAfterViewInit() {
-    this.render(this.canvas.nativeElement,
+    this.render(this.canvas.nativeElement,this.feature);
-                this.container.nativeElement.offsetWidth, 
-                this.container.nativeElement.offsetHeight,
-                this.feature);
   }  
 }