@flozy/editor 4.0.2 → 4.0.4

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

@@ -0,0 +1,251 @@
+import { Transforms, Node } from "slate";
+import { ReactEditor } from "slate-react";
+import { getNearestItem } from "./calculateDropItem";
+const GUIDE_LINE_THRESHOLD = 5;
+const GUIDE_LINE_OVERLAP_THRESHOLD = 50;
+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;
+  }
+};
+export function triggerClick(editor, path = []) {
+  try {
+    const triggerNode = Node.get(editor, path);
+    const triggerNodeDOM = ReactEditor.toDOMNode(editor, triggerNode);
+    triggerNodeDOM?.closest(".freegrid-item")?.click();
+  } catch (err) {
+    console.log(err);
+  }
+}
+export function updatePositions(props, closestClass) {
+  try {
+    const {
+      editor,
+      path,
+      offsetY,
+      dragOver,
+      x,
+      y,
+      diffX,
+      parentPath
+    } = props;
+    const posY = y - offsetY;
+    const posX = parseInt(x - window.innerWidth / 2 + 490 - diffX);
+    let addToSectionDOMRect = null;
+    let newPath = [];
+    let toSectionNode = null;
+    const needMove = dragOver !== parentPath;
+    const moveTo = dragOver.split("|").map(m => parseInt(m));
+    const from = parentPath.split("|").map(m => parseInt(m));
+    newPath = moveTo;
+    toSectionNode = Node.get(editor, newPath);
+    const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
+    addToSectionDOMRect = addToSectionDOM?.getBoundingClientRect();
+
+    // update top and left properties
+    const newProperties = {};
+    newProperties.left = posX;
+    newProperties.marginTop = posY > addToSectionDOMRect.top ? posY - addToSectionDOMRect.top : addToSectionDOMRect.top - posY;
+    Transforms.setNodes(editor, newProperties, {
+      at: path
+    });
+    const returnData = {};
+    if (needMove) {
+      const isEmpty = toSectionNode?.children[0]?.type === undefined;
+      if (!isEmpty) {
+        newPath = [...newPath, toSectionNode?.children?.length];
+      }
+      newPath = newPath.map(m => parseInt(m));
+      const rPath = handleMoveNode(editor, path, newPath, {
+        isEmpty
+      });
+      // to update path index need to re-render items in parent sections
+      Transforms.setNodes(editor, {
+        updated_at: new Date().getTime
+      }, {
+        at: parentPath.split("|").map(m => parseInt(m))
+      });
+      returnData.updated_at = rPath;
+    }
+    returnData.updated_at = path;
+    if (needMove) {
+      getNearestItem(editor, moveTo, {
+        currentItem: path
+      });
+    } else {
+      getNearestItem(editor, from, {
+        currentItem: path
+      });
+    }
+    return returnData;
+  } catch (err) {
+    console.log(err);
+  }
+}
+const isOverLapLine = ({
+  x,
+  y
+}, lines) => {
+  return lines.find(f => Math.abs(f.x - x) <= GUIDE_LINE_OVERLAP_THRESHOLD || Math.abs(f.y - y) <= GUIDE_LINE_OVERLAP_THRESHOLD);
+};
+export function getClosestDraggable(x, y, className, activeClassName) {
+  const draggables = document.querySelectorAll(className);
+  const activeDragEle = document.querySelectorAll(activeClassName)[0];
+  const {
+    left: aLeft,
+    top: aTop,
+    width: aWidth,
+    height: aHeight
+  } = activeDragEle?.getBoundingClientRect() || {};
+  let lines = [];
+  draggables.forEach(draggable => {
+    const {
+      left,
+      top,
+      width,
+      height
+    } = draggable.getBoundingClientRect();
+    let xVal = 0;
+    let yVal = 0;
+
+    // top match
+    xVal = x < left ? aLeft : left;
+    yVal = top;
+    if (Math.abs(top - aTop) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+      x: xVal,
+      y: yVal
+    }, lines)) {
+      lines.push({
+        y: top,
+        x: xVal,
+        width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
+        height: 1
+      });
+    }
+
+    // bottom match
+    xVal = x < left ? aLeft : left;
+    yVal = top + height;
+    if (Math.abs(top + height - (aTop + aHeight)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+      x: xVal,
+      y: yVal
+    }, lines)) {
+      lines.push({
+        y: yVal,
+        x: xVal,
+        width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
+        height: 1
+      });
+    }
+
+    // center match
+    xVal = x < left ? aLeft : left;
+    yVal = top + height / 2;
+    if (Math.abs(top + height / 2 - (aTop + aHeight / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+      x: xVal,
+      y: yVal
+    }, lines, "y")) {
+      lines.push({
+        y: yVal,
+        x: xVal,
+        width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
+        height: 1
+      });
+    }
+
+    // right match
+    xVal = left + width;
+    yVal = top < aTop ? top : aTop;
+    if ((Math.abs(left + width - aLeft) <= GUIDE_LINE_THRESHOLD || Math.abs(left - aLeft) <= GUIDE_LINE_THRESHOLD) && !isOverLapLine({
+      x: xVal,
+      y: yVal
+    }, lines)) {
+      lines.push({
+        y: yVal,
+        x: xVal,
+        width: 1,
+        height: Math.abs(aTop - top)
+      });
+    }
+
+    // left match
+    xVal = left;
+    yVal = top < aTop ? top : aTop;
+    if ((Math.abs(aLeft + aWidth - left) <= GUIDE_LINE_THRESHOLD || Math.abs(aLeft - left) <= GUIDE_LINE_THRESHOLD) && !isOverLapLine({
+      x: xVal,
+      y: yVal
+    }, lines)) {
+      lines.push({
+        y: yVal,
+        x: xVal,
+        width: 1,
+        height: Math.abs(aTop - top)
+      });
+    }
+
+    // middle match
+    xVal = left + width / 2;
+    yVal = top < aTop ? top : aTop;
+    if (Math.abs(aLeft + aWidth / 2 - (left + width / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
+      x: xVal,
+      y: yVal
+    }, lines)) {
+      lines.push({
+        y: yVal,
+        x: xVal,
+        width: 1,
+        height: Math.abs(aTop - top)
+      });
+    }
+  });
+  return lines;
+}
+export function isDragOver(rect, mousePosition) {
+  const {
+    x,
+    y
+  } = mousePosition;
+  if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+    return true;
+  }
+  return false;
+}
+export function getParentSectionPath(props, closestClass) {
+  try {
+    const {
+      ref
+    } = props;
+    const parentDom = ref?.closest(closestClass);
+    return parentDom?.dataset?.path;
+  } catch (err) {
+    console.log(err);
+  }
+}

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

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from "react";
+import { Box } from "@mui/material";
+import useVirtualElementStyles from "./styles";
+import updateAutoProps from "./updateAutoProps";
+import { calculateGridArea } from "../Utils/gridDropItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ROOT_ITEM_CLASS = ".freegrid-item.path-3";
+const VirtualElement = props => {
+  const classes = useVirtualElementStyles();
+  const {
+    editor,
+    path,
+    parentEle,
+    updated_at
+  } = props;
+  const cloneNode = parentEle?.cloneNode(true);
+  const virtualRef = useRef();
+  useEffect(() => {
+    if (virtualRef?.current) {
+      setTimeout(() => {
+        calculateProps();
+      }, 0);
+    }
+  }, [updated_at, virtualRef?.current]);
+  const calculateProps = () => {
+    const rect = virtualRef?.current?.getBoundingClientRect();
+    const sectionProps = {
+      path,
+      props: {
+        height: rect.height
+      }
+    };
+    const itemsData = [];
+    const items = virtualRef?.current?.querySelectorAll(ROOT_ITEM_CLASS);
+    let sectionHeight = 0;
+    for (let i = 0; i < items.length; i++) {
+      const itemRect = items[i]?.getBoundingClientRect();
+      const y = Math.abs(rect.top - itemRect?.top);
+      itemsData.push({
+        path: items[i]?.dataset.path,
+        props: {
+          top: y,
+          left: 24,
+          marginTop: 12,
+          width: itemRect?.width,
+          height: itemRect?.height,
+          gridArea: calculateGridArea(y)
+        }
+      });
+      sectionHeight += itemRect?.height;
+    }
+    if (sectionHeight > sectionProps?.props?.height) {
+      sectionProps.props.height = sectionHeight;
+    }
+    const allData = [sectionProps, itemsData]?.flat();
+    // it should trigger by auto alignment or on clicking mobile view change
+    updateAutoProps(editor, allData, "xs");
+  };
+  const getItems = () => {
+    const items = cloneNode?.querySelectorAll(ROOT_ITEM_CLASS) || [];
+    let itemsHTML = "";
+    for (let i = 0; i < items?.length; i++) {
+      items[i].classList.add("exclude-virtual");
+      itemsHTML += items[i].outerHTML;
+    }
+    return itemsHTML;
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    className: "mobile-virtual-mode",
+    ref: virtualRef,
+    sx: classes.root,
+    dangerouslySetInnerHTML: {
+      __html: getItems()
+    }
+  });
+};
+export default VirtualElement;

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

@@ -0,0 +1,27 @@
+const useVirtualElementStyles = () => ({
+  root: {
+    width: "320px",
+    position: "fixed",
+    backgroundColor: "red",
+    height: "auto",
+    overflow: "visible",
+    pointerEvents: "none",
+    opacity: 0,
+    right: 0,
+    top: 0,
+    "& .freegrid-item": {
+      gridArea: "none !important",
+      width: "calc(100% - 48px) !important",
+      height: "auto !important",
+      left: "24px !important",
+      marginTop: "24px !important",
+      "& .debug-info, & .editor-blocker": {
+        display: "none"
+      },
+      "& .embed": {
+        minHeight: "300px"
+      }
+    }
+  }
+});
+export default useVirtualElementStyles;

package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js

@@ -0,0 +1,28 @@
+import { Node, Transforms } from "slate";
+const updateAutoProps = (editor, datas = [], breakpoint = "") => {
+  try {
+    for (let i = 0; i < datas.length; i++) {
+      const {
+        path,
+        props
+      } = datas[i] || {};
+      const int_path = path.split("|").map(m => parseInt(m));
+      const updatedProps = Object.keys(props).reduce((a, b) => {
+        const key = breakpoint ? `${b}_${breakpoint}` : b;
+        a[key] = props[b];
+        return a;
+      }, {});
+      const oldProps = Node.get(editor, int_path);
+      if (!oldProps?.xs_updatedOn) {
+        Transforms.setNodes(editor, {
+          ...updatedProps
+        }, {
+          at: int_path
+        });
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+export default updateAutoProps;