Commit e0fbffa5 authored by Ategon's avatar Ategon
Browse files

Show initial canvas coordinates properly

parent d93e61af

packages/client/src/components/CanvasWrapper.tsx

+17 −12
Original line number Diff line number Diff line
@@ -11,6 +11,7 @@ import { 
  useCallback,

  useContext,

  useEffect,

  useLayoutEffect,

  useRef,

  useState,

} from "react";
@@ -47,7 +48,21 @@ const INSPECT_END_ANIMATION_DURATION = 180; 
export const CanvasWrapper = () => {

  const hasMod = useHasRole("MOD");

  const isMobile = useIsMobile();

  const { config } = useAppContext();

  const { config, setCanvasPosition } = useAppContext();

  const initialPositionSet = useRef(false);



  useLayoutEffect(() => {

    if (!config || initialPositionSet.current) return;



    initialPositionSet.current = true;

    const route = Router.get().canvas;



    setCanvasPosition({

      x: route?.x ?? config.canvas.size[0] >> 1,

      y: route?.y ?? config.canvas.size[1] >> 1,

      zoom: route ? route.zoom || 0 : 1,

    });

  }, [config, setCanvasPosition]);



  const getInitialPosition = useCallback<

    (useCssZoom: boolean) =>
@@ -676,7 +691,7 @@ const CanvasInner = () => { 
      }



      if (canvas.current) {

        const pos = canvas.current?.panZoomTransformToCanvas();

        const pos = canvas.current.panZoomTransformToCanvas();

        setCanvasPosition({

          x: pos.canvasX,

          y: pos.canvasY,
@@ -729,16 +744,6 @@ const CanvasInner = () => { 
    $skeleton.parentElement?.insertBefore($canvas, $skeleton);

    CanvasCore.get().setCanvas($canvas);



    if (canvas.current) {

      const { canvasX: x, canvasY: y } =

        canvas.current.panZoomTransformToCanvas();

      setCanvasPosition({

        x,

        y,

        zoom: PanZoom.transform.scale >> 0,

      });

    }



    // blank canvas

    const $blank = document.createElement("canvas");

    $blank.setAttribute("id", "blank-overlay");