upstream pull + signIn/Up

app/src/utils/contextmenuHandler.ts

@@ -1,137 +1,137 @@
-import React, { useState } from "react";
-
-interface HandleDivProps {
-  switchesRef: React.RefObject<HTMLDivElement>;
-  setMenuLeftPosition: React.Dispatch<React.SetStateAction<number>>;
-  setMenuTopPosition: React.Dispatch<React.SetStateAction<number>>;
-  setMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
-// The functional component that handles right-click (contextmenu) events
-export default function ContextMenuHandler({
-  switchesRef,
-  setMenuLeftPosition,
-  setMenuTopPosition,
-  setMenuVisible,
-}: HandleDivProps) {
-  const [width, setWidth] = useState<number>(0);
-  const [height, setHeight] = useState<number>(0);
-
-  // Function to handle the contextmenu event when a right-click happens
-  const handleClick = (event: MouseEvent) => {
-    event.preventDefault();
-    const targets = event.target as HTMLElement;
-    const isInsideSwitches = switchesRef.current?.contains(
-      targets as Node
-    );
-    const rect = switchesRef.current?.getBoundingClientRect();
-    if (!rect) return;
-
-    const totalHeight = rect.height + rect.top;
-
-    const totalWidth = rect.width + rect.left;
-
-    // Calculate the new position for the context menu
-    if (isInsideSwitches) {
-      const yPosition = event.clientY;
-      const xPosition = event.clientX;
-      //for top contextmenu handling
-
-      if (
-        totalHeight - yPosition > 20 &&
-        totalHeight - yPosition < 260
-      ) {
-        const minTop = yPosition - 110;
-        setMenuTopPosition(minTop);
-      } else if (
-        totalHeight - yPosition >= 260 &&
-        yPosition > height - 73
-      ) {
-        const minTop = yPosition + 115;
-        setMenuTopPosition(minTop);
-      }
-
-      // for top contextmenu handling
-      if (
-        totalWidth - xPosition > 500 &&
-        totalWidth - xPosition < 900
-      ) {
-        const minLeft = xPosition + 80;
-        setMenuLeftPosition(minLeft);
-      } else if (
-        totalWidth - xPosition > 10 &&
-        totalWidth - xPosition > 150
-      ) {
-        const minLeft = xPosition + 80;
-        setMenuLeftPosition(minLeft);
-      } else {
-        const minLeft = xPosition - 80;
-        setMenuLeftPosition(minLeft);
-      }
-      // setMenuVisible(true);
-    } else {
-      setMenuVisible(false);
-    }
-  };
-  React.useEffect(() => {
-    const element = switchesRef.current;
-
-    // Create a resize observer
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries.length > 0) {
-        // Update the width state with the new width of the element
-        const { width, height } = entries[0].contentRect;
-        setWidth(width);
-        setHeight(height);
-      }
-    });
-
-    // Start observing the element's width changes
-    if (element) {
-      resizeObserver.observe(element);
-    }
-
-    // Cleanup observer on component unmount
-    return () => {
-      if (element) {
-        resizeObserver.unobserve(element);
-        
-      }
-    };
-  }, [height, width]);
-
-  React.useEffect(() => {
-    let drag = false;
-    let isRightMouseDown = false;
-
-    const handleDown = (event: MouseEvent) => {
-      if (event.button === 2) {
-        isRightMouseDown = true;
-        drag = false;
-      }
-    }
-
-    const handleUp = (event: MouseEvent) => {
-      if (event.button === 2) {
-        isRightMouseDown = false;
-        if (!drag) {
-          handleClick(event);
-        }
-      };
-    }
-
-    const handleMove = (event: MouseEvent) => {
-      if (isRightMouseDown) { drag = true; };
-    }
-
-    document.addEventListener("mousedown", handleDown);
-    document.addEventListener("mousemove", handleMove);
-    document.addEventListener("mouseup", handleUp);
-
-    return () => {
-      document.removeEventListener("mousedown", handleDown);
-      document.removeEventListener("mousemove", handleMove);
-      document.removeEventListener("mouseup", handleUp);
-    };
-  }, []);
-  return null;
-}
+import React, { useState } from "react";
+
+interface HandleDivProps {
+  switchesRef: React.RefObject<HTMLDivElement>;
+  setMenuLeftPosition: React.Dispatch<React.SetStateAction<number>>;
+  setMenuTopPosition: React.Dispatch<React.SetStateAction<number>>;
+  setMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+// The functional component that handles right-click (contextmenu) events
+export default function ContextMenuHandler({
+  switchesRef,
+  setMenuLeftPosition,
+  setMenuTopPosition,
+  setMenuVisible,
+}: HandleDivProps) {
+  const [width, setWidth] = useState<number>(0);
+  const [height, setHeight] = useState<number>(0);
+
+  // Function to handle the contextmenu event when a right-click happens
+  const handleClick = (event: MouseEvent) => {
+    event.preventDefault();
+    const targets = event.target as HTMLElement;
+    const isInsideSwitches = switchesRef.current?.contains(
+      targets as Node
+    );
+    const rect = switchesRef.current?.getBoundingClientRect();
+    if (!rect) return;
+
+    const totalHeight = rect.height + rect.top;
+
+    const totalWidth = rect.width + rect.left;
+
+    // Calculate the new position for the context menu
+    if (isInsideSwitches) {
+      const yPosition = event.clientY;
+      const xPosition = event.clientX;
+      //for top contextmenu handling
+
+      if (
+        totalHeight - yPosition > 20 &&
+        totalHeight - yPosition < 260
+      ) {
+        const minTop = yPosition - 110;
+        setMenuTopPosition(minTop);
+      } else if (
+        totalHeight - yPosition >= 260 &&
+        yPosition > height - 73
+      ) {
+        const minTop = yPosition + 115;
+        setMenuTopPosition(minTop);
+      }
+
+      // for top contextmenu handling
+      if (
+        totalWidth - xPosition > 500 &&
+        totalWidth - xPosition < 900
+      ) {
+        const minLeft = xPosition + 80;
+        setMenuLeftPosition(minLeft);
+      } else if (
+        totalWidth - xPosition > 10 &&
+        totalWidth - xPosition > 150
+      ) {
+        const minLeft = xPosition + 80;
+        setMenuLeftPosition(minLeft);
+      } else {
+        const minLeft = xPosition - 80;
+        setMenuLeftPosition(minLeft);
+      }
+      // setMenuVisible(true);
+    } else {
+      setMenuVisible(false);
+    }
+  };
+  React.useEffect(() => {
+    const element = switchesRef.current;
+
+    // Create a resize observer
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries.length > 0) {
+        // Update the width state with the new width of the element
+        const { width, height } = entries[0].contentRect;
+        setWidth(width);
+        setHeight(height);
+      }
+    });
+
+    // Start observing the element's width changes
+    if (element) {
+      resizeObserver.observe(element);
+    }
+
+    // Cleanup observer on component unmount
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+        
+      }
+    };
+  }, [height, width]);
+
+  React.useEffect(() => {
+    let drag = false;
+    let isRightMouseDown = false;
+
+    const handleDown = (event: MouseEvent) => {
+      if (event.button === 2) {
+        isRightMouseDown = true;
+        drag = false;
+      }
+    }
+
+    const handleUp = (event: MouseEvent) => {
+      if (event.button === 2) {
+        isRightMouseDown = false;
+        if (!drag) {
+          handleClick(event);
+        }
+      };
+    }
+
+    const handleMove = (event: MouseEvent) => {
+      if (isRightMouseDown) { drag = true; };
+    }
+
+    document.addEventListener("mousedown", handleDown);
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("mouseup", handleUp);
+
+    return () => {
+      document.removeEventListener("mousedown", handleDown);
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+    };
+  }, []);
+  return null;
+}

app/src/utils/indexDB/idbUtils.ts

@@ -1,45 +1,45 @@
-const DB_NAME = 'GLTFStorage';
-const STORE_NAME = 'models';
-const DB_VERSION = 1;
-
-export function initializeDB(): Promise<IDBDatabase> {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open(DB_NAME, DB_VERSION);
-
-    request.onupgradeneeded = () => {
-      const db = request.result;
-      if (!db.objectStoreNames.contains(STORE_NAME)) {
-        db.createObjectStore(STORE_NAME);
-      }
-    };
-
-    request.onsuccess = () => resolve(request.result);
-    request.onerror = () => reject(request.error);
-  });
-}
-
-export async function storeGLTF(key: string, file: Blob): Promise<void> {
-  const db = await initializeDB();
-
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(STORE_NAME, 'readwrite');
-    const store = transaction.objectStore(STORE_NAME);
-    const request = store.put(file, key);
-
-    request.onsuccess = () => resolve();
-    request.onerror = () => reject(request.error);
-  });
-}
-
-export async function retrieveGLTF(key: string): Promise<Blob | undefined> {
-  const db = await initializeDB();
-
-  return new Promise((resolve, reject) => {
-    const transaction = db.transaction(STORE_NAME, 'readonly');
-    const store = transaction.objectStore(STORE_NAME);
-    const request = store.get(key);
-
-    request.onsuccess = () => resolve(request.result as Blob | undefined);
-    request.onerror = () => reject(request.error);
-  });
+const DB_NAME = 'GLTFStorage';
+const STORE_NAME = 'models';
+const DB_VERSION = 1;
+
+export function initializeDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function storeGLTF(key: string, file: Blob): Promise<void> {
+  const db = await initializeDB();
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(STORE_NAME, 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+    const request = store.put(file, key);
+
+    request.onsuccess = () => resolve();
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function retrieveGLTF(key: string): Promise<Blob | undefined> {
+  const db = await initializeDB();
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(STORE_NAME, 'readonly');
+    const store = transaction.objectStore(STORE_NAME);
+    const request = store.get(key);
+
+    request.onsuccess = () => resolve(request.result as Blob | undefined);
+    request.onerror = () => reject(request.error);
+  });
 }

app/src/utils/outerClick.ts

@@ -1,29 +1,29 @@
-import React from "react";
-
-interface OuterClickProps {
-  contextClassName: string;
-  setMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export default function OuterClick({
-  contextClassName,
-  setMenuVisible,
-}: OuterClickProps) {
-  const handleClick = (event: MouseEvent) => {
-    const targets = event.target as HTMLElement;
-    // Check if the click is outside the selectable-dropdown-wrapper
-    if (!targets.closest(`.${contextClassName}`)) {
-      setMenuVisible(false); // Close the menu by updating the state
-    }
-  };
-
-  // Add event listener on mount and remove it on unmount
-  React.useEffect(() => {
-    document.addEventListener("click", handleClick);
-    return () => {
-      document.removeEventListener("click", handleClick);
-    };
-  }, []);
-
-  return null; // This component doesn't render anything
-}
+import React from "react";
+
+interface OuterClickProps {
+  contextClassName: string;
+  setMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function OuterClick({
+  contextClassName,
+  setMenuVisible,
+}: OuterClickProps) {
+  const handleClick = (event: MouseEvent) => {
+    const targets = event.target as HTMLElement;
+    // Check if the click is outside the selectable-dropdown-wrapper
+    if (!targets.closest(`.${contextClassName}`)) {
+      setMenuVisible(false); // Close the menu by updating the state
+    }
+  };
+
+  // Add event listener on mount and remove it on unmount
+  React.useEffect(() => {
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+
+  return null; // This component doesn't render anything
+}