From 09383542d6b7550f78bc8fba70861454825af150 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Wed, 26 Apr 2023 17:22:58 -0400
Subject: fixed schema row arrow key movement and scrolling

---
 .../collectionSchema/CollectionSchemaView.tsx      | 45 +++++++++++++++-------
 1 file changed, 31 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 1f76c8099..f1bbc76b4 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -51,6 +51,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _previewRef: HTMLDivElement | null = null;
     private _makeNewColumn: boolean = false;
     private _documentOptions: DocumentOptions = new DocumentOptions();
+    private _tableContentRef: HTMLDivElement | null = null;
 
     public static _rowHeight: number = 50;
     public static _minColWidth: number = 25;
@@ -147,7 +148,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     rowIndex(doc: Doc) {
-        return this.childDocs.indexOf(doc);
+        return this.sortedDocs.docs.indexOf(doc);
     }
 
     componentDidMount() {
@@ -167,28 +168,34 @@ export class CollectionSchemaView extends CollectionSubView() {
                     {
                         const lastDoc = this._selectedDocs.lastElement();
                         const lastIndex = this.rowIndex(lastDoc);
-                        const curDoc = this.childDocs[lastIndex];
+                        const curDoc = this.sortedDocs.docs[lastIndex];
+                        // const curDoc = this.childDocs[lastIndex];
                         if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
                             !e.shiftKey && this.clearSelection();
-                            const newDoc = this.childDocs[lastIndex + 1];
+                            const newDoc = this.sortedDocs.docs[lastIndex + 1];
                             if (this._selectedDocs.includes(newDoc)) SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc));
                             else this.addDocToSelection(newDoc, e.shiftKey, lastIndex + 1);
+                            this.scrollToDoc(newDoc, {});
                         }
                         e.stopPropagation();
+                        e.preventDefault();
                     }
                     break;
                 case 'ArrowUp':
                     {
                         const firstDoc = this._selectedDocs.lastElement();
                         const firstIndex = this.rowIndex(firstDoc);
-                        const curDoc = this.childDocs[firstIndex];
+                        // const curDoc = this.childDocs[firstIndex];
+                        const curDoc = this.sortedDocs.docs[firstIndex];
                         if (firstIndex > 0 && firstIndex < this.childDocs.length) {
                             !e.shiftKey && this.clearSelection();
-                            const newDoc = this.childDocs[firstIndex - 1];
+                            const newDoc = this.sortedDocs.docs[firstIndex - 1];
                             if (this._selectedDocs.includes(newDoc)) SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc));
                             else this.addDocToSelection(newDoc, e.shiftKey, firstIndex - 1);
+                            this.scrollToDoc(newDoc, {});
                         }
                         e.stopPropagation();
+                        e.preventDefault();
                     }
                     break;
             }
@@ -474,18 +481,21 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     focusDocument = (doc: Doc, options: DocFocusOptions) => {
         Doc.BrushDoc(doc);
+        this.scrollToDoc(doc, options);
+        return undefined;
+    };
 
-        const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]);
+    scrollToDoc = (doc: Doc, options: DocFocusOptions) => {
+        const found = this._tableContentRef && Array.from(this._tableContentRef.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]);
         if (found) {
-            const top = found.getBoundingClientRect().top;
-            const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top);
-            if (Math.floor(localTop[1]) !== 0) {
-                let focusSpeed = options.zoomTime ?? 500;
-                smoothScroll(focusSpeed, this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc);
+            const rect = found.getBoundingClientRect();
+            const localRect = this.props.ScreenToLocalTransform().transformBounds(rect.left, rect.top, rect.width, rect.height);
+            if (localRect.y < CollectionSchemaView._rowHeight || localRect.y + localRect.height > this.props.PanelHeight()) {
+                let focusSpeed = options.zoomTime ?? 100;
+                smoothScroll(focusSpeed, this._tableContentRef!, localRect.y + this._tableContentRef!.scrollTop - CollectionSchemaView._rowHeight, options.easeFunc);
                 return focusSpeed;
             }
         }
-        return undefined;
     };
 
     @computed get fieldDefaultInput() {
@@ -840,7 +850,13 @@ export class CollectionSchemaView extends CollectionSubView() {
                     </div>
                     {this._columnMenuIndex !== undefined && this.renderColumnMenu}
                     {this._filterColumnIndex !== undefined && this.renderFilterMenu}
-                    <CollectionSchemaViewDocs schema={this} childDocs={this.sortedDocsFunc} />
+                    <CollectionSchemaViewDocs
+                        schema={this}
+                        childDocs={this.sortedDocsFunc}
+                        setRef={(ref: HTMLDivElement | null) => {
+                            this._tableContentRef = ref;
+                        }}
+                    />
                     <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} height={CollectionSchemaView._newNodeInputHeight} />
                 </div>
                 {this.previewWidth > 0 && <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>}
@@ -884,6 +900,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
 interface CollectionSchemaViewDocsProps {
     schema: CollectionSchemaView;
+    setRef: (ref: HTMLDivElement | null) => void;
     childDocs: () => { docs: Doc[] };
 }
 
@@ -894,7 +911,7 @@ class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsP
     childScreenToLocal = computedFn((index: number) => () => this.props.schema.props.ScreenToLocalTransform().translate(0, -CollectionSchemaView._rowHeight - index * this.rowHeightFunc()));
     render() {
         return (
-            <div className="schema-table-content" style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + CollectionSchemaView._rowHeight}px)` }}>
+            <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + CollectionSchemaView._rowHeight}px)` }}>
                 {this.props.childDocs().docs.map((doc: Doc, index: number) => {
                     const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField ? undefined : this.props.schema.props.DataDoc;
                     return (
-- 
cgit v1.2.3-70-g09d2