caleb531 / flip-book / 10499286139

import FrameComponent from "./frame.jsx";

class DrawingAreaComponent extends FrameComponent {

  oninit({ attrs: { story, frame, drawingEnabled = true } }) {

    this.story = story;

    super.oninit({ attrs: { frame } });

    this.drawingEnabled = drawingEnabled;

  }

  oncreate({ dom }) {

    super.oncreate({ dom });

  }

  onupdate({ attrs: { story, frame, drawingEnabled = true } }) {

    this.story = story;

    this.drawingEnabled = drawingEnabled;

    super.onupdate({ attrs: { frame } });

  }

  handleDrawStart(event, pageX, pageY) {

    event.preventDefault();

    if (this.drawingEnabled) {

      this.mousedown = true;

      this.canvasScaleFactor = this.canvas.width / this.canvas.offsetWidth;

      this.canvasOffsetLeft = event.target.parentElement.offsetLeft;

      this.canvasOffsetTop = event.target.parentElement.offsetTop;

      let startX = (pageX - this.canvasOffsetLeft) * this.canvasScaleFactor;

      let startY = (pageY - this.canvasOffsetTop) * this.canvasScaleFactor;

      this.frame.startNewGroup({

        styles: Object.assign({}, this.story.frameStyles),

      });

      this.frame.addPoint(startX, startY);

      this.lastX = startX;

      this.lastY = startY;

      this.frame.resetUndoHistory();

    }

  }

  handleDrawMove(event, pageX, pageY) {

    event.preventDefault();

    if (this.mousedown && this.drawingEnabled) {

      let endX = (pageX - this.canvasOffsetLeft) * this.canvasScaleFactor;

      let endY = (pageY - this.canvasOffsetTop) * this.canvasScaleFactor;

      let diffX = endX - this.lastX;

      let diffY = endY - this.lastY;

      if (diffX !== 0 || diffY !== 0) {

        this.frame.addPoint(diffX, diffY);

        this.lastX = endX;

        this.lastY = endY;

        this.render();

      }

    }

    event.redraw = false;

  }

  async handleDrawEnd(event) {

    event.preventDefault();

    if (this.drawingEnabled && this.mousedown) {

      this.mousedown = false;

      await this.story.save();

    } else {

      event.redraw = false;

    }

  }

  handleTouchStart(event) {

    if (event.changedTouches?.length > 0) {

      this.handleDrawStart(

        event,

        event.changedTouches[0].pageX,

        event.changedTouches[0].pageY,

      );

    }

  }

  handleTouchMove(event) {

    if (event.changedTouches?.length > 0) {

      this.handleDrawMove(

        event,

        event.changedTouches[0].pageX,

        event.changedTouches[0].pageY,

      );

    }

  }

  handleTouchEnd(event) {

    if (event.changedTouches?.length > 0) {

      this.handleDrawEnd(event);

    }

  }

  handleMouseDown(event) {

    this.handleDrawStart(event, event.pageX, event.pageY);

  }

  handleMouseMove(event) {

    this.handleDrawMove(event, event.pageX, event.pageY);

  }

  handleMouseUp(event) {

    this.handleDrawEnd(event);

  }

  async undo() {

    this.frame.undo();

    this.render();

    await this.story.save();

  }

  async redo() {

    this.frame.redo();

    this.render();

    await this.story.save();

  }

  view() {

    return (

      <canvas

        className="selected-frame"

        width={FrameComponent.width}

        height={FrameComponent.height}

        ontouchstart={(event) => this.handleTouchStart(event)}

        ontouchmove={(event) => this.handleTouchMove(event)}

        ontouchend={(event) => this.handleTouchEnd(event)}

        onmousedown={(event) => this.handleMouseDown(event)}

        onmousemove={(event) => this.handleMouseMove(event)}

        onmouseup={(event) => this.handleMouseUp(event)}

        onmouseout={(event) => this.handleMouseUp(event)}

      />

  }

}

export default DrawingAreaComponent;