PWV Drag Area Changes

Author: AttAditya

index.html

@@ -26,21 +26,22 @@
 
     <script>
       document.addEventListener("contextmenu", (event) => {
-        event.preventDefault();
+        // event.preventDefault();
       });
     </script>
 
     <style>
       .pywebview-drag-region {
         position: fixed;
         display: block;
-        top: 0.375rem;
-        left: 5.25rem;
-        width: 12rem;
-        height: 1.75rem;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
         background: transparent;
         opacity: 0%;
-        z-index: 1;
+        z-index: 0;
+        pointer-events: all;
       }
     </style>
   </head>

src/components/engine/Node/style.css

@@ -9,6 +9,7 @@
   justify-content: center;
   border-radius: calc(var(--icon-size) / 2);
   cursor: pointer;
+  pointer-events: all;
 }
 
 .node.active,

src/components/window/AppBar/index.tsx

@@ -6,6 +6,7 @@ import { WindowActions } from "@components/window/WindowActions";
 import { ToolBar  } from "@components/window/ToolBar";
 import { Palette  } from "@components/window/Palette";
 
+import Logo from "@assets/GraphScript.png";
 import "./style.css";
 
 export function AppBar({
@@ -17,25 +18,23 @@ export function AppBar({
   breadcrumb?: string;
   generateSuggestions?: (query: string) => Suggestion[];
 }) {
-  const title: string = "GraphScript Engine";
-  
   return (<>
     <div className="root-app-bar">
       {isDesktop() && <WindowActions />}
       <div
         className={[
-          "root-app-bar-title",
+          "root-app-bar-logo",
           isDesktop() ? "is-desktop" : "",
         ].join(" ")}
       >
-        {title}
+        <img src={Logo} alt="GraphScript Engine" />
       </div>
 
       <ToolBar tools={tools} />
 
       <Palette generateSuggestions={generateSuggestions} />
 
-      <div className="root-app-extra-title">
+      <div className="root-app-breadcrumb">
         <span>
           {breadcrumb}
         </span>

src/components/window/AppBar/style.css

@@ -8,27 +8,31 @@
   height: 2.5rem;
 }
 
-.root-app-bar-title {
+.root-app-bar-logo {
   font-weight: bold;
-  background-color: var(--color-white);
-  color: var(--color-black);
-  padding: 0.25rem 1rem;
-  border-radius: 0.25rem;
-  text-wrap: nowrap;
+  height: 100%;
+  padding: 0.5rem;
+}
+
+.root-app-bar-logo img {
+  height: 100%;
+  width: auto;
+  pointer-events: none;
 }
 
-.root-app-bar-title:not(.is-desktop) {
+.root-app-bar-logo:not(.is-desktop) {
   margin-left: 0.25rem;
+  filter: brightness(3);
 }
 
-.root-app-extra-title {
+.root-app-breadcrumb {
   display: flex;
   align-items: center;
   justify-content: end;
   padding: 0 1rem;
 }
 
-.root-app-extra-title span {
+.root-app-breadcrumb span {
   background: var(--color-black);
   color: var(--color-white);
   padding: 0.25rem 1rem;

src/components/window/Palette/style.css

@@ -1,6 +1,7 @@
 .app-navigator {
   flex: 1;
   position: relative;
+  pointer-events: all;
 }
 
 .app-navigator input {

src/components/window/ToolBar/style.css

@@ -12,6 +12,7 @@
   align-items: center;
   cursor: pointer;
   position: relative;
+  pointer-events: all;
 }
 
 .root-tool.disabled {

src/styles/index.css

@@ -11,6 +11,7 @@
   color: var(--color-white);
   user-select: none;
   -webkit-user-select: none;
+  pointer-events: inherit;
   transition:
     transform 0.3s ease-in-out,
     filter 0.3s ease-in-out,
@@ -35,6 +36,8 @@ html, body, #root {
   width: 100%;
   height: 100%;
   cursor: default;
+  pointer-events: none;
+  z-index: 10;
   font-family:
     "Lexend",
     "JetBrains Mono",