@flozy/editor 3.8.8 → 3.8.9

package/dist/Editor/common/RnD/GuideLines/styles.js

@@ -0,0 +1,60 @@
+const useGuideLineStyle = ({
+  theme
+}) => ({
+  root: {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "2px",
+    height: "1px",
+    backgroundColor: "#FF70B4",
+    opacity: 1,
+    pointerEvents: "none",
+    zIndex: 1200
+  },
+  boundaryLine: {
+    "& .rnd-guideline-lv": {
+      position: "absolute",
+      left: "calc(50% - 490px)",
+      top: "0",
+      height: "100%",
+      width: "1px",
+      backgroundColor: "#FFF",
+      pointerEvents: "none",
+      [theme.breakpoints.between("xs", "md")]: {
+        left: "calc(50% - 160px)"
+      }
+    },
+    "& .rnd-guideline-rv": {
+      position: "absolute",
+      left: "calc(50% + 490px)",
+      top: "0",
+      height: "100%",
+      width: "1px",
+      backgroundColor: "#FFF",
+      pointerEvents: "none",
+      [theme.breakpoints.between("xs", "md")]: {
+        left: "calc(50% + 160px)"
+      }
+    },
+    "& .white-wrapper": {
+      overflowX: "hidden",
+      [theme.breakpoints.between("xs", "md")]: {
+        position: "absolute",
+        width: "calc(50% - 162px)",
+        height: "calc(100% - 2px)",
+        backgroundColor: "rgba(255,255,255,1)",
+        pointerEvents: "none",
+        top: 2,
+        "&.w_left": {
+          left: 2
+        },
+        "&.w_right": {
+          right: 2,
+          width: "calc(50% - 163px)"
+        }
+      }
+    }
+  }
+});
+export default useGuideLineStyle;

package/dist/Editor/common/RnD/OptionsPopup/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { Box, Paper, Popper, Typography, Tooltip, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import HelpIcon from "@mui/icons-material/Help";
+import useOptionsPopupStyle from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const OptionsPopup = props => {
+  const classes = useOptionsPopupStyle();
+  const {
+    title,
+    children,
+    open,
+    anchorEl,
+    placement,
+    handleClose
+  } = props;
+  return anchorEl ? /*#__PURE__*/_jsx(Popper, {
+    sx: classes.root,
+    open: open,
+    anchorEl: anchorEl,
+    placement: placement,
+    onClose: handleClose,
+    children: /*#__PURE__*/_jsxs(Paper, {
+      className: "papper-root",
+      children: [/*#__PURE__*/_jsxs(Typography, {
+        variant: "div",
+        className: "item-wrapper title",
+        children: [title, /*#__PURE__*/_jsxs(Box, {
+          component: "div",
+          children: [/*#__PURE__*/_jsx(Tooltip, {
+            title: "Help",
+            arrow: true,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              children: /*#__PURE__*/_jsx(HelpIcon, {})
+            })
+          }), /*#__PURE__*/_jsx(Tooltip, {
+            title: "Close",
+            arrow: true,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: handleClose,
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })
+          })]
+        })]
+      }), children]
+    })
+  }) : null;
+};
+export default OptionsPopup;

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -0,0 +1,36 @@
+const useOptionsPopupStyle = () => ({
+  root: {
+    zIndex: 1200,
+    background: "#FFF",
+    borderRadius: "5px",
+    overflow: "hidden",
+    boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+    "& .papper-root": {
+      borderTop: "8px solid #1976d2",
+      width: "270px",
+      boxShadow: "none"
+    },
+    "& .item-list-wrpr": {
+      paddingTop: "0px",
+      paddingBottom: "0px"
+    },
+    "& .item-wrapper": {
+      padding: "12px",
+      fontFamily: "sans-serif",
+      "&.title": {
+        display: "flex",
+        fontWeight: "bold",
+        justifyContent: "space-between",
+        alignItems: "center",
+        "& .MuiIconButton-root": {
+          padding: "4px",
+          "& svg": {
+            width: "16px",
+            height: "16px"
+          }
+        }
+      }
+    }
+  }
+});
+export default useOptionsPopupStyle;

package/dist/Editor/common/RnD/RnDCopy.js

@@ -0,0 +1,23 @@
+import Box from "@mui/material/Box";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const RnDCopy = props => {
+  const {
+    readOnly
+  } = props;
+  const {
+    selectedElement
+  } = useEditorContext();
+  useEffect(() => {
+    if (selectedElement?.path) {
+      window.selectedRnDElement = selectedElement;
+    }
+  }, [selectedElement?.path, selectedElement?.enable]);
+  return !readOnly ? /*#__PURE__*/_jsx(Box, {
+    sx: {
+      display: "none"
+    }
+  }) : null;
+};
+export default RnDCopy;

package/dist/Editor/common/RnD/ShadowElement.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Box, useTheme } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useShadowElementStyles = ({
+  theme,
+  style
+}) => ({
+  root: {
+    ...style,
+    position: "relative",
+    backgroundColor: "rgba(0,0,0,0)",
+    marginLeft: `calc((100% - 980px) * 0.5)`,
+    [theme.breakpoints.between("xs", "md")]: {
+      marginLeft: `calc((100% - 320px) * 0.5)`
+    }
+  }
+});
+const ShadowElement = props => {
+  const theme = useTheme();
+  const {
+    type,
+    enable,
+    style
+  } = props;
+  const classes = useShadowElementStyles({
+    theme,
+    style
+  });
+  return type === "child" && enable === 1 ? /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    sx: classes.root
+  }) : null;
+};
+export default ShadowElement;

package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js

@@ -0,0 +1,40 @@
+import { Box, IconButton, Tooltip } from "@mui/material";
+import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
+import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
+import useSwitchViewport from "./styles";
+import { useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SwitchViewport = props => {
+  const {
+    breakpoint,
+    onChange
+  } = props;
+  const classes = useSwitchViewport();
+  useEffect(() => {
+    console.log(breakpoint);
+  }, [breakpoint]);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: classes.root,
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Desktop View",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
+        onClick: () => {
+          onChange("");
+        },
+        children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Mobile View",
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: `${breakpoint === "xs" ? "active" : ""}`,
+        onClick: () => {
+          onChange("xs");
+        },
+        children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
+      })
+    })]
+  });
+};
+export default SwitchViewport;

package/dist/Editor/common/RnD/SwitchViewport/styles.js

@@ -0,0 +1,24 @@
+const useSwitchViewport = () => ({
+  root: {
+    position: "absolute",
+    right: 4,
+    top: 4,
+    margin: "auto",
+    padding: "4px",
+    zIndex: 100,
+    backgroundColor: "#FFF",
+    borderRadius: "12px",
+    display: "flex",
+    justifyContent: "center",
+    "& .MuiIconButton-root": {
+      padding: "4px",
+      "&.active": {
+        color: "#2563EB"
+      },
+      "& svg": {
+        height: "20px"
+      }
+    }
+  }
+});
+export default useSwitchViewport;

package/dist/Editor/common/RnD/Theme/ViewportStimulator.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { useTheme, ThemeProvider, createTheme } from "@mui/material";
+import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
+
+// Custom breakpoints functions
+import { jsx as _jsx } from "react/jsx-runtime";
+const customUp = (key, breakpoints) => {
+  const MOCK_BREAKPOINT = isStimulator();
+  if (key === "xs") {
+    // Simulate xs 'up' as being up from 0px (xs)
+    return "@media (min-width: 0px)";
+  }
+  if (MOCK_BREAKPOINT && key === "lg") {
+    return `@media (min-width: 10000px)`;
+  }
+  return `@media (min-width: ${breakpoints[key]}px)`;
+};
+const customDown = (key, breakpoints) => {
+  if (key === "md") {
+    // Simulate 'down' from md
+    return "@media (max-width: 960px)";
+  }
+  return `@media (max-width: ${breakpoints[key]}px)`;
+};
+const customBetween = (start, end, breakpoints) => {
+  // Custom logic for between, simulating xs for demonstration
+  const MOCK_BREAKPOINT = isStimulator();
+  if (MOCK_BREAKPOINT && start === "xs" && end === "md") {
+    return STIMULATOR_MOCK[MOCK_BREAKPOINT];
+  }
+  return `@media (min-width: ${breakpoints[start]}px) and (max-width: ${breakpoints[end]}px)`;
+};
+const customOnly = (key, breakpoints) => {
+  // Custom logic for between, simulating xs for demonstration
+  const MOCK_BREAKPOINT = isStimulator();
+  if (MOCK_BREAKPOINT && key === "xs") {
+    return STIMULATOR_MOCK[MOCK_BREAKPOINT];
+  }
+  return `@media (min-width: ${breakpoints[key]}px) and (max-width: ${breakpoints[key + 1]}px)`;
+};
+
+// Extend the existing theme with custom breakpoint functions
+const extendedTheme = prevTheme => createTheme({
+  ...prevTheme,
+  breakpoints: {
+    ...prevTheme.breakpoints,
+    up: key => customUp(key, prevTheme.breakpoints.values),
+    down: key => customDown(key, prevTheme.breakpoints.values),
+    between: (start, end) => customBetween(start, end, prevTheme.breakpoints.values),
+    only: key => customOnly(key, prevTheme.breakpoints.values)
+  }
+});
+const ViewportStimulator = ({
+  children
+}) => {
+  const theme = useTheme();
+  const viewportTheme = extendedTheme(theme);
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: viewportTheme,
+    children: children
+  });
+};
+export default ViewportStimulator;

package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CornerHandle = ({
+  style
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "8px",
+      height: "8px",
+      background: "#FFF",
+      border: "1px solid #2563EB",
+      position: "absolute",
+      left: "6px",
+      top: "6px",
+      ...style
+    }
+  });
+};
+export default CornerHandle;

package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BottomRightIcon = () => /*#__PURE__*/_jsx("svg", {
+  width: "20px",
+  height: "20px",
+  version: "1.1",
+  viewBox: "0 0 100 100",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m70.129 67.086l1.75-36.367c-0.035156-2.6523-2.9414-3.6523-4.8164-1.7773l-8.4531 8.4531-17.578-17.574c-2.3438-2.3438-5.7188-1.5625-8.0586 0.78125l-13.078 13.078c-2.3438 2.3438-2.4141 5.0117-0.074219 7.3516l17.574 17.574-8.4531 8.4531c-1.875 1.875-0.83594 4.8203 1.8164 4.8555l36.258-1.8594c1.6836 0.019531 3.1328-1.2812 3.1133-2.9688z"
+  })
+});
+export default BottomRightIcon;

package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SizeHandle = ({
+  style
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: "8px",
+      height: "8px",
+      background: "#FFF",
+      border: "1px solid #2563EB",
+      position: "absolute",
+      margin: "auto",
+      ...style
+    }
+  });
+};
+export default SizeHandle;

package/dist/Editor/common/RnD/TransformHandles/index.js

@@ -0,0 +1,62 @@
+import CornerHandle from "./CornerHandle";
+import SizeHandle from "./SizeHandle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Handles = {
+  top: /*#__PURE__*/_jsx(SizeHandle, {
+    style: {
+      left: 0,
+      right: 0
+    }
+  }),
+  bottom: /*#__PURE__*/_jsx(SizeHandle, {
+    style: {
+      left: 0,
+      right: 0,
+      bottom: 0
+    }
+  }),
+  right: /*#__PURE__*/_jsx(SizeHandle, {
+    style: {
+      top: 0,
+      right: "0px",
+      bottom: 0,
+      width: "8px",
+      height: "8px"
+    }
+  }),
+  left: /*#__PURE__*/_jsx(SizeHandle, {
+    style: {
+      top: 0,
+      left: "0px",
+      bottom: 0,
+      width: "8px",
+      height: "8px"
+    }
+  }),
+  topLeft: /*#__PURE__*/_jsx(CornerHandle, {
+    style: {
+      left: "6px",
+      top: "6px",
+      display: "none"
+    }
+  }),
+  topRight: /*#__PURE__*/_jsx(CornerHandle, {
+    style: {
+      right: "6px",
+      top: "6px"
+    }
+  }),
+  bottomLeft: /*#__PURE__*/_jsx(CornerHandle, {
+    style: {
+      left: "6px",
+      top: "6px"
+    }
+  }),
+  bottomRight: /*#__PURE__*/_jsx(CornerHandle, {
+    style: {
+      left: "6px",
+      top: "6px"
+    }
+  })
+};
+export default Handles;

package/dist/Editor/common/RnD/Utils/alignmentDetection.js

@@ -0,0 +1,26 @@
+function horizantalAlignment(rect1, rect2) {
+  const diff = Math.abs(rect2.top - rect1.bottom);
+  return {
+    horizantal: rect2.top < rect1.bottom,
+    hdiff: diff,
+    hpercent: diff / rect2.height * 100
+  };
+}
+function verticalAlignment(rect1, rect2) {
+  const diff = Math.abs(rect1.right - rect2.left);
+  return {
+    vertical: rect2.left > rect1.left && rect2.left < rect1.right,
+    vdiff: diff,
+    vpercent: diff / rect2.width * 100
+  };
+}
+export function alignmentDetection(rect1, rect2) {
+  try {
+    return {
+      ...horizantalAlignment(rect1, rect2),
+      ...verticalAlignment(rect1, rect2)
+    };
+  } catch (err) {
+    console.log(err);
+  }
+}

package/dist/Editor/common/RnD/Utils/calculateDropItem.js

@@ -0,0 +1,98 @@
+import { Transforms, Node } from "slate";
+import { ReactEditor } from "slate-react";
+import { alignmentDetection } from "./alignmentDetection";
+
+/**
+ * This method will return the list of items inside the give section
+ * @param {*} sectionPath - paresent section path to get items
+ */
+export function getItems(editor, sectionPath = []) {
+  try {
+    const parentNode = Node.get(editor, sectionPath);
+    let doms = parentNode?.children?.map((item, itemIndex) => {
+      const itemDom = ReactEditor.toDOMNode(editor, item)?.closest(".freegrid-item");
+      const {
+        left,
+        top,
+        width,
+        height,
+        right,
+        bottom
+      } = itemDom?.getBoundingClientRect();
+      return {
+        node: itemDom,
+        rect: {
+          left,
+          top,
+          width,
+          height,
+          right,
+          bottom
+        },
+        path: [...sectionPath, itemIndex],
+        item
+      };
+    });
+    // sort by top position
+    doms = doms.sort((a, b) => a.rect.top - b.rect.top);
+    return {
+      items: parentNode?.children,
+      doms
+    };
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+/**
+ * This method will get the nearest top element
+ * @param {*} editor
+ * @param {*} sectionPath
+ * @param {*} props
+ */
+export function getNearestItem(editor, sectionPath = [], props) {
+  try {
+    const {
+      items,
+      doms
+    } = getItems(editor, sectionPath);
+    console.log(items, doms);
+    for (let i = 0; i < doms.length; i++) {
+      const prev = doms[i - 1];
+      const current = doms[i];
+      if (i > 0) {
+        const res = alignmentDetection(prev.rect, current.rect);
+        console.log(res, current?.path);
+        const {
+          vertical,
+          horizantal,
+          hpercent
+        } = res;
+        if (!vertical && !horizantal) {
+          const row = i + 1;
+          Transforms.setNodes(editor, {
+            gridArea: `${i + 1} / 1 / ${row + 1} / 2`,
+            top: 0,
+            marginTop: 0
+          }, {
+            at: current?.path
+          });
+        } else if (horizantal && hpercent > 5) {
+          Transforms.setNodes(editor, {
+            gridArea: `${i - 1 || 1} / 1 / ${(i - 1 || 1) + 1} / 2`
+          }, {
+            at: current?.path
+          });
+        }
+      } else {
+        Transforms.setNodes(editor, {
+          gridArea: `1 / 1 / 2 / 2`
+        }, {
+          at: current?.path
+        });
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}

package/dist/Editor/common/RnD/Utils/collisionDetection.js

@@ -0,0 +1,52 @@
+function isColliding(rect1, rect2) {
+  return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
+}
+function getCollisionSides(rect1, rect2) {
+  const collisionSides = {
+    top: rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.left < rect2.right && rect1.right > rect2.left && rect1.top <= rect2.top,
+    bottom: rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.left < rect2.right && rect1.right > rect2.left && rect1.bottom >= rect2.bottom,
+    left: rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.left <= rect2.left && rect1.right > rect2.left,
+    right: rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.right >= rect2.right && rect1.left < rect2.right
+  };
+  return collisionSides;
+}
+function getCollisionDetails(rect1, rect2) {
+  if (!isColliding(rect1, rect2)) {
+    return null;
+  }
+  const overlapX = Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left);
+  const overlapY = Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top);
+  let collisionSide = "";
+  let penetrationDepth = Math.min(overlapX, overlapY); // Basic depth calculation
+
+  if (overlapX < overlapY) {
+    collisionSide = rect1.left < rect2.left ? "right" : "left";
+    penetrationDepth = overlapX;
+  } else {
+    collisionSide = rect1.top < rect2.top ? "bottom" : "top";
+    penetrationDepth = overlapY;
+  }
+  return {
+    collision: true,
+    side: collisionSide,
+    depth: penetrationDepth
+  };
+}
+export function detectCollisionAndSides(rect1, rect2) {
+  const isColliding = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
+  if (isColliding) {
+    const sides = getCollisionSides(rect1, rect2);
+    const collisionDetails = getCollisionDetails(rect1, rect2);
+    return {
+      isColliding,
+      sides,
+      collisionDetails
+    };
+  } else {
+    return {
+      isColliding,
+      sides: {},
+      collisionDetails: null
+    };
+  }
+}