feat: enabled support for background image and color (#921)

* feat: enabled support for background image and color * fix: refactored and optimized the code for fetching bg image and color * fix: changed keys and refs * refactor: reduce code verbosity * feat: enabled support for bg color and image with expression url * fix: moved bg image and bg color resolvers into use-effect * fix: setBgColor wrapper moved ouside in use-effect * fix: changed color property names * fix: support for none color
qlik-oss · Oct 20, 2022 · b005bfb · b005bfb
1 parent 4954ac4
commit b005bfb
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 1 deletion.
diff --git a/apis/nucleus/src/components/Cell.jsx b/apis/nucleus/src/components/Cell.jsx
@@ -290,17 +290,40 @@ const Cell = forwardRef(
     const [selections] = useObjectSelections(app, model);
     const [hovering, setHover] = useState(false);
     const hoveringDebouncer = useRef({ enter: null, leave: null });
+    const [bgColor, setBgColor] = useState(undefined);
     const focusHandler = useRef({
       focusToolbarButton(last) {
         // eslint-disable-next-line react/no-this-in-sfc
         this.emit(last ? 'focus_toolbar_last' : 'focus_toolbar_first');
       },
     });
 
+    const resolveBgColor = () => {
+      const bgComp = layout && layout.components ? layout.components.find((comp) => comp.key === 'general') : null;
+
+      if (bgComp && bgComp.bgColor && bgComp.bgColor.useColorExpression) {
+        if (bgComp.bgColor.colorExpression) {
+          bgComp.bgColor.colorExpression = { color: bgComp.bgColor.colorExpression };
+        }
+        return bgComp.bgColor.colorExpression
+          ? halo.public.theme.getColorPickerColor(bgComp.bgColor.colorExpression)
+          : undefined;
+      }
+      if (bgComp && bgComp.bgColor && !bgComp.bgColor.useColorExpression)
+        return bgComp.bgColor.color && bgComp.bgColor.color.color !== 'none'
+          ? halo.public.theme.getColorPickerColor(bgComp.bgColor.color)
+          : undefined;
+      return undefined;
+    };
+
     useEffect(() => {
       eventmixin(focusHandler.current);
     }, []);
 
+    useEffect(() => {
+      setBgColor(resolveBgColor());
+    }, [layout, theme]);
+
     focusHandler.current.blurCallback = (resetFocus) => {
       halo.root.toggleFocusOfCells();
       if (resetFocus && contentNode) {
@@ -516,6 +539,7 @@ const Cell = forwardRef(
             xs
             style={{
               height: '100%',
+              backgroundColor: bgColor,
             }}
             ref={contentRef}
           >

diff --git a/apis/nucleus/src/components/Supernova.jsx b/apis/nucleus/src/components/Supernova.jsx
@@ -28,13 +28,29 @@ function Supernova({ sn, snOptions: options, snPlugins: plugins, layout, appLayo
   const [renderCnt, setRenderCnt] = useState(0);
   const [containerRef, containerRect, containerNode] = useRect();
   const [snNode, setSnNode] = useState(null);
+  const [bgImage, setBgImage] = useState(undefined);
+  const [bgComp, setBgComp] = useState(null);
   const snRef = useCallback((ref) => {
     if (!ref) {
       return;
     }
     setSnNode(ref);
   }, []);
 
+  const resolveBgImage = () => {
+    const bgImageDef = bgComp && bgComp.bgImage ? bgComp.bgImage : null;
+
+    if (bgImageDef && bgImageDef.mode === 'media') {
+      return bgImageDef.mediaUrl && bgImageDef.mediaUrl.qStaticContentUrl && bgImageDef.mediaUrl.qStaticContentUrl.qUrl
+        ? decodeURIComponent(bgImageDef.mediaUrl.qStaticContentUrl.qUrl)
+        : undefined;
+    }
+    if (bgImageDef && bgImageDef.mode === 'expression') {
+      return bgImageDef.expressionUrl ? decodeURIComponent(bgImageDef.expressionUrl) : undefined;
+    }
+    return undefined;
+  };
+
   // Mount / Unmount
   useEffect(() => {
     if (!snNode) return undefined;
@@ -47,6 +63,15 @@ function Supernova({ sn, snOptions: options, snPlugins: plugins, layout, appLayo
     };
   }, [snNode, component]);
 
+  // Resolve Background Image
+  useEffect(() => {
+    setBgComp(layout && layout.components ? layout.components.find((comp) => comp.key === 'general') : null);
+  }, [layout]);
+
+  useEffect(() => {
+    setBgImage(resolveBgImage(bgComp));
+  }, [bgComp]);
+
   // Render
   useEffect(() => {
     if (!isMounted || !snNode || !containerRect) {
@@ -119,11 +144,43 @@ function Supernova({ sn, snOptions: options, snPlugins: plugins, layout, appLayo
     keyboardNavigation,
   ]);
 
+  const imageSizingToCssProperty = {
+    originalSize: 'auto auto',
+    alwaysFit: 'contain',
+    fitWidth: '100% auto',
+    fitHeight: 'auto 100%',
+    stretchFit: '100% 100%',
+    alwaysFill: 'cover',
+  };
+
+  function getBackgroundPosition() {
+    let bkgImagePosition = 'center center';
+    if (bgComp && bgComp.bgImage && bgComp.bgImage.position) {
+      bkgImagePosition = bgComp.bgImage.position.replace('-', ' ');
+    }
+    return bkgImagePosition;
+  }
+
+  function getBackgroundSize() {
+    let bkgImageSize = imageSizingToCssProperty.originalSize;
+    if (bgComp && bgComp.bgImage && bgComp.bgImage.position) {
+      bkgImageSize = imageSizingToCssProperty[bgComp.bgImage.sizing];
+    }
+    return bkgImageSize;
+  }
+
   return (
     <div
       ref={containerRef}
       data-render-count={renderCnt}
-      style={{ position: 'relative', height: '100%' }}
+      style={{
+        position: 'relative',
+        height: '100%',
+        backgroundImage: `url(${bgImage})`,
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: getBackgroundSize(),
+        backgroundPosition: getBackgroundPosition(),
+      }}
       className={VizElement.className}
     >
       <div ref={snRef} style={{ position: 'absolute', width: '100%', height: '100%' }} />