dps_canvas/src/utils/resizable.js

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

import Base from "../parent"
import { resize } from "./events";

/**
 * ! HATALI
 * 
 * TODO
 * * text 'ede aynı işlemler uygulancak
 * * Daire resize yapılacak
 * * Şimdilik 4 tane olan köşe değiştirlebilecek en fazla 6 olabilir üst-orta, sol-orta vb...
 */
export function resizable(offsetX, offsetY) {
  if (!Base.isResizeable) return

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

  /**
   * trigger resize event
   */
  Base.context.canvas.dispatchEvent(resize(Base.activeShape))

  switch (Base.direction) {
    case "top-left":
      Base.activeShape.width += Base.activeShape.x - offsetX;
      Base.activeShape.height += Base.activeShape.y - offsetY;
      Base.activeShape.x = offsetX;
      Base.activeShape.y = offsetY;
      break;
    case 'top-right':
      Base.activeShape.width = offsetX - Base.activeShape.x;
      Base.activeShape.height += Base.activeShape.y - offsetY;
      Base.activeShape.y = offsetY;
      break;
    case 'bottom-left':
      Base.activeShape.width += Base.activeShape.x - offsetX;
      Base.activeShape.x = offsetX;
      Base.activeShape.height = offsetY - Base.activeShape.y;
      break;
    case 'bottom-right':
      Base.activeShape.width = offsetX - Base.activeShape.x;
      Base.activeShape.height = offsetY - Base.activeShape.y;
      break;

    case 'top':
      Base.activeShape.height += Base.activeShape.y - offsetY;
      Base.activeShape.y = offsetY;
      break;

    case 'left':
      Base.activeShape.width += Base.activeShape.x - offsetX;
      Base.activeShape.x = offsetX;
      break;

    case 'bottom':
      Base.activeShape.height = offsetY - Base.activeShape.y;
      break;

    case 'right':
      Base.activeShape.width = offsetX - Base.activeShape.x;
      break;
  }

  Base.drawAll()
  Base.setActiveShape(Base.activeShape)
}