feat: add customizable highlighted regions to cells

src/Cell.tsx

@@ -57,6 +57,14 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
     [setCellDimensions, select, dragging, point]
   );
 
+  // Report dimensions on initial render
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (root) {
+      setCellDimensions(point, getOffsetRect(root));
+    }
+  }, [setCellDimensions, point]);
+
   React.useEffect(() => {
     const root = rootRef.current;
     if (selected && root) {

src/FloatingRect.tsx

@@ -7,18 +7,20 @@ export type Props = {
   dimensions?: Types.Dimensions | null | undefined;
   hidden?: boolean;
   dragging?: boolean;
+  additionalClasses?: string[],
 };
 
 const FloatingRect: React.FC<Props> = ({
   dimensions,
   dragging,
   hidden,
   variant,
+  additionalClasses,
 }) => {
   const { width, height, top, left } = dimensions || {};
   return (
     <div
-      className={classnames("Spreadsheet__floating-rect", {
+      className={classnames("Spreadsheet__floating-rect", additionalClasses, {
         [`Spreadsheet__floating-rect--${variant}`]: variant,
         "Spreadsheet__floating-rect--dragging": dragging,
         "Spreadsheet__floating-rect--hidden": hidden,

src/Highlighted.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import {getRangeDimensions} from "./util";
+import FloatingRect from "./FloatingRect";
+import useSelector from "./use-selector";
+import * as Types from "./types";
+import {Highlight} from "./types";
+
+export function getHighlightedDimensions(
+    rowDimensions: Types.StoreState["rowDimensions"],
+    columnDimensions: Types.StoreState["columnDimensions"],
+    data: Types.StoreState["model"]["data"],
+    highlight: Highlight
+): Types.Dimensions | undefined {
+  const range = highlight.selection.toRange(data);
+  return range
+      ? getRangeDimensions(rowDimensions, columnDimensions, range)
+      : undefined;
+}
+
+const HighlightRect: React.FC<{ highlight: Highlight }> = ({ highlight }) => {
+    const dimensions = useSelector(
+        (state) =>
+            highlight &&
+            getHighlightedDimensions(
+                state.rowDimensions,
+                state.columnDimensions,
+                state.model.data,
+                highlight
+            )
+    );
+
+    const dragging = useSelector((state) => state.dragging);
+    return (
+        <FloatingRect
+            variant="highlighted"
+            additionalClasses={highlight.classNames}
+            dimensions={dimensions}
+            dragging={dragging}
+            hidden={false}
+        />
+    );
+}
+
+const Highlighted: React.FC = () => {
+  const highlights= useSelector((state) => state.highlights);
+
+  return (
+    <>
+      {highlights.map((highlight, index) => {
+        return <HighlightRect key={index} highlight={highlight} />;
+      })}
+    </>
+  );
+};
+
+export default Highlighted;

src/Spreadsheet.tsx

@@ -38,6 +38,7 @@ import Selected from "./Selected";
 import Copied from "./Copied";
 
 import "./Spreadsheet.css";
+import Highlighted from "./Highlighted";
 
 /** The Spreadsheet component props */
 export type Props<CellType extends Types.CellBase> = {
@@ -82,6 +83,8 @@ export type Props<CellType extends Types.CellBase> = {
   hideColumnIndicators?: boolean;
   /** The selected cells in the worksheet. */
   selected?: Selection;
+  /** List of highlighted regions in the worksheet. */
+  highlights?: Types.Highlight[];
   // Custom Components
   /** Component rendered above each column. */
   ColumnIndicator?: Types.ColumnIndicatorComponent;
@@ -160,8 +163,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       ...INITIAL_STATE,
       model,
       selected: props.selected || INITIAL_STATE.selected,
+      highlights: props.highlights || INITIAL_STATE.highlights,
     } as State;
-  }, [props.createFormulaParser, props.data, props.selected]);
+  }, [props.createFormulaParser, props.data, props.selected, props.highlights]);
 
   const reducerElements = React.useReducer(
     reducer as unknown as React.Reducer<State, Actions.Action>,
@@ -213,6 +217,11 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     (selection: Selection) => dispatch(Actions.setSelection(selection)),
     [dispatch]
   );
+  const setHighlights = React.useCallback(
+    (highlights: Types.Highlight[]) =>
+      dispatch(Actions.setHighlights(highlights)),
+    [dispatch]
+  );
 
   // Track active
   const prevActiveRef = React.useRef<Point.Point | null>(state.active);
@@ -306,6 +315,21 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     prevSelectedPropRef.current = props.selected;
   }, [props.selected, setSelection]);
 
+  // Update highlights when props.highlights changes
+  const prevHighlightsPropRef = React.useRef<Types.Highlight[] | undefined>(
+      props.highlights
+  );
+  React.useEffect(() => {
+      if (
+          props.highlights &&
+          prevHighlightsPropRef.current &&
+          props.highlights !== prevHighlightsPropRef.current
+      ) {
+        setHighlights(props.highlights);
+      }
+      prevHighlightsPropRef.current = props.highlights;
+  }, [props.highlights, dispatch]);
+
   // Update data when props.data changes
   const prevDataPropRef = React.useRef<Matrix.Matrix<CellType> | undefined>(
     props.data
@@ -552,6 +576,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
         {tableNode}
         {activeCellNode}
         <Selected />
+        <Highlighted />
         <Copied />
       </div>
     ),

src/actions.ts

@@ -4,7 +4,7 @@ import {
   CellBase,
   Dimensions,
   CommitChanges,
-  CreateFormulaParser,
+  CreateFormulaParser, Highlight,
 } from "./types";
 import { Selection } from "./selection";
 
@@ -14,6 +14,7 @@ export const SELECT_ENTIRE_ROW = "SELECT_ENTIRE_ROW";
 export const SELECT_ENTIRE_COLUMN = "SELECT_ENTIRE_COLUMN";
 export const SELECT_ENTIRE_WORKSHEET = "SELECT_ENTIRE_WORKSHEET";
 export const SET_SELECTION = "SET_SELECTION";
+export const SET_HIGHLIGHTS = "SET_HIGHLIGHTS";
 export const SELECT = "SELECT";
 export const ACTIVATE = "ACTIVATE";
 export const SET_CELL_DATA = "SET_CELL_DATA";
@@ -132,6 +133,25 @@ export function select(point: Point): SelectAction {
   };
 }
 
+export type SetHighlightsAction = BaseAction<typeof SET_HIGHLIGHTS> & {
+  payload: {
+    highlights: Highlight[];
+  };
+};
+
+export function setHighlights(highlights: Highlight[]): SetHighlightsAction {
+  return {
+    type: SET_HIGHLIGHTS,
+    payload: { highlights },
+  };
+}
+
+export type HighlightAction = BaseAction<typeof SET_HIGHLIGHTS> & {
+    payload: {
+      highlights: Highlight[];
+    };
+}
+
 export type ActivateAction = BaseAction<typeof ACTIVATE> & {
   payload: {
     point: Point;
@@ -284,6 +304,7 @@ export type Action =
   | SelectEntireWorksheetAction
   | SetSelectionAction
   | SelectAction
+  | HighlightAction
   | ActivateAction
   | SetCellDataAction
   | SetCellDimensionsAction

src/reducer.ts

@@ -25,6 +25,7 @@ export const INITIAL_STATE: Types.StoreState = {
   dragging: false,
   model: new Model(createFormulaParser, []),
   selected: new EmptySelection(),
+  highlights: [],
   copied: null,
   lastCommit: null,
 };
@@ -103,6 +104,13 @@ export default function reducer(
         mode: "view",
       };
     }
+    case Actions.SET_HIGHLIGHTS: {
+        const { highlights } = action.payload;
+        return {
+          ...state,
+          highlights,
+        };
+    }
     case Actions.SELECT: {
       const { point } = action.payload;
       if (state.active && !isActive(state.active, point)) {

src/stories/Spreadsheet.stories.tsx

@@ -17,6 +17,8 @@ import CustomCell from "./CustomCell";
 import { RangeEdit, RangeView } from "./RangeDataComponents";
 import { SelectEdit, SelectView } from "./SelectDataComponents";
 import { CustomCornerIndicator } from "./CustomCornerIndicator";
+import {Highlight} from "../types";
+import {useEffect} from "react";
 
 type StringCell = CellBase<string | undefined>;
 type NumberCell = CellBase<number | undefined>;
@@ -61,6 +63,26 @@ const meta: Meta<Props<StringCell>> = {
           }
         }}
       >
+        <style>
+            {`
+            .cell-highlight-red {
+                background: rgba(238, 204, 204, 0.34);
+                border: 2px #FFCCCC solid;
+            }
+            .cell-highlight-blue {
+                background: rgba(204, 204, 238, 0.34);
+                border: 2px #CCCCFF solid;
+            }
+            .cell-highlight-green {
+                background: rgba(204, 238, 204, 0.34);
+                border: 2px #CCFFCC solid;
+            }
+            .cell-highlight-yellow {
+              background: rgba(238, 238, 204, 0.34);
+              border: 2px #FFFFCC solid;
+            }
+            `}
+        </style>
         <Story />
       </div>
     ),
@@ -286,6 +308,8 @@ export const ControlledSelection: StoryFn<Props<StringCell>> = (props) => {
   const [selected, setSelected] = React.useState<Selection>(
     new EmptySelection()
   );
+  const [running, setRunning] = React.useState(false);
+  const [highlighted, setHighlighted] = React.useState<Array<Highlight>>([]);
   const handleSelect = React.useCallback((selection: Selection) => {
     setSelected(selection);
   }, []);
@@ -302,16 +326,53 @@ export const ControlledSelection: StoryFn<Props<StringCell>> = (props) => {
     setSelected(new EntireWorksheetSelection());
   }, []);
 
+  useEffect(() => {
+    if (!running) {
+      return;
+    }
+    setTimeout(() => {
+      if (highlighted.length < 4) {
+        setHighlighted([
+            ...highlighted,
+            {
+              selection: new EntireColumnsSelection(highlighted.length, highlighted.length),
+              classNames: ["cell-highlight-red", "cell-highlight-blue", "cell-highlight-green", "cell-highlight-yellow"].slice(highlighted.length, highlighted.length + 1)
+            },
+        ])
+      } else {
+        setHighlighted([]);
+      }
+    }, 1000);
+  }, [highlighted, running]);
+
   return (
     <div>
       <div>
+        <p>Selection</p>
         <button onClick={handleSelectEntireRow}>Select entire row</button>
         <button onClick={handleSelectEntireColumn}>Select entire column</button>
         <button onClick={handleSelectEntireWorksheet}>
           Select entire worksheet
         </button>
+        <p>Highlighting</p>
+        <button onClick={() => setHighlighted([{
+          selection: new EntireWorksheetSelection(),
+          classNames: ["cell-highlight-red"],
+        }])}>
+          Highlight entire worksheet
+        </button>
+        <button onClick={() => setHighlighted([{
+          selection: new EntireColumnsSelection(0, 0),
+          classNames: ["cell-highlight-red"],
+        }])}>
+          Highlight entire column
+        </button>
+        <button onClick={() => setRunning(!running)}>
+            {running ? "Stop" : "Start"} cycling highlighting
+        </button>
       </div>
-      <Spreadsheet {...props} selected={selected} onSelect={handleSelect} />;
+      <hr />
+      <Spreadsheet {...props} highlights={highlighted} selected={selected} onSelect={handleSelect}/>;
     </div>
   );
 };

src/types.ts

@@ -45,9 +45,16 @@ export type Dimensions = {
   left: number;
 };
 
+/* List of highlighted cells */
+export type Highlight = {
+  classNames: string[];
+  selection: Selection;
+}
+
 export type StoreState<Cell extends CellBase = CellBase> = {
   model: Model<Cell>;
   selected: Selection;
+  highlights: Highlight[];
   copied: PointRange | null;
   hasPasted: boolean;
   cut: boolean;