Merge branch 'master' into rgl-action-to-get-component

Author: Greg Harris

src/mui-material.d.ts

@@ -132,6 +132,7 @@ declare module "@mui/material/styles" {
   interface Theme {
     customName?: string;
     borders: {
+      [key: string]: BorderDef;
       default: BorderDef;
       dynamictabs: BorderDef;
       linearmeter: BorderDef;
@@ -145,6 +146,7 @@ declare module "@mui/material/styles" {
   interface ThemeOptions {
     customName?: string;
     borders?: {
+      [key: string]: Partial<BorderDef>;
       default?: Partial<BorderDef>;
       dynamictabs?: Partial<BorderDef>;
       linearmeter?: Partial<BorderDef>;

src/phoebusTheme.ts

@@ -149,6 +149,12 @@ export const phoebusTheme = createTheme({
       borderColor: "lightgrey",
       borderRadius: "0"
     },
+    input: {
+      borderStyle: "solid",
+      borderWidth: "0px",
+      borderColor: "#000000",
+      borderRadius: 0
+    },
     linearmeter: {
       borderStyle: "solid",
       borderWidth: "1px",

src/ui/hooks/useClassFile.test.tsx

@@ -3,14 +3,29 @@ import { contextRender, createRootStoreState } from "../../testResources";
 import { vi } from "vitest";
 import { act, screen } from "@testing-library/react";
 import { ensureWidgetsRegistered } from "../widgets";
-import { useClassFile } from "./useClassFile";
+import { extractThemeProps, useClassFile } from "./useClassFile";
 import { CsWebLibConfig } from "../../redux";
 import { phoebusTheme } from "../../phoebusTheme";
 import { createTheme } from "@mui/material";
 import { CsState } from "../../redux/csState";
+import { WidgetDescription } from "../widgets/createComponent";
+import { newAbsolutePosition } from "../../types/position";
+import { newFont } from "../../types/font";
+import { newColor } from "../../types/color";
 
 ensureWidgetsRegistered();
 
+const CLASS_WIDGET: WidgetDescription = {
+  type: "label",
+  id: "123",
+  fileId: "AShapeFilePath",
+  name: "MY_CLASS",
+  font: newFont(20),
+  position: newAbsolutePosition("0", "0", "0", "0"),
+  backgroundColor: newColor("rgba(56,206,56,1)"),
+  foregroundColor: newColor("rgba(29,41,69,1)")
+};
+
 function getFileState(): CsState {
   return {
     valueCache: {},
@@ -84,6 +99,15 @@ describe("useClassFile", (): void => {
             </color>
           </background_color>
           <tooltip>$(actions)</tooltip>
+          <font use_class="true">
+            <font family="Montserrat" style="REGULAR" size="8.0">
+            </font>
+          </font>
+          <border_width use_class="true">3</border_width>
+          <border_color use_class="true">
+            <color name="INVALID" red="255" green="0" blue="255">
+            </color>
+          </border_color>
         </widget>
       </display>`;
     const mockJsonPromise = Promise.resolve(mockSuccessResponse);
@@ -124,3 +148,60 @@ describe("useClassFile", (): void => {
     ).toBeInTheDocument();
   });
 });
+
+describe("extractThemeProps", (): void => {
+  it("returns nothing if no props in list match", (): void => {
+    const matches = extractThemeProps(
+      CLASS_WIDGET,
+      new Set(["offColor", "onColor"]),
+      value => value.colorString
+    );
+    expect(matches).toEqual({});
+  });
+  it("returns nothing if the map function is wrong", (): void => {
+    const matches = extractThemeProps(
+      CLASS_WIDGET,
+      new Set(["font"]),
+      value => value.colorString
+    );
+    expect(matches).toEqual({});
+  });
+  it("filters out undefined values", (): void => {
+    const newClassWidget = {
+      ...CLASS_WIDGET,
+      backgroundColor: { colorString: undefined }
+    };
+    const matches = extractThemeProps(
+      newClassWidget,
+      new Set(["backgroundColor", "foregroundColor"]),
+      value => value.colorString
+    );
+    expect(matches).toEqual({ contrastText: "rgba(29,41,69,1)" });
+  });
+  it("returns a list of matches that are correctly mapped", (): void => {
+    const matches = extractThemeProps(
+      CLASS_WIDGET,
+      new Set(["backgroundColor", "foregroundColor"]),
+      value => value.colorString
+    );
+    expect(matches).toEqual({
+      contrastText: "rgba(29,41,69,1)",
+      main: "rgba(56,206,56,1)"
+    });
+  });
+  it("returns a list of matches that don't need mapping", (): void => {
+    const matches = extractThemeProps(
+      CLASS_WIDGET,
+      new Set(["font"]),
+      value => value
+    );
+    expect(matches).toEqual({
+      font: {
+        name: undefined,
+        size: 20,
+        style: "Regular",
+        typeface: "Liberation sans"
+      }
+    });
+  });
+});

src/ui/hooks/useClassFile.tsx

@@ -5,14 +5,16 @@ import { fetchAndConvert } from "./useFile";
 import { WidgetDescription } from "../widgets/createComponent";
 import { selectClassFile } from "../../redux/slices/configurationSlice";
 import { phoebusTheme } from "../../phoebusTheme";
+import { borderToCss } from "../../types/border";
+import { fontToCss } from "../../types/font";
 
 // Map widget props to MUI theme props
 const keyMap: Record<string, string> = {
   backgroundColor: "main",
   foregroundColor: "contrastText"
 };
 
-const CLASS_PROPS = new Set([
+const CLASS_COLOR_PROPS = new Set([
   "offColor",
   "onColor",
   "foregroundColor",
@@ -24,8 +26,15 @@ const CLASS_PROPS = new Set([
   "fillColor",
   "needleColor",
   "selectedColor",
-  "deselectedColor",
-  "borderColor"
+  "deselectedColor"
+]);
+
+const CLASS_FONT_PROPS = new Set([
+  "font",
+  "scaleFont",
+  "titleFont",
+  "labelFont",
+  "legendFont"
 ]);
 
 export function useClassFile(userTheme?: Theme): Theme {
@@ -39,7 +48,7 @@ export function useClassFile(userTheme?: Theme): Theme {
         "ca",
         {}
       );
-      setTheme(createClassPalettes(widgetDescription));
+      setTheme(createClassTheme(widgetDescription));
     };
 
     if (classFile !== undefined) {
@@ -50,39 +59,69 @@ export function useClassFile(userTheme?: Theme): Theme {
   return theme;
 }
 
-export function createClassPalettes(classFile: WidgetDescription): Theme {
+/**
+ * Convert individual widget props into an object
+ * containing all class props on the widget, for a given group
+ * e.g. all color classes
+ * @param widget
+ * @param allowedProps set of props for given group
+ * @param mapper func that returns correct value for group
+ * @returns
+ */
+export function extractThemeProps(
+  widget: WidgetDescription,
+  allowedProps: Set<string>,
+  mapper: (value: any) => any
+): Record<string, any> {
+  return Object.fromEntries(
+    Object.entries(widget)
+      .filter(([key]) => allowedProps.has(key))
+      .map(([key, value]) => [keyMap[key] ?? key, mapper(value) ?? undefined])
+      .filter(([, v]) => v !== undefined)
+  );
+}
+
+export function createClassTheme(classFile: WidgetDescription): Theme {
   // If classfile is empty, do nothing
   if (!classFile.children) return phoebusTheme;
 
   const palette: { [key: string]: any } = {};
+  const typography: { [key: string]: any } = {};
+  const borders: { [key: string]: any } = {};
   classFile.children?.forEach((child: WidgetDescription) => {
     const widgetType: string = child.type;
     // Construct palette name from widget type and classname
     const paletteName = `${child.name}${widgetType}`;
 
-    // Only colors go in the theme palette
-    const matches = Object.entries(child)
-      .filter(([key]) => CLASS_PROPS.has(key))
-      .map(([key, value]) => ({ key, value }));
+    const colours = extractThemeProps(
+      child,
+      CLASS_COLOR_PROPS,
+      value => value?.colorString
+    );
+    if (Object.keys(colours).length) palette[paletteName] = colours;
 
-    // Assign colors to palette
-    palette[paletteName] = {
-      // Put Phoebus theme defaults, overwrite with class props
-      ...phoebusTheme.palette[widgetType],
-      ...Object.fromEntries(
-        matches.map(({ key, value }) => [
-          keyMap[key] ?? key,
-          value?.colorString ?? undefined
-        ])
-      )
-    };
+    const fonts = extractThemeProps(child, CLASS_FONT_PROPS, value =>
+      fontToCss(value)
+    );
+    if (Object.keys(fonts).length) typography[paletteName] = fonts;
+
+    borders[paletteName] = borderToCss(child.border);
   });
+
   // Create Theme
   const classTheme = createTheme({
     customName: "class",
     palette: {
       ...phoebusTheme.palette,
       ...palette
+    },
+    typography: {
+      ...phoebusTheme.typography,
+      ...typography
+    },
+    borders: {
+      ...phoebusTheme.borders,
+      ...borders
     }
   });
   return classTheme;

src/ui/hooks/useStyle.test.ts

@@ -38,9 +38,21 @@ const mockTheme = {
       borderWidth: 2,
       borderColor: "red",
       borderRadius: 4
+    },
+    MY_CLASSwidgetA: {
+      borderStyle: "solid",
+      borderWidth: 3,
+      borderColor: "green",
+      borderRadius: 5
     }
   },
-  typography: { fontSize: 14 }
+  typography: {
+    fontSize: 14,
+    MY_CLASSwidgetA: {
+      fontSize: 10,
+      fontFamily: "Montserrat"
+    }
+  }
 };
 
 beforeEach(() => {
@@ -105,6 +117,17 @@ describe("useStyle", () => {
     });
   });
 
+  it("uses class border when provided", () => {
+    const { result } = renderHook(() => useStyle({}, "widgetA", "MY_CLASS"));
+
+    expect(result.current.border).toEqual({
+      borderStyle: "solid",
+      borderWidth: 3,
+      borderColor: "green",
+      borderRadius: 5
+    });
+  });
+
   it("returns customColors, overriding only matching keys", () => {
     const { result } = renderHook(() =>
       useStyle(
@@ -149,6 +172,15 @@ describe("useStyle", () => {
     expect(result.current.font).toEqual(mockTheme.typography);
   });
 
+  it("uses class font when class exists", () => {
+    const { result } = renderHook(() => useStyle({}, "widgetA", "MY_CLASS"));
+
+    expect(result.current.font).toEqual({
+      fontFamily: "Montserrat",
+      fontSize: 10
+    });
+  });
+
   it("cursor is pointer when actions exist", () => {
     const { result } = renderHook(() =>
       useStyle({