diff options
| -rw-r--r-- | src/ClientUtils.ts | 20 | ||||
| -rw-r--r-- | src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 31 |
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]; }); } |