fixed col drag highlight and cleaned up multi-select highlight

1 files changed, 37 insertions, 5 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 791465741..c8bd48019 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -13,7 +13,7 @@ import Select from 'react-select';
 import { ClientUtils, StopEvent, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { DateField } from '../../../../fields/DateField';
-import { Doc, DocListCast, Field } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, IdToDoc } from '../../../../fields/Doc';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types';
@@ -33,6 +33,7 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
+import { ContextMenu } from '../../ContextMenu';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -57,8 +58,8 @@ export interface SchemaTableCellProps {
     transform: () => Transform;
     autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click
     rootSelected?: () => boolean;
-    cleanupField: (field: string) => string;
     rowSelected: () => boolean;
+    isolatedSelection: [boolean, boolean];
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -137,13 +138,32 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return { color, textDecoration, fieldProps, cursor, pointerEvents };
     }
 
+    // openContextMenu = () => {
+    //     const cm = ContextMenu.Instance;
+    //     cm.clearItems();
+
+        
+    // }
+
+    // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
+    cleanupField = (field: string) => {
+        const idPattern = /idToDoc\((.*?)\)/g;
+        let modField = field.slice();
+        let matches;
+        let results = new Map<string, string>();
+        while ((matches = idPattern.exec(field)) !== null) {results.set(matches[0], matches[1].replace(/"/g, '')); }
+        results.forEach((id, funcId) => {modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());})
+        if (!modField) modField = '';
+        return modField;
+    }
+
     @computed get defaultCellContent() {
         const { color, textDecoration, fieldProps, pointerEvents } = SchemaTableCell.renderProps(this._props);
 
-
         return (
             <div
                 className="schemacell-edit-wrapper"
+                // onContextMenu={}
                 style={{
                     color,
                     textDecoration,
@@ -157,7 +177,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc
+                    GetValue={() => this.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))}
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
@@ -201,6 +221,15 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         }
     }
 
+    @computed get borderColor() {
+        const sides: Array<string | undefined> = [];
+        sides[0] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // left
+        sides[1] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // right
+        sides[2] = (!this._props.isolatedSelection[0] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
+        sides[3] = (!this._props.isolatedSelection[1] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
+        return sides;
+    }
+
     render() {
         return (
             <div
@@ -220,7 +249,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 style={{ padding: this._props.padding, 
                 maxWidth: this._props.maxWidth?.(), 
                 width: this._props.columnWidth() || undefined, 
-                border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined,
+                borderLeft: this.borderColor[0],
+                borderRight: this.borderColor[1],
+                borderTop: this.borderColor[2],
+                borderBottom: this.borderColor[3],
                 backgroundColor: this.backgroundColor}}>
                 {this.isDefault ? '' : this.content}
             </div>