update: add outline color as constant

base/src/test/mod.rs

@@ -1,5 +1,4 @@
 mod test_actions;
-mod test_arabic_roman;
 mod test_binary_search;
 mod test_cell;
 mod test_cell_clear_contents;
@@ -40,7 +39,6 @@ mod test_metadata;
 mod test_model_cell_clear_all;
 mod test_model_is_empty_cell;
 mod test_move_formula;
-mod test_mround_trunc_int;
 mod test_quote_prefix;
 mod test_row_column_styles;
 mod test_set_user_input;

base/src/test/test_arabic_roman

@@ -6,8 +6,8 @@ use crate::test::util::new_empty_model;
 fn arguments() {
     let mut model = new_empty_model();
     model._set("A1", "=ARABIC()");
-    model._set("A2", "=ARABIC(\"V\")");
+    model._set("A2", "=ARABIC(V)");
-    model._set("A3", "=ARABIC(\"V\", 2)");
+    model._set("A3", "=ARABIC(V, 2)");
 
     model._set("A4", "=ROMAN()");
     model._set("A5", "=ROMAN(5)");

base/src/test/test_mround_trunc_int

@@ -20,6 +20,7 @@ fn arguments() {
     model._set("A11", "=INT(10.22, 1)");
     model._set("A12", "=INT(10.22, 1, 2)");
 
+
     model.evaluate();
 
     assert_eq!(model._get_text("A1"), *"#ERROR!");
@@ -28,7 +29,7 @@ fn arguments() {
     assert_eq!(model._get_text("A4"), *"#ERROR!");
 
     assert_eq!(model._get_text("A5"), *"#ERROR!");
-    assert_eq!(model._get_text("A6"), *"10");
+    assert_eq!(model._get_text("A6"), *"#ERROR!");
     assert_eq!(model._get_text("A7"), *"10.2");
     assert_eq!(model._get_text("A8"), *"#ERROR!");
 

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/FormulaBar/FormulaBar.tsx

@@ -1,7 +1,5 @@
 import type { Model } from "@ironcalc/wasm";
 import { styled } from "@mui/material";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
 import { Fx } from "../../icons";
 import { theme } from "../../theme";
 import { FORMULA_BAR_HEIGHT } from "../constants";
@@ -11,7 +9,6 @@ import {
   ROW_HEIGH_SCALE,
 } from "../WorksheetCanvas/constants";
 import type { WorkbookState } from "../workbookState";
-import FormulaBarMenu from "./FormulaBarMenu";
 
 type FormulaBarProps = {
   cellAddress: string;
@@ -20,8 +17,6 @@ type FormulaBarProps = {
   workbookState: WorkbookState;
   onChange: () => void;
   onTextUpdated: () => void;
-  openDrawer: () => void;
-  canEdit: boolean;
 };
 
 function FormulaBar(properties: FormulaBarProps) {
@@ -33,27 +28,10 @@ function FormulaBar(properties: FormulaBarProps) {
     onTextUpdated,
     workbookState,
   } = properties;
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const handleMenuOpenChange = (isOpen: boolean): void => {
-    setIsMenuOpen(isOpen);
-  };
-
   return (
     <Container>
-      <AddressContainer $active={isMenuOpen}>
+      <AddressContainer>
-        <FormulaBarMenu
-          onMenuOpenChange={handleMenuOpenChange}
-          openDrawer={properties.openDrawer}
-          canEdit={properties.canEdit}
-          model={model}
-          onUpdate={onChange}
-        >
         <CellBarAddress>{cellAddress}</CellBarAddress>
-          <StyledIcon>
-            <ChevronDown size={16} />
-          </StyledIcon>
-        </FormulaBarMenu>
       </AddressContainer>
       <Divider />
       <FormulaContainer>
@@ -123,7 +101,7 @@ const Divider = styled("div")`
   background-color: ${theme.palette.grey["300"]};
   min-width: 1px;
   height: 16px;
-  margin: 0px 16px 0px 8px;
+  margin: 0px 16px;
 `;
 
 const FormulaContainer = styled("div")`
@@ -143,46 +121,22 @@ const Container = styled("div")`
   background: ${(properties): string =>
     properties.theme.palette.background.default};
   height: ${FORMULA_BAR_HEIGHT}px;
-  border-top: 1px solid ${theme.palette.grey["300"]};
 `;
 
-const AddressContainer = styled("div")<{ $active?: boolean }>`
+const AddressContainer = styled("div")`
+  padding-left: 16px;
   color: ${theme.palette.common.black};
   font-style: normal;
+  font-weight: normal;
   font-size: 12px;
   display: flex;
   font-weight: 600;
-  align-items: center;
+  flex-grow: row;
-  gap: 2px;
-  border-radius: 4px;
-  margin-left: 8px;
-  cursor: pointer;
-  background-color: ${(props) =>
-    props.$active ? theme.palette.action.selected : "transparent"};
-  &:hover {
-   background-color: ${(props) =>
-     props.$active ? theme.palette.action.selected : theme.palette.grey["100"]};
-  }
 `;
 
 const CellBarAddress = styled("div")`
   width: 100%;
-  box-sizing: border-box;
+  text-align: "center";
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding-left: 8px;
-  background-color: transparent;
-`;
-
-const StyledIcon = styled("div")`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 2px;
-  background-color: transparent;
 `;
 
 const EditorWrapper = styled("div")`

webapp/IronCalc/src/components/FormulaBar/FormulaBarMenu.tsx

@@ -1,170 +0,0 @@
-import type { Model } from "@ironcalc/wasm";
-import { Menu, MenuItem, styled } from "@mui/material";
-import { Tag } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { theme } from "../../theme";
-import { parseRangeInSheet } from "../Editor/util";
-
-type FormulaBarMenuProps = {
-  children: React.ReactNode;
-  onMenuOpenChange: (isOpen: boolean) => void;
-  openDrawer: () => void;
-  canEdit: boolean;
-  model: Model;
-  onUpdate: () => void;
-};
-
-const FormulaBarMenu = (properties: FormulaBarMenuProps) => {
-  const { t } = useTranslation();
-  const [isMenuOpen, setMenuOpen] = useState(false);
-  const anchorElement = useRef<HTMLDivElement>(null);
-
-  const handleMenuOpen = useCallback((): void => {
-    setMenuOpen(true);
-    properties.onMenuOpenChange(true);
-  }, [properties.onMenuOpenChange]);
-
-  const handleMenuClose = useCallback((): void => {
-    setMenuOpen(false);
-    properties.onMenuOpenChange(false);
-  }, [properties.onMenuOpenChange]);
-
-  const definedNameList = properties.model.getDefinedNameList();
-
-  return (
-    <>
-      <ChildrenWrapper onClick={handleMenuOpen} ref={anchorElement}>
-        {properties.children}
-      </ChildrenWrapper>
-      <StyledMenu
-        open={isMenuOpen}
-        onClose={handleMenuClose}
-        anchorEl={anchorElement.current}
-        marginThreshold={0}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-      >
-        {definedNameList.length > 0 ? (
-          <>
-            {definedNameList.map((definedName) => {
-              return (
-                <MenuItemWrapper
-                  key={`${definedName.name}-${definedName.scope}`}
-                  disableRipple
-                  onClick={() => {
-                    // select the area corresponding to the defined name
-                    const formula = definedName.formula;
-                    const range = parseRangeInSheet(properties.model, formula);
-                    if (range) {
-                      const [
-                        sheetIndex,
-                        rowStart,
-                        columnStart,
-                        rowEnd,
-                        columnEnd,
-                      ] = range;
-                      properties.model.setSelectedSheet(sheetIndex);
-                      properties.model.setSelectedCell(rowStart, columnStart);
-                      properties.model.setSelectedRange(
-                        rowStart,
-                        columnStart,
-                        rowEnd,
-                        columnEnd,
-                      );
-                    }
-                    properties.onUpdate();
-                    handleMenuClose();
-                  }}
-                >
-                  <Tag />
-                  <MenuItemText>{definedName.name}</MenuItemText>
-                  <MenuItemExample>{definedName.formula}</MenuItemExample>
-                </MenuItemWrapper>
-              );
-            })}
-            <MenuDivider />
-          </>
-        ) : null}
-        <MenuItemWrapper
-          onClick={() => {
-            properties.openDrawer();
-            handleMenuClose();
-          }}
-          disabled={!properties.canEdit}
-          disableRipple
-        >
-          <MenuItemText>{t("formula_bar.manage_named_ranges")}</MenuItemText>
-        </MenuItemWrapper>
-      </StyledMenu>
-    </>
-  );
-};
-
-const StyledMenu = styled(Menu)`
-  top: 4px;
-  min-width: 260px;
-  max-width: 460px;
-  & .MuiPaper-root {
-    border-radius: 8px;
-    padding: 4px 0px;
-    margin-left: -4px;
-  }
-  & .MuiList-root {
-    padding: 0;
-  }
-`;
-
-const MenuItemWrapper = styled(MenuItem)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-  gap: 8px;
-  width: calc(100% - 8px);
-  min-width: 172px;
-  margin: 0px 4px;
-  border-radius: 4px;
-  padding: 8px;
-  height: 32px;
-  & svg {
-    width: 12px;
-    height: 12px;
-    flex-shrink: 0;
-    color: ${theme.palette.grey[600]};
-  }
-`;
-
-const ChildrenWrapper = styled("div")`
-  display: flex;
-`;
-
-const MenuDivider = styled("div")`
-  width: 100%;
-  margin: auto;
-  margin-top: 4px;
-  margin-bottom: 4px;
-  border-top: 1px solid ${theme.palette.grey[200]};
-`;
-
-const MenuItemText = styled("div")`
-  flex: 1;
-  min-width: 0;
-  color: ${theme.palette.common.black};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const MenuItemExample = styled("div")`
-  color: ${theme.palette.grey[400]};
-  margin-left: 12px;
-`;
-
-export default FormulaBarMenu;

webapp/IronCalc/src/components/RightDrawer/NamedRanges/NamedRanges.tsx

@@ -398,9 +398,7 @@ const ListItem = styled("div")<{ $isSelected: boolean }>(({ $isSelected }) => ({
   display: "flex",
   alignItems: "flex-start",
   justifyContent: "space-between",
-  gap: "8px",
   padding: "8px 12px",
-  cursor: "pointer",
   minHeight: "40px",
   boxSizing: "border-box",
   borderBottom: `1px solid ${theme.palette.grey[200]}`,
@@ -440,8 +438,6 @@ const NameText = styled("span")({
   fontSize: "12px",
   color: theme.palette.common.black,
   fontWeight: 600,
-  wordBreak: "break-all",
-  overflowWrap: "break-word",
 });
 
 const IconsWrapper = styled("div")({

webapp/IronCalc/src/components/Toolbar/Toolbar.tsx

@@ -33,6 +33,7 @@ import {
   Redo2,
   RemoveFormatting,
   Strikethrough,
+  Tags,
   Type,
   Underline,
   Undo2,
@@ -86,6 +87,7 @@ type ToolbarProperties = {
   numFmt: string;
   showGridLines: boolean;
   onToggleShowGridLines: (show: boolean) => void;
+  openDrawer: () => void;
 };
 
 function Toolbar(properties: ToolbarProperties) {
@@ -512,6 +514,18 @@ function Toolbar(properties: ToolbarProperties) {
               {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
             </StyledButton>
           </Tooltip>
+          <Tooltip title={t("toolbar.named_ranges")}>
+            <StyledButton
+              type="button"
+              $pressed={false}
+              onClick={() => {
+                properties.openDrawer();
+              }}
+              disabled={!canEdit}
+            >
+              <Tags />
+            </StyledButton>
+          </Tooltip>
           <Tooltip title={t("toolbar.selected_png")}>
             <StyledButton
               type="button"

webapp/IronCalc/src/components/Workbook/Workbook.tsx

@@ -665,6 +665,9 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           model.setShowGridLines(sheet, show);
           setRedrawId((id) => id + 1);
         }}
+        openDrawer={() => {
+          setDrawerOpen(true);
+        }}
       />
       <WorksheetAreaLeft $drawerWidth={isDrawerOpen ? drawerWidth : 0}>
         <FormulaBar
@@ -679,10 +682,6 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
           }}
           model={model}
           workbookState={workbookState}
-          openDrawer={() => {
-            setDrawerOpen(true);
-          }}
-          canEdit={true}
         />
         <Worksheet
           model={model}
@@ -763,9 +762,9 @@ type WorksheetAreaLeftProps = { $drawerWidth: number };
 const WorksheetAreaLeft = styled("div")<WorksheetAreaLeftProps>(
   ({ $drawerWidth }) => ({
     position: "absolute",
-    top: `${TOOLBAR_HEIGHT}px`,
+    top: `${TOOLBAR_HEIGHT + 1}px`,
     width: `calc(100% - ${$drawerWidth}px)`,
-    height: `calc(100% - ${TOOLBAR_HEIGHT}px)`,
+    height: `calc(100% - ${TOOLBAR_HEIGHT + 1}px)`,
   }),
 );
 

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: 0px solid ${outlineColor};
-  border-radius: 3px;
+  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.width = `${areaWidth + 2 * padding + 1 + borderCompensation}px`;
-      areaOutline.style.height = `${areaHeight + 2 * padding + 1}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 {

webapp/IronCalc/src/locale/en_us.json

@@ -92,9 +92,6 @@
     "label": "Formula",
     "title": "Update formula"
   },
-  "formula_bar": {
-    "manage_named_ranges": "Manage Named Ranges"
-  },
   "navigation": {
     "add_sheet": "Add sheet",
     "sheet_list": "Sheet list",