From 570a48e17680f85e3682e3756a0004fb3c0fa2d1 Mon Sep 17 00:00:00 2001
From: wil <wilwong@users.noreply.github.com>
Date: Mon, 23 Sep 2024 10:07:34 -0400
Subject: [PATCH] fix positioning for contextual menu bar and loading bar (#27)

Co-authored-by: wil <wil@storyteller.ai>
---
 src/KonvaApp/Nodes/NetworkedNodeContext.ts    | 10 +--
 .../ContextualLoadingBar.tsx                  | 31 +++++--
 .../ContextualToolbarImage.tsx                | 26 +++---
 .../SignaledToolbarMain.tsx                   | 18 ++--
 src/components/ui/LoadingBar.tsx              | 87 +++++++------------
 src/signals/uiAccess/loadingBar.ts            |  1 +
 src/signals/uiAccess/type.ts                  |  4 +-
 7 files changed, 84 insertions(+), 93 deletions(-)

diff --git a/src/KonvaApp/Nodes/NetworkedNodeContext.ts b/src/KonvaApp/Nodes/NetworkedNodeContext.ts
index 247b298e88..a8252bcd74 100644
--- a/src/KonvaApp/Nodes/NetworkedNodeContext.ts
+++ b/src/KonvaApp/Nodes/NetworkedNodeContext.ts
@@ -52,7 +52,7 @@ export class NetworkedNodeContext {
       return;
     }
 
-    this.kNode.stroke(null);
+    // this.kNode.stroke(null);
     this.kNode.strokeWidth(0);
     this.kNode.draw();
   }
@@ -62,8 +62,8 @@ export class NetworkedNodeContext {
       return;
     }
     toolbarVideo.setPosition({
-      x: this.kNode.getPosition().x + this.kNode.getSize().width / 4,
-      y: this.kNode.getPosition().y - 150,
+      x: this.kNode.getPosition().x + this.kNode.getSize().width / 2,
+      y: this.kNode.getPosition().y,
     });
   }
 
@@ -72,8 +72,8 @@ export class NetworkedNodeContext {
       return;
     }
     loadingBar.updatePosition({
-      x: this.kNode.getPosition().x + this.kNode.getSize().width / 4,
-      y: this.kNode.getPosition().y - 60,
+      x: this.kNode.getPosition().x + this.kNode.getSize().width / 2,
+      y: this.kNode.getPosition().y + this.kNode.getSize().height,
     });
   }
 
diff --git a/src/KonvaRootComponent/ContextualLoadingBar.tsx b/src/KonvaRootComponent/ContextualLoadingBar.tsx
index 109339dcf9..dd222dfd9e 100644
--- a/src/KonvaRootComponent/ContextualLoadingBar.tsx
+++ b/src/KonvaRootComponent/ContextualLoadingBar.tsx
@@ -1,16 +1,29 @@
+import { twMerge } from "tailwind-merge";
+import { Transition } from "@headlessui/react";
 import { LoadingBar } from "~/components/ui";
 import { uiAccess } from "~/signals/uiAccess";
 
-// import { useSignalRenderCounter } from "~/hooks/useSignalRenderCounter";
+import { transitionTimingStyles } from "~/components/styles";
 
 export const ContextualLoadingBar = () => {
-  // TODO: Testing the signal render efficiency
-  // useSignalRenderCounter<typeof loadingBar.signal.value>(
-  //   "ContextualLoadingBar",
-  //   loadingBar.signal,
-  // );
+  const { isShowing, position, width, ...rest } =
+    uiAccess.loadingBar.signal.value;
 
-  const props = uiAccess.loadingBar.signal.value;
-
-  return <LoadingBar {...props} />;
+  return (
+    <Transition
+      as="div"
+      show={isShowing}
+      className={twMerge(
+        transitionTimingStyles,
+        "fixed -translate-x-1/2 translate-y-5 data-[closed]:opacity-0",
+      )}
+      style={{
+        top: position.y,
+        left: position.x,
+        width: width ? `${width}px` : undefined,
+      }}
+    >
+      <LoadingBar {...rest} />
+    </Transition>
+  );
 };
diff --git a/src/KonvaRootComponent/ContextualToolbarImage.tsx b/src/KonvaRootComponent/ContextualToolbarImage.tsx
index 8a6c34f43f..adebd66615 100644
--- a/src/KonvaRootComponent/ContextualToolbarImage.tsx
+++ b/src/KonvaRootComponent/ContextualToolbarImage.tsx
@@ -31,19 +31,19 @@ export const ContextualToolbarImage = () => {
     },
   );
   return (
-    <Transition show={isShowing}>
-      <div
-        className={twMerge(
-          transitionTimingStyles,
-          "fixed data-[closed]:opacity-0",
-        )}
-        style={{
-          top: position.y,
-          left: position.x,
-        }}
-      >
-        <ToolbarImage {...rest} buttonsProps={buttonsProps} />
-      </div>
+    <Transition
+      as="div"
+      show={isShowing}
+      className={twMerge(
+        transitionTimingStyles,
+        "fixed -translate-x-1/2 -translate-y-20 data-[closed]:opacity-0",
+      )}
+      style={{
+        top: position.y,
+        left: position.x,
+      }}
+    >
+      <ToolbarImage {...rest} buttonsProps={buttonsProps} />
     </Transition>
   );
 };
diff --git a/src/KonvaRootComponent/SignaledToolbarMain.tsx b/src/KonvaRootComponent/SignaledToolbarMain.tsx
index 2a305b5f7c..7d74cadb0f 100644
--- a/src/KonvaRootComponent/SignaledToolbarMain.tsx
+++ b/src/KonvaRootComponent/SignaledToolbarMain.tsx
@@ -1,5 +1,6 @@
 import { MouseEventHandler } from "react";
 import { useSignalEffect } from "@preact/signals-react";
+import { Transition } from "@headlessui/react";
 import { toolbarMain } from "~/signals/uiAccess/toolbarMain";
 import { dispatchers } from "~/signals/uiEvents/toolbarMain";
 
@@ -57,14 +58,15 @@ export const SignaledToolbarMain = ({
   return (
     <div className="relative col-span-12 col-start-1 row-span-1 row-start-12">
       <div className="absolute left-0 right-0 mx-auto w-96 -translate-y-full items-end pb-4">
-        <LoadingBar
-          isShowing={loadingBar.isShowing}
-          progress={loadingBar.progress}
-          message={loadingBar.message}
-          status={loadingBar.status}
-          onRetry={handleOnClickRetry}
-          colReverse
-        />
+        <Transition show={loadingBar.isShowing}>
+          <LoadingBar
+            progress={loadingBar.progress}
+            message={loadingBar.message}
+            status={loadingBar.status}
+            onRetry={handleOnClickRetry}
+            colReverse
+          />
+        </Transition>
       </div>
       <ToolbarMain
         disabled={toolbarMain.signal.value.disabled}
diff --git a/src/components/ui/LoadingBar.tsx b/src/components/ui/LoadingBar.tsx
index e1d77923a0..ef45323eaa 100644
--- a/src/components/ui/LoadingBar.tsx
+++ b/src/components/ui/LoadingBar.tsx
@@ -1,5 +1,4 @@
 import { MouseEventHandler } from "react";
-import { Transition } from "@headlessui/react";
 import { twMerge } from "tailwind-merge";
 
 import { faArrowRightRotate } from "@fortawesome/pro-solid-svg-icons";
@@ -13,78 +12,52 @@ export enum LoadingBarStatus {
   ERROR = "error",
 }
 export interface LoadingBarProps {
-  width?: number;
   colReverse?: boolean;
   progress: number;
   status: LoadingBarStatus;
-  isShowing: boolean;
-  position?: {
-    x: number;
-    y: number;
-  };
   message?: string;
   onRetry?: MouseEventHandler<HTMLButtonElement>;
 }
 
 export const LoadingBar = ({
   colReverse,
-  width,
   progress = 0,
-  position,
   status,
   onRetry,
-  isShowing,
   message,
 }: LoadingBarProps) => {
   return (
-    <Transition show={isShowing}>
-      <div
-        className={twMerge(
-          // default styles
-          "flex w-full flex-col gap-2",
-          // position styles
-          position && `fixed`,
-          position && !width && `w-96`,
-          colReverse && "flex-col-reverse",
-          // base transition properties
-          "transition-opacity ease-in-out",
-          // Shared closed styles
-          "data-[closed]:opacity-0",
-          // Entering styles
-          "data-[enter]:duration-100",
-          // Leaving styles
-          "data-[leave]:duration-300",
-        )}
-        style={{
-          left: position?.x,
-          top: position?.y,
-          width: width ? `${width}px` : undefined,
-        }}
-      >
-        <div className="h-2.5 w-full rounded-full bg-gray-200">
-          <div
-            className={twMerge(
-              "h-2.5 rounded-full bg-primary-500",
-              status === LoadingBarStatus.LOADING && "animate-pulse",
-            )}
-            style={{ width: `${progress}%` }}
-          />
-        </div>
-
-        <div className="flex grow items-center justify-center gap-2">
-          {message && <label>{message}</label>}
-
-          {status === LoadingBarStatus.ERROR && (
-            <Button
-              icon={faArrowRightRotate}
-              onClick={onRetry}
-              className="flex items-center gap-2 hover:text-primary"
-            >
-              <label className="cursor-pointer">Retry</label>
-            </Button>
+    <div
+      className={twMerge(
+        // default styles
+        "flex w-full flex-col gap-2",
+        // position styles
+        colReverse && "flex-col-reverse",
+      )}
+    >
+      <div className="h-2.5 w-full rounded-full bg-gray-200">
+        <div
+          className={twMerge(
+            "h-2.5 rounded-full bg-primary-500",
+            status === LoadingBarStatus.LOADING && "animate-pulse",
           )}
-        </div>
+          style={{ width: `${progress}%` }}
+        />
       </div>
-    </Transition>
+
+      <div className="flex grow items-center justify-center gap-2">
+        {message && <label>{message}</label>}
+
+        {status === LoadingBarStatus.ERROR && (
+          <Button
+            icon={faArrowRightRotate}
+            onClick={onRetry}
+            className="flex items-center gap-2 hover:text-primary"
+          >
+            <label className="cursor-pointer">Retry</label>
+          </Button>
+        )}
+      </div>
+    </div>
   );
 };
diff --git a/src/signals/uiAccess/loadingBar.ts b/src/signals/uiAccess/loadingBar.ts
index 585b7e6285..5f0a52b921 100644
--- a/src/signals/uiAccess/loadingBar.ts
+++ b/src/signals/uiAccess/loadingBar.ts
@@ -7,6 +7,7 @@ const loadingBarSignal = signal<ContextualLoadingBarProps>({
     x: 0,
     y: 0,
   },
+  width: 300,
   isShowing: false,
   progress: 0,
   status: LoadingBarStatus.IDLE,
diff --git a/src/signals/uiAccess/type.ts b/src/signals/uiAccess/type.ts
index 040bdd23af..209f35664e 100644
--- a/src/signals/uiAccess/type.ts
+++ b/src/signals/uiAccess/type.ts
@@ -10,7 +10,9 @@ export interface ContextualUi {
 
 export interface ContextualLoadingBarProps
   extends ContextualUi,
-    Omit<LoadingBarProps, "position"> {}
+    Omit<LoadingBarProps, "position"> {
+  width: number;
+}
 
 export interface ContextualButtonRetryProps extends ContextualUi {
   disabled: boolean;