UPDATE: Double click in the outline handle fills column

This also removes React from the equation.
So all event handling is done outside of the React loop.
This simplifies some things and helps us in a possible move
away from React.

This is closer to how we deal with the column and row handle resizers.

I think it works quite well and it is more future proof.

But TBH I just want to try it out and see what is the DX after this.

Fixes #359

webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -30,7 +30,6 @@ export interface CanvasSettings {
     canvas: HTMLCanvasElement;
     cellOutline: HTMLDivElement;
     areaOutline: HTMLDivElement;
-    cellOutlineHandle: HTMLDivElement;
     extendToOutline: HTMLDivElement;
     columnGuide: HTMLDivElement;
     rowGuide: HTMLDivElement;
@@ -55,70 +54,6 @@ export const defaultCellFontFamily = fonts.regular;
 export const headerFontFamily = fonts.regular;
 export const frozenSeparatorWidth = 3;
 
-// Get a 10% transparency of an hex color
-function hexToRGBA10Percent(colorHex: string): string {
-  // Remove the leading hash (#) if present
-  const hex = colorHex.replace(/^#/, "");
-
-  // Parse the hex color
-  const red = Number.parseInt(hex.substring(0, 2), 16);
-  const green = Number.parseInt(hex.substring(2, 4), 16);
-  const blue = Number.parseInt(hex.substring(4, 6), 16);
-
-  // Set the alpha (opacity) to 0.1 (10%)
-  const alpha = 0.1;
-
-  // Return the RGBA color string
-  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-}
-
-/**
- * Splits the given text into multiple lines. If `wrapText` is true, it applies word-wrapping
- * based on the specified canvas context, maximum width, and horizontal padding.
- *
- * - First, the text is split by newline characters so that explicit newlines are respected.
- * - If wrapping is enabled, each line is further split into words and measured against the
- *   available width. Whenever adding an extra word would exceed
- *   this limit, a new line is started.
- *
- * @param text     The text to split into lines.
- * @param wrapText Whether to apply word-wrapping or just return text split by newlines.
- * @param context  The `CanvasRenderingContext2D` used for measuring text width.
- * @param width    The maximum width for each line.
- * @returns        An array of lines (strings), each fitting within the specified width if wrapping is enabled.
- */
-function computeWrappedLines(
-  text: string,
-  wrapText: boolean,
-  context: CanvasRenderingContext2D,
-  width: number,
-): string[] {
-  // Split the text into lines
-  const rawLines = text.split("\n");
-  if (!wrapText) {
-    // If there is no wrapping, return the raw lines
-    return rawLines;
-  }
-  const wrappedLines = [];
-  for (const line of rawLines) {
-    const words = line.split(" ");
-    let currentLine = words[0];
-    for (let i = 1; i < words.length; i += 1) {
-      const word = words[i];
-      const testLine = `${currentLine} ${word}`;
-      const textWidth = context.measureText(testLine).width;
-      if (textWidth < width) {
-        currentLine = testLine;
-      } else {
-        wrappedLines.push(currentLine);
-        currentLine = word;
-      }
-    }
-    wrappedLines.push(currentLine);
-  }
-  return wrappedLines;
-}
-
 export default class WorksheetCanvas {
   sheetWidth: number;
 
@@ -171,7 +106,6 @@ export default class WorksheetCanvas {
     this.refresh = options.refresh;
 
     this.cellOutline = options.elements.cellOutline;
-    this.cellOutlineHandle = options.elements.cellOutlineHandle;
     this.areaOutline = options.elements.areaOutline;
     this.extendToOutline = options.elements.extendToOutline;
     this.rowGuide = options.elements.rowGuide;
@@ -181,6 +115,7 @@ export default class WorksheetCanvas {
     this.onColumnWidthChanges = options.onColumnWidthChanges;
     this.onRowHeightChanges = options.onRowHeightChanges;
     this.resetHeaders();
+    this.cellOutlineHandle = attachOutlineHandle(this);
   }
 
   setScrollPosition(scrollPosition: { left: number; top: number }): void {