Class DragOverlayInternal

packages/editor/src/components/drag_overlay.tsx:55–113

}

class DragOverlayInternal extends React.Component<DragOverlayInternalProps, DragOverlayInternalState> {
  constructor(props) {
    super(props)
    this.state = {
      x: this.props.initialX,
      y: this.props.initialY,
    }
  }

  render() {
    const { fragment } = this.props
    const { x, y } = this.state
    return (
      <div onMouseUp={this.onMouseUp} onMouseMove={this.onMouseMove}>
        <svg
          className="drag-overlay"
          xmlns="http://www.w3.org/2000/svg"
          height={window.innerHeight}
          width={window.innerWidth}
          preserveAspectRatio="none"
        >
          <g transform={`translate(${x} ${y})`}>
            <FragmentView fragment={fragment} />
          </g>
        </svg>
      </div>
    )
  }

  onMouseUp = (event: React.MouseEvent) => {
    const { selection, fragment, editorRef } = this.props

    const refBox = editorRef.current.getBoundingClientRect()
    const x = event.pageX - refBox.left
    const y = event.pageY - refBox.top

    selection.placeCursorByXYCoordinate(x, y)
    selection.insertFragment(fragment.fragment.clone())
    this.props.onEndDrag()
  }

  onMouseMove = (event: React.MouseEvent) => {
    if (event.buttons === 0) {
      this.props.onEndDrag()
    } else {
      const { selection } = this.props
      this.setState({
        x: event.pageX,
        y: event.pageY,
      })
      const refBox = this.props.editorRef.current.getBoundingClientRect()
      const x = event.pageX - refBox.left
      const y = event.pageY - refBox.top

      // TODO: Only allow cursors in positions that make sense.
      selection.placeCursorByXYCoordinate(x, y)
    }
  }