【React】指定した要素をタッチで移動・サイズ変更・回転できるライブラリ「react-resizable-rotatable-draggable-touch-v2」

以前、指定した要素をマウスドラッグで移動・サイズ変更・回転ができるライブラリ「re-position」をご紹介しました。
が、こちらのライブラリがタブレットなどタッチ操作を行える端末での動作に対応していなかったため、別のライブラリを検討することに。
その時に見つけたのが、今回紹介する「react-resizable-rotatable-draggable-touch-v2」ライブラリです。

GitHub のページはこちらから。

vlad-x/react-resizable-rotatable-draggable: A rectangle react component which can be resized and rotated
https://github.com/vlad-x/react-resizable-rotatable-draggable

ライブラリ名からわかるように、タッチ操作で指定した要素の移動、サイズ変更、回転を行うことができます。

ライブラリのインストールは下記のコマンドで行います。

npm install --save react-resizable-rotatable-draggable-touch-v2 styled-components

なお、この時 styled-components ライブラリも併せてインストールしてください。

サンプルコードは、GitHub で掲載しているものがとても分かりやすかったので、そのまま転載させていただきます。

import React, { Component } from 'react'
import ResizableRect from 'react-resizable-rotatable-draggable-touch-v2'

class App extends Component {
  constructor() {
    super()
    this.state = {
      width: 100,
      height: 100,
      top: 100,
      left: 100,
      rotateAngle: 0
    }
  }

  handleResize = ({ style: { top, left, width, height }, isShiftKey, type, event }) => {
    this.setState({
      top: Math.round(top),
      left: Math.round(left),
      width: Math.round(width),
      height: Math.round(height)
    })
  }

  handleRotate = ({ rotateAngle, event }) => {
    this.setState({ rotateAngle: rotateAngle })
  }

  handleDrag = ({ deltaX, deltaY, event }) => {
    this.setState({
      left: this.state.left + deltaX,
      top: this.state.top + deltaY
    })
  }

  render() {
    const {width, top, left, height, rotateAngle} = this.state
    return (
      <div className="App">
        <ResizableRect
          left={left}
          top={top}
          width={width}
          height={height}
          rotateAngle={rotateAngle}
          zoomable='n, w, s, e, nw, ne, se, sw'
          onRotate={this.handleRotate}
          onResize={this.handleResize}
          onDrag={this.handleDrag}
          color="#6963da"
        >Hello world</ResizableRect>
      </div>
    )
  }
}

export default App

個人的に良い！と思ったのが zoomable プロパティで、サイズ変更ができる方向を指定できる点です。
上下左右と右上左上右下左下の計 8か所の有効/無効を指定できます。
私の場合、縦方向のみのサイズ変更を行いたい要素と、横方向のみのサイズ変更を行いたい要素があったので、それぞれ zoomable='n, s'、zoomable='w, e' と指定しました。
なお、空文字列を指定すると、サイズが変更できなくなります。

あと color は枠線の色と回転の矢印の色を指定できます。
色コードでの指定以外にも、rgba での指定もできました。

以上、React で指定した要素をタッチで移動・サイズ変更・回転できるライブラリ「react-resizable-rotatable-draggable-touch-v2」のご紹介でした。
ご参考になれば幸いです。