From 82ac9c88bb428d16d566793cce29dbc5aceaef08 Mon Sep 17 00:00:00 2001
From: Grant <grant@sc07.com>
Date: Mon, 6 Jul 2026 01:48:18 -0600
Subject: [PATCH 1/2] set initial template position based on viewport

---
 .../components/Settings/TemplateSettings.tsx  | 13 ++++++++++++-
 .../src/components/Templating/Template.tsx    |  2 ++
 .../client/src/contexts/TemplateContext.tsx   | 19 +++++++++++++------
 packages/client/src/lib/canvas.ts             |  8 +++++++-
 packages/client/src/lib/router.ts             | 12 ++++++------
 5 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/Settings/TemplateSettings.tsx b/packages/client/src/components/Settings/TemplateSettings.tsx
index 539a334..8ac9158 100644
--- a/packages/client/src/components/Settings/TemplateSettings.tsx
+++ b/packages/client/src/components/Settings/TemplateSettings.tsx
@@ -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}${
diff --git a/packages/client/src/components/Templating/Template.tsx b/packages/client/src/components/Templating/Template.tsx
index 7350f3e..d88531a 100644
--- a/packages/client/src/components/Templating/Template.tsx
+++ b/packages/client/src/components/Templating/Template.tsx
@@ -58,6 +58,8 @@ const $Template = () => {
     };
 
     const handleMouseUp = (_e: MouseEvent) => {
+      if (!startLocation) return;
+
       startLocation = undefined;
       CanvasCore.get().getPanZoom()!.panning.setEnabled(true);
 
diff --git a/packages/client/src/contexts/TemplateContext.tsx b/packages/client/src/contexts/TemplateContext.tsx
index d853fde..b54a3f0 100644
--- a/packages/client/src/contexts/TemplateContext.tsx
+++ b/packages/client/src/contexts/TemplateContext.tsx
@@ -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) {
diff --git a/packages/client/src/lib/canvas.ts b/packages/client/src/lib/canvas.ts
index cc8d148..e5f6a05 100644
--- a/packages/client/src/lib/canvas.ts
+++ b/packages/client/src/lib/canvas.ts
@@ -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());
   }
 
diff --git a/packages/client/src/lib/router.ts b/packages/client/src/lib/router.ts
index 4ddb482..4cb6fd9 100644
--- a/packages/client/src/lib/router.ts
+++ b/packages/client/src/lib/router.ts
@@ -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;
   }) {
-- 
GitLab


From c465cdf1130606d78801f4bc9acf526369186081 Mon Sep 17 00:00:00 2001
From: Grant <grant@sc07.com>
Date: Mon, 6 Jul 2026 01:48:39 -0600
Subject: [PATCH 2/2] fix template source image always showing upon reenable

fixes #189
---
 packages/client/src/lib/template.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/lib/template.ts b/packages/client/src/lib/template.ts
index b86ef04..722cabc 100644
--- a/packages/client/src/lib/template.ts
+++ b/packages/client/src/lib/template.ts
@@ -122,7 +122,11 @@ export class Template extends EventEmitter<TemplateEvents> {
 
     switch (key) {
       case "enable":
-        this.setElementVisible([this.$canvas, this.$imageLoader], !!value);
+        this.setElementVisible([this.$canvas], !!value);
+        this.setElementVisible(
+          [this.$imageLoader],
+          !!value && this.options.style === "SOURCE",
+        );
         break;
       case "style":
         if ((value as keyof typeof TemplateStyle) in TemplateStyle) {
-- 
GitLab