help speed up this class:
```

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

  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 x = parseInt(rectStyle.left, 10);
    const y = parseInt(rectStyle.top, 10);
    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 x1 = -(vertexSize-borderSize)/2;
    const x2 = (vertexSize+borderSize)/2;
    const x3 = x1 + xOffset;
    const x4 = x2 + xOffset;
    const y1 = x1;
    const y2 = x2;
    const y3 = y1 + yOffset;
    const y4 = y2 + yOffset;
    const heightSubBorder = height - borderSize;
    const widthSubBorder = width - borderSize;

    // action    x-range  y-range
    // resize-nw: (x1, x2) (y1, y2)
    // resize-ne: (x3, x4) (y1, y2)
    // resize-sw: (x1, x2) (y3, y4)
    // resize-se: (x3, x4) (y3, y4)
    // resize-n: (0, width), (0, borderSize);
    // resize-s: (0, width), (heightSubBorder, height)
    // resize-w: (0, borderSize), (0, height)
    // resize-e: (widthSubBorder, width), (0, height)
    // move: (borderSize, widthSubBorder), (borderSize, heightSubBorder)

    if (cursorOffsetX >= x1 && cursorOffsetX <= x2 && cursorOffsetY >= y1 && cursorOffsetY <= y2) {
      this.action = 'resize-nw';
    } else if (cursorOffsetX >= x3 && cursorOffsetX <= x4 && cursorOffsetY >= y1 && cursorOffsetY <= y2) {
      this.action = 'resize-ne';
    } else if (cursorOffsetX >= x1 && cursorOffsetX <= x2 && cursorOffsetY >= y3 && cursorOffsetY <= y4) {
      this.action = 'resize-sw';
    } else if (cursorOffsetX >= x3 && cursorOffsetX <= x4 && cursorOffsetY >= y3 && cursorOffsetY <= y4) {
      this.action = 'resize-se';
    } else if (cursorOffsetY >= -borderSize && cursorOffsetY <= borderSize && cursorOffsetX > x2 && cursorOffsetX < x3) {
      this.action = 'resize-n';
    } else if (cursorOffsetY >= heightSubBorder && cursorOffsetY <= height + borderSize && cursorOffsetX > x2 && cursorOffsetX < x3) {
      this.action = 'resize-s';
    } else if (cursorOffsetX >= -borderSize && cursorOffsetX <= borderSize && cursorOffsetY > y2 && cursorOffsetY < y3) {
      this.action = 'resize-w';
    } else if (cursorOffsetX >= widthSubBorder && cursorOffsetX <= width + borderSize && cursorOffsetY > y2 && cursorOffsetY < y3) {
      this.action = 'resize-e';
    } else if (
      cursorOffsetX > borderSize && cursorOffsetX < widthSubBorder &&
      cursorOffsetY > borderSize && cursorOffsetY < heightSubBorder
    ) {
      this.action = 'move';
    }

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

    this.currentRect = rect;
    this.startRect = {x, y, 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;

    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;
    }

    this.updateRect({x: newX, y: newY, width: newWidth, height: newHeight});
  }

  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;
  }
}
```