From 3cd50d9bd3657bebf4c2bc70074833f7c1bfaf02 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Tue, 24 Jan 2023 11:03:01 +0100 Subject: [PATCH] fix(ui): fix clickmap style issues --- .../Player/ClickMapRenderer/Renderer.tsx | 12 +++++++----- .../Player/ClickMapRenderer/styles.module.css | 2 +- frontend/app/player/web/Screen/Screen.ts | 14 ++++++-------- frontend/app/player/web/WebPlayer.ts | 18 ++++-------------- .../app/player/web/addons/clickmapStyles.ts | 4 ++-- 5 files changed, 20 insertions(+), 30 deletions(-) diff --git a/frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx b/frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx index 869fe6cda..8ec99101b 100644 --- a/frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx +++ b/frontend/app/components/Session/Player/ClickMapRenderer/Renderer.tsx @@ -4,11 +4,13 @@ import cn from 'classnames'; import Overlay from 'Components/Session_/Player/Overlay'; import stl from 'Components/Session_/Player/player.module.css'; import { PlayerContext } from 'App/components/Session/playerContext'; +import { observer } from 'mobx-react-lite' function Player() { + const [wrapperHeight, setWrapperHeight] = React.useState(0); const playerContext = React.useContext(PlayerContext); const screenWrapper = React.useRef(null); - + const portHeight = playerContext.store.get().portHeight React.useEffect(() => { const parentElement = findDOMNode(screenWrapper.current) as HTMLDivElement | null; //TODO: good architecture if (parentElement) { @@ -18,8 +20,8 @@ function Player() { }, []); React.useEffect(() => { - playerContext.player.scale(); - }, [playerContext.player]); + setWrapperHeight(portHeight) + }, [portHeight]); if (!playerContext.player) return null; @@ -29,10 +31,10 @@ function Player() { >
-
+
); } -export default Player; +export default observer(Player); diff --git a/frontend/app/components/Session/Player/ClickMapRenderer/styles.module.css b/frontend/app/components/Session/Player/ClickMapRenderer/styles.module.css index 160455f5f..ed724966f 100644 --- a/frontend/app/components/Session/Player/ClickMapRenderer/styles.module.css +++ b/frontend/app/components/Session/Player/ClickMapRenderer/styles.module.css @@ -1,4 +1,4 @@ .session { display: flex; - height: 800px; + max-height: 800px; } \ No newline at end of file diff --git a/frontend/app/player/web/Screen/Screen.ts b/frontend/app/player/web/Screen/Screen.ts index 0eb1d7245..b964d347a 100644 --- a/frontend/app/player/web/Screen/Screen.ts +++ b/frontend/app/player/web/Screen/Screen.ts @@ -78,7 +78,7 @@ export default class Screen { attach(parentElement: HTMLElement) { if (this.parentElement) { - this.parentElement = undefined + this.parentElement = null console.error("BaseScreen: Trying to attach an attached screen."); } @@ -172,10 +172,6 @@ export default class Screen { return this.getElementFromInternalPoint(this.getInternalViewportCoordinates(point)); } - getElementsFromPoint(point: Point): Element[] { - return this.getElementsFromInternalPoint(this.getInternalViewportCoordinates(point)); - } - getElementBySelector(selector: string) { if (!selector) return null; try { @@ -220,7 +216,7 @@ export default class Screen { } scaleFullPage() { - if (!this.parentElement) return; + if (!this.parentElement || !this.document) return; const { width: boxWidth } = this.parentElement.getBoundingClientRect(); const { height, width } = this.document.body.getBoundingClientRect(); this.overlay.remove() @@ -234,15 +230,17 @@ export default class Screen { Object.assign(this.screen.style, { top: '0', - left: '0', + left: '50%', height: height + 'px', width: width + 'px', - transform: `scale(${this.scaleRatio})`, + transform: `scale(${this.scaleRatio}) translate(-50%, 0)`, }) Object.assign(this.iframe.style, { width: width + 'px', height: height + 'px', }) + + return height } } diff --git a/frontend/app/player/web/WebPlayer.ts b/frontend/app/player/web/WebPlayer.ts index 7ba46cf8b..091717d8d 100644 --- a/frontend/app/player/web/WebPlayer.ts +++ b/frontend/app/player/web/WebPlayer.ts @@ -17,6 +17,7 @@ export default class WebPlayer extends Player { ...MessageManager.INITIAL_STATE, inspectorMode: false, + portHeight: 0, } private readonly inspectorController: InspectorController @@ -77,7 +78,8 @@ export default class WebPlayer extends Player { scaleFullPage = () => { window.removeEventListener('resize', this.scale) window.addEventListener('resize', this.screen.scaleFullPage) - return this.screen.scaleFullPage() + const portHeight = this.screen.scaleFullPage() + return this.wpState.update({ portHeight }) } // Inspector & marker @@ -112,7 +114,7 @@ export default class WebPlayer extends Player { } showClickmap = (...args: Parameters) => { - this.pause() + this.freeze() this.targetMarker.injectTargets(...args) } @@ -120,18 +122,6 @@ export default class WebPlayer extends Player { this.targetMarker.setOnMarkerClick(...args) } - - // TODO separate message receivers - toggleTimetravel = async () => { - if (!this.wpState.get().liveTimeTravel) { - await this.messageManager.reloadWithUnprocessedFile(() => - this.wpState.update({ - liveTimeTravel: true, - }) - ) - } - } - toggleUserName = (name?: string) => { this.screen.cursor.showTag(name) } diff --git a/frontend/app/player/web/addons/clickmapStyles.ts b/frontend/app/player/web/addons/clickmapStyles.ts index f6ed76311..5019b933c 100644 --- a/frontend/app/player/web/addons/clickmapStyles.ts +++ b/frontend/app/player/web/addons/clickmapStyles.ts @@ -1,9 +1,9 @@ export const clickmapStyles = { overlayStyle: ({ height, width, scale }: { height: string, width: string, scale: number }) => ({ - transform: `scale(${scale})`, + transform: `scale(${scale}) translate(-50%, 0)`, position: 'absolute', top: '0px', - left: '0px', + left: '50%', width, height, background: 'rgba(0,0,0, 0.15)',