dps_canvas/src/utils/direction.js

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

import Base from "../parent";

const handleSize = 10

const dist = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))

/**
 * Get mouse direction
 * 
 * @param {number} x X coordinate
 * @param {number} y Y coordinate
 * @returns {"top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "left" | "right" | false}
 */
export function getDirection(x, y) {
  if (!Base.isResizeable) return false

  if(!Base.activeShape.height) {
    Base.activeShape.height = Base.activeShape.width
  }

  if (dist(x, y, Base.activeShape?.x, Base.activeShape?.y) <= handleSize) return 'top-left';
  if (dist(x, y, Base.activeShape.x + Base.activeShape.width, Base.activeShape.y) <= handleSize) return 'top-right';
  if (dist(x, y, Base.activeShape.x, Base.activeShape.y + Base.activeShape.height) <= handleSize) return 'bottom-left';
  if (dist(x, y, Base.activeShape.x + Base.activeShape.width, Base.activeShape.y + Base.activeShape.height) <= handleSize) return 'bottom-right';
  if (dist(x, y, Base.activeShape.x + Base.activeShape.width / 2, Base.activeShape.y) <= handleSize) return 'top';
  if (dist(x, y, Base.activeShape.x, Base.activeShape.y + Base.activeShape.height / 2) <= handleSize) return 'left';
  if (dist(x, y, Base.activeShape.x + Base.activeShape.width / 2, Base.activeShape.y + Base.activeShape.height) <= handleSize) return 'bottom';
  if (dist(x, y, Base.activeShape.x + Base.activeShape.width, Base.activeShape.y + Base.activeShape.height / 2) <= handleSize) return 'right';

  return false
}