add start/stop method which is different than init or destroy. and init/destroy shouldnt be doing start/stop.
what can be improved?
```
class DrawableArea {
  // A WeakSet to keep track of initialized containers
  static initializedContainers = new WeakSet();

  /**
   * Constructs the DrawableArea.
   * @param {Object} options - Configuration options.
   * @param {HTMLElement} options.container - The DOM element where drawing occurs.
   * @param {RectRegionShapeFactory} options.factory - The pre-configured factory for creating rectangles.
   */
  constructor({ container, factory }) {
    if (!container) {
      throw new Error('Container element is required.');
    }
    if (!factory) {
      throw new Error('RectRegionShapeFactory instance is required.');
    }

    this.container = container;
    this.factory = factory;

    // Bind event handlers to maintain context
    this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);

    // State variables
    this.isDrawing = false;
    this.startX = 0;
    this.startY = 0;
    this.currentRect = null;
  }

  /**
   * Initializes the DrawableArea by attaching event listeners.
   * Checks if the container has already been initialized to prevent duplication.
   */
  init() {
    // Check if the container has already been initialized
    if (DrawableArea.initializedContainers.has(this.container)) {
      console.warn('DrawableArea: Container has already been initialized.');
      return;
    }

    // Ensure the container has a positioning context
    // Instead of using getComputedStyle, we directly set position: relative
    // assuming that it won't overwrite a meaningful existing position
    if (!['relative', 'absolute', 'fixed', 'sticky'].includes(this.container.style.position)) {
      this.container.style.position = 'relative';
    }

    // Mark the container as initialized
    DrawableArea.initializedContainers.add(this.container);

    // Attach event listeners
    this.container.addEventListener('mousedown', this.handleMouseDown);
    // Attach to the window to capture mouse movements outside the container
    window.addEventListener('mousemove', this.handleMouseMove);
    window.addEventListener('mouseup', this.handleMouseUp);
  }

  /**
   * Cleans up event listeners and removes the initialization flag.
   */
  destroy() {
    if (!DrawableArea.initializedContainers.has(this.container)) {
      console.warn('DrawableArea: Container was not initialized or already destroyed.');
      return;
    }

    this.container.removeEventListener('mousedown', this.handleMouseDown);
    window.removeEventListener('mousemove', this.handleMouseMove);
    window.removeEventListener('mouseup', this.handleMouseUp);

    // Remove the container from the initialized set
    DrawableArea.initializedContainers.delete(this.container);
  }

  /**
   * Handles the mousedown event to start drawing.
   * @param {MouseEvent} e 
   */
  handleMouseDown(e) {
    // Only respond to left mouse button
    if (e.button !== 0) return;

    // Prevent drawing if clicking on an existing rectangle
    if (e.target !== this.container) return;

    e.preventDefault(); // Prevent text selection

    this.isDrawing = true;
    const rect = this.container.getBoundingClientRect();
    this.startX = e.clientX - rect.left;
    this.startY = e.clientY - rect.top;

    // Initialize the rectangle with minimal size
    this.currentRect = this.factory.createRect([
      [BasePlugin, { x: this.startX, y: this.startY, width: 0, height: 0 }],
    ]);
  }

  /**
   * Handles the mousemove event to update the drawing rectangle.
   * @param {MouseEvent} e 
   */
  handleMouseMove(e) {
    if (!this.isDrawing || !this.currentRect) return;

    const rect = this.container.getBoundingClientRect();
    const currentX = e.clientX - rect.left;
    const currentY = e.clientY - rect.top;

    let x = this.startX;
    let y = this.startY;
    let width = currentX - this.startX;
    let height = currentY - this.startY;

    // Adjust for negative width
    if (width < 0) {
      x = currentX;
      width = Math.abs(width);
    }

    // Adjust for negative height
    if (height < 0) {
      y = currentY;
      height = Math.abs(height);
    }

    // Update the rectangle's properties using the factory's update method
    this.currentRect.update(
      { x, y, width, height },
      BasePlugin
    );
  }

  /**
   * Handles the mouseup event to finalize the drawing.
   * @param {MouseEvent} e 
   */
  handleMouseUp(e) {
    if (!this.isDrawing) return;
    this.isDrawing = false;

    // Optional: Validate the final size of the rectangle
    const x = this.currentRect.getParam('x', BasePlugin);
    const y = this.currentRect.getParam('y', BasePlugin);
    const width = this.currentRect.getParam('width', BasePlugin);
    const height = this.currentRect.getParam('height', BasePlugin);

    const MIN_SIZE = 10;

    if (
      width < MIN_SIZE ||
      height < MIN_SIZE
    ) {
      // Remove the rectangle if it's too small
      this.currentRect.remove();
    }

    this.currentRect = null;
  }
}
```