background color for highlighted cells done (why did this take 2 hours ~_~)

2 files changed, 42 insertions, 9 deletions

diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts
index d03ae1486..cd2b9b3a9 100644
--- a/src/ClientUtils.ts
+++ b/src/ClientUtils.ts
@@ -321,6 +321,26 @@ export namespace ClientUtils {
         return { h: h, s: s, l: l };
     }
 
+    export function lightenRGB(rVal: number, gVal: number, bVal: number, percent: number): [number, number, number] {
+        const amount = 1 + percent/100;
+        const r = rVal * amount;
+        const g = gVal * amount;
+        const b = bVal * amount;
+
+        const threshold = 255.999;
+        const maxVal = Math.max(r, g, b);
+        if (maxVal <= threshold) {
+            return [Math.round(r), Math.round(g), Math.round(b)];
+        }
+        const total = r + g + b;
+        if (total >= 3 * threshold) {
+            return [Math.round(threshold), Math.round(threshold), Math.round(threshold)];
+        }
+        const x = (3 * threshold - total) / (3 * maxVal - total);
+        const gray = threshold - x * maxVal;
+        return [Math.round(gray + x * r), Math.round(gray + x * g), Math.round(gray + x * b)];
+    }
+
     export function scrollIntoView(targetY: number, targetHgt: number, scrollTop: number, contextHgt: number, minSpacing: number, scrollHeight: number) {
         if (!targetHgt) return targetY; // if there's no height, then assume that
         if (scrollTop + contextHgt < Math.min(scrollHeight, targetY + minSpacing + targetHgt)) {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ba2d2a764..df160a3a4 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -4,7 +4,7 @@ import { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-component
 import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, observe, override, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
+import { ClientUtils, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, FieldType, IdToDoc, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { AclPrivate, DocData } from '../../../../fields/DocSymbols';
@@ -101,7 +101,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
     @observable _highlightedCells: Array<HTMLDivElement> = [];
-    @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string>();
+    @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>();
     @observable _docs: Doc[] = [];
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
@@ -515,24 +515,37 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     removeCellHighlights = () => {
-        this._highlightedCells.forEach(cell => cell.style.border = '');
+        this._highlightedCells.forEach(cell => {cell.style.border = ''; cell.style.backgroundColor = '';});
         this._highlightedCells = [];
     }
 
     highlightCells = (text: string) => {
         this.removeCellHighlights();
 
-        const randNum = (): number => {return Math.floor(Math.random() * (255 - 1));}
-        const randomRGBColor = (): string => {
-            const r = randNum(); const g = randNum(); const b = randNum(); // prettier-ignore
-            return `rgb(${r}, ${g}, ${b})`;
+        const randomRGBColor = (): string[] => {
+            let r; let g; let b;
+            do {
+                r = Math.floor(Math.random() * 256);
+                g = Math.floor(Math.random() * 256);
+                b = Math.floor(Math.random() * 256);
+            } while ((r + g + b) < 400 || (r + g + b) > 450);
+        
+            const rL = ClientUtils.lightenRGB(r, g, b, 60)[0];
+            const gL = ClientUtils.lightenRGB(r, g, b, 60)[1];
+            const bL = ClientUtils.lightenRGB(r, g, b, 60)[2];
+            const backgroundRGB = {rL, gL, bL};
+
+            return new Array<string>(`rgb(${r}, ${g}, ${b})`, `rgb(${backgroundRGB.rL}, ${backgroundRGB.gL}, ${backgroundRGB.bL})`);
         }
 
         const cellsToHighlight = this.findCellRefs(text);
         this._highlightedCells = [...cellsToHighlight];
         this._highlightedCells.forEach(cell => {
-            if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, `solid 2px ${randomRGBColor()}`)}
-            cell.style.border = this._cellHighlightColors.get(cell);
+            const color = randomRGBColor();
+            console.log('border: ' + color[0] + ' background: ' + color[1])
+            if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
+            cell.style.border = this._cellHighlightColors.get(cell)[0];
+            cell.style.backgroundColor = this._cellHighlightColors.get(cell)[1];
         });
     }