Camera FocusTarget width and height are now optional

front/src/Api/Events/CameraSetViewportEvent.ts

@@ -4,8 +4,8 @@ export const isCameraSetViewportEvent = new tg.IsInterface()
     .withProperties({
         x: tg.isNumber,
         y: tg.isNumber,
-        width: tg.isNumber,
+        width: tg.isOptional(tg.isNumber),
-        height: tg.isNumber,
+        height: tg.isOptional(tg.isNumber),
         lock: tg.isBoolean,
         smooth: tg.isBoolean,
     })

front/src/Api/IframeListener.ts

@@ -211,6 +211,7 @@ class IframeListener {
                     } else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
                         this._setPropertyStream.next(payload.data);
                     } else if (payload.type === "cameraSetViewport" && isCameraSetViewportEvent(payload.data)) {
+                        console.log(payload.data);
                         this._cameraSetViewportStream.next(payload.data);
                     } else if (payload.type === "cameraFollowPlayer" && isCameraFollowPlayerEvent(payload.data)) {
                         this._cameraFollowPlayerStream.next(payload.data);

front/src/Api/iframe/camera.ts

@@ -20,11 +20,12 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
     public setViewport(
         x: number,
         y: number,
-        width: number,
+        width?: number,
-        height: number,
+        height?: number,
         lock: boolean = false,
         smooth: boolean = false
     ): void {
+        console.log({ x, y, width, height, lock, smooth });
         sendToWorkadventure({
             type: "cameraSetViewport",
             data: { x, y, width, height, lock, smooth },

front/src/Phaser/Game/CameraManager.ts

@@ -2,7 +2,7 @@ import { Easing } from "../../types";
 import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 import type { Box } from "../../WebRtc/LayoutManager";
 import { hasMovedEventName, Player } from "../Player/Player";
-import type { WaScaleManager } from "../Services/WaScaleManager";
+import { WaScaleManager, WaScaleManagerEvent, WaScaleManagerFocusTarget } from "../Services/WaScaleManager";
 import type { GameScene } from "./GameScene";
 
 export enum CameraMode {
@@ -62,7 +62,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
     }
 
     public destroy(): void {
-        this.scene.game.events.off("wa-scale-manager:refresh-focus-on-target");
+        this.scene.game.events.off(WaScaleManagerEvent.RefreshFocusOnTarget);
         super.destroy();
     }
 
@@ -75,18 +75,19 @@ export class CameraManager extends Phaser.Events.EventEmitter {
      * @param setTo Viewport on which the camera should set the position
      * @param duration Time for the transition im MS. If set to 0, transition will occur immediately
      */
-    public setPosition(setTo: { x: number; y: number; width: number; height: number }, duration: number = 1000): void {
+    public setPosition(setTo: WaScaleManagerFocusTarget, duration: number = 1000): void {
         if (this.cameraMode === CameraMode.Focus) {
             return;
         }
         this.setCameraMode(CameraMode.Positioned);
         this.waScaleManager.saveZoom();
         const currentZoomModifier = this.waScaleManager.zoomModifier;
-        const zoomModifierChange = this.getZoomModifierChange(setTo.width, setTo.height);
+        const zoomModifierChange =
+            setTo.width && setTo.height ? this.getZoomModifierChange(setTo.width, setTo.height) : 0;
         this.camera.stopFollow();
         this.camera.pan(
-            setTo.x + setTo.width * 0.5,
+            setTo.x + (setTo.width ?? 0) * 0.5,
-            setTo.y + setTo.height * 0.5,
+            setTo.y + (setTo.height ?? 0) * 0.5,
             duration,
             Easing.SineEaseOut,
             true,
@@ -117,11 +118,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
      * @param setTo Viewport on which the camera should focus on
      * @param duration Time for the transition im MS. If set to 0, transition will occur immediately
      */
-    public enterFocusMode(
+    public enterFocusMode(focusOn: WaScaleManagerFocusTarget, margin: number = 0, duration: number = 1000): void {
-        focusOn: { x: number; y: number; width: number; height: number },
-        margin: number = 0,
-        duration: number = 1000
-    ): void {
         this.setCameraMode(CameraMode.Focus);
         this.waScaleManager.saveZoom();
         this.waScaleManager.setFocusTarget(focusOn);
@@ -132,12 +129,15 @@ export class CameraManager extends Phaser.Events.EventEmitter {
         this.startFollowTween?.stop();
         const marginMult = 1 + margin;
         const currentZoomModifier = this.waScaleManager.zoomModifier;
-        const zoomModifierChange = this.getZoomModifierChange(focusOn.width * marginMult, focusOn.height * marginMult);
+        const zoomModifierChange =
+            focusOn.width && focusOn.height
+                ? this.getZoomModifierChange(focusOn.width * marginMult, focusOn.height * marginMult)
+                : 0;
         this.camera.stopFollow();
         this.playerToFollow = undefined;
         this.camera.pan(
-            focusOn.x + focusOn.width * 0.5 * marginMult,
+            focusOn.x + (focusOn.width ?? 0) * 0.5 * marginMult,
-            focusOn.y + focusOn.height * 0.5 * marginMult,
+            focusOn.y + (focusOn.height ?? 0) * 0.5 * marginMult,
             duration,
             Easing.SineEaseOut,
             true,
@@ -244,7 +244,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
 
     private bindEventHandlers(): void {
         this.scene.game.events.on(
-            "wa-scale-manager:refresh-focus-on-target",
+            WaScaleManagerEvent.RefreshFocusOnTarget,
             (focusOn: { x: number; y: number; width: number; height: number }) => {
                 if (!focusOn) {
                     return;

front/src/Phaser/Services/WaScaleManager.ts

@@ -9,6 +9,8 @@ export enum WaScaleManagerEvent {
     RefreshFocusOnTarget = "wa-scale-manager:refresh-focus-on-target",
 }
 
+export type WaScaleManagerFocusTarget = { x: number; y: number; width?: number; height?: number };
+
 export class WaScaleManager {
     private hdpiManager: HdpiManager;
     private scaleManager!: ScaleManager;
@@ -16,7 +18,7 @@ export class WaScaleManager {
     private actualZoom: number = 1;
     private _saveZoom: number = 1;
 
-    private focusTarget?: { x: number; y: number; width: number; height: number };
+    private focusTarget?: WaScaleManagerFocusTarget;
 
     public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
         this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
@@ -72,11 +74,13 @@ export class WaScaleManager {
         if (!this.focusTarget) {
             return;
         }
-        this.zoomModifier = this.getTargetZoomModifierFor(this.focusTarget.width, this.focusTarget.height);
+        if (this.focusTarget.width && this.focusTarget.height) {
+            this.zoomModifier = this.getTargetZoomModifierFor(this.focusTarget.width, this.focusTarget.height);
+        }
         this.game.events.emit(WaScaleManagerEvent.RefreshFocusOnTarget, this.focusTarget);
     }
 
-    public setFocusTarget(targetDimensions?: { x: number; y: number; width: number; height: number }): void {
+    public setFocusTarget(targetDimensions?: WaScaleManagerFocusTarget): void {
         this.focusTarget = targetDimensions;
     }
 
@@ -109,7 +113,7 @@ export class WaScaleManager {
         }
     }
 
-    public getFocusTarget(): { x: number; y: number; width: number; height: number } | undefined {
+    public getFocusTarget(): WaScaleManagerFocusTarget | undefined {
         return this.focusTarget;
     }
 

maps/tests/CameraApi/script.php

@@ -21,8 +21,8 @@
                     WA.camera.setViewport(
                         parseInt(xField.value),
                         parseInt(yField.value),
-                        parseInt(widthField.value),
+                        widthField.value ? parseInt(widthField.value) : undefined,
-                        parseInt(heightField.value),
+                        heightField.value ? parseInt(heightField.value) : undefined,
                         lockField.checked,
                         smoothField.checked,
                     );