Disconnect worker on unmount of workerContext otherwise socket connection

is retained on page switch.

.dockerignore

@@ -10,6 +10,7 @@ build
 .gitignore
 .pnpm-store
 .gitlab
+.gitlab-ci-local
 .vscode
 
 node_modules

Dockerfile_node

-FROM node:20-bookworm as base
+FROM node:21-bookworm as base
 
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"

apps/fullstack/components/context/viewer/useWorkerContext.tsx

 "use client";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 
 import { useSocketContext } from "../useSocketContext";
 
@@ -34,40 +34,69 @@ export function WorkerContextProvider({
 
     /* Scaling and create the workers dynamically */
     useEffect(() => {
-        let w = worker;
-        let o = overlayWorker;
-
-        //Scale up
-        if (w.size < n) {
-            for (let i = w.size; i < n; i++) {
-                w.set(w.size, new PageWorker());
-                o.set(o.size, new OverlayWorker(socket));
+        setWorker((w) => {
+            //Scale up
+            if (w.size < n) {
+                for (let i = w.size; i < n; i++) {
+                    w.set(w.size, new PageWorker());
+                }
+                return new Map(w);
+            }
+            //Scale down
+            else if (w.size > n) {
+                for (let i = w.size - 1; i >= n; i--) {
+                    const worker = w.get(i);
+                    if (worker) {
+                        worker.terminate().then(() => {
+                            w.delete(i);
+                        });
+                    }
+                }
+                return new Map(w);
             }
-            w = new Map(w);
-            o = new Map(o);
-            setWorker(w);
-            setOverlayWorker(o);
-        }
+            return w;
+        });
 
-        //Scale down
-        if (w.size > n) {
-            for (let i = w.size - 1; i >= n; i--) {
-                w.get(i)
-                    .terminate()
-                    .then(() => {
-                        w.delete(i);
-                    });
-                o.get(i).terminate();
-                o.delete(i);
+        setOverlayWorker((o) => {
+            if (o.size < n) {
+                for (let i = o.size; i < n; i++) {
+                    o.set(o.size, new OverlayWorker(socket));
+                }
+                return new Map(o);
+            } else if (o.size > n) {
+                for (let i = o.size - 1; i >= n; i--) {
+                    const worker = o.get(i);
+                    if (worker) {
+                        worker.terminate();
+                        o.delete(i);
+                    }
+                }
+                return new Map(o);
             }
+            return o;
+        });
+    }, [n, socket]);
 
-            w = new Map(w);
-            o = new Map(o);
-            setWorker(w);
-            setOverlayWorker(o);
-        }
-        console.log("WorkerContextProvider", w.size, o.size);
-    }, [n, overlayWorker, socket, worker]);
+    useEffect(() => {
+        setWorker((p) => p);
+        setOverlayWorker((o) => o);
+        return () => {
+            setWorker((w) => {
+                w.forEach((worker, i) => {
+                    worker.terminate();
+                    w.delete(i);
+                });
+                return new Map();
+            });
+            setOverlayWorker((o) => {
+                o.forEach((worker, i) => {
+                    worker.terminate();
+                    o.delete(i);
+                });
+                return new Map();
+            });
+        };
+    }, []);
 
     return (
         <WorkerContext.Provider value={{ worker, overlayWorker }}>

apps/fullstack/components/editor/tools/placement/context.tsx

@@ -169,7 +169,8 @@ export function PlacementContextProvider({ children }: ToolContextProps) {
 
     const posDB = useMemo(() => {
         const wrapper = pageWrappersRef.current?.get(0);
-        if (!wrapper) return [NaN, NaN] as [number, number];
+        if (!wrapper || !currentOverlayWorker)
+            return [NaN, NaN] as [number, number];
         const pageDiv = wrapper.children[0] as HTMLDivElement;
         const xy = currentOverlayWorker.canvasCoords_2_dbCoords([
             overlayRect.x - pageDiv.offsetLeft,

apps/fullstack/components/editor/worker/overlayWorker.tsx

@@ -22,9 +22,9 @@ const debug = (...args: unknown[]) => {
 };
 
 export class OverlayWorker extends RenderWorker {
-    private ctx: CanvasRenderingContext2D;
+    private ctx?: CanvasRenderingContext2D;
     private stack = new Set<(ctx: CanvasRenderingContext2D) => void>();
-    private socket: Socket;
+    private socket?: Socket;
 
     // Canvas size in db coordinates
     private max: [number, number] = [1400, 2000];
@@ -154,7 +154,7 @@ export class OverlayWorker extends RenderWorker {
     };
 
     public terminate() {
-        this.ctx.clearRect(0, 0, 1400, 2000);
+        this.ctx?.clearRect(0, 0, 1400, 2000);
         debug("Terminated");
     }