From c1541b44c7395eafd8f1fdc951aeb5c6ab2dbdeb Mon Sep 17 00:00:00 2001
From: ori raisfeld <raisfeldori@gmail.com>
Date: Sat, 16 Mar 2024 01:19:59 +0200
Subject: [PATCH] attempted to fix an error with context

---
 src/App.tsx                                   |  1 -
 src/pages/login/loading.tsx                   |  2 +-
 src/pages/login/login.tsx                     |  2 +-
 src/pages/login/signup.tsx                    |  2 +-
 src/pages/main_page/internal_apps/App.css     |  2 ++
 src/pages/main_page/internal_apps/App.tsx     |  2 --
 .../main_page/internal_apps/file_system.tsx   | 23 +++++++++----------
 src/pages/main_page/main_page.tsx             |  8 +++----
 8 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 048a74f..c3b9902 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,7 +12,6 @@ function App() {
     initialize();
   }, []);
   init();
-  document.addEventListener('contextmenu', function(e) {e.preventDefault();});
   return <Routes>
       <Route path="/" element={login()}></Route>
       <Route path="/signup" element={signup()}></Route>
diff --git a/src/pages/login/loading.tsx b/src/pages/login/loading.tsx
index 0a41053..26e8cda 100644
--- a/src/pages/login/loading.tsx
+++ b/src/pages/login/loading.tsx
@@ -19,7 +19,7 @@ function loading(){
         });
     }, []);
 
-    return <div id='background'>
+    return <div id='background' onContextMenu={e => e.preventDefault()}>
 
 <div className='triangle down'></div>
         <div className='triangle left'></div>
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
index 3756723..784ed44 100644
--- a/src/pages/login/login.tsx
+++ b/src/pages/login/login.tsx
@@ -25,7 +25,7 @@ function login(){
 
 
 
-        return <div id='background'>
+        return <div id='background' onContextMenu={e => e.preventDefault()}>
             
 
 
diff --git a/src/pages/login/signup.tsx b/src/pages/login/signup.tsx
index 9172d4d..8a52a0a 100644
--- a/src/pages/login/signup.tsx
+++ b/src/pages/login/signup.tsx
@@ -13,7 +13,7 @@ function Login() {
     }
 
     return (
-        <div id='background'>
+        <div id='background' onContextMenu={e => e.preventDefault()}>
             <div className='triangle down'></div>
             <div className='triangle left'></div>
             <button className='upperbutton' aria-current={false} onClick={() => navigate("/")}>Login</button>
diff --git a/src/pages/main_page/internal_apps/App.css b/src/pages/main_page/internal_apps/App.css
index 5dba37c..5abd5e2 100644
--- a/src/pages/main_page/internal_apps/App.css
+++ b/src/pages/main_page/internal_apps/App.css
@@ -122,5 +122,7 @@
 }
 
 .ContextMenu{
+    height: 10svh;
+    position: fixed;
     background-color: aliceblue;
 }
\ No newline at end of file
diff --git a/src/pages/main_page/internal_apps/App.tsx b/src/pages/main_page/internal_apps/App.tsx
index 6d3cef5..7a05c77 100644
--- a/src/pages/main_page/internal_apps/App.tsx
+++ b/src/pages/main_page/internal_apps/App.tsx
@@ -1,5 +1,3 @@
-            //@ts-expect-error
-
 import React, { useState, RefObject } from "react";
 import { useDraggable } from '../Grid';
 import './App.css';
diff --git a/src/pages/main_page/internal_apps/file_system.tsx b/src/pages/main_page/internal_apps/file_system.tsx
index 5067a9f..be60d03 100644
--- a/src/pages/main_page/internal_apps/file_system.tsx
+++ b/src/pages/main_page/internal_apps/file_system.tsx
@@ -12,8 +12,14 @@ function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<strin
 
     const [{dx, dy}, set_positions] = useState({dx: 0, dy: 0});
     const [ctx_display, set_ctx_display] = useState('none');
-    const right_click = (ev: MouseEvent) => {
+    useEffect(() => {
+        document.addEventListener("click", () => set_ctx_display('none'));
+        return () => document.removeEventListener("click", () => set_ctx_display('none'));
+    }, [])
+
+    const right_click = (ev: React.MouseEvent) => {
         //set_context({x: ev.clientX, y: ev.clientY});
+        ev.preventDefault();
         console.log("right clicked");
         //set_menu(true);
         set_ctx_display('inherit');
@@ -22,25 +28,18 @@ function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<strin
     const left_click = () =>{
         if (ctx_display) {set_ctx_display('none');}
     }
-    useEffect(() => {
-        document.addEventListener('contextmenu', right_click);
-        document.addEventListener('click', left_click);
-        return () => {
-            document.removeEventListener('contextmenu', right_click);
-            document.removeEventListener('click', left_click);
-        };
-    }, []); 
     let Application = <div className='ApplicationDirectory'>
             <h1 className='filesystemtxt2'>/{location}/</h1>
 
             <div className='ContextMenu'
             style={{
-                transform: `translate3d(${dx}px, ${dy}px, 0)`,
+                top: `${dy}px`,
+                left: `${dx}px`,
                 display: `${ctx_display}`,
             }}
-            ><h1>test</h1></div>
+            ><h1>test</h1><h1>test 2</h1></div>
         </div>   
-    let app_html = <div className='frametest2'>
+    let app_html = <div className='frametest2' onContextMenu={right_click}>
     {Application}
     </div>;
     const [display, set_display] = useState('none');
diff --git a/src/pages/main_page/main_page.tsx b/src/pages/main_page/main_page.tsx
index e17e6fe..c36145a 100644
--- a/src/pages/main_page/main_page.tsx
+++ b/src/pages/main_page/main_page.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import './main_page.css';
 import Grid from './Grid';
 import folder from './assets/folder.png';
@@ -17,10 +17,10 @@ export default function MainPage() {
     const terminal = desktop_app("Terminal", terminald, () => {});
     const [menu, set_menu] = useState(false);
     return (
-        <div id='background'>
+        <div id='background' onContextMenu={e => {e.preventDefault();}}>
             {app}
-            <Grid apps={[example_app, not_example_app, terminal]} gridSize={50} margin={120} />
-            <nav className='navbar'>
+            <Grid  apps={[example_app, not_example_app, terminal]} gridSize={50} margin={120} />
+            <nav className='navbar' onContextMenu={e => e.preventDefault()}>
                 <img className='homeimg' onClick={() => set_menu(!menu)} src={menu_icon} alt="" />
                 <img className='searchimg' src={search} alt="" />
                 <img className='terminalimg' src={terminald} alt="" />