<commit_before>import React from 'react';

export default class MouseMoveActionLayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAction: false,
      startPoint: {x: 0, y: 0},
    };
    this.canvas = null;
    this.ctx = null;
    this.canvasStartPosition = null;
  }
  componentDidMount() {
    this.ctx = this.canvas.getContext('2d');
    const {x, y} = this.canvas.getBoundingClientRect();
    this.canvasStartPosition = {x, y};
    this.props.callbackDidMount({
      canvas: this.canvas,
      ctx: this.ctx,
    });
  }
  setStartPoint(mouseEventPageX, mouseEventPageY) {
    this.setState({
      startPoint: {
        x: mouseEventPageX - this.canvasStartPosition.x,
        y: mouseEventPageY - this.canvasStartPosition.y,
      },
    });
  }
  getCurrentPoint(mouseEventPageX, mouseEventPageY) {
    const {canvasStartPosition} = this;
    return {
      x: mouseEventPageX - canvasStartPosition.x,
      y: mouseEventPageY - canvasStartPosition.y,
    };
  }
  startAction() {
    this.setState({isAction: true});
  }
  stopAction() {
    this.setState({isAction: false});
  }
  switchCurrentPointToStartPoint(currentPoint) {
    this.setState({
      startPoint: currentPoint,
    });
  }
  render() {
    const {width, height} = this.props.imageData;
    return (
      <canvas
        className="action-layer"
        width={width}
        height={height}
        ref={ref => {
          this.canvas = ref;
        }}
        onMouseDown={e => {
          this.startAction();
          this.setStartPoint(e.pageX, e.pageY);
        }}
        onMouseMove={e => {
          if (!this.state.isAction) return;
          const currentPoint = this.getCurrentPoint(e.pageX, e.pageY);
          this.props.executeAction({
            canvas: this.canvas,
            ctx: this.ctx,
            startPoint: this.state.startPoint,
            currentPoint,
          });
          this.switchCurrentPointToStartPoint(currentPoint);
        }}
        onMouseUp={() => {
          this.stopAction();
        }}
        onMouseLeave={() => {
          this.stopAction();
        }}
      />
    );
  }
}<commit_msg>add Flow MouseMoveActionLayer.js<commit_after>// @flow
import React from 'react';

type Point = {x: number, y: number};

type Props = {
  callbackDidMount: ({ctx: CanvasRenderingContext2D}) => void,
  executeAction: ({
    canvas: HTMLCanvasElement,
    ctx: CanvasRenderingContext2D,
    startPoint: Point,
    currentPoint: Point,
  }) => void,
  imageData: ImageData,
};

type State = {
  isAction: boolean,
  startPoint: Point,
};

export default class MouseMoveActionLayer extends React.Component<
  Props,
  State
> {
  constructor(props: Props) {
    super(props);
    this.state = {
      isAction: false,
      startPoint: {x: 0, y: 0},
    };
    this.canvas = null;
    this.ctx = null;
    this.canvasStartPosition = null;
  }
  componentDidMount() {
    const {canvas} = this;
    if (!canvas) throw new Error('canvas is null.');
    this.ctx = canvas.getContext('2d');
    const {x, y} = ((canvas.getBoundingClientRect(): any): DOMRect);
    this.canvasStartPosition = {x, y};
    if (!this.ctx) throw new Error('this.ctx is null.');
    this.props.callbackDidMount({
      canvas,
      ctx: this.ctx,
    });
  }
  setStartPoint(mouseEventPageX: number, mouseEventPageY: number) {
    const {canvasStartPosition} = this;
    if (!canvasStartPosition) throw new Error('canvasStartPosition is null.');
    this.setState({
      startPoint: {
        x: mouseEventPageX - canvasStartPosition.x,
        y: mouseEventPageY - canvasStartPosition.y,
      },
    });
  }
  getCurrentPoint(mouseEventPageX: number, mouseEventPageY: number): Point {
    const {canvasStartPosition} = this;
    if (!canvasStartPosition) throw new Error('canvasStartPosition is null.');
    return {
      x: mouseEventPageX - canvasStartPosition.x,
      y: mouseEventPageY - canvasStartPosition.y,
    };
  }

  canvas: HTMLCanvasElement | null;
  ctx: CanvasRenderingContext2D | null;
  canvasStartPosition: Point | null;

  startAction() {
    this.setState({isAction: true});
  }
  stopAction() {
    this.setState({isAction: false});
  }
  switchCurrentPointToStartPoint(currentPoint: Point) {
    this.setState({
      startPoint: currentPoint,
    });
  }
  render() {
    const {width, height} = this.props.imageData;
    return (
      <canvas
        className="action-layer"
        width={width}
        height={height}
        ref={ref => {
          this.canvas = ref;
        }}
        onMouseDown={e => {
          this.startAction();
          this.setStartPoint(e.pageX, e.pageY);
        }}
        onMouseMove={e => {
          if (!this.state.isAction) return;
          const currentPoint = this.getCurrentPoint(e.pageX, e.pageY);
          if (!this.canvas) throw new Error('this.canvas is null.');
          if (!this.ctx) throw new Error('this.ctx is null.');
          this.props.executeAction({
            canvas: this.canvas,
            ctx: this.ctx,
            startPoint: this.state.startPoint,
            currentPoint,
          });
          this.switchCurrentPointToStartPoint(currentPoint);
        }}
        onMouseUp={() => {
          this.stopAction();
        }}
        onMouseLeave={() => {
          this.stopAction();
        }}
      />
    );
  }
}
{'fraction_non_alphanumeric': 0.13113225144562582, 'fraction_numerical': 0.0016787912702853946, 'mean_word_length': 2.3936708860759492, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 18, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1455317', 'n_tokens_mistral': 1623, 'n_tokens_neox': 1639, 'n_words': 323}