selection working (except ctrl+click)

3 files changed, 102 insertions, 115 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index bd9303997..22b8496aa 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -6,7 +6,7 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { listSpec } from '../../../../fields/Schema';
-import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, smoothScroll, Utils } from '../../../../Utils';
 import { Docs, DocUtils } from '../../../documents/Documents';
@@ -24,6 +24,7 @@ import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
 import { DefaultStyleProvider } from '../../StyleProvider';
+import { DocumentManager } from '../../../util/DocumentManager';
 
 export enum ColumnType {
     Number,
@@ -38,7 +39,6 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'creationDate',
 @observer
 export class CollectionSchemaView extends CollectionSubView() {
     private _ref: HTMLDivElement | null = null;
-    private _lastSelectedRow: number | undefined;
     private _selectedDocSortedArray: Doc[] = [];
     private _closestDropIndex: number = 0;
     private _previewRef: HTMLDivElement | null = null;
@@ -47,11 +47,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     public static _minColWidth: number = 150;
     public static _rowMenuWidth: number = 100;
     public static _previewDividerWidth: number = 4;
+    @observable _lastSelectedRow: number | undefined;
     @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
     @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>();
     @observable _isDragging: boolean = false;
     @observable _displayColumnWidths: number[] | undefined;
-    @observable _previewDoc: Doc | undefined;
 
     get documentKeys() {
         const docs = this.childDocs;
@@ -110,6 +110,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         return BoolCast(this.layoutDoc.sortDesc);
     }
 
+    rowIndex(doc: Doc) {
+        return this.childDocs.indexOf(doc);
+    }
+
     componentDidMount() {
         this.props.setContentView?.(this as DocComponentView);
         document.addEventListener('keydown', this.onKeyDown);
@@ -121,30 +125,32 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     onKeyDown = (e: KeyboardEvent) => {
-        if (this._selectedDocs.size > 0) {
-            if (e.key == 'ArrowDown') {
-                const lastDoc = Array.from(this._selectedDocs.values()).lastElement();
-                const lastIndex = this.childDocs.indexOf(lastDoc);
-                if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
-                    this._selectedDocs.clear();
-                    const newDoc = this.childDocs[lastIndex + 1];
-                    this._selectedDocs.add(newDoc);
-                    SelectionManager.SelectSchemaViewDoc(newDoc);
-                    this._previewDoc = newDoc;
-                }
-            }
-            if (e.key == 'ArrowUp') {
-                const firstDoc = Array.from(this._selectedDocs.values())[0];
-                const firstIndex = this.childDocs.indexOf(firstDoc);
-                if (firstIndex > 0) {
-                    this._selectedDocs.clear();
-                    const newDoc = this.childDocs[firstIndex - 1];
-                    this._selectedDocs.add(newDoc);
-                    SelectionManager.SelectSchemaViewDoc(newDoc);
-                    this._previewDoc = newDoc;
-                }
-            }
-        }
+        // if (this._selectedDocs.size > 0) {
+        //     if (e.key == 'ArrowDown') {
+        //         const lastDoc = Array.from(this._selectedDocs.values()).lastElement();
+        //         const lastIndex = this.childDocs.indexOf(lastDoc);
+        //         if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
+        //             this._selectedDocs.clear();
+        //             const newDoc = this.childDocs[lastIndex + 1];
+        //             this._selectedDocs.add(newDoc);
+        //             const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc);
+        //         if (presDocView) SelectionManager.SelectView(presDocView, false);
+        //             SelectionManager.SelectSchemaViewDoc(newDoc);
+        //             this._previewDoc = newDoc;
+        //         }
+        //     }
+        //     if (e.key == 'ArrowUp') {
+        //         const firstDoc = Array.from(this._selectedDocs.values())[0];
+        //         const firstIndex = this.childDocs.indexOf(firstDoc);
+        //         if (firstIndex > 0) {
+        //             this._selectedDocs.clear();
+        //             const newDoc = this.childDocs[firstIndex - 1];
+        //             this._selectedDocs.add(newDoc);
+        //             SelectionManager.SelectSchemaViewDoc(newDoc);
+        //             this._previewDoc = newDoc;
+        //         }
+        //     }
+        // }
     };
 
     @undoBatch
@@ -304,40 +310,51 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    selectRow = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => {
+    addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => {
+        this._selectedDocs.add(doc);
+        const rowDocView = DocumentManager.Instance.getDocumentView(doc);
+        if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection);
+        this._lastSelectedRow = index;
+    };
+
+    @action
+    removeDocFromSelection = (doc: Doc) => {
+        if (this._selectedDocs.has(doc)) this._selectedDocs.delete(doc);
+        const rowDocView = DocumentManager.Instance.getDocumentView(doc);
+        if (rowDocView) SelectionManager.DeselectView(rowDocView);
+    };
+
+    @action
+    clearSelection = () => {
+        this._selectedDocs.clear();
+        SelectionManager.DeselectAll();
+        this._lastSelectedRow = undefined;
+    };
+
+    @action
+    selectRow = (e: PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => {
+        e.stopPropagation();
+        if (index < 0) return;
         const ctrl = e.ctrlKey || e.metaKey;
         const shift = e.shiftKey;
         if (shift && this._lastSelectedRow !== undefined) {
             const startRow = Math.min(this._lastSelectedRow, index);
             const endRow = Math.max(this._lastSelectedRow, index);
             for (let i = startRow; i <= endRow; i++) {
-                const currDoc: Doc = this.childDocs[i];
-                if (!this._selectedDocs.has(currDoc)) this._selectedDocs.add(currDoc);
+                this.addDocToSelection(this.childDocs[i], true, i);
             }
-            this._lastSelectedRow = endRow;
+            this._lastSelectedRow = index;
         } else if (ctrl) {
             if (!this._selectedDocs.has(doc)) {
-                this._selectedDocs.add(doc);
-                this._lastSelectedRow = index;
+                console.log('add');
+                this.addDocToSelection(doc, true, index);
             } else {
-                this._selectedDocs.delete(doc);
+                console.log('remove');
+                this.removeDocFromSelection(doc);
             }
         } else {
-            this._selectedDocs.clear();
-            this._selectedDocs.add(doc);
-            this._lastSelectedRow = index;
-        }
-
-        if (this._lastSelectedRow && this._selectedDocs.size > 0) {
-            SelectionManager.SelectSchemaViewDoc(this.childDocs[this._lastSelectedRow]);
-        } else {
-            SelectionManager.SelectSchemaViewDoc(undefined);
-        }
-
-        if (this._selectedDocs.size == 1) {
-            this._previewDoc = Array.from(this._selectedDocs)[0];
-        } else {
-            this._previewDoc = undefined;
+            this.clearSelection();
+            this.addDocToSelection(doc, false, index);
         }
     };
 
@@ -381,10 +398,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     startDrag = (e: React.PointerEvent, doc: Doc, ref: HTMLDivElement, index: number) => {
         if (!this._selectedDocs.has(doc)) {
-            this._selectedDocs.clear();
-            this._selectedDocs.add(doc);
-            this._lastSelectedRow = index;
-            SelectionManager.SelectSchemaViewDoc(doc);
+            this.clearSelection();
+            this.addDocToSelection(doc, false, index);
         }
         this._isDragging = true;
         this._selectedDocSortedArray = this.sortedSelectedDocs();
@@ -511,13 +526,9 @@ export class CollectionSchemaView extends CollectionSubView() {
             afterFocus: (didFocus: boolean) => new Promise<ViewAdjustment>(res => setTimeout(async () => res(await endFocus(didFocus)), focusSpeed)),
         });
     };
+
     isChildContentActive = () =>
         this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.rootDoc.childDocumentsActive)) ? true : this.props.childDocumentsActive?.() === false || this.rootDoc.childDocumentsActive === false ? false : undefined;
-    getDocTransform(doc: Doc, dref?: DocumentView) {
-        const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined);
-        // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
-        return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
-    }
 
     render() {
         return (
@@ -531,9 +542,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 <div
                     className="schema-table"
                     onPointerDown={action(() => {
-                        this._selectedDocs.clear();
-                        SelectionManager.SelectSchemaViewDoc(undefined);
-                        this._previewDoc = undefined;
+                        this.clearSelection();
                     })}>
                     <div className="schema-header-row" style={{ height: CollectionSchemaView._rowHeight }}>
                         <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}></div>
@@ -552,7 +561,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                                     addColumn={this.addColumn}
                                     removeColumn={this.removeColumn}
                                     resizeColumn={this.startResize}
-                                    // dragColumn={this.dragColumn}
                                 />
                             );
                         })}
@@ -568,7 +576,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                                         ref={r => (dref = r || undefined)}
                                         LayoutTemplate={this.props.childLayoutTemplate}
                                         LayoutTemplateString={SchemaRowBox.LayoutString(this.props.fieldKey)}
-                                        renderDepth={this.props.renderDepth + 1}
                                         Document={doc}
                                         DataDoc={dataDoc}
                                         ContainingCollectionView={this.props.CollectionView}
@@ -578,7 +585,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                                         styleProvider={DefaultStyleProvider}
                                         focus={this.focusDocument}
                                         docFilters={this.childDocFilters}
-                                        docViewPath={this.props.docViewPath}
                                         docRangeFilters={this.childDocRangeFilters}
                                         searchFilterDocs={this.searchFilterDocs}
                                         rootSelected={this.rootSelected}
@@ -592,25 +598,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                                     />
                                 </div>
                             );
-                            // return (
-                            //     <SchemaRowBox
-                            //         {...this.props}
-                            //         key={index}
-                            //         Document={doc}
-                            //         ContainingCollectionDoc={this.props.CollectionView?.props.Document}
-                            //         ContainingCollectionView={this.props.CollectionView}
-                            //         rowIndex={index}
-                            //         columnKeys={this.columnKeys}
-                            //         columnWidths={this.displayColumnWidths}
-                            //         rowMenuWidth={CollectionSchemaView._rowMenuWidth}
-                            //         selectedDocs={this._selectedDocs}
-                            //         selectRow={this.selectRow}
-                            //         startDrag={this.startDrag}
-                            //         dragging={this._isDragging}
-                            //         dropIndex={this.setDropIndex}
-                            //         addRowRef={this.addRowRef}
-                            //     />
-                            // );
                         })}
                     </div>
                     <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
@@ -618,9 +605,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                 {this.previewWidth > 0 && <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>}
                 {this.previewWidth > 0 && (
                     <div style={{ width: `${this.previewWidth}px` }} ref={ref => (this._previewRef = ref)}>
-                        {this._previewDoc && (
+                        {this._lastSelectedRow !== undefined && (
                             <DocumentView
-                                Document={this._previewDoc}
+                                Document={this.childDocs[this._lastSelectedRow]}
                                 DataDoc={undefined}
                                 fitContentsToBox={returnTrue}
                                 dontCenter={'y'}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index e72ed3c4f..d67e6f2d7 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -1,6 +1,6 @@
 import React = require('react');
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { computed, ObservableSet } from 'mobx';
+import { action, computed, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../../fields/Doc';
 import { undoBatch } from '../../../util/UndoManager';
@@ -12,19 +12,7 @@ import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
 import { Colors } from '../../global/globalEnums';
 import { DocCast, StrCast } from '../../../../fields/Types';
-
-export interface SchemaRowBoxProps extends FieldViewProps {
-    rowIndex: number;
-    columnKeys: string[];
-    columnWidths: number[];
-    rowMenuWidth: number;
-    selectedDocs: ObservableSet<Doc>;
-    selectRow: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => void;
-    startDrag: (e: any, doc: Doc, ref: HTMLDivElement, index: number) => boolean;
-    dragging: boolean;
-    dropIndex: (index: number) => void;
-    addRowRef: (doc: Doc, ref: HTMLDivElement) => void;
-}
+import { setupMoveUpEvents, emptyFunction } from '../../../../Utils';
 
 @observer
 export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -38,7 +26,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @computed get schemaView() {
         const vpath = this.props.docViewPath();
-        console.log(vpath[vpath.length - 2]);
         return vpath.length > 1 ? (vpath[vpath.length - 2].ComponentView as CollectionSchemaView) : undefined;
     }
 
@@ -46,20 +33,25 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return this.props.ContainingCollectionDoc!;
     }
 
+    @computed get rowIndex() {
+        return this.schemaView?.rowIndex(this.rootDoc) ?? -1;
+    }
+
     // isSelected = () => this.props.selectedDocs.has(this.props.Document);
 
-    // @action
-    // onRowPointerDown = (e: React.PointerEvent) => {
-    //     e.stopPropagation();
+    @action
+    onRowPointerDown = (e: React.PointerEvent) => {
+        e.stopPropagation();
 
-    //     setupMoveUpEvents(
-    //         this,
-    //         e,
-    //         e => this.props.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex),
-    //         emptyFunction,
-    //         e => this.props.selectRow(e, this.props.Document, this._ref!, this.props.rowIndex)
-    //     );
-    // };
+        setupMoveUpEvents(
+            this,
+            e,
+            // e => this.schemaView?.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex) ?? true,
+            returnTrue,
+            emptyFunction,
+            e => this.schemaView?.selectRow(e, this.props.Document, this._ref!, this.rowIndex)
+        );
+    };
 
     // onPointerEnter = (e: any) => {
     //     if (!this.props.dragging) return;
@@ -102,8 +94,12 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return (
             <div
                 className="schema-row"
-                style={this.props.isSelected() ? { height: CollectionSchemaView._rowHeight, backgroundColor: Colors.LIGHT_BLUE /*, opacity: this.props.dragging ? 0.5 : 1 */ } : { height: CollectionSchemaView._rowHeight }}
-                // onPointerDown={this.onRowPointerDown}
+                style={
+                    this.props.isSelected()
+                        ? { height: CollectionSchemaView._rowHeight, backgroundColor: Colors.LIGHT_BLUE, pointerEvents: this.schemaView?.props.isContentActive() ? 'all' : undefined /*, opacity: this.props.dragging ? 0.5 : 1 */ }
+                        : { height: CollectionSchemaView._rowHeight, pointerEvents: this.schemaView?.props.isContentActive() ? 'all' : undefined }
+                }
+                onPointerDown={this.onRowPointerDown}
                 // onPointerEnter={this.onPointerEnter}
                 onPointerLeave={this.onPointerLeave}
                 ref={(row: HTMLDivElement | null) => {
@@ -141,3 +137,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
     }
 }
+function // e => this.schemaView?.startDrag(e, this.props.Document, this._ref!, this.props.rowIndex) ?? true,
+returnTrue(e: PointerEvent, down: number[], delta: number[]): boolean {
+    throw new Error('Function not implemented.');
+}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index e2f6d99f1..4cfc5850c 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -21,8 +21,8 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
     render() {
         return (
             <div className="schema-table-cell" style={{ width: this.props.columnWidth }}>
-                {/* {Field.toString(this.props.Document[this.props.fieldKey] as Field)} */}
-                <EditableView contents={Field.toString(this.props.Document[this.props.fieldKey] as Field)} GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} />
+                {Field.toString(this.props.Document[this.props.fieldKey] as Field)}
+                {/* <EditableView contents={Field.toString(this.props.Document[this.props.fieldKey] as Field)} GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> */}
             </div>
         );
     }