change setViewport action to set for CameraAPI

front/src/Api/Events/CameraSetEvent.ts

@@ -1,6 +1,6 @@
 import * as tg from "generic-type-guard";
 
-export const isCameraSetViewportEvent = new tg.IsInterface()
+export const isCameraSetEvent = new tg.IsInterface()
     .withProperties({
         x: tg.isNumber,
         y: tg.isNumber,
@@ -13,4 +13,4 @@ export const isCameraSetViewportEvent = new tg.IsInterface()
 /**
  * A message sent from the iFrame to the game to change the camera position.
  */
-export type CameraSetViewportEvent = tg.GuardedType<typeof isCameraSetViewportEvent>;
+export type CameraSetEvent = tg.GuardedType<typeof isCameraSetEvent>;

front/src/Api/Events/IframeEvent.ts

@@ -31,7 +31,7 @@ import type { ChangeLayerEvent } from "./ChangeLayerEvent";
 import { isPlayerPosition } from "./PlayerPosition";
 import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
 import type { ChangeZoneEvent } from "./ChangeZoneEvent";
-import type { CameraSetViewportEvent } from "./CameraSetViewportEvent";
+import type { CameraSetEvent } from "./CameraSetEvent";
 import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent";
 import { isColorEvent } from "./ColorEvent";
 
@@ -46,7 +46,7 @@ export type IframeEventMap = {
     loadPage: LoadPageEvent;
     chat: ChatEvent;
     cameraFollowPlayer: CameraFollowPlayerEvent;
-    cameraSetViewport: CameraSetViewportEvent;
+    cameraSet: CameraSetEvent;
     openPopup: OpenPopupEvent;
     closePopup: ClosePopupEvent;
     openTab: OpenTabEvent;

front/src/Api/IframeListener.ts

@@ -33,7 +33,7 @@ import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Store
 import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
 import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
 import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
-import { CameraSetViewportEvent, isCameraSetViewportEvent } from "./Events/CameraSetViewportEvent";
+import { CameraSetEvent, isCameraSetEvent } from "./Events/CameraSetEvent";
 import { CameraFollowPlayerEvent, isCameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent";
 
 type AnswererCallback<T extends keyof IframeQueryMap> = (
@@ -58,8 +58,8 @@ class IframeListener {
     private readonly _disablePlayerControlStream: Subject<void> = new Subject();
     public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();
 
-    private readonly _cameraSetViewportStream: Subject<CameraSetViewportEvent> = new Subject();
-    public readonly cameraSetViewportStream = this._cameraSetViewportStream.asObservable();
+    private readonly _cameraSetStream: Subject<CameraSetEvent> = new Subject();
+    public readonly cameraSetStream = this._cameraSetStream.asObservable();
 
     private readonly _cameraFollowPlayerStream: Subject<CameraFollowPlayerEvent> = new Subject();
     public readonly cameraFollowPlayerStream = this._cameraFollowPlayerStream.asObservable();
@@ -210,8 +210,8 @@ class IframeListener {
                         this._hideLayerStream.next(payload.data);
                     } else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
                         this._setPropertyStream.next(payload.data);
-                    } else if (payload.type === "cameraSetViewport" && isCameraSetViewportEvent(payload.data)) {
-                        this._cameraSetViewportStream.next(payload.data);
+                    } else if (payload.type === "cameraSet" && isCameraSetEvent(payload.data)) {
+                        this._cameraSetStream.next(payload.data);
                     } else if (payload.type === "cameraFollowPlayer" && isCameraFollowPlayerEvent(payload.data)) {
                         this._cameraFollowPlayerStream.next(payload.data);
                     } else if (payload.type === "chat" && isChatEvent(payload.data)) {

front/src/Api/iframe/camera.ts

@@ -17,7 +17,7 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
         }),
     ];
 
-    public setViewport(
+    public set(
         x: number,
         y: number,
         width?: number,
@@ -26,7 +26,7 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
         smooth: boolean = false
     ): void {
         sendToWorkadventure({
-            type: "cameraSetViewport",
+            type: "cameraSet",
             data: { x, y, width, height, lock, smooth },
         });
     }

front/src/Phaser/Game/CameraManager.ts

@@ -140,6 +140,10 @@ export class CameraManager extends Phaser.Events.EventEmitter {
         }
         this.camera.pan(focusOn.x, focusOn.y, duration, Easing.SineEaseOut, true, (camera, progress, x, y) => {
             this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
+            if (progress === 1) {
+                // NOTE: Making sure the last action will be centering after zoom change
+                this.camera.centerOn(focusOn.x, focusOn.y);
+            }
             this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
         });
     }

front/src/Phaser/Game/GameScene.ts

@@ -1125,11 +1125,11 @@ ${escapedMessage}
         );
 
         this.iframeSubscriptionList.push(
-            iframeListener.cameraSetViewportStream.subscribe((cameraSetViewportEvent) => {
-                const duration = cameraSetViewportEvent.smooth ? 1000 : 0;
-                cameraSetViewportEvent.lock
-                    ? this.cameraManager.enterFocusMode({ ...cameraSetViewportEvent }, undefined, duration)
-                    : this.cameraManager.setPosition({ ...cameraSetViewportEvent }, duration);
+            iframeListener.cameraSetStream.subscribe((cameraSetEvent) => {
+                const duration = cameraSetEvent.smooth ? 1000 : 0;
+                cameraSetEvent.lock
+                    ? this.cameraManager.enterFocusMode({ ...cameraSetEvent }, undefined, duration)
+                    : this.cameraManager.setPosition({ ...cameraSetEvent }, duration);
             })
         );
 

maps/tests/CameraApi/script.php

@@ -8,7 +8,7 @@
             WA.camera.onCameraUpdate((worldView) => console.log(worldView));
             WA.onInit().then(() => {
                 console.log('After WA init');
-                const setViewportButton = document.getElementById('setViewportButton');
+                const setCameraButton = document.getElementById('setCameraButton');
                 const followPlayerButton = document.getElementById('followPlayerButton');
                 const xField = document.getElementById('x');
                 const yField = document.getElementById('y');
@@ -17,8 +17,8 @@
                 const smoothField = document.getElementById('smooth');
                 const lockField = document.getElementById('lock');
 
-                setViewportButton.addEventListener('click', () => {
-                    WA.camera.setViewport(
+                setCameraButton.addEventListener('click', () => {
+                    WA.camera.set(
                         parseInt(xField.value),
                         parseInt(yField.value),
                         widthField.value ? parseInt(widthField.value) : undefined,
@@ -43,7 +43,7 @@ height: <input type="text" id="height" value="286" /><br/>
 Smooth: <input type="checkbox" id="smooth" value=1 /><br/>
 Lock: <input type="checkbox" id="lock" value=1 /><br/>
 
-<button id="setViewportButton">Set Viewport</button>
+<button id="setCameraButton">Set Camera</button>
 <button id="followPlayerButton">Follow Player</button>
 
 </body>