Commit 5502a66a authored by Grant's avatar Grant
Browse files

Merge branch '60-reliable-url-load' into 'main' 

Load correct canvas position on initial load

Closes #60

See merge request !95
parents 8d5429ca c054a024

packages/client/src/components/App.tsx

+1 −1
Original line number Diff line number Diff line
@@ -136,7 +136,7 @@ const AppInner = () => { 
  return (

    <>

      <Header />

      <CanvasWrapper />

      {config && <CanvasWrapper />}

      <ToolbarWrapper />



      {/* <DynamicallyLoadChat /> */}

packages/client/src/components/CanvasWrapper.tsx

+37 −21
Original line number Diff line number Diff line
@@ -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 (

    <main>

      <PanZoomWrapper>

      <PanZoomWrapper initialPosition={getInitialPosition}>

        <BlankOverlay />

        <HeatmapOverlay />

        <PixelPulses />
@@ -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 <CanvasWrapper>



    const handleViewportMove = (state: ViewportMoveEvent) => {

      if (Date.now() - initAt < 60 * 1000) {

packages/client/src/lib/canvas.ts

+7 −13
Original line number Diff line number Diff line
@@ -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<CanvasEvents> { 
  }



  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() {

packages/client/src/lib/canvas.utils.ts

0 → 100644
+22 −0
Original line number Diff line number Diff line 
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 };

  }

}

packages/lib/src/renderer/PanZoom.ts

+2 −1
Original line number Diff line number Diff line
@@ -165,6 +165,8 @@ export class PanZoom extends EventEmitter<PanZoomEvents> { 
    this.flags = {

      useZoom: false,

    };



    this.detectFlags();

  }



  initialize(
@@ -176,7 +178,6 @@ export class PanZoom extends EventEmitter<PanZoomEvents> { 
    this.$zoom = $zoom;

    this.$move = $move;



    this.detectFlags();

    this.registerMouseEvents();

    this.registerTouchEvents();