Merge pull request #134 from DiamondLightSource/fix-symbol-images

Fix Symbol relative paths

Author: abigailalexander

src/ui/widgets/EmbeddedDisplay/opiParser.ts

@@ -751,7 +751,9 @@ export const OPI_COMPLEX_PARSERS: ComplexParserDict = {
   points: opiParsePoints
 };
 
-function opiPatchRules(widgetDescription: WidgetDescription): void {
+function opiPatchRules(
+  widgetDescription: WidgetDescription
+): WidgetDescription {
   /* Re-index simple parsers so we can find the correct one
      for the opi prop. */
   const opiPropParsers: ParserDict = {};
@@ -770,6 +772,7 @@ function opiPatchRules(widgetDescription: WidgetDescription): void {
       });
     }
   });
+  return widgetDescription;
 }
 
 function normalisePath(path: string, parentDir?: string): string {
@@ -784,7 +787,7 @@ function normalisePath(path: string, parentDir?: string): string {
 function opiPatchPaths(
   widgetDescription: WidgetDescription,
   parentDir?: string
-): void {
+): WidgetDescription {
   log.debug(`opiPatchPaths ${parentDir}`);
   // file: OpiFile type
   if (
@@ -824,9 +827,22 @@ function opiPatchPaths(
       }
     }
   }
+
+  // symbols: list of string file paths
+  if (widgetDescription["symbols"] && parentDir) {
+    widgetDescription["symbols"] = widgetDescription["symbols"].map(
+      (symbol: string) => {
+        if (symbol.startsWith("http")) return symbol;
+        return normalisePath(symbol, parentDir);
+      }
+    );
+  }
+  return widgetDescription;
 }
 
-function opiPatchActions(widgetDescription: WidgetDescription): void {
+function opiPatchActions(
+  widgetDescription: WidgetDescription
+): WidgetDescription {
   if (
     widgetDescription.type === "actionbutton" &&
     widgetDescription.text &&
@@ -849,6 +865,7 @@ function opiPatchActions(widgetDescription: WidgetDescription): void {
       };
     }
   }
+  return widgetDescription;
 }
 
 export const OPI_PATCHERS: PatchFunction[] = [

src/ui/widgets/EmbeddedDisplay/parser.ts

@@ -46,7 +46,10 @@ export type ComplexParserDict = {
   [key: string]: (value: any) => GenericProp | Promise<GenericProp>;
 };
 
-export type PatchFunction = (props: WidgetDescription, path?: string) => void;
+export type PatchFunction = (
+  props: WidgetDescription,
+  path?: string
+) => WidgetDescription;
 
 /* Take an object representing a widget and return our widget description. */
 export async function genericParser(
@@ -153,7 +156,7 @@ export async function parseWidget(
   filepath?: string
 ): Promise<WidgetDescription> {
   const targetWidget = getTargetWidget(props);
-  const widgetDescription = await genericParser(
+  let widgetDescription = await genericParser(
     props,
     targetWidget,
     simpleParsers,
@@ -162,7 +165,7 @@ export async function parseWidget(
   );
   // Execute patch functions.
   for (const patcher of patchFunctions) {
-    patcher(widgetDescription, filepath);
+    widgetDescription = patcher(widgetDescription, filepath);
   }
   /* Child widgets */
   const childWidgets = toArray(props[childrenName]);

src/ui/widgets/Image/image.tsx

@@ -27,7 +27,8 @@ const ImageProps = {
   onClick: FuncPropOpt,
   overflow: BoolPropOpt,
   backgroundColor: ColorPropOpt,
-  transparent: BoolPropOpt
+  transparent: BoolPropOpt,
+  preserveRatio: BoolPropOpt
 };
 
 export const ImageComponent = (
@@ -37,7 +38,8 @@ export const ImageComponent = (
     rotation = 0,
     flipHorizontal,
     flipVertical,
-    stretchToFit = false
+    stretchToFit = false,
+    preserveRatio = false
   } = props;
 
   const onClick = (event: React.MouseEvent<HTMLDivElement>): void => {
@@ -67,6 +69,10 @@ export const ImageComponent = (
     imageFileName = imageFileName + new Date().getTime();
   }
 
+  // In Phoebus, the aspect ratio of svgs is always maintained even when
+  // stretchToFit is true. Also accept preserveRatio property passed from
+  // Symbol widget
+  const ratio = imageFileName.includes(".svg") ? true : preserveRatio;
   return (
     <div style={style} onClick={onClick}>
       <img
@@ -77,7 +83,7 @@ export const ImageComponent = (
           transform: `rotate(${rotation}deg) scaleX(${
             flipHorizontal ? -1 : 1
           }) scaleY(${flipVertical ? -1 : 1})`,
-          objectFit: stretchToFit ? "fill" : "none",
+          objectFit: ratio || !stretchToFit ? "contain" : "fill",
           objectPosition: "top left"
         }}
       />

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

@@ -7,7 +7,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (using fallback symbol) 1`
   >
     <img
       src="https://cs-web-symbol.diamond.ac.uk/catalogue/default_symbol.png"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -20,7 +20,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (with index) 1`] = `
   >
     <img
       src="img 3.svg"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -33,7 +33,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (with rotation) 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
+      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -46,7 +46,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (without index) 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -59,7 +59,7 @@ exports[`<Symbol /> from .opi file > matches snapshot (with rotation) 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
+      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -72,7 +72,7 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
     />
   </div>
   <div

src/ui/widgets/Symbol/symbol.tsx

@@ -55,7 +55,8 @@ const SymbolProps = {
   arrayIndex: FloatPropOpt,
   enabled: BoolPropOpt,
   fallbackSymbol: StringPropOpt,
-  transparent: BoolPropOpt
+  transparent: BoolPropOpt,
+  preserveRatio: BoolPropOpt
 };
 
 export type SymbolComponentProps = InferWidgetProps<typeof SymbolProps> &
@@ -76,6 +77,7 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => {
     backgroundColor = "white",
     showBooleanLabel = false,
     enabled = true,
+    preserveRatio = true,
     pvData
   } = props;
   const { value } = getPvValueAndName(pvData);
@@ -158,7 +160,7 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => {
         transparent
         imageFile={imageFile}
         onClick={onClick}
-        stretchToFit={false}
+        stretchToFit={preserveRatio ? false : true}
         overflow={true}
       />
       {isBob ? (