Dyalog#308 height and width fixes

mqasim23 · Dec 23, 2024 · 4ed3b5a · 4ed3b5a
1 parent 38f3ad4
commit 4ed3b5a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 62 deletions.
diff --git a/src/components/Ribbon/RibbonGroup.jsx b/src/components/Ribbon/RibbonGroup.jsx
@@ -1,24 +1,31 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useAppData } from '../../hooks';
-import { excludeKeys, parseFlexStyles, rgbColor } from '../../utils';
+import { containsRibbonButton, excludeKeys, parseFlexStyles, rgbColor } from '../../utils';
 import SelectComponent from '../SelectComponent';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-bootstrap-ribbon/dist/react-bootstrap-ribbon.css';
 
+
 const CustomRibbonGroup = ({ data }) => {
   const { findCurrentData, fontScale, handleData } = useAppData();
   const updatedData = excludeKeys(data);
   const { Size, Title, BorderCol, CSS } = data?.Properties;
   const customStyle = parseFlexStyles(CSS);
   const font = findCurrentData(data.FontObj && data.FontObj);
-  const appDataMaxHeight = findCurrentData("app-data")?.Properties?.maxHeight || 50;
+  const appDataMaxHeight = findCurrentData("app-data")?.Properties?.maxHeight || 40;
+  const appData = findCurrentData("app-data")
   const fontProperties = font && font?.Properties;
 
   const [tempDivWidth, setTempDivWidth] = useState("auto");
   const [divHeight, setDivHeight] = useState("auto");
-  // const [maxHeight, setMaxHeight] = useState(100)
-  const maxHeight = useRef(appDataMaxHeight)
-  const heightPadding =35
+  const maxHeight = useRef(appDataMaxHeight);
+  const heightPadding = 20
+
+  useEffect(() => {
+    handleData({ ID: "app-data", Properties: { maxHeight: 50 } }, "WS");
+    maxHeight.current = 50;
+  }, [appData?.Properties?.tabID])
+
 
   useEffect(() => {
     const updateDimensions = () => {
@@ -27,32 +34,14 @@ const CustomRibbonGroup = ({ data }) => {
         const ribbonElement = document.getElementById(`ribbon-item-height-${data.id}`);
         const ribbonElements = document.querySelectorAll(`[id^="ribbon-item-height-${data.id}"]`);
         const ribbonElementsWithoutId = document.querySelectorAll(`[id^="ribbon-height"]`);
-        let maxRibbonHeight = 0;
         let sumRibbonDivWidth = 0;
         let sumRibbonDivHeight = 0;
-        // let allTimeMaxHeight =0
-// console.log({maxRibbonHeight})
+
         ribbonElements.forEach((element) => {
-          const elementHeight =((element.getBoundingClientRect().height) || 0 );
+          const elementHeight = ((element.getBoundingClientRect().height) || 0);
           maxHeight.current = Math.max(maxHeight.current, elementHeight);
-          // console.log("elementHeight",{elementHeight, maxHeight:maxHeight.current})
         });
-        // console.log("Before Update - maxHeight:", maxHeight.current);
-        // if (maxRibbonHeight > 0) {
-        //   maxHeight.current = Math.max(maxRibbonHeight, maxHeight.current);
-        // }
-
-        if(localStorage.getItem("maxHeight") && localStorage.getItem("maxHeight") < maxHeight.current){
-        localStorage.setItem("maxHeight", maxHeight.current+heightPadding);
-        // maxHeight.current =  maxHeight.current;
-        }
-        if(!localStorage.getItem("maxHeight")){
-          localStorage.setItem("maxHeight", maxHeight.current + heightPadding);
-        }
-        // console.log("After Update - maxHeight:", maxHeight.current, "appDataMaxHeight", appDataMaxHeight, "local",localStorage.getItem("maxHeight"));
-
-        // console.log("ribbon elements",{ribbonElements,ribbonElementsWithoutId, maxRibbonHeight, maxHeight:localStorage.getItem("maxHeight") })
-
+
         ribbonElements.forEach((element) => {
           const elementWidth = element.getBoundingClientRect().width || 0;
           sumRibbonDivWidth += elementWidth
@@ -66,9 +55,7 @@ const CustomRibbonGroup = ({ data }) => {
         const titleDivWidth = titleElement?.getBoundingClientRect().width || 0;
         const titleDivHeight = titleElement?.getBoundingClientRect().height || 0;
         const ribbonDivWidth = ribbonElement?.getBoundingClientRect().width || 0;
-        // const ribbonDivHeight = ribbonElement?.getBoundingClientRect().height || 0;
 
-        console.log("314",{maxRibbonHeight, titleDivHeight, })
 
         if (ribbonElements.length > 1) {
           setTempDivWidth(`${Math.max(tempWidth + ribbonDivWidth, titleDivWidth)}px`);
@@ -77,45 +64,20 @@ const CustomRibbonGroup = ({ data }) => {
 
         }
         ribbonElementsWithoutId.forEach((element) => {
-          element.style.height = `${localStorage.getItem("maxHeight")}px`;
+          element.style.height = `${maxHeight.current + titleDivHeight + heightPadding}px`;
         });
 
-
-        // setDivHeight(`${maxRibbonHeight}px`);
+          handleData({ ID: "app-data", Properties: { maxHeight: Math.max(maxHeight.current, appDataMaxHeight) } }, "WS");
+          maxHeight.current = Math.max(maxHeight.current, appDataMaxHeight)
       }, 500);
     };
 
     updateDimensions();
     window.addEventListener('resize', updateDimensions);
 
     return () => window.removeEventListener('resize', updateDimensions);
-  }, [data.id]);
-  const size = Size || 2;
-
-  // useEffect(() => {
-  //   const updateDimensions = () => {
-  //     setTimeout(() => {
-  //       const ribbonElements = document.querySelectorAll('[id^="ribbon-height"]');
-  //       let maxRibbonHeight = 0;
-
-  //       ribbonElements.forEach((element) => {
-  //         const elementHeight = element.getBoundingClientRect().height || 0;
-  //         maxRibbonHeight = Math.max(maxRibbonHeight, elementHeight);
-  //       });
-
-  //       ribbonElements.forEach((element) => {
-  //         element.style.height = `${maxRibbonHeight+5}px`;
-  //       });
-  //     }, 600);
-  //   };
-
-  //   updateDimensions();
-  //   window.addEventListener("resize", updateDimensions);
-
-  //   return () => window.removeEventListener("resize", updateDimensions);
-  // }, []);
-
-
+  }, [appData?.Properties?.tabID]);
+
   return (
     <div id={data?.ID} style={{ width: tempDivWidth }}>
       <div
@@ -126,6 +88,7 @@ const CustomRibbonGroup = ({ data }) => {
           height: divHeight,
           justifyContent: "space-around",
           paddingTop: "3px",
+          alignItems: containsRibbonButton(data) ? "flex-start" : "center",
           ...customStyle,
         }}
         id={`ribbon-height`}

diff --git a/src/components/Ribbon/RibbonItem.jsx b/src/components/Ribbon/RibbonItem.jsx
@@ -12,7 +12,7 @@ const CustomRibbonItem = ({ data }) => {
     <div
       data-alt-id={data?.ID}
       id={`ribbon-item-height-${data.id}`}
-      style={{ display: 'flex', justifyContent: 'center', ...customStyles, width:"max-content"}}
+      style={{ display: 'flex', justifyContent: 'center', ...customStyles, width:"max-content", height:"max-content"}}
     >
       {Object.keys(updatedData).map((key, index) => {
         return <SelectComponent key={index} data={{ ...updatedData[key], FontObj: data.FontObj, ImageList: data.ImageList }} />;

diff --git a/src/components/TabButton/index.jsx b/src/components/TabButton/index.jsx
@@ -2,7 +2,7 @@ import { useAppData } from '../../hooks';
 import { handleMouseDoubleClick, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleMouseWheel, parseFlexStyles, rgbColor, setStyle } from '../../utils';
 
 const TabButton = ({ data, handleTabClick, activeTab, bgColor, fontColor, activebgColor }) => {
-  const { socket } = useAppData();
+  const { socket, handleData } = useAppData();
   const { Caption, Event , CSS} = data?.Properties;
 
   const emitEvent = Event && Event[0];
@@ -65,7 +65,7 @@ const TabButton = ({ data, handleTabClick, activeTab, bgColor, fontColor, active
             },
           })
         );
-
+        
         localStorage.setItem(
           'lastEvent',
           JSON.stringify({
@@ -77,6 +77,7 @@ const TabButton = ({ data, handleTabClick, activeTab, bgColor, fontColor, active
           })
         );
 
+        handleData({ID:"app-data", Properties:{TabID: data?.ID}}, "WS");
         socket.send(
           JSON.stringify({
             Event: {
@@ -86,7 +87,6 @@ const TabButton = ({ data, handleTabClick, activeTab, bgColor, fontColor, active
             },
           })
         );
-
         handleTabClick(data.ID);
       }}
     >

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -622,3 +622,17 @@ export const getImageFromData = (data, ImageIndex) => {
   }
   return null;
 };
+
+
+
+export  function containsRibbonButton(data) {
+  if (typeof data !== "object" || data === null) {
+    return false; 
+  }
+
+  if (data.Type === "RibbonButton") {
+    return true;
+  }
+
+  return Object.values(data).some((value) => containsRibbonButton(value));
+}