refactor the code so that the constants are not at top level and for speed:
"""

// row: y, col: x
const ACTION_TABLE = [
  [RESIZE_NW,   RESIZE_NW, RESIZE_NW, NULL,       RESIZE_NE,  RESIZE_NE,  RESIZE_NE ],
  [RESIZE_NW,   RESIZE_NW, RESIZE_NW, RESIZE_N,   RESIZE_NE,  RESIZE_NE,  RESIZE_NE ],
  [RESIZE_NW,   RESIZE_NW, RESIZE_NW, MOVE,       RESIZE_NE,  RESIZE_NE,  RESIZE_NE ],
  [NULL,        RESIZE_W,  MOVE,      MOVE,       MOVE,       RESIZE_E,   NULL      ],
  [RESIZE_SW,   RESIZE_SW, RESIZE_SW, MOVE,       RESIZE_SE,  RESIZE_SE,  RESIZE_SE ],
  [RESIZE_SW,   RESIZE_SW, RESIZE_SW, RESIZE_S,   RESIZE_SE,  RESIZE_SE,  RESIZE_SE ],
  [RESIZE_SW,   RESIZE_SW, RESIZE_SW, NULL,       RESIZE_SE,  RESIZE_SE,  RESIZE_SE ],
];

class DndPlugin extends RectLifecycleInterface {
  constructor() {
    super();
    this.currentRect = null;
    this.action = null;
    this.host = null;
    this.startX = 0;
    this.startY = 0;
    this.startRect = null;
    this.boundOnMouseMove = this.onMouseMove.bind(this);
    this.boundOnMouseUp = this.onMouseUp.bind(this);
    this.listeners = new WeakMap();

    // Added for requestAnimationFrame optimization
    this.isAnimating = false;
    this.latestRect = null;

    // Added minimum size constants
    this.MIN_WIDTH = 50;  // Minimum width in pixels
    this.MIN_HEIGHT = 50; // Minimum height in pixels
  }

  attach(host) {
    if (host) {
      this.host = host;
    }
    return null;
  }

  onRectCreate(rect, element) {
    const callback = this.onMouseDown.bind(this, rect);
    this.listeners.set(element, callback);
    element.addEventListener('mousedown', callback);
  }

  onRectRemove(rect, element) {
    element.removeEventListener('mousedown', this.listeners.get(element));
    this.listeners.delete(element);
  }

  onMouseDown(rect, e) {
    const rectElement = e.target;
    if (!rectElement) return;
    const rectStyle = rectElement.style;

    const width = parseInt(rectStyle.getPropertyValue('--width'), 10);
    const height = parseInt(rectStyle.getPropertyValue('--height'), 10);
    const borderSize = parseInt(rectStyle.getPropertyValue('--border-size') || getComputedStyle(this.host).getPropertyValue('--border-size'), 10) || 6;
    const vertexSize = parseInt(rectStyle.getPropertyValue('--vertex-size') || getComputedStyle(this.host).getPropertyValue('--vertex-size'), 10) || 0;

    const bbox = rectElement.getBoundingClientRect();

    const cursorOffsetX = e.clientX - bbox.left;
    const cursorOffsetY = e.clientY - bbox.top;

    const xOffset = width - borderSize;
    const yOffset = height - borderSize;

    const halfVertexMinusBorder = (vertexSize - borderSize) / 2;
    const halfVertexPlusBorder = (vertexSize + borderSize) / 2;

    const minX = -halfVertexMinusBorder;
    const maxX = halfVertexPlusBorder + xOffset;
    
    // Sorted array excluding the first and last elements
    const x_sorted = [
      0,                                // 0
      borderSize,                       // 1
      halfVertexPlusBorder,             // 2
      -halfVertexMinusBorder + xOffset, // 3
      width - borderSize,               // 4
      width                             // 5
      // 6
    ];

    // Check if cursorOffsetX is outside the boundaries
    if (cursorOffsetX < minX || cursorOffsetX > maxX) {
      return;
    }

    // Find the appropriate index in the sorted X array
    let xi = 0;
    for (; xi < 6 && cursorOffsetX >= x_sorted[xi]; xi++) {}

    const minY = minX;
    const maxY = halfVertexPlusBorder + yOffset;

    const y_sorted = [
      0,                                // 0
      borderSize,                       // 1
      halfVertexPlusBorder,             // 2
      -halfVertexMinusBorder + yOffset, // 3
      height - borderSize,              // 4
      height                            // 5
      // 6
    ];

    // Check if cursorOffsetY is outside the boundaries
    if (cursorOffsetY < minY || cursorOffsetY > maxY) {
      return;
    }

    // Find the appropriate index in the sorted Y array
    let yi = 0;
    for (; yi < 6 && cursorOffsetY >= y_sorted[yi]; yi++) {}

    this.action = ACTION_TABLE[yi][xi];

    if (this.action === NULL) {
      return;
    }

    this.startX = e.clientX;
    this.startY = e.clientY;

    this.currentRect = rect;
    this.startRect = { x: parseInt(rectStyle.left, 10), y: parseInt(rectStyle.top, 10), width, height };

    e.preventDefault();

    document.addEventListener('mousemove', this.boundOnMouseMove);
    document.addEventListener('mouseup', this.boundOnMouseUp);
  }

  onMouseMove(e) {
    if (!this.currentRect) return;

    const dx = e.clientX - this.startX;
    const dy = e.clientY - this.startY;
    let { x: newX, y: newY, width: newWidth, height: newHeight } = this.startRect;

    const action = this.action;

    switch(this.action) {
      case MOVE:
        newX += dx;
        newY += dy;
        break;
      case RESIZE_NW:
        newX += dx;
        newY += dy;
        newWidth -= dx;
        newHeight -= dy;
        break;
      case RESIZE_NE:
        newY += dy;
        newWidth += dx;
        newHeight -= dy;
        break;
      case RESIZE_SW:
        newX += dx;
        newWidth -= dx;
        newHeight += dy;
        break;
      case RESIZE_SE:
        newWidth += dx;
        newHeight += dy;
        break;
      case RESIZE_N:
        newY += dy;
        newHeight -= dy;
        break;
      case RESIZE_S:
        newHeight += dy;
        break;
      case RESIZE_W:
        newX += dx;
        newWidth -= dx;
        break;
      case RESIZE_E:
        newWidth += dx;
        break;
    }

    // Apply minimum size constraints
    newWidth = Math.max(newWidth, this.MIN_WIDTH);
    newHeight = Math.max(newHeight, this.MIN_HEIGHT);

    // For certain resize actions, adjusting x or y when width/height is clamped
    if (this.action === RESIZE_NW || this.action === RESIZE_SW || this.action === RESIZE_W) {
      newX = this.startRect.x + (this.startRect.width - newWidth);
    }
    if (this.action === RESIZE_NW || this.action === RESIZE_NE || this.action === RESIZE_N) {
      newY = this.startRect.y + (this.startRect.height - newHeight);
    }

    // Store the latest desired rectangle state
    this.latestRect = { x: newX, y: newY, width: newWidth, height: newHeight };

    // Schedule an update via requestAnimationFrame if not already scheduled
    if (!this.isAnimating) {
      this.isAnimating = true;
      requestAnimationFrame(() => {
        this.updateRect(this.latestRect);
        this.isAnimating = false;
        this.latestRect = null;
      });
    }
  }

  updateRect(newRect) {
    const updates = {};
    for (const key in newRect) {
      if (newRect[key] !== this.startRect[key]) {
        updates[key] = newRect[key];
      }
    }
    if (Object.keys(updates).length > 0) {
      this.currentRect.update(updates);
    }
  }

  onMouseUp() {
    document.removeEventListener('mousemove', this.boundOnMouseMove);
    document.removeEventListener('mouseup', this.boundOnMouseUp);
    this.currentRect = null;
    this.action = null;

    // Reset animation flags
    this.isAnimating = false;
    this.latestRect = null;
  }
}
"""