daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

Home Page:https://daybrush.com/moveable/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

After selecting multiple targets, the control-box will follow you later when scaling.

tara-PJY opened this issue · comments

Environments

  • Framework name:
  • Framework version:@types/react 18.2.43
  • Moveable Component version: 0.56.0
  • Testable Address(optional):

Description

코드는 테스트로 간단하게 적용하였습니다.

function Editor() {
  const Test2 = () => {
    const AA = [];
    for (let i = 0; i < 100; i++) {
      AA.push(<div className="element" style={{ position: 'absolute', width: '100px', height: '100px', backgroundColor: 'red' }}></div>);
    }

    return AA;
  };
  return (
    <div className="App">
      <Moveable
        target={`.element`}
        draggable={true}
        scalable={true}
        onRender={(e) => {
          e.target.style.cssText += e.cssText;
        }}
        onRenderGroup={(e) => {
          e.events.forEach((ev) => {
            ev.target.style.cssText += ev.cssText;
          });
        }}
      />
      {Test2()}
    </div>
  );
}

The control-box will follow lately when you import 100 elements and scale the entire selection.

How can we solve this problem?

bandicam.2024-01-26.16-07-39-088.mp4