[Update/Prepare] Prepare for window transparency feature.

src-tauri/Cargo.toml

@@ -11,7 +11,7 @@ edition = "2021"
 tauri-build = { version = "1", features = [] }
 
 [dependencies]
-tauri = { version = "1", features = [ "window-set-always-on-top", "window-create", "window-close", "shell-sidecar", "shell-open", "devtools"] }
+tauri = { version = "1", features = [ "window-set-decorations", "window-set-always-on-top", "window-create", "window-close", "shell-sidecar", "shell-open", "devtools"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 

src-tauri/tauri.conf.json

@@ -15,25 +15,28 @@
       "window": {
         "create": true,
         "close": true,
-        "setAlwaysOnTop": true
+        "setAlwaysOnTop": true,
-      },
+        "setDecorations": true
-      "shell": {
+    },
+    "shell": {
         "all": false,
         "open": true,
         "sidecar": true,
         "scope": [
-          {
+            {
-            "name": "bin/test", "sidecar": true,"args": true
+                "name": "bin/test", "sidecar": true,"args": true
-          }
+            }
         ]
-      }
+    }
-    },
+},
-    "windows": [
+"windows": [
-      {
+    {
         "title": "VRCT",
         "width": 870,
-        "height": 654
+        "height": 654,
-      }
+        "transparent": true,
+        "decorations": false
+    }
     ],
     "security": {
       "csp": null

src-ui/utils/root.css

@@ -32,6 +32,9 @@ html, body {
 
 #root {
     height: 100%;
+
+    /* For controlling a whole window transparency */
+    opacity: 1;
 }
 
 /* SVG内のすべての要素にfillを適用 (colorの調整をcssでするため) */

src-ui/windows/main_window/MainWindow.jsx

@@ -1,6 +1,6 @@
+import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import styles from "./MainWindow.module.scss";
-
 import { SidebarSection } from "./sidebar_section/SidebarSection";
 import { MainSection } from "./main_section/MainSection";
 import { useStartPython } from "@logics/useStartPython";
@@ -8,8 +8,10 @@ import { useStartPython } from "@logics/useStartPython";
 export const MainWindow = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
+    const main_window = getCurrent();
 
     useEffect(() => {
+        main_window.setDecorations(true);
         if (!hasRunRef.current) {
             asyncStartPython();
         }