Fix double scaling issue

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

@@ -1,8 +1,10 @@
-<div *ngIf="feature;let feature" class="row m-0">  
-  <div #container class="col-3 p-1">
-      <canvas  #canvas class="thumbnail"></canvas>
+<div *ngIf="feature;let feature" class="d-flex m-0">  
+  <div class="p-2">
+    <div #container class="thumbnail">
+      <canvas  #canvas ></canvas>
   </div>
-  <div class="col p-2">
+  </div>
+  <div class="flex-grow p-2 overflow-hidden">
     <h1 class="card-title" title="{{feature.get('name')}}">{{feature.get('name')}}</h1>
     <div class="card-text"><span>{{areaInHa(feature)| number:'1.2-2'}} ha</span>&nbsp;<span>{{feature.get('cropTypeName')}}</span> </div>
     <div class="card-text"><span>{{feature.get('datadate')|date}}</span> - <span>{{feature.get('dataenddate')|date}}</span> </div>

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

@@ -9,18 +9,10 @@
   text-overflow: ellipsis;
 }
 
-.thumbnail > img {
-  width: 100%;
-  height: auto;
-}
-
-.thumbnail > div {
-  width: 100%;
-  font-size: 2rem;
-  text-align: center;
-  min-height: 3rem;
-  color: white;
-  padding-top: 0.5rem;
+.card-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .col {
@@ -28,7 +20,7 @@
 }
 
 .thumbnail {
-  width: 100%;
-  height: 100%;
+  width: 4em;
+  height: 4em;
 }
 

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

@@ -35,47 +35,9 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
   }
 
-  scaleCanvas(canvas, context, width, height) {
-    // 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 renderContext = render.toContext(canvas.getContext( '2d'),{ size: [width, height] });  
    
     let strokeStyle  = new style.Style({
       stroke: new style.Stroke({ color: 'black',width:1.5 })
@@ -88,7 +50,7 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     let dxy = extent.getCenter(e),
         sxy = [ 
             (width - 2 ) / extent.getWidth(e),
-            (height -2 ) / extent.getHeight(e)
+            (height - 2 ) / extent.getHeight(e)
         ];
 
     let dx = dxy[0], 
@@ -106,8 +68,8 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
 
   ngAfterViewInit() {
     this.render(this.canvas.nativeElement,
-                this.container.nativeElement.offsetWidth, 
-                this.container.nativeElement.offsetHeight,
-                this.feature);
+      this.container.nativeElement.offsetWidth, 
+      this.container.nativeElement.offsetHeight,
+      this.feature);
   }  
 }