Fix bob widget issues

src/ui/widgets/EmbeddedDisplay/bobParser.ts

@@ -117,11 +117,11 @@ function bobParseFormatType(jsonProp: ElementCompact): string {
 }
 
 export function bobParseFont(jsonProp: ElementCompact): Font {
-  const opiStyles: { [key: number]: FontStyle } = {
-    0: FontStyle.Regular,
-    1: FontStyle.Bold,
-    2: FontStyle.Italic,
-    3: FontStyle.BoldItalic
+  const opiStyles: { [key: string]: FontStyle } = {
+    REGULAR: FontStyle.Regular,
+    BOLD: FontStyle.Bold,
+    ITALIC: FontStyle.Italic,
+    BOLD_ITALIC: FontStyle.BoldItalic
   };
   const fontAttributes = jsonProp["font"]._attributes;
   const { family, size, style } = fontAttributes;
@@ -245,10 +245,10 @@ export function parseBob(
       (pvName: ElementCompact): PV => opiParsePvName(pvName, defaultProtocol)
     ],
     font: ["font", bobParseFont],
-    rules: [
-      "rules",
-      (rules: Rule[]): Rule[] => opiParseRules(rules, defaultProtocol)
-    ],
+    // rules: [
+    //   "rules",
+    //   (rules: Rule[]): Rule[] => opiParseRules(rules, defaultProtocol)
+    // ],
     actions: [
       "actions",
       (actions: ElementCompact): WidgetActions =>
@@ -259,12 +259,14 @@ export function parseBob(
     points: ["points", bobParsePoints],
     resize: ["resize", bobParseResizing],
     squareLed: ["square", opiParseBoolean],
-    formatType: ["format", bobParseFormatType]
+    formatType: ["format", bobParseFormatType],
+    stretchToFit: ["stretch_image", opiParseBoolean]
   };
 
   const complexParsers = {
     ...BOB_COMPLEX_PARSERS,
-    rules: (rules: Rule[]): Rule[] => opiParseRules(rules, defaultProtocol)
+    rules: (rules: Rule[]): Rule[] =>
+      opiParseRules(rules, defaultProtocol, false)
   };
 
   const displayWidget = parseWidget(

src/ui/widgets/EmbeddedDisplay/opiParser.ts

@@ -258,7 +258,8 @@ export function opiParseActions(
  */
 export const opiParseRules = (
   jsonProp: ElementCompact,
-  defaultProtocol: string
+  defaultProtocol: string,
+  isOpiFile: boolean
 ): Rule[] => {
   if (!jsonProp.rules) {
     return [];
@@ -269,7 +270,7 @@ export const opiParseRules = (
       const xmlProp = ruleElement._attributes?.prop_id as string;
 
       const outExp = ruleElement._attributes?.out_exp === "true";
-      const pvArray = toArray(ruleElement.pv);
+      const pvArray = toArray(isOpiFile ? ruleElement.pv : ruleElement.pv_name);
       const pvs = pvArray.map((pv: ElementCompact) => {
         return {
           pvName: opiParsePvName(pv, defaultProtocol),
@@ -856,7 +857,8 @@ export function parseOpi(
 
   const complexParsers = {
     ...OPI_COMPLEX_PARSERS,
-    rules: (rules: Rule[]): Rule[] => opiParseRules(rules, defaultProtocol)
+    rules: (rules: Rule[]): Rule[] =>
+      opiParseRules(rules, defaultProtocol, true)
   };
 
   log.debug(compactJSON.display);

src/ui/widgets/Label/__snapshots__/label.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`<Label /> it matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="Label Label"
-    style="background-color: transparent; cursor: default; justify-content: center; align-items: center;"
+    style="background-color: transparent; cursor: default; justify-content: flex-start; align-items: flex-start;"
   >
     <span>
        hello 

src/ui/widgets/Label/label.module.css

@@ -5,11 +5,11 @@
   width: 100%;
   display: flex;
   padding: 0;
-  background-color: #c8c8c8;
+  background-color: #ffffff;
   font: 14px helvetica, sans-serif;
   text-align: center;
   justify-content: center;
   align-items: center;
   white-space: pre;
   overflow: hidden;
-}
+}

src/ui/widgets/Label/label.tsx

@@ -45,8 +45,8 @@ export const LabelComponent = (
   };
   const style: CSSProperties = commonCss(editedProps);
   const {
-    textAlign = "center",
-    textAlignV = "center",
+    textAlign = "left",
+    textAlignV = "top",
     text = "",
     rotationAngle,
     wrapWords

src/ui/widgets/Readback/readback.module.css

@@ -5,11 +5,11 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   background-color: #383838;
-  color: #00bb00;
+  color: #000000;
   font: 14px helvetica, sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
-}
+}

src/ui/widgets/Readback/readback.tsx

@@ -56,8 +56,8 @@ export const ReadbackComponent = (
     alarmSensitive = true,
     transparent = false,
     text = "######",
-    textAlign = "center",
-    textAlignV = "center",
+    textAlign = "left",
+    textAlignV = "top",
     showUnits = false,
     precisionFromPv = false,
     rotationAngle,

src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`<Symbol /> matches snapshot 1`] = `
     >
       <div
         class="Label Label"
-        style="background-color: transparent; cursor: default; justify-content: center; align-items: center;"
+        style="background-color: transparent; cursor: default; justify-content: flex-start; align-items: flex-start;"
       >
         <span>
            Fake value