Add relative path patching for symbols and correct sizing

Author: abigailalexander

src/ui/widgets/EmbeddedDisplay/opiParser.ts

@@ -826,11 +826,13 @@ 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);
-    })
+  if (widgetDescription["symbols"] && parentDir) {
+    widgetDescription["symbols"] = widgetDescription["symbols"].map(
+      (symbol: string) => {
+        if (symbol.startsWith("http")) return symbol;
+        return normalisePath(symbol, parentDir);
+      }
+    );
   }
 }
 

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 ? "contain" : stretchToFit ? "fill" : "contain",
           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 ? (