merge setPosition and focusOn into setViewport

front/src/Api/Events/CameraFocusOnEvent.ts

@@ -1,15 +0,0 @@
-import * as tg from "generic-type-guard";
-
-export const isCameraFocusOnEvent = new tg.IsInterface()
-    .withProperties({
-        x: tg.isNumber,
-        y: tg.isNumber,
-        width: tg.isNumber,
-        height: tg.isNumber,
-        smooth: tg.isBoolean,
-    })
-    .get();
-/**
- * A message sent from the iFrame to the game to set the camera focus on certain place.
- */
-export type CameraFocusOnEvent = tg.GuardedType<typeof isCameraFocusOnEvent>;

front/src/Api/Events/CameraSetViewportEvent.ts

@@ -1,15 +1,16 @@
 import * as tg from "generic-type-guard";
 
-export const isCameraSetPositionEvent = new tg.IsInterface()
+export const isCameraSetViewportEvent = new tg.IsInterface()
     .withProperties({
         x: tg.isNumber,
         y: tg.isNumber,
         width: tg.isNumber,
         height: tg.isNumber,
+        lock: tg.isBoolean,
         smooth: tg.isBoolean,
     })
     .get();
 /**
  * A message sent from the iFrame to the game to change the camera position.
  */
-export type CameraSetPositionEvent = tg.GuardedType<typeof isCameraSetPositionEvent>;
+export type CameraSetViewportEvent = tg.GuardedType<typeof isCameraSetViewportEvent>;

front/src/Api/Events/IframeEvent.ts

@@ -31,8 +31,7 @@ import type { ChangeLayerEvent } from "./ChangeLayerEvent";
 import { isPlayerPosition } from "./PlayerPosition";
 import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
 import type { ChangeZoneEvent } from "./ChangeZoneEvent";
-import type { CameraSetPositionEvent } from "./CameraSetPositionEvent";
+import type { CameraSetViewportEvent } from "./CameraSetViewportEvent";
-import type { CameraFocusOnEvent } from "./CameraFocusOnEvent";
 import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent";
 import { isColorEvent } from "./ColorEvent";
 
@@ -46,9 +45,8 @@ export interface TypedMessageEvent<T> extends MessageEvent {
 export type IframeEventMap = {
     loadPage: LoadPageEvent;
     chat: ChatEvent;
-    cameraFocusOn: CameraFocusOnEvent;
     cameraFollowPlayer: CameraFollowPlayerEvent;
-    cameraSetPosition: CameraSetPositionEvent;
+    cameraSetViewport: CameraSetViewportEvent;
     openPopup: OpenPopupEvent;
     closePopup: ClosePopupEvent;
     openTab: OpenTabEvent;

front/src/Api/IframeListener.ts

@@ -33,8 +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 { CameraSetPositionEvent, isCameraSetPositionEvent } from "./Events/CameraSetPositionEvent";
+import { CameraSetViewportEvent, isCameraSetViewportEvent } from "./Events/CameraSetViewportEvent";
-import { CameraFocusOnEvent, isCameraFocusOnEvent } from "./Events/CameraFocusOnEvent";
 import { CameraFollowPlayerEvent, isCameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent";
 
 type AnswererCallback<T extends keyof IframeQueryMap> = (
@@ -59,11 +58,8 @@ class IframeListener {
     private readonly _disablePlayerControlStream: Subject<void> = new Subject();
     public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();
 
-    private readonly _cameraSetPositionStream: Subject<CameraSetPositionEvent> = new Subject();
+    private readonly _cameraSetViewportStream: Subject<CameraSetViewportEvent> = new Subject();
-    public readonly cameraSetPositionStream = this._cameraSetPositionStream.asObservable();
+    public readonly cameraSetViewportStream = this._cameraSetViewportStream.asObservable();
-
-    private readonly _cameraFocusOnStream: Subject<CameraFocusOnEvent> = new Subject();
-    public readonly cameraFocusOnStream = this._cameraFocusOnStream.asObservable();
 
     private readonly _cameraFollowPlayerStream: Subject<CameraFollowPlayerEvent> = new Subject();
     public readonly cameraFollowPlayerStream = this._cameraFollowPlayerStream.asObservable();
@@ -214,10 +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 === "cameraSetPosition" && isCameraSetPositionEvent(payload.data)) {
+                    } else if (payload.type === "cameraSetViewport" && isCameraSetViewportEvent(payload.data)) {
-                        this._cameraSetPositionStream.next(payload.data);
+                        this._cameraSetViewportStream.next(payload.data);
-                    } else if (payload.type === "cameraFocusOn" && isCameraFocusOnEvent(payload.data)) {
-                        this._cameraFocusOnStream.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,17 +17,17 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
         }),
     ];
 
-    public setPosition(x: number, y: number, width: number, height: number, smooth: boolean = false): void {
+    public setViewport(
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+        lock: boolean = false,
+        smooth: boolean = false
+    ): void {
         sendToWorkadventure({
-            type: "cameraSetPosition",
+            type: "cameraSetViewport",
-            data: { x, y, width, height, smooth },
+            data: { x, y, width, height, lock, smooth },
-        });
-    }
-
-    public focusOn(x: number, y: number, width: number, height: number, smooth: boolean = false): void {
-        sendToWorkadventure({
-            type: "cameraFocusOn",
-            data: { x, y, width, height, smooth },
         });
     }
 

front/src/Phaser/Game/CameraManager.ts

@@ -254,14 +254,10 @@ export class CameraManager extends Phaser.Events.EventEmitter {
         );
 
         this.camera.on("followupdate", () => {
-            this.sendCameraUpdateEvent();
+            this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
         });
     }
 
-    private sendCameraUpdateEvent(): void {
-        this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
-    }
-
     private getCameraUpdateEventData(): CameraManagerEventCameraUpdateData {
         return {
             x: this.camera.worldView.x,

front/src/Phaser/Game/GameScene.ts

@@ -1120,20 +1120,23 @@ ${escapedMessage}
         );
 
         this.iframeSubscriptionList.push(
-            iframeListener.cameraSetPositionStream.subscribe((cameraSetPositionEvent) => {
+            iframeListener.cameraSetViewportStream.subscribe((cameraSetViewportEvent) => {
-                this.cameraManager.setPosition({ ...cameraSetPositionEvent }, cameraSetPositionEvent.smooth ? 1000 : 0);
+                const duration = cameraSetViewportEvent.smooth ? 1000 : 0;
+                cameraSetViewportEvent.lock
+                    ? this.cameraManager.enterFocusMode({ ...cameraSetViewportEvent }, undefined, duration)
+                    : this.cameraManager.setPosition({ ...cameraSetViewportEvent }, duration);
             })
         );
 
-        this.iframeSubscriptionList.push(
+        // this.iframeSubscriptionList.push(
-            iframeListener.cameraFocusOnStream.subscribe((cameraFocusOnEvent) => {
+        //     iframeListener.cameraFocusOnStream.subscribe((cameraFocusOnEvent) => {
-                this.cameraManager.enterFocusMode(
+        //         this.cameraManager.enterFocusMode(
-                    { ...cameraFocusOnEvent },
+        //             { ...cameraFocusOnEvent },
-                    undefined,
+        //             undefined,
-                    cameraFocusOnEvent.smooth ? 1000 : 0
+        //             cameraFocusOnEvent.smooth ? 1000 : 0
-                );
+        //         );
-            })
+        //     })
-        );
+        // );
 
         this.iframeSubscriptionList.push(
             iframeListener.cameraFollowPlayerStream.subscribe((cameraFollowPlayerEvent) => {
@@ -1178,8 +1181,6 @@ ${escapedMessage}
                             this.firstCameraUpdateSent = true;
                         }
                     );
-
-                    iframeListener.sendCameraUpdated(this.cameras.main);
                 }
             })
         );

maps/tests/CameraApi/camera_api_test.json

@@ -51,32 +51,14 @@
                     {
                      "fontfamily":"MS Shell Dlg 2",
                      "pixelsize":21,
-                     "text":"Set Position - Move the camera to the given point but do not lock it. If the player moves, camera will back to following him",
+                     "text":"Set Viewport - Move the camera to the given point. It will be locked if Lock checkbox is checked",
                      "wrap":true
                     },
                  "type":"",
                  "visible":true,
                  "width":315.4375,
                  "x":68.4021076998051,
-                 "y":8.73391812865529
+                 "y":160.73391812865529
-                }, 
-                {
-                 "height":115.776,
-                 "id":3,
-                 "name":"",
-                 "rotation":0,
-                 "text":
-                    {
-                     "fontfamily":"MS Shell Dlg 2",
-                     "pixelsize":21,
-                     "text":"Focus On - Works like for Focusable Zones. Camera will be locked and won't move unless we explicitly change the mode",
-                     "wrap":true
-                    },
-                 "type":"",
-                 "visible":true,
-                 "width":315.438,
-                 "x":64.7309301350722,
-                 "y":126.555409408477
                 }, 
                 {
                  "height":115.776,
@@ -95,24 +77,6 @@
                  "width":315.438,
                  "x":64.7309301350722,
                  "y":256.224715416861
-                }, 
-                {
-                 "height":115.776,
-                 "id":5,
-                 "name":"",
-                 "rotation":0,
-                 "text":
-                    {
-                     "fontfamily":"MS Shell Dlg 2",
-                     "pixelsize":21,
-                     "text":"Both Set Position and Focus On will lock the ability of changing the game zoom",
-                     "wrap":true
-                    },
-                 "type":"",
-                 "visible":true,
-                 "width":315.438,
-                 "x":65.848768979972,
-                 "y":351.241017233349
                 }],
          "opacity":1,
          "type":"objectgroup",

maps/tests/CameraApi/script.php

@@ -8,33 +8,22 @@
             WA.camera.onCameraUpdate((worldView) => console.log(worldView));
             WA.onInit().then(() => {
                 console.log('After WA init');
-                const setPositionButton = document.getElementById('setPositionButton');
+                const setViewportButton = document.getElementById('setViewportButton');
-                const focusOnButton = document.getElementById('focusOnButton');
                 const followPlayerButton = document.getElementById('followPlayerButton');
                 const xField = document.getElementById('x');
                 const yField = document.getElementById('y');
                 const widthField = document.getElementById('width');
                 const heightField = document.getElementById('height');
                 const smoothField = document.getElementById('smooth');
+                const lockField = document.getElementById('lock');
 
-                setPositionButton.addEventListener('click', () => {
+                setViewportButton.addEventListener('click', () => {
-                    console.log('SET POSITION BUTTON PRESSED');
+                    WA.camera.setViewport(
-                    console.log(smoothField.checked);
-                    WA.camera.setPosition(
-                        parseInt(xField.value),
-                        parseInt(yField.value),
-                        parseInt(widthField.value),
-                        parseInt(heightField.value),
-                        smoothField.checked,
-                    );
-                });
-
-                focusOnButton.addEventListener('click', () => {
-                    WA.camera.focusOn(
                         parseInt(xField.value),
                         parseInt(yField.value),
                         parseInt(widthField.value),
                         parseInt(heightField.value),
+                        lockField.checked,
                         smoothField.checked,
                     );
                 });
@@ -52,9 +41,9 @@ Y: <input type="text" id="y" value="64" /><br/>
 width: <input type="text" id="width" value="600" /><br/>
 height: <input type="text" id="height" value="400" /><br/>
 Smooth: <input type="checkbox" id="smooth" value=1 /><br/>
+Lock: <input type="checkbox" id="lock" value=1 /><br/>
 
-<button id="setPositionButton">Set Position</button>
+<button id="setViewportButton">Set Viewport</button>
-<button id="focusOnButton">Focus On</button>
 <button id="followPlayerButton">Follow Player</button>
 
 </body>