@jotforminc/dnd-builder 3.0.0 → 3.1.1

package/lib/esm/components/DraggableItem/DraggableItemLayer.js

@@ -1,33 +1,13 @@
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.find.js';
-import 'core-js/modules/es.array.find-index.js';
 import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.object.keys.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
-import { memo } from 'react';
+import { memo, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import memoizeOne from 'memoize-one';
-import { useDragLayer } from 'react-dnd';
 import ReportItemRenderer from '../Builder/ReportItemRenderer.js';
-import { calculateGuidePositions, proximityListener } from '../../utils/functions.js';
+import { getCorrectDroppedOffsetValue, getMatchesForItem, getCoordinatesFromMatches } from '../../utils/functions.js';
 import ItemPositioner from '../ItemPositioner.js';
 import { useBuilderStore } from '../../contexts/BuilderContext.js';
 import { usePropStore } from '../../contexts/PropContext.js';
-import getMergedItem from '../../utils/getMergedItem.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+import { useActiveElement } from '../../utils/hooks.js';
+import { jsx } from 'react/jsx-runtime';
 
 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; }
 
@@ -35,129 +15,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 layerStyles = function layerStyles(_ref) {
-  var x = _ref.x,
-      y = _ref.y;
-  return {
-    left: x,
-    pointerEvents: 'none',
-    position: 'fixed',
-    top: y,
-    zIndex: 100
-  };
-};
-
-var getDraggedItem = function getDraggedItem(_ref2, item) {
-  var _ref2$defaultItem = _ref2.defaultItem,
-      defaultItem = _ref2$defaultItem === void 0 ? {} : _ref2$defaultItem,
-      details = _ref2.details;
+var getDraggedItem = function getDraggedItem(_ref, item) {
+  var _ref$defaultItem = _ref.defaultItem,
+      defaultItem = _ref$defaultItem === void 0 ? {} : _ref$defaultItem,
+      details = _ref.details;
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultItem), details), item), {}, {
     id: 'temp'
   });
 };
 
-var getMemoizedDraggedItem = memoizeOne(getDraggedItem);
-var getAdditionalItems = memoizeOne(function (activeElems, __itemId, _pages, _acceptedItems) {
-  if (activeElems === null || activeElems.length === 1) return [];
-  var index = activeElems.findIndex(function (aE) {
-    return aE === __itemId;
-  });
-  var act = [].concat(_toConsumableArray(activeElems.slice(0, index)), _toConsumableArray(activeElems.slice(index + 1)));
-  var items = act.map(function (_i) {
-    var _item = _pages.reduce(function (acc, curr) {
-      if (acc) {
-        return acc;
-      }
-
-      return curr.items.find(function (el) {
-        return el.id === _i;
-      });
-    }, undefined);
-
-    var defItem = _acceptedItems[_item.itemType] && _acceptedItems[_item.itemType].defaultItem;
-    return _objectSpread(_objectSpread({}, defItem), _item);
-  });
-  return items;
-});
-
-function getItemStyles(initialOffset, currentOffset, ref, pageGuides, item, zoom) {
-  if (ref.current) {
-    var dropTargetPosition = ref.current.getBoundingClientRect();
-    var finalX = currentOffset.x,
-        finalY = currentOffset.y;
-    var initialX = initialOffset.x,
-        initialY = initialOffset.y;
-    var newYposition = finalY > initialY ? initialY + (finalY - initialY) - dropTargetPosition.top : initialY - (initialY - finalY) - dropTargetPosition.top;
-    var newXposition = finalX > initialX ? initialX + (finalX - initialX) - dropTargetPosition.left : initialX - (initialX - finalX) - dropTargetPosition.left;
-
-    var newItem = _objectSpread(_objectSpread({}, item), {}, {
-      left: newXposition / zoom,
-      top: newYposition / zoom
-    });
-
-    var _guides = _objectSpread(_objectSpread({}, pageGuides), {}, _defineProperty({}, item.id, _objectSpread(_objectSpread({}, pageGuides[item.id]), {}, {
-      x: calculateGuidePositions(newItem, 'x', zoom),
-      y: calculateGuidePositions(newItem, 'y', zoom)
-    })));
-
-    var match = proximityListener(item.id, _guides);
-    var newActiveBoxLeft = newXposition;
-    var newActiveBoxTop = newYposition;
-    var haveMatch = Object.keys(match).length > 0;
-    var haveXMatch = haveMatch && match.x;
-    var haveYMatch = haveMatch && match.y;
-    Object.keys(match).forEach(function (axis) {
-      var _match$axis = match[axis],
-          activeBoxGuides = _match$axis.activeBoxGuides,
-          matchedArray = _match$axis.matchedArray,
-          proximity = _match$axis.proximity;
-      var activeBoxProximityIndex = proximity.activeBoxIndex;
-      var matchedBoxProximityIndex = proximity.matchedBoxIndex;
-
-      if (axis === 'x') {
-        if (activeBoxGuides[activeBoxProximityIndex] > matchedArray[matchedBoxProximityIndex]) {
-          newActiveBoxLeft = newItem.left - proximity.value;
-        } else {
-          newActiveBoxLeft = newItem.left + proximity.value;
-        }
-      } else if (activeBoxGuides[activeBoxProximityIndex] > matchedArray[matchedBoxProximityIndex]) {
-        newActiveBoxTop = newItem.top - proximity.value;
-      } else {
-        newActiveBoxTop = newItem.top + proximity.value;
-      }
-    });
-    return {
-      x: newActiveBoxLeft * (haveXMatch ? zoom : 1) + dropTargetPosition.left,
-      y: newActiveBoxTop * (haveYMatch ? zoom : 1) + dropTargetPosition.top
-    };
-  }
-}
-
-var DraggableItemLayer = function DraggableItemLayer(_ref3) {
-  var _ref3$guides = _ref3.guides,
-      guides = _ref3$guides === void 0 ? {} : _ref3$guides,
-      _ref3$pageRefs = _ref3.pageRefs,
-      pageRefs = _ref3$pageRefs === void 0 ? {} : _ref3$pageRefs,
-      _ref3$pages = _ref3.pages,
-      pages = _ref3$pages === void 0 ? [] : _ref3$pages;
-
-  var _useDragLayer = useDragLayer(function (monitor) {
-    return {
-      currentOffset: monitor.getSourceClientOffset(),
-      initialOffset: monitor.getInitialSourceClientOffset(),
-      isDragging: monitor.isDragging(),
-      item: monitor.getItem(),
-      itemType: monitor.getItemType()
-    };
-  }),
-      currentOffset = _useDragLayer.currentOffset,
-      initialOffset = _useDragLayer.initialOffset,
-      isDragging = _useDragLayer.isDragging,
-      item = _useDragLayer.item;
-
-  var activeElement = useBuilderStore(function (state) {
-    return state.activeElement;
-  });
+var DraggableItemLayer = function DraggableItemLayer(_ref2) {
+  var _ref2$collectedProps = _ref2.collectedProps,
+      collectedProps = _ref2$collectedProps === void 0 ? {} : _ref2$collectedProps,
+      _ref2$guides = _ref2.guides,
+      guides = _ref2$guides === void 0 ? {} : _ref2$guides,
+      _ref2$pageRefs = _ref2.pageRefs,
+      pageRefs = _ref2$pageRefs === void 0 ? {} : _ref2$pageRefs;
+  var currentOffset = collectedProps.currentOffset,
+      initialOffset = collectedProps.initialOffset,
+      isDragging = collectedProps.isDragging,
+      item = collectedProps.item;
   var zoom = useBuilderStore(function (state) {
     return state.zoom;
   });
@@ -167,112 +44,112 @@ var DraggableItemLayer = function DraggableItemLayer(_ref3) {
   var itemAccessor = usePropStore(function (state) {
     return state.itemAccessor;
   });
+  var referenceItem = useMemo(function () {
+    var _item = item.id ? item : getDraggedItem(acceptedItems[item.itemType], item); // for a element that is dragging to the left panel
+
 
-  if (!currentOffset || !isDragging) {
-    return null;
-  }
+    if (!_item.pageID) {
+      var element = document.elementFromPoint(currentOffset.x, currentOffset.y);
 
-  var draggedItem = pages.reduce(function (acc, curr) {
-    if (acc) {
-      return acc;
+      if (element && element.closest('.jfReport-page')) {
+        var _pageID = element.closest('.jfReport-page').getAttribute('data-id');
+
+        return _objectSpread(_objectSpread({}, _item), {}, {
+          pageID: _pageID
+        });
+      }
     }
 
-    return curr.items.find(function (el) {
-      return el.id === item.id;
-    });
-  }, undefined);
-  var pageID;
+    return _item;
+  }, [item, acceptedItems, currentOffset.x, currentOffset.y]);
+  var pageID = referenceItem.pageID;
+  var refCoords = useMemo(function () {
+    if (pageID) {
+      var dropTargetPosition = pageRefs[pageID].current.getBoundingClientRect();
+      var coords = getCorrectDroppedOffsetValue(currentOffset, initialOffset, dropTargetPosition, zoom);
 
-  if (draggedItem) {
-    pageID = draggedItem.pageID;
-  } else {
-    draggedItem = getMemoizedDraggedItem(acceptedItems[item.itemType], item);
-  }
+      var newItem = _objectSpread(_objectSpread({}, referenceItem), coords);
 
-  var element = document.elementFromPoint(currentOffset.x, currentOffset.y);
+      var newMatches = getMatchesForItem(newItem, guides, zoom);
 
-  if (element && element.closest('.jfReport-page')) {
-    // add polyfill if will we use that one
-    pageID = element.closest('.jfReport-page').getAttribute('data-id');
+      var _getCoordinatesFromMa = getCoordinatesFromMatches(newItem, newMatches),
+          left = _getCoordinatesFromMa.left,
+          top = _getCoordinatesFromMa.top;
 
-    if (!draggedItem.pageID) {
-      draggedItem.pageID = pageID;
+      return {
+        x: left * zoom + dropTargetPosition.left,
+        y: top * zoom + dropTargetPosition.top
+      };
     }
-  }
 
-  var ref = pageRefs[pageID];
-  var itemStyle = {}; // No page
-
-  if (!ref || !ref.current) {
-    itemStyle = {
+    return {
       x: currentOffset.x,
       y: currentOffset.y
     };
-  } else {
-    // In the page
-    var pageGuides = guides[pageID];
-    itemStyle = getItemStyles(initialOffset, currentOffset, pageRefs[pageID], pageGuides, draggedItem, zoom);
-  }
-
-  var additionalitems = getAdditionalItems(activeElement, draggedItem.id, pages, acceptedItems);
-  var mergedItem = getMergedItem(draggedItem, acceptedItems);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(ItemPositioner, {
-      classNames: "reportItem".concat(isDragging ? ' isDraggingLayerElement' : ''),
-      style: _objectSpread(_objectSpread({}, layerStyles(itemStyle)), {}, {
-        cursor: isDragging ? 'grabbing' : 'pointer',
-        height: draggedItem.height,
-        outlineColor: '#4277ff',
-        transform: "scale(".concat(zoom, ")"),
-        transformOrigin: '0 0',
-        width: draggedItem.width
-      }),
+  }, [currentOffset, initialOffset, referenceItem, pageID, pageRefs, zoom, guides]);
+  var getItemStyle = useCallback(function (_ref3, _ref4) {
+    var x = _ref3.x,
+        y = _ref3.y;
+    var height = _ref4.height,
+        width = _ref4.width;
+    return {
+      cursor: 'grabbing',
+      height: height,
+      left: x,
+      outlineColor: '#4277ff',
+      pointerEvents: 'none',
+      position: 'fixed',
+      top: y,
+      transform: "scale(".concat(zoom, ")"),
+      transformOrigin: '0 0',
+      width: width,
+      zIndex: 100
+    };
+  }, [zoom]);
+  var activeItems = useActiveElement();
+  var hasActiveItems = activeItems !== null && activeItems.length > 0; // for a element is added from the left panel
+
+  var activeElements = hasActiveItems ? activeItems : [referenceItem];
+  return activeElements.map(function (activeItem) {
+    var coords = hasActiveItems ? {
+      x: refCoords.x - (referenceItem.left - activeItem.left) * zoom,
+      y: refCoords.y - (referenceItem.top - activeItem.top) * zoom
+    } : refCoords;
+    var exactItem = hasActiveItems ? activeItem : referenceItem;
+    return /*#__PURE__*/jsx(ItemPositioner, {
+      classNames: "reportItem isDraggingLayerElement",
+      style: getItemStyle(coords, exactItem),
       children: /*#__PURE__*/jsx(ReportItemRenderer, {
-        item: draggedItem,
+        item: exactItem,
         children: function children(ReportItem) {
           return /*#__PURE__*/jsx(ReportItem, {
             isDragging: isDragging,
-            item: mergedItem,
+            item: exactItem,
             itemAccessor: itemAccessor,
             zoom: zoom
           });
         }
       })
-    }), additionalitems.map(function (ii) {
-      var __itemStyle = {
-        x: itemStyle.x - (draggedItem.left - ii.left) * zoom,
-        y: itemStyle.y - (draggedItem.top - ii.top) * zoom
-      };
-      return /*#__PURE__*/jsx(ItemPositioner, {
-        classNames: "reportItem".concat(isDragging ? ' isDraggingLayerElement' : ''),
-        style: _objectSpread(_objectSpread({}, layerStyles(__itemStyle)), {}, {
-          cursor: isDragging ? 'grabbing' : 'pointer',
-          height: ii.height,
-          outlineColor: '#4277ff',
-          transform: "scale(".concat(zoom, ")"),
-          transformOrigin: '0 0',
-          width: ii.width
-        }),
-        children: /*#__PURE__*/jsx(ReportItemRenderer, {
-          item: ii,
-          children: function children(ReportItem) {
-            return /*#__PURE__*/jsx(ReportItem, {
-              isDragging: isDragging,
-              item: ii,
-              itemAccessor: itemAccessor,
-              zoom: zoom
-            });
-          }
-        })
-      }, ii.id);
-    })]
+    }, item.id);
   });
 };
 
 DraggableItemLayer.propTypes = {
+  collectedProps: PropTypes.shape({
+    currentOffset: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number
+    }),
+    initialOffset: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number
+    }),
+    isDragging: PropTypes.bool,
+    item: PropTypes.shape({}),
+    itemType: PropTypes.string
+  }),
   guides: PropTypes.shape({}),
-  pageRefs: PropTypes.shape({}),
-  pages: PropTypes.arrayOf(PropTypes.shape({}))
+  pageRefs: PropTypes.shape({})
 };
 var DraggableItemLayer$1 = /*#__PURE__*/memo(DraggableItemLayer);
 

package/lib/esm/components/DraggableItem/DraggableItemLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableItemLayer.js","sources":["../../../../src/components/DraggableItem/DraggableItemLayer.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport memoizeOne from 'memoize-one';\nimport { useDragLayer } from 'react-dnd';\nimport ReportItemRenderer from '../Builder/ReportItemRenderer';\nimport { proximityListener, calculateGuidePositions } from '../../utils/functions';\nimport ItemPositioner from '../ItemPositioner';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport getMergedItem from '../../utils/getMergedItem';\n\nconst layerStyles = ({ x, y }) => ({\n  left: x,\n  pointerEvents: 'none',\n  position: 'fixed',\n  top: y,\n  zIndex: 100,\n});\n\nconst getDraggedItem = ({ defaultItem = {}, details }, item) => ({\n  ...defaultItem,\n  ...details,\n  ...item,\n  id: 'temp',\n});\n\nconst getMemoizedDraggedItem = memoizeOne(getDraggedItem);\n\nconst getAdditionalItems = memoizeOne((activeElems, __itemId, _pages, _acceptedItems) => {\n  if (activeElems === null || activeElems.length === 1) return [];\n  const index = activeElems.findIndex(aE => aE === __itemId);\n  const act = [...activeElems.slice(0, index), ...activeElems.slice(index + 1)];\n  const items = act.map(_i => {\n    const _item = _pages.reduce((acc, curr) => {\n      if (acc) {\n        return acc;\n      }\n      return curr.items.find(el => el.id === _i);\n    }, undefined);\n    const defItem = (_acceptedItems[_item.itemType]\n      && _acceptedItems[_item.itemType].defaultItem);\n    return { ...defItem, ..._item };\n  });\n  return items;\n});\n\nfunction getItemStyles(initialOffset, currentOffset, ref, pageGuides, item, zoom) {\n  if (ref.current) {\n    const dropTargetPosition = ref.current.getBoundingClientRect();\n    const { x: finalX, y: finalY } = currentOffset;\n    const { x: initialX, y: initialY } = initialOffset;\n    const newYposition = finalY > initialY\n      ? (initialY + (finalY - initialY)) - dropTargetPosition.top\n      : initialY - (initialY - finalY) - dropTargetPosition.top;\n\n    const newXposition = finalX > initialX\n      ? (initialX + (finalX - initialX)) - dropTargetPosition.left\n      : initialX - (initialX - finalX) - dropTargetPosition.left;\n\n    const newItem = {\n      ...item,\n      left: newXposition / zoom,\n      top: newYposition / zoom,\n    };\n    const _guides = {\n      ...pageGuides,\n      [item.id]: {\n        ...pageGuides[item.id],\n        x: calculateGuidePositions(newItem, 'x', zoom),\n        y: calculateGuidePositions(newItem, 'y', zoom),\n      },\n    };\n\n    const match = proximityListener(item.id, _guides);\n    let newActiveBoxLeft = newXposition;\n    let newActiveBoxTop = newYposition;\n    const haveMatch = Object.keys(match).length > 0;\n    const haveXMatch = haveMatch && match.x;\n    const haveYMatch = haveMatch && match.y;\n    Object.keys(match).forEach(axis => {\n      const { activeBoxGuides, matchedArray, proximity } = match[axis];\n      const activeBoxProximityIndex = proximity.activeBoxIndex;\n      const matchedBoxProximityIndex = proximity.matchedBoxIndex;\n      if (axis === 'x') {\n        if (activeBoxGuides[activeBoxProximityIndex] > matchedArray[matchedBoxProximityIndex]) {\n          newActiveBoxLeft = newItem.left - proximity.value;\n        } else {\n          newActiveBoxLeft = newItem.left + proximity.value;\n        }\n      } else if (activeBoxGuides[activeBoxProximityIndex]\n        > matchedArray[matchedBoxProximityIndex]) {\n        newActiveBoxTop = newItem.top - proximity.value;\n      } else {\n        newActiveBoxTop = newItem.top + proximity.value;\n      }\n    });\n    return {\n      x: (newActiveBoxLeft * (haveXMatch ? zoom : 1)) + dropTargetPosition.left,\n      y: (newActiveBoxTop * (haveYMatch ? zoom : 1)) + dropTargetPosition.top,\n    };\n  }\n}\n\nconst DraggableItemLayer = ({\n  guides = {},\n  pageRefs = {},\n  pages = [],\n}) => {\n  const {\n    currentOffset,\n    initialOffset,\n    isDragging,\n    item,\n  } = 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  const activeElement = useBuilderStore(state => state.activeElement);\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const itemAccessor = usePropStore(state => state.itemAccessor);\n\n  if (!currentOffset || !isDragging) {\n    return null;\n  }\n  let draggedItem = pages.reduce((acc, curr) => {\n    if (acc) {\n      return acc;\n    }\n    return curr.items.find(el => el.id === item.id);\n  }, undefined);\n\n  let pageID;\n  if (draggedItem) {\n    pageID = draggedItem.pageID;\n  } else {\n    draggedItem = getMemoizedDraggedItem(acceptedItems[item.itemType], item);\n  }\n  const element = document.elementFromPoint(currentOffset.x, currentOffset.y);\n  if (element && element.closest('.jfReport-page')) { // add polyfill if will we use that one\n    pageID = element.closest('.jfReport-page').getAttribute('data-id');\n    if (!draggedItem.pageID) {\n      draggedItem.pageID = pageID;\n    }\n  }\n\n  const ref = pageRefs[pageID];\n  let itemStyle = {};\n  // No page\n  if (!ref || !ref.current) {\n    itemStyle = {\n      x: currentOffset.x,\n      y: currentOffset.y,\n    };\n  } else { // In the page\n    const pageGuides = guides[pageID];\n    itemStyle = getItemStyles(\n      initialOffset,\n      currentOffset,\n      pageRefs[pageID],\n      pageGuides,\n      draggedItem,\n      zoom,\n    );\n  }\n\n  const additionalitems = getAdditionalItems(\n    activeElement,\n    draggedItem.id,\n    pages,\n    acceptedItems,\n  );\n\n  const mergedItem = getMergedItem(draggedItem, acceptedItems);\n\n  return (\n    <>\n      <ItemPositioner\n        classNames={`reportItem${isDragging ? ' isDraggingLayerElement' : ''}`}\n        style={{\n          ...layerStyles(itemStyle),\n          cursor: isDragging ? 'grabbing' : 'pointer',\n          height: draggedItem.height,\n          outlineColor: '#4277ff',\n          transform: `scale(${zoom})`,\n          transformOrigin: '0 0',\n          width: draggedItem.width,\n        }}\n      >\n        <ReportItemRenderer item={draggedItem}>\n          {ReportItem => (\n            <ReportItem\n              isDragging={isDragging}\n              item={mergedItem}\n              itemAccessor={itemAccessor}\n              zoom={zoom}\n            />\n          )}\n        </ReportItemRenderer>\n      </ItemPositioner>\n      {additionalitems.map(ii => {\n        const __itemStyle = {\n          x: itemStyle.x - ((draggedItem.left - ii.left) * zoom),\n          y: itemStyle.y - ((draggedItem.top - ii.top) * zoom),\n        };\n        return (\n          <ItemPositioner\n            key={ii.id}\n            classNames={`reportItem${isDragging ? ' isDraggingLayerElement' : ''}`}\n            style={{\n              ...layerStyles(__itemStyle),\n              cursor: isDragging ? 'grabbing' : 'pointer',\n              height: ii.height,\n              outlineColor: '#4277ff',\n              transform: `scale(${zoom})`,\n              transformOrigin: '0 0',\n              width: ii.width,\n            }}\n          >\n            <ReportItemRenderer item={ii}>\n              {ReportItem => (\n                <ReportItem\n                  isDragging={isDragging}\n                  item={ii}\n                  itemAccessor={itemAccessor}\n                  zoom={zoom}\n                />\n              )}\n            </ReportItemRenderer>\n          </ItemPositioner>\n        );\n      })}\n    </>\n  );\n};\n\nDraggableItemLayer.propTypes = {\n  guides: PropTypes.shape({}),\n  pageRefs: PropTypes.shape({}),\n  pages: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n};\n\nexport default memo(DraggableItemLayer);\n"],"names":["layerStyles","x","y","left","pointerEvents","position","top","zIndex","getDraggedItem","item","defaultItem","details","id","getMemoizedDraggedItem","memoizeOne","getAdditionalItems","activeElems","__itemId","_pages","_acceptedItems","length","index","findIndex","aE","act","slice","items","map","_i","_item","reduce","acc","curr","find","el","undefined","defItem","itemType","getItemStyles","initialOffset","currentOffset","ref","pageGuides","zoom","current","dropTargetPosition","getBoundingClientRect","finalX","finalY","initialX","initialY","newYposition","newXposition","newItem","_guides","calculateGuidePositions","match","proximityListener","newActiveBoxLeft","newActiveBoxTop","haveMatch","Object","keys","haveXMatch","haveYMatch","forEach","axis","activeBoxGuides","matchedArray","proximity","activeBoxProximityIndex","activeBoxIndex","matchedBoxProximityIndex","matchedBoxIndex","value","DraggableItemLayer","guides","pageRefs","pages","useDragLayer","monitor","getSourceClientOffset","getInitialSourceClientOffset","isDragging","getItem","getItemType","activeElement","useBuilderStore","state","acceptedItems","usePropStore","itemAccessor","draggedItem","pageID","element","document","elementFromPoint","closest","getAttribute","itemStyle","additionalitems","mergedItem","getMergedItem","_jsxs","_jsx","cursor","height","outlineColor","transform","transformOrigin","width","ReportItem","ii","__itemStyle","propTypes","PropTypes","shape","arrayOf","memo"],"mappings":"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"}
+{"version":3,"file":"DraggableItemLayer.js","sources":["../../../../src/components/DraggableItem/DraggableItemLayer.js"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport ReportItemRenderer from '../Builder/ReportItemRenderer';\nimport { getCoordinatesFromMatches, getCorrectDroppedOffsetValue, getMatchesForItem } from '../../utils/functions';\nimport ItemPositioner from '../ItemPositioner';\nimport { useBuilderStore } from '../../contexts/BuilderContext';\nimport { usePropStore } from '../../contexts/PropContext';\nimport { useActiveElement } from '../../utils/hooks';\n\nconst getDraggedItem = ({ defaultItem = {}, details }, item) => ({\n  ...defaultItem,\n  ...details,\n  ...item,\n  id: 'temp',\n});\n\nconst DraggableItemLayer = ({\n  collectedProps = {},\n  guides = {},\n  pageRefs = {},\n}) => {\n  const {\n    currentOffset,\n    initialOffset,\n    isDragging,\n    item,\n  } = collectedProps;\n  const zoom = useBuilderStore(state => state.zoom);\n\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const itemAccessor = usePropStore(state => state.itemAccessor);\n\n  const referenceItem = useMemo(() => {\n    const _item = item.id ? item : getDraggedItem(acceptedItems[item.itemType], item);\n\n    // for a element that is dragging to the left panel\n    if (!_item.pageID) {\n      const element = document.elementFromPoint(currentOffset.x, currentOffset.y);\n      if (element && element.closest('.jfReport-page')) {\n        const pageID = element.closest('.jfReport-page').getAttribute('data-id');\n        return { ..._item, pageID };\n      }\n    }\n\n    return _item;\n  }, [\n    item,\n    acceptedItems,\n    currentOffset.x,\n    currentOffset.y,\n  ]);\n\n  const { pageID } = referenceItem;\n\n  const refCoords = useMemo(() => {\n    if (pageID) {\n      const dropTargetPosition = pageRefs[pageID].current.getBoundingClientRect();\n      const coords = getCorrectDroppedOffsetValue(\n        currentOffset,\n        initialOffset,\n        dropTargetPosition,\n        zoom,\n      );\n      const newItem = { ...referenceItem, ...coords };\n      const newMatches = getMatchesForItem(newItem, guides, zoom);\n      const { left, top } = getCoordinatesFromMatches(newItem, newMatches);\n      return {\n        x: (left * zoom) + dropTargetPosition.left,\n        y: (top * zoom) + dropTargetPosition.top,\n      };\n    }\n    return {\n      x: currentOffset.x,\n      y: currentOffset.y,\n    };\n  }, [\n    currentOffset,\n    initialOffset,\n    referenceItem,\n    pageID,\n    pageRefs,\n    zoom,\n    guides,\n  ]);\n\n  const getItemStyle = useCallback(({ x, y }, { height, width }) => {\n    return {\n      cursor: 'grabbing',\n      height,\n      left: x,\n      outlineColor: '#4277ff',\n      pointerEvents: 'none',\n      position: 'fixed',\n      top: y,\n      transform: `scale(${zoom})`,\n      transformOrigin: '0 0',\n      width,\n      zIndex: 100,\n    };\n  }, [zoom]);\n\n  const activeItems = useActiveElement();\n\n  const hasActiveItems = activeItems !== null && activeItems.length > 0;\n\n  // for a element is added from the left panel\n  const activeElements = hasActiveItems ? activeItems : [referenceItem];\n\n  return activeElements.map(activeItem => {\n    const coords = hasActiveItems ? {\n      x: refCoords.x - ((referenceItem.left - activeItem.left) * zoom),\n      y: refCoords.y - ((referenceItem.top - activeItem.top) * zoom),\n    } : refCoords;\n\n    const exactItem = hasActiveItems ? activeItem : referenceItem;\n\n    return (\n      <ItemPositioner\n        key={item.id}\n        classNames=\"reportItem isDraggingLayerElement\"\n        style={getItemStyle(coords, exactItem)}\n      >\n        <ReportItemRenderer item={exactItem}>\n          {ReportItem => (\n            <ReportItem\n              isDragging={isDragging}\n              item={exactItem}\n              itemAccessor={itemAccessor}\n              zoom={zoom}\n            />\n          )}\n        </ReportItemRenderer>\n      </ItemPositioner>\n    );\n  });\n};\n\nDraggableItemLayer.propTypes = {\n  collectedProps: PropTypes.shape({\n    currentOffset: PropTypes.shape({\n      x: PropTypes.number,\n      y: PropTypes.number,\n    }),\n    initialOffset: PropTypes.shape({\n      x: PropTypes.number,\n      y: PropTypes.number,\n    }),\n    isDragging: PropTypes.bool,\n    item: PropTypes.shape({}),\n    itemType: PropTypes.string,\n  }),\n  guides: PropTypes.shape({}),\n  pageRefs: PropTypes.shape({}),\n};\n\nexport default memo(DraggableItemLayer);\n"],"names":["getDraggedItem","item","defaultItem","details","id","DraggableItemLayer","collectedProps","guides","pageRefs","currentOffset","initialOffset","isDragging","zoom","useBuilderStore","state","acceptedItems","usePropStore","itemAccessor","referenceItem","useMemo","_item","itemType","pageID","element","document","elementFromPoint","x","y","closest","getAttribute","refCoords","dropTargetPosition","current","getBoundingClientRect","coords","getCorrectDroppedOffsetValue","newItem","newMatches","getMatchesForItem","getCoordinatesFromMatches","left","top","getItemStyle","useCallback","height","width","cursor","outlineColor","pointerEvents","position","transform","transformOrigin","zIndex","activeItems","useActiveElement","hasActiveItems","length","activeElements","map","activeItem","exactItem","_jsx","ReportItem","propTypes","PropTypes","shape","number","bool","string","memo"],"mappings":"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"}

package/lib/esm/components/PageItemResizer.js

@@ -8,6 +8,8 @@ import CustomToolbarWrapper from './TextEditor/CustomToolbar/CustomToolbarWrappe
 import DraggableItemActions from './DraggableItem/DraggableItemActions.js';
 import ItemPositioner from './ItemPositioner.js';
 import withClickOutside from './withClickOutside.js';
+import { useBuilderStore } from '../contexts/BuilderContext.js';
+import { isSelectedItem } from '../utils/functions.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 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; }
@@ -46,21 +48,32 @@ var PageItemResizer = function PageItemResizer(_ref) {
       deleteItem = _ref.deleteItem,
       duplicateItem = _ref.duplicateItem,
       isDragging = _ref.isDragging,
-      isMultipleItemSelected = _ref.isMultipleItemSelected,
-      isSelectedElement = _ref.isSelectedElement,
-      isTextEditorOpen = _ref.isTextEditorOpen,
       item = _ref.item,
       onClickOutside = _ref.onClickOutside,
       onResize = _ref.onResize,
       onResizeStop = _ref.onResizeStop,
       pageID = _ref.pageID,
-      setActiveElement = _ref.setActiveElement,
-      setIsRightPanelOpen = _ref.setIsRightPanelOpen,
       stateHeight = _ref.stateHeight,
       stateLeft = _ref.stateLeft,
       stateTop = _ref.stateTop,
-      stateWidth = _ref.stateWidth,
-      zoom = _ref.zoom;
+      stateWidth = _ref.stateWidth;
+  var zoom = useBuilderStore(function (state) {
+    return state.zoom;
+  });
+  var setIsRightPanelOpen = useBuilderStore(function (state) {
+    return state.setIsRightPanelOpen;
+  });
+  var setActiveElement = useBuilderStore(function (state) {
+    return state.setActiveElement;
+  });
+  var activeElement = useBuilderStore(function (state) {
+    return state.activeElement;
+  });
+  var isTextEditorOpen = useBuilderStore(function (state) {
+    return state.isTextEditorOpen;
+  });
+  var isSelected = isSelectedItem(item.id, activeElement);
+  var isMultipleItemSelected = activeElement !== null && activeElement.length > 1;
   var requestRef = useRef();
 
   var _useState = useState(false),
@@ -128,7 +141,7 @@ var PageItemResizer = function PageItemResizer(_ref) {
     setIsRightPanelOpen(true);
   }, [item.id, setIsRightPanelOpen, setActiveElement]);
   var isLocked = item.isLocked;
-  if (isDragging || !isSelectedElement) return null;
+  if (isDragging || !isSelected) return null;
   return /*#__PURE__*/createPortal( /*#__PURE__*/jsxs(ItemPositioner, {
     style: itemPositionerStyle,
     children: [/*#__PURE__*/jsx(ResizableWithClickOutside, _objectSpread(_objectSpread({

package/lib/esm/components/PageItemResizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageItemResizer.js","sources":["../../../src/components/PageItemResizer.js"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Resizable } from 're-resizable';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport { resizeStaticProps } from '../constants/staticProps';\nimport TextEditorToolbar from './TextEditor/CustomToolbar';\n\nimport DraggableItemActions from './DraggableItem/DraggableItemActions';\nimport ItemPositioner from './ItemPositioner';\nimport withClickOutside from './withClickOutside';\n\nconst ResizableWithClickOutside = withClickOutside(Resizable);\n\nconst enableResize = {\n  bottom: true,\n  bottomLeft: true,\n  bottomRight: true,\n  left: true,\n  right: true,\n  top: true,\n  topLeft: true,\n  topRight: true,\n};\nconst lockAspectRatioTypes = ['image', 'icon'];\nconst exceptionalClasses = [\n  'reportHandle',\n  'reportItemMenu',\n  'jfReport-pane',\n  'pageSettingSideBtn',\n  'reportItemWrapper',\n  'reportRotater',\n  'forZoom',\n  'ql-toolbar',\n  'jSheetContextMenu',\n  'reset-default-contextMenu',\n];\n\nconst PageItemResizer = ({\n  changeLockStatus,\n  deleteItem,\n  duplicateItem,\n  isDragging,\n  isMultipleItemSelected,\n  isSelectedElement,\n  isTextEditorOpen,\n  item,\n  onClickOutside,\n  onResize,\n  onResizeStop,\n  pageID,\n  setActiveElement,\n  setIsRightPanelOpen,\n  stateHeight,\n  stateLeft,\n  stateTop,\n  stateWidth,\n  zoom,\n}) => {\n  const requestRef = useRef();\n  const [lockAspectRatio, setLockAspectRatio] = useState(false);\n\n  const handleKeyUp = e => {\n    if (!e.shiftKey) setLockAspectRatio(false);\n  };\n\n  const handleKeyDown = e => {\n    if (e.shiftKey) setLockAspectRatio(true);\n  };\n\n  const seriousResize = (deltaWidth, deltaHeight, direction) => {\n    return () => {\n      onResize(deltaWidth, deltaHeight, direction);\n      requestRef.current = undefined;\n    };\n  };\n\n  const onResizeStart = e => {\n    e.preventDefault();\n    window.addEventListener('keydown', handleKeyDown);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  const onResizeRAF = (e, direction, ref, { height: deltaHeight, width: deltaWidth }) => {\n    if (!requestRef.current) {\n      requestRef.current = global\n        .requestAnimationFrame(\n          seriousResize(\n            Math.round(deltaWidth * (1 / zoom)),\n            Math.round(deltaHeight * (1 / zoom)),\n            direction,\n          ),\n        );\n    }\n  };\n\n  const onResizeEnd = (e, direction, ref, { height: deltaHeight, width: deltaWidth }) => {\n    onResizeStop(\n      Math.round(deltaWidth * (1 / zoom)),\n      Math.round(deltaHeight * (1 / zoom)),\n      direction,\n    );\n    window.removeEventListener('keydown', handleKeyDown);\n    window.removeEventListener('keyup', handleKeyUp);\n  };\n\n  const itemPositionerStyle = useMemo(() => ({\n    height: Math.round(stateHeight * zoom),\n    left: Math.round(stateLeft * zoom),\n    pointerEvents: 'none',\n    position: 'absolute',\n    top: Math.round(stateTop * zoom),\n    touchAction: 'none',\n    width: Math.round(stateWidth * zoom),\n  }), [stateHeight, stateLeft, stateTop, stateWidth, zoom]);\n\n  const size = useMemo(() => ({\n    height: Math.round(stateHeight * zoom),\n    width: Math.round(stateWidth * zoom),\n  }), [stateHeight, stateWidth, zoom]);\n\n  const openSettings = useCallback(() => {\n    setActiveElement(item.id);\n    setIsRightPanelOpen(true);\n  }, [item.id, setIsRightPanelOpen, setActiveElement]);\n\n  const { isLocked } = item;\n\n  if (isDragging || !isSelectedElement) return null;\n  return createPortal(\n    <ItemPositioner\n      style={itemPositionerStyle}\n    >\n      <ResizableWithClickOutside\n        className={classNames(\n          'reportItemResizer',\n          { hideVerticalHandle: !(item.height > 50) },\n          { hideHorizontalHandle: !(item.width > 50) },\n        )}\n        enable={!item.isLocked && enableResize}\n        exceptionalClasses={exceptionalClasses}\n        lockAspectRatio={lockAspectRatioTypes.includes(item.itemType) || lockAspectRatio}\n        onClickOutside={onClickOutside}\n        onResize={onResizeRAF}\n        onResizeStart={onResizeStart}\n        onResizeStop={onResizeEnd}\n        size={size}\n        {...resizeStaticProps}\n        withClickOutsideWrapperClass={`reportItemResizer-wrapper${isLocked ? ' isLocked' : ''}`}\n      />\n      <DraggableItemActions\n        changeLockStatus={changeLockStatus}\n        deleteItem={deleteItem}\n        duplicateItem={duplicateItem}\n        isLocked={item.isLocked}\n        isMultipleItemSelected={isMultipleItemSelected}\n        openSettings={openSettings}\n      />\n      <TextEditorToolbar\n        isTextEditorOpen={isTextEditorOpen}\n        itemWidth={stateWidth * zoom}\n      />\n    </ItemPositioner>,\n    document.querySelector(`.jfReport-page[data-id=\"${pageID}\"]`),\n  );\n};\n\nexport default PageItemResizer;\n"],"names":["ResizableWithClickOutside","withClickOutside","Resizable","enableResize","bottom","bottomLeft","bottomRight","left","right","top","topLeft","topRight","lockAspectRatioTypes","exceptionalClasses","PageItemResizer","changeLockStatus","deleteItem","duplicateItem","isDragging","isMultipleItemSelected","isSelectedElement","isTextEditorOpen","item","onClickOutside","onResize","onResizeStop","pageID","setActiveElement","setIsRightPanelOpen","stateHeight","stateLeft","stateTop","stateWidth","zoom","requestRef","useRef","useState","lockAspectRatio","setLockAspectRatio","handleKeyUp","e","shiftKey","handleKeyDown","seriousResize","deltaWidth","deltaHeight","direction","current","undefined","onResizeStart","preventDefault","window","addEventListener","onResizeRAF","ref","height","width","global","requestAnimationFrame","Math","round","onResizeEnd","removeEventListener","itemPositionerStyle","useMemo","pointerEvents","position","touchAction","size","openSettings","useCallback","id","isLocked","createPortal","_jsxs","_jsx","classNames","hideVerticalHandle","hideHorizontalHandle","includes","itemType","resizeStaticProps","TextEditorToolbar","document","querySelector"],"mappings":"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"}
+{"version":3,"file":"PageItemResizer.js","sources":["../../../src/components/PageItemResizer.js"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Resizable } from 're-resizable';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport { resizeStaticProps } from '../constants/staticProps';\nimport TextEditorToolbar from './TextEditor/CustomToolbar';\n\nimport DraggableItemActions from './DraggableItem/DraggableItemActions';\nimport ItemPositioner from './ItemPositioner';\nimport withClickOutside from './withClickOutside';\nimport { useBuilderStore } from '../contexts/BuilderContext';\nimport { isSelectedItem } from '../utils/functions';\n\nconst ResizableWithClickOutside = withClickOutside(Resizable);\n\nconst enableResize = {\n  bottom: true,\n  bottomLeft: true,\n  bottomRight: true,\n  left: true,\n  right: true,\n  top: true,\n  topLeft: true,\n  topRight: true,\n};\nconst lockAspectRatioTypes = ['image', 'icon'];\nconst exceptionalClasses = [\n  'reportHandle',\n  'reportItemMenu',\n  'jfReport-pane',\n  'pageSettingSideBtn',\n  'reportItemWrapper',\n  'reportRotater',\n  'forZoom',\n  'ql-toolbar',\n  'jSheetContextMenu',\n  'reset-default-contextMenu',\n];\n\nconst PageItemResizer = ({\n  changeLockStatus,\n  deleteItem,\n  duplicateItem,\n  isDragging,\n  item,\n  onClickOutside,\n  onResize,\n  onResizeStop,\n  pageID,\n  stateHeight,\n  stateLeft,\n  stateTop,\n  stateWidth,\n}) => {\n  const zoom = useBuilderStore(state => state.zoom);\n  const setIsRightPanelOpen = useBuilderStore(state => state.setIsRightPanelOpen);\n  const setActiveElement = useBuilderStore(state => state.setActiveElement);\n  const activeElement = useBuilderStore(state => state.activeElement);\n  const isTextEditorOpen = useBuilderStore(state => state.isTextEditorOpen);\n\n  const isSelected = isSelectedItem(item.id, activeElement);\n  const isMultipleItemSelected = activeElement !== null && activeElement.length > 1;\n\n  const requestRef = useRef();\n  const [lockAspectRatio, setLockAspectRatio] = useState(false);\n\n  const handleKeyUp = e => {\n    if (!e.shiftKey) setLockAspectRatio(false);\n  };\n\n  const handleKeyDown = e => {\n    if (e.shiftKey) setLockAspectRatio(true);\n  };\n\n  const seriousResize = (deltaWidth, deltaHeight, direction) => {\n    return () => {\n      onResize(deltaWidth, deltaHeight, direction);\n      requestRef.current = undefined;\n    };\n  };\n\n  const onResizeStart = e => {\n    e.preventDefault();\n    window.addEventListener('keydown', handleKeyDown);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  const onResizeRAF = (e, direction, ref, { height: deltaHeight, width: deltaWidth }) => {\n    if (!requestRef.current) {\n      requestRef.current = global\n        .requestAnimationFrame(\n          seriousResize(\n            Math.round(deltaWidth * (1 / zoom)),\n            Math.round(deltaHeight * (1 / zoom)),\n            direction,\n          ),\n        );\n    }\n  };\n\n  const onResizeEnd = (e, direction, ref, { height: deltaHeight, width: deltaWidth }) => {\n    onResizeStop(\n      Math.round(deltaWidth * (1 / zoom)),\n      Math.round(deltaHeight * (1 / zoom)),\n      direction,\n    );\n    window.removeEventListener('keydown', handleKeyDown);\n    window.removeEventListener('keyup', handleKeyUp);\n  };\n\n  const itemPositionerStyle = useMemo(() => ({\n    height: Math.round(stateHeight * zoom),\n    left: Math.round(stateLeft * zoom),\n    pointerEvents: 'none',\n    position: 'absolute',\n    top: Math.round(stateTop * zoom),\n    touchAction: 'none',\n    width: Math.round(stateWidth * zoom),\n  }), [stateHeight, stateLeft, stateTop, stateWidth, zoom]);\n\n  const size = useMemo(() => ({\n    height: Math.round(stateHeight * zoom),\n    width: Math.round(stateWidth * zoom),\n  }), [stateHeight, stateWidth, zoom]);\n\n  const openSettings = useCallback(() => {\n    setActiveElement(item.id);\n    setIsRightPanelOpen(true);\n  }, [item.id, setIsRightPanelOpen, setActiveElement]);\n\n  const { isLocked } = item;\n\n  if (isDragging || !isSelected) return null;\n  return createPortal(\n    <ItemPositioner\n      style={itemPositionerStyle}\n    >\n      <ResizableWithClickOutside\n        className={classNames(\n          'reportItemResizer',\n          { hideVerticalHandle: !(item.height > 50) },\n          { hideHorizontalHandle: !(item.width > 50) },\n        )}\n        enable={!item.isLocked && enableResize}\n        exceptionalClasses={exceptionalClasses}\n        lockAspectRatio={lockAspectRatioTypes.includes(item.itemType) || lockAspectRatio}\n        onClickOutside={onClickOutside}\n        onResize={onResizeRAF}\n        onResizeStart={onResizeStart}\n        onResizeStop={onResizeEnd}\n        size={size}\n        {...resizeStaticProps}\n        withClickOutsideWrapperClass={`reportItemResizer-wrapper${isLocked ? ' isLocked' : ''}`}\n      />\n      <DraggableItemActions\n        changeLockStatus={changeLockStatus}\n        deleteItem={deleteItem}\n        duplicateItem={duplicateItem}\n        isLocked={item.isLocked}\n        isMultipleItemSelected={isMultipleItemSelected}\n        openSettings={openSettings}\n      />\n      <TextEditorToolbar\n        isTextEditorOpen={isTextEditorOpen}\n        itemWidth={stateWidth * zoom}\n      />\n    </ItemPositioner>,\n    document.querySelector(`.jfReport-page[data-id=\"${pageID}\"]`),\n  );\n};\n\nexport default PageItemResizer;\n"],"names":["ResizableWithClickOutside","withClickOutside","Resizable","enableResize","bottom","bottomLeft","bottomRight","left","right","top","topLeft","topRight","lockAspectRatioTypes","exceptionalClasses","PageItemResizer","changeLockStatus","deleteItem","duplicateItem","isDragging","item","onClickOutside","onResize","onResizeStop","pageID","stateHeight","stateLeft","stateTop","stateWidth","zoom","useBuilderStore","state","setIsRightPanelOpen","setActiveElement","activeElement","isTextEditorOpen","isSelected","isSelectedItem","id","isMultipleItemSelected","length","requestRef","useRef","useState","lockAspectRatio","setLockAspectRatio","handleKeyUp","e","shiftKey","handleKeyDown","seriousResize","deltaWidth","deltaHeight","direction","current","undefined","onResizeStart","preventDefault","window","addEventListener","onResizeRAF","ref","height","width","global","requestAnimationFrame","Math","round","onResizeEnd","removeEventListener","itemPositionerStyle","useMemo","pointerEvents","position","touchAction","size","openSettings","useCallback","isLocked","createPortal","_jsxs","_jsx","classNames","hideVerticalHandle","hideHorizontalHandle","includes","itemType","resizeStaticProps","TextEditorToolbar","document","querySelector"],"mappings":"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"}

package/lib/esm/components/Panels/SlidesPanel/SortablePageList.js

@@ -162,11 +162,9 @@ var SortablePageList = function SortablePageList() {
             ref: virtuosoRef,
             fixedItemHeight: 127,
             itemContent: function itemContent(index) {
-              var page = pageGetter(index);
-              if (!page) return null;
               return /*#__PURE__*/jsx(SortablePageItemRenderer, {
                 data: itemData,
-                id: page.id,
+                id: index.toString(),
                 index: index,
                 style: {
                   height: 127