Merge remote-tracking branch 'origin/main-dev' into dev-refactor

app/package-lock.json

@@ -50,6 +50,7 @@
         "three-viewport-gizmo": "^2.2.0",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4",
+        "yjs": "^13.6.27",
         "zustand": "^5.0.0-rc.2"
       },
       "devDependencies": {
@@ -2026,7 +2027,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2038,7 +2039,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4180,6 +4181,26 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4291,25 +4312,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -9063,7 +9084,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9940,7 +9961,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -13426,6 +13447,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "license": "MIT",
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -15036,6 +15067,27 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lib0": {
+      "version": "0.2.109",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.109.tgz",
+      "integrity": "sha512-jP0gbnyW0kwlx1Atc4dcHkBbrVAkdHjuyHxtClUPYla7qCmwIif1qZ6vQeJdR5FrOVdn26HvQT0ko01rgW7/Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/lie": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
@@ -15324,7 +15376,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20801,7 +20853,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20844,7 +20896,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20856,7 +20908,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21352,7 +21404,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22407,11 +22459,28 @@
         "fd-slicer": "~1.1.0"
       }
     },
+    "node_modules/yjs": {
+      "version": "13.6.27",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
+      "integrity": "sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.99"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }

app/package.json

@@ -45,6 +45,7 @@
     "three-viewport-gizmo": "^2.2.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
+    "yjs": "^13.6.27",
     "zustand": "^5.0.0-rc.2"
   },
   "scripts": {

app/src/components/layout/scenes/MainScene.tsx

@@ -53,7 +53,7 @@ function MainScene() {
   const { toggleThreeD } = useThreeDStore();
   const { isPlaying } = usePlayButtonStore();
   const { widgetSubOption } = useWidgetSubOption();
-  const { visualizationSocket } = useSocketStore();
+  const { socket, visualizationSocket } = useSocketStore();
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
   const { clearComparisonProduct } = useComparisonProduct();
@@ -68,6 +68,24 @@ function MainScene() {
   const { selectedVersion, setSelectedVersion } = selectedVersionStore();
   const { selectedComment, commentPositionState } = useSelectedComment();
 
+  useEffect(() => {
+    console.log('hi');
+    if (!projectId || !selectedVersion?.versionId || !socket) return;
+
+    socket.emit("joinRoom", { projectId, versionId: selectedVersion.versionId });
+
+    socket.on("v1:Line-collab:response:create", (data: any) => {
+      console.log("v1:Line-collab:response:create:", data);
+    });
+
+    return () => {
+      if (projectId && selectedVersion?.versionId && socket) {
+        socket.emit("leaveRoom", { projectId, versionId: selectedVersion.versionId });
+        socket.off("v1:Line-collab:response:create");
+      }
+    };
+  }, [projectId, selectedVersion?.versionId]);
+
   useEffect(() => {
     if (activeModule !== 'simulation') {
       clearComparisonProduct();
@@ -188,7 +206,7 @@ function MainScene() {
       {activeModule !== "market" && !selectedUser && <Footer />}
 
       <VersionSaved />
-      {(commentPositionState !== null || selectedComment !== null) && <ThreadChat/>}
+      {(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
 
     </>
   );

app/src/store/builder/store.ts

@@ -1,24 +1,73 @@
 import * as THREE from "three";
 import { create } from "zustand";
+import * as Y from 'yjs';
 import { io } from "socket.io-client";
 import * as CONSTANTS from "../../types/world/worldConstants";
 
 export const useSocketStore = create<any>((set: any, get: any) => ({
   socket: null,
+  ydoc: new Y.Doc(),
+
   initializeSocket: (email?: string, organization?: string, token?: string) => {
-    const existingSocket = get().socket;
-    if (existingSocket) {
-      return;
-    }
+    if (get().socket) return;
+
+    // const socket = io(
+    //   `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`,
+    //   {
+    //     reconnection: true,
+    //     auth: { token },
+    //   }
+    // );
 
     const socket = io(
-      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder_v1`,
+      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/BuilderYjs_v1`,
       {
         reconnection: true,
         auth: { token },
       }
     );
 
+    const ydoc = get().ydoc;
+    socket.on('v1:Line-collab:response:create', (update) => {
+      try {
+        console.log('socket: ', update);
+        const base64Update = update?.data?.update;
+        // console.log('base64Update: ', base64Update);
+        if (!base64Update) return;
+    
+        // Decode base64 to Uint8Array
+        const binaryString = atob(base64Update);
+        // console.log('binaryString: ', binaryString);
+        const binaryUpdate = new Uint8Array(binaryString.length);
+        console.log('binaryUpdate: ', binaryUpdate);
+        for (let i = 0; i < binaryString.length; i++) {
+          binaryUpdate[i] = binaryString.charCodeAt(i);
+        }
+    
+        console.log('binaryUpdate:', binaryUpdate);
+        const isUintArray = binaryUpdate instanceof Uint8Array;
+        console.log('isUintArray:', isUintArray);
+    
+        if (isUintArray) {
+          Y.applyUpdate(ydoc, binaryUpdate); // ✅ apply decoded update
+        }
+      } catch (err) {
+        console.error('Error applying update:', err);
+      }
+    });
+    
+
+    socket.on("line:add", (data) => {
+      console.log("📥 received line:add", data); // <- Add this
+      // log(➕ line:add\n${JSON.stringify(data, null, 2)});
+    });
+
+    // Broadcast local changes
+    ydoc.on('update', (update: any) => {
+      console.log('ydoc: ', update);
+      socket.emit('v1:Line-collab:create', update);
+    });
+
     const visualizationSocket = io(
       `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization_v1`,
       {
@@ -51,6 +100,7 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
 
     set({
       socket,
+      ydoc,
       visualizationSocket,
       dashBoardSocket,
       projectSocket,