Feature request: Resize in both the dragged direction and its opposite?

[Nantris]

trafficstars

Overview of the problem

I'm using react-rnd version 10.2.1

My browser is: Chrome 82

I am sure this issue is not a duplicate? Pretty certain, but maybe I missed it

Description

Feature request: When dragging in one direction, is it possible to have the box grow in that direction and its opposite? For example, if you drag the left edge, the box would grow on both the left and right sides simultaneously.

[sujoyduttajad]

It's possible and I have created it. But it depends on the containers inside which you are creating this draggable component. If you are using position: relative; which should be the same in all the parent containers then the component will resize in both the direction provided there is no bounds. To remove this just add position: absolute;

[Nantris]

@sujoyduttajad great tip! Does resizing from the left edge/corners work properly for you though? For us, it instead does a weird hybrid move/grow when we set it to use position: relative;

[sujoyduttajad]

You need to set the parameters accordingly, I mean for which direction you want the resize to occur. For ex- if you did left: true and other directions as false then resize will happen only on left. For me I haven't faced any corner resize issue.

[Nantris]

Unfortunately we have all directions of resize enabled when we're seeing this issue.

Dragging right: The box expands left and right, with the mid-point remaining fixed

Dragging left: The box expands leftward, but the right edge also moves leftward, at maybe half the rate that the left edge does. This results in the mid-point of the box moving leftward.

[noffy-tech]

Try this will help you. Dont use onResizeStop to set the positions

<Rnd
            bounds="window"
            size={{ width: position.width, height: position.height }}
            position={{ x: position.x, y: position.y }}
            minWidth={minWidthDialog}
            minHeight={minHeightDialog}
            dragHandleClassName="draggable-title"
            enableUserSelectHack={false}
            onDragStop={onDragStop}
            onResize={onResize}
          >

onResize :

const onResize: RndResizeCallback = (_e, _direction, ref) => {
    const { x, y } = ref.getBoundingClientRect();
    const onResizePosition = {
      x,
      y,
      width: ref.clientWidth,
      height: ref.clientHeight,
    };
    setPosition(onResizePosition);
  };

onDragStop :

const onDragStop: RndDragCallback = (_e, d) => {
    setPosition(previous => ({ ...previous, x: d.x, y: d.y }));
  };