diff --git a/packages/client/src/components/App.tsx b/packages/client/src/components/App.tsx index d0852d09741fe7edbcdbd6cd33c57928c9ce6dba..f4782a88cd0213c369d149c5d21ac141545bf6e1 100644 --- a/packages/client/src/components/App.tsx +++ b/packages/client/src/components/App.tsx @@ -136,7 +136,7 @@ const AppInner = () => { return ( <>
- + {config && } {/* */} diff --git a/packages/client/src/components/CanvasWrapper.tsx b/packages/client/src/components/CanvasWrapper.tsx index 91d64cc67aa6baeb4b64847d079e6473de0f957f..3a0762377f7947a5df87db8afcf4be5893f976ed 100644 --- a/packages/client/src/components/CanvasWrapper.tsx +++ b/packages/client/src/components/CanvasWrapper.tsx @@ -14,14 +14,48 @@ import { BlankOverlay } from "./Overlay/BlankOverlay"; import { HeatmapOverlay } from "./Overlay/HeatmapOverlay"; import { useTemplateContext } from "../contexts/TemplateContext"; import { PixelPulses } from "./Overlay/PixelPulses"; +import { CanvasUtils } from "../lib/canvas.utils"; export const CanvasWrapper = () => { const { config } = useAppContext(); - // to prevent safari from blurring things, use the zoom css property + + const getInitialPosition = useCallback< + (useCssZoom: boolean) => + | { + x: number; + y: number; + zoom?: number; + } + | undefined + >( + (useCssZoom) => { + const router = Router.get().canvas; + + if (!router) return undefined; + if (!config) { + console.warn("getInitialPosition called with no config"); + return undefined; + } + + const { transformX, transformY } = CanvasUtils.canvasToPanZoomTransform( + router.x, + router.y, + config.canvas.size, + useCssZoom + ); + + return { + x: transformX, + y: transformY, + zoom: router.zoom, + }; + }, + [config] + ); return (
- + @@ -194,10 +228,6 @@ const CanvasInner = () => { canvas.current = new Canvas(canvasRef.current!, PanZoom); canvas.current.on("canvasReady", () => { console.log("[CanvasWrapper] received canvasReady"); - - // refresh because canvas might've resized - const initialRouter = Router.get(); - handleNavigate(initialRouter); }); KeybindManager.on("PIXEL_WHOIS", handlePixelWhois); @@ -266,14 +296,6 @@ const CanvasInner = () => { console.log("[CanvasInner] config updated, informing canvas instance"); canvas.current.loadConfig(config); - - // refresh because canvas might've resized - const initialRouter = Router.get(); - console.log( - "[CanvasWrapper] Config updated, triggering navigate", - initialRouter - ); - handleNavigate(initialRouter); }, [config]); const handleNavigate = useCallback( @@ -303,13 +325,7 @@ const CanvasInner = () => { // const canvasInstance = new Canvas(canvas, PanZoom); const initAt = Date.now(); - // initial load - const initialRouter = Router.get(); - console.log( - "[CanvasWrapper] Initial router data, handling navigate", - initialRouter - ); - handleNavigate(initialRouter); + // initial position from Router is setup in const handleViewportMove = (state: ViewportMoveEvent) => { if (Date.now() - initAt < 60 * 1000) { diff --git a/packages/client/src/lib/canvas.ts b/packages/client/src/lib/canvas.ts index d60e96d8c2a96c1ae4b30f91b6e1c6363530bbaa..94df62c3218362a145f381912a814b0507147f27 100644 --- a/packages/client/src/lib/canvas.ts +++ b/packages/client/src/lib/canvas.ts @@ -10,6 +10,7 @@ import { toast } from "react-toastify"; import { KeybindManager } from "./keybinds"; import { getRenderer } from "./utils"; import { CanvasPixel } from "./canvasRenderer"; +import { CanvasUtils } from "./canvas.utils"; interface CanvasEvents { /** @@ -423,19 +424,12 @@ export class Canvas extends EventEmitter { } canvasToPanZoomTransform(x: number, y: number) { - let transformX = 0; - let transformY = 0; - - if (this.PanZoom.flags.useZoom) { - // CSS Zoom does not alter this (obviously) - transformX = this.canvas.width / 2 - x; - transformY = this.canvas.height / 2 - y; - } else { - transformX = this.canvas.width / 2 - x; - transformY = this.canvas.height / 2 - y; - } - - return { transformX, transformY }; + return CanvasUtils.canvasToPanZoomTransform( + x, + y, + [this.canvas.width, this.canvas.height], + this.PanZoom.flags.useZoom + ); } panZoomTransformToCanvas() { diff --git a/packages/client/src/lib/canvas.utils.ts b/packages/client/src/lib/canvas.utils.ts new file mode 100644 index 0000000000000000000000000000000000000000..ab4da7336bb8573c8f07d14ab619d43c5c800b71 --- /dev/null +++ b/packages/client/src/lib/canvas.utils.ts @@ -0,0 +1,22 @@ +export class CanvasUtils { + static canvasToPanZoomTransform( + x: number, + y: number, + canvas: [width: number, height: number], + useZoom: boolean + ) { + let transformX = 0; + let transformY = 0; + + if (useZoom) { + // CSS Zoom does not alter this (obviously) + transformX = canvas[0] / 2 - x; + transformY = canvas[1] / 2 - y; + } else { + transformX = canvas[0] / 2 - x; + transformY = canvas[1] / 2 - y; + } + + return { transformX, transformY }; + } +} diff --git a/packages/lib/src/renderer/PanZoom.ts b/packages/lib/src/renderer/PanZoom.ts index ba86a69acb72abb588087df0d98bc65430d47751..9458300dffa14f0415b3ab1109996223225f8630 100644 --- a/packages/lib/src/renderer/PanZoom.ts +++ b/packages/lib/src/renderer/PanZoom.ts @@ -165,6 +165,8 @@ export class PanZoom extends EventEmitter { this.flags = { useZoom: false, }; + + this.detectFlags(); } initialize( @@ -176,7 +178,6 @@ export class PanZoom extends EventEmitter { this.$zoom = $zoom; this.$move = $move; - this.detectFlags(); this.registerMouseEvents(); this.registerTouchEvents(); diff --git a/packages/lib/src/renderer/PanZoomWrapper.tsx b/packages/lib/src/renderer/PanZoomWrapper.tsx index f3467691092310f6b5d844031a96b9900e4359e6..eb9386d66821f393b9241c3a8d576c50ed898f0b 100644 --- a/packages/lib/src/renderer/PanZoomWrapper.tsx +++ b/packages/lib/src/renderer/PanZoomWrapper.tsx @@ -2,7 +2,19 @@ import React, { useRef, useState, useEffect } from "react"; import { RendererContext } from "./RendererContext"; import { PanZoom } from "./PanZoom"; -export const PanZoomWrapper = ({ children }: { children: React.ReactNode }) => { +export const PanZoomWrapper = ({ + children, + initialPosition, +}: { + children: React.ReactNode; + initialPosition?: (useCssZoom: boolean) => + | { + x: number; + y: number; + zoom?: number; + } + | undefined; +}) => { const wrapper = useRef(null); const zoom = useRef(null); const move = useRef(null); @@ -15,6 +27,22 @@ export const PanZoomWrapper = ({ children }: { children: React.ReactNode }) => { const $move = move.current; if ($wrapper && $zoom && $move) { + if (initialPosition) { + const pos = initialPosition(instance.flags.useZoom); + if (pos) { + instance.setPosition( + { + x: pos.x, + y: pos.y, + zoom: pos.zoom || 0, + }, + { suppressEmit: true } + ); + } else { + console.warn("Failed to set position via initialPosition; no pos"); + } + } + instance.initialize($wrapper, $zoom, $move); } diff --git a/packages/lib/src/renderer/lib/panning.utils.ts b/packages/lib/src/renderer/lib/panning.utils.ts index bc11f4abf7df17f43a3f4651875f68e7083f6a24..4da602ea7c3a6919786b62c936fc672a4d0bc4a5 100644 --- a/packages/lib/src/renderer/lib/panning.utils.ts +++ b/packages/lib/src/renderer/lib/panning.utils.ts @@ -13,6 +13,9 @@ export class Panning { } public setEnabled(enabled: boolean) { + // only trigger changes if an actual change was made + if (enabled === this.enabled) return; + this.enabled = enabled; this.active = false;