@wordpress/block-editor/build/components/grid/grid-item-resizer.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.GridItemResizer = GridItemResizer;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
var _cover = _interopRequireDefault(require("../block-popover/cover"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function GridItemResizer({
  clientId,
  bounds,
  onChange,
  parentLayout
}) {
  const blockElement = (0, _useBlockRefs.useBlockElement)(clientId);
  const rootBlockElement = blockElement?.parentElement;
  const {
    isManualPlacement
  } = parentLayout;
  if (!blockElement || !rootBlockElement) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridItemResizerInner, {
    clientId: clientId,
    bounds: bounds,
    blockElement: blockElement,
    rootBlockElement: rootBlockElement,
    onChange: onChange,
    isManualGrid: isManualPlacement && window.__experimentalEnableGridInteractivity
  });
}
function GridItemResizerInner({
  clientId,
  bounds,
  blockElement,
  rootBlockElement,
  onChange,
  isManualGrid
}) {
  const [resizeDirection, setResizeDirection] = (0, _element.useState)(null);
  const [enableSide, setEnableSide] = (0, _element.useState)({
    top: false,
    bottom: false,
    left: false,
    right: false
  });
  (0, _element.useEffect)(() => {
    const observer = new window.ResizeObserver(() => {
      const blockClientRect = blockElement.getBoundingClientRect();
      const rootBlockClientRect = rootBlockElement.getBoundingClientRect();
      setEnableSide({
        top: blockClientRect.top > rootBlockClientRect.top,
        bottom: blockClientRect.bottom < rootBlockClientRect.bottom,
        left: blockClientRect.left > rootBlockClientRect.left,
        right: blockClientRect.right < rootBlockClientRect.right
      });
    });
    observer.observe(blockElement);
    return () => observer.disconnect();
  }, [blockElement, rootBlockElement]);
  const justification = {
    right: 'left',
    left: 'right'
  };
  const alignment = {
    top: 'flex-end',
    bottom: 'flex-start'
  };
  const styles = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    ...(justification[resizeDirection] && {
      justifyContent: justification[resizeDirection]
    }),
    ...(alignment[resizeDirection] && {
      alignItems: alignment[resizeDirection]
    })
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cover.default, {
    className: "block-editor-grid-item-resizer",
    clientId: clientId,
    __unstablePopoverSlot: "__unstable-block-tools-after",
    additionalStyles: styles,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ResizableBox, {
      className: "block-editor-grid-item-resizer__box",
      size: {
        width: '100%',
        height: '100%'
      },
      enable: {
        bottom: enableSide.bottom,
        bottomLeft: false,
        bottomRight: false,
        left: enableSide.left,
        right: enableSide.right,
        top: enableSide.top,
        topLeft: false,
        topRight: false
      },
      bounds: bounds,
      boundsByDirection: true,
      onPointerDown: ({
        target,
        pointerId
      }) => {
        /*
         * Captures the pointer to avoid hiccups while dragging over objects
         * like iframes and ensures that the event to end the drag is
         * captured by the target (resize handle) whether or not it’s under
         * the pointer.
         */
        target.setPointerCapture(pointerId);
      },
      onResizeStart: (event, direction) => {
        /*
         * The container justification and alignment need to be set
         * according to the direction the resizer is being dragged in,
         * so that it resizes in the right direction.
         */
        setResizeDirection(direction);
      },
      onResizeStop: (event, direction, boxElement) => {
        const columnGap = parseFloat((0, _utils.getComputedCSS)(rootBlockElement, 'column-gap'));
        const rowGap = parseFloat((0, _utils.getComputedCSS)(rootBlockElement, 'row-gap'));
        const gridColumnTracks = (0, _utils.getGridTracks)((0, _utils.getComputedCSS)(rootBlockElement, 'grid-template-columns'), columnGap);
        const gridRowTracks = (0, _utils.getGridTracks)((0, _utils.getComputedCSS)(rootBlockElement, 'grid-template-rows'), rowGap);
        const rect = new window.DOMRect(blockElement.offsetLeft + boxElement.offsetLeft, blockElement.offsetTop + boxElement.offsetTop, boxElement.offsetWidth, boxElement.offsetHeight);
        const columnStart = (0, _utils.getClosestTrack)(gridColumnTracks, rect.left) + 1;
        const rowStart = (0, _utils.getClosestTrack)(gridRowTracks, rect.top) + 1;
        const columnEnd = (0, _utils.getClosestTrack)(gridColumnTracks, rect.right, 'end') + 1;
        const rowEnd = (0, _utils.getClosestTrack)(gridRowTracks, rect.bottom, 'end') + 1;
        onChange({
          columnSpan: columnEnd - columnStart + 1,
          rowSpan: rowEnd - rowStart + 1,
          columnStart: isManualGrid ? columnStart : undefined,
          rowStart: isManualGrid ? rowStart : undefined
        });
      }
    })
  });
}
//# sourceMappingURL=grid-item-resizer.js.map