@lobehub/editor/es/plugins/image/react/components/ResizeHandle.js

A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.

import { cx } from 'antd-style';
import { useCallback, useRef } from 'react';
import { styles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
export var ResizeHandle = function ResizeHandle(_ref) {
  var imageRef = _ref.imageRef,
    isBlock = _ref.isBlock,
    onResize = _ref.onResize,
    onResizeEnd = _ref.onResizeEnd,
    onResizeStart = _ref.onResizeStart,
    position = _ref.position;
  var startWidthRef = useRef(0);
  var handleMouseDown = useCallback(function (e) {
    var _imageRef$current;
    e.preventDefault();
    e.stopPropagation();

    // Get the actual current width at mousedown time
    var initialWidth = ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.offsetWidth) || 0;
    startWidthRef.current = initialWidth;

    // Notify parent component of the initial width
    onResizeStart(initialWidth);
    var startX = e.clientX;
    var startY = e.clientY;
    var rect = isBlock ? e.target.getBoundingClientRect() : {
      height: 0,
      left: 0,
      top: 0,
      width: 0
    };
    var centerX = rect.left + rect.width / 2;
    var lastDeltaX = 0;
    var lastDeltaY = 0;
    var handleMouseMove = function handleMouseMove(e) {
      var deltaX = e.clientX - startX;
      var deltaY = e.clientY - startY;

      // Only adjust deltaX based on the resize handle position
      switch (position) {
        case 'left':
          {
            deltaX = isBlock ? centerX - e.clientX : -deltaX;
            break;
          }
        case 'right':
          {
            if (isBlock) {
              deltaX = e.clientX - centerX;
            }
            break;
          }
      }
      lastDeltaX = deltaX;
      lastDeltaY = deltaY;
      onResize(deltaX, deltaY, position);
    };
    var handleMouseUp = function handleMouseUp() {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      if (typeof onResizeEnd === 'function') {
        onResizeEnd(lastDeltaX, lastDeltaY);
      }
    };
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }, [imageRef, isBlock, onResize, onResizeEnd, onResizeStart, position]);
  return /*#__PURE__*/_jsx("div", {
    className: cx(styles.resizeHandle, position === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight),
    onMouseDown: handleMouseDown
  });
};
ResizeHandle.displayName = 'ResizeHandle';