update: add outline color as constant

webapp/IronCalc/src/components/Editor/util.tsx

@@ -194,6 +194,10 @@ function getFormulaHTML(
   } else {
     html = [<span key="single">{text}</span>];
   }
+  // Add a trailing character if text ends with newline to ensure selector's height grows
+  if (text.endsWith("\n")) {
+    html.push(<span key="trailing-newline">{"\n"}</span>);
+  }
   return { html, activeRanges };
 }
 

webapp/IronCalc/src/components/Worksheet/Worksheet.tsx

@@ -17,6 +17,7 @@ import {
   LAST_ROW,
   outlineBackgroundColor,
   outlineColor,
+  outlineEditingColor,
   ROW_HEIGH_SCALE,
 } from "../WorksheetCanvas/constants";
 import WorksheetCanvas from "../WorksheetCanvas/worksheetCanvas";
@@ -226,12 +227,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 +508,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 +520,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 +540,8 @@ const EditorWrapper = styled("div")`
   vertical-align: bottom;
   overflow: hidden;
   text-align: left;
+  outline: 3px solid ${outlineEditingColor};
+  z-index: 1000;
   span {
     min-width: 1px;
   }

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

@@ -12,6 +12,7 @@ export const gridSeparatorColor = "#E0E0E0";
 export const defaultTextColor = "#2E414D";
 
 export const outlineColor = "#F2994A";
+export const outlineEditingColor = "#FBE0C9";
 export const outlineBackgroundColor = "#F2994A1A";
 
 export const LAST_COLUMN = 16_384;

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

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,
@@ -1629,10 +1633,13 @@ export default class WorksheetCanvas {
       );
       handleX = areaX + areaWidth;
       handleY = areaY + areaHeight;
+      const isSelecting = this.workbookState.isSelecting();
+      // Add 1px when selecting to compensate for missing border
+      const borderCompensation = isSelecting ? 1 : 0;
       areaOutline.style.left = `${areaX - padding - 1}px`;
       areaOutline.style.top = `${areaY - padding - 1}px`;
-      areaOutline.style.width = `${areaWidth + 2 * padding + 1}px`;
-      areaOutline.style.height = `${areaHeight + 2 * padding + 1}px`;
+      areaOutline.style.width = `${areaWidth + 2 * padding + 1 + borderCompensation}px`;
+      areaOutline.style.height = `${areaHeight + 2 * padding + 1 + borderCompensation}px`;
       const clipLeft = rowStart < topLeftCell.row && rowStart > frozenRows;
       const clipTop =
         columnStart < topLeftCell.column && columnStart > frozenColumns;
@@ -1644,7 +1651,9 @@ export default class WorksheetCanvas {
         clipLeft,
         clipTop,
       );
-      areaOutline.style.border = `1px solid ${outlineColor}`;
+      areaOutline.style.border = isSelecting
+        ? "none"
+        : `1px solid ${outlineColor}`;
       // hide the handle if it is out of the visible area
       if (
         (rowEnd > frozenRows && rowEnd < topLeftCell.row - 1) ||

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 {