From ee77b8ff032d4b06c2f0b6ac8153a32e54ab8355 Mon Sep 17 00:00:00 2001 From: mehekj Date: Thu, 11 Aug 2022 14:28:09 -0400 Subject: drag and drop rows works, needs cleaning up --- .../collectionSchema/CollectionSchemaView.scss | 1 + .../collectionSchema/CollectionSchemaView.tsx | 78 ++++++++++++---------- .../collections/collectionSchema/SchemaRowBox.tsx | 14 +++- 3 files changed, 54 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 0f4053127..5ead99c02 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -2,6 +2,7 @@ .collectionSchemaView { cursor: default; + height: 100%; .schema-table { background-color: $white; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 9ca1644e3..dc0cd8eac 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,18 +1,15 @@ import React = require('react'); -import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx'; +import { action, computed, observable, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; import { Doc } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; import { Cast } from '../../../../fields/Types'; +import { DragManager } from '../../../util/DragManager'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; -import { DragManager } from '../../../util/DragManager'; -import { PresBox } from '../../nodes/trails/PresBox'; -import { UndoManager } from '../../../util/UndoManager'; -import { returnFalse } from '../../../../Utils'; export enum ColumnType { Number, @@ -26,9 +23,12 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'text', 'data', @observer export class CollectionSchemaView extends CollectionSubView() { + private _ref: HTMLDivElement | null = null; private _lastSelectedRow: number | undefined; + private _selectedDocSortedArray: Doc[] = []; + private _closestDropIndex: number = 0; - @observable _rowMenuWidth: number = 60; + @observable _rowMenuWidth: number = 100; @observable _selectedDocs: ObservableSet = new ObservableSet(); @observable _isDragging: boolean = false; @@ -53,13 +53,12 @@ export class CollectionSchemaView extends CollectionSubView() { }; @action - selectRow = (e: React.PointerEvent, doc: Doc) => { + selectRow = (e: React.PointerEvent, doc: Doc, index: number) => { const ctrl = e.ctrlKey || e.metaKey; const shift = e.shiftKey; if (shift && this._lastSelectedRow !== undefined) { - const currRowIndex = this.childDocs.indexOf(doc); - const startRow = Math.min(this._lastSelectedRow, currRowIndex); - const endRow = Math.max(this._lastSelectedRow, currRowIndex); + 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); @@ -68,14 +67,14 @@ export class CollectionSchemaView extends CollectionSubView() { } else if (ctrl) { if (!this._selectedDocs.has(doc)) { this._selectedDocs.add(doc); - this._lastSelectedRow = this.childDocs.indexOf(doc); + this._lastSelectedRow = index; } else { this._selectedDocs.delete(doc); } } else { this._selectedDocs.clear(); this._selectedDocs.add(doc); - this._lastSelectedRow = this.childDocs.indexOf(doc); + this._lastSelectedRow = index; } }; @@ -84,17 +83,19 @@ export class CollectionSchemaView extends CollectionSubView() { return this.childDocs.filter(doc => this._selectedDocs.has(doc)); }; - @action.bound - moveDocument = (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => { - console.log('hello'); - console.log(targetCollection?.title); - if (Doc.AreProtosEqual(this.props.Document, targetCollection)) { - console.log('hi'); - return true; - } - const first = document instanceof Doc ? document : document[0]; - if (!first?._stayInCollection && addDocument !== returnFalse) { - UndoManager.RunInTempBatch(() => this.props.removeDocument?.(document) && addDocument(document)); + setDropIndex = (index: number) => { + this._closestDropIndex = index; + }; + + @action + onInternalDrop = (e: Event, de: DragManager.DropEvent) => { + if (super.onInternalDrop(e, de)) { + this._isDragging = false; + const pushedDocs: Doc[] = this.childDocs.filter((doc: Doc, index: number) => index >= this._closestDropIndex && !this._selectedDocs.has(doc)); + this.props.removeDocument?.(pushedDocs); + this.props.removeDocument?.(this._selectedDocSortedArray); + this.addDocument(this._selectedDocSortedArray); + this.addDocument(pushedDocs); return true; } return false; @@ -102,14 +103,18 @@ export class CollectionSchemaView extends CollectionSubView() { @action startDrag = (e: React.PointerEvent, doc: Doc) => { - if (this._selectedDocs.size === 0) this._selectedDocs.add(doc); + if (!this._selectedDocs.has(doc)) { + this._selectedDocs.clear(); + this._selectedDocs.add(doc); + } this._isDragging = true; - const dragData = new DragManager.DocumentDragData(this.sortedSelectedDocs(), 'move'); - dragData.moveDocument = this.moveDocument; + this._selectedDocSortedArray = this.sortedSelectedDocs(); + const dragData = new DragManager.DocumentDragData(this._selectedDocSortedArray, 'move'); + dragData.moveDocument = this.props.moveDocument; const dragItem: HTMLElement[] = []; const dragDiv = document.createElement('div'); dragDiv.className = 'presItem-multiDrag'; - dragDiv.innerText = 'Move ' + this._selectedDocs.size + ' rows'; + dragDiv.innerText = 'Move ' + this._selectedDocs.size + ' row' + (this._selectedDocs.size > 1 ? 's' : ''); dragDiv.style.position = 'absolute'; dragDiv.style.top = e.clientY + 'px'; dragDiv.style.left = e.clientX - 50 + 'px'; @@ -122,18 +127,18 @@ export class CollectionSchemaView extends CollectionSubView() { e.clientY, undefined ); - this._isDragging = false; return true; }; - @action - endDrag = (e: React.PointerEvent) => { - // this._isDragging = false; - }; - render() { return ( -
+
{ + this._ref = ele; + this.createDashEventsTarget(ele); + }} + onPointerDown={() => this._selectedDocs.clear()}>
{this.columnKeys.map((key, index) => ( @@ -141,20 +146,21 @@ export class CollectionSchemaView extends CollectionSubView() { ))}
- {this.childDocs.map((doc: Doc) => ( + {this.childDocs.map((doc: Doc, index: number) => ( ))}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 0065a0938..8b658d834 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -13,14 +13,15 @@ import { emptyFunction, setupMoveUpEvents } from '../../../../Utils'; import { DragManager } from '../../../util/DragManager'; export interface SchemaRowBoxProps extends FieldViewProps { + rowIndex: number; columnKeys: string[]; columnWidths: number[]; rowMenuWidth: number; selectedRows: ObservableSet; - selectRow: (e: any, doc: Doc) => void; + selectRow: (e: any, doc: Doc, index: number) => void; startDrag: (e: any, doc: Doc) => boolean; - endDrag: (e: any) => void dragging: boolean; + dropIndex: (index: number) => void; } @observer @@ -38,16 +39,18 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { this, e, (e) => this.props.startDrag(e, this.props.Document), emptyFunction, - (e) => this.props.selectRow(e, this.props.Document) + (e) => this.props.selectRow(e, this.props.Document, this.props.rowIndex) ) } onPointerEnter = (e: any) => { + if (!this.props.dragging) return; document.removeEventListener('pointermove', this.onPointerMove); document.addEventListener('pointermove', this.onPointerMove); }; onPointerMove = (e: any) => { + if (!this.props.dragging) return; let dragIsRow: boolean = true; DragManager.docsBeingDragged.forEach(doc => { dragIsRow = this.props.selectedRows.has(doc); @@ -60,9 +63,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { if (y <= halfLine) { this._ref.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; this._ref.style.borderBottom = '0px'; + this.props.dropIndex(this.props.rowIndex); } else if (y > halfLine) { this._ref.style.borderTop = '0px'; this._ref.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; + this.props.dropIndex(this.props.rowIndex + 1); } } }; @@ -85,6 +90,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent() {
{e.stopPropagation(); this.props.addDocTab(this.props.Document, 'add:right')}}>
+
+ {this.props.rowIndex} +
{this.props.columnKeys.map((key, index) => ( -- cgit v1.2.3-70-g09d2