dps_canvas/src/utils/mouse-event.js

Html canvas üzerinde şekiller oluşturmanızı sağlar

import Circle from "../circle";
import Base from "../parent";
import Square from "../square";
import { customClick } from "./events";
import { hasPermission } from "./permissions";
import { cursor } from "./cursor";
import { resizable } from "./resizable";
import { move } from "./move";
import { getDirection } from "./direction";
import { showInput } from "./showInput";

export function handleDown({ offsetX, offsetY, button }) {
  if (button === 2) {
    return Base.isCreating = false
  }

  Base.isCreating = hasPermission("can-drawing")

  Base.isShowInput = false
  Base.parent?.querySelector("input")?.remove()

  Base.lastX = offsetX
  Base.lastY = offsetY
  Base.movedItem = Square.handleDown(offsetX, offsetY) ?? Circle.handleDown(offsetX, offsetY)

  if (Base.movedItem) {
    Base.setActiveShape(Object.values(Base.movedItem)[0])
  } else {
    Base.setActiveShape()
    Base.drawAll()
  }

  if (!hasPermission("can-move")) {
    Base.isMoving = false
  }

  if (!hasPermission("can-resizable")) {
    Base.isResizeable = false
  }

  if (Base.process === "creating") {
    return Base.snapshot = Base.context.getImageData(0, 0, Base.context.canvas.width, Base.context.canvas.height)
  }

  cursor()
}

export function handleMove({ offsetX, offsetY }) {
  /**
   * change cursor style
   */
  cursor()

  /**
   * get mouse direction on canvas
   */
  Base.direction = getDirection(offsetX, offsetY);

  /**
   * shape is resizing
   */
  resizable(offsetX, offsetY)

  /**
   * shape is moving
   */
  if (Base.process === "moving") {
    move(offsetX, offsetY)
    return
  }

  /**
   * shape is drawing
   */
  if (!Base.isCreating) return

  Base.context.putImageData(Base.snapshot, 0, 0)

  if (Base.status === "square") {
    Square.draw({ x: offsetX, y: offsetY, width: Base.lastX - offsetX, height: Base.lastY - offsetY, color: Base.squareColor })
  } else if (Base.status === "circle") {
    Circle.draw({ x: Base.lastX, y: Base.lastY, radius: Circle.getRadius(offsetX, offsetY), color: Base.circleColor })
  }
}

export function handleUp({ offsetX, offsetY, button }) {
  if (button === 2) return
  Base.isCreating = false
  Base.isMoving = false
  Base.isResizeable = false

  if (hasPermission("can-drawing")) {
    if (Base.process === "creating") {
      if (Base.status === "square") {
        Square.add({ x: Base.lastX, y: Base.lastY, width: offsetX - Base.lastX, height: offsetY - Base.lastY, color: Base.squareColor, name: "" })
      } else if (Base.status === "circle") {
        Circle.add({ x: Base.lastX, y: Base.lastY, color: Base.circleColor, name: "", radius: Circle.getRadius(offsetX, offsetY) })
      }
      Base.drawAll()
    }
  }
}

export function handleDblClick({ offsetX, offsetY }) {
  const current = Square.handleDblClick(offsetX, offsetY) || Circle.handleDblClick(offsetX, offsetY)
  Base.isCreating = false

  if (!hasPermission("can-show-input") || !current) return
  showInput(current)
}

export function handleContextMenu(e) {
  e.preventDefault()
  Base.isCreating = false

  const clickElementInCanvas = Square.handleContextmenu(e.offsetX, e.offsetY) ?? Circle.handleContextmenu(e.offsetX, e.offsetY);

  /**
   * trigger contextMenu event
   */
  if (!!clickElementInCanvas) {
    Base.setActiveShape(clickElementInCanvas)
    Base.context.canvas.dispatchEvent(customClick(clickElementInCanvas))
  }
}

export function handleLeave() {
  Base.isCreating = false
  Base.isMoving = false
}