#280 added Posn and Size for the rest of the classes

Dyalog · Nov 20, 2024 · 09998be · 09998be
1 parent 682c98a
commit 09998be
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 17 deletions.
diff --git a/src/components/Dropdown/index.jsx b/src/components/Dropdown/index.jsx
@@ -4,6 +4,7 @@ import { useAppData } from '../../hooks';
 
 const Dropdown = ({ title, data }) => {
   const { socket } = useAppData();
+  const style = setStyle(data.Properties)
 
   useEffect(() => {
     const handleShortcut = (event) => {
@@ -39,7 +40,7 @@ const Dropdown = ({ title, data }) => {
   };
 
   return (
-    <div style={{ fontSize: '12px', marginLeft: '7px', cursor: 'pointer' }} className='menu-item'>
+    <div style={{ fontSize: '12px', marginLeft: '7px', cursor: 'pointer', ...style, }} className='menu-item'>
       {title}
       <div className='dropdown'>
         {Object.keys(data).map((key) => (

diff --git a/src/components/Image/index.jsx b/src/components/Image/index.jsx
@@ -1,5 +1,5 @@
 import { useAppData } from '../../hooks';
-import { handleMouseDoubleClick, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleMouseWheel, parseFlexStyles, renderImage } from '../../utils';
+import { handleMouseDoubleClick, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleMouseWheel, parseFlexStyles, renderImage, setStyle } from '../../utils';
 
 const Image = ({ data }) => {
   const { findDesiredData, socket } = useAppData();
@@ -8,6 +8,7 @@ const Image = ({ data }) => {
 
   const pointsArray = Points && Points[0].map((y, i) => [Points[1][i], y]);
   const parentSize = JSON.parse(localStorage.getItem('formDimension'));
+  const style = setStyle(data.Properties)
 
   return (
     <div
@@ -17,6 +18,7 @@ const Image = ({ data }) => {
         top: 0,
         left: 0,
         display: Visible == 0 ? 'none' : 'block',
+        ...style,
         ...customStyles
       }}
       onMouseDown={(e) => {

diff --git a/src/components/Link/index.jsx b/src/components/Link/index.jsx
@@ -1,10 +1,17 @@
+import { setStyle } from "../../utils";
+
 const Link = ({data}) => {
+    const style = setStyle(data.Properties)
     return (
         <div>
             <a id={data.Properties.ID}
                 href={data.Properties.Href}
                 target={data.Properties?.Target || '_blank'} // Default to new tab/window
                 download={data.Properties?.Download === 1}
+
+                style={{
+                    ...style
+                }}
             >
                 {data.Properties?.Label !== undefined ? data.Properties.Label : data.Properties.Href}
             </a>

diff --git a/src/components/Menu/index.jsx b/src/components/Menu/index.jsx
@@ -4,6 +4,7 @@ import './Menu.css';
 
 const Menu = ({ data }) => {
   const updatedData = excludeKeys(data);
+  const style = setStyle(data.Properties)
 
   const empty = isEmpty(updatedData);
 
@@ -17,6 +18,7 @@ const Menu = ({ data }) => {
           marginLeft: '7px',
           cursor: 'pointer',
           display: 'inline-block',
+          ...style,
         }}
         className='menu-item'
       >

diff --git a/src/components/MenuBar.jsx b/src/components/MenuBar.jsx
@@ -1,15 +1,17 @@
-import { excludeKeys, parseFlexStyles } from '../utils';
+import { excludeKeys, parseFlexStyles, setStyle } from '../utils';
 import SelectComponent from './SelectComponent';
 
 const MenuBar = ({ data }) => {
   const updatedData = excludeKeys(data);
   const { Visible, CSS } = data?.Properties;
   const customStyles = parseFlexStyles(CSS)
+  const style = setStyle(data.Properties)
 
   return (
     <div
       style={{
         display: Visible == 0 ? 'none' : 'flex',
+        ...style,
         ...customStyles,
       }}
 

diff --git a/src/components/Polygon/index.jsx b/src/components/Polygon/index.jsx
@@ -1,18 +1,19 @@
 import { useAppData } from "../../hooks";
-import { handleMouseDoubleClick, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleMouseWheel, parseFlexStyles, rgbColor } from "../../utils";
+import { handleMouseDoubleClick, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleMouseWheel, parseFlexStyles, rgbColor, setStyle } from "../../utils";
 
 const Poly = ({ data }) => {
   const { FCol, FillCol, LWidth, Points, FStyle, Visible, Event, CSS } = data?.Properties;
   const { socket } = useAppData();
   const customStyles = parseFlexStyles(CSS)
+  const style = setStyle(data.Properties)
 
   const parentSize = JSON.parse(localStorage.getItem("formDimension"));
   const hasFCol = data?.Properties.hasOwnProperty("FCol");
 
   return (
     <div
       id={data?.ID}
-      style={{ position: "absolute", display: Visible == 0 ? "none" : "block" ,...customStyles}}
+      style={{ position: "absolute", display: Visible == 0 ? "none" : "block" ,...style,...customStyles}}
       onMouseDown={(e) => {
         handleMouseDown(e, socket, Event,data?.ID);
       }}

diff --git a/src/components/Ribbon/RibbonButton.jsx b/src/components/Ribbon/RibbonButton.jsx
@@ -2,7 +2,7 @@ import * as Icons from "./RibbonIcons";
 import { Row, Col } from "reactstrap";
 import { useAppData } from "../../hooks";
 import { MdOutlineQuestionMark } from "react-icons/md";
-import { getCurrentUrl, parseFlexStyles } from "../../utils";
+import { getCurrentUrl, parseFlexStyles, setStyle } from "../../utils";
 
 const CustomRibbonButton = ({ data }) => {
   const ImageList = JSON.parse(localStorage.getItem("ImageList"));
@@ -11,6 +11,7 @@ const CustomRibbonButton = ({ data }) => {
 
   const { Icon, Caption, Event, ImageIndex, CSS } = data?.Properties;
   const customStyles = parseFlexStyles(CSS)
+  const style = setStyle(data.Properties)
 
   const getImageFromData = (data) => {
     if (data.Properties && data?.Properties.ImageListObj) {
@@ -61,7 +62,7 @@ const CustomRibbonButton = ({ data }) => {
           id={data?.ID}
           className="d-flex align-items-center flex-column justify-content-center"
           onClick={handleButtonEvent}
-          style={{ cursor: "pointer" ,   ...customStyles}}
+          style={{ cursor: "pointer" ,...style,   ...customStyles}}
         >
           {ImageData ? (
             <img

diff --git a/src/components/Ribbon/RibbonButtonGroup.jsx b/src/components/Ribbon/RibbonButtonGroup.jsx
@@ -1,7 +1,7 @@
 import * as AppIcons from "./RibbonIcons";
 import { Col } from "reactstrap";
 import { useAppData } from "../../hooks";
-import { getCurrentUrl, getObjectById, parseFlexStyles } from "../../utils";
+import { getCurrentUrl, getObjectById, parseFlexStyles, setStyle } from "../../utils";
 import { MdOutlineQuestionMark } from "react-icons/md";
 
 const CustomRibbonButtonGroup = ({ data }) => {
@@ -12,6 +12,7 @@ const CustomRibbonButtonGroup = ({ data }) => {
   const { Captions, Icons, Event, ImageIndex, ImageListObj, CSS } = data?.Properties;
 
   const customStyles = parseFlexStyles(CSS)
+  const style = setStyle(data.Properties)
 
   const colSize = Captions?.length == 4 ? 6 : 12;
 
@@ -119,7 +120,7 @@ const CustomRibbonButtonGroup = ({ data }) => {
             id={`${data?.ID}-${i}`}
             md={colSize}
             className="d-flex align-items-center justify-content-left gap-1"
-            style={{ cursor: "pointer" ,   ...customStyles}}
+            style={{ cursor: "pointer" ,...style,   ...customStyles}}
             onClick={() => handleButtonEvent(i + 1)}
           >
             {result && result?.imgUrl ? (

diff --git a/src/components/Ribbon/RibbonGroup.jsx b/src/components/Ribbon/RibbonGroup.jsx
@@ -1,4 +1,4 @@
-import { excludeKeys, parseFlexStyles, rgbColor } from '../../utils';
+import { excludeKeys, parseFlexStyles, rgbColor, setStyle } from '../../utils';
 import { RibbonGroup } from 'react-bootstrap-ribbon';
 import SelectComponent from '../SelectComponent';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -8,6 +8,7 @@ const CustomRibbonGroup = ({ data }) => {
   const updatedData = excludeKeys(data);
   const { Size, Title, BorderCol, CSS } = data?.Properties;
   const customStyle = parseFlexStyles(CSS)
+  const style = setStyle(data.Properties)
 
   const size = Size || 1;
 
@@ -20,6 +21,7 @@ const CustomRibbonGroup = ({ data }) => {
           position: 'relative',
           height: '100%',
           alignItems: 'center',
+          ...style,
           ...customStyle
         }}
         className='row'

diff --git a/src/components/Splitter/HorizontalSplitter.jsx b/src/components/Splitter/HorizontalSplitter.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import { useAppData, useResizeObserver } from '../../hooks';
-import { extractStringUntilLastPeriod, parseFlexStyles } from '../../utils';
+import { extractStringUntilLastPeriod, parseFlexStyles, setStyle } from '../../utils';
 
 const HorizontalSplitter = ({ data }) => {
   const { Size: SubformSize, Posn: SubFormPosn } = JSON.parse(
@@ -9,6 +9,7 @@ const HorizontalSplitter = ({ data }) => {
 
 
   const { Posn, SplitObj1, SplitObj2, Event, Size, CSS } = data?.Properties;
+  const style = setStyle(data.Properties)
 
   const customStyles = parseFlexStyles(CSS)
 
@@ -191,6 +192,7 @@ const HorizontalSplitter = ({ data }) => {
     position: 'absolute',
     top: position?.top,
     left: 0,
+    ...style,
     ...customStyles
   };
 

diff --git a/src/components/Splitter/VerticalSplitter.jsx b/src/components/Splitter/VerticalSplitter.jsx
@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useAppData, useResizeObserver } from '../../hooks';
-import { extractStringUntilLastPeriod, parseFlexStyles } from '../../utils';
+import { extractStringUntilLastPeriod, parseFlexStyles, setStyle } from '../../utils';
 
 const VerticalSplitter = ({ data }) => {
   const { Size: SubformSize } = JSON.parse(
     localStorage.getItem(extractStringUntilLastPeriod(data?.ID))
   );
 
   const { Posn, SplitObj1, SplitObj2, Event,CSS } = data?.Properties;
+  const style = setStyle(data.Properties)
   const customStyles = parseFlexStyles(CSS)
   const [position, setPosition] = useState({ left: Posn && Posn[1] });
   const [isResizing, setResizing] = useState(false);
@@ -82,6 +83,7 @@ const VerticalSplitter = ({ data }) => {
     position: 'absolute',
     top: Posn && Posn[0],
     left: position?.left,
+    ...style,
     ...customStyles
   };
 

diff --git a/src/components/TabButton/index.jsx b/src/components/TabButton/index.jsx
@@ -1,12 +1,13 @@
 import { useAppData } from '../../hooks';
-import { handleMouseDoubleClick, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleMouseWheel, parseFlexStyles, rgbColor } from '../../utils';
+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 { Caption, Event , CSS} = data?.Properties;
 
   const emitEvent = Event && Event[0];
   const customStyles = parseFlexStyles(CSS)
+  const style = setStyle(data.Properties)
 
 
   return (
@@ -51,6 +52,7 @@ const TabButton = ({ data, handleTabClick, activeTab, bgColor, fontColor, active
         borderBottom: activeTab == data?.ID ? '0px' : '1px solid  #DFDFDF',
         color: !fontColor ? 'black' : rgbColor(fontColor),
         fontWeight: 600,
+        ...style,
         ...customStyles
       }}
       onClick={() => {

diff --git a/src/components/Upload/index.jsx b/src/components/Upload/index.jsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 const Upload = ({ data }) => {
 
+  const style = setStyle(data.Properties)
   useEffect(() => {
     const fileInput = document.getElementById(data.ID);
     if (fileInput) {
@@ -12,6 +13,9 @@ const Upload = ({ data }) => {
   return (
     <div>
       <input
+        style={{
+          ...style
+        }}
         id={data.ID}
         type="file"
       />

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -230,10 +230,8 @@ export const setStyle = (Properties, position = "absolute", Flex = 0) => {
       ? { position: "absolute" }
       : { position: "relative" }),
     // position: Properties?.Posn ? 'absolute' : 'relative',
-    height: Properties?.Size && Properties?.Size[0],
-    width: Properties?.Size && Properties?.Size[1],
-    top: Properties?.Posn && Properties?.Posn[0],
-    left: Properties?.Posn && Properties?.Posn[1],
+    ...(Properties.Size && { height: Properties?.Size && Properties?.Size[0], width: Properties?.Size && Properties?.Size[1] }),
+    ...(Properties.Posn && { top: Properties?.Posn && Properties?.Posn[0], left: Properties?.Posn && Properties?.Posn[1] }),
   };
 };