dps_canvas/src/circle.js

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

import Base from "./parent";
import Text from "./text";
import { uniqueId } from "./utils/helper";
import { showInput } from "./utils/showInput";

export default class Circle {
  /**
   * @private
   */
  static #circles = [];
  static activeCircle = []

  static draw({ x, y, radius, color }) {
    Base.context.beginPath();

    Base.context.fillStyle = color || Base.circleColor;
    Base.context.arc(x, y, radius, 0, 2 * Math.PI);
    Base.context.fill();

    Base.context.closePath();
  }

  static get circle() {
    return Circle.#circles;
  }

  static get lastItem() {
    return Circle.circle[Circle.circle.length - 1]
  }

  static handleDown(x, y) {
    const item = this.prototype.getCollisionElement(x, y)
    const resizeItem = Circle.activeCircle.find(c => this.prototype.collisionDetection(x, y, 0, c.x, c.y, c.radius))

    if (!item.circle && !item.text) {
      return Base.isMoving = false
    }

    Base.isMoving = true
    Base.isResizeable = !resizeItem ? false : true

    return item
  }

  static clearItem() {
    Circle.#circles = []
  }

  static delete(value) {
    const index = Circle.#circles.findIndex(c => c.uid === value?.uid)
    const item = Circle.#circles.splice(index, 1)
    Text.deleteTextById(item[0]?.uid)
  }

  static add({ name, x, y, radius, color, ...rest }) {
    if (radius < Base.minDimensionsCircle) {
      return console.info(`Radius değeri ${Base.minDimensionsCircle} değerinden büyük olmalı`);
    }
    const uid = uniqueId()

    Circle.#circles.push({ ...arguments[0], uid, ...rest, type: "circle" });
    Text.add({ name, x, y, uid });
    if(!name) {
      Base.setActiveShape(Circle.circle[Circle.circle.length - 1])
      Base.isShowInput = true
      showInput({ circle: Circle.lastItem, text: Text.lastItem })
    }
  }

  static handleContextmenu(x, y) {
    return this.prototype.getCollisionElement(x, y).circle
  }

  static getRadius(x, y) {
    return Math.sqrt(Math.pow((Base.lastX - x), 2) + Math.pow((Base.lastY - y), 2))
  }

  static handleDblClick(x, y) {
    const { circle, text } = this.prototype.getCollisionElement(x, y, Circle.#circles)

    if (!circle) {
      return Base.isShowInput = false
    }

    Base.isShowInput = true

    return { circle, text }
  }

  getCollisionElement(x, y,) {
    const circle = Circle.#circles.find(item => this.collisionDetection(x, y, 0, item.x, item.y, item.radius))
    const text = Text.text.find(c => c.uid === circle?.uid);
    return { circle, text }
  }

  collisionDetection(x1, y1, r1, x2, y2, r2) {
    let distX = x1 - x2
    let distY = y1 - y2
    let totalRadius = r1 + r2

    return totalRadius > Math.sqrt((distX * distX) + (distY * distY))
  }
}