Add desktop select

src/components/Desktop/Desktop.css

@@ -25,3 +25,12 @@
         transition: ease-in-out 200ms;
     }
 }
+
+#desktopSelect {
+    position: absolute;
+    border-radius: 1px;
+    background-color: #FFF2;
+    outline: #FFF7 2px solid;
+    height: 20px;
+    width: 20px;
+}

src/components/Desktop/Desktop.tsx

@@ -1,15 +1,29 @@
 import App from "./App/App.tsx";
 import "./Desktop.css";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { AppConfigType } from "./AppConfigType.ts";
 
 type DesktopProps = {
   openedAppConfigs: AppConfigType[],
   setOpenedAppConfigs: React.Dispatch<React.SetStateAction<AppConfigType[]>>
 }
 
+type DesktopSelectPos = {
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+
 function Desktop({ openedAppConfigs, setOpenedAppConfigs }: DesktopProps) {
   const [isFullscreenPreview, setIsFullscreenPreview] = useState<boolean>(false);
+  const [startDesktopSelectPos, setStartDesktopSelectPos] = useState<number[] | undefined>()
+  const [desktopSelectPos, setDesktopSelectPos] = useState<DesktopSelectPos>({
+    x: -1,
+    y: -1,
+    height: 0,
+    width: 0
+  });
 
   useEffect(() => {
     console.log(openedAppConfigs);
@@ -42,9 +56,52 @@ function Desktop({ openedAppConfigs, setOpenedAppConfigs }: DesktopProps) {
     });
   };
 
+  const startDesktopSelect = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    setStartDesktopSelectPos([e.clientY, e.clientX])
+  };
+
+  const updateDesktopSelect = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    if (startDesktopSelectPos){
+      setDesktopSelectPos(desktopSelectPos => {
+        const tmp = {...desktopSelectPos}
+        if (e.clientY < startDesktopSelectPos[0]){
+          tmp.y = e.clientY
+          tmp.height = startDesktopSelectPos[0] - e.clientY
+        }
+        else {
+          tmp.y = startDesktopSelectPos[0]
+          tmp.height = e.clientY - startDesktopSelectPos[0]
+        }
+        if (e.clientX < startDesktopSelectPos[1]){
+          tmp.x = e.clientX
+          tmp.width = startDesktopSelectPos[1] - e.clientX
+        }
+        else {
+          tmp.x = startDesktopSelectPos[1]
+          tmp.width = e.clientX - startDesktopSelectPos[1]
+        }
+        return tmp
+      });
+    }
+  };
+
+  const endDesktopSelect = () => {
+    setStartDesktopSelectPos(undefined)
+    setDesktopSelectPos({ x: -1, y: -1, height: 0, width: 0 });
+  };
+
   return (
-    <main id={"desktop"}>
+    <main id={"desktop"}
+          onMouseDown={e => startDesktopSelect(e)}
+          onMouseMove={e => updateDesktopSelect(e)}
+          onMouseUp={endDesktopSelect}>
       <div id={"fullscreenPreview"} className={isFullscreenPreview ? "active" : ""} />
+      <div id={"desktopSelect"} style={{
+        top: (desktopSelectPos.y + "px"),
+        left: (desktopSelectPos.x + "px"),
+        height: (desktopSelectPos.height + "px"),
+        width: (desktopSelectPos.width + "px")
+      }} />
 
       {
         openedAppConfigs.map((appConfig, i) => (