@jotforminc/dnd-builder 3.1.0 → 3.2.0

package/lib/cjs/components/Builder/DraggableLayer.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var PropTypes = require('prop-types');
+var reactDnd = require('react-dnd');
+var DraggableItemLayer = require('../DraggableItem/DraggableItemLayer.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var DraggableLayer = function DraggableLayer(_ref) {
+  var _ref$pageRefs = _ref.pageRefs,
+      pageRefs = _ref$pageRefs === void 0 ? {} : _ref$pageRefs;
+  var collectedProps = reactDnd.useDragLayer(function (monitor) {
+    return {
+      currentOffset: monitor.getSourceClientOffset(),
+      initialOffset: monitor.getInitialSourceClientOffset(),
+      isDragging: monitor.isDragging(),
+      item: monitor.getItem(),
+      itemType: monitor.getItemType()
+    };
+  });
+
+  if (!collectedProps.currentOffset || !collectedProps.isDragging) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsxRuntime.jsx(DraggableItemLayer, {
+    collectedProps: collectedProps,
+    pageRefs: pageRefs
+  });
+};
+
+DraggableLayer.propTypes = {
+  pageRefs: PropTypes__default['default'].shape({})
+};
+
+module.exports = DraggableLayer;
+//# sourceMappingURL=DraggableLayer.js.map

package/lib/cjs/components/Builder/DraggableLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableLayer.js","sources":["../../../../src/components/Builder/DraggableLayer.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useDragLayer } from 'react-dnd';\nimport DraggableItemLayer from '../DraggableItem/DraggableItemLayer';\n\nconst DraggableLayer = ({\n  pageRefs = {},\n}) => {\n  const collectedProps = useDragLayer(monitor => ({\n    currentOffset: monitor.getSourceClientOffset(),\n    initialOffset: monitor.getInitialSourceClientOffset(),\n    isDragging: monitor.isDragging(),\n    item: monitor.getItem(),\n    itemType: monitor.getItemType(),\n  }));\n\n  if (!collectedProps.currentOffset || !collectedProps.isDragging) {\n    return null;\n  }\n\n  return (\n    <DraggableItemLayer\n      collectedProps={collectedProps}\n      pageRefs={pageRefs}\n    />\n  );\n};\n\nDraggableLayer.propTypes = {\n  pageRefs: PropTypes.shape({}),\n};\n\nexport default DraggableLayer;\n"],"names":["DraggableLayer","pageRefs","collectedProps","useDragLayer","monitor","currentOffset","getSourceClientOffset","initialOffset","getInitialSourceClientOffset","isDragging","item","getItem","itemType","getItemType","_jsx","propTypes","PropTypes","shape"],"mappings":";;;;;;;;;;;IAIMA,cAAc,GAAG,SAAjBA,cAAiB,OAEjB;AAAA,2BADJC,QACI;AAAA,MADJA,QACI,8BADO,EACP;AACJ,MAAMC,cAAc,GAAGC,qBAAY,CAAC,UAAAC,OAAO;AAAA,WAAK;AAC9CC,MAAAA,aAAa,EAAED,OAAO,CAACE,qBAAR,EAD+B;AAE9CC,MAAAA,aAAa,EAAEH,OAAO,CAACI,4BAAR,EAF+B;AAG9CC,MAAAA,UAAU,EAAEL,OAAO,CAACK,UAAR,EAHkC;AAI9CC,MAAAA,IAAI,EAAEN,OAAO,CAACO,OAAR,EAJwC;AAK9CC,MAAAA,QAAQ,EAAER,OAAO,CAACS,WAAR;AALoC,KAAL;AAAA,GAAR,CAAnC;;AAQA,MAAI,CAACX,cAAc,CAACG,aAAhB,IAAiC,CAACH,cAAc,CAACO,UAArD,EAAiE;AAC/D,WAAO,IAAP;AACD;;AAED,sBACEK,eAAC,kBAAD;AACE,IAAA,cAAc,EAAEZ,cADlB;AAEE,IAAA,QAAQ,EAAED;AAFZ,IADF;AAMD;;AAEDD,cAAc,CAACe,SAAf,GAA2B;AACzBd,EAAAA,QAAQ,EAAEe,6BAAS,CAACC,KAAV,CAAgB,EAAhB;AADe,CAA3B;;;;"}

package/lib/cjs/components/Builder/Element.js

@@ -61,8 +61,11 @@ var Element = function Element(_ref) {
   var onItemAdd = PropContext.usePropStore(function (state) {
     return state.onItemAdd;
   });
-  var setActiveElement = BuilderContext.useBuilderStore(function (state) {
-    return state.setActiveElement;
+  var resetActiveElements = BuilderContext.useBuilderStore(function (state) {
+    return state.resetActiveElements;
+  });
+  var setActiveElements = BuilderContext.useBuilderStore(function (state) {
+    return state.setActiveElements;
   });
   var setIsRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
     return state.setIsRightPanelOpen;
@@ -79,6 +82,7 @@ var Element = function Element(_ref) {
         };
       },
       item: function item() {
+        resetActiveElements();
         return _objectSpread({
           itemType: itemType,
           type: itemTypes.DROPPABLE_ITEM_TYPE
@@ -121,7 +125,7 @@ var Element = function Element(_ref) {
       top: top
     }));
     onAnEventTrigger('reportItemAdd', itemType);
-    setActiveElement(itemID);
+    setActiveElements(itemID, true);
     setIsRightPanelOpen(true);
   };
 

package/lib/cjs/components/Builder/Element.js.map

@@ -1 +1 @@
-{"version":3,"file":"Element.js","sources":["../../../../src/components/Builder/Element.js"],"sourcesContent":["import { useEffect, memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDrag } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { DROPPABLE_ITEM_TYPE } from '../../constants/itemTypes';\nimport {\n  getMostVisiblePage, getExactIconType, getAvailableCoordinate,\n} from '../../utils/functions';\nimport generateId from '../../utils/generateId';\nimport * as icons from '../../utils/icons';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst Element = ({\n  icon = null,\n  iconType = '',\n  itemType = '',\n  title = '',\n  ...additionalData\n}) => {\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onItemAdd = usePropStore(state => state.onItemAdd);\n  const setActiveElement = useBuilderStore(state => state.setActiveElement);\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const [{ isDragging }, drag, preview] = useDrag(() => ({\n    collect: monitor => ({\n      isDragging: monitor.isDragging(),\n    }),\n\n    item: () => ({\n      itemType,\n      type: DROPPABLE_ITEM_TYPE,\n      ...additionalData,\n    }),\n\n    type: DROPPABLE_ITEM_TYPE,\n  }), [itemType, additionalData]);\n\n  useEffect(() => {\n    preview(getEmptyImage(), { captureDraggingState: true });\n  }, [preview]);\n\n  const onElementClick = () => {\n    const itemID = generateId();\n    const page = getMostVisiblePage();\n    let left = 0;\n    let top = 0;\n    if (page) { // for test\n      [left, top] = getAvailableCoordinate(page, zoom);\n    }\n    onItemAdd({\n      ...acceptedItems[itemType].details,\n      ...additionalData,\n      id: itemID,\n      left,\n      pageID: page.id,\n      top,\n    });\n    onAnEventTrigger('reportItemAdd', itemType);\n    setActiveElement(itemID);\n    setIsRightPanelOpen(true);\n  };\n\n  const onElementOtherActions = () => {};\n\n  const exactIconType = getExactIconType(iconType);\n  const Icon = icons[exactIconType] ? icons[exactIconType] : icons.label;\n  return (\n    <>\n      <div\n        ref={drag}\n        className=\"toolItem d-flex a-center js-toolItem\"\n        onClick={onElementClick}\n        onKeyDown={onElementOtherActions}\n        style={{ cursor: isDragging ? 'grabbing' : 'pointer', opacity: isDragging ? 0.5 : 1 }}\n        title={title}\n      >\n        <span className=\"toolItem-icon d-flex j-center a-center\">\n          {icon ? icon : (\n            <Icon className={`jfReportSVG icon-question icon-${iconType}`} />\n          )}\n        </span>\n        <span className=\"js-toolItemName toolItem-name d-flex a-center\">\n          { title }\n        </span>\n      </div>\n    </>\n  );\n};\n\nElement.propTypes = {\n  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  iconType: PropTypes.string,\n  itemType: PropTypes.string,\n  title: PropTypes.string,\n};\n\nexport default memo(Element);\n"],"names":["Element","icon","iconType","itemType","title","additionalData","acceptedItems","usePropStore","state","onAnEventTrigger","onItemAdd","setActiveElement","useBuilderStore","setIsRightPanelOpen","zoom","useDrag","collect","monitor","isDragging","item","type","DROPPABLE_ITEM_TYPE","drag","preview","useEffect","getEmptyImage","captureDraggingState","onElementClick","itemID","generateId","page","getMostVisiblePage","left","top","getAvailableCoordinate","details","id","pageID","onElementOtherActions","exactIconType","getExactIconType","Icon","icons","_jsx","_jsxs","cursor","opacity","propTypes","PropTypes","oneOfType","element","func","string","memo"],"mappings":"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"}
+{"version":3,"file":"Element.js","sources":["../../../../src/components/Builder/Element.js"],"sourcesContent":["import { useEffect, memo } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDrag } from 'react-dnd';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { DROPPABLE_ITEM_TYPE } from '../../constants/itemTypes';\nimport {\n  getMostVisiblePage, getExactIconType, getAvailableCoordinate,\n} from '../../utils/functions';\nimport generateId from '../../utils/generateId';\nimport * as icons from '../../utils/icons';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst Element = ({\n  icon = null,\n  iconType = '',\n  itemType = '',\n  title = '',\n  ...additionalData\n}) => {\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onItemAdd = usePropStore(state => state.onItemAdd);\n  const resetActiveElements = useBuilderStore(state => state.resetActiveElements);\n  const setActiveElements = useBuilderStore(state => state.setActiveElements);\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const [{ isDragging }, drag, preview] = useDrag(() => ({\n    collect: monitor => ({\n      isDragging: monitor.isDragging(),\n    }),\n\n    item: () => {\n      resetActiveElements();\n      return {\n        itemType,\n        type: DROPPABLE_ITEM_TYPE,\n        ...additionalData,\n      };\n    },\n\n    type: DROPPABLE_ITEM_TYPE,\n  }), [itemType, additionalData]);\n\n  useEffect(() => {\n    preview(getEmptyImage(), { captureDraggingState: true });\n  }, [preview]);\n\n  const onElementClick = () => {\n    const itemID = generateId();\n    const page = getMostVisiblePage();\n    let left = 0;\n    let top = 0;\n    if (page) { // for test\n      [left, top] = getAvailableCoordinate(page, zoom);\n    }\n    onItemAdd({\n      ...acceptedItems[itemType].details,\n      ...additionalData,\n      id: itemID,\n      left,\n      pageID: page.id,\n      top,\n    });\n    onAnEventTrigger('reportItemAdd', itemType);\n    setActiveElements(itemID, true);\n    setIsRightPanelOpen(true);\n  };\n\n  const onElementOtherActions = () => {};\n\n  const exactIconType = getExactIconType(iconType);\n  const Icon = icons[exactIconType] ? icons[exactIconType] : icons.label;\n  return (\n    <>\n      <div\n        ref={drag}\n        className=\"toolItem d-flex a-center js-toolItem\"\n        onClick={onElementClick}\n        onKeyDown={onElementOtherActions}\n        style={{ cursor: isDragging ? 'grabbing' : 'pointer', opacity: isDragging ? 0.5 : 1 }}\n        title={title}\n      >\n        <span className=\"toolItem-icon d-flex j-center a-center\">\n          {icon ? icon : (\n            <Icon className={`jfReportSVG icon-question icon-${iconType}`} />\n          )}\n        </span>\n        <span className=\"js-toolItemName toolItem-name d-flex a-center\">\n          { title }\n        </span>\n      </div>\n    </>\n  );\n};\n\nElement.propTypes = {\n  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  iconType: PropTypes.string,\n  itemType: PropTypes.string,\n  title: PropTypes.string,\n};\n\nexport default memo(Element);\n"],"names":["Element","icon","iconType","itemType","title","additionalData","acceptedItems","usePropStore","state","onAnEventTrigger","onItemAdd","resetActiveElements","useBuilderStore","setActiveElements","setIsRightPanelOpen","zoom","useDrag","collect","monitor","isDragging","item","type","DROPPABLE_ITEM_TYPE","drag","preview","useEffect","getEmptyImage","captureDraggingState","onElementClick","itemID","generateId","page","getMostVisiblePage","left","top","getAvailableCoordinate","details","id","pageID","onElementOtherActions","exactIconType","getExactIconType","Icon","icons","_jsx","_jsxs","cursor","opacity","propTypes","PropTypes","oneOfType","element","func","string","memo"],"mappings":"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"}

package/lib/cjs/components/Builder/Page.js

@@ -1,5 +1,6 @@
 'use strict';
 
+require('core-js/modules/es.array.map.js');
 var React = require('react');
 var PropTypes = require('prop-types');
 var reactDnd = require('react-dnd');
@@ -11,6 +12,7 @@ var PropContext = require('../../contexts/PropContext.js');
 var functions = require('../../utils/functions.js');
 var classNames = require('../../constants/classNames.js');
 var generateId = require('../../utils/generateId.js');
+var hooks = require('../../utils/hooks.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -23,12 +25,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -41,20 +37,27 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var axes = ['x', 'y'];
+
 var Page = function Page(_ref) {
-  var _ref$guides = _ref.guides,
-      guides = _ref$guides === void 0 ? {} : _ref$guides,
-      _ref$items = _ref.items,
+  var _selectedElements$;
+
+  var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$page = _ref.page,
       page = _ref$page === void 0 ? {} : _ref$page,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style;
-  var activeElement = BuilderContext.useBuilderStore(function (state) {
-    return state.activeElement;
+  var activeElements = BuilderContext.useBuilderStore(function (state) {
+    return state.activeElements;
   });
-  var setActiveElement = BuilderContext.useBuilderStore(function (state) {
-    return state.setActiveElement;
+  var setActiveElements = BuilderContext.useBuilderStore(function (state) {
+    return state.setActiveElements;
   });
   var setIsRightPanelOpen = BuilderContext.useBuilderStore(function (state) {
     return state.setIsRightPanelOpen;
@@ -65,6 +68,15 @@ var Page = function Page(_ref) {
   var isResize = BuilderContext.useBuilderStore(function (state) {
     return state.isResize;
   });
+  var guides = BuilderContext.useBuilderStore(function (state) {
+    return state.guides;
+  });
+  var matches = BuilderContext.useBuilderStore(function (state) {
+    return state.matches;
+  });
+  var setMatches = BuilderContext.useBuilderStore(function (state) {
+    return state.setMatches;
+  });
   var onItemAdd = PropContext.usePropStore(function (state) {
     return state.onItemAdd;
   });
@@ -89,20 +101,9 @@ var Page = function Page(_ref) {
   var pages = PropContext.usePropStore(function (state) {
     return state.pages;
   });
-
-  var _useState = React.useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      matches = _useState2[0],
-      setMatches = _useState2[1];
-
   var requestRef = React.useRef();
   var dropRef = React.useRef(null); // for getting the bounding client rect
 
-  var handleMatches = React.useCallback(function (item) {
-    var newMatches = functions.getMatchesForItem(item, guides, zoom);
-    setMatches(newMatches);
-  }, [guides, zoom]);
-
   var drawAlignmentGuides = function drawAlignmentGuides(item, monitor) {
     return function () {
       try {
@@ -111,12 +112,13 @@ var Page = function Page(_ref) {
           return;
         }
 
-        var coords = functions.getCorrectDroppedOffsetValue(monitor, dropRef.current.getBoundingClientRect(), zoom);
+        var coords = functions.getCorrectDroppedOffsetValue(monitor.getSourceClientOffset(), monitor.getInitialSourceClientOffset(), dropRef.current.getBoundingClientRect(), zoom);
 
         var activeItem = _objectSpread(_objectSpread({}, item), coords);
 
         if (activeItem.id && activeItem.pageID) {
-          handleMatches(activeItem);
+          var newMatches = functions.getMatchesForItem(activeItem, guides, zoom);
+          setMatches(newMatches);
         }
 
         requestRef.current = undefined;
@@ -126,7 +128,7 @@ var Page = function Page(_ref) {
     };
   };
 
-  var isMultipleItemSelected = activeElement !== null && activeElement.length > 1;
+  var isMultipleItemSelected = activeElements.length > 1;
 
   var onHover = function onHover(item, monitor) {
     if (!requestRef.current) {
@@ -134,6 +136,8 @@ var Page = function Page(_ref) {
     }
   };
 
+  var selectedElements = hooks.useSelectedElements();
+
   var _useDrop = reactDnd.useDrop({
     accept: itemTypes.ACCEPTED_TYPES,
     collect: function collect(monitor) {
@@ -144,8 +148,8 @@ var Page = function Page(_ref) {
     drop: function drop(item, monitor) {
       var _dropRef$current;
 
-      var pageClient = (_dropRef$current = dropRef.current) === null || _dropRef$current === void 0 ? void 0 : _dropRef$current.getBoundingClientRect();
-      var coords = functions.getCorrectDroppedOffsetValue(monitor, pageClient, zoom);
+      setMatches({});
+      var coords = functions.getCorrectDroppedOffsetValue(monitor.getSourceClientOffset(), monitor.getInitialSourceClientOffset(), (_dropRef$current = dropRef.current) === null || _dropRef$current === void 0 ? void 0 : _dropRef$current.getBoundingClientRect(), zoom);
       var type = monitor.getItemType();
 
       var id = item.id,
@@ -157,34 +161,39 @@ var Page = function Page(_ref) {
 
       if (type === itemTypes.DROPPABLE_ITEM_TYPE) {
         var itemID = generateId();
+        var roundedCoords = functions.roundPositionValues(coords);
         onItemAdd(_objectSpread(_objectSpread(_objectSpread({}, acceptedItems[itemType].details), {}, {
           id: itemID,
           pageID: page.id
-        }, coords), additionalData));
+        }, roundedCoords), additionalData));
         onAnEventTrigger('reportItemAdd', itemType);
-        setActiveElement(itemID);
+        setActiveElements(itemID);
         setIsRightPanelOpen(true);
-        newCoords[itemID] = coords;
+        newCoords[itemID] = roundedCoords;
       } else if (type === itemTypes.DRAGGABLE_ITEM_TYPE) {
         var newItem = _objectSpread(_objectSpread({}, item), coords);
 
-        var dragCoords = functions.getCorrectDroppedOffsetValueBySnap(newItem, guides, zoom);
+        var newMatches = functions.getMatchesForItem(newItem, guides, zoom);
+        var dragCoords = functions.getCoordinatesFromMatches(newItem, newMatches, zoom);
+        var roundedDragCoords = functions.roundPositionValues(dragCoords);
 
         if (isMultipleItemSelected) {
-          var leftDifference = additionalData.left - dragCoords.left;
-          var topDifference = additionalData.top - dragCoords.top;
+          var leftDifference = additionalData.left - roundedDragCoords.left;
+          var topDifference = additionalData.top - roundedDragCoords.top;
 
-          var _items = activeElement.reduce(function (acc, curr) {
+          var _items = activeElements.reduce(function (acc, curr) {
             var tempItem = functions.findItemById(curr, pages);
+            var itemLeft = Math.round(tempItem.left - leftDifference);
+            var itemTop = Math.round(tempItem.top - topDifference);
             acc[curr] = {
               id: curr,
-              left: tempItem.left - leftDifference,
+              left: itemLeft,
               pageID: page.id,
-              top: tempItem.top - topDifference
+              top: itemTop
             };
             newCoords[curr] = {
-              left: tempItem.left - leftDifference,
-              top: tempItem.top - topDifference
+              left: itemLeft,
+              top: itemTop
             };
             return acc;
           }, {});
@@ -196,8 +205,8 @@ var Page = function Page(_ref) {
           onItemMove(_objectSpread({
             id: id,
             pageID: page.id
-          }, dragCoords));
-          newCoords[id] = dragCoords;
+          }, roundedDragCoords));
+          newCoords[id] = roundedDragCoords;
         }
       }
 
@@ -209,16 +218,6 @@ var Page = function Page(_ref) {
       isOver = _useDrop2[0].isOver,
       drop = _useDrop2[1];
 
-  var getIntersectionsFromMatches = React.useCallback(function (item) {
-    var _getCoordinatesFromMa = functions.getCoordinatesFromMatches(item, matches),
-        newActiveBoxLeft = _getCoordinatesFromMa.left,
-        newActiveBoxTop = _getCoordinatesFromMa.top;
-
-    return {
-      newActiveBoxLeft: newActiveBoxLeft,
-      newActiveBoxTop: newActiveBoxTop
-    };
-  }, [matches]);
   var combinedRef = React.useCallback(function (node) {
     dropRef.current = node;
     drop(node);
@@ -236,19 +235,14 @@ var Page = function Page(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "jfReport-hider o-hidden f-all p-relative",
         children: [/*#__PURE__*/jsxRuntime.jsx(ReportItemsWrapper, {
-          getIntersectionsFromMatches: getIntersectionsFromMatches,
-          handleMatches: handleMatches,
           items: items
-        }), additionalPageItems, /*#__PURE__*/jsxRuntime.jsx(AlignmentGuides, {
-          axis: "x",
-          guides: guides[page.id],
-          matches: matches,
-          show: isOver || isResize
-        }), /*#__PURE__*/jsxRuntime.jsx(AlignmentGuides, {
-          axis: "y",
-          guides: guides[page.id],
-          matches: matches,
-          show: isOver || isResize
+        }), additionalPageItems, (isOver || isResize && ((_selectedElements$ = selectedElements[0]) === null || _selectedElements$ === void 0 ? void 0 : _selectedElements$.pageID) === page.id) && axes.map(function (axis) {
+          if (!matches[axis]) return null;
+          return /*#__PURE__*/jsxRuntime.jsx(AlignmentGuides, {
+            axis: axis,
+            guides: guides[page.id],
+            matches: matches[axis]
+          }, axis);
         })]
       })
     })
@@ -256,7 +250,6 @@ var Page = function Page(_ref) {
 };
 
 Page.propTypes = {
-  guides: PropTypes__default['default'].shape({}),
   items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({})),
   page: PropTypes__default['default'].shape({
     backgroundColor: PropTypes__default['default'].string

package/lib/cjs/components/Builder/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sources":["../../../../src/components/Builder/Page.js"],"sourcesContent":["import {\n  useState,\n  useRef,\n  memo,\n  useCallback,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { useDrop } from 'react-dnd';\nimport {\n  ACCEPTED_TYPES,\n  DRAGGABLE_ITEM_TYPE,\n  DROPPABLE_ITEM_TYPE,\n} from '../../constants/itemTypes';\nimport AlignmentGuides from '../AlignmentGuides';\nimport ReportItemsWrapper from '../ReportItemsWrapper';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport {\n  getCorrectDroppedOffsetValue,\n  getCorrectDroppedOffsetValueBySnap,\n  findItemById,\n  getMatchesForItem,\n  getCoordinatesFromMatches,\n} from '../../utils/functions';\nimport * as classNames from '../../constants/classNames';\nimport generateId from '../../utils/generateId';\n\nconst Page = ({\n  guides = {},\n  items = [],\n  page = {},\n  style = {},\n}) => {\n  const activeElement = useBuilderStore(state => state.activeElement);\n  const setActiveElement = useBuilderStore(state => state.setActiveElement);\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const zoom = useBuilderStore(state => state.zoom);\n  const isResize = useBuilderStore(state => state.isResize);\n\n  const onItemAdd = usePropStore(state => state.onItemAdd);\n  const onItemMove = usePropStore(state => state.onItemMove);\n  const onItemsMove = usePropStore(state => state.onItemsMove);\n  const additionalPageItems = usePropStore(state => state.additionalPageItems);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const settings = usePropStore(state => state.settings);\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const pages = usePropStore(state => state.pages);\n\n  const [matches, setMatches] = useState({});\n  const requestRef = useRef();\n  const dropRef = useRef(null); // for getting the bounding client rect\n\n  const handleMatches = useCallback(item => {\n    const newMatches = getMatchesForItem(item, guides, zoom);\n    setMatches(newMatches);\n  }, [guides, zoom]);\n\n  const drawAlignmentGuides = (item, monitor) => {\n    return () => {\n      try {\n        if (!monitor || monitor.getSourceClientOffset() === null) {\n          requestRef.current = undefined;\n          return;\n        }\n        const coords = getCorrectDroppedOffsetValue(\n          monitor,\n          dropRef.current.getBoundingClientRect(),\n          zoom,\n        );\n        const activeItem = {\n          ...item, ...coords,\n        };\n        if (activeItem.id && activeItem.pageID) {\n          handleMatches(activeItem);\n        }\n        requestRef.current = undefined;\n      } catch (error) {\n        setMatches({});\n      }\n    };\n  };\n\n  const isMultipleItemSelected = activeElement !== null && activeElement.length > 1;\n\n  const onHover = (item, monitor) => {\n    if (!requestRef.current) {\n      requestRef.current = global.requestAnimationFrame(drawAlignmentGuides(item, monitor));\n    }\n  };\n\n  const [{ isOver }, drop] = useDrop({\n    accept: ACCEPTED_TYPES,\n    collect: monitor => {\n      return {\n        isOver: monitor.isOver(),\n      };\n    },\n    drop: (item, monitor) => {\n      const pageClient = dropRef.current?.getBoundingClientRect();\n      const coords = getCorrectDroppedOffsetValue(\n        monitor,\n        pageClient,\n        zoom,\n      );\n      const type = monitor.getItemType();\n      const {\n        id, itemType, pageID, ...additionalData\n      } = item;\n      const newCoords = {};\n      if (type === DROPPABLE_ITEM_TYPE) {\n        const itemID = generateId();\n        onItemAdd({\n          ...acceptedItems[itemType].details,\n          id: itemID,\n          pageID: page.id,\n          ...coords,\n          ...additionalData,\n        });\n        onAnEventTrigger('reportItemAdd', itemType);\n        setActiveElement(itemID);\n        setIsRightPanelOpen(true);\n        newCoords[itemID] = coords;\n      } else if (type === DRAGGABLE_ITEM_TYPE) {\n        const newItem = { ...item, ...coords };\n        const dragCoords = getCorrectDroppedOffsetValueBySnap(newItem, guides, zoom);\n        if (isMultipleItemSelected) {\n          const leftDifference = additionalData.left - dragCoords.left;\n          const topDifference = additionalData.top - dragCoords.top;\n          const _items = activeElement.reduce((acc, curr) => {\n            const tempItem = findItemById(curr, pages);\n            acc[curr] = {\n              id: curr,\n              left: tempItem.left - leftDifference,\n              pageID: page.id,\n              top: tempItem.top - topDifference,\n            };\n            newCoords[curr] = {\n              left: tempItem.left - leftDifference,\n              top: tempItem.top - topDifference,\n            };\n            return acc;\n          }, {});\n          onItemsMove({ items: _items });\n        } else {\n          onItemMove({\n            id,\n            pageID: page.id,\n            ...dragCoords,\n          });\n          newCoords[id] = dragCoords;\n        }\n      }\n\n      return newCoords;\n    },\n    hover: onHover,\n  });\n\n  const getIntersectionsFromMatches = useCallback(item => {\n    const {\n      left: newActiveBoxLeft,\n      top: newActiveBoxTop,\n    } = getCoordinatesFromMatches(item, matches);\n\n    return { newActiveBoxLeft, newActiveBoxTop };\n  }, [matches]);\n\n  const combinedRef = useCallback(node => {\n    dropRef.current = node;\n    drop(node);\n  }, [drop]);\n\n  const { reportBackgroundColor } = settings;\n  const { backgroundColor } = page;\n  const bgColor = backgroundColor ? backgroundColor : reportBackgroundColor || '#fff';\n\n  return (\n    <>\n      <div\n        ref={combinedRef}\n        className={classNames.pageContainer}\n        style={{\n          backgroundColor: bgColor,\n          ...style,\n        }}\n      >\n        <div className=\"jfReport-hider o-hidden f-all p-relative\">\n          <ReportItemsWrapper\n            getIntersectionsFromMatches={getIntersectionsFromMatches}\n            handleMatches={handleMatches}\n            items={items}\n          />\n          {additionalPageItems}\n          <AlignmentGuides\n            axis=\"x\"\n            guides={guides[page.id]}\n            matches={matches}\n            show={(isOver || isResize)}\n          />\n          <AlignmentGuides\n            axis=\"y\"\n            guides={guides[page.id]}\n            matches={matches}\n            show={(isOver || isResize)}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nPage.propTypes = {\n  guides: PropTypes.shape({}),\n  items: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  page: PropTypes.shape({\n    backgroundColor: PropTypes.string,\n  }),\n  style: PropTypes.shape({}),\n};\n\nexport default memo(Page);\n"],"names":["Page","guides","items","page","style","activeElement","useBuilderStore","state","setActiveElement","setIsRightPanelOpen","zoom","isResize","onItemAdd","usePropStore","onItemMove","onItemsMove","additionalPageItems","onAnEventTrigger","settings","acceptedItems","pages","useState","matches","setMatches","requestRef","useRef","dropRef","handleMatches","useCallback","item","newMatches","getMatchesForItem","drawAlignmentGuides","monitor","getSourceClientOffset","current","undefined","coords","getCorrectDroppedOffsetValue","getBoundingClientRect","activeItem","id","pageID","error","isMultipleItemSelected","length","onHover","global","requestAnimationFrame","useDrop","accept","ACCEPTED_TYPES","collect","isOver","drop","pageClient","type","getItemType","itemType","additionalData","newCoords","DROPPABLE_ITEM_TYPE","itemID","generateId","details","DRAGGABLE_ITEM_TYPE","newItem","dragCoords","getCorrectDroppedOffsetValueBySnap","leftDifference","left","topDifference","top","_items","reduce","acc","curr","tempItem","findItemById","hover","getIntersectionsFromMatches","getCoordinatesFromMatches","newActiveBoxLeft","newActiveBoxTop","combinedRef","node","reportBackgroundColor","backgroundColor","bgColor","_jsx","classNames","_jsxs","propTypes","PropTypes","shape","arrayOf","string","memo"],"mappings":"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"}
+{"version":3,"file":"Page.js","sources":["../../../../src/components/Builder/Page.js"],"sourcesContent":["import {\n  useRef,\n  memo,\n  useCallback,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { useDrop } from 'react-dnd';\nimport {\n  ACCEPTED_TYPES,\n  DRAGGABLE_ITEM_TYPE,\n  DROPPABLE_ITEM_TYPE,\n} from '../../constants/itemTypes';\nimport AlignmentGuides from '../AlignmentGuides';\nimport ReportItemsWrapper from '../ReportItemsWrapper';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport {\n  getCorrectDroppedOffsetValue,\n  findItemById,\n  getMatchesForItem,\n  roundPositionValues,\n  getCoordinatesFromMatches,\n} from '../../utils/functions';\nimport * as classNames from '../../constants/classNames';\nimport generateId from '../../utils/generateId';\nimport { useSelectedElements } from '../../utils/hooks';\n\nconst axes = ['x', 'y'];\n\nconst Page = ({\n  items = [],\n  page = {},\n  style = {},\n}) => {\n  const activeElements = useBuilderStore(state => state.activeElements);\n  const setActiveElements = useBuilderStore(state => state.setActiveElements);\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const zoom = useBuilderStore(state => state.zoom);\n  const isResize = useBuilderStore(state => state.isResize);\n  const guides = useBuilderStore(state => state.guides);\n  const matches = useBuilderStore(state => state.matches);\n  const setMatches = useBuilderStore(state => state.setMatches);\n\n  const onItemAdd = usePropStore(state => state.onItemAdd);\n  const onItemMove = usePropStore(state => state.onItemMove);\n  const onItemsMove = usePropStore(state => state.onItemsMove);\n  const additionalPageItems = usePropStore(state => state.additionalPageItems);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const settings = usePropStore(state => state.settings);\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const pages = usePropStore(state => state.pages);\n\n  const requestRef = useRef();\n  const dropRef = useRef(null); // for getting the bounding client rect\n\n  const drawAlignmentGuides = (item, monitor) => {\n    return () => {\n      try {\n        if (!monitor || monitor.getSourceClientOffset() === null) {\n          requestRef.current = undefined;\n          return;\n        }\n        const coords = getCorrectDroppedOffsetValue(\n          monitor.getSourceClientOffset(),\n          monitor.getInitialSourceClientOffset(),\n          dropRef.current.getBoundingClientRect(),\n          zoom,\n        );\n        const activeItem = {\n          ...item, ...coords,\n        };\n        if (activeItem.id && activeItem.pageID) {\n          const newMatches = getMatchesForItem(activeItem, guides, zoom);\n          setMatches(newMatches);\n        }\n        requestRef.current = undefined;\n      } catch (error) {\n        setMatches({});\n      }\n    };\n  };\n\n  const isMultipleItemSelected = activeElements.length > 1;\n\n  const onHover = (item, monitor) => {\n    if (!requestRef.current) {\n      requestRef.current = global.requestAnimationFrame(drawAlignmentGuides(item, monitor));\n    }\n  };\n\n  const selectedElements = useSelectedElements();\n\n  const [{ isOver }, drop] = useDrop({\n    accept: ACCEPTED_TYPES,\n    collect: monitor => {\n      return {\n        isOver: monitor.isOver(),\n      };\n    },\n    drop: (item, monitor) => {\n      setMatches({});\n      const coords = getCorrectDroppedOffsetValue(\n        monitor.getSourceClientOffset(),\n        monitor.getInitialSourceClientOffset(),\n        dropRef.current?.getBoundingClientRect(),\n        zoom,\n      );\n      const type = monitor.getItemType();\n      const {\n        id, itemType, pageID, ...additionalData\n      } = item;\n      const newCoords = {};\n      if (type === DROPPABLE_ITEM_TYPE) {\n        const itemID = generateId();\n        const roundedCoords = roundPositionValues(coords);\n        onItemAdd({\n          ...acceptedItems[itemType].details,\n          id: itemID,\n          pageID: page.id,\n          ...roundedCoords,\n          ...additionalData,\n        });\n        onAnEventTrigger('reportItemAdd', itemType);\n        setActiveElements(itemID);\n        setIsRightPanelOpen(true);\n        newCoords[itemID] = roundedCoords;\n      } else if (type === DRAGGABLE_ITEM_TYPE) {\n        const newItem = { ...item, ...coords };\n        const newMatches = getMatchesForItem(newItem, guides, zoom);\n        const dragCoords = getCoordinatesFromMatches(newItem, newMatches, zoom);\n        const roundedDragCoords = roundPositionValues(dragCoords);\n        if (isMultipleItemSelected) {\n          const leftDifference = additionalData.left - roundedDragCoords.left;\n          const topDifference = additionalData.top - roundedDragCoords.top;\n          const _items = activeElements.reduce((acc, curr) => {\n            const tempItem = findItemById(curr, pages);\n            const itemLeft = Math.round(tempItem.left - leftDifference);\n            const itemTop = Math.round(tempItem.top - topDifference);\n            acc[curr] = {\n              id: curr,\n              left: itemLeft,\n              pageID: page.id,\n              top: itemTop,\n            };\n            newCoords[curr] = {\n              left: itemLeft,\n              top: itemTop,\n            };\n            return acc;\n          }, {});\n          onItemsMove({ items: _items });\n        } else {\n          onItemMove({\n            id,\n            pageID: page.id,\n            ...roundedDragCoords,\n          });\n          newCoords[id] = roundedDragCoords;\n        }\n      }\n\n      return newCoords;\n    },\n    hover: onHover,\n  });\n\n  const combinedRef = useCallback(node => {\n    dropRef.current = node;\n    drop(node);\n  }, [drop]);\n\n  const { reportBackgroundColor } = settings;\n  const { backgroundColor } = page;\n  const bgColor = backgroundColor ? backgroundColor : reportBackgroundColor || '#fff';\n\n  return (\n    <>\n      <div\n        ref={combinedRef}\n        className={classNames.pageContainer}\n        style={{\n          backgroundColor: bgColor,\n          ...style,\n        }}\n      >\n        <div className=\"jfReport-hider o-hidden f-all p-relative\">\n          <ReportItemsWrapper\n            items={items}\n          />\n          {additionalPageItems}\n          {/* when isOver is true, the alignment guides are shown completely */}\n          {/* when isResize is true, the alignment guides are shown only for the page of the selected element */}\n          {(isOver || (isResize && selectedElements[0]?.pageID === page.id)) && axes.map(axis => {\n            if (!matches[axis]) return null;\n            return (\n              <AlignmentGuides\n                key={axis}\n                axis={axis}\n                guides={guides[page.id]}\n                matches={matches[axis]}\n              />\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n};\n\nPage.propTypes = {\n  items: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  page: PropTypes.shape({\n    backgroundColor: PropTypes.string,\n  }),\n  style: PropTypes.shape({}),\n};\n\nexport default memo(Page);\n"],"names":["axes","Page","items","page","style","activeElements","useBuilderStore","state","setActiveElements","setIsRightPanelOpen","zoom","isResize","guides","matches","setMatches","onItemAdd","usePropStore","onItemMove","onItemsMove","additionalPageItems","onAnEventTrigger","settings","acceptedItems","pages","requestRef","useRef","dropRef","drawAlignmentGuides","item","monitor","getSourceClientOffset","current","undefined","coords","getCorrectDroppedOffsetValue","getInitialSourceClientOffset","getBoundingClientRect","activeItem","id","pageID","newMatches","getMatchesForItem","error","isMultipleItemSelected","length","onHover","global","requestAnimationFrame","selectedElements","useSelectedElements","useDrop","accept","ACCEPTED_TYPES","collect","isOver","drop","type","getItemType","itemType","additionalData","newCoords","DROPPABLE_ITEM_TYPE","itemID","generateId","roundedCoords","roundPositionValues","details","DRAGGABLE_ITEM_TYPE","newItem","dragCoords","getCoordinatesFromMatches","roundedDragCoords","leftDifference","left","topDifference","top","_items","reduce","acc","curr","tempItem","findItemById","itemLeft","Math","round","itemTop","hover","combinedRef","useCallback","node","reportBackgroundColor","backgroundColor","bgColor","_jsx","classNames","_jsxs","map","axis","propTypes","PropTypes","arrayOf","shape","string","memo"],"mappings":"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"}