refactor: widget-specific settings panel ui (#412)

CSCI-SHU-410-SE-Project · Feb 7, 2025 · d67d759 · d67d759
1 parent e7e0896
commit d67d759
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 144 deletions.
diff --git a/src/canvas/components/WidgetContainer.tsx b/src/canvas/components/WidgetContainer.tsx
@@ -6,7 +6,6 @@ import { stringifyError } from "../utils";
 import { LuGripVertical } from "react-icons/lu";
 import { Box } from "@radix-ui/themes";
 import { updateWidgetSettings, useWidgetsStore } from "../hooks";
-import { events } from "../../core";
 
 interface WidgetContainerProps {
   id: string;
@@ -20,9 +19,7 @@ const WidgetContainer = memo(({ id }: WidgetContainerProps) => {
 
   const onStop = useCallback(
     (_: DraggableEvent, data: DraggableData) => {
-      const pos = { x: x + data.x, y: y + data.y };
-      updateWidgetSettings(id, pos);
-      events.updateSettings.toManager({ id, settings: pos });
+      updateWidgetSettings(id, { x: x + data.x, y: y + data.y }, true);
     },
     [id, x, y],
   );

diff --git a/src/canvas/hooks/useWidgetsStore.ts b/src/canvas/hooks/useWidgetsStore.ts
@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { WidgetSettings } from "../../types";
 import { FC, createElement } from "react";
+import { events } from "../../core";
 import ErrorDisplay from "../components/ErrorDisplay";
 
 interface Widget {
@@ -105,6 +106,7 @@ export function updateWidgetRenderError(
 export function updateWidgetSettings(
   id: string,
   settings: Partial<WidgetSettings>,
+  emit: boolean = false,
 ) {
   useWidgetsStore.setState((state) => {
     if (id in state.widgets) {
@@ -117,6 +119,10 @@ export function updateWidgetSettings(
     }
     return {};
   });
+
+  if (emit) {
+    events.updateSettings.toManager({ id, settings }).catch(console.error);
+  }
 }
 
 export function removeWidgets(ids: string[]) {

diff --git a/src/manager/components/Widgets/Config.tsx b/src/manager/components/Widgets/Config.tsx
@@ -13,7 +13,7 @@ const Config = memo(({ id }: ConfigProps) => {
 
   return (
     <ScrollArea asChild>
-      <Box height="160px" pr="3" pb="3">
+      <Box height="200px" pr="3" pb="3">
         {config.type === WidgetConfigType.VALID ? (
           <Table.Root
             size="1"
@@ -27,15 +27,15 @@ const Config = memo(({ id }: ConfigProps) => {
             }}
           >
             <Table.Body>
-              <Table.Row>
+              <Table.Row align="center">
                 <Table.RowHeaderCell>Name</Table.RowHeaderCell>
                 <Table.Cell>{config.content.name}</Table.Cell>
               </Table.Row>
-              <Table.Row>
+              <Table.Row align="center">
                 <Table.RowHeaderCell>Entry</Table.RowHeaderCell>
                 <Table.Cell>{config.content.entry}</Table.Cell>
               </Table.Row>
-              <Table.Row>
+              <Table.Row align="center">
                 <Table.RowHeaderCell>Dependencies</Table.RowHeaderCell>
                 <Table.Cell>
                   <Dependencies dependencies={config.content.dependencies} />

diff --git a/src/manager/components/Widgets/Settings.tsx b/src/manager/components/Widgets/Settings.tsx
@@ -1,35 +1,85 @@
-import { Box, Flex } from "@radix-ui/themes";
-import { LuRepeat } from "react-icons/lu";
-import { events } from "../../../core";
-import { toast } from "sonner";
-import WidgetContentHeading from "./WidgetContentHeading";
-import WidgetContentSettingsList from "./WidgetContentSettingsList";
-import { useWidgetsStore } from "../../hooks";
-import { memo } from "react";
+import { Flex, Table } from "@radix-ui/themes";
+import { FaTimes } from "react-icons/fa";
+import { updateWidgetSettings, useWidgetsStore } from "../../hooks";
+import { memo, useCallback } from "react";
+import NumberInput from "./NumberInput";
+
+const X = ({ id }: SettingsProps) => {
+  const x = useWidgetsStore((state) => state.widgets[id].settings.x);
+  const onChange = useCallback(
+    (value: number) => updateWidgetSettings(id, { x: value }, true),
+    [id],
+  );
+
+  return <NumberInput value={x} min={0} width="50px" onChange={onChange} />;
+};
+
+const Y = ({ id }: SettingsProps) => {
+  const y = useWidgetsStore((state) => state.widgets[id].settings.y);
+  const onChange = useCallback(
+    (value: number) => updateWidgetSettings(id, { y: value }, true),
+    [id],
+  );
+
+  return <NumberInput value={y} min={0} width="50px" onChange={onChange} />;
+};
+
+const Opacity = ({ id }: SettingsProps) => {
+  const opacity = useWidgetsStore(
+    (state) => state.widgets[id].settings.opacity,
+  );
+  const onChange = useCallback(
+    (value: number) => updateWidgetSettings(id, { opacity: value }, true),
+    [id],
+  );
+
+  return (
+    <NumberInput value={opacity} min={0} width="50px" onChange={onChange} />
+  );
+};
+
+X.displayName = "Settings.X";
+Y.displayName = "Settings.Y";
+Opacity.displayName = "Settings.Opacity";
 
 interface SettingsProps {
   id: string;
 }
 
 const Settings = memo(({ id }: SettingsProps) => {
-  const settings = useWidgetsStore((state) => state.widgets[id].settings);
-
   return (
-    <Flex direction="column" gap="4">
-      <WidgetContentHeading
-        heading="Settings"
-        actionIcon={<LuRepeat />}
-        actionText="Re-render"
-        action={() =>
-          events.renderWidgets
-            .toCanvas([{ id }])
-            .then(() => toast.success("Re-rendered widget."))
-        }
-      />
-      <Box px="2" css={{ flex: 4 }}>
-        <WidgetContentSettingsList id={id} settings={settings} />
-      </Box>
-    </Flex>
+    <Table.Root
+      size="1"
+      variant="ghost"
+      layout="fixed"
+      css={{
+        "--table-cell-padding": "var(--space-1) var(--space-2)",
+        "--table-cell-min-height": 0,
+        "& tr": { "--table-row-box-shadow": "none" },
+        // Did not use <th> because we may have another column in the future,
+        // so header is not semantically correct
+        "& .label": { color: "var(--gray-11)", width: "100px" },
+      }}
+    >
+      <Table.Body>
+        <Table.Row align="center">
+          <Table.Cell className="label">Position (px)</Table.Cell>
+          <Table.Cell>
+            <Flex gap="1" align="center">
+              <X id={id} />
+              <FaTimes size={12} color="var(--gray-11)" />
+              <Y id={id} />
+            </Flex>
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row align="center">
+          <Table.Cell className="label">Opacity (%)</Table.Cell>
+          <Table.Cell>
+            <Opacity id={id} />
+          </Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table.Root>
   );
 });
 

diff --git a/src/manager/components/Widgets/WidgetContentHeading.tsx b/src/manager/components/Widgets/WidgetContentHeading.tsx
diff --git a/src/manager/components/Widgets/WidgetContentSettingsList.tsx b/src/manager/components/Widgets/WidgetContentSettingsList.tsx
diff --git a/src/manager/hooks/useWidgetsStore.ts b/src/manager/hooks/useWidgetsStore.ts
@@ -66,6 +66,7 @@ export async function rescan(initial: boolean = false) {
 export function updateWidgetSettings(
   id: string,
   settings: Partial<WidgetSettings>,
+  emit: boolean = false,
 ) {
   useWidgetsStore.setState((state) => {
     if (id in state.widgets) {
@@ -81,6 +82,10 @@ export function updateWidgetSettings(
     }
     return {};
   });
+
+  if (emit) {
+    events.updateSettings.toCanvas({ id, settings }).catch(console.error);
+  }
 }
 
 export function removeWidgets(ids: string[]) {