homemanager-fe/src/modules/house-planner/canvas.ts

import { clamp } from '@vueuse/core';
import extractLinePoints from '../../utils/extract-line-points';
import { HousePlannerCanvasGrid } from './grid';
import {
  BezierSegment,
  ICanvasToolkit,
  Layer,
  LayerObject,
  Line,
  LineSegment,
  RepositionEvent,
  Vec2,
} from './interfaces';
import { HousePlannerCanvasTools } from './tools';
import { LayerObjectType } from './types';
import {
  vec2Add,
  vec2AngleFromOrigin,
  vec2Distance,
  vec2DivideScalar,
  vec2Equals,
  vec2MultiplyScalar,
  vec2Snap,
  vec2Sub,
} from './utils';

export class HousePlannerCanvas {
  public ctx!: CanvasRenderingContext2D;
  public layers: Layer[] = [];
  public tools?: ICanvasToolkit;
  public grid = new HousePlannerCanvasGrid(this, 8);
  public mousePosition: Vec2 = [0, 0];
  public mouseClickPosition: Vec2 = [0, 0];
  public mousePositionSnapped: Vec2 = [0, 0];
  private dragging = false;
  private pinching = false;
  private lastPinchLength = 0;
  private moved = false;
  private clickedOn: LayerObject | null = null;

  constructor(
    public canvas: HTMLCanvasElement,
    public canvasDim: Vec2,
    public canvasPos: Vec2,
    public canvasZoom = 1,
    public editable = true
  ) {
    this.ctx = this.canvas.getContext('2d')!;
    this.setupEvents();
    this.resizeCanvas();
    if (editable) {
      this.tools = new HousePlannerCanvasTools(this);
    }
  }

  get width() {
    return this.canvas.width;
  }

  get height() {
    return this.canvas.height;
  }

  addLayer(layer: Layer) {
    this.layers.push(layer);
    this.draw();
  }

  resizeCanvas() {
    const [w, h] = this.canvasDim;
    this.canvas.width = w;
    this.canvas.height = h;
    this.draw();
  }

  cleanUp() {
    this.tools?.cleanUp();
    window.removeEventListener('keyup', this.boundKeyUpEvent);
    window.removeEventListener('keydown', this.boundKeyDownEvent);
  }

  draw() {
    this.ctx.clearRect(0, 0, this.width, this.height);
    this.grid.draw();
    this.tools?.drawHighlights();
    for (const layer of this.layers.slice().reverse()) {
      if (!layer.visible) continue;
      if (!layer.contents?.length) continue;
      this.drawLayer(layer);
    }
    this.tools?.drawControls();
  }

  makeBezier(segment: BezierSegment, path: Path2D) {
    const bezier = segment as BezierSegment;
    const [cp1x, cp1y] = bezier.startControl;
    const [cp2x, cp2y] = bezier.endControl;
    const [x, y] = bezier.end;
    path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
  }

  makeLinePath(line: Line) {
    const path = new Path2D();
    const [firstSegment, ...segments] = line.segments;
    // first segment must have a starting point
    if (!firstSegment.start) return path;
    path.moveTo(...firstSegment.start);

    if (line.type === 'curve') {
      const lineLength = vec2Distance(firstSegment.start, firstSegment.end);
      const lineAngle = vec2AngleFromOrigin(
        firstSegment.end,
        firstSegment.start!
      );
      const ninety = lineAngle + Math.PI / 2;
      path.moveTo(...firstSegment.end);
      path.arc(
        firstSegment.start[0],
        firstSegment.start[1],
        lineLength,
        lineAngle,
        ninety
      );
      path.lineTo(...firstSegment.start);
    } else if ((firstSegment as BezierSegment).startControl) {
      this.makeBezier(firstSegment as BezierSegment, path);
    } else {
      path.lineTo(...firstSegment.end);
    }

    for (const segment of segments) {
      if (segment.start) {
        path.moveTo(...segment.start);
      }
      if ((segment as BezierSegment).startControl) {
        this.makeBezier(segment as BezierSegment, path);
        continue;
      }

      path.lineTo(...segment.end);
    }
    if (line.closed && line.type !== 'curve') {
      path.closePath();
    }
    return path;
  }

  setupLine(line: Line, overBounds = 0, overrideColor?: string) {
    if (line.lineDash) {
      this.ctx.setLineDash(line.lineDash);
    }

    this.ctx.strokeStyle = overrideColor || line.color || '#000';
    this.ctx.lineWidth = line.width + overBounds;

    this.ctx.lineCap = line.lineCap || 'butt';
    this.ctx.lineJoin = line.lineJoin || 'miter';
  }

  isOnLine(line: Line, x: number, y: number, selectError = 16) {
    let path = line.render || this.makeLinePath(line);
    this.setupLine(line, selectError);
    return this.ctx.isPointInStroke(path, x, y);
  }

  isOnSegment(
    line: Line,
    segment: LineSegment,
    lastPoint: Vec2,
    x: number,
    y: number,
    selectError = 16
  ) {
    const fakePath = this.makeLinePath({
      ...line,
      closed: false,
      segments: [{ ...segment, start: lastPoint }],
    });
    this.setupLine(line, selectError);
    return this.ctx.isPointInStroke(fakePath, x, y);
  }

  getLayerById(layerId: number) {
    return this.layers.find((layer) => layer.id === layerId);
  }

  getLayerObjectById(layerId: number, objectId: number) {
    const findLayer = this.getLayerById(layerId);
    if (!findLayer) return undefined;
    const findObject = findLayer.contents.find(
      (content) => content.id === objectId
    );
    if (!findObject) return undefined;
    return findObject;
  }

  updateObjectProperties(
    layerId: number,
    objectId: number,
    properties: Partial<Omit<LayerObject | Line, 'segments'>>
  ) {
    const object = this.getLayerObjectById(layerId, objectId);
    if (!object) return;
    this.tools?.history.appendToHistory(
      Object.keys(properties).map((key) => ({
        object,
        property: key,
        value: object[key as keyof typeof object],
      }))
    );
    Object.assign(object, properties);
    this.canvas.dispatchEvent(
      new CustomEvent('hpc:update', {
        detail: { event: 'properties-object', object },
      })
    );
    this.draw();
    return object;
  }

  updateLayerProperties(
    layerId: number,
    properties: Partial<Omit<Layer, 'contents'>>
  ) {
    const layer = this.getLayerById(layerId);
    if (!layer) return;
    this.tools?.history.appendToHistory(
      Object.keys(properties).map((key) => ({
        object: layer,
        property: key,
        value: layer[key as keyof typeof layer],
      }))
    );
    Object.assign(layer, properties);
    this.canvas.dispatchEvent(
      new CustomEvent('hpc:update', {
        detail: { event: 'properties-layer', layer },
      })
    );
    this.draw();
    return layer;
  }

  translateCanvas(offset: Vec2) {
    const realSize = vec2MultiplyScalar(this.canvasDim, this.canvasZoom);
    this.canvasPos = vec2Sub(this.canvasPos, offset);
    this.repositionEvent();
  }

  zoomCanvas(diff: number) {
    this.canvasZoom -= diff;
    this.repositionEvent();
  }

  realMousePos(x: number, y: number) {
    const rect = this.canvas.getBoundingClientRect();
    const scaleX = this.canvas.width / rect.width;
    const scaleY = this.canvas.height / rect.height;
    this.mousePosition = [(x - rect.left) * scaleX, (y - rect.top) * scaleY];
    this.mousePositionSnapped = !!this.grid.gridSnap
      ? vec2Snap(this.mousePosition, this.grid.gridSnap)
      : this.mousePosition;
  }

  getAllObjectsOfType(type: LayerObjectType) {
    const objects: LayerObject[] = [];
    this.layers.forEach((layer) => {
      objects.push(...layer.contents.filter((object) => object.type === type));
    });
    return objects;
  }

  private keyDownEvent(e: KeyboardEvent) {
    if (e.target !== document.body && e.target != null) return;
    this.tools?.onKeyDown(e);
  }
  private boundKeyDownEvent = this.keyDownEvent.bind(this);
  private keyUpEvent(e: KeyboardEvent) {
    if (e.target !== document.body && e.target != null) return;
    this.tools?.onKeyUp(e);
  }
  private boundKeyUpEvent = this.keyUpEvent.bind(this);

  private setupEvents() {
    window.addEventListener('keyup', this.boundKeyUpEvent);
    window.addEventListener('keydown', this.boundKeyDownEvent);

    this.canvas.addEventListener('mousemove', (e) => this.onMouseMove(e));
    this.canvas.addEventListener('mousedown', (e) => this.onMouseDown(e));
    this.canvas.addEventListener('mouseup', (e) => this.onMouseUp(e));

    this.canvas.addEventListener('touchmove', (e) => this.onTouchMove(e));
    this.canvas.addEventListener('touchstart', (e) => this.onTouchStart(e));
    this.canvas.addEventListener('touchend', (e) => this.onTouchEnd(e));
    this.canvas.addEventListener('wheel', (e) => this.onMouseWheel(e));

    this.canvas.addEventListener('pointerleave', () => this.onPointerLeave());
  }

  private drawRoomText(line: Line) {
    const points = extractLinePoints(line);
    const centerPoint = vec2DivideScalar(
      points.reduce<Vec2 | null>(
        (prev, current) => (prev ? vec2Add(prev, current) : current),
        null
      ) as Vec2,
      points.length
    );

    this.ctx.font = '16px Arial';
    this.ctx.fillStyle = line.color;
    const { width } = this.ctx.measureText(line.name);
    this.ctx.fillText(
      line.name,
      centerPoint[0] - width / 2,
      centerPoint[1] - 8
    );
  }

  private drawLine(line: Line) {
    const path = this.makeLinePath(line);
    line.render = path;
    this.setupLine(line);
    this.ctx.stroke(path);
    if (line.type === 'room') {
      this.drawRoomText(line);
    }
  }

  private drawLayer(layer: Layer) {
    for (const item of layer.contents) {
      if (!item.visible) continue;
      const line = item as Line;
      if (line.segments) {
        this.drawLine(line);
        continue;
      }
    }
  }

  onMouseMove(e: MouseEvent) {
    this.dragEvent(e.clientX, e.clientY);
  }
  onMouseDown(e: MouseEvent) {
    this.mouseClickPosition = [e.clientX, e.clientY];
    this.moved = false;

    this.pointerDown();
  }
  onMouseUp(e: MouseEvent) {
    this.dragging = false;
    this.pointerUp();
  }

  onTouchMove(ev: TouchEvent) {
    ev.preventDefault();

    if (ev.touches.length === 2 && this.pinching) {
      const pinchLength = Math.hypot(
        ev.touches[0].pageX - ev.touches[1].pageX,
        ev.touches[0].pageY - ev.touches[1].pageY
      );

      if (this.lastPinchLength) {
        const delta = pinchLength / this.lastPinchLength;
        const scaleX =
          (ev.touches[0].clientX - this.canvasPos[0]) / this.canvasZoom;
        const scaleY =
          (ev.touches[0].clientY - this.canvasPos[1]) / this.canvasZoom;

        delta > 0 ? (this.canvasZoom *= delta) : (this.canvasZoom /= delta);
        this.canvasZoom = clamp(this.canvasZoom, 1, 100);

        this.canvasPos = [
          ev.touches[0].clientX - scaleX * this.canvasZoom,
          ev.touches[0].clientY - scaleY * this.canvasZoom,
        ];
        this.repositionEvent();
      }
      this.lastPinchLength = pinchLength;
    }

    this.dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
  }

  onTouchStart(e: TouchEvent) {
    e.preventDefault();
    const touch = e.touches[0] || e.changedTouches[0];
    this.dragging = true;
    this.moved = false;

    if (e.touches.length === 2) {
      this.pinching = true;
    }

    this.pointerDown();
  }
  onTouchEnd(e: TouchEvent) {
    this.pinching = false;
    this.lastPinchLength = 0;

    if (!e.touches?.length) {
      this.dragging = false;
    }

    this.pointerUp();
  }

  onPointerLeave() {
    this.dragging = false;
  }

  private onMouseWheel(e: WheelEvent) {
    e.preventDefault();
    this.realMousePos(e.clientX, e.clientY);

    const scaleX = (e.clientX - this.canvasPos[0]) / this.canvasZoom;
    const scaleY = (e.clientY - this.canvasPos[1]) / this.canvasZoom;
    e.deltaY < 0 ? (this.canvasZoom *= 1.2) : (this.canvasZoom /= 1.2);
    this.canvasZoom = clamp(this.canvasZoom, 0.1, 10);
    this.canvasPos = [
      e.clientX - scaleX * this.canvasZoom,
      e.clientY - scaleY * this.canvasZoom,
    ];

    // this.canvasPos = [
    //   clamp(this.canvasPos[0], -window.innerWidth / 2, window.innerWidth / 2),
    //   clamp(this.canvasPos[1], -window.innerHeight / 2, window.innerHeight / 2),
    // ];
    this.repositionEvent();
  }

  private dragEvent(x: number, y: number) {
    this.moved = true;

    const currentPosAbsolute: Vec2 = [...this.mousePosition];
    const currentPosSnapped: Vec2 = [
      ...(!!this.grid.gridSnap
        ? this.mousePositionSnapped
        : this.mousePosition),
    ];

    this.realMousePos(x, y);
    let offset = vec2Sub(currentPosSnapped, this.mousePositionSnapped);
    let offsetAbsolute = vec2Sub(currentPosAbsolute, this.mousePosition);

    this.tools?.mouseMoved(
      this.mousePositionSnapped,
      offset,
      this.mousePosition
    );

    if (this.dragging) {
      const divided = vec2MultiplyScalar(offsetAbsolute, this.canvasZoom);
      this.translateCanvas(divided);
      // Bias the offset
      const [nx, ny] = vec2Add([x, y], divided);
      this.realMousePos(nx, ny);
    }
  }

  private pointerDown() {
    if (!this.tools) {
      this.dragging = true;
      return;
    }

    this.clickedOn = this.tools.getMousedObject();
    this.tools.mouseDown(this.clickedOn || undefined);

    if (!this.clickedOn) {
      this.dragging = true;
    }
  }

  private pointerUp() {
    // FIXME: possibly there's a better approach, but right now some clicks do not register
    if (
      this.moved &&
      vec2Distance(this.mouseClickPosition, this.mousePosition) < 0.25
    ) {
      this.moved = false;
    }

    this.tools?.mouseUp(this.moved);

    this.dragging = false;
    this.clickedOn = null;
  }

  private repositionEvent() {
    this.canvas.dispatchEvent(
      new CustomEvent<RepositionEvent>('hpc:position', {
        detail: {
          position: this.canvasPos,
          zoom: this.canvasZoom,
        },
      })
    );
  }
}