Add property scale for image elements

If the property is set, the image will be scaled as far as its
container (static element or grid) allows, otherwise only up to its
maximum native size.

projects/common/ui-elements/image/image-element.ts

@@ -3,6 +3,7 @@ import { initPositionedElement } from '../../util/unit-interface-initializer';
 
 export class ImageElement extends UIElement implements PositionedElement {
   src: string = '';
+  scale: boolean = false;
   magnifier: boolean = false;
   magnifierSize: number = 100;
   magnifierZoom: number = 1.5;

projects/common/ui-elements/image/image.component.ts

@@ -18,7 +18,7 @@ import { ValueChangeElement } from '../../models/uI-element';
         <img #image
              [src]="elementModel.src | safeResourceUrl"
              [alt]="'imageNotFound' | translate"
-             [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'">
+             [class]="elementModel.scale ? 'fit-image' : 'max-size-image'">
         <app-magnifier *ngIf="elementModel.magnifier && ( magnifierVisible || project === 'editor')"
                        [imageId]="elementModel.id"
                        [size]="elementModel.magnifierSize"
@@ -31,8 +31,8 @@ import { ValueChangeElement } from '../../models/uI-element';
   `,
   styles: [
     '.image-container{ position: relative }',
-    '.dynamic-image{ width: 100%; height: fit-content }',
-    '.static-image{ width: 100%; height: 100%; object-fit: contain }'
+    '.max-size-image{ max-width: 100%; max-height: 100% }',
+    '.fit-image{ width: 100%; height: 100%; object-fit: contain}'
   ]
 })
 export class ImageComponent extends ElementComponent {

projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html

@@ -397,6 +397,12 @@
            (input)="updateModel.emit({ property: 'lineColoringColor', value: $any($event.target).value })">
   </mat-form-field>
 
+  <mat-checkbox *ngIf="combinedProperties.scale !== undefined"
+                [checked]="$any(combinedProperties.scale)"
+                (change)="updateModel.emit({ property: 'scale', value: $event.checked })">
+    {{'propertiesPanel.imageScale' | translate }}
+  </mat-checkbox>
+
   <mat-checkbox *ngIf="combinedProperties.magnifier !== undefined"
                 [checked]="$any(combinedProperties.magnifier)"
                 (change)="updateModel.emit({ property: 'magnifier', value: $event.checked })">

projects/editor/src/assets/i18n/de.json

@@ -108,6 +108,7 @@
     "floating": "schwebend",
     "lineColoring": "Zeilenfärbung",
     "lineColoringColor": "Zeilenfarbe",
+    "imageScale": "Bild skalieren",
     "magnifier": "Lupe",
     "magnifierSize": "Größe der Lupe",
     "magnifierZoom": "Vergrößerungsfaktor",