From ab8aaea2bf8064549ca0531a998bf9561c81b3cb Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Sun, 7 Dec 2025 01:25:17 +0100
Subject: [PATCH] update: change border styling in cell selector

---
 .../IronCalc/src/components/Worksheet/Worksheet.tsx  |  8 ++++++--
 .../src/components/WorksheetCanvas/outlineHandle.ts  |  1 +
 .../components/WorksheetCanvas/worksheetCanvas.ts    | 12 +++++++++---
 webapp/IronCalc/src/components/workbookState.ts      | 10 ++++++++++
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx b/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
index 142e06a..80350e6 100644
--- a/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
+++ b/webapp/IronCalc/src/components/Worksheet/Worksheet.tsx
@@ -226,12 +226,14 @@ const Worksheet = forwardRef(
         if (!canvas) {
           return;
         }
+        workbookState.setSelecting(true);
         const { row, column } = cell;
         model.onAreaSelecting(row, column);
         canvas.renderSheet();
         refresh();
       },
       onAreaSelected: () => {
+        workbookState.setSelecting(false);
         const styles = workbookState.getCopyStyles();
         if (styles?.length) {
           model.onPasteStyles(styles);
@@ -505,8 +507,8 @@ const RowResizeGuide = styled("div")`
 
 const AreaOutline = styled("div")`
   position: absolute;
-  border: 1px solid ${outlineColor};
-  border-radius: 3px;
+  border: 0px solid ${outlineColor};
+  border-radius: 1px;
   background-color: ${outlineBackgroundColor};
 `;
 
@@ -517,6 +519,7 @@ const CellOutline = styled("div")`
   word-break: break-word;
   font-size: 13px;
   display: flex;
+  box-shadow: inset 0 0 0 1px white;
 `;
 
 const ExtendToOutline = styled("div")`
@@ -536,6 +539,7 @@ const EditorWrapper = styled("div")`
   vertical-align: bottom;
   overflow: hidden;
   text-align: left;
+  outline: 3px solid ${outlineColor}40;
   span {
     min-width: 1px;
   }
diff --git a/webapp/IronCalc/src/components/WorksheetCanvas/outlineHandle.ts b/webapp/IronCalc/src/components/WorksheetCanvas/outlineHandle.ts
index 22c5eb9..7564ade 100644
--- a/webapp/IronCalc/src/components/WorksheetCanvas/outlineHandle.ts
+++ b/webapp/IronCalc/src/components/WorksheetCanvas/outlineHandle.ts
@@ -26,6 +26,7 @@ export function attachOutlineHandle(
     background: outlineColor,
     cursor: "crosshair",
     borderRadius: "1px",
+    border: `1px solid white`,
   });
 
   // cell handle events
diff --git a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
index 9fdafee..31d0a42 100644
--- a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
+++ b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts
@@ -1560,7 +1560,9 @@ export default class WorksheetCanvas {
       return;
     }
     cellOutline.style.visibility = "visible";
-    cellOutlineHandle.style.visibility = "visible";
+    cellOutlineHandle.style.visibility = this.workbookState.isSelecting()
+      ? "hidden"
+      : "visible";
     areaOutline.style.visibility = "visible";
 
     const [selectedSheet, selectedRow, selectedColumn] =
@@ -1619,7 +1621,9 @@ export default class WorksheetCanvas {
       handleY += this.getRowHeight(selectedSheet, rowStart);
     } else {
       areaOutline.style.visibility = "visible";
-      cellOutlineHandle.style.visibility = "visible";
+      cellOutlineHandle.style.visibility = this.workbookState.isSelecting()
+        ? "hidden"
+        : "visible";
       const [areaX, areaY] = this.getCoordinatesByCell(rowStart, columnStart);
       const [areaWidth, areaHeight] = this.getAreaDimensions(
         rowStart,
@@ -1644,7 +1648,9 @@ export default class WorksheetCanvas {
         clipLeft,
         clipTop,
       );
-      areaOutline.style.border = `1px solid ${outlineColor}`;
+      areaOutline.style.border = this.workbookState.isSelecting()
+        ? "none"
+        : `1px solid ${outlineColor}`;
       // hide the handle if it is out of the visible area
       if (
         (rowEnd > frozenRows && rowEnd < topLeftCell.row - 1) ||
diff --git a/webapp/IronCalc/src/components/workbookState.ts b/webapp/IronCalc/src/components/workbookState.ts
index db5d001..65390a4 100644
--- a/webapp/IronCalc/src/components/workbookState.ts
+++ b/webapp/IronCalc/src/components/workbookState.ts
@@ -92,6 +92,7 @@ export class WorkbookState {
   private copyStyles: AreaStyles | null;
   private cell: EditingCell | null;
   private cutRange: CutRange | null;
+  private selecting: boolean;
 
   constructor() {
     // the extendTo area is the area we are covering
@@ -99,6 +100,15 @@ export class WorkbookState {
     this.copyStyles = null;
     this.cell = null;
     this.cutRange = null;
+    this.selecting = false;
+  }
+
+  isSelecting(): boolean {
+    return this.selecting;
+  }
+
+  setSelecting(value: boolean): void {
+    this.selecting = value;
   }
 
   getExtendToArea(): Area | null {