Commit 4aebeaa0 authored by Grant's avatar Grant
Browse files

fix: template source image always showing upon reenable & automatically set... 

fix: template source image always showing upon reenable & automatically set template position on initial enabling
parent 5d556d3e

packages/client/src/components/Settings/TemplateSettings.tsx

+12 −1
Original line number Diff line number Diff line
@@ -6,6 +6,7 @@ import { toast } from "react-toastify"; 
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faLink } from "@fortawesome/free-solid-svg-icons";

import { WebGLUtils } from "@/lib/webgl";

import { CanvasCore } from "@/lib/canvas";



export const TemplateSettings = () => {

  const {
@@ -42,6 +43,16 @@ export const TemplateSettings = () => { 
            isSelected={enable || false}

            onValueChange={(bool: boolean) => {

              setEnable(bool);



              if (bool && x === undefined && y === undefined) {

                const canvas = CanvasCore.get(false);

                if (canvas) {

                  const { canvasX, canvasY } =

                    canvas.panZoomTransformToCanvas();

                  setX(canvasX);

                  setY(canvasY);

                }

              }

            }}

          />

          <h2 className="text-xl">Template</h2>
@@ -121,7 +132,7 @@ export const TemplateSettings = () => { 
          >

            Show Mobile Tools

          </Switch>

          {url && (

          {url && x !== undefined && y !== undefined && (

            <Button

              onPress={() => {

                const copied = `${window.location.origin}${window.location.pathname}#tu=${url}${

packages/client/src/components/Templating/Template.tsx

+2 −0
Original line number Diff line number Diff line
@@ -58,6 +58,8 @@ const $Template = () => { 
    };



    const handleMouseUp = (_e: MouseEvent) => {

      if (!startLocation) return;



      startLocation = undefined;

      CanvasCore.get().getPanZoom()!.panning.setEnabled(true);

packages/client/src/contexts/TemplateContext.tsx

+13 −6
Original line number Diff line number Diff line
@@ -29,8 +29,8 @@ interface ITemplate { 
   */

  width?: number;



  x: number;

  y: number;

  x: number | undefined;

  y: number | undefined;

  opacity: number;

  style: TemplateStyle;
@@ -57,8 +57,8 @@ export const TemplateContext = ({ children }: PropsWithChildren) => { 
  const [width, setWidth] = useState<number | undefined>(

    routerData.template?.width,

  );

  const [x, setX] = useState(routerData.template?.x || 0);

  const [y, setY] = useState(routerData.template?.y || 0);

  const [x, setX] = useState(routerData.template?.x);

  const [y, setY] = useState(routerData.template?.y);

  const [opacity, setOpacity] = useState(100);

  const [style, setStyle] = useState<TemplateStyle>(

    routerData.template?.style || "ONE_TO_ONE",
@@ -75,8 +75,8 @@ export const TemplateContext = ({ children }: PropsWithChildren) => { 
        setEnable(true);

        setURL(data.template.url);

        setWidth(data.template.width);

        setX(data.template.x || 0);

        setY(data.template.y || 0);

        setX(data.template.x);

        setY(data.template.y);

        setStyle(data.template.style || "ONE_TO_ONE");

      } else {

        setEnable(false);
@@ -97,6 +97,13 @@ export const TemplateContext = ({ children }: PropsWithChildren) => { 
  }, []);



  useEffect(() => {

    if (x === undefined || y === undefined) {

      console.warn(

        "TemplateContext updating router ignored, x or y is undefined",

      );

      return;

    }



    Router.setTemplate({ enabled: enable, width, x, y, url, style });



    if (!initAt.current) {

packages/client/src/lib/canvas.ts

+7 −1
Original line number Diff line number Diff line
@@ -44,9 +44,15 @@ export class CanvasCore extends EventEmitter<CanvasEvents> { 
  private bypassCooldown = false;

  // private _delayedLoad: ReturnType<typeof setTimeout>;



  static get() {

  static get(): CanvasCore;

  static get<T extends boolean>(

    instanceIfNeeded: T,

  ): T extends true ? CanvasCore : CanvasCore | null;

  static get(instanceIfNeeded = true) {

    if (this.instance) return this.instance;



    if (!instanceIfNeeded) return null;



    return (this.instance = new this());

  }

packages/client/src/lib/router.ts

+6 −6
Original line number Diff line number Diff line
@@ -41,14 +41,14 @@ class _Router extends EventEmitter<RouterEvents> { 
  templateState: {

    enabled: boolean;

    width?: number;

    x: number;

    y: number;

    x: number | undefined;

    y: number | undefined;

    url?: string;

    style: TemplateStyle;

  } = {

    enabled: false,

    x: 0,

    y: 0,

    x: undefined,

    y: undefined,

    style: "ONE_TO_ONE",

  };
@@ -218,8 +218,8 @@ class _Router extends EventEmitter<RouterEvents> { 
  setTemplate(args: {

    enabled: boolean;

    width?: number;

    x: number;

    y: number;

    x: number | undefined;

    y: number | undefined;

    url?: string;

    style: TemplateStyle;

  }) {