```
  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 x0 = -(vertexSize - borderSize) / 2;
    const x1 = (vertexSize + borderSize) / 2;
    const x2 = x0 + xOffset;
    const x3 = x1 + xOffset;
    const y0 = x0;
    const y1 = x1;
    const y2 = y0 + yOffset;
    const y3 = y1 + yOffset;
    const heightSubBorder = height - borderSize;
    const widthSubBorder = width - borderSize;



    // Determine the action based on cursor position
    if (cursorOffsetX >= x0 && cursorOffsetX <= x1 && cursorOffsetY >= y0 && cursorOffsetY <= y1) {
      this.action = ACTION_FLAGS.RESIZE_NW;
    } else if (cursorOffsetX >= x2 && cursorOffsetX <= x3 && cursorOffsetY >= y0 && cursorOffsetY <= y1) {
      this.action = ACTION_FLAGS.RESIZE_NE;
    } else if (cursorOffsetX >= x0 && cursorOffsetX <= x1 && cursorOffsetY >= y2 && cursorOffsetY <= y3) {
      this.action = ACTION_FLAGS.RESIZE_SW;
    } else if (cursorOffsetX >= x2 && cursorOffsetX <= x3 && cursorOffsetY >= y2 && cursorOffsetY <= y3) {
      this.action = ACTION_FLAGS.RESIZE_SE;
    } else if (cursorOffsetX >= 0 && cursorOffsetX <= width && cursorOffsetY >= 0 && cursorOffsetY <= borderSize) {
      this.action = ACTION_FLAGS.RESIZE_N;
    } else if (cursorOffsetX >= 0 && cursorOffsetX <= width && cursorOffsetY >= heightSubBorder && cursorOffsetY <= height) {
      this.action = ACTION_FLAGS.RESIZE_S;
    } else if (cursorOffsetX >= 0 && cursorOffsetX <= borderSize && cursorOffsetY >= 0 && cursorOffsetY <= height) {
      this.action = ACTION_FLAGS.RESIZE_W;
    } else if (cursorOffsetX >= widthSubBorder && cursorOffsetX <= width && cursorOffsetY >= 0 && cursorOffsetY <= height) {
      this.action = ACTION_FLAGS.RESIZE_E;
    } else if (
      cursorOffsetX > borderSize && cursorOffsetX < widthSubBorder &&
      cursorOffsetY > borderSize && cursorOffsetY < heightSubBorder
    ) {
      this.action = ACTION_FLAGS.MOVE;
    } else {
      return;
    }

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

i thought a way to optimize this. given that 
an increasing value of x in [x0, 0,  borderSize, x1, x2, widthSubBorder, width, x3 ]
where each member x_i is <= x_{i+1}
an increasing value of y in [y0, 0,  borderSize, y1, y2, heightSubBorder, height, y3 ]
where each member y_i is <= y_{i+1}
for each component(x,y), we iterate (dont need array, we iterate manually) each member from x_0 and assign them arbitrary bitwise flag by using `>` comparison (if >, assign)
where two bitwise flag corresponds to an action 
heres the action
```
    // action    x-range  y-range
    // resize-nw: (x0, x1) (y0, y1)
    // resize-ne: (x2, x3) (y0, y1)
    // resize-sw: (x0, x1) (y2, y3)
    // resize-se: (x2, x3) (y2, y3)
    // 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)
```
what do you think?