feat(ngx-layout): Allow zoom levels to be passed to the image-marker

Author: IbenTesara

apps/docs/src/app/pages/docs/angular/layout/implementation/components/index.md

@@ -136,6 +136,8 @@ We can switch between edit mode and view mode by using the `canEdit` Input. Simu
 
 The `stateUpdated` Output will emit whenever a change has been made to the annotations during edit mode, whilst `markerClicked` will emit whenever a marker is clicked during view mode.
 
+By providing both the `zoomLevels` and the `currentZoomLevel` we can adjust how much you can zoom in on to the image, and at which zoom level you wish the image to be.
+
 Additionally, we can pass a set of `markerTypes` we want the MarkerJs package to be restricted to. It's important to know that we need to provide markers for both the view and the edit mode, given they both use different packages and interfaces; being `marker-live` and `markerjs2` respectively.
 
 ### Future improvements

apps/layout-test/src/pages/image-marker/image-marker.component.html

@@ -2,6 +2,8 @@
 	image="assets/klimmuur.webp"
 	imageDescription="Floor-plan of a climbing place"
 	[canEdit]="allowEdit"
+	[zoomLevels]="[0.5, 1, 1.5, 2]"
+	[currentZoomLevel]="1.5"
 	[startState]="currentState"
 	(stateUpdated)="updateState($event)"
 	(markerClicked)="markerClicked()"

libs/angular/layout/src/lib/components/image-marker/image-marker.component.ts

@@ -79,6 +79,16 @@ export class NgxImageMarkerComponent implements AfterViewInit, OnChanges, OnDest
 	 */
 	@Input() public canEdit: boolean = true;
 
+	/**
+	 * An optional current zoom level
+	 */
+	@Input() public currentZoomLevel: number;
+
+	/**
+	 * An optional amount of times we can zoom in and out
+	 */
+	@Input() public zoomLevels: number[];
+
 	/**
 	 * An optional record of types of Markerjs markers we wish to render
 	 */
@@ -118,7 +128,9 @@ export class NgxImageMarkerComponent implements AfterViewInit, OnChanges, OnDest
 			this.currentMarker &&
 			(simpleChangeHasChanged(changes.startState) ||
 				simpleChangeHasChanged(changes.canEdit) ||
-				simpleChangeHasChanged(changes.markerTypes));
+				simpleChangeHasChanged(changes.markerTypes) ||
+				simpleChangeHasChanged(changes.currentZoomLevel) ||
+				simpleChangeHasChanged(changes.zoomLevels));
 
 		// Iben: Recreate the marker whenever the configuration is adjusted
 		if (!this.currentMarker || hasChanges) {
@@ -156,6 +168,10 @@ export class NgxImageMarkerComponent implements AfterViewInit, OnChanges, OnDest
 					allowZoom: true,
 					defaultState: this.startState || undefined,
 					markerTypes: this.markerTypes,
+					zoom:
+						this.currentZoomLevel !== undefined && this.zoomLevels
+							? { current: this.currentZoomLevel, levels: this.zoomLevels }
+							: undefined,
 				}
 			);
 

libs/angular/layout/src/lib/services/image-marker/image-marker.service.ts

@@ -144,6 +144,8 @@ export class NgxImageMarkerService implements OnDestroy {
 		// These can later on be extended when needed
 		marker.uiStyleSettings.zoomButtonVisible = configuration.allowZoom;
 		marker.uiStyleSettings.zoomOutButtonVisible = configuration.allowZoom;
+		marker.zoomSteps = configuration.zoom?.levels || [1, 2, 3, 4];
+		marker.zoomLevel = configuration.zoom?.current ?? 1;
 		marker.uiStyleSettings.clearButtonVisible = configuration.allowClear;
 
 		// Iben: Set the available marker types

libs/angular/layout/src/lib/types/image-marker.types.ts

@@ -44,6 +44,14 @@ export interface NgxImageMarkerConfiguration {
 	 * An optional set of allowed marker types, by default all
 	 */
 	markerTypes?: NgxImageMarkerTypes;
+
+	/**
+	 * An optional set of allowed marker types, by default the levels are [1,2,3,4] and the current zoom is 1
+	 */
+	zoom?: {
+		levels: number[];
+		current: number;
+	};
 }
 
 interface NgxImageMarkerBase {