fixed schema to not drag rows when schema is not active (selected or child content active)

3 files changed, 60 insertions, 69 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 841222c96..2eda5062b 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -3,13 +3,13 @@ import { Popup, PopupTrigger, Type } from 'browndash-components';
 import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { StopEvent, emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils';
 import { Doc, DocListCast, Field, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { listSpec } from '../../../../fields/Schema';
-import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocUtils, Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager, dropActionType } from '../../../util/DragManager';
@@ -28,8 +28,6 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
-import { TbEmphasis } from 'react-icons/tb';
-import { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript';
 const { default: { SCHEMA_NEW_NODE_HEIGHT } } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export enum ColumnType {
@@ -90,7 +88,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _filterColumnIndex: number | undefined = undefined;
     @observable _filterSearchValue: string = '';
     @observable _selectedCol: number = 0;
-    @observable _selectedCells: Array<Doc> = []; 
+    @observable _selectedCells: Array<Doc> = [];
     @observable _mouseCoordinates = { x: 0, y: 0 };
     @observable _lowestSelectedIndex = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position
     @observable _relCursorIndex = -1; //cursor index relative to the current selected cells
@@ -106,7 +104,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         // get all selected documents then filter out any whose parent is not this schema document
         const selected = SelectionManager.Docs.filter(doc => this.childDocs.includes(doc));
         //  SelectionManager... filter(doc => this.childDocs.includes(doc))
-        //DocCast(doc.embedContainer)[DocData] === this.dataDoc 
+        //DocCast(doc.embedContainer)[DocData] === this.dataDoc
         //SelectionManager.Docs.forEach(doc => console.log("index: " + this.rowIndex(doc) + " equal: " + Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document)));
         if (!selected.length) {
             for (const sel of SelectionManager.Docs) {
@@ -155,7 +153,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get rowHeights() {
-        const heights = this.childDocs.map(() => (this.rowHeightFunc()))
+        const heights = this.childDocs.map(() => this.rowHeightFunc());
         return heights;
     }
 
@@ -233,8 +231,8 @@ export class CollectionSchemaView extends CollectionSubView() {
                         const curDoc = this.sortedDocs.docs[firstIndex];
                         if (firstIndex > 0 && firstIndex < this.childDocs.length) {
                             const newDoc = this.sortedDocs.docs[firstIndex - 1];
-                            if (this._selectedDocs.includes(newDoc)){
-                                SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc))
+                            if (this._selectedDocs.includes(newDoc)) {
+                                SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
                             } else {
                                 const shift: boolean = e.shiftKey;
@@ -273,9 +271,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    changeSelectedCellColumn = () => {
-    
-    }
+    changeSelectedCellColumn = () => {};
 
     @undoBatch
     setColumnSort = (field: string | undefined, desc: boolean = false) => {
@@ -400,7 +396,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         //     document.removeEventListener('pointermove', this.highlightDropColumn);
         //     document.removeEventListener('pointerup', stopHighlight);
         // };
-        // document.addEventListener('pointerup', stopHighlight);   
+        // document.addEventListener('pointerup', stopHighlight);
 
         return true;
     };
@@ -431,7 +427,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu
         let yOffset = this._lowestSelectedIndex * rowHeight;
 
-        const heights = this._selectedDocs.map(() => (this.rowHeightFunc()))
+        const heights = this._selectedDocs.map(() => this.rowHeightFunc());
         let index: number = 0;
         heights.reduce((total, curr, i) => {
             if (total <= adjInitMouseY && total + curr >= adjInitMouseY) {
@@ -441,7 +437,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             return total + curr;
         }, yOffset);
         this._relCursorIndex = index;
-    }
+    };
 
     //Uses current mouse position to calculate the indexes of actively dragged docs
     findRowDropIndex = (mouseY: number) => {
@@ -475,13 +471,13 @@ export class CollectionSchemaView extends CollectionSubView() {
             colRef.style.borderRight = edgeStyle;
             colRef.style.borderTop = edgeStyle;
 
-            for (let doc = 0; doc < this.childDocs.length; ++doc){
-                if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])){
+            for (let doc = 0; doc < this.childDocs.length; ++doc) {
+                if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])) {
                     continue;
                 } else {
                     this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderLeft = edgeStyle;
                     this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderRight = edgeStyle;
-                    if (doc === this.childDocs.length - 1){
+                    if (doc === this.childDocs.length - 1) {
                         this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle;
                     }
                 }
@@ -520,9 +516,9 @@ export class CollectionSchemaView extends CollectionSubView() {
         const endRow = Math.max(lastSelectedRow, index);
         for (let i = startRow; i <= endRow; i++) {
             const currDoc = this.sortedDocs.docs[i];
-            if (!this._selectedDocs.includes(currDoc)){
-                this.selectCell(currDoc, this._selectedCol, false, true)
-            } 
+            if (!this._selectedDocs.includes(currDoc)) {
+                this.selectCell(currDoc, this._selectedCol, false, true);
+            }
         }
     };
 
@@ -537,12 +533,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         const lastSelected = Array.from(this._selectedDocs).lastElement();
         if (shiftKey && lastSelected && !this._selectedDocs.includes(doc)) this.selectRows(doc, lastSelected);
         else if (ctrlKey) {
-            if (lastSelected && this._selectedDocs.includes(doc)){
-                SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc))
+            if (lastSelected && this._selectedDocs.includes(doc)) {
+                SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc));
                 this.deselectCell(doc);
             } else this.addDocToSelection(doc, true, index);
-        }
-        else this.addDocToSelection(doc, false, index);
+        } else this.addDocToSelection(doc, false, index);
         this._selectedCol = col;
 
         if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index;
@@ -553,22 +548,22 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     deselectCell = (doc: Doc) => {
         this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
-        if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc)))
+        if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc)));
     };
 
     @action
     deselectAllCells = () => {
         this._selectedCells = [];
         this._lowestSelectedIndex = -1;
-    }
+    };
 
     sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
 
     @computed
-    get rowDropIndex(){
+    get rowDropIndex() {
         const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1];
         const index = this.findRowDropIndex(mouseY);
-        return index
+        return index;
     }
 
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
@@ -583,7 +578,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 colRef.style.borderTop = '';
 
                 this.childDocs.forEach(doc => {
-                    if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)){
+                    if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)) {
                         this._rowEles.get(doc).children[1].children[i].style.borderLeft = '';
                         this._rowEles.get(doc).children[1].children[i].style.borderRight = '';
                         this._rowEles.get(doc).children[1].children[i].style.borderBottom = '';
@@ -595,8 +590,8 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            let map = draggedDocs?.map(doc => this.rowIndex(doc))
-            console.log(map)
+            let map = draggedDocs?.map(doc => this.rowIndex(doc));
+            console.log(map);
             this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]);
             this.clearSelection();
             draggedDocs.forEach(doc => {
@@ -690,15 +685,14 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     setColumnValues = (key: string, value: string) => {
-        const selectedDocs: Doc[] = new Array;
+        const selectedDocs: Doc[] = new Array();
         this.childDocs.forEach(doc => {
             let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
-            if (docIsSelected){
+            if (docIsSelected) {
                 selectedDocs.push(doc);
-                }
             }
-        );
-        if (selectedDocs.length === 1){
+        });
+        if (selectedDocs.length === 1) {
             this.childDocs.forEach(doc => KeyValueBox.SetField(doc, key, value));
         } else {
             selectedDocs.forEach(doc => KeyValueBox.SetField(doc, key, value));
@@ -709,11 +703,10 @@ export class CollectionSchemaView extends CollectionSubView() {
     setSelectedColumnValues = (key: string, value: string) => {
         this.childDocs.forEach(doc => {
             let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
-            if (docIsSelected){
-                KeyValueBox.SetField(doc, key, value)
-                }
+            if (docIsSelected) {
+                KeyValueBox.SetField(doc, key, value);
             }
-        );
+        });
         return true;
     };
 
@@ -973,24 +966,25 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-        if (DragManager.docsBeingDragged.length){
+        if (DragManager.docsBeingDragged.length) {
             this._mouseCoordinates = { x: e.clientX, y: e.clientY };
         }
-        if (this._colBeingDragged){
+        if (this._colBeingDragged) {
             let newIndex = this.findColDropIndex(e.clientX);
             if (newIndex != this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
             this._draggedColIndex = newIndex ? newIndex : this._draggedColIndex;
-            this.highlightDraggedColumn(newIndex ?? this._draggedColIndex)
+            this.highlightDraggedColumn(newIndex ?? this._draggedColIndex);
         }
-    }
+    };
 
     @computed get sortedDocs() {
         const field = StrCast(this.layoutDoc.sortField);
-        const desc = BoolCast(this.layoutDoc.sortDesc);  // is this an ascending or descending sort
+        const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
         const staticDocs = this.childDocs.filter(d => !DragManager.docsBeingDragged.includes(d));
         const docs = !field
             ? staticDocs
-            : [...staticDocs].sort((docA, docB) => { // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
+            : [...staticDocs].sort((docA, docB) => {
+                  // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
                   const aStr = Field.toString(docA[field] as Field);
                   const bStr = Field.toString(docB[field] as Field);
                   var out = 0;
@@ -1000,7 +994,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                   return out;
               });
 
-        docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged)
+        docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged);
         return { docs };
     }
 
@@ -1013,10 +1007,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     _oldWheel: any;
     render() {
         return (
-            <div className="collectionSchemaView" 
-            ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
-            onDrop={this.onExternalDrop.bind(this)} 
-            onPointerMove={(e) => this.onPointerMove(e)}>
+            <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }}></div>
                 <div
                     className="schema-table"
@@ -1155,6 +1146,7 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV
         if (property === StyleProp.Opacity) return 1;
         return DefaultStyleProvider(doc, props, property);
     };
+    isRowContentActive = () => this._props.schema.isContentActive() || this._props.schema._props.isSelected() || this._props.schema._props.isAnyChildContentActive();
     render() {
         return (
             <DocumentView
@@ -1180,7 +1172,7 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV
                 ScreenToLocalTransform={this.screenToLocalXf}
                 dragWhenActive={true}
                 isDocumentActive={this._props.schema._props.childDocumentsActive?.() ? this._props.schema._props.isDocumentActive : this._props.schema.isContentActive}
-                isContentActive={emptyFunction}
+                isContentActive={this.isRowContentActive}
                 whenChildContentsActiveChanged={this._props.schema._props.whenChildContentsActiveChanged}
                 hideDecorations={true}
                 hideTitle={true}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 7e40ef766..f5618db96 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -5,11 +5,9 @@ import { computedFn } from 'mobx-utils';
 import * as React from 'react';
 import { CgClose, CgLock, CgLockUnlock } from 'react-icons/cg';
 import { FaExternalLinkAlt } from 'react-icons/fa';
-import { StopEvent, emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
 import { Doc } from '../../../../fields/Doc';
 import { BoolCast } from '../../../../fields/Types';
-import { DragManager } from '../../../util/DragManager';
-import { SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
 import { undoable } from '../../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../../DocComponent';
@@ -66,7 +64,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return (
             <div
                 className="schema-row"
-                onPointerDown={(e) => this.setCursorIndex(e.clientY)}
+                onPointerDown={e => this.setCursorIndex(e.clientY)}
                 style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }}
                 ref={(row: HTMLDivElement | null) => {
                     row && this.schemaView?.addRowRef?.(this.Document, row);
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 6bbc4dfa6..f6f3a24a9 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import Select from 'react-select';
-import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero } from '../../../../Utils';
+import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils';
 import { DateField } from '../../../../fields/DateField';
 import { Doc, DocListCast, Field } from '../../../../fields/Doc';
 import { RichTextField } from '../../../../fields/RichTextField';
@@ -17,6 +17,7 @@ import { FInfo, FInfoFieldType } from '../../../documents/Documents';
 import { DocFocusOrOpen } from '../../../util/DocumentManager';
 import { dropActionType } from '../../../util/DragManager';
 import { SettingsManager } from '../../../util/SettingsManager';
+import { SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
 import { undoBatch, undoable } from '../../../util/UndoManager';
 import { EditableView } from '../../EditableView';
@@ -29,7 +30,6 @@ import { KeyValueBox } from '../../nodes/KeyValueBox';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { ColumnType, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
-import { SnappingManager } from '../../../util/SnappingManager';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -110,7 +110,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
     @computed get selected() {
         const selectedDocs: Doc[] | undefined = this._props.selectedCells();
-        let isSelected = this._props.isRowActive() && (selectedDocs?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        let isSelected = this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
         return isSelected;
     }
 
@@ -178,7 +178,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         }
     }
 
-    
     render() {
         return (
             <div
@@ -187,11 +186,13 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 onPointerDown={action(e => {
                     const shift: boolean = e.shiftKey;
                     const ctrl: boolean = e.ctrlKey;
-                    if (this.selected && ctrl) {
-                        this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
-                        e.stopPropagation();
-                    } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl)}
-                    )}
+                    if (this._props.isRowActive?.() !== false) {
+                        if (this.selected && ctrl) {
+                            this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                            e.stopPropagation();
+                        } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                    }
+                })}
                 style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}>
                 {this.content}
             </div>
@@ -324,7 +325,7 @@ export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps
 
     @computed get selected() {
         const selected = this._props.selectedCells();
-        return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
         //return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col;
     }
     selectedFunc = () => this.selected;
@@ -347,7 +348,7 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
 
     @computed get selected() {
         const selected = this._props.selectedCells();
-        return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
     }
     render() {
         const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
@@ -392,7 +393,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
 
     @computed get selected() {
         const selected = this._props.selectedCells();
-        return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
     }
     render() {
         const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);