dps_canvas/src/parent.js

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

import Circle from './circle';
import Square from './square'
import Text from './text';
import { handleContextMenu, handleDblClick, handleDown, handleLeave, handleMove, handleUp } from './utils/mouse-event.js';
import { hasPermission } from './utils/permissions';
import { showInput } from './utils/showInput';

/**
 * TODO
 * * Kareyi ters oluşturunca cursorda hata oluyor
 */
export default class Base {
  /**
   * @type {CanvasRenderingContext2D}
   */
  static context;

  /**
   * @type {"square" | "circle"}
   */
  static status = "square"

  /**
   * @type {"creating" | "moving"}
   */
  static process = "creating"

  /**
   * @type {"onlyView" | "admin"}
   */
  static permission;

  /**
   * @type {"top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "left" | "right" | false}
   */
  static direction

  /**
   * @type {{style: CSSStyleDeclaration, prop: HTMLInputElement}}
   */
  static inputStyle = {
    style: {
      position: "absolute",
      top: "50%",
      left: "50%",
      border: "1px solid #252525",
      outline: "none",
      padding: "10px 15px",
      color: "#252525",
    },
    prop: {
      type: "text",
      placeholder: "İsim Ver"
    }
  }

  /**
   * @type {HTMLDivElement}
   */
  static parent;

  static lastX;
  static lastY;
  static snapshot;
  static movedItem;
  static color;
  static width;
  static height;
  static isCreating = false
  static isMoving = false
  static isResizeable = false
  static isShowInput = false
  static minDimensionsCircle = 40
  static minDimensionsSquare = 50
  static squareColor = "#222"
  static circleColor = "#2f3640"
  static activeShape = null
  static activeOptions = {
    gap: 8,
    cornerSize: 2.5,
    cornerColor: "darkgreen",
    sideColor: "red",
    cornerLength: 4,
    dashed: true
  }

  constructor({ ctx, width, height }) {
    Base.context = ctx
    Base.width = width || 700
    Base.height = height || 500
    Base.context.canvas.width = width
    Base.context.canvas.height = height

    //--- Canvas mouse events
    Base.context.canvas.oncontextmenu = handleContextMenu
    Base.context.canvas.onmousedown = handleDown
    Base.context.canvas.onmousemove = handleMove
    Base.context.canvas.onmouseup = handleUp
    Base.context.canvas.onmouseleave = handleLeave
    Base.context.canvas.ondblclick = handleDblClick
  }

  static get coordinate() {
    return {
      circles: Circle.circle,
      squares: Square.data
    }
  }

  /**
   * @param {string} color
   */
  static set fillCanvas(color) {
    this.color = color
    Square.draw({ x: 0, y: 0, width: this.width, height: this.height, color })
  }

  static deleteShape(draw = true) {
    if (!hasPermission("can-delete") || !Base.activeShape) return
    Base.activeShape?.radius ? Circle.delete(Base.activeShape) : Square.delete(Base.activeShape)
    Base.setActiveShape()
    draw && Base.drawAll()
    Base.isShowInput = false
    showInput()
  }

  /**
   * 
   * @param {"style" | "prop"} entity 
   * @param {CSSStyleDeclaration | HTMLInputElement} options 
   */
  static setInput(entity, options) {
    Base.inputStyle[entity] = { ...Base.inputStyle[entity], ...options }
  }

  /**
   * @param {object} options
   */
  static set active(options) {
    Base.activeOptions = { ...Base.activeOptions, ...options }
  }

  static drawAll() {
    this.context.clearRect(0, 0, this.width, this.height)

    this.fillCanvas = this.color

    /**
     * draw all shapes
     */
    for (const iterator of Square.data) Square.draw(iterator)
    for (const iterator of Square.activeSquare) Square.draw(iterator)
    for (const iterator of Circle.circle) Circle.draw(iterator)
    for (const iterator of Circle.activeCircle) Circle.draw(iterator)
    for (const iterator of Text.text) Text.draw(iterator)
  }

  static setActiveShape(shape) {
    /**
     * clear prev current shape coordinate
     */
    Square.activeSquare = []
    Circle.activeCircle = []
    Base.activeShape = shape

    if (!shape) return

    const width = (Base.activeOptions.gap * 2) + (shape?.width || shape?.radius * 2)
    const height = Base.activeOptions.gap * 2 + shape?.height
    const x = shape?.radius ? -shape?.radius - Base.activeOptions.gap + shape?.x : shape?.x - Base.activeOptions.gap
    const y = shape?.radius ? -shape?.radius - Base.activeOptions.gap + shape?.y : shape?.y - Base.activeOptions.gap

    const commonCircleProp = { radius: Base.activeOptions.cornerSize, color: Base.activeOptions.cornerColor }

    const circles = [
      { x, y },
      { x: x + width, y },
      { x, y: y + (shape?.height ? height : width) },
      { x: x + width, y: y + (shape?.height ? height : width) },
    ]

    Square.draw({ x, y, width, height: height, stroke: true, color: Base.activeOptions.sideColor, dash: Base.activeOptions.dashed })
    Square.activeSquare.push({ x, y, width, height: height, stroke: true, color: Base.activeOptions.sideColor, dash: Base.activeOptions.dashed })

    for (const iterator of circles) {
      Circle.draw({ ...iterator, ...commonCircleProp })
      Circle.activeCircle.push({ ...iterator, ...commonCircleProp })
    }
    Base.drawAll()
  }

  static clearAll() {
    Square.clearItem()
    Circle.clearItem()
    Text.clearItem()
    Base.setActiveShape()
  }
}