diff --git a/front/src/Api/Events/CameraSetViewportEvent.ts b/front/src/Api/Events/CameraSetEvent.ts similarity index 71% rename from front/src/Api/Events/CameraSetViewportEvent.ts rename to front/src/Api/Events/CameraSetEvent.ts index b1d1df0e..a3da7c62 100644 --- a/front/src/Api/Events/CameraSetViewportEvent.ts +++ b/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; +export type CameraSetEvent = tg.GuardedType; diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index 0df53fbe..93d0735c 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/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; diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index 49d8b37b..0e6cebbe 100644 --- a/front/src/Api/IframeListener.ts +++ b/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 = ( @@ -58,8 +58,8 @@ class IframeListener { private readonly _disablePlayerControlStream: Subject = new Subject(); public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable(); - private readonly _cameraSetViewportStream: Subject = new Subject(); - public readonly cameraSetViewportStream = this._cameraSetViewportStream.asObservable(); + private readonly _cameraSetStream: Subject = new Subject(); + public readonly cameraSetStream = this._cameraSetStream.asObservable(); private readonly _cameraFollowPlayerStream: Subject = 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)) { diff --git a/front/src/Api/iframe/camera.ts b/front/src/Api/iframe/camera.ts index c509d87c..38199e0d 100644 --- a/front/src/Api/iframe/camera.ts +++ b/front/src/Api/iframe/camera.ts @@ -17,7 +17,7 @@ export class WorkAdventureCameraCommands extends IframeApiContribution { 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()); }); } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index f4b07e6d..b031cadd 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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); }) ); diff --git a/maps/tests/CameraApi/script.php b/maps/tests/CameraApi/script.php index 1fa9b5e1..24f7fff4 100644 --- a/maps/tests/CameraApi/script.php +++ b/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:
Smooth:
Lock:
- +