fix positioning for contextual menu bar and loading bar (#27)

Co-authored-by: wil <wil@storyteller.ai>

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,
     });
   }
 

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>
+  );
 };

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>
   );
 };

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}

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>
   );
 };

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,

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;