드래그 가능한 요소로 확대/축소 및 이동에 반응

드래그 가능한 요소를 만든 다음 화면에서 이동하고 마우스 이벤트를 사용하여 확대/축소하려고 합니다. 그러면 React를 사용하여 어떻게 구현할 수 있습니까?

이러한 기능을 제공할 수 있는 패키지를 찾기 위해 npm.io에서 검색 중이었습니다. 마지막으로 원하는 것을 구현할 수 있는 몇 가지 패키지를 찾았습니다. 여기에서 결과를 공유하고 이러한 패키지를 서로 통합하는 방법을 강조하고 싶습니다.



첫 번째 장에서는 드래그 가능한 요소를 만드는 방법에 대해 설명합니다.
react-draggable , 이 패키지는 JavaScript를 사용하여 드래그 가능한 요소를 제공할 수 있는 강력합니다.

사용하기 매우 쉽고 강력한 기능이 있습니다.

아래 코드 스니펫은 드래그 가능한 요소를 만드는 방법을 설명합니다. 끌 수 있는 요소에는 끌 때 시작하거나 끝에서 업데이트 상태와 같은 일부 루틴을 수행하거나 작업을 수행할 때 호출되는 강력한 기능이 있습니다.

import * as React from 'react'
import Draggable from 'react-draggable'

export default function Table(props: ITableProps
                                    & ITableOptionsProps) {

    return (
        <Draggable onDrag={props.onDrag} onStop={props.onStop}>
            <div className='table'>

                <div className='table-name'>
                    <h3>{props.name}</h3>
                </div>

                {props.att.map((value,index)=>(

                    <div key={index} className='attribute' id={props.name+"."+value.name}>
                        <div className='element'><h3>{value.name}</h3></div>
                        <div className='element type'><h3>{value.type}</h3></div>
                        <div className='element null'><h3>{value.null}</h3></div>
                        <div className='element pk'>{value.pk?<h3>pk</h3>:null}</div>
                    </div>
                ))}
            </div>
        </Draggable>
    );}

CSS:

.table{
  position: fixed;
  display: flex;
  flex-direction: column;
  cursor: move;
  align-items: center;
  background-color: transparent;
  min-width: 380px;
  min-height: 200px;
  border: 2px solid #9BA1A6;
  border-radius: 7px;
}

위 코드 블록의 출력은 div에 테이블이라는 스타일 클래스가 있습니다<div className='table'>. 이러한 테이블 요소는 마우스를 사용하여 페이지 주위를 끌 수 있습니다.

이제 두 번째 장에서는 react-zoom-pan-pinch이라는 훌륭한 패키지를 사용하여 확대/축소 및 이동을 제공할 수 있는 변환 래퍼를 빌드하는 방법을 설명합니다. react-zoom-pan-pinch는 변환 래퍼, 변환 구성 요소 및 변환을 제공하는 강력한 패키지입니다. 줌 제어 기능.

드래그 가능한 요소를 만든 후에는 확대/축소 제어를 활성화하고 요소를 그룹으로 패닝할 수 있도록 변환 래퍼에 이러한 요소를 포함해야 합니다.

import * as React from 'react';
import { AppContext } from '../../context';
import Table from '../table';
import { 
TransformWrapper, 
TransformComponent 
} from "react-zoom-pan-pinch";


export default function Main(props: IMainProps) {
  const context = React.useContext(AppContext)
  const [isMoveable, setIsMoveable] = React.useState<boolean>(false);

  const onDrag = () => {
    setIsMoveable(true)
    //etc
  }
  const onStop = () => {
    setIsMoveable(false)
    //etc 

  }


  return (
    <>
      <TransformWrapper
        initialScale={1}
        disabled={isMoveable}
        minScale={.5}
        maxScale={1}
        limitToBounds={false}
        onPanning={updateXarrow}
        onZoom={updateXarrow}
        pinch={{ step: 5 }}
      >

        <TransformComponent 
          contentClass='main' 
          wrapperStyle={{ height: '100vh', width: '80vw' }}>


          {context?.database.schema.map((value, index) => (
            <Table 
              key={index} 
              name={value.name} 
              att={value.att} 
              onDrag={onDrag} 
              onStop={onStop}/>
          ))}

        </TransformComponent>
      </TransformWrapper>

    </>
  );
}

변환 구성 요소의 콘텐츠에 대한 CSS:

.main{
  display: flex;
  flex-direction: row;
  position: absolute;
}

드래그 가능한 요소에 두 가지 함수를 전달했습니다. 첫 번째 함수는 onDrag입니다. 이 함수는 사용자가 드래그 요소를 시작할 때 수행하고 마지막 onStop은 사용자가 요소 드래그를 마쳤을 때 수행합니다. 이 함수 사용의 주요 아이디어는 다음과 같습니다.

드래그할 수 있는 요소와 변환 래퍼 간의 충돌을 수정하기 위해 변환 래퍼에 대한 활성화 컨트롤을 제공합니다.

두 개의 드래그 가능한 요소 사이에 화살표가 있고 하나를 이동한 다음 화살표 위치를 업데이트해야 하는 경우와 같은 일부 업데이트 기능을 수행합니다.

이제 드래그 가능한 요소와 변환 래퍼가 있으므로 Githubsql builder tool를 방문하여 소스 코드가 포함된 전체 예제를 얻을 수 있습니다.