@flozy/editor 4.0.3 → 4.0.4

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,20 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SizeHandle = ({
+  style,
+  className
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    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,67 @@
+import CornerHandle from "./CornerHandle";
+import SizeHandle from "./SizeHandle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Handles = ({
+  type
+}) => {
+  return {
+    top: /*#__PURE__*/_jsx(SizeHandle, {
+      style: {
+        left: 0,
+        right: 0
+      }
+    }),
+    bottom: /*#__PURE__*/_jsx(SizeHandle, {
+      className: `bottom-handle ${type}`,
+      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
+    };
+  }
+}

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

@@ -0,0 +1,181 @@
+import { Transforms, Node, Path } from "slate";
+import { ReactEditor } from "slate-react";
+export const ROW_HEIGHT = 50;
+const MARGIN_OF = {
+  xs: 160,
+  lg: 490
+};
+
+/**
+ * This method will update the grid template rows of parent section based on height
+ * @param {*} path
+ */
+export function updateRows() {}
+
+/**
+ * This method will update the grid template columns of parent section based on height
+ * @param {*} path
+ */
+export function updateCols() {}
+const handleMoveNode = (editor, path, newPath, {
+  isEmpty
+}) => {
+  try {
+    const replaceNode = Node.get(editor, path);
+    if (isEmpty) {
+      const toPath = [...newPath, 0];
+      Transforms.insertNodes(editor, [{
+        ...replaceNode
+      }], {
+        at: toPath
+      });
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+      return toPath;
+    } else {
+      Transforms.insertNodes(editor, [{
+        ...replaceNode
+      }], {
+        at: newPath
+      });
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+      return newPath;
+    }
+  } catch (err) {
+    console.log(err);
+    console.log("Drop Node error");
+    return null;
+  }
+};
+
+/**
+ * This method will update prop in child node so it will re-render and update the path
+ * @param {*} path - contains the parent section path
+ */
+const reRenderChildNodes = (editor, path) => {
+  try {
+    const sectionNode = Node.get(editor, path);
+    // parent node
+    Transforms.setNodes(editor, {
+      updated_at: new Date().getTime()
+    }, {
+      at: path
+    });
+    sectionNode?.children?.forEach((item, itemIndex) => {
+      Transforms.setNodes(editor, {
+        updated_at: new Date().getTime()
+      }, {
+        at: [...path, itemIndex]
+      });
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+function isContainerElement(editor, moveTopath, props) {
+  try {
+    const dragItemPath = props.path;
+    const dragItem = Node.get(editor, dragItemPath);
+    let parentNode = null;
+    // if freegrid item
+    if (dragItem?.type === "freegridItem" || dragItem?.type === "freegridBox") {
+      // get parent node
+      parentNode = Node.get(editor, Path.parent(dragItemPath));
+    }
+    const moveToNode = Node.get(editor, moveTopath);
+    console.log(parentNode, moveToNode);
+    if (moveToNode.type === "freegridBox") {
+      if (parentNode.type === "freegridBox") {
+        return props.calX;
+      } else {
+        return props.calX - moveToNode?.left;
+      }
+    } else if (moveToNode.type === "freegrid") {
+      if (parentNode.type === "freegridBox") {
+        console.log(props.x);
+        return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
+      } else {
+        return props.calX;
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+export function onDropItem(props, parentClass) {
+  try {
+    const {
+      editor,
+      startPosition,
+      endPosition,
+      dragOver,
+      parentPath,
+      path,
+      diffX,
+      x: cx,
+      breakpoint
+      // calX,
+    } = props;
+    const needMove = dragOver !== parentPath;
+    const moveTo = dragOver.split("|").map(m => parseInt(m));
+    const from = parentPath.split("|").map(m => parseInt(m));
+    let newPath = [];
+    newPath = moveTo;
+    const cCalx = isContainerElement(editor, moveTo, props);
+    const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
+    const toSectionNode = Node.get(editor, newPath);
+    const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
+    const rect = addToSectionDOM.getBoundingClientRect();
+    const y = endPosition.y - startPosition.diffY - rect.top;
+
+    // Calculate grid position
+    const row = Math.floor(y / ROW_HEIGHT) + 1;
+
+    // to calculate difference inside the grid
+    const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
+
+    // Update grid area
+    const gridArea = `${row} / 1 / ${row + 1} / 2`;
+    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
+    console.log(breakpoint, path);
+    Transforms.setNodes(editor, {
+      [`gridArea${appenBp}`]: gridArea,
+      [`left${appenBp}`]: cCalx,
+      [`marginTop${appenBp}`]: marginTop,
+      // to avoid auto position / resize of the element
+      [`${breakpoint}_updatedOn`]: new Date().getTime()
+    }, {
+      at: path
+    });
+    reRenderChildNodes(editor, from);
+
+    // move the node if section parent changed
+    if (needMove) {
+      // move the node
+      const isEmpty = toSectionNode?.children[0]?.type === undefined;
+      if (!isEmpty) {
+        newPath = [...newPath, toSectionNode?.children?.length];
+      }
+      const rPath = handleMoveNode(editor, path, newPath, {
+        isEmpty
+      });
+      reRenderChildNodes(editor, moveTo);
+      return {
+        updated_at: rPath
+      };
+    } else {
+      return {
+        updated_at: path
+      };
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+export function calculateGridArea(y) {
+  const row = Math.floor(y / ROW_HEIGHT) + 1;
+  return `${row} / 1 / ${row + 1} / 2`;
+}